chore: remove useless type

package.json

@@ -18,7 +18,7 @@
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",
-    "@merkl/api": "0.10.182",
+    "@merkl/api": "0.10.188",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@remix-run/dev": "^2.11.2",

src/api/services/reward.service.ts

@@ -1,26 +1,6 @@
-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;
-  };
-};
-
 export abstract class RewardService {
   static async #fetch<R, T extends { data: R; status: number; response: Response }>(
     call: () => Promise<T>,
@@ -63,11 +43,12 @@ export abstract class RewardService {
     return query;
   }
 
-  static async getForUser(address: string): Promise<Reward[]> {
-    const rewards = await RewardService.#fetch(async () => api.v4.users({ address }).rewards.full.get());
-
-    //TODO: add some cache here
-    return rewards;
+  static async getForUser(address: string, chainId: number) {
+    return await RewardService.#fetch(async () =>
+      api.v4.users({ address }).rewards.breakdowns.get({
+        query: { chainId },
+      }),
+    );
   }
 
   static async getManyFromRequest(

src/components/element/leaderboard/LeaderboardLibrary.tsx

@@ -2,14 +2,16 @@ import type { Campaign } from "@merkl/api";
 import { useSearchParams } from "@remix-run/react";
 import { Text, Title } from "dappkit";
 import { useMemo } from "react";
-import type { IRewards } from "src/api/services/reward.service";
+import type { RewardService } from "src/api/services/reward.service";
 import { v4 as uuidv4 } from "uuid";
 import OpportunityPagination from "../opportunity/OpportunityPagination";
 import { LeaderboardTable } from "./LeaderboardTable";
 import LeaderboardTableRow from "./LeaderboardTableRow";
 
 export type IProps = {
-  leaderboard: IRewards[];
+  leaderboard: Awaited<
+    ReturnType<(typeof RewardService)["getManyFromRequest"]>
+  >["rewards"];
   count?: number;
   total?: number;
   campaign: Campaign;
@@ -36,13 +38,14 @@ export default function LeaderboardLibrary(props: IProps) {
 
   return (
     <LeaderboardTable
-      dividerClassName={index => (index < 2 ? "bg-accent-8" : "bg-main-8")}
+      dividerClassName={(index) => (index < 2 ? "bg-accent-8" : "bg-main-8")}
       header={
         <Title h={5} className="!text-main-11 w-full">
           Leaderboard
         </Title>
       }
-      footer={count !== undefined && <OpportunityPagination count={count} />}>
+      footer={count !== undefined && <OpportunityPagination count={count} />}
+    >
       {!!rows.length ? rows : <Text>No rewarded users</Text>}
     </LeaderboardTable>
   );

src/components/element/leaderboard/LeaderboardTableRow.tsx

@@ -1,33 +1,51 @@
 import type { Campaign } from "@merkl/api";
-import { type Component, Group, PrimitiveTag, Text, Value, mergeClass } from "dappkit";
+import {
+  type Component,
+  Group,
+  PrimitiveTag,
+  Text,
+  Value,
+  mergeClass,
+} from "dappkit";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo } from "react";
-import type { IRewards } from "src/api/services/reward.service";
+import type { RewardService } from "src/api/services/reward.service";
 import { formatUnits, parseUnits } from "viem";
 import Token from "../token/Token";
 import User from "../user/User";
 import { LeaderboardRow } from "./LeaderboardTable";
 
 export type CampaignTableRowProps = Component<{
-  row: IRewards;
+  row: Awaited<
+    ReturnType<typeof RewardService.getManyFromRequest>
+  >["rewards"][0];
   total: bigint;
   rank: number;
   campaign: Campaign;
 }>;
 
-export default function LeaderboardTableRow({ row, rank, total, className, ...props }: CampaignTableRowProps) {
+export default function LeaderboardTableRow({
+  row,
+  rank,
+  total,
+  className,
+  ...props
+}: CampaignTableRowProps) {
   const { campaign } = props;
   const { chains } = useWalletContext();
 
   const share = useMemo(() => {
-    const amount = formatUnits(BigInt(row?.amount), campaign.rewardToken.decimals);
+    const amount = formatUnits(
+      BigInt(row?.amount),
+      campaign.rewardToken.decimals
+    );
     const all = formatUnits(total, campaign.rewardToken.decimals);
 
     return Number.parseFloat(amount) / Number.parseFloat(all);
   }, [row, total, campaign]);
 
   const chain = useMemo(() => {
-    return chains?.find(c => c.id === campaign.computeChainId);
+    return chains?.find((c) => c.id === campaign.computeChainId);
   }, [chains, campaign]);
 
   return (
@@ -45,7 +63,13 @@ export default function LeaderboardTableRow({ row, rank, total, className, ...pr
         </Group>
       }
       addressColumn={<User chain={chain} address={row.recipient} />}
-      rewardsColumn={<Token token={campaign.rewardToken} format="amount_price" amount={parseUnits(row?.amount, 0)} />}
+      rewardsColumn={
+        <Token
+          token={campaign.rewardToken}
+          format="amount_price"
+          amount={parseUnits(row?.amount, 0)}
+        />
+      }
       protocolColumn={<Text>{row?.reason?.split("_")[0]}</Text>}
     />
   );

src/routes/_merkl.users.$address.tsx

@@ -15,8 +15,7 @@ import { isAddress } from "viem";
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
   if (!address || !isAddress(address)) throw "";
 
-  //TODO: use a lighter route
-  const rewards = await RewardService.getForUser(address);
+  const rewards = await RewardService.getForUser(address, 1);
 
   return json({ rewards, address });
 }
@@ -25,7 +24,9 @@ export const meta: MetaFunction<typeof loader> = ({ data, error }) => {
   if (error) return [{ title: error }];
   return [
     {
-      title: `${data?.address?.substring(0, 6)}…${data?.address.substring(data?.address.length - 4)} on Merkl`,
+      title: `${data?.address?.substring(0, 6)}…${data?.address.substring(
+        data?.address.length - 4
+      )} on Merkl`,
     },
   ];
 };
@@ -37,14 +38,23 @@ export default function Index() {
   const rewards = useRewards(raw);
 
   const { chainId, chains, address: user } = useWalletContext();
-  const chain = useMemo(() => chains?.find(c => c.id === chainId), [chainId, chains]);
-  const reward = useMemo(() => raw.find(({ chain: { id } }) => id === chainId), [chainId, raw]);
+  const chain = useMemo(
+    () => chains?.find((c) => c.id === chainId),
+    [chainId, chains]
+  );
+  const reward = useMemo(
+    () => raw.find(({ chain: { id } }) => id === chainId),
+    [chainId, raw]
+  );
   const { claimTransaction } = useReward(reward, user);
 
   const isUserRewards = useMemo(() => user === address, [user, address]);
   const isAbleToClaim = useMemo(
-    () => isUserRewards && reward && !reward.rewards.every(({ amount, claimed }) => amount === claimed),
-    [isUserRewards, reward],
+    () =>
+      isUserRewards &&
+      reward &&
+      !reward.rewards.every(({ amount, claimed }) => amount === claimed),
+    [isUserRewards, reward]
   );
 
   return (
@@ -86,7 +96,12 @@ export default function Index() {
           </Group>
           <Group className="flex-col">
             {isAbleToClaim && (
-              <TransactionButton disabled={!claimTransaction} look="hype" size="lg" tx={claimTransaction}>
+              <TransactionButton
+                disabled={!claimTransaction}
+                look="hype"
+                size="lg"
+                tx={claimTransaction}
+              >
                 Claim on {chain?.name}
               </TransactionButton>
             )}
@@ -125,7 +140,8 @@ export default function Index() {
           link: `/users/${address}/claims`,
           key: crypto.randomUUID(),
         },
-      ]}>
+      ]}
+    >
       <Outlet context={rewards} />
     </Hero>
   );

src/routes/_merkl.users.(none).tsx

@@ -4,6 +4,7 @@ import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useState } from "react";
 import Hero from "src/components/composite/Hero";
 import { v4 as uuidv4 } from "uuid";
+import { isAddress } from "viem";
 
 export default function Index() {
   const [_isEditingAddress] = useState(false);
@@ -16,7 +17,7 @@ export default function Index() {
       title={"Claims"}
       description={"Claim and monitor the rewards awarded through Merkl"}
       tabs={
-        !address
+        !address || !isAddress(address)
           ? []
           : [
               {
@@ -50,7 +51,8 @@ export default function Index() {
                 key: uuidv4(),
               },
             ]
-      }>
+      }
+    >
       <Outlet />
     </Hero>
   );