fix: respect updated amount

gregfromstl · gregfromstl · commit 0c0b74702eb3 · 2025-06-04T16:10:56.000-05:00
diff --git a/packages/thirdweb/src/react/core/machines/paymentMachine.ts b/packages/thirdweb/src/react/core/machines/paymentMachine.ts
@@ -36,10 +36,9 @@ export interface PaymentMachineContext {
   // Flow configuration
   mode: PaymentMode;
 
-  // Target requirements (resolved in resolveRequirements state)
-  destinationChainId?: number;
-  destinationTokenAddress?: string;
+  // Target requirements (resolved in init state)
   destinationAmount?: string;
+  destinationToken?: Token;
   receiverAddress?: Address;
 
   // User selections (set in methodSelection state)
@@ -67,9 +66,8 @@ export interface PaymentMachineContext {
  */
 export type PaymentMachineEvent =
   | {
-      type: "REQUIREMENTS_RESOLVED";
-      destinationChainId: number;
-      destinationTokenAddress: string;
+      type: "DESTINATION_CONFIRMED";
+      destinationToken: Token;
       destinationAmount: string;
       receiverAddress: Address;
     }
@@ -83,7 +81,7 @@ export type PaymentMachineEvent =
   | { type: "BACK" };
 
 type PaymentMachineState =
-  | "resolveRequirements"
+  | "init"
   | "methodSelection"
   | "quote"
   | "preview"
@@ -98,9 +96,7 @@ export function usePaymentMachine(
   adapters: PaymentMachineContext["adapters"],
   mode: PaymentMode = "fund_wallet",
 ) {
-  const [currentState, setCurrentState] = useState<PaymentMachineState>(
-    "resolveRequirements",
-  );
+  const [currentState, setCurrentState] = useState<PaymentMachineState>("init");
   const [context, setContext] = useState<PaymentMachineContext>({
     mode,
     adapters,
@@ -111,20 +107,19 @@ export function usePaymentMachine(
       setCurrentState((state) => {
         setContext((ctx) => {
           switch (state) {
-            case "resolveRequirements":
-              if (event.type === "REQUIREMENTS_RESOLVED") {
+            case "init":
+              if (event.type === "DESTINATION_CONFIRMED") {
                 return {
                   ...ctx,
-                  destinationChainId: event.destinationChainId,
-                  destinationTokenAddress: event.destinationTokenAddress,
+                  destinationToken: event.destinationToken,
                   destinationAmount: event.destinationAmount,
                   receiverAddress: event.receiverAddress,
                 };
               } else if (event.type === "ERROR_OCCURRED") {
                 return {
                   ...ctx,
                   currentError: event.error,
-                  retryState: "resolveRequirements",
+                  retryState: "init",
                 };
               }
               break;
@@ -209,15 +204,15 @@ export function usePaymentMachine(
 
         // State transitions
         switch (state) {
-          case "resolveRequirements":
-            if (event.type === "REQUIREMENTS_RESOLVED")
+          case "init":
+            if (event.type === "DESTINATION_CONFIRMED")
               return "methodSelection";
             if (event.type === "ERROR_OCCURRED") return "error";
             break;
 
           case "methodSelection":
             if (event.type === "PAYMENT_METHOD_SELECTED") return "quote";
-            if (event.type === "BACK") return "resolveRequirements";
+            if (event.type === "BACK") return "init";
             if (event.type === "ERROR_OCCURRED") return "error";
             break;
 
@@ -240,15 +235,15 @@ export function usePaymentMachine(
             break;
 
           case "success":
-            if (event.type === "RESET") return "resolveRequirements";
+            if (event.type === "RESET") return "init";
             break;
 
           case "error":
             if (event.type === "RETRY") {
-              return context.retryState ?? "resolveRequirements";
+              return context.retryState ?? "init";
             }
             if (event.type === "RESET") {
-              return "resolveRequirements";
+              return "init";
             }
             break;
         }
diff --git a/packages/thirdweb/src/react/core/utils/persist.ts b/packages/thirdweb/src/react/core/utils/persist.ts
@@ -34,8 +34,7 @@ export async function saveSnapshot(
       value: state,
       context: {
         mode: context.mode,
-        destinationChainId: context.destinationChainId,
-        destinationTokenAddress: context.destinationTokenAddress,
+        destinationToken: context.destinationToken,
         destinationAmount: context.destinationAmount,
         selectedPaymentMethod: context.selectedPaymentMethod,
         preparedQuote: context.preparedQuote,
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { useCallback, useMemo } from "react";
 import type { Token } from "../../../../bridge/types/Token.js";
-import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Address } from "../../../../utils/address.js";
@@ -123,30 +122,6 @@ export function BridgeOrchestrator({
   // Use the payment machine hook
   const [state, send] = usePaymentMachine(adapters, uiOptions.mode);
 
-  // Get destination token and amount based on mode
-  const getDestinationInfo = () => {
-    switch (uiOptions.mode) {
-      case "fund_wallet":
-        return {
-          token: uiOptions.destinationToken,
-          amount: uiOptions.initialAmount,
-        };
-      case "direct_payment":
-        return {
-          token: uiOptions.paymentInfo.token,
-          amount: uiOptions.paymentInfo.amount,
-        };
-      case "transaction":
-        // For transaction mode, we'll need to define what token/amount to use
-        return {
-          token: undefined,
-          amount: undefined,
-        };
-    }
-  };
-
-  const destinationInfo = getDestinationInfo();
-
   // Handle completion
   const handleComplete = useCallback(() => {
     onComplete?.();
@@ -198,13 +173,12 @@ export function BridgeOrchestrator({
 
   // Handle requirements resolved from FundWallet and DirectPayment
   const handleRequirementsResolved = useCallback(
-    (amount: string, token: Token, chain: Chain, receiverAddress: Address) => {
+    (amount: string, token: Token, receiverAddress: Address) => {
       send({
-        type: "REQUIREMENTS_RESOLVED",
-        destinationChainId: chain.id,
-        destinationTokenAddress: token.address,
+        type: "DESTINATION_CONFIRMED",
+        destinationToken: token,
+        receiverAddress,
         destinationAmount: amount,
-        receiverAddress: receiverAddress,
       });
     },
     [send],
@@ -222,35 +196,33 @@ export function BridgeOrchestrator({
       )}
 
       {/* Render current screen based on state */}
-      {state.value === "resolveRequirements" &&
-        uiOptions.mode === "fund_wallet" && (
-          <FundWallet
-            token={uiOptions.destinationToken}
-            receiverAddress={receiverAddress}
-            initialAmount={uiOptions.initialAmount}
-            client={client}
-            onContinue={handleRequirementsResolved}
-            connectOptions={connectOptions}
-          />
-        )}
+      {state.value === "init" && uiOptions.mode === "fund_wallet" && (
+        <FundWallet
+          token={uiOptions.destinationToken}
+          receiverAddress={receiverAddress}
+          initialAmount={uiOptions.initialAmount}
+          client={client}
+          onContinue={handleRequirementsResolved}
+          connectOptions={connectOptions}
+        />
+      )}
 
-      {state.value === "resolveRequirements" &&
-        uiOptions.mode === "direct_payment" && (
-          <DirectPayment
-            paymentInfo={uiOptions.paymentInfo}
-            client={client}
-            onContinue={handleRequirementsResolved}
-            connectOptions={connectOptions}
-          />
-        )}
+      {state.value === "init" && uiOptions.mode === "direct_payment" && (
+        <DirectPayment
+          paymentInfo={uiOptions.paymentInfo}
+          client={client}
+          onContinue={handleRequirementsResolved}
+          connectOptions={connectOptions}
+        />
+      )}
 
       {state.value === "methodSelection" &&
-        destinationInfo.token &&
-        destinationInfo.amount && (
+        state.context.destinationToken &&
+        state.context.destinationAmount && (
           <PaymentSelection
-            destinationToken={destinationInfo.token}
+            destinationToken={state.context.destinationToken}
             client={client}
-            destinationAmount={destinationInfo.amount}
+            destinationAmount={state.context.destinationAmount}
             onPaymentMethodSelected={handlePaymentMethodSelected}
             onError={handleError}
             onBack={() => {
@@ -264,15 +236,15 @@ export function BridgeOrchestrator({
       {state.value === "quote" &&
         state.context.selectedPaymentMethod &&
         state.context.receiverAddress &&
-        destinationInfo.token &&
-        destinationInfo.amount && (
+        state.context.destinationToken &&
+        state.context.destinationAmount && (
           <QuoteLoader
-            destinationToken={destinationInfo.token}
+            destinationToken={state.context.destinationToken}
             purchaseData={purchaseData}
             paymentLinkId={paymentLinkId}
             paymentMethod={state.context.selectedPaymentMethod}
             receiver={state.context.receiverAddress}
-            amount={destinationInfo.amount}
+            amount={state.context.destinationAmount}
             client={client}
             onQuoteReceived={handleQuoteReceived}
             onError={handleError}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
@@ -1,6 +1,5 @@
 "use client";
 import type { Token } from "../../../../bridge/types/Token.js";
-import type { Chain } from "../../../../chains/types.js";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { type Address, shortenAddress } from "../../../../utils/address.js";
@@ -42,12 +41,7 @@ export interface DirectPaymentProps {
   /**
    * Called when user continues with the payment
    */
-  onContinue: (
-    amount: string,
-    token: Token,
-    chain: Chain,
-    receiverAddress: Address,
-  ) => void;
+  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
   /**
    * Connect options for wallet connection
@@ -68,7 +62,6 @@ export function DirectPayment({
     onContinue(
       paymentInfo.amount,
       paymentInfo.token,
-      chain,
       paymentInfo.sellerAddress,
     );
   };
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { useState } from "react";
 import type { Token } from "../../../../bridge/types/Token.js";
-import type { Chain } from "../../../../chains/types.js";
-import { getCachedChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { type Address, getAddress } from "../../../../utils/address.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
@@ -47,12 +45,7 @@ export interface FundWalletProps {
   /**
    * Called when continue is clicked with the resolved requirements
    */
-  onContinue: (
-    amount: string,
-    token: Token,
-    chain: Chain,
-    receiverAddress: Address,
-  ) => void;
+  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
   /**
    * Connect options for wallet connection
@@ -69,7 +62,6 @@ export function FundWallet({
   connectOptions,
 }: FundWalletProps) {
   const [amount, setAmount] = useState(initialAmount);
-  const chain = getCachedChain(token.chainId);
   const theme = useCustomTheme();
   const account = useActiveAccount();
   const receiver = receiverAddress ?? account?.address;
@@ -324,7 +316,7 @@ export function FundWallet({
           disabled={!isValidAmount}
           onClick={() => {
             if (isValidAmount) {
-              onContinue(amount, token, chain, getAddress(receiver));
+              onContinue(amount, token, getAddress(receiver));
             }
           }}
           style={{
diff --git a/packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx b/packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx
@@ -43,11 +43,10 @@ const meta = {
   tags: ["autodocs"],
   args: {
     client: storyClient,
-    onContinue: (amount, token, chain, receiverAddress) =>
+    onContinue: (amount, token, receiverAddress) =>
       console.log("Continue with payment:", {
         amount,
         token,
-        chain,
         receiverAddress,
       }),
     theme: "dark",
diff --git a/packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx b/packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx
@@ -36,9 +36,9 @@ const meta = {
   args: {
     token: ETH,
     client: storyClient,
-    onContinue: (amount, token, chain) => {
-      console.log("Continue clicked:", { amount, token, chain });
-      alert(`Continue with ${amount} ${token.symbol} on ${chain.name}`);
+    onContinue: (amount, token, receiverAddress) => {
+      console.log("Continue clicked:", { amount, token, receiverAddress });
+      alert(`Continue with ${amount} ${token.symbol} to ${receiverAddress}`);
     },
     receiverAddress: "0x2247d5d238d0f9d37184d8332aE0289d1aD9991b",
     theme: "dark",
