update: merkl-app

merkl.config.ts

@@ -47,10 +47,30 @@ export default createConfig({
   appName: "Merkl",
   modes: ["dark", "light"],
   defaultTheme: "ignite",
-  tags: [],
-  opportunityNavigationMode: "direct",
+  opportunityNavigationMode: "supply",
+  opportunityCellHideTags: ["token", "action"],
   rewardsNavigationMode: "chain",
+  opportunityLibraryDefaultView: "cells",
+  opprtunityPercentage: true,
+  hideLayerMenuHomePage: false,
   deposit: true,
+  walletOptions: {
+    sponsorTransactions: true,
+    client(c) {
+      if (c.chain?.id === zksync.id) return c.extend(eip712WalletActions());
+    },
+  },
+  chains: [],
+  tags: [],
+  opportunity: {
+    featured: {
+      enabled: false,
+      length: 6,
+    },
+  },
+  bridge: {
+    helperLink: "",
+  },
   themes: {
     ignite: {
       base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
@@ -95,21 +115,16 @@ export default createConfig({
       route: "/",
       key: uuidv4(),
     },
-    opportunities: {
-      icon: "RiPlanetFill",
-      route: "/opportunities",
+    protocols: {
+      icon: "RiVipCrown2Fill",
+      route: "/protocols",
+      key: uuidv4(),
+    },
+    bridge: {
+      icon: "RiCompassesLine",
+      route: "/bridge",
       key: uuidv4(),
     },
-    // protocols: {
-    //   icon: "RiVipCrown2Fill",
-    //   route: "/protocols",
-    //   key: uuidv4(),
-    // },
-    // bridge: {
-    //   icon: "RiCompassesLine",
-    //   route: "/bridge",
-    //   key: uuidv4(),
-    // },
     docs: {
       icon: "RiFile4Fill",
       external: true,
@@ -132,6 +147,21 @@ export default createConfig({
     //   key: uuidv4(),
     // },
   },
+  header: {
+    searchbar: {
+      enabled: true,
+    },
+    // terms: {
+    //   icon: "RiCompassesLine",
+    //   route: "/terms",
+    //   key: uuidv4(),
+    // },
+    // privacy: {
+    //   icon: "RiInformationFill",
+    //   route: "/privacy",
+    //   key: uuidv4(),
+    // },
+  },
   socials: {
     discord: "",
     telegram: "https://t.me/+2T0RNabX2ANkMzAx",

package.json

@@ -18,7 +18,8 @@
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",
-    "@merkl/api": "0.10.188",
+    "@lifi/widget": "^3.13.1",
+    "@merkl/api": "0.10.222",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@remix-run/dev": "^2.11.2",
@@ -42,15 +43,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-responsive": "^10.0.0",
+    "react-toastify": "^11.0.2",
     "remix-utils": "^7.7.0",
     "save": "^2.9.0",
     "tailwindcss": "^3.4.12",
     "tailwindcss-animate": "^1.0.7",
     "typedoc": "^0.26.7",
     "uuid": "^11.0.3",
-    "viem": "2.21.54",
+    "viem": "2.21.33",
     "vite-plugin-dts": "^4.2.1",
-    "wagmi": "^2.12.29",
+    "wagmi": "^2.14.6",
     "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {

src/I18n/en.ts

@@ -0,0 +1,20 @@
+const en = {
+  pages: {
+    home: {
+      depositInformation: "",
+    },
+    opportunities: {
+      title: "Explore opportunities",
+      description: "Browse opportunities, compare rewards, and earn tokens",
+    },
+    campaings: {
+      title: "Explore opportunities",
+      description: "Browse opportunities, compare rewards, and earn tokens",
+    },
+    bridge: {
+      helper: "",
+    },
+  },
+};
+
+export default en;

src/I18n/index.ts

@@ -0,0 +1,34 @@
+import en from "./en";
+
+type LanguageFiles = typeof en;
+
+/**
+ * I18n class to handle translations
+ */
+export class I18n {
+  public static readonly trad: I18n = new I18n(en);
+
+  private primary: LanguageFiles;
+  // private secondary: LanguageFiles;
+
+  public get: LanguageFiles;
+
+  constructor(primary: LanguageFiles) {
+    this.primary = primary;
+    // this.secondary = secondary;
+    this.get = this.createProxy(this.primary);
+  }
+
+  // proxy to handle typing autocompletion
+  private createProxy<T extends object>(obj: T): T {
+    return new Proxy(obj, {
+      get: (target, prop) => {
+        const value = target[prop as keyof T];
+        if (typeof value === "object" && value !== null) {
+          return this.createProxy(value as object);
+        }
+        return value;
+      },
+    });
+  }
+}

src/api/services/claims.service.ts

@@ -1,3 +1,4 @@
+import config from "merkl.config";
 import { api } from "../index.server";
 import { fetchWithLogs } from "../utils";
 
@@ -14,7 +15,11 @@ export abstract class ClaimsService {
     return data;
   }
 
+  // should be paginated
   static async getForUser(address: string) {
-    return await ClaimsService.#fetch(async () => api.v4.claims({ address }).get());
+    const chainIds = config.chains?.map(({ id }) => id).join(",");
+    const query: Record<string, string> = {};
+    if (chainIds) query.chainIds = chainIds;
+    return await ClaimsService.#fetch(async () => api.v4.claims({ address }).get({ query }));
   }
 }

src/api/services/interaction.service.ts

@@ -1,5 +1,6 @@
 import { api as clientApi } from "src/api/index.client";
 import { fetchWithLogs } from "../utils";
+import { ZyfiService } from "./zyfi.service";
 
 export abstract class InteractionService {
   static async #fetch<R, T extends { data: R; status: number; response: Response }>(
@@ -14,33 +15,64 @@ export abstract class InteractionService {
     return data;
   }
 
+  static async get(
+    //TODO: template type the transaction
+    name: "supply",
+    payload: Parameters<typeof clientApi.v4.interaction.transaction.get>[0]["query"],
+    options?: { sponsor?: boolean },
+  ) {
+    const response = await fetch(`/transaction/${name}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ...payload, ...options }),
+    });
+
+    //TODO: use template type to get correct response type
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    return (await response.json()) as any;
+  }
+
   /**
    * Client side
    * @param chainId
    * @param protocolId
    * @param identifier
    */
-  static async getTarget(chainId: number, protocolId: string, identifier: string) {
+  static async getTargets(chainId: number, protocolId: string, identifier: string) {
     const targets = await InteractionService.#fetch(() =>
       clientApi.v4.interaction.targets.get({
         query: { chainId, protocolId, identifier },
       }),
     );
 
     //TODO: opportunity/:id/target instead of taking the first result and expecting unique
-    return targets?.[0];
+    return targets;
   }
 
   /**
    * Client side
    */
-  static async getTransaction(payload: Parameters<typeof clientApi.v4.interaction.transaction.get>[0]["query"]) {
+  static async getTransaction(
+    payload: Parameters<typeof clientApi.v4.interaction.transaction.get>[0]["query"],
+    sponsor?: boolean,
+  ) {
     const transaction = await InteractionService.#fetch(() =>
       clientApi.v4.interaction.transaction.get({
         query: payload,
       }),
     );
 
+    if (sponsor && !transaction.approved) {
+      transaction.approval = await ZyfiService.wrapAndPrepareTx({ ...transaction.approval, from: payload.userAddress });
+    } else if (sponsor) {
+      transaction.transaction = await ZyfiService.wrapAndPrepareTx({
+        ...transaction.transaction,
+        from: payload.userAddress,
+      });
+    }
+
     return transaction;
   }
 

src/api/services/opportunity/opportunity.service.ts

@@ -26,6 +26,16 @@ export abstract class OpportunityService {
     return { opportunities: opportunities.filter(o => o !== null), count };
   }
 
+  // ─── Get Featured opportunities ──────────────────────────────────────────────
+
+  static async getFeatured(
+    overrides?: Parameters<typeof api.v4.opportunities.index.get>[0]["query"],
+  ): Promise<{ opportunities: Opportunity[]; count: number }> {
+    if (config.opportunity.featured.enabled)
+      return await OpportunityService.getMany({ items: config.opportunity.featured.length, ...overrides });
+    return { opportunities: [], count: 0 };
+  }
+
   // ─── Get Opportunities with campaign ──────────────────────────────────────────────
 
   static async getCampaignsByParams(query: {

src/api/services/protocol.service.ts

@@ -13,19 +13,31 @@ export abstract class ProtocolService {
     );
   }
 
+  // ─── Get First Protocol ──────────────────────────────────────────────
+
+  static async getById(id: string) {
+    return await ProtocolService.#fetch(async () =>
+      api.v4
+        .protocols({
+          id,
+        })
+        .get(),
+    );
+  }
+
   // ─── Get Many Protocols from request ──────────────────────────────────
 
   static async getManyFromRequest(request: Request) {
     const query: Parameters<typeof api.v4.protocols.index.get>[0]["query"] =
       ProtocolService.#getQueryFromRequest(request);
     const protocols = await ProtocolService.#fetch(async () =>
       api.v4.protocols.index.get({
-        query: Object.assign({ ...query }, config.tags?.[0] ? { tags: config.tags?.[0] } : {}),
+        query: Object.assign({ ...query }, config.tags?.[0] ? { opportunityTag: config.tags?.[0] } : {}),
       }),
     );
     const count = await ProtocolService.#fetch(async () =>
       api.v4.protocols.count.get({
-        query: Object.assign({ ...query }, config.tags?.[0] ? { tags: config.tags?.[0] } : {}),
+        query: Object.assign({ ...query }, config.tags?.[0] ? { opportunityTag: config.tags?.[0] } : {}),
       }),
     );
 

src/api/services/reward.service.ts

@@ -1,3 +1,4 @@
+import config from "merkl.config";
 import { api } from "../index.server";
 import { fetchWithLogs } from "../utils";
 
@@ -44,9 +45,12 @@ export abstract class RewardService {
   }
 
   static async getForUser(address: string, chainId: number) {
+    const chainIds = config.chains?.map(({ id }) => id).join(",");
+    const query: Record<string, string> = { chainId };
+    if (chainIds) query.chainIds = chainIds;
     return await RewardService.#fetch(async () =>
       api.v4.users({ address }).rewards.breakdowns.get({
-        query: { chainId },
+        query,
       }),
     );
   }