sync: merkl app changes

merkl.config.ts

@@ -1,51 +1,75 @@
 import { createColoring } from "dappkit";
 import { createConfig } from "src/config/type";
-import { createClient, custom, http } from "viem";
+import hero from "src/customer/assets/images/hero.jpg?url";
+import { http, createClient, custom } from "viem";
 import {
-  mainnet,
-  optimism,
-  rootstock,
-  bsc,
-  gnosis,
-  thunderCore,
-  fuse,
-  polygon,
-  manta,
-  xLayer,
-  fantom,
-  fraxtal,
-  filecoin,
-  zksync,
-  worldchain,
+  arbitrum,
   astar,
-  polygonZkEvm,
-  coreDao,
-  moonbeam,
-  sei,
   astarZkEVM,
-  mantle,
+  avalanche,
   base,
+  blast,
+  bob,
+  bsc,
+  coreDao,
+  etherlink,
+  fantom,
+  filecoin,
+  fraxtal,
+  fuse,
+  gnosis,
   immutableZkEvm,
-  mode,
-  arbitrum,
-  avalanche,
   linea,
-  bob,
-  blast,
-  taiko,
+  lisk,
+  mainnet,
+  manta,
+  mantle,
+  mode,
+  moonbeam,
+  optimism,
+  polygon,
+  polygonZkEvm,
+  rootstock,
   scroll,
+  sei,
+  taiko,
+  thunderCore,
+  worldchain,
+  xLayer,
+  zksync,
 } from "viem/chains";
-import { coinbaseWallet, walletConnect } from "wagmi/connectors";
-import hero from "src/customer/assets/images/hero.jpg?url";
 import { eip712WalletActions } from "viem/zksync";
+import { coinbaseWallet, walletConnect } from "wagmi/connectors";
 
 export default createConfig({
   appName: "Merkl",
-  modes: ["dark"],
-  defaultTheme: "merkl",
+  modes: ["dark", "light"],
+  defaultTheme: "ignite",
+  deposit: false,
   themes: {
+    ignite: {
+      base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
+      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"]),
+    },
     merkl: {
-      base: createColoring(["#1F2333", "#B8AAFD", "#131620"], ["#FCF8F5", "#B8AAFD", "white"]),
+      base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
+      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"]),
+    },
+    backoffice: {
+      base: createColoring(["#8B8D98", "#9984D2", "#000000"], ["#8B8D98", "#9984D2", "#FFFFFF"]),
+      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"]),
+    },
+    puffer: {
+      base: createColoring(["#2A35BD", "#3D3D3D", "#0E1035"], ["#2A35BD", "#F5F9FF", "#FFFFFF"]),
       info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
@@ -76,16 +100,16 @@ export default createConfig({
     //   route: "/protocols",
     //   key: crypto.randomUUID(),
     // },
-    terms: {
-      icon: "RiCompassesLine",
-      route: "/terms",
-      key: crypto.randomUUID(),
-    },
-    privacy: {
-      icon: "RiInformationFill",
-      route: "/privacy",
-      key: crypto.randomUUID(),
-    },
+    // terms: {
+    //   icon: "RiCompassesLine",
+    //   route: "/terms",
+    //   key: crypto.randomUUID(),
+    // },
+    // privacy: {
+    //   icon: "RiInformationFill",
+    //   route: "/privacy",
+    //   key: crypto.randomUUID(),
+    // },
   },
   socials: {
     discord: "",
@@ -95,13 +119,17 @@ export default createConfig({
   },
   links: {
     merkl: "https://merkl.xyz/",
+    merklTermsConditions: "https://app.merkl.xyz/merklTerms.pdf",
+    merklPrivacy: "https://privacy.angle.money",
   },
+  footerLinks: [],
   wagmi: {
     chains: [
       mainnet,
       optimism,
       rootstock,
       bsc,
+      lisk,
       gnosis,
       thunderCore,
       fuse,
@@ -111,6 +139,7 @@ export default createConfig({
       fantom,
       fraxtal,
       filecoin,
+      etherlink,
       zksync,
       worldchain,
       astar,
@@ -133,7 +162,10 @@ export default createConfig({
     ],
     client({ chain }) {
       if (chain.id === zksync.id)
-        return createClient({ chain, transport: custom(window.ethereum!) }).extend(eip712WalletActions());
+        return createClient({
+          chain,
+          transport: custom(window.ethereum!),
+        }).extend(eip712WalletActions());
       return createClient({ chain, transport: http() });
     },
     ssr: true,

package.json

@@ -7,8 +7,8 @@
     "start": "bun run scripts/start.ts",
     "build": "remix vite:build",
     "dev": "remix vite:dev --host",
-    "lint": "biome check --fix ./src",
-    "lint:ci": "biome check --diagnostic-level error ./src",
+    "lint": "biome check --fix ./src ./*.ts",
+    "lint:ci": "biome check --diagnostic-level error ./src ./*.ts",
     "serve": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
@@ -17,10 +17,10 @@
   ],
   "dependencies": {
     "@acab/ecsstatic": "^0.8.0",
-    "@merkl/api": "0.10.96",
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",
+    "@merkl/api": "0.10.156",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@remix-run/dev": "^2.11.2",
@@ -39,6 +39,7 @@
     "lucide-react": "^0.439.0",
     "match-sorter": "^6.3.4",
     "moment": "^2.30.1",
+    "node-cache": "^5.1.2",
     "qs": "^6.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -48,7 +49,7 @@
     "tailwindcss": "^3.4.12",
     "tailwindcss-animate": "^1.0.7",
     "typedoc": "^0.26.7",
-    "viem": "2.x",
+    "viem": "2.21.54",
     "vite-plugin-dts": "^4.2.1",
     "wagmi": "^2.12.29",
     "zustand": "^5.0.0-rc.2"

src/api/services/cache.service.ts

@@ -0,0 +1,42 @@
+import type { ClientLoaderFunction, ClientLoaderFunctionArgs } from "@remix-run/react";
+import NodeCache from "node-cache";
+
+export class CacheService {
+  cache = new NodeCache();
+
+  set<T>(key: string, ttl: number, value: T) {
+    this.cache.set(key, value, ttl);
+
+    return value;
+  }
+
+  get<T>(key: string): T | undefined {
+    const cached = this.cache.get<T>(key);
+
+    return cached;
+  }
+
+  reset(key: string) {
+    this.cache.del(key);
+  }
+
+  wrap(resource: string, ttl: number): ClientLoaderFunction {
+    const loader = async ({ request, serverLoader }: ClientLoaderFunctionArgs) => {
+      const key = `${resource}:${request.url}`;
+      const cache = Cache.get(key);
+
+      if (cache) return cache;
+
+      const data = await serverLoader();
+
+      Cache.set(key, ttl, data);
+
+      return data;
+    };
+
+    loader.hydrate = true;
+    return loader;
+  }
+}
+
+export const Cache = new CacheService();

src/api/services/campaigns/campaign.model.ts

@@ -0,0 +1,6 @@
+import type { Campaign as CampaignFromApi } from "@merkl/api";
+import type { Fetched } from "src/api/types";
+
+export type Campaign<C extends CampaignFromApi["type"] = CampaignFromApi["type"]> = Fetched<CampaignFromApi<C>> & {
+  params: CampaignFromApi<C>["params"];
+};

src/api/services/campaign.service.ts → src/api/services/campaigns/campaign.service.ts

@@ -1,7 +1,20 @@
-import type { Campaign } from "@angleprotocol/merkl-api";
-import { api } from "../index.server";
+import type { Campaign } from "@merkl/api";
+import { fetchWithLogs } from "src/api/utils";
+import { api } from "../../index.server";
 
 export abstract class CampaignService {
+  static async #fetch<R, T extends { data: R; status: number; response: Response }>(
+    call: () => Promise<T>,
+    resource = "Opportunity",
+  ): Promise<NonNullable<T["data"]>> {
+    const { data, status } = await fetchWithLogs(call);
+
+    if (status === 404) throw new Response(`${resource} not found`, { status });
+    if (status === 500) throw new Response(`${resource} unavailable`, { status });
+    if (data == null) throw new Response(`${resource} unavailable`, { status });
+    return data;
+  }
+
   /**
    * Retrieves opportunities query params from page request
    * @param request request containing query params such as chains, status, pagination...
@@ -36,19 +49,18 @@ export abstract class CampaignService {
   }
 
   // ------ Fetch all campaigns
-  static async get(): Promise<Campaign[]> {
+  static async get() {
     const { data } = await api.v4.campaigns.index.get({ query: {} });
 
     return data;
   }
 
-  static async getByParams(query: Parameters<typeof api.v4.campaigns.index.get>[0]["query"]): Promise<Campaign[]> {
-    const { data } = await api.v4.campaigns.index.get({ query });
-    return data;
+  static async getByParams(query: Parameters<typeof api.v4.campaigns.index.get>[0]["query"]) {
+    return await CampaignService.#fetch(async () => api.v4.campaigns.index.get({ query }));
   }
 
   // ------ Fetch a campaign by ID
-  static async getByID(Id: string): Promise<Campaign | null> {
+  static async getByID(_Id: string): Promise<Campaign | null> {
     return null;
   }
 }

src/api/services/opportunity/opportunity.model.ts

@@ -0,0 +1,6 @@
+import type { Opportunity as OpportunityFromApi } from "@merkl/api";
+import type { Fetched } from "src/api/types";
+import type { Campaign } from "../campaigns/campaign.model";
+
+export type Opportunity = Fetched<OpportunityFromApi>;
+export type OpportunityWithCampaigns = Fetched<OpportunityFromApi & { campaigns: Campaign[] }>;