Skip to content

Commit db396a7

Browse files
MananTankMananTank
committed
update
1 parent 6bfce15 commit db396a7

File tree

3 files changed

+142
-63
lines changed

3 files changed

+142
-63
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/components/claim-rewards-page.stories.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import type { Meta } from "@storybook/nextjs";
2+
import { toUnits } from "thirdweb";
3+
import { ThirdwebProvider } from "thirdweb/react";
4+
import { storybookThirdwebClient } from "@/storybook/utils";
5+
import { ClaimRewardsPageUI } from "./claim-rewards-page";
6+
7+
const meta = {
8+
component: ClaimRewardsPageUI,
9+
title: "contracts/extensions/claim-rewards",
10+
decorators: [
11+
(Story) => (
12+
<ThirdwebProvider>
13+
<div className="container max-w-7xl py-10">
14+
<Story />
15+
</div>
16+
</ThirdwebProvider>
17+
),
18+
],
19+
} satisfies Meta<typeof ClaimRewardsPageUI>;
20+
21+
export default meta;
22+
23+
const recipient = "0x8C00f3F231c88CcAc2382AaC6e09A78D4F42129d";
24+
const referrer = "0x1Af20C6B23373350aD464700B5965CE4B0D2aD94";
25+
26+
function unclaimedFeesStub(token0Amount: bigint, token1Amount: bigint) {
27+
return {
28+
token0: {
29+
address: "0x1234567890123456789012345678901234567890",
30+
amount: token0Amount,
31+
},
32+
token1: {
33+
address: "0x0987654321098765432109876543210987654321",
34+
amount: token1Amount,
35+
},
36+
};
37+
}
38+
39+
export function LargeAmounts() {
40+
return (
41+
<Variant
42+
token0Amount={toUnits("100000", 18)}
43+
token1Amount={toUnits("500000", 18)}
44+
/>
45+
);
46+
}
47+
48+
export function SmallAmounts() {
49+
return (
50+
<Variant
51+
token0Amount={toUnits("0.001", 18)}
52+
token1Amount={toUnits("0.0005", 18)}
53+
/>
54+
);
55+
}
56+
57+
export function ZeroAmounts() {
58+
return (
59+
<Variant token0Amount={toUnits("0", 18)} token1Amount={toUnits("0", 18)} />
60+
);
61+
}
62+
63+
function Variant(props: { token0Amount: bigint; token1Amount: bigint }) {
64+
return (
65+
<ClaimRewardsPageUI
66+
recipient={recipient}
67+
referrer={referrer}
68+
client={storybookThirdwebClient}
69+
handleClaim={() => {}}
70+
isClaimPending={false}
71+
unclaimedFees={unclaimedFeesStub(props.token0Amount, props.token1Amount)}
72+
/>
73+
);
74+
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/components/claim-rewards-page.tsx‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
"use client";
22

3-
import { useQuery } from "@tanstack/react-query";
43
import { ArrowRightIcon } from "lucide-react";
54
import { toast } from "sonner";
6-
import type { ThirdwebContract } from "thirdweb";
5+
import { type ThirdwebClient, type ThirdwebContract, toTokens } from "thirdweb";
76
import { claimReward } from "thirdweb/assets";
87
import { useSendAndConfirmTransaction } from "thirdweb/react";
98
import { WalletAddress } from "@/components/blocks/wallet-address";
@@ -12,21 +11,28 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
1211
import { parseError } from "@/utils/errorParser";
1312
import { tryCatch } from "@/utils/try-catch";
1413
import type { getValidReward } from "../utils/rewards";
15-
import { getUnclaimedFees } from "../utils/unclaimed-fees";
1614

1715
export function ClaimRewardsPage(props: {
1816
assetContractClient: ThirdwebContract;
1917
entrypointContractClient: ThirdwebContract;
2018
reward: NonNullable<Awaited<ReturnType<typeof getValidReward>>>;
21-
rewardLockerContractClient: ThirdwebContract;
22-
v3PositionManagerContractClient: ThirdwebContract;
19+
unclaimedFees: {
20+
token0: {
21+
address: string;
22+
amount: bigint;
23+
};
24+
token1: {
25+
address: string;
26+
amount: bigint;
27+
};
28+
};
2329
}) {
2430
const sendAndConfirmTransaction = useSendAndConfirmTransaction();
2531

2632
async function handleClaim() {
2733
const claimRewardsTx = claimReward({
2834
asset: props.assetContractClient.address,
29-
contract: props.rewardLockerContractClient,
35+
contract: props.entrypointContractClient,
3036
});
3137

3238
const claimRewardsResult = await tryCatch(
@@ -42,71 +48,66 @@ export function ClaimRewardsPage(props: {
4248
}
4349
}
4450

45-
const unclaimedFeesQuery = useQuery({
46-
queryKey: [
47-
"get-unclaimed-fees",
48-
{
49-
positionManager: props.v3PositionManagerContractClient.address,
50-
reward: {
51-
tokenId: props.reward.tokenId.toString(),
52-
recipient: props.reward.recipient,
53-
},
54-
},
55-
],
56-
queryFn: async () =>
57-
getUnclaimedFees({
58-
positionManager: props.v3PositionManagerContractClient,
59-
reward: {
60-
tokenId: props.reward.tokenId,
61-
recipient: props.reward.recipient,
62-
},
63-
}),
51+
console.log({
52+
props,
6453
});
6554

66-
// TODO: add proper UI
55+
return (
56+
<ClaimRewardsPageUI
57+
unclaimedFees={props.unclaimedFees}
58+
recipient={props.reward.recipient}
59+
referrer={props.reward.referrer}
60+
handleClaim={handleClaim}
61+
isClaimPending={sendAndConfirmTransaction.isPending}
62+
client={props.assetContractClient.client}
63+
/>
64+
);
65+
}
6766

67+
export function ClaimRewardsPageUI(props: {
68+
unclaimedFees: {
69+
token0: {
70+
address: string;
71+
amount: bigint;
72+
};
73+
token1: {
74+
address: string;
75+
amount: bigint;
76+
};
77+
};
78+
recipient: string;
79+
referrer: string;
80+
handleClaim: () => void;
81+
isClaimPending: boolean;
82+
client: ThirdwebClient;
83+
}) {
6884
return (
6985
<div>
7086
<h2 className="font-semibold text-2xl tracking-tight mb-3">
7187
Claim Rewards
7288
</h2>
7389

7490
<div className="mb-4">
75-
{unclaimedFeesQuery.isPending && (
76-
<div className="flex items-center gap-2">
77-
<Spinner className="size-4" />
78-
Loading unclaimed fees
79-
</div>
80-
)}
81-
{unclaimedFeesQuery.error && (
82-
<div className="text-red-500">
83-
Failed to load unclaimed fees {parseError(unclaimedFeesQuery.error)}
84-
</div>
85-
)}
86-
87-
{unclaimedFeesQuery.data && (
88-
<div className="flex flex-col gap-2">
89-
<p>
90-
Amount0: {unclaimedFeesQuery.data.token0.amount}{" "}
91-
{unclaimedFeesQuery.data.token0.address}
92-
</p>
93-
<p>
94-
Amount1: {unclaimedFeesQuery.data.token1.amount}{" "}
95-
{unclaimedFeesQuery.data.token1.address}
96-
</p>
97-
</div>
98-
)}
99-
91+
<div className="flex flex-col gap-2">
92+
<p>
93+
Amount0: {toTokens(props.unclaimedFees.token0.amount, 18)}{" "}
94+
{props.unclaimedFees.token0.address}
95+
</p>
96+
<p>
97+
Amount1: {toTokens(props.unclaimedFees.token1.amount, 18)}{" "}
98+
{props.unclaimedFees.token1.address}
99+
</p>
100+
</div>
100101
<p>Recipient</p>
101-
<WalletAddress
102-
address={props.reward.recipient}
103-
client={props.assetContractClient.client}
104-
/>
102+
<WalletAddress address={props.recipient} client={props.client} />
103+
104+
<p>Referrer</p>
105+
<WalletAddress address={props.referrer} client={props.client} />
105106
</div>
106107

107-
<Button onClick={handleClaim} className="gap-2">
108+
<Button onClick={props.handleClaim} className="gap-2">
108109
Claim Rewards
109-
{sendAndConfirmTransaction.isPending ? (
110+
{props.isClaimPending ? (
110111
<Spinner className="size-4" />
111112
) : (
112113
<ArrowRightIcon className="size-4" />

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/page.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { getContractPageParamsInfo } from "../../../../../../../(dashboard)/(cha
1010
import type { ProjectContractPageParams } from "../types";
1111
import { ClaimRewardsPage } from "./components/claim-rewards-page";
1212
import { getValidReward } from "./utils/rewards";
13+
import { getUnclaimedFees } from "./utils/unclaimed-fees";
1314

1415
export default async function Page(props: {
1516
params: Promise<ProjectContractPageParams>;
@@ -63,10 +64,6 @@ export default async function Page(props: {
6364
contract: rewardLockerContractClient,
6465
}).catch(() => null);
6566

66-
// const v4PositionManager = await getV4PositionManager({
67-
// contract: rewardLockerContractClient,
68-
// }).catch(() => null);
69-
7067
if (!v3PositionManager || v3PositionManager !== reward.positionManager) {
7168
redirect(
7269
`/team/${params.team_slug}/${params.project_slug}/contract/${params.chainIdOrSlug}/${params.contractAddress}`,
@@ -79,13 +76,20 @@ export default async function Page(props: {
7976
client: assetContractClient.client,
8077
});
8178

79+
const unclaimedFees = await getUnclaimedFees({
80+
positionManager: v3PositionManagerContract,
81+
reward: {
82+
tokenId: reward.tokenId,
83+
recipient: reward.recipient,
84+
},
85+
});
86+
8287
return (
8388
<ClaimRewardsPage
8489
assetContractClient={assetContractClient}
8590
entrypointContractClient={entrypointContractClient}
86-
rewardLockerContractClient={rewardLockerContractClient}
8791
reward={reward}
88-
v3PositionManagerContractClient={v3PositionManagerContract}
92+
unclaimedFees={unclaimedFees}
8993
/>
9094
);
9195
}

0 commit comments

Comments
 (0)