requested changes

Author: gregfromstl

apps/portal/src/app/react/v5/pay/transaction/page.mdx

@@ -30,4 +30,28 @@ Try out the demo for yourself in the [live playground](https://playground.thirdw
 
 Any transaction sent with `useSendTransaction` or with `TransactionButton` will prompt the user to choose a different payment method if they don't have enough balance for the transaction.
 
-You can turn off this behaviour by setting the `payModal` option to `false`.
+You can turn off this behaviour by setting the `payModal` option to `false`.
+
+## Usage with TransactionWidget
+
+The `TransactionWidget` component provides a complete UI for executing transactions with built-in cross-chain payment support.
+
+```tsx
+import { TransactionWidget } from "thirdweb/react";
+import { prepareContractCall } from "thirdweb";
+
+function MyComponent() {
+  return (
+    <TransactionWidget
+      client={client}
+      transaction={prepareContractCall({
+        contract: myContract,
+        method: "function mint(uint256 quantity)",
+        params: [1n],
+      })}
+      amount="0.1"
+      title="Mint NFT"
+    />
+  );
+}
+```

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

@@ -40,20 +40,20 @@ export type UIOptions = Prettify<
     };
   } & (
     | {
-        mode: "fund_wallet";
-        destinationToken: Token;
-        initialAmount?: string;
-        presetOptions?: [number, number, number];
-      }
+      mode: "fund_wallet";
+      destinationToken: Token;
+      initialAmount?: string;
+      presetOptions?: [number, number, number];
+    }
     | {
-        mode: "direct_payment";
-        paymentInfo: {
-          sellerAddress: Address;
-          token: Token;
-          amount: string;
-          feePayer?: "sender" | "receiver";
-        };
-      }
+      mode: "direct_payment";
+      paymentInfo: {
+        sellerAddress: Address;
+        token: Token;
+        amount: string;
+        feePayer?: "sender" | "receiver";
+      };
+    }
     | { mode: "transaction"; transaction: PreparedTransaction }
   )
 >;
@@ -286,6 +286,7 @@ export function BridgeOrchestrator({
             onBack={() => {
               send({ type: "BACK" });
             }}
+            mode={uiOptions.mode}
             onError={handleError}
             onQuoteReceived={handleQuoteReceived}
             paymentLinkId={paymentLinkId}

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

@@ -166,15 +166,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.
@@ -271,7 +271,7 @@ export function BuyWidget(props: BuyWidgetProps) {
     queryFn: () => {
       trackPayEvent({
         client: props.client,
-        event: "buy_widget:render",
+        event: "ub:ui:buy_widget:render",
         toChainId: props.chain.id,
         toToken: props.tokenAddress,
       });
@@ -285,7 +285,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,
@@ -455,10 +455,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.

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

@@ -172,15 +172,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.
@@ -254,7 +254,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
     queryFn: () => {
       trackPayEvent({
         client: props.client,
-        event: "checkout_widget:render",
+        event: "ub:ui:checkout_widget:render",
         toChainId: props.chain.id,
         toToken: props.tokenAddress,
       });
@@ -418,10 +418,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.

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

@@ -43,7 +43,7 @@ export function ErrorBanner({
       trackPayEvent({
         client,
         error: error.message,
-        event: "error",
+        event: "ub:ui:error",
       });
     },
     queryKey: ["error_banner", userMessage],

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

@@ -81,9 +81,11 @@ interface QuoteLoaderProps {
    * Fee payer for direct transfers (defaults to sender)
    */
   feePayer?: "sender" | "receiver";
+  mode: "fund_wallet" | "direct_payment" | "transaction";
 }
 
 export function QuoteLoader({
+  mode,
   destinationToken,
   paymentMethod,
   amount,
@@ -119,7 +121,7 @@ export function QuoteLoader({
             ? paymentMethod.originToken.chainId
             : undefined,
         client,
-        event: "loading_quote",
+        event: `ub:ui:loading_quote:${mode}`,
         fromToken:
           paymentMethod.type === "wallet"
             ? paymentMethod.originToken.address
@@ -202,7 +204,7 @@ function getBridgeParams(args: {
       if (
         paymentMethod.originToken.chainId === destinationToken.chainId &&
         paymentMethod.originToken.address.toLowerCase() ===
-          destinationToken.address.toLowerCase()
+        destinationToken.address.toLowerCase()
       ) {
         return {
           amount: toUnits(amount, destinationToken.decimals),

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

@@ -172,15 +172,15 @@ export type TransactionWidgetProps = {
 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.
@@ -279,7 +279,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
       trackPayEvent({
         chainId: props.transaction.chain.id,
         client: props.client,
-        event: "transaction_widget:render",
+        event: "ub:ui:transaction_widget:render",
         toToken: props.tokenAddress,
       });
     },
@@ -443,10 +443,10 @@ type TransactionWidgetConnectOptions = {
    * ```
    */
   autoConnect?:
-    | {
-        timeout: number;
-      }
-    | boolean;
+  | {
+    timeout: number;
+  }
+  | boolean;
 
   /**
    * Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.

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

@@ -32,7 +32,7 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
       trackPayEvent({
         chainId: chain.id,
         client,
-        event: "unsupported_token",
+        event: "ub:ui:unsupported_token",
         fromToken: tokenAddress,
       });
     },

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -72,14 +72,14 @@ export function PaymentDetails({
 
   useQuery({
     queryFn: () => {
-      if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
+      if (preparedQuote.type === "buy" || preparedQuote.type === "sell" || preparedQuote.type === "transfer") {
         trackPayEvent({
-          chainId: preparedQuote.intent.originChainId,
+          chainId: preparedQuote.type === "transfer" ? preparedQuote.intent.chainId : preparedQuote.intent.originChainId,
           client,
           event: "payment_details",
-          fromToken: preparedQuote.intent.originTokenAddress,
-          toChainId: preparedQuote.intent.destinationChainId,
-          toToken: preparedQuote.intent.destinationTokenAddress,
+          fromToken: preparedQuote.type === "transfer" ? preparedQuote.intent.tokenAddress : preparedQuote.intent.originTokenAddress,
+          toChainId: preparedQuote.type === "transfer" ? preparedQuote.intent.chainId : preparedQuote.intent.destinationChainId,
+          toToken: preparedQuote.type === "transfer" ? preparedQuote.intent.tokenAddress : preparedQuote.intent.destinationTokenAddress,
         });
       }
     },

packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx

@@ -63,7 +63,7 @@ export function SuccessScreen({
         trackPayEvent({
           chainId: preparedQuote.intent.originChainId,
           client: client,
-          event: "success_screen",
+          event: "ub:ui:success_screen",
           fromToken: preparedQuote.intent.originTokenAddress,
           toChainId: preparedQuote.intent.destinationChainId,
           toToken: preparedQuote.intent.destinationTokenAddress,