Dashboard: Fix Token Rewards UI not accounting for token decimals (#8164)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the handling of token rewards by adding `decimals` properties for tokens in various components and improving the retrieval of metadata related to tokens.

### Detailed summary
- Added `decimals` property to `token0` and `token1` in `claim-rewards-page.stories.tsx`.
- Introduced `chainMetadata` in `page.tsx`.
- Updated `ClaimRewardsPageUI` to utilize `decimals` for token amounts.
- Refactored `getUnclaimedFees` to fetch `decimals` and `symbol` for tokens.
- Improved token contract retrieval logic in `getUnclaimedFees`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Token amounts now display using each token’s specific decimals.
  - Chain metadata is passed to unclaimed-fees retrieval to source native token symbol and decimals.

- Bug Fixes
  - Removed hardcoded 18-decimal assumption so amounts render correctly for tokens with different precisions.

- Tests
  - Story/test stubs updated to include decimals for token objects for more realistic scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

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

@@ -30,11 +30,13 @@ function unclaimedFeesStub(token0Amount: bigint, token1Amount: bigint) {
       address: "0x1234567890123456789012345678901234567890",
       amount: token0Amount,
       symbol: "FOO",
+      decimals: 18,
     },
     token1: {
       address: "0x0987654321098765432109876543210987654321",
       amount: token1Amount,
       symbol: "BAR",
+      decimals: 18,
     },
   };
 }

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

@@ -29,11 +29,13 @@ export function ClaimRewardsPage(props: {
       address: string;
       amount: bigint;
       symbol: string;
+      decimals: number;
     };
     token1: {
       address: string;
       amount: bigint;
       symbol: string;
+      decimals: number;
     };
   };
   chainSlug: string;
@@ -98,11 +100,13 @@ export function ClaimRewardsPageUI(props: {
       address: string;
       amount: bigint;
       symbol: string;
+      decimals: number;
     };
     token1: {
       address: string;
       amount: bigint;
       symbol: string;
+      decimals: number;
     };
   };
   recipient: string;
@@ -275,6 +279,7 @@ function TokenReward(props: {
     address: string;
     amount: bigint;
     symbol: string;
+    decimals: number;
   };
   client: ThirdwebClient;
   chain: Chain;
@@ -303,7 +308,8 @@ function TokenReward(props: {
       </div>
       <div className="space-y-0.5">
         <p className="font-bold text-sm">
-          {toTokens(props.token.amount, 18)} {props.token.symbol}
+          {toTokens(props.token.amount, props.token.decimals)}{" "}
+          {props.token.symbol}
         </p>
         <Link
           target="_blank"

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

@@ -31,6 +31,7 @@ export default async function Page(props: {
   const chain = info.clientContract.chain;
   const assetContractServer = info.serverContract;
   const serverClient = assetContractServer.client;
+  const chainMetadata = info.chainMetadata;
 
   const { address: entrypointContractAddress } =
     await getDeployedEntrypointERC20({
@@ -56,6 +57,7 @@ export default async function Page(props: {
 
   // Note: must use server contract/client here
   const unclaimedFees = await getUnclaimedFees({
+    chainMetadata,
     positionManager: getContract({
       address: reward.positionManager,
       chain,

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

@@ -1,11 +1,14 @@
 import type { ThirdwebContract } from "thirdweb";
-import { getContract, readContract } from "thirdweb";
+import { getAddress, getContract, readContract, ZERO_ADDRESS } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
 import { symbol } from "thirdweb/extensions/common";
+import { decimals } from "thirdweb/extensions/erc20";
 
 const maxUint128 = 2n ** 128n - 1n;
 
 export async function getUnclaimedFees(params: {
   positionManager: ThirdwebContract;
+  chainMetadata: ChainMetadata;
   reward: {
     tokenId: bigint;
     recipient: string;
@@ -56,33 +59,60 @@ export async function getUnclaimedFees(params: {
   const token0Address = positionsResult[2];
   const token1Address = positionsResult[3];
 
-  const [token0Symbol, token1Symbol] = await Promise.all([
-    symbol({
-      contract: getContract({
-        address: token0Address,
-        chain,
-        client,
-      }),
-    }),
-    symbol({
-      contract: getContract({
-        address: token1Address,
-        chain,
-        client,
-      }),
-    }),
-  ]);
+  const token0Contract = getContract({
+    address: token0Address,
+    chain,
+    client,
+  });
+
+  const token1Contract = getContract({
+    address: token1Address,
+    chain,
+    client,
+  });
+
+  const isToken0Native = getAddress(token0Address) === getAddress(ZERO_ADDRESS);
+  const isToken1Native = getAddress(token1Address) === getAddress(ZERO_ADDRESS);
+
+  const nativeSymbol = params.chainMetadata.nativeCurrency.symbol;
+  const nativeDecimals = params.chainMetadata.nativeCurrency.decimals;
+
+  const [token0Symbol, token1Symbol, token0Decimals, token1Decimals] =
+    await Promise.all([
+      isToken0Native
+        ? nativeSymbol
+        : symbol({
+            contract: token0Contract,
+          }),
+      isToken1Native
+        ? nativeSymbol
+        : symbol({
+            contract: token1Contract,
+          }),
+      isToken0Native
+        ? nativeDecimals
+        : decimals({
+            contract: token0Contract,
+          }),
+      isToken1Native
+        ? nativeDecimals
+        : decimals({
+            contract: token1Contract,
+          }),
+    ]);
 
   return {
     token0: {
       address: token0Address,
       amount: collectResult[0],
       symbol: token0Symbol,
+      decimals: token0Decimals,
     },
     token1: {
       address: token1Address,
       amount: collectResult[1],
       symbol: token1Symbol,
+      decimals: token1Decimals,
     },
   };
 }