fix: skip payment method selection when balance is sufficient

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/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 = { state?: PaymentMachineState } & ( // Current state override to get out of overly strict switch statement hell
   | {
       type: "DESTINATION_CONFIRMED";
       destinationToken: Token;
@@ -89,7 +89,8 @@ type PaymentMachineEvent =
   | { type: "CONTINUE_TO_TRANSACTION" }
   | { type: "RETRY" }
   | { type: "RESET" }
-  | { type: "BACK" };
+  | { type: "BACK" }
+);
 
 type PaymentMachineState =
   | "init"
@@ -116,7 +117,8 @@ export function usePaymentMachine(
 
   const send = useCallback(
     (event: PaymentMachineEvent) => {
-      setCurrentState((state) => {
+      setCurrentState((currentState) => {
+        const state = event.state ?? currentState;
         setContext((ctx) => {
           switch (state) {
             case "init":

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

@@ -1,5 +1,6 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
+import type { PaymentMachineEvent } from "src/react/core/machines/paymentMachine.js";
 import type { Token } from "../../../../bridge/index.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.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,19 @@ 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({
+                  state: "success",
+                  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