[SDK] Fix: stringify bigint erc20Value in useTransactionDetails (#7360)

Author: gregfromstl

.changeset/fluffy-paws-slide.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix setting explicit amount on TransactionWidget

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

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -198,17 +198,6 @@ type UIOptionsResult =
  *  />
  * ```
  *
- * ### Enable/Disable payment methods
- *
- * You can use `disableOnramps` to prevent the use of onramps in the widget.
- *
- * ```tsx
- * <CheckoutWidget
- *   client={client}
- *   disableOnramps
- *  />
- * ```
- *
  * ### Customize the UI
  *
  * You can customize the UI of the `CheckoutWidget` component by passing a custom theme object to the `theme` prop.

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -201,23 +201,6 @@ type UIOptionsResult =
  *  />
  * ```
  *
- * ### Enable/Disable payment methods
- *
- * You can use `disableOnramps` to prevent the use of onramps in the widget.
- *
- * ```tsx
- * <TransactionWidget
- *   client={client}
- *   transaction={prepareTransaction({
- *     to: "0x...",
- *     chain: ethereum,
- *     client: client,
- *     value: toUnits("0.001", 18),
- *   })}
- *   disableOnramps
- *  />
- * ```
- *
  * ### Customize the UI
  *
  * You can customize the UI of the `TransactionWidget` component by passing a custom theme object to the `theme` prop.