updates

Author: MananTank

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

@@ -7,11 +7,17 @@ import type { TokenWithPrices } from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { getToken } from "../../../../pay/convert/get-token.js";
 import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { PurchaseData } from "../../../../pay/types.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
-import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import type { Address } from "../../../../utils/address.js";
+import {
+  type PreparedTransaction,
+  prepareTransaction,
+} from "../../../../transaction/prepare-transaction.js";
+import { type Address, checksumAddress } from "../../../../utils/address.js";
+import { stringify } from "../../../../utils/json.js";
+import { toUnits } 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";
@@ -38,7 +44,6 @@ import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
 import { ExecutingTxScreen } from "../TransactionButton/ExecutingScreen.js";
 import type { LocaleId } from "../types.js";
-import { useTokenQuery } from "./common/token-query.js";
 import { ErrorBanner } from "./ErrorBanner.js";
 import { PaymentDetails } from "./payment-details/PaymentDetails.js";
 import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
@@ -334,6 +339,15 @@ export function TransactionWidget(props: TransactionWidgetProps) {
   );
 }
 
+type TransactionQueryResult =
+  | {
+      transaction: PreparedTransaction;
+      type: "success";
+    }
+  | {
+      type: "unsupported_token";
+    };
+
 export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
   useQuery({
     queryFn: () => {
@@ -349,10 +363,49 @@ export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
   });
 
   const localQuery = useConnectLocale(props.locale || "en_US");
-  const tokenQuery = useTokenQuery({
-    tokenAddress: props.tokenAddress,
-    chainId: props.transaction.chain.id,
-    client: props.client,
+
+  const txQuery = useQuery({
+    queryFn: async (): Promise<TransactionQueryResult> => {
+      let erc20Value = props.transaction.erc20Value;
+
+      if (props.amount) {
+        // Get token decimals for conversion
+        const tokenAddress = props.tokenAddress || NATIVE_TOKEN_ADDRESS;
+        const token = await getToken(
+          props.client,
+          checksumAddress(tokenAddress),
+          props.transaction.chain.id,
+        ).catch((e) => {
+          if (e instanceof Error && e.message.includes("not supported")) {
+            return null;
+          }
+          throw e;
+        });
+        if (!token) {
+          return {
+            type: "unsupported_token",
+          };
+        }
+
+        erc20Value = {
+          amountWei: toUnits(props.amount, token.decimals),
+          tokenAddress: checksumAddress(tokenAddress),
+        };
+      }
+
+      const transaction = prepareTransaction({
+        ...props.transaction,
+        erc20Value,
+      });
+
+      return {
+        transaction,
+        type: "success",
+      };
+    },
+
+    queryKey: ["transaction-query", stringify(props)],
+    retry: 1,
   });
 
   // if branding is disabled for widget, disable it for connect options too
@@ -369,7 +422,7 @@ export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
     return props.connectOptions;
   }, [props.connectOptions, props.showThirdwebBranding]);
 
-  if (tokenQuery.isPending || !localQuery.data) {
+  if (txQuery.isPending || !localQuery.data) {
     return (
       <div
         style={{
@@ -382,7 +435,7 @@ export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
         <Spinner color="secondaryText" size="xl" />
       </div>
     );
-  } else if (tokenQuery.error) {
+  } else if (txQuery.error) {
     return (
       <div
         style={{
@@ -396,25 +449,25 @@ export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
         <AccentFailIcon size={iconSize["3xl"]} />
         <Spacer y="lg" />
         <Text color="secondaryText" size="md">
-          {tokenQuery.error.message}
+          {txQuery.error.message}
         </Text>
       </div>
     );
-  } else if (tokenQuery.data?.type === "unsupported_token") {
+  } else if (txQuery.data?.type === "unsupported_token") {
     return (
       <UnsupportedTokenScreen
         chain={props.transaction.chain}
         client={props.client}
         tokenAddress={props.tokenAddress || NATIVE_TOKEN_ADDRESS}
       />
     );
-  } else if (tokenQuery.data?.type === "success") {
+  } else if (txQuery.data?.type === "success") {
     return (
       <TransactionWidgetContent
         {...props}
         connectOptions={connectOptions}
         connectLocale={localQuery.data}
-        destinationToken={tokenQuery.data.token}
+        transaction={txQuery.data.transaction}
         currency={props.currency || "USD"}
         paymentMethods={props.paymentMethods || ["crypto", "card"]}
         showThirdwebBranding={
@@ -486,7 +539,6 @@ function TransactionWidgetContent(
     "currency" | "showThirdwebBranding" | "paymentMethods"
   > & {
     connectLocale: ConnectLocale;
-    destinationToken: TokenWithPrices;
   },
 ) {
   const [screen, setScreen] = useState<TransactionWidgetScreen>({

packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx renamed to packages/thirdweb/src/stories/Bridge/TransactionWidget/TransactionPayment.stories.tsx

@@ -1,15 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { TransactionPayment } from "../../react/web/ui/Bridge/TransactionPayment.js";
-import { ModalThemeWrapper, storyClient } from "../utils.js";
-import { TRANSACTION_UI_OPTIONS } from "./fixtures.js";
+import { TransactionPayment } from "../../../react/web/ui/Bridge/TransactionPayment.js";
+import { ModalThemeWrapper, storyClient } from "../../utils.js";
+import { TRANSACTION_UI_OPTIONS } from "../fixtures.js";
 
 const meta: Meta<typeof TransactionPayment> = {
   args: {
     client: storyClient,
     onExecuteTransaction: () => {},
     onContinue: (_amount, _token, _receiverAddress) => {},
     currency: "USD",
-    ...TRANSACTION_UI_OPTIONS.ethTransfer,
   },
   component: TransactionPayment,
   decorators: [
@@ -19,7 +18,7 @@ const meta: Meta<typeof TransactionPayment> = {
       </ModalThemeWrapper>
     ),
   ],
-  title: "Bridge/TransactionPayment",
+  title: "Bridge/Transaction/screens/TransactionPayment",
 };
 
 export default meta;

packages/thirdweb/src/stories/Bridge/TransactionWidget/TransactionWidget.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  TransactionWidget,
+  type TransactionWidgetProps,
+} from "../../../react/web/ui/Bridge/TransactionWidget.js";
+import { storyClient } from "../../utils.js";
+import { TRANSACTION_UI_OPTIONS } from "../fixtures.js";
+
+const meta: Meta<typeof StoryVariant> = {
+  args: {
+    client: storyClient,
+    onSuccess: () => {},
+    onError: () => {},
+    onCancel: () => {},
+    currency: "USD",
+    ...TRANSACTION_UI_OPTIONS.ethTransfer,
+  },
+  component: StoryVariant,
+  title: "Bridge/Transaction/TransactionWidget",
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EthereumTransfer: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.ethTransfer,
+  },
+};
+
+export const ERC20TokenTransfer: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.erc20Transfer,
+  },
+};
+
+export const ContractInteraction: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.contractInteraction,
+  },
+};
+
+export const CustomButtonLabel: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.customButton,
+  },
+};
+
+function StoryVariant(props: TransactionWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <TransactionWidget {...props} theme="dark" />
+      <TransactionWidget {...props} theme="light" />
+    </div>
+  );
+}

packages/thirdweb/src/stories/Bridge/fixtures.ts

@@ -680,7 +680,6 @@ const PRODUCT_METADATA = {
   },
 };
 
-// Type aliases for better type safety
 type FundWalletUIOptions = {
   destinationToken: TokenWithPrices;
   metadata: {
@@ -691,6 +690,7 @@ type FundWalletUIOptions = {
   initialAmount: string | undefined;
   buttonLabel: string | undefined;
 };
+
 type DirectPaymentUIOptions = {
   metadata: {
     description: string | undefined;
@@ -700,6 +700,7 @@ type DirectPaymentUIOptions = {
   paymentInfo: DirectPaymentInfo;
   buttonLabel: string | undefined;
 };
+
 type TransactionUIOptions = {
   metadata: {
     description: string | undefined;