[SDK] Fix: Skip payment method selection when balance is sufficient (#7813)

Author: gregfromstl

.changeset/fluffy-bobcats-walk.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Skips payment selection in the TransactionWidget if the user's balance is sufficient to complete the transaction.

packages/thirdweb/src/bridge/Token.ts

@@ -1,5 +1,5 @@
 import type { ThirdwebClient } from "../client/client.js";
-import { getThirdwebBaseUrl } from "../utils/domains.js";
+import { getThirdwebDomains } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import { ApiError } from "./types/Errors.js";
 import type { Token } from "./types/Token.js";
@@ -133,7 +133,7 @@ export async function tokens(options: tokens.Options): Promise<tokens.Result> {
     options;
 
   const clientFetch = getClientFetch(client);
-  const url = new URL(`${getThirdwebBaseUrl("bridge")}/v1/tokens`);
+  const url = new URL(`${getThirdwebDomains().bridge}/v1/tokens`);
 
   if (chainId !== null && chainId !== undefined) {
     url.searchParams.set("chainId", chainId.toString());
@@ -229,7 +229,7 @@ export async function add(options: add.Options): Promise<add.Result> {
   const { client, chainId, tokenAddress } = options;
 
   const clientFetch = getClientFetch(client);
-  const url = `${getThirdwebBaseUrl("bridge")}/v1/tokens`;
+  const url = `${getThirdwebDomains().bridge}/v1/tokens`;
 
   const requestBody = {
     chainId,

packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts

@@ -64,7 +64,6 @@ export function useTransactionDetails({
   return useQuery({
     enabled: !!transaction.to && !!chainMetadata.data,
     queryFn: async (): Promise<TransactionDetails> => {
-      // Create contract instance for metadata fetching
       const contract = getContract({
         address: transaction.to as string,
         chain: transaction.chain,
@@ -84,7 +83,7 @@ export function useTransactionDetails({
           client,
           erc20Value?.tokenAddress || NATIVE_TOKEN_ADDRESS,
           transaction.chain.id,
-        ).catch(() => null),
+        ),
         hasSponsoredTransactions
           ? 0n
           : getTransactionGasCost(transaction).catch(() => null),

packages/thirdweb/src/react/core/machines/paymentMachine.ts

@@ -70,7 +70,7 @@ export interface PaymentMachineContext {
 /**
  * Events that can be sent to the payment machine
  */
-type PaymentMachineEvent =
+export type PaymentMachineEvent =
   | {
       type: "DESTINATION_CONFIRMED";
       destinationToken: Token;
@@ -230,6 +230,8 @@ export function usePaymentMachine(
             if (event.type === "DESTINATION_CONFIRMED")
               return "methodSelection";
             if (event.type === "ERROR_OCCURRED") return "error";
+            if (event.type === "CONTINUE_TO_TRANSACTION")
+              return "post-buy-transaction";
             break;
 
           case "methodSelection":

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

@@ -288,6 +288,7 @@ export function BridgeOrchestrator({
           client={client}
           connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          sendEvent={send}
           showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />

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

@@ -20,6 +20,7 @@ import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { useTransactionDetails } from "../../../core/hooks/useTransactionDetails.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import type { PaymentMachineEvent } from "../../../core/machines/paymentMachine.js";
 import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { Container, Line } from "../components/basic.js";
@@ -48,6 +49,11 @@ export interface TransactionPaymentProps {
    */
   onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
+  /**
+   * Send arbitrary payment events for UI flow control
+   */
+  sendEvent: (event: PaymentMachineEvent) => void;
+
   /**
    * Connect options for wallet connection
    */
@@ -64,6 +70,7 @@ export function TransactionPayment({
   uiOptions,
   client,
   onContinue,
+  sendEvent,
   connectOptions,
   showThirdwebBranding = true,
 }: TransactionPaymentProps) {
@@ -378,6 +385,18 @@ export function TransactionPayment({
                 return;
               }
 
+              // If the user has enough to pay, skip the payment step altogether
+              if (
+                userBalance &&
+                Number(userBalance) >=
+                  Number(transactionDataQuery.data.totalCost)
+              ) {
+                sendEvent({
+                  type: "CONTINUE_TO_TRANSACTION",
+                });
+                return;
+              }
+
               // otherwise, use the full transaction cost
               onContinue(
                 transactionDataQuery.data.totalCost,

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

@@ -218,7 +218,7 @@ type UIOptionsResult =
  * @example
  * ### Default configuration
  *
- * By default, the `TransactionWidget` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ * By default, the `TransactionWidget` component allows users to fund their wallets with crypto or fiat on any of the supported chains.
  *
  * ```tsx
  * <TransactionWidget

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

@@ -29,6 +29,7 @@ const TransactionPaymentWithTheme = (
 const meta = {
   args: {
     client: storyClient,
+    sendEvent: (_event) => {},
     onContinue: (_amount, _token, _receiverAddress) => {},
     theme: "dark",
     uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,