fix: low hanging fruits

merkl.config.ts

@@ -1,6 +1,6 @@
 import { createColoring } from "dappkit";
 import { createConfig } from "src/config/type";
-import { http } from "viem";
+import { createClient, custom, http } from "viem";
 import {
   mainnet,
   optimism,
@@ -37,33 +37,19 @@ import {
 } from "viem/chains";
 import { coinbaseWallet, walletConnect } from "wagmi/connectors";
 import hero from "src/customer/assets/images/hero.jpg?url";
+import { eip712WalletActions } from "viem/zksync";
 
 export default createConfig({
   appName: "Merkl",
   modes: ["dark", "light"],
   defaultTheme: "merkl",
   themes: {
     merkl: {
-      base: createColoring(
-        ["#1F2333", "#B8AAFD", "#131620"],
-        ["#FCF8F5", "#B8AAFD", "white"]
-      ),
-      info: createColoring(
-        ["#2ABDFF", "#2ABDFF", "#131620"],
-        ["#FFFFFF", "#40B66B", "white"]
-      ),
-      good: createColoring(
-        ["#40B66B", "#40B66B", "#131620"],
-        ["#FFFFFF", "#40B66B", "white"]
-      ),
-      warn: createColoring(
-        ["#ff9600", "#ff9600", "#131620"],
-        ["#FFFFFF", "#40B66B", "white"]
-      ),
-      harm: createColoring(
-        ["#d22e14", "#d22e14", "#131620"],
-        ["#FFFFFF", "#40B66B", "white"]
-      ),
+      base: createColoring(["#1F2333", "#B8AAFD", "#131620"], ["#FCF8F5", "#B8AAFD", "white"]),
+      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
     },
   },
   sizing: {
@@ -80,11 +66,6 @@ export default createConfig({
       route: "/",
       key: crypto.randomUUID(),
     },
-    dashboard: {
-      icon: "RiDashboard2Fill",
-      route: "/user",
-      key: crypto.randomUUID(),
-    },
     opportunities: {
       icon: "RiPlanetFill",
       route: "/opportunities",
@@ -95,12 +76,6 @@ export default createConfig({
       route: "/protocols",
       key: crypto.randomUUID(),
     },
-    bridge: {
-      icon: "RiVipCrown2Fill",
-      route: "/bridge",
-      key: crypto.randomUUID(),
-    },
-    faq: { icon: "RiQuestionFill", route: "/faq", key: crypto.randomUUID() },
     terms: {
       icon: "RiCompassesLine",
       route: "/terms",
@@ -156,6 +131,12 @@ export default createConfig({
       taiko,
       scroll,
     ],
+    client({ chain }) {
+      if (chain.id === zksync.id)
+        return createClient({ chain, transport: custom(window.ethereum!) }).extend(eip712WalletActions());
+      return createClient({ chain, transport: http() });
+    },
+    ssr: true,
     connectors: [
       coinbaseWallet(),
       walletConnect({
@@ -169,9 +150,5 @@ export default createConfig({
         },
       }),
     ],
-    transports: {
-      [zksync.id]: http(),
-      [optimism.id]: http(),
-    },
   },
 });

package.json

@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "@acab/ecsstatic": "^0.8.0",
-    "@angleprotocol/merkl-api": "0.10.69",
+    "@merkl/api": "0.10.78",
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",

src/api/index.client.ts

@@ -1,4 +1,4 @@
-import { MerklApi } from "@angleprotocol/merkl-api";
+import { MerklApi } from "@merkl/api";
 
 const api = MerklApi((window as { ENV?: { API_URL?: string } })?.ENV?.API_URL ?? "https://api.merkl.xyz");
 

src/api/index.server.ts

@@ -1,4 +1,4 @@
-import { MerklApi } from "@angleprotocol/merkl-api";
+import { MerklApi } from "@merkl/api";
 
 const api = MerklApi(process.env.API_URL ?? "https://api.merkl.xyz");
 

src/api/services/chain.service.ts

@@ -1,4 +1,4 @@
-import type { Chain } from "@angleprotocol/merkl-api";
+import type { Chain } from "@merkl/api";
 import { api } from "../index.server";
 
 export abstract class ChainService {

src/api/services/opportunity.service.ts

@@ -1,4 +1,4 @@
-import type { Opportunity } from "@angleprotocol/merkl-api";
+import type { Opportunity } from "@merkl/api";
 import config from "merkl.config";
 import { api } from "../index.server";
 
@@ -48,8 +48,11 @@ export abstract class OpportunityService {
     return query;
   }
 
-  static async getManyFromRequest(request: Request) {
-    return OpportunityService.getMany(OpportunityService.#getQueryFromRequest(request));
+  static async getManyFromRequest(
+    request: Request,
+    overrides?: Parameters<typeof api.v4.opportunities.index.get>[0]["query"],
+  ) {
+    return OpportunityService.getMany(Object.assign(OpportunityService.#getQueryFromRequest(request), overrides ?? {}));
   }
 
   static async getMany(

src/api/services/protocol.service.ts

@@ -1,4 +1,4 @@
-import type { Protocol } from "@angleprotocol/merkl-api";
+import type { Protocol } from "@merkl/api";
 import { api } from "../index.server";
 
 export abstract class ProtocolService {
@@ -14,9 +14,47 @@ export abstract class ProtocolService {
     return data;
   }
 
+  /**
+   * Retrieves protocols query params from page request
+   * @param request request containing query params such as paginatio
+   * @param override params for which to override value
+   * @returns query
+   */
+  static #getQueryFromRequest(
+    request: Request,
+    override?: Parameters<typeof api.v4.opportunities.index.get>[0]["query"],
+  ) {
+    const page = new URL(request.url).searchParams.get("page");
+    const items = new URL(request.url).searchParams.get("items");
+    const search = new URL(request.url).searchParams.get("search");
+
+    const [sort, order] = new URL(request.url).searchParams.get("sort")?.split("-") ?? [];
+
+    const filters = Object.assign(
+      { items, sort, order, name: search, page },
+      override ?? {},
+      page !== null && { page: Number(page) - 1 },
+    );
+
+    const query = Object.entries(filters).reduce(
+      (_query, [key, filter]) => Object.assign(_query, filter == null ? {} : { [key]: filter }),
+      {},
+    );
+
+    return query;
+  }
+
   static async get(query: { id: string }): Promise<Protocol> {
     const protocol = await ProtocolService.#fetch(async () => api.v4.protocols(query).get({ query }));
 
     return protocol;
   }
+
+  static async getManyFromRequest(request: Request): Promise<{ protocols: Protocol[]; count: number }> {
+    const query = ProtocolService.#getQueryFromRequest(request);
+    const protocols = await ProtocolService.#fetch(async () => api.v4.protocols.index.get({ query }));
+    const count = await ProtocolService.#fetch(async () => api.v4.protocols.count.get({ query }));
+
+    return { protocols, count };
+  }
 }

src/api/services/reward.service.ts

@@ -1,4 +1,4 @@
-import type { Reward } from "@angleprotocol/merkl-api";
+import type { Reward } from "@merkl/api";
 import { api } from "../index.server";
 
 export abstract class RewardService {

src/api/services/token.service.ts

@@ -1,10 +1,10 @@
-import type { Token } from "@angleprotocol/merkl-api";
+import type { Token } from "@merkl/api";
 import { api } from "../index.server";
 
 export abstract class TokenService {
   static async #fetch<R, T extends { data: R; status: number }>(
     call: () => Promise<T>,
-    resource = "Chain",
+    resource = "Token",
   ): Promise<NonNullable<T["data"]>> {
     const { data, status } = await call();
 
@@ -14,6 +14,44 @@ export abstract class TokenService {
     return data;
   }
 
+  /**
+   * Retrieves tokens query params from page request
+   * @param request request containing query params such as pagination
+   * @param override params for which to override value
+   * @returns query
+   */
+  static #getQueryFromRequest(
+    request: Request,
+    override?: Parameters<typeof api.v4.opportunities.index.get>[0]["query"],
+  ) {
+    const page = new URL(request.url).searchParams.get("page");
+    const items = new URL(request.url).searchParams.get("items");
+    const search = new URL(request.url).searchParams.get("search");
+
+    const [sort, order] = new URL(request.url).searchParams.get("sort")?.split("-") ?? [];
+
+    const filters = Object.assign(
+      { items, sort, order, name: search, page },
+      override ?? {},
+      page !== null && { page: Number(page) - 1 },
+    );
+
+    const query = Object.entries(filters).reduce(
+      (_query, [key, filter]) => Object.assign(_query, filter == null ? {} : { [key]: filter }),
+      {},
+    );
+
+    return query;
+  }
+
+  static async getManyFromRequest(request: Request): Promise<{ tokens: Token[]; count: number }> {
+    const query = TokenService.#getQueryFromRequest(request);
+    const tokens = await TokenService.#fetch(async () => api.v4.tokens.index.get({ query }));
+    const count = await TokenService.#fetch(async () => api.v4.tokens.count.get({ query }));
+
+    return { tokens, count };
+  }
+
   static async getMany(query: Parameters<typeof api.v4.tokens.index.get>[0]["query"]): Promise<Token[]> {
     const tokens = await TokenService.#fetch(async () => api.v4.tokens.index.get({ query }));
 

src/api/types.ts

@@ -1,3 +1,3 @@
-import type { MerklApi } from "@angleprotocol/merkl-api";
+import type { MerklApi } from "@merkl/api";
 
 export type Api = ReturnType<typeof MerklApi>;