chore: trying leaderboard in 2 files

src/components/element/leaderboard/LeaderboardLibrary.tsx

@@ -33,7 +33,7 @@ export default function LeaderboardLibrary(props: LeaderboardLibraryProps) {
         key={uuidv4()}
         total={BigInt(total ?? 0n)}
         row={row}
-        reason={reason}
+        showreason={reason}
         rank={index + 1 + Math.max(Number(page) - 1, 0) * Number(items)}
         token={token}
         chain={chain}

src/components/element/leaderboard/LeaderboardTableRow.tsx

@@ -13,11 +13,11 @@ export type LeaderboardTableRowProps = Component<{
   rank: number;
   token: TokenType;
   chain: number;
-  reason: boolean;
+  showreason: boolean;
 }>;
 
 export default function LeaderboardTableRow({ row, rank, total, className, ...props }: LeaderboardTableRowProps) {
-  const { token, chain: chainId, reason } = props;
+  const { token, chain: chainId, showreason } = props;
   const { chains } = useWalletContext();
 
   const share = useMemo(() => {
@@ -31,7 +31,7 @@ export default function LeaderboardTableRow({ row, rank, total, className, ...pr
     return chains?.find(c => c.id === chainId);
   }, [chains, chainId]);
 
-  return reason ? (
+  return showreason ? (
     <LeaderboardRow
       {...props}
       className={mergeClass("cursor-pointer", className)}

src/components/element/opportunity/Pagination.tsx

@@ -28,7 +28,7 @@ export default function Pagination({ count }: PaginationProps) {
   }, [pages]);
 
   return (
-    <Group className="justify-between">
+    <Group className="justify-between w-full">
       <Group>
         <Select
           state={[itemsFilter ?? DEFAULT_ITEMS_PER_PAGE, setItemsFilter]}

src/modules/leaderboard/routes/leaderboard.($chain).($address).header.tsx

@@ -0,0 +1,56 @@
+import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
+import { Outlet, useLoaderData } from "@remix-run/react";
+import { I18n } from "../../../I18n";
+import Hero from "../../../components/composite/Hero";
+import merklConfig from "../../../config";
+import { ChainService } from "../../chain/chain.service";
+import { TokenService } from "../../token/token.service";
+
+export const extractChainAndTokenFromParams = async (address: string | undefined, chainName: string | undefined) => {
+  if (!chainName && !merklConfig.leaderboard) throw "";
+  if (!chainName) chainName = merklConfig.leaderboard!.chain;
+
+  if (!address && !merklConfig.leaderboard) throw "";
+  if (!address) address = merklConfig.leaderboard!.address;
+
+  const chain = await ChainService.get({ name: chainName });
+  const token = await TokenService.findUniqueOrThrow(chain.id, address);
+
+  return { chain, token };
+};
+
+export async function loader({ params: { address, chain: chainName } }: LoaderFunctionArgs) {
+  const { chain, token } = await extractChainAndTokenFromParams(address, chainName);
+
+  return json({
+    token,
+    chain,
+  });
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data: _data }) => {
+  return [{ title: I18n.trad.get.pages.leaderboard.headTitle }];
+};
+
+export default function Index() {
+  const { token } = useLoaderData<typeof loader>();
+
+  return (
+    <Hero
+      breadcrumbs={[
+        { link: "/tokens", name: "Tokens" },
+        { link: `/tokens/${token.symbol}`, name: token.symbol },
+      ]}
+      icons={[{ src: token.icon }]}
+      navigation={{ label: "Back to opportunities", link: "/" }}
+      title={
+        <>
+          {token.name} <span className="font-mono text-main-8">({token.symbol})</span>
+        </>
+      }
+      description={`Leaderboard of all ${token.symbol} rewards earned through Merkl`}>
+      <Outlet />
+    </Hero>
+  );
+}

src/modules/leaderboard/routes/leaderboard.($chain).($address).tsx → src/modules/leaderboard/routes/leaderboard.($chain).($address).leaderboard.tsx

@@ -1,29 +1,21 @@
 import { type LoaderFunctionArgs, json } from "@remix-run/node";
-import { type MetaFunction, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { Box, Container, Group, Space, Title, Value } from "dappkit";
 import { useMemo } from "react";
 import { formatUnits } from "viem";
-import { I18n } from "../../../I18n";
-import Hero from "../../../components/composite/Hero";
 import LeaderboardLibrary from "../../../components/element/leaderboard/LeaderboardLibrary";
+import { ErrorHeading } from "../../../components/layout/ErrorHeading";
 import merklConfig from "../../../config";
-import { ChainService } from "../../chain/chain.service";
+import { Cache } from "../../../modules/cache/cache.service";
 import { RewardService } from "../../reward/reward.service";
-import { TokenService } from "../../token/token.service";
+import { extractChainAndTokenFromParams } from "./leaderboard.($chain).($address).header";
 
-export async function loader({ params: { address, chain: chainId }, request }: LoaderFunctionArgs) {
-  if (!chainId && !merklConfig.leaderboard) throw "";
-  if (!chainId) chainId = merklConfig.leaderboard!.chain;
-
-  if (!address && !merklConfig.leaderboard) throw "";
-  if (!address) address = merklConfig.leaderboard!.address;
-
-  const chain = await ChainService.get({ name: chainId });
-  const token = await TokenService.findUniqueOrThrow(chain.id, address);
+export async function loader({ params: { address, chain: chainName }, request }: LoaderFunctionArgs) {
+  const { chain, token } = await extractChainAndTokenFromParams(address, chainName);
 
   const { rewards, count, total } = await RewardService.getTokenLeaderboard(request, {
     chainId: chain.id,
-    address,
+    address: token.address,
   });
 
   return json({
@@ -35,9 +27,7 @@ export async function loader({ params: { address, chain: chainId }, request }: L
   });
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data: _data }) => {
-  return [{ title: I18n.trad.get.pages.leaderboard.headTitle }];
-};
+export const clientLoader = Cache.wrap("leaderboard", 300);
 
 export default function Index() {
   const { rewards, token, chain, count, total } = useLoaderData<typeof loader>();
@@ -82,23 +72,11 @@ export default function Index() {
   );
 
   return (
-    <Hero
-      breadcrumbs={[
-        { link: "/tokens", name: "Tokens" },
-        { link: `/tokens/${token.symbol}`, name: token.symbol },
-      ]}
-      icons={[{ src: token.icon }]}
-      navigation={{ label: "Back to opportunities", link: "/" }}
-      title={
-        <>
-          {token.name} <span className="font-mono text-main-8">({token.symbol})</span>
-        </>
-      }
-      description={`Leaderboard of all ${token.symbol} rewards earned through Merkl`}>
-      <Container>
-        <Space size="lg" />
-        <Group size="lg">{metrics}</Group>
-        <Space size="lg" />
+    <Container>
+      <Space size="lg" />
+      <Group size="lg">{metrics}</Group>
+      <Space size="lg" />
+      {token && (
         <LeaderboardLibrary
           reason={false}
           leaderboard={rewards}
@@ -107,8 +85,12 @@ export default function Index() {
           count={count?.count ?? 0}
           total={total}
         />
-      </Container>
+      )}
       <Space size="lg" />
-    </Hero>
+    </Container>
   );
 }
+
+export function ErrorBoundary() {
+  return <ErrorHeading />;
+}

vite.config.ts

@@ -39,6 +39,13 @@ export default defineConfig({
               ],
             );
 
+            route(
+              "/leaderboard/:chain/:address",
+              "./packages/merkl-app-core/src/modules/leaderboard/routes/leaderboard.($chain).($address)",
+              file => `${file}.header`,
+              [[url => `${url}/leaderboard`, file => `${file}.leaderboard`]],
+            );
+
             route("/tokens/:symbol", "modules/token/routes/token.$symbol", tokens => `${tokens}.header`, [
               [tokens => tokens, tokens => `${tokens}.opportunities`],
             ]);