update: merkl-app (#7)

* Sync Merkl-app (AngleProtocol#55) * Sync Merkl-app * lint * Sync/rebased (AngleProtocol#57) * Fork rebasing * chore: update @merkl/api version and refactor various components and services * Puffer Branding (#3) * chore: update app * fix: lint * Merge remote-tracking branch 'merkl-app/main' (#4) * Merge remote-tracking branch 'merkl-app/main' * update dappkit * lint * update config for puffer (#5) * clean hero * update: config * revert * restore --------- Co-authored-by: hugolxt <[email protected]> Co-authored-by: Viande <[email protected]> Co-authored-by: picodes <[email protected]>
AngleProtocol · Jan 7, 2025 · 286d9fe · 286d9fe
1 parent 3e35837
commit 286d9fe
Show file tree

Hide file tree

Showing 36 changed files with 395 additions and 272 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,7 +9,6 @@
   "[javascript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "editor.formatOnSave": true,
   "editor.formatOnType": false,
   "editor.foldingImportsByDefault": true,
   "editor.foldingHighlight": true,

diff --git a/merkl.config.ts b/merkl.config.ts
@@ -56,8 +56,24 @@ export default createConfig({
   opportunityLibraryDefaultView: "table",
   // opportunityLibraryExcludeFilters: ["protocol","action"],
   opprtunityPercentage: true,
-  hideLayerMenuHomePage: false,
+  opportunityLibrary: {
+    defaultView: "table",
+    views: ["table"], // If you want only one view, this is where you can specify it.
+    cells: {
+      hideTags: ["token", "action"],
+    },
+    excludeFilters: ["protocol", "tvl"],
+  },
   supplyCredits: [],
+  hero: {
+    bannerOnAllPages: false, // show banner on all pages
+    invertColors: true, // Light mode: light text on dark background (instead of dark text on light background)
+  },
+  opportunityFilters: {
+    minimumTVL: false,
+    protocols: false,
+    displaySelector: false,
+  },
   walletOptions: {
     hideInjectedWallets: ["phantom", "coinbase wallet"],
     sponsorTransactions: true,
@@ -71,6 +87,13 @@ export default createConfig({
       enabled: false,
       length: 6,
     },
+    library: {
+      columns: {
+        action: {
+          enabled: true,
+        },
+      },
+    },
   },
   bridge: {
     helperLink: "",
@@ -91,27 +114,6 @@ export default createConfig({
     dollar: "$0,0.##a",
   },
   themes: {
-    ignite: {
-      base: createColoring(["#2A35BD", "#BFFF37", "#FFFFFF"], ["#2A35BD", "#BFFF37", "#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(["#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", "#BFFF37", "#FFFFFF"], ["#2A35BD", "#BFFF37", "#FFFFFF"]),
       info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
@@ -146,11 +148,6 @@ export default createConfig({
       route: "/protocols",
       key: crypto.randomUUID(),
     },
-    bridge: {
-      icon: "RiCompassesLine",
-      route: "/bridge",
-      key: crypto.randomUUID(),
-    },
     docs: {
       icon: "RiFile4Fill",
       external: true,
@@ -181,7 +178,7 @@ export default createConfig({
       enabled: false,
     },
     bridge: {
-      enabled: false,
+      enabled: true,
     },
   },
   socials: {
@@ -256,4 +253,4 @@ export default createConfig({
       }),
     ],
   },
-});
+});
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",
     "@lifi/widget": "^3.13.1",
-    "@merkl/api": "0.10.262",
+    "@merkl/api": "0.10.277",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@remix-run/dev": "^2.11.2",

diff --git a/src/api/services/reward.service.ts b/src/api/services/reward.service.ts
@@ -45,11 +45,14 @@ export abstract class RewardService {
     return query;
   }
 
-  static async getForUser(request: Request, address: string, chainId: number) {
+  static async getForUser(request: Request, address: string) {
     const url = new URL(request.url);
+
     const chainIds = config.chains?.map(({ id }) => id).join(",");
+
+    // biome-ignore lint/suspicious/noExplicitAny: TODO
     const query: Record<string, any> = {
-      chainId: chainId.toString(),
+      chainId: url.searchParams.get("chainId") ?? undefined,
       test: config.alwaysShowTestTokens ? true : (url.searchParams.get("test") ?? false),
     };
     if (chainIds) query.chainIds = chainIds;

diff --git a/src/api/services/zyfi.service.ts b/src/api/services/zyfi.service.ts
@@ -102,9 +102,11 @@ export abstract class ZyfiService {
       value,
     });
 
+    if (!check.txData) return null;
+
     return {
       account: from,
-      to: check.txData.to,
+      to: check.txData?.to,
       value: BigInt(check.txData.value!),
       chain: zksync,
       gas: BigInt(check.txData.gasLimit),

diff --git a/src/assets/images/etherscan.svg b/src/assets/images/etherscan.svg
diff --git a/src/components/composite/Hero.tsx b/src/components/composite/Hero.tsx
@@ -1,5 +1,18 @@
 import { useLocation } from "@remix-run/react";
-import { Container, Divider, Group, Icon, type IconProps, Icons, Tabs, Text, Title, Value } from "dappkit";
+import {
+  Container,
+  Divider,
+  Group,
+  Icon,
+  type IconProps,
+  Icons,
+  OverrideTheme,
+  Tabs,
+  Text,
+  Title,
+  Value,
+  useTheme,
+} from "dappkit";
 import { Button } from "dappkit";
 import config from "merkl.config";
 import type { PropsWithChildren, ReactNode } from "react";
@@ -34,90 +47,99 @@ export default function Hero({
   children,
 }: HeroProps) {
   const location = useLocation();
+  const { mode } = useTheme();
+
   return (
     <>
-      <Group
-        className={`${
-          location?.pathname === "/" || location?.pathname === "/opportunities" ? "bg-cover" : "bg-main-6"
-        } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
-        style={{
-          backgroundImage:
-            location?.pathname === "/" || location?.pathname === "/opportunities"
+      <OverrideTheme mode={!!config.hero.invertColors ? (mode === "dark" ? "light" : "dark") : mode}>
+        <Group
+          className={`${
+            !!config.hero.bannerOnAllPages
+              ? "bg-cover"
+              : location?.pathname === "/" || location?.pathname === "/opportunities"
+                ? "bg-cover"
+                : "bg-main-6"
+          } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
+          style={{
+            backgroundImage: !!config.hero.bannerOnAllPages
               ? `url('${config.images.hero}')`
-              : "none",
-        }}>
-        <Container>
-          <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
-            <Group className="items-center" size="sm">
-              <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
-                Home
-              </Button>
-              {breadcrumbs?.map(breadcrumb => {
-                if (breadcrumb.component) return <>{breadcrumb.component}</>;
-                return (
-                  <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
-                    <Icon remix="RiArrowRightSLine" />
-                    {breadcrumb.name}
-                  </Button>
-                );
-              })}
-            </Group>
-            <Group className="grow items-center justify-between gap-xl lg:gap-xl*4">
-              <Group className="flex-col flex-1 gap-xl lg:gap-lg">
-                <Group className="items-start gap-0 md:gap-lg flex-nowrap w-full">
-                  {!!icons && (
-                    <Icons size="lg">
-                      {icons?.length > 1
-                        ? icons?.map(icon => (
-                            <Icon
-                              className="hidden md:block text-main-12 !w-lg*4 !h-lg*4"
-                              key={`${Object.values(icon)}`}
-                              {...icon}
-                            />
-                          ))
-                        : icons?.map(icon => (
-                            <Icon
-                              className="hidden md:block text-main-12 !w-xl*4 !h-xl*4"
-                              key={`${Object.values(icon)}`}
-                              {...icon}
-                            />
-                          ))}
-                    </Icons>
+              : location?.pathname === "/" || location?.pathname === "/opportunities"
+                ? `url('${config.images.hero}')`
+                : "none",
+          }}>
+          <Container>
+            <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
+              <Group className="items-center" size="sm">
+                <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
+                  Home
+                </Button>
+                {breadcrumbs?.map(breadcrumb => {
+                  if (breadcrumb.component) return <>{breadcrumb.component}</>;
+                  return (
+                    <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
+                      <Icon remix="RiArrowRightSLine" />
+                      {breadcrumb.name}
+                    </Button>
+                  );
+                })}
+              </Group>
+              <Group className="grow items-center justify-between gap-xl lg:gap-xl*4">
+                <Group className="flex-col flex-1 gap-lg">
+                  <Group className="gap-0 md:gap-lg flex-nowrap w-full items-center">
+                    {!!icons && (
+                      <Icons size="lg">
+                        {icons?.length > 1
+                          ? icons?.map(icon => (
+                              <Icon
+                                className="hidden md:block text-main-12 !w-lg*4 !h-lg*4"
+                                key={`${Object.values(icon)}`}
+                                {...icon}
+                              />
+                            ))
+                          : icons?.map(icon => (
+                              <Icon
+                                className="hidden md:block text-main-12 !w-xl*4 !h-xl*4"
+                                key={`${Object.values(icon)}`}
+                                {...icon}
+                              />
+                            ))}
+                      </Icons>
+                    )}
+                    <Title h={1} size={2} className="flex-1">
+                      {title}
+                    </Title>
+                  </Group>
+
+                  {!!description && (
+                    <>
+                      <Divider look="base" />
+                      <Text size="lg" bold>
+                        {description}
+                      </Text>
+                    </>
                   )}
-                  <Title h={1} size={2} className="flex-1">
-                    {title}
-                  </Title>
+                  {!!tags && <Group className="mb-lg">{tags}</Group>}
                 </Group>
+                {!!sideDatas && (
+                  <Group className="w-full lg:w-auto lg:flex-col mr-xl*2" size="lg">
+                    {sideDatas.map(data => (
+                      <Group key={data.key} className="flex-col" size="xs">
+                        <Text size={4} className="!text-main-12">
+                          {data.data}
+                        </Text>
 
-                {!!description && (
-                  <>
-                    <Divider look="base" />
-                    <Text size="lg" bold>
-                      {description}
-                    </Text>
-                  </>
+                        <Text size="md" bold>
+                          {data.label}
+                        </Text>
+                      </Group>
+                    ))}
+                  </Group>
                 )}
-                {!!tags && <Group className="mb-lg">{tags}</Group>}
               </Group>
-              {!!sideDatas && (
-                <Group className="w-full lg:w-auto lg:flex-col mr-xl*2" size="lg">
-                  {sideDatas.map(data => (
-                    <Group key={data.key} className="flex-col" size="xs">
-                      <Text size={4} className="!text-main-12">
-                        {data.data}
-                      </Text>
-
-                      <Text size="md" bold>
-                        {data.label}
-                      </Text>
-                    </Group>
-                  ))}
-                </Group>
-              )}
             </Group>
-          </Group>
-        </Container>
-      </Group>
+          </Container>
+        </Group>
+      </OverrideTheme>
 
       {!!tabs?.length && <Tabs tabs={tabs} look="base" size="lg" />}
 

diff --git a/src/components/composite/LiFiWidget.client.tsx b/src/components/composite/LiFiWidget.client.tsx
@@ -58,5 +58,5 @@ const LiFiWidgetLazy = lazy(async () => {
 });
 
 export function LiFiWidget() {
-  return <LiFiWidgetLazy config={LifiConfig} integrator="Merkl" />;
+  return <LiFiWidgetLazy config={LifiConfig} integrator="merkl-jumper-ignite" />;
 }
diff --git a/src/components/element/campaign/CampaignTableRow.tsx b/src/components/element/campaign/CampaignTableRow.tsx
@@ -8,6 +8,7 @@ import {
   Group,
   Hash,
   Icon,
+  Image,
   OverrideTheme,
   PrimitiveTag,
   Space,
@@ -20,6 +21,7 @@ import Time from "packages/dappkit/src/components/primitives/Time";
 import Tooltip from "packages/dappkit/src/components/primitives/Tooltip";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import type { Opportunity } from "src/api/services/opportunity/opportunity.model";
+import EtherScan from "src/assets/images/etherscan.svg";
 import useCampaign from "src/hooks/resources/useCampaign";
 import { v4 as uuidv4 } from "uuid";
 import Tag from "../Tag";
@@ -78,7 +80,7 @@ export default function CampaignTableRow({
             {campaign.creatorAddress}
           </Hash>
           <Button to={`${chain.explorers?.[0]?.url}/address/${campaign.creatorAddress}`} external size="xs" look="soft">
-            <Icon remix="RiArrowRightUpLine" />
+            <Image className="w-3" alt="Merkl Footer logo" src={EtherScan} />
           </Button>
         </Group>,
       ],