thirdweb 5.108.6 → 5.108.8

package/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -12,12 +12,11 @@ import {
   type UseBridgePrepareParams,
   useBridgePrepare,
 } from "../../../core/hooks/useBridgePrepare.js";
-import type { PaymentMethod } from "../../../core/machines/paymentMachine.js";
 import { Container } from "../components/basic.js";
 import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
-import type { UIOptions } from "./BridgeOrchestrator.js";
+import type { PaymentMethod } from "./types.js";
 
 interface QuoteLoaderProps {
   /**
@@ -38,10 +37,10 @@ interface QuoteLoaderProps {
   /**
    * The sender address
    */
-  sender?: string;
+  sender: string | undefined;
 
   /**
-   * The receiver address (defaults to sender for fund_wallet mode)
+   * The receiver address
    */
   receiver: string;
 
@@ -62,30 +61,26 @@ interface QuoteLoaderProps {
    * Called when an error occurs
    */
   onError: (error: Error) => void;
-
   /**
    * Called when user wants to go back
    */
-  onBack?: () => void;
+  onBack: (() => void) | undefined;
 
   /**
    * Optional purchase data for the payment
    */
-  purchaseData?: PurchaseData;
+  purchaseData: PurchaseData | undefined;
 
   /**
    * Optional payment link ID for the payment
    */
-  paymentLinkId?: string;
+  paymentLinkId: string | undefined;
 
-  /**
-   * UI options
-   */
-  uiOptions: UIOptions;
+  feePayer: "sender" | "receiver" | undefined;
+  mode: "direct_payment" | "fund_wallet" | "transaction";
 }
 
 export function QuoteLoader({
-  uiOptions,
   destinationToken,
   paymentMethod,
   amount,
@@ -96,14 +91,9 @@ export function QuoteLoader({
   onError,
   purchaseData,
   paymentLinkId,
+  feePayer,
+  mode,
 }: QuoteLoaderProps) {
-  // For now, we'll use a simple buy operation
-  // This will be expanded to handle different bridge types based on the payment method
-  const feePayer =
-    uiOptions.mode === "direct_payment"
-      ? uiOptions.paymentInfo.feePayer
-      : undefined;
-  const mode = uiOptions.mode;
   const request: BridgePrepareRequest = getBridgeParams({
     amount,
     client,

package/src/react/web/ui/Bridge/StepRunner.tsx

@@ -27,14 +27,14 @@ import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
 
-interface StepRunnerProps {
-  title?: string;
+type StepRunnerProps = {
+  title: string | undefined;
   request: BridgePrepareRequest;
 
   /**
    * Wallet instance for executing transactions
    */
-  wallet?: Wallet;
+  wallet: Wallet | undefined;
 
   /**
    * Thirdweb client for API calls
@@ -49,7 +49,7 @@ interface StepRunnerProps {
   /**
    * Whether to automatically start the transaction process
    */
-  autoStart?: boolean;
+  autoStart: boolean;
 
   /**
    * Called when all steps are completed - receives array of completed status results
@@ -59,18 +59,18 @@ interface StepRunnerProps {
   /**
    * Called when user cancels the flow
    */
-  onCancel?: () => void;
+  onCancel: (() => void) | undefined;
 
   /**
    * Called when user clicks the back button
    */
-  onBack?: () => void;
+  onBack: () => void;
 
   /**
    * Prepared quote to use
    */
   preparedQuote: BridgePrepareResult;
-}
+};
 
 export function StepRunner({
   title,

package/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -3,6 +3,8 @@ import { useQuery } from "@tanstack/react-query";
 import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import {
   type Address,
   getAddress,
@@ -28,15 +30,21 @@ import { ChainName } from "../components/ChainName.js";
 import { Spacer } from "../components/Spacer.js";
 import { Text } from "../components/text.js";
 import type { PayEmbedConnectOptions } from "../PayEmbed.js";
-import type { UIOptions } from "./BridgeOrchestrator.js";
 import { ChainIcon } from "./common/TokenAndChain.js";
 import { WithHeader } from "./common/WithHeader.js";
 
-export interface TransactionPaymentProps {
+type TransactionPaymentProps = {
   /**
    * UI configuration and mode
    */
-  uiOptions: Extract<UIOptions, { mode: "transaction" }>;
+  transaction: PreparedTransaction;
+  currency: SupportedFiatCurrency;
+  buttonLabel: string | undefined;
+  metadata: {
+    title: string | undefined;
+    description: string | undefined;
+    image: string | undefined;
+  };
 
   /**
    * ThirdwebClient for blockchain interactions
@@ -67,29 +75,32 @@ export interface TransactionPaymentProps {
    * @default true
    */
   showThirdwebBranding?: boolean;
-}
+};
 
 export function TransactionPayment({
-  uiOptions,
+  transaction,
   client,
   onContinue,
   onExecuteTransaction,
   connectOptions,
+  currency,
   showThirdwebBranding = true,
+  buttonLabel: _buttonLabel,
+  metadata,
 }: TransactionPaymentProps) {
   const theme = useCustomTheme();
   const activeAccount = useActiveAccount();
   const wallet = useActiveWallet();
 
   // Get chain metadata for native currency symbol
-  const chainMetadata = useChainMetadata(uiOptions.transaction.chain);
+  const chainMetadata = useChainMetadata(transaction.chain);
 
   // Use the extracted hook for transaction details
   const transactionDataQuery = useTransactionDetails({
     client,
-    transaction: uiOptions.transaction,
+    transaction: transaction,
     wallet,
-    currency: uiOptions.currency,
+    currency: currency,
   });
 
   // We can't use useWalletBalance here because erc20Value is a possibly async value
@@ -99,12 +110,10 @@ export function TransactionPayment({
       if (!activeAccount?.address) {
         return "0";
       }
-      const erc20Value = await resolvePromisedValue(
-        uiOptions.transaction.erc20Value,
-      );
+      const erc20Value = await resolvePromisedValue(transaction.erc20Value);
       const walletBalance = await getWalletBalance({
         address: activeAccount?.address,
-        chain: uiOptions.transaction.chain,
+        chain: transaction.chain,
         tokenAddress:
           erc20Value?.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS
             ? erc20Value?.tokenAddress
@@ -123,14 +132,15 @@ export function TransactionPayment({
     transactionDataQuery.data?.functionInfo?.functionName || "Contract Call";
   const isLoading = transactionDataQuery.isLoading || chainMetadata.isLoading;
 
-  const buttonLabel = uiOptions.buttonLabel || `Execute ${functionName}`;
+  const buttonLabel = _buttonLabel || `Execute ${functionName}`;
 
   if (isLoading) {
     return (
       <WithHeader
         client={client}
-        defaultTitle="Transaction"
-        uiOptions={uiOptions}
+        title={metadata.title || "Transaction"}
+        description={metadata.description}
+        image={metadata.image}
       >
         {/* Loading Header */}
         <SkeletonHeader theme={theme} />
@@ -182,8 +192,9 @@ export function TransactionPayment({
   return (
     <WithHeader
       client={client}
-      defaultTitle="Transaction"
-      uiOptions={uiOptions}
+      title={metadata.title || "Transaction"}
+      description={metadata.description}
+      image={metadata.image}
     >
       {/* Cost and Function Name section */}
       <Container
@@ -258,7 +269,7 @@ export function TransactionPayment({
           Address
         </Text>
         <a
-          href={`https://thirdweb.com/${uiOptions.transaction.chain.id}/${uiOptions.transaction.to}`}
+          href={`https://thirdweb.com/${transaction.chain.id}/${transaction.to}`}
           rel="noopener noreferrer"
           style={{
             color: theme.colors.accentText,
@@ -268,7 +279,7 @@ export function TransactionPayment({
           }}
           target="_blank"
         >
-          {shortenAddress(uiOptions.transaction.to as string)}
+          {shortenAddress(transaction.to as string)}
         </a>
       </Container>
 
@@ -286,13 +297,9 @@ export function TransactionPayment({
           Network
         </Text>
         <Container center="y" flex="row" gap="3xs">
-          <ChainIcon
-            chain={uiOptions.transaction.chain}
-            client={client}
-            size="xs"
-          />
+          <ChainIcon chain={transaction.chain} client={client} size="xs" />
           <ChainName
-            chain={uiOptions.transaction.chain}
+            chain={transaction.chain}
             client={client}
             color="primaryText"
             short
@@ -405,6 +412,9 @@ export function TransactionPayment({
                 transactionDataQuery.data.tokenInfo,
                 getAddress(activeAccount.address),
               );
+            } else {
+              // if token not supported, can't go into buy flow, so skip to execute transaction
+              onExecuteTransaction();
             }
           }}
           style={{