fix: stringify bigint erc20Value in useTransactionDetails

Author: gregfromstl

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -40,25 +40,20 @@ export function PayTransactionPreview() {
   });
 
   return (
-    <>
-      <StyledConnectButton />
-      <div className="h-10" />
-      {account && (
-        <TransactionWidget
-          client={THIRDWEB_CLIENT}
-          theme={theme === "light" ? "light" : "dark"}
-          transaction={claimTo({
-            contract: nftContract,
-            quantity: 1n,
-            tokenId: 2n,
-            to: account?.address || "",
-          })}
-          title={nft?.metadata?.name}
-          description={nft?.metadata?.description}
-          image={nft?.metadata?.image}
-        />
-      )}
-    </>
+    <TransactionWidget
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "light" : "dark"}
+      transaction={claimTo({
+        contract: nftContract,
+        quantity: 1n,
+        tokenId: 2n,
+        to: account?.address || "",
+      })}
+      amount={100n}
+      title={nft?.metadata?.name}
+      description={nft?.metadata?.description}
+      image={nft?.metadata?.image}
+    />
   );
 }
 

packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts

@@ -57,7 +57,7 @@ export function useTransactionDetails({
       "transaction-details",
       transaction.to,
       transaction.chain.id,
-      transaction.erc20Value,
+      transaction.erc20Value?.toString(),
     ],
     queryFn: async (): Promise<TransactionDetails> => {
       // Create contract instance for metadata fetching