sync merkl app

src/api/services/reward.service.ts

@@ -52,9 +52,9 @@ export abstract class RewardService {
 
     // biome-ignore lint/suspicious/noExplicitAny: TODO
     const query: Record<string, any> = {
-      chainId: url.searchParams.get("chainId") ?? undefined,
       test: config.alwaysShowTestTokens ? true : (url.searchParams.get("test") ?? false),
     };
+    if (!!url.searchParams.get("chainId")) query.reloadChainId = url.searchParams.get("chainId");
     if (chainIds) query.chainIds = chainIds;
     return await RewardService.#fetch(async () =>
       api.v4.users({ address }).rewards.breakdowns.get({

src/components/element/rewards/ClaimRewardsChainTableRow.tsx

@@ -1,7 +1,7 @@
 import type { Reward } from "@merkl/api";
 import { Button, type Component, Icon, Space, Value, mergeClass } from "dappkit";
 import config from "merkl.config";
-import TransactionButton from "packages/dappkit/src/components/dapp/TransactionButton";
+import TransactionButton, { type TransactionButtonProps } from "packages/dappkit/src/components/dapp/TransactionButton";
 import Collapsible from "packages/dappkit/src/components/primitives/Collapsible";
 import EventBlocker from "packages/dappkit/src/components/primitives/EventBlocker";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
@@ -16,12 +16,14 @@ import ClaimRewardsTokenTableRow from "./ClaimRewardsTokenTableRow";
 export type ClaimRewardsChainTableRowProps = Component<{
   from: string;
   reward: Reward;
+  onClaimSuccess: TransactionButtonProps["onSuccess"];
 }>;
 
 export default function ClaimRewardsChainTableRow({
   from,
   reward,
   className,
+  onClaimSuccess,
   ...props
 }: ClaimRewardsChainTableRowProps) {
   const [open, setOpen] = useState(false);
@@ -99,7 +101,8 @@ export default function ClaimRewardsChainTableRow({
                   disabled={!claimTransaction}
                   className="ml-xl"
                   look="hype"
-                  tx={claimTransaction}>
+                  tx={claimTransaction}
+                  onSuccess={onClaimSuccess}>
                   Claim
                 </TransactionButton>
               ) : (

src/components/element/rewards/ClaimRewardsLibrary.tsx

@@ -1,6 +1,7 @@
 import type { Reward } from "@merkl/api";
 import { Group, Text } from "dappkit";
 import config from "merkl.config";
+import type { TransactionButtonProps } from "packages/dappkit/src/components/dapp/TransactionButton";
 import { useMemo } from "react";
 import { ClaimRewardsChainTable } from "./ClaimRewardsChainTable";
 import ClaimRewardsChainTableRow from "./ClaimRewardsChainTableRow";
@@ -9,9 +10,10 @@ import ClaimRewardsByOpportunity from "./byOpportunity/ClaimRewardsByOpportunity
 export type ClaimRewardsLibraryProps = {
   rewards: Reward[];
   from: string;
+  onClaimSuccess: TransactionButtonProps["onSuccess"];
 };
 
-export default function ClaimRewardsLibrary({ from, rewards }: ClaimRewardsLibraryProps) {
+export default function ClaimRewardsLibrary({ from, rewards, onClaimSuccess }: ClaimRewardsLibraryProps) {
   const flatenedRewards = useMemo(
     () =>
       rewards.flatMap(({ chain, rewards, distributor }) =>
@@ -30,12 +32,16 @@ export default function ClaimRewardsLibrary({ from, rewards }: ClaimRewardsLibra
         return (
           <ClaimRewardsChainTable dividerClassName={index => (index === 1 ? "bg-accent-10" : "bg-main-7")}>
             {rewards?.map((reward, index) => (
-              <ClaimRewardsChainTableRow {...{ from, reward }} key={reward.chain?.id ?? index} />
+              <ClaimRewardsChainTableRow
+                {...{ from, reward }}
+                key={reward.chain?.id ?? index}
+                onClaimSuccess={onClaimSuccess}
+              />
             ))}
           </ClaimRewardsChainTable>
         );
     }
-  }, [rewards, flatenedRewards, from]);
+  }, [rewards, flatenedRewards, from, onClaimSuccess]);
 
   return (
     <Group className="flex-row w-full [&>*]:flex-grow">

src/components/layout/Header.tsx

@@ -123,14 +123,14 @@ export default function Header() {
               <Group className="hidden lg:flex items-center" size="xl">
                 {Object.entries(routes)
                   .filter(([key]) => !["home", "faq", "docs"].includes(key))
-                  .map(([key, { route }]) => {
+                  .map(([key, route]) => {
                     return (
                       <Button
                         className={`${["faq"].includes(key) ? "uppercase" : "capitalize"}`}
                         look="soft"
                         size="lg"
                         key={`${key}-link`}
-                        to={route}>
+                        to={route?.route}>
                         {key}
                       </Button>
                     );

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

@@ -14,7 +14,8 @@ export async function loader({ params: { address } }: LoaderFunctionArgs) {
 
 export default function Index() {
   const { address } = useLoaderData<typeof loader>();
-  const { sortedRewards } = useOutletContext<OutletContextRewards>();
+  const { rewards: sortedRewards, onClaimSuccess } = useOutletContext<OutletContextRewards>();
+
 
   return (
     <Container>
@@ -28,7 +29,7 @@ export default function Index() {
         </Group>
       )}
       <Space size="md" />
-      <ClaimRewardsLibrary from={address} rewards={sortedRewards} />
+      <ClaimRewardsLibrary from={address} rewards={sortedRewards} onClaimSuccess={onClaimSuccess} />
     </Container>
   );
 }

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

@@ -2,7 +2,7 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Outlet, json, useFetcher, useLoaderData } from "@remix-run/react";
 import { Button, Divider, Dropdown, Group, Hash, Icon, Text, Value } from "dappkit";
 import config from "merkl.config";
-import TransactionButton from "packages/dappkit/src/components/dapp/TransactionButton";
+import TransactionButton, { type TransactionButtonProps } from "packages/dappkit/src/components/dapp/TransactionButton";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo } from "react";
 import { RewardService } from "src/api/services/reward.service";
@@ -38,13 +38,16 @@ export const meta: MetaFunction<typeof loader> = ({ data, error }) => {
   ];
 };
 
-export type OutletContextRewards = ReturnType<typeof useRewards>;
+export type OutletContextRewards = {
+  rewards: ReturnType<typeof useRewards>["sortedRewards"];
+  onClaimSuccess: TransactionButtonProps["onSuccess"];
+};
 
 export default function Index() {
   const { rewards: raw, address, token: rawToken } = useLoaderData<typeof loader>();
   const fetcher = useFetcher<typeof loader>();
 
-  const handleRefreshData = async () => {
+  const onClaimSuccess = async (_hash: string) => {
     await fetcher.submit(null, { method: "post", action: `/claim/${address}?chainId=${chainId}` });
   };
 
@@ -151,7 +154,7 @@ export default function Index() {
                   look="hype"
                   size="lg"
                   tx={claimTransaction}
-                  onSuccess={_hash => handleRefreshData()}>
+                  onSuccess={onClaimSuccess}>
                   {isSingleChain ? "Claim Now" : `Claim on ${chain?.name}`}
                   <Icon remix="RiHandCoinFill" />
                 </TransactionButton>
@@ -193,7 +196,7 @@ export default function Index() {
       }
       description={""}
       tabs={tabs}>
-      <Outlet context={rewards} />
+      <Outlet context={{ rewards: rewards.sortedRewards, onClaimSuccess } as OutletContextRewards} />
     </Hero>
   );
 }