add claim rewards page

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageMetadata.ts

@@ -25,6 +25,7 @@ export type ContractPageMetadata = {
   isAccount: boolean;
   isAccountPermissionsSupported: boolean;
   functionSelectors: string[];
+  showClaimRewards: boolean;
 };
 
 export async function getContractPageMetadata(contract: ThirdwebContract) {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageMetadataSetup.ts

@@ -1,6 +1,8 @@
 import type { ThirdwebContract } from "thirdweb";
+import { getDeployedEntrypointERC20 } from "thirdweb/assets";
 import { contractType as getContractType } from "thirdweb/extensions/thirdweb";
 import { resolveFunctionSelectors } from "@/lib/selectors";
+import { getValidReward } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/utils/rewards";
 import {
   isERC20ClaimConditionsSupported,
   isERC721ClaimConditionsSupported,
@@ -43,6 +45,7 @@ type ContractPageMetadata = {
   isAccount: boolean;
   isAccountPermissionsSupported: boolean;
   functionSelectors: string[];
+  showClaimRewards: boolean;
 };
 
 export async function getContractPageMetadataSetup(
@@ -53,10 +56,14 @@ export async function getContractPageMetadataSetup(
     functionSelectorsResult,
     isInsightSupportedResult,
     contractTypeResult,
+    claimRewardResult,
   ] = await Promise.allSettled([
     resolveFunctionSelectors(contract),
     isAnalyticsSupportedFn(contract.chain.id),
     getContractType({ contract }),
+    isClaimRewardsSupported({
+      assetContract: contract,
+    }),
   ]);
 
   const functionSelectors =
@@ -72,6 +79,11 @@ export async function getContractPageMetadataSetup(
   const contractType =
     contractTypeResult.status === "fulfilled" ? contractTypeResult.value : null;
 
+  const showClaimRewards =
+    claimRewardResult.status === "fulfilled"
+      ? !!claimRewardResult.value
+      : false;
+
   return {
     embedType: getEmbedTypeToShow(functionSelectors),
     functionSelectors,
@@ -93,5 +105,30 @@ export async function getContractPageMetadataSetup(
     isSplitSupported: contractType === "Split",
     isVoteContract: contractType === "VoteERC20",
     supportedERCs: supportedERCs(functionSelectors),
+    showClaimRewards,
   };
 }
+
+async function isClaimRewardsSupported(params: {
+  assetContract: ThirdwebContract;
+}): Promise<boolean> {
+  try {
+    const entrypointContract = await getDeployedEntrypointERC20({
+      chain: params.assetContract.chain,
+      client: params.assetContract.client,
+    });
+
+    if (!entrypointContract) {
+      return false;
+    }
+
+    const reward = await getValidReward({
+      assetContract: params.assetContract,
+      entrypointContract,
+    });
+
+    return !!reward;
+  } catch {
+    return false;
+  }
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageSidebarLinks.ts

@@ -140,6 +140,12 @@ export function getContractPageSidebarLinks(data: {
       href: `${layoutPrefix}/permissions`,
       label: "Permissions",
     },
+    {
+      exactMatch: true,
+      hide: !data.metadata.showClaimRewards,
+      href: `${layoutPrefix}/claim-rewards`,
+      label: "Claim Rewards",
+    },
   ];
 
   const extensionsToShow = extensionsLinks.filter((l) => !l.hide);

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

@@ -0,0 +1,100 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRightIcon } from "lucide-react";
+import { readContract, type ThirdwebContract } from "thirdweb";
+import { claimReward } from "thirdweb/assets";
+import { useSendAndConfirmTransaction } from "thirdweb/react";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { parseError } from "@/utils/errorParser";
+import type { getValidReward } from "../utils/rewards";
+
+const maxInt128 = 2n ** (128n - 1n) - 1n;
+
+export function ClaimRewardsPage(props: {
+  assetContractClient: ThirdwebContract;
+  entrypointContractClient: ThirdwebContract;
+  reward: NonNullable<Awaited<ReturnType<typeof getValidReward>>>;
+  rewardLockerContractClient: ThirdwebContract;
+  v3PositionManagerContractClient: ThirdwebContract;
+}) {
+  const sendAndConfirmTransaction = useSendAndConfirmTransaction();
+
+  async function handleClaim() {
+    const tx = claimReward({
+      asset: props.assetContractClient.address,
+      contract: props.rewardLockerContractClient,
+    });
+
+    await sendAndConfirmTransaction.mutateAsync(tx);
+  }
+
+  const collectionQuery = useQuery({
+    queryKey: [
+      "unclaimed-fees",
+      {
+        ...props,
+        reward: {
+          ...props.reward,
+          tokenId: props.reward?.tokenId.toString(),
+        },
+      },
+    ],
+    queryFn: async () => {
+      const result = await readContract({
+        contract: props.v3PositionManagerContractClient,
+        method:
+          "function collect((uint256 tokenId,address recipient,uint128 amount0Max,uint128 amount1Max)) returns (uint256,uint256)",
+        params: [
+          {
+            tokenId: props.reward.tokenId,
+            recipient: props.reward.recipient,
+            amount0Max: maxInt128,
+            amount1Max: maxInt128,
+          },
+        ],
+      });
+
+      return result;
+    },
+  });
+
+  return (
+    <div>
+      <h2 className="font-semibold text-2xl tracking-tight mb-3">
+        Claim Rewards
+      </h2>
+
+      <div className="mb-4">
+        {collectionQuery.isPending && (
+          <div className="flex items-center gap-2">
+            <Spinner className="size-4" />
+            Loading unclaimed fees
+          </div>
+        )}
+        {collectionQuery.error && (
+          <div className="text-red-500">
+            Failed to load unclaimed fees {parseError(collectionQuery.error)}
+          </div>
+        )}
+
+        {collectionQuery.data && (
+          <div className="flex items-center gap-2">
+            <p> Amount0: {collectionQuery.data[0]} </p>
+            <p> Amount1: {collectionQuery.data[1]} </p>
+          </div>
+        )}
+      </div>
+
+      <Button onClick={handleClaim} className="gap-2">
+        Claim Rewards
+        {sendAndConfirmTransaction.isPending ? (
+          <Spinner className="size-4" />
+        ) : (
+          <ArrowRightIcon className="size-4" />
+        )}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { notFound, redirect } from "next/navigation";
+import { getContract } from "thirdweb";
+import {
+  getDeployedEntrypointERC20,
+  getRewardLocker,
+  v3PositionManager as getV3PositionManager,
+} from "thirdweb/assets";
+import { getProject } from "@/api/projects";
+import { getContractPageParamsInfo } from "../../../../../../../(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractFromParams";
+import type { ProjectContractPageParams } from "../types";
+import { ClaimRewardsPage } from "./components/claim-rewards-page";
+import { getValidReward } from "./utils/rewards";
+
+export default async function Page(props: {
+  params: Promise<ProjectContractPageParams>;
+}) {
+  const params = await props.params;
+  const project = await getProject(params.team_slug, params.project_slug);
+
+  if (!project) {
+    notFound();
+  }
+
+  const info = await getContractPageParamsInfo({
+    chainIdOrSlug: params.chainIdOrSlug,
+    contractAddress: params.contractAddress,
+    teamId: project.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  const assetContractClient = info.clientContract;
+
+  const entrypointContractClient = await getDeployedEntrypointERC20({
+    chain: assetContractClient.chain,
+    client: assetContractClient.client,
+  });
+
+  const reward = await getValidReward({
+    assetContract: assetContractClient,
+    entrypointContract: entrypointContractClient,
+  });
+
+  const rewardLocker = await getRewardLocker({
+    contract: entrypointContractClient,
+  }).catch(() => null);
+
+  if (!reward || !rewardLocker) {
+    redirect(
+      `/team/${params.team_slug}/${params.project_slug}/contract/${params.chainIdOrSlug}/${params.contractAddress}`,
+    );
+  }
+
+  const rewardLockerContractClient = getContract({
+    address: rewardLocker,
+    chain: assetContractClient.chain,
+    client: assetContractClient.client,
+  });
+
+  const v3PositionManager = await getV3PositionManager({
+    contract: rewardLockerContractClient,
+  }).catch(() => null);
+
+  // const v4PositionManager = await getV4PositionManager({
+  //   contract: rewardLockerContractClient,
+  // }).catch(() => null);
+
+  if (!v3PositionManager || v3PositionManager !== reward.positionManager) {
+    redirect(
+      `/team/${params.team_slug}/${params.project_slug}/contract/${params.chainIdOrSlug}/${params.contractAddress}`,
+    );
+  }
+
+  const v3PositionManagerContract = getContract({
+    address: reward.positionManager,
+    chain: assetContractClient.chain,
+    client: assetContractClient.client,
+  });
+
+  return (
+    <ClaimRewardsPage
+      assetContractClient={assetContractClient}
+      entrypointContractClient={entrypointContractClient}
+      rewardLockerContractClient={rewardLockerContractClient}
+      reward={reward}
+      v3PositionManagerContractClient={v3PositionManagerContract}
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/claim-rewards/utils/rewards.ts

@@ -0,0 +1,28 @@
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import { getReward } from "thirdweb/assets";
+
+export async function getValidReward(params: {
+  assetContract: ThirdwebContract;
+  entrypointContract: ThirdwebContract;
+}) {
+  try {
+    const reward = await getReward({
+      contract: params.entrypointContract,
+      asset: params.assetContract.address,
+    });
+
+    if (
+      reward.positionManager === ZERO_ADDRESS ||
+      reward.recipient === ZERO_ADDRESS ||
+      reward.referrer === ZERO_ADDRESS ||
+      reward.referrerBps === 0 ||
+      reward.tokenId === BigInt(0)
+    ) {
+      return null;
+    }
+
+    return reward;
+  } catch {
+    return null;
+  }
+}

packages/thirdweb/src/exports/assets.ts

@@ -18,5 +18,10 @@ export type {
   PoolConfig,
   TokenParams,
 } from "../assets/types.js";
-export { getInitBytecodeWithSalt } from "../utils/any-evm/get-init-bytecode-with-salt.js";
 export { getReward } from "../extensions/assets/__generated__/ERC20AssetEntrypoint/read/getReward.js";
+export { getRewardLocker } from "../extensions/assets/__generated__/ERC20AssetEntrypoint/read/getRewardLocker.js";
+export { claimReward } from "../extensions/assets/__generated__/ERC20AssetEntrypoint/write/claimReward.js";
+export { positions } from "../extensions/assets/__generated__/RewardLocker/read/positions.js";
+export { v3PositionManager } from "../extensions/assets/__generated__/RewardLocker/read/v3PositionManager.js";
+export { v4PositionManager } from "../extensions/assets/__generated__/RewardLocker/read/v4PositionManager.js";
+export { getInitBytecodeWithSalt } from "../utils/any-evm/get-init-bytecode-with-salt.js";