update: bump @merkl/api version, refactor leaderboard and campaign co…

package.json

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

src/api/services/reward.service.ts

@@ -2,6 +2,41 @@ import type { Reward } from "@merkl/api";
 import { api } from "../index.server";
 import { fetchWithLogs } from "../utils";
 
+// Todo: Check how we should type Raw query
+export type IRewards = {
+  amount: string;
+  recipient: string;
+  campaignId: string;
+  reason: string;
+  Token: {
+    id: string;
+    name: string;
+    chainId: number;
+    address: string;
+    decimals: number;
+    symbol: string;
+    icon: string;
+    verified: boolean;
+    price: number;
+  };
+};
+// Todo: Check how we should type Raw query
+export type ITotalRewards = {
+  campaignId: string;
+  totalAmount: string;
+  Token: {
+    id: string;
+    name: string;
+    chainId: number;
+    address: string;
+    decimals: number;
+    symbol: string;
+    icon: string;
+    verified: boolean;
+    price: number;
+  };
+}[];
+
 export abstract class RewardService {
   static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
@@ -26,15 +61,33 @@ export abstract class RewardService {
     items?: number;
     page?: number;
     chainId: number;
-    campaignIdentifiers: string[];
+    campaignIds: string[];
   }) {
-    return RewardService.#fetch(async () =>
+    const rewards = await RewardService.#fetch(async () =>
       api.v4.rewards.index.get({
         query: {
           ...query,
-          campaignIdentifiers: query.campaignIdentifiers.join(","),
+          campaignIds: query.campaignIds.join(","),
         },
       }),
     );
+
+    return rewards as unknown as IRewards[];
+  }
+
+  static async total(query: {
+    chainId: number;
+    campaignIds: string[];
+  }): Promise<ITotalRewards> {
+    const total = await RewardService.#fetch(async () =>
+      api.v4.rewards.total.get({
+        query: {
+          ...query,
+          campaignIds: query.campaignIds.join(","),
+        },
+      }),
+    );
+
+    return total as ITotalRewards;
   }
 }

src/components/element/campaign/CampaignTable.tsx

@@ -26,12 +26,6 @@ export const [CampaignTable, CampaignRow, CampaignColumns] = createTable({
     compactSize: "minmax(20px,1fr)",
     className: "justify-center",
   },
-  identifier: {
-    name: "ID",
-    size: "minmax(100px,150px)",
-    compactSize: "minmax(100px,1fr)",
-    className: "justify-start",
-  },
   arrow: {
     name: "",
     size: "20px",

src/components/element/campaign/CampaignTableRow.tsx

@@ -32,7 +32,6 @@ export default function CampaignTableRow({ campaign, startsOpen, className, ...p
       className={mergeClass("cursor-pointer", className)}
       onClick={toggleIsOpen}
       chainColumn={<Chain chain={campaign.chain} />}
-      identifierColumn={<Hash format="short">{campaign.identifier}</Hash>}
       restrictionsColumn={<RestrictionsCollumn campaign={campaign} />}
       dailyRewardsColumn={
         <Group className="align-middle items-center">
@@ -68,16 +67,22 @@ export default function CampaignTableRow({ campaign, startsOpen, className, ...p
                   </Text>
                 </span>
               </div>
-              <div className="flex justify-between">
+              {/* <div className="flex justify-between">
                 <Text size="sm">Last snapshot</Text>
-                {/* <Time timestamp={BigInt(campaign.) * BigInt(1000)} /> */}
-              </div>
+                <Time timestamp={BigInt(campaign.) * BigInt(1000)} />
+              </div> */}
               <div className="flex justify-between">
                 <Text size="sm">Campaign creator</Text>
                 <Hash size="sm" format="short">
                   {campaign.creatorAddress}
                 </Hash>
               </div>
+              <div className="flex justify-between">
+                <Text size="sm">Campaign id</Text>
+                <Hash format="short" size="sm">
+                  {campaign.campaignId}
+                </Hash>
+              </div>
             </Group>
             <Group className="justify-between flex-col size-full">
               <Text size={"md"}>Conditions</Text>

src/components/element/chain/ChainTableRow.tsx

@@ -13,8 +13,6 @@ export type ChainTableRowProps = {
 } & BoxProps;
 
 export default function ChainTableRow({ hideTags, chain, className, ...props }: ChainTableRowProps) {
-  console.log(chain);
-
   return (
     <Link to={`/chains/${chain.name}`}>
       <ChainRow

src/components/element/leaderboard/LeaderboardLibrary.tsx

@@ -1,22 +1,26 @@
 import { Text } from "dappkit";
 import { useMemo } from "react";
-import type { DummyLeaderboard } from "src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard";
+import type { IRewards } from "src/api/services/reward.service";
+import OpportunityPagination from "../opportunity/OpportunityPagination";
 import { LeaderboardTable } from "./LeaderboardTable";
 import LeaderboardTableRow from "./LeaderboardTableRow";
 
 export type IProps = {
-  leaderboard: DummyLeaderboard[];
+  leaderboard: IRewards[];
+  count?: number;
 };
 
 export default function LeaderboardLibrary(props: IProps) {
-  const { leaderboard } = props;
+  const { leaderboard, count } = props;
 
   const rows = useMemo(() => {
-    return leaderboard?.map(row => <LeaderboardTableRow key={row.address} row={row} />);
+    return leaderboard?.map((row, index) => <LeaderboardTableRow key={row.recipient} row={row} rank={index} />);
   }, [leaderboard]);
 
   return (
-    <LeaderboardTable header={<Text className="w-full">Leaderboard</Text>} footer={"Something"}>
+    <LeaderboardTable
+      header={<Text className="w-full">Leaderboard</Text>}
+      footer={count !== undefined && <OpportunityPagination count={count} />}>
       {!!rows.length ? rows : <Text>No rewarded users</Text>}
     </LeaderboardTable>
   );

src/components/element/leaderboard/LeaderboardTable.tsx

@@ -21,7 +21,7 @@ export const [LeaderboardTable, LeaderboardRow, LeaderboardColumns] = createTabl
     className: "justify-start",
   },
   protocol: {
-    name: "Protocols",
+    name: "Reason",
     size: "minmax(30px,0.5fr)",
     compactSize: "minmax(20px,1fr)",
     className: "justify-center",

src/components/element/leaderboard/LeaderboardTableRow.tsx

@@ -1,20 +1,29 @@
-import { type Component, Text, mergeClass } from "dappkit";
-import type { DummyLeaderboard } from "src/routes/_merkl.opportunity.$chain.$type.$id.leaderboard";
+import { type Component, Hash, Text, Value, mergeClass } from "dappkit";
+import { useMemo } from "react";
+import type { IRewards } from "src/api/services/reward.service";
+import { formatUnits, parseUnits } from "viem";
 import { LeaderboardRow } from "./LeaderboardTable";
 
 export type CampaignTableRowProps = Component<{
-  row?: DummyLeaderboard;
+  row: IRewards;
+  rank: number;
 }>;
 
-export default function LeaderboardTableRow({ row, className, ...props }: CampaignTableRowProps) {
+export default function LeaderboardTableRow({ row, rank, className, ...props }: CampaignTableRowProps) {
+  const rewardAmount = useMemo(() => formatUnits(parseUnits(row?.amount, 0), row?.Token?.decimals), [row]);
+
   return (
     <LeaderboardRow
       {...props}
       className={mergeClass("cursor-pointer", className)}
-      rankColumn={<Text>#{row?.rank}</Text>}
-      addressColumn={<Text>{row?.address}</Text>}
-      rewardsColumn={<Text>{row?.rewards}</Text>}
-      protocolColumn={<Text>{row?.protocol}</Text>}
+      rankColumn={<Text>#{rank}</Text>}
+      addressColumn={<Hash format="short">{row?.recipient}</Hash>}
+      rewardsColumn={
+        <Value className="text-right" look={rewardAmount === "0" ? "soft" : "base"} format="$0,0.#">
+          {rewardAmount}
+        </Value>
+      }
+      protocolColumn={<Text>{row?.reason.split("_")[0]}</Text>}
     />
   );
 }

src/routes/_merkl.opportunities.$chain.$type.$id.(overview).tsx

@@ -2,7 +2,7 @@ import { useOutletContext } from "@remix-run/react";
 import { Container, Space } from "packages/dappkit/src";
 import CampaignLibrary from "src/components/element/campaign/CampaignLibrary";
 import { ErrorContent } from "src/components/layout/ErrorContent";
-import type { OutletContextOpportunity } from "./_merkl.opportunity.$chain.$type.$id";
+import type { OutletContextOpportunity } from "./_merkl.opportunities.$chain.$type.$id";
 
 export default function Index() {
   const { opportunity } = useOutletContext<OutletContextOpportunity>();

src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard.tsx

@@ -1,11 +1,13 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData } from "@remix-run/react";
-import { Container, Group, Space, Text } from "packages/dappkit/src";
+import { Container, Group, Space, Text, Value } from "packages/dappkit/src";
 import Tooltip from "packages/dappkit/src/components/primitives/Tooltip";
+import { useMemo } from "react";
+import { ChainService } from "src/api/services/chain.service";
+import { OpportunityService } from "src/api/services/opportunity.service";
+import { RewardService } from "src/api/services/reward.service";
 import LeaderboardLibrary from "src/components/element/leaderboard/LeaderboardLibrary";
-// import { ChainService } from "src/api/services/chain.service";
-// import { OpportunityService } from "src/api/services/opportunity.service";
-// import { RewardService } from "src/api/services/reward.service";
+import { formatUnits, parseUnits } from "viem";
 
 export type DummyLeaderboard = {
   rank: number;
@@ -15,40 +17,45 @@ export type DummyLeaderboard = {
 };
 
 export async function loader({ params: { id, type, chain: chainId } }: LoaderFunctionArgs) {
-  const leaderboard: DummyLeaderboard[] = [
-    { rank: 1, address: "0x1234", rewards: 100, protocol: "Aave" },
-    { rank: 2, address: "0x5678", rewards: 50, protocol: "Compound" },
-    { rank: 3, address: "0x9abc", rewards: 25, protocol: "Aave" },
-    { rank: 4, address: "0xdef0", rewards: 10, protocol: "Compound" },
-    { rank: 5, address: "0x1235", rewards: 5, protocol: "Aave" },
-  ];
+  if (!chainId || !id || !type) throw "";
+  const chain = await ChainService.get({ search: chainId });
 
-  // ----------- Need to implement this part @Hugo ------------
-  // if (!chainId || !id || !type) throw "";
-  // const chain = await ChainService.get({ search: chainId });
+  const opportunity = await OpportunityService.getCampaignsByParams({
+    chainId: chain.id,
+    type: type,
+    identifier: id,
+  });
 
-  // const opportunity = await OpportunityService.getCampaignsByParams({
-  //   chainId: chain.id,
-  //   type: type,
-  //   identifier: id,
-  // });
+  const campaignIds = opportunity?.campaigns?.map(c => c.campaignId);
+  if (!campaignIds) throw new Error("No campaign identifiers found");
 
-  // const campaignIdentifiers = opportunity?.campaigns?.map((c) => c.identifier);
-  // if (!campaignIdentifiers) throw new Error("No campaign identifiers found");
+  const rewards = await RewardService.getByParams({
+    campaignIds,
+    chainId: chain.id,
+  });
 
-  // console.log({ campaignIdentifiers, chain: chain.id });
+  const totalReward = await RewardService.total({
+    campaignIds,
+    chainId: chain.id,
+  });
 
-  // const rewards = await RewardService.getByParams({
-  //   campaignIdentifiers,
-  //   chainId: chain.id,
-  // });
-  // ----------- Need to implement this part @Hugo ------------
-
-  return json({ leaderboard });
+  return json({ rewards, totalReward });
 }
 
 export default function Index() {
-  const { leaderboard } = useLoaderData<typeof loader>();
+  const { rewards, totalReward } = useLoaderData<typeof loader>();
+
+  const totalRewardsAllCampaigns = useMemo(() => {
+    const scaledReward = totalReward.map(reward => {
+      return formatUnits(parseUnits(reward.totalAmount, 0), reward?.Token?.decimals);
+    });
+
+    const summ = scaledReward.reduce((acc, reward) => {
+      return acc + Number(reward);
+    });
+
+    return summ;
+  }, [totalReward]);
 
   return (
     <Container>
@@ -59,17 +66,19 @@ export default function Index() {
             <Text>Total rewarded users</Text>
           </Tooltip>
           {/* Probably a count from api */}
-          <Text size={"xl"}>{leaderboard?.length}</Text>
+          <Text size={"xl"}>{rewards?.length}</Text>
         </Group>
         <Group className="flex-col border-2 flex-1">
           <Tooltip helper={null}>
             <Text>Total reward distributed</Text>
           </Tooltip>
-          <Text size={"xl"}>400k</Text>
+          <Value size={"xl"} look={totalRewardsAllCampaigns === "0" ? "soft" : "base"} format="$0,0.#">
+            {totalRewardsAllCampaigns}
+          </Value>
         </Group>
       </Group>
       <Space size="lg" />
-      <LeaderboardLibrary leaderboard={leaderboard} />
+      <LeaderboardLibrary leaderboard={rewards} />
     </Container>
   );
 }