refactor: accept string for amount

gregfromstl · gregfromstl · commit 96f4ea211d76 · 2025-06-19T15:53:29.000-07:00
diff --git a/apps/playground-web/src/app/connect/pay/components/CodeGen.tsx b/apps/playground-web/src/app/connect/pay/components/CodeGen.tsx
@@ -1,8 +1,4 @@
-import { THIRDWEB_CLIENT } from "@/lib/client";
-import { useQuery } from "@tanstack/react-query";
 import { Suspense, lazy } from "react";
-import { defineChain, getContract, toUnits } from "thirdweb";
-import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { CodeLoading } from "../../../../components/code/code.client";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
@@ -13,36 +9,11 @@ const CodeClient = lazy(
 export function CodeGen(props: {
   options: BridgeComponentsPlaygroundOptions;
 }) {
-  const { options } = props;
-  const { data: amount } = useQuery({
-    queryKey: [
-      "amount",
-      options.payOptions.buyTokenAmount,
-      options.payOptions.buyTokenChain,
-      options.payOptions.buyTokenAddress,
-    ],
-    queryFn: async () => {
-      if (!options.payOptions.buyTokenAmount) {
-        return;
-      }
-      const contract = getContract({
-        chain: defineChain(options.payOptions.buyTokenChain.id),
-        address: options.payOptions.buyTokenAddress,
-        client: THIRDWEB_CLIENT,
-      });
-      const token = await getCurrencyMetadata({
-        contract,
-      });
-
-      return toUnits(options.payOptions.buyTokenAmount, token.decimals);
-    },
-  });
-
   return (
     <div className="flex w-full grow flex-col">
       <Suspense fallback={<CodeLoading />}>
         <CodeClient
-          code={getCode(props.options, amount)}
+          code={getCode(props.options)}
           lang="tsx"
           loader={<CodeLoading />}
           className="grow"
@@ -52,7 +23,7 @@ export function CodeGen(props: {
   );
 }
 
-function getCode(options: BridgeComponentsPlaygroundOptions, amount?: bigint) {
+function getCode(options: BridgeComponentsPlaygroundOptions) {
   const imports = {
     react: ["PayEmbed"] as string[],
     thirdweb: [] as string[],
@@ -104,7 +75,7 @@ function Example() {
     <${componentName}
       client={client}
       chain={defineChain(${options.payOptions.buyTokenChain.id})}
-      amount={${amount}n}${options.payOptions.buyTokenAddress ? `\n\t  token="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${
+      amount="${options.payOptions.buyTokenAmount}"${options.payOptions.buyTokenAddress ? `\n\t  token="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${
         options.payOptions.widget === "transaction"
           ? `\n\t  transaction={claimTo({
         contract: nftContract,
diff --git a/apps/playground-web/src/app/connect/pay/components/types.ts b/apps/playground-web/src/app/connect/pay/components/types.ts
@@ -13,7 +13,7 @@ export type BridgeComponentsPlaygroundOptions = {
     image: string | undefined;
     description: string | undefined;
 
-    buyTokenAddress: Address;
+    buyTokenAddress?: Address;
     buyTokenAmount: string;
     buyTokenChain: Chain;
 
diff --git a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
@@ -1,10 +1,8 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
-import { getContract, toUnits } from "thirdweb";
+import { getContract } from "thirdweb";
 import { base } from "thirdweb/chains";
-import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc1155";
 import {
   BuyWidget,
@@ -43,18 +41,6 @@ export function RightSection(props: {
   }
 
   const account = useActiveAccount();
-  const { data: tokenData } = useQuery({
-    queryKey: ["token", props.options.payOptions.buyTokenAddress],
-    queryFn: () =>
-      getCurrencyMetadata({
-        contract: getContract({
-          address: props.options.payOptions.buyTokenAddress,
-          chain: props.options.payOptions.buyTokenChain,
-          client: THIRDWEB_CLIENT,
-        }),
-      }),
-    enabled: !!props.options.payOptions.buyTokenAddress,
-  });
 
   const themeObj =
     props.options.theme.type === "dark"
@@ -74,10 +60,7 @@ export function RightSection(props: {
         title={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
         chain={props.options.payOptions.buyTokenChain}
-        amount={toUnits(
-          props.options.payOptions.buyTokenAmount,
-          tokenData?.decimals || 18,
-        )}
+        amount={props.options.payOptions.buyTokenAmount}
       />
     );
   }
@@ -90,10 +73,7 @@ export function RightSection(props: {
         name={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
         chain={props.options.payOptions.buyTokenChain}
-        amount={toUnits(
-          props.options.payOptions.buyTokenAmount,
-          tokenData?.decimals || 18,
-        )}
+        amount={props.options.payOptions.buyTokenAmount}
         seller={props.options.payOptions.sellerAddress}
         presetOptions={[1, 2, 3]}
         purchaseData={{
diff --git a/apps/playground-web/src/app/connect/pay/embed/page.tsx b/apps/playground-web/src/app/connect/pay/embed/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { use, useState } from "react";
-import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { arbitrum } from "thirdweb/chains";
-import { checksumAddress } from "thirdweb/utils";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
 import { LeftSection } from "./LeftSection";
 import { RightSection } from "./RightSection";
@@ -19,7 +17,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = {
     title: "",
     image: "",
     description: "",
-    buyTokenAddress: checksumAddress(NATIVE_TOKEN_ADDRESS),
+    buyTokenAddress: undefined,
     buyTokenAmount: "0.002",
     buyTokenChain: arbitrum,
     sellerAddress: "0x0000000000000000000000000000000000000000",
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
@@ -12,7 +12,6 @@ import {
   isAddress,
 } from "../../../../utils/address.js";
 import { stringify } from "../../../../utils/json.js";
-import { toTokens } from "../../../../utils/units.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -112,9 +111,9 @@ export type BuyWidgetProps = {
   tokenAddress?: Address;
 
   /**
-   * The amount to buy **(in wei)**.
+   * The amount to buy **(as a decimal string)**, e.g. "1.5" for 1.5 tokens.
    */
-  amount: bigint;
+  amount: string;
 
   /**
    * The title to display in the widget.
@@ -156,15 +155,15 @@ export type BuyWidgetProps = {
 type UIOptionsResult =
   | { type: "success"; data: UIOptions }
   | {
-      type: "indexing_token";
-      token: Token;
-      chain: Chain;
-    }
+    type: "indexing_token";
+    token: Token;
+    chain: Chain;
+  }
   | {
-      type: "unsupported_token";
-      tokenAddress: Address;
-      chain: Chain;
-    };
+    type: "unsupported_token";
+    tokenAddress: Address;
+    chain: Chain;
+  };
 
 /**
  * Widget is a prebuilt UI for purchasing a specific token.
@@ -178,12 +177,11 @@ type UIOptionsResult =
  *
  * ```tsx
  * import { ethereum } from "thirdweb/chains";
- * import { toWei } from "thirdweb";
  *
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  * />
  * ```
  *
@@ -195,7 +193,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("100")}
+ *   amount="100"
  *   tokenAddress="0xA0b86a33E6417E4df2057B2d3C6d9F7cc11b0a70"
  * />
  * ```
@@ -208,7 +206,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  *   theme={darkTheme({
  *     colors: {
  *       modalBg: "red",
@@ -227,7 +225,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  *   title="Buy ETH"
  * />
  * ```
@@ -240,7 +238,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',
@@ -267,7 +265,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         !props.tokenAddress ||
         (isAddress(props.tokenAddress) &&
           checksumAddress(props.tokenAddress) ===
-            checksumAddress(NATIVE_TOKEN_ADDRESS))
+          checksumAddress(NATIVE_TOKEN_ADDRESS))
       ) {
         const ETH = await getToken(
           props.client,
@@ -279,7 +277,7 @@ export function BuyWidget(props: BuyWidgetProps) {
           data: {
             mode: "fund_wallet",
             destinationToken: ETH,
-            initialAmount: toTokens(props.amount, ETH.decimals),
+            initialAmount: props.amount,
           },
         };
       }
@@ -303,7 +301,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         data: {
           mode: "fund_wallet",
           destinationToken: token,
-          initialAmount: toTokens(props.amount, token.decimals),
+          initialAmount: props.amount,
           metadata: {
             title: props.title,
           },
@@ -423,10 +421,10 @@ type BuyWidgetConnectOptions = {
    * ```
    */
   autoConnect?:
-    | {
-        timeout: number;
-      }
-    | boolean;
+  | {
+    timeout: number;
+  }
+  | boolean;
 
   /**
    * Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
@@ -8,7 +8,6 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { getToken } from "../../../../pay/convert/get-token.js";
 import { type Address, checksumAddress } from "../../../../utils/address.js";
 import { stringify } from "../../../../utils/json.js";
-import { toTokens } from "../../../../utils/units.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -108,9 +107,9 @@ export type CheckoutWidgetProps = {
   tokenAddress?: Address;
 
   /**
-   * The price of the item **(in wei)**.
+   * The price of the item **(as a decimal string)**, e.g. "1.5" for 1.5 tokens.
    */
-  amount: bigint;
+  amount: string;
 
   /**
    * The wallet address or ENS funds will be paid to.
@@ -172,15 +171,15 @@ export type CheckoutWidgetProps = {
 type UIOptionsResult =
   | { type: "success"; data: UIOptions }
   | {
-      type: "indexing_token";
-      token: Token;
-      chain: Chain;
-    }
+    type: "indexing_token";
+    token: Token;
+    chain: Chain;
+  }
   | {
-      type: "unsupported_token";
-      tokenAddress: Address;
-      chain: Chain;
-    };
+    type: "unsupported_token";
+    tokenAddress: Address;
+    chain: Chain;
+  };
 
 /**
  * Widget a prebuilt UI for purchasing a specific token.
@@ -282,7 +281,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
           },
           paymentInfo: {
             token,
-            amount: toTokens(props.amount, token.decimals),
+            amount: props.amount,
             sellerAddress: props.seller,
             feePayer: props.feePayer === "seller" ? "receiver" : "sender", // User is sender, seller is receiver
           },
@@ -402,10 +401,10 @@ type CheckoutWidgetConnectOptions = {
    * ```
    */
   autoConnect?:
-    | {
-        timeout: number;
-      }
-    | boolean;
+  | {
+    timeout: number;
+  }
+  | boolean;
 
   /**
    * Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
