draft

src/routes/_merkl.users.$address.(rewards).tsx

@@ -1,22 +1,35 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData } from "@remix-run/react";
 import { Container, Space } from "dappkit";
-import { api } from "src/api/index.server";
+import { useMemo } from "react";
+import { RewardService } from "src/api/services/reward.service";
 import ClaimRewardsLibrary from "src/components/element/rewards/ClaimRewardsLibrary";
+import { formatUnits } from "viem";
 
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
   if (!address) throw "";
 
-  const { data: rewards } = await api.v4.users({ address }).rewards.full.get({ query: {} });
-
-  if (!rewards) throw "";
+  const rewards = await RewardService.getForUser(address);
 
   return json({ rewards, address });
 }
 
 export default function Index() {
   const { rewards, address } = useLoaderData<typeof loader>();
 
+  const claimed = useMemo(() => {
+    return rewards.reduce(({claimed, unclaimed}, chain) => {
+      const valueClaimed = chain.rewards.reduce((sum, token) => {
+        const value = Number.parseFloat(formatUnits(token.amount - token.claimed, token.token.decimals)) * (token.token.price ?? 0);
+
+        return sum + value
+      }, 0);
+      const valueEarned = chain.rewards.reduce((sum, token) => sum + token.amount, 0n);
+
+      return {claimed: claimed}
+    })
+  }, [rewards]);
+
   return (
     <Container>
       <Space size="md" />

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

@@ -1,9 +1,21 @@
-import { Outlet, useParams } from "@remix-run/react";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json, Outlet, useParams } from "@remix-run/react";
 import { Button, Group, Hash, Icon, Text } from "dappkit";
 import { useState } from "react";
+import { RewardService } from "src/api/services/reward.service";
 import Hero from "src/components/composite/Hero";
 
+export async function loader({ params: { address } }: LoaderFunctionArgs) {
+  if (!address) throw "";
+
+  //TODO: use a ligther route
+  const rewards = await RewardService.getForUser(address);
+
+  return json({ rewards, address });
+}
+
 export default function Index() {
+  const { rewards, address } = useLoaderData<typeof loader>();
   const { address } = useParams();
   const [_isEditingAddress] = useState(false);