Sync/rebased (#57)

* Fork rebasing * chore: update @merkl/api version and refactor various components and services
AngleProtocol · Jan 7, 2025 · 9126dda · 9126dda
1 parent f3d56d3
commit 9126dda
Show file tree

Hide file tree

Showing 29 changed files with 365 additions and 233 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/merkl.config.ts b/merkl.config.ts
@@ -3,6 +3,7 @@ import { createConfig } from "src/config/type";
 import hero from "src/customer/assets/images/hero.jpg?url";
 import { v4 as uuidv4 } from "uuid";
 import { http, createClient, custom } from "viem";
+
 import {
   arbitrum,
   astar,
@@ -46,15 +47,29 @@ export default createConfig({
   appName: "Merkl",
   modes: ["dark", "light"],
   defaultTheme: "ignite",
-  opportunityNavigationMode: "direct",
-  rewardsNavigationMode: "chain",
+  opportunityNavigationMode: "supply",
   tokenSymbolPriority: ["ZK", "USDC", "USDC.e", "ETH", "WETH", "WBTC", "wstETH", "USDT", "USDe", "weETH", "DAI"],
-  opportunityCellHideTags: ["token", "action"],
-  opportunityLibraryDefaultView: "table",
-  // opportunityLibraryExcludeFilters: ["protocol","action"],
-  opprtunityPercentage: true,
+  rewardsNavigationMode: "chain",
+  opportunityLibrary: {
+    defaultView: "cells",
+    // views: ["table"], // If you want only one view, this is where you can specify it.
+    cells: {
+      hideTags: ["token", "action"],
+    },
+    excludeFilters: ["protocol", "tvl"],
+  },
+  opportunityPercentage: true,
   hideLayerMenuHomePage: false,
   supplyCredits: [],
+  hero: {
+    bannerOnAllPages: false, // show banner on all pages
+    invertColors: false, // Light mode: light text on dark background (instead of dark text on light background)
+  },
+  opportunityFilters: {
+    minimumTVL: false,
+    protocols: false,
+    displaySelector: false,
+  },
   deposit: true,
   walletOptions: {
     hideInjectedWallets: ["phantom", "coinbase wallet"],
@@ -69,6 +84,13 @@ export default createConfig({
       enabled: false,
       length: 6,
     },
+    library: {
+      columns: {
+        action: {
+          enabled: false,
+        },
+      },
+    },
   },
   bridge: {
     helperLink: "",
@@ -179,18 +201,8 @@ export default createConfig({
       enabled: false,
     },
     bridge: {
-      enabled: false,
+      enabled: true,
     },
-    // terms: {
-    //   icon: "RiCompassesLine",
-    //   route: "/terms",
-    //   key: uuidv4(),
-    // },
-    // privacy: {
-    //   icon: "RiInformationFill",
-    //   route: "/privacy",
-    //   key: uuidv4(),
-    // },
   },
   socials: {
     discord: "",

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,12 +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,92 +47,99 @@ export default function Hero({
   children,
 }: HeroProps) {
   const location = useLocation();
+  const { mode } = useTheme();
+
   return (
     <>
-      {/* TODO: Align lines & descriptions on all pages  */}
-      {/* TODO: On sub-pages (all pages except Opportunities): Replace the banner by a color  */}
-      <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/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>,
       ],

diff --git a/src/components/element/historicalClaimsLibrary/HistoricalClaimsRow.tsx b/src/components/element/historicalClaimsLibrary/HistoricalClaimsRow.tsx
@@ -3,7 +3,6 @@ import Time from "packages/dappkit/src/components/primitives/Time";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo } from "react";
 import type { ClaimsService } from "src/api/services/claims.service";
-import { parseUnits } from "viem";
 import Chain from "../chain/Chain";
 import Token from "../token/Token";
 import { HistoricalClaimsRow } from "./HistoricalClaimsTable";
@@ -17,16 +16,14 @@ export default function HistoricalClaimsTableRow({ claim, className, ...props }:
 
   const chain = useMemo(() => chains?.find(c => c.id === claim?.token?.chainId), [chains, claim]);
 
-  const claimedAmount = useMemo(() => parseUnits(claim?.amount ?? 0, claim.token.decimals), [claim]);
-
   return (
     <HistoricalClaimsRow
       {...props}
       className={mergeClass("cursor-pointer", className)}
       chainColumn={<Chain chain={chain} size="md" />}
       tokenColumn={
         !!claim?.token && (
-          <Token token={claim?.token} format="amount_price" amount={BigInt(claimedAmount)} chain={chain} />
+          <Token token={claim?.token} format="amount_price" amount={BigInt(claim.amount)} chain={chain} />
         )
       }
       dateColumn={<Time timestamp={claim.timestamp * 1000} />}

diff --git a/src/components/element/leaderboard/LeaderboardLibrary.tsx b/src/components/element/leaderboard/LeaderboardLibrary.tsx
@@ -11,7 +11,7 @@ import LeaderboardTableRow from "./LeaderboardTableRow";
 export type IProps = {
   leaderboard: Awaited<ReturnType<(typeof RewardService)["getManyFromRequest"]>>["rewards"];
   count?: number;
-  total?: number;
+  total?: bigint;
   campaign: Campaign;
 };