From 4adfedccee59afa4f06cfc01fb56265dac94bce6 Mon Sep 17 00:00:00 2001 From: hugolxt <87241914+hugolxt@users.noreply.github.com> Date: Tue, 7 Jan 2025 17:29:29 +0100 Subject: [PATCH] Sync/merkl app rebased (#9) * sync merkl app * update config * lint --- merkl.config.ts | 6 +++--- packages/dappkit | 2 +- src/api/services/reward.service.ts | 2 +- .../element/rewards/ClaimRewardsChainTableRow.tsx | 7 +++++-- .../element/rewards/ClaimRewardsLibrary.tsx | 12 +++++++++--- src/components/layout/Header.tsx | 4 ++-- src/routes/_merkl.users.$address.(rewards).tsx | 4 ++-- src/routes/_merkl.users.$address.tsx | 13 ++++++++----- 8 files changed, 31 insertions(+), 19 deletions(-) diff --git a/merkl.config.ts b/merkl.config.ts index 50ec4064..829e3892 100644 --- a/merkl.config.ts +++ b/merkl.config.ts @@ -172,13 +172,13 @@ export default createConfig({ }, header: { searchbar: { - enabled: true, + enabled: false, }, opportunities: { enabled: false, }, bridge: { - enabled: true, + enabled: false, }, }, socials: { @@ -253,4 +253,4 @@ export default createConfig({ }), ], }, -}); \ No newline at end of file +}); diff --git a/packages/dappkit b/packages/dappkit index a676c8db..6156edc5 160000 --- a/packages/dappkit +++ b/packages/dappkit @@ -1 +1 @@ -Subproject commit a676c8db3418db3d9e7ffb9c2dc9412bf0a4ac66 +Subproject commit 6156edc5bdbdf95d34ac57147d4c3db26ae03f4a diff --git a/src/api/services/reward.service.ts b/src/api/services/reward.service.ts index bc358917..7a5e211a 100644 --- a/src/api/services/reward.service.ts +++ b/src/api/services/reward.service.ts @@ -52,9 +52,9 @@ export abstract class RewardService { // biome-ignore lint/suspicious/noExplicitAny: TODO const query: Record = { - 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({ diff --git a/src/components/element/rewards/ClaimRewardsChainTableRow.tsx b/src/components/element/rewards/ClaimRewardsChainTableRow.tsx index 09c17aff..04f3f902 100644 --- a/src/components/element/rewards/ClaimRewardsChainTableRow.tsx +++ b/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 ) : ( diff --git a/src/components/element/rewards/ClaimRewardsLibrary.tsx b/src/components/element/rewards/ClaimRewardsLibrary.tsx index a808942f..cc07c463 100644 --- a/src/components/element/rewards/ClaimRewardsLibrary.tsx +++ b/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 ( (index === 1 ? "bg-accent-10" : "bg-main-7")}> {rewards?.map((reward, index) => ( - + ))} ); } - }, [rewards, flatenedRewards, from]); + }, [rewards, flatenedRewards, from, onClaimSuccess]); return ( diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index cd2b03bc..167101c1 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -123,14 +123,14 @@ export default function Header() { {Object.entries(routes) .filter(([key]) => !["home", "faq", "docs"].includes(key)) - .map(([key, { route }]) => { + .map(([key, route]) => { return ( ); diff --git a/src/routes/_merkl.users.$address.(rewards).tsx b/src/routes/_merkl.users.$address.(rewards).tsx index dd8dde67..a59cac69 100644 --- a/src/routes/_merkl.users.$address.(rewards).tsx +++ b/src/routes/_merkl.users.$address.(rewards).tsx @@ -14,7 +14,7 @@ export async function loader({ params: { address } }: LoaderFunctionArgs) { export default function Index() { const { address } = useLoaderData(); - const { sortedRewards } = useOutletContext(); + const { rewards: sortedRewards, onClaimSuccess } = useOutletContext(); return ( @@ -28,7 +28,7 @@ export default function Index() { )} - + ); } diff --git a/src/routes/_merkl.users.$address.tsx b/src/routes/_merkl.users.$address.tsx index a2a5efe8..65842167 100644 --- a/src/routes/_merkl.users.$address.tsx +++ b/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 = ({ data, error }) => { ]; }; -export type OutletContextRewards = ReturnType; +export type OutletContextRewards = { + rewards: ReturnType["sortedRewards"]; + onClaimSuccess: TransactionButtonProps["onSuccess"]; +}; export default function Index() { const { rewards: raw, address, token: rawToken } = useLoaderData(); const fetcher = useFetcher(); - 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}`} @@ -193,7 +196,7 @@ export default function Index() { } description={""} tabs={tabs}> - + ); }