@b3dotfun/sdk 0.0.40-alpha.2 → 0.0.40-alpha.21

package/src/anyspend/react/components/common/ConnectWalletPayment.tsx

@@ -2,12 +2,11 @@
 
 import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { ShinyButton, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { ShinyButton, useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
@@ -41,7 +40,11 @@ export default function ConnectWalletPayment({
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
-  const { address: connectedAddress } = useAccount();
+  const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
+  const connectedEvmAddress =
+    cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ? connectedSmartWallet?.getAccount()?.address
+      : connectedEOAWallet?.getAccount()?.address;
 
   const srcToken = order.metadata.srcToken;
   const dstToken = order.metadata.dstToken;
@@ -97,7 +100,7 @@ export default function ConnectWalletPayment({
           Connected to:{" "}
           {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
             ? centerTruncate(phantomWalletAddress, 6)
-            : centerTruncate(connectedAddress || "")}
+            : centerTruncate(connectedEvmAddress || "")}
         </span>
 
         <PaymentMethodSwitch currentMethod={cryptoPaymentMethod} onMethodChange={onPaymentMethodChange} />

package/src/anyspend/react/components/common/CryptoPaySection.tsx

@@ -5,7 +5,6 @@ import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
-import { useAccount } from "wagmi";
 import { components } from "../../../types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
@@ -25,6 +24,8 @@ interface CryptoPaySectionProps {
   onSelectCryptoPaymentMethod: () => void;
   // Quote data
   anyspendQuote?: any;
+  // Token selection callback
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }
 
 export function CryptoPaySection({
@@ -38,16 +39,19 @@ export function CryptoPaySection({
   selectedCryptoPaymentMethod,
   onSelectCryptoPaymentMethod,
   anyspendQuote,
+  onTokenSelect,
 }: CryptoPaySectionProps) {
-  const { address: connectedAddress, isConnected } = useAccount();
-  const { data: profileData } = useProfile({ address: connectedAddress });
-  const connectedName = profileData?.displayName;
-  const { address: globalAddress } = useAccountWallet();
+  const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
 
   // Determine which address to use based on payment method
   const walletAddress =
-    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? globalAddress : connectedAddress;
+    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ? connectedSmartWallet?.getAccount()?.address
+      : connectedEOAWallet?.getAccount()?.address;
+
+  const { data: profileData } = useProfile({ address: walletAddress });
+  const connectedName = profileData?.displayName;
 
   // Add ref to track if we've applied metadata
   const appliedSrcMetadataRef = useRef(false);
@@ -92,9 +96,9 @@ export function CryptoPaySection({
         >
           {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
             <>
-              {isConnected ? (
+              {walletAddress ? (
                 <div className="flex items-center gap-1">
-                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "")}
                 </div>
               ) : (
                 "Connect wallet"
@@ -131,6 +135,7 @@ export function CryptoPaySection({
         setChainId={setSelectedSrcChainId}
         token={selectedSrcToken}
         setToken={setSelectedSrcToken}
+        onTokenSelect={onTokenSelect}
       />
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-5 items-center text-sm">

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -3,11 +3,14 @@
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
+import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 
 export enum CryptoPaymentMethodType {
@@ -38,13 +41,69 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
-  const { address, isConnected, connector } = useAccount();
+  const {
+    wallet: globalWallet,
+    connectedEOAWallet: connectedEOAWallet,
+    connectedSmartWallet: connectedSmartWallet,
+  } = useAccountWallet();
+  const { connector, address, isConnected: wagmiWalletIsConnected } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
   const [showWalletModal, setShowWalletModal] = useState(false);
 
+  const setActiveWallet = useSetActiveWallet();
+  const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
+
+  const isConnected = !!connectedEOAWallet;
+  const globalAddress = connectedSmartWallet?.getAccount()?.address;
+
+  // Helper function to check if two addresses are the same
+  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
+    if (!addr1 || !addr2) return false;
+    return addr1.toLowerCase() === addr2.toLowerCase();
+  };
+
+  // Check if connectedEOAWallet and wagmi wallet represent the same wallet
+  const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
+  const wagmiAddress = address;
+  const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
+
+  // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
+  const shouldShowConnectedEOA = !!connectedEOAWallet;
+  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+
+  // Map wagmi connector names to thirdweb wallet IDs
+  const getThirdwebWalletId = (connectorName: string): WalletId | null => {
+    const walletMap: Record<string, WalletId> = {
+      MetaMask: "io.metamask",
+      "Coinbase Wallet": "com.coinbase.wallet",
+      Rainbow: "me.rainbow",
+      WalletConnect: "walletConnect",
+      Phantom: "app.phantom",
+    };
+    return walletMap[connectorName] || null;
+  };
+
+  // Create thirdweb wallet from wagmi connector
+  const createThirdwebWalletFromConnector = async (connectorName: string) => {
+    const walletId = getThirdwebWalletId(connectorName);
+    if (!walletId) {
+      console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
+      return null;
+    }
+
+    try {
+      const thirdwebWallet = createWallet(walletId);
+      // Connect the wallet to sync with the existing wagmi connection
+      await thirdwebWallet.connect({ client });
+      return thirdwebWallet;
+    } catch (error) {
+      console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
+      return null;
+    }
+  };
+
   // Define available wallet connectors
   const availableConnectors = connectors.filter(connector =>
     ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
@@ -161,57 +220,79 @@ export function CryptoPaymentMethod({
         </div>
 
         {/* Payment Methods */}
-        <div className="crypto-payment-methods flex flex-col gap-6">
-          {/* Connect Wallet Section */}
-          <button
-            onClick={() => {
-              // Always show wallet selection modal first
-              setShowWalletModal(true);
-            }}
-            className="crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
-          >
-            <div className="flex items-center gap-3">
-              <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-                <Wallet className="h-4 w-4 text-blue-600" />
-              </div>
-              <div className="flex flex-col items-start text-left">
-                <h4 className="text-as-primary font-semibold">Connect wallet</h4>
-              </div>
-            </div>
-            <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-          </button>
-
-          {/* Transfer Crypto Section */}
-          <button
-            onClick={() => {
-              setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-              onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-            }}
-            disabled={isCreatingOrder}
-            className="crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
-          >
-            <div className="flex items-center gap-3">
-              <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100">
-                <ZapIcon className="h-4 w-4" />
-              </div>
-              <div className="flex flex-col items-start text-left">
-                <h4 className="text-as-primary font-semibold">Transfer crypto</h4>
-              </div>
-            </div>
-            <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-          </button>
-
+        <div className="crypto-payment-methods flex flex-col gap-4">
           {/* Installed Wallets Section */}
-          {(isConnected || globalAddress) && (
+          {(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
                 {/* Current Connected Wallet */}
-                {isConnected && (
+
+                {shouldShowConnectedEOA && (
                   <button
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      setActiveWallet(connectedEOAWallet);
+                      toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
+                    }}
+                    className={cn(
+                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                        ? "connected-wallet border-as-brand bg-as-brand/5"
+                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
+                          <Wallet className="h-5 w-5 text-blue-600" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">
+                            {eoaWalletInfo?.name || connector?.name || "Connected Wallet"}
+                          </span>
+                          <span className="text-as-primary/60 text-sm">
+                            {shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                        <button
+                          onClick={e => {
+                            e.stopPropagation();
+                            disconnect();
+                            toast.success("Wallet disconnected");
+                            if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                              setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                            }
+                          }}
+                          className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </div>
+                  </button>
+                )}
+
+                {shouldShowWagmiWallet && (
+                  <button
+                    onClick={async () => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+
+                      // Create thirdweb wallet from wagmi connector
+                      if (connector?.name) {
+                        const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
+                        if (thirdwebWallet) {
+                          setActiveWallet(thirdwebWallet);
+                        }
+                      }
+
                       toast.success(`Selected ${connector?.name || "wallet"}`);
                     }}
                     className={cn(
@@ -293,6 +374,51 @@ export function CryptoPaymentMethod({
               </div>
             </div>
           )}
+
+          {/* Other Payment Methods Section */}
+          <div className="other-payment-methods">
+            <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Payment methods</h3>
+            <div className="space-y-3">
+              {/* Connect Wallet Section */}
+              <button
+                onClick={() => {
+                  // Always show wallet selection modal first
+                  setShowWalletModal(true);
+                }}
+                className="crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
+                    <Wallet className="h-4 w-4 text-blue-600" />
+                  </div>
+                  <div className="flex flex-col items-start text-left">
+                    <h4 className="text-as-primary font-semibold">Connect wallet</h4>
+                  </div>
+                </div>
+                <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
+              </button>
+
+              {/* Transfer Crypto Section */}
+              <button
+                onClick={() => {
+                  setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                  onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                }}
+                disabled={isCreatingOrder}
+                className="crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100">
+                    <ZapIcon className="h-4 w-4" />
+                  </div>
+                  <div className="flex flex-col items-start text-left">
+                    <h4 className="text-as-primary font-semibold">Transfer crypto</h4>
+                  </div>
+                </div>
+                <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
+              </button>
+            </div>
+          </div>
         </div>
       </div>
 

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -5,7 +5,9 @@ import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
 import { components } from "../../../types/api";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { OrderTokenAmount } from "./OrderTokenAmount";
+import { PointsBadge } from "./PointsBadge";
 
 interface CryptoReceiveSectionProps {
   isDepositMode?: boolean;
@@ -27,6 +29,8 @@ interface CryptoReceiveSectionProps {
   // custom dst token data
   dstTokenSymbol?: string;
   dstTokenLogoURI?: string;
+  // Points navigation
+  onShowPointsDetail?: () => void;
 }
 
 export function CryptoReceiveSection({
@@ -44,7 +48,10 @@ export function CryptoReceiveSection({
   anyspendQuote,
   dstTokenSymbol,
   dstTokenLogoURI,
+  onShowPointsDetail,
 }: CryptoReceiveSectionProps) {
+  const featureFlags = useFeatureFlags();
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
@@ -100,61 +107,70 @@ export function CryptoReceiveSection({
           setToken={setSelectedDstToken || (() => {})}
         />
       )}
-      <div className="text-as-primary/50 flex h-5 items-center text-sm">
-        {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
-          style: "currency",
-          fallback: "",
-        })}
-        {anyspendQuote?.data?.currencyIn?.amountUsd &&
-          anyspendQuote?.data?.currencyOut?.amountUsd &&
-          (() => {
-            const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
-              if (!inputUsd || !outputUsd) {
-                return { percentage: "0.00", isNegative: false };
-              }
+      <div className="text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm">
+        <div className="flex items-center gap-2">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+          {anyspendQuote?.data?.currencyIn?.amountUsd &&
+            anyspendQuote?.data?.currencyOut?.amountUsd &&
+            (() => {
+              const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
+                if (!inputUsd || !outputUsd) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              const input = Number(inputUsd);
-              const output = Number(outputUsd);
+                const input = Number(inputUsd);
+                const output = Number(outputUsd);
 
-              // Handle edge cases
-              if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
-                return { percentage: "0.00", isNegative: false };
-              }
+                // Handle edge cases
+                if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              const percentageValue = ((output - input) / input) * 100;
+                const percentageValue = ((output - input) / input) * 100;
 
-              // Handle the -0.00% case
-              if (percentageValue > -0.005 && percentageValue < 0) {
-                return { percentage: "0.00", isNegative: false };
-              }
+                // Handle the -0.00% case
+                if (percentageValue > -0.005 && percentageValue < 0) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              return {
-                percentage: Math.abs(percentageValue).toFixed(2),
-                isNegative: percentageValue < 0,
+                return {
+                  percentage: Math.abs(percentageValue).toFixed(2),
+                  isNegative: percentageValue < 0,
+                };
               };
-            };
 
-            const { percentage, isNegative } = calculatePriceImpact(
-              anyspendQuote.data.currencyIn.amountUsd,
-              anyspendQuote.data.currencyOut.amountUsd,
-            );
+              const { percentage, isNegative } = calculatePriceImpact(
+                anyspendQuote.data.currencyIn.amountUsd,
+                anyspendQuote.data.currencyOut.amountUsd,
+              );
 
-            // Parse the percentage as a number for comparison
-            const percentageNum = parseFloat(percentage);
+              // Parse the percentage as a number for comparison
+              const percentageNum = parseFloat(percentage);
 
-            // Don't show if less than 1%
-            if (percentageNum < 1) {
-              return null;
-            }
+              // Don't show if less than 1%
+              if (percentageNum < 1) {
+                return null;
+              }
 
-            // Using inline style to ensure color displays
-            return (
-              <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
-                ({isNegative ? "-" : ""}
-                {percentage}%)
-              </span>
-            );
-          })()}
+              // Using inline style to ensure color displays
+              return (
+                <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
+                  ({isNegative ? "-" : ""}
+                  {percentage}%)
+                </span>
+              );
+            })()}
+        </div>
+        {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && (
+          <PointsBadge
+            pointsAmount={anyspendQuote.data.pointsAmount}
+            pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+            onClick={() => onShowPointsDetail?.()}
+          />
+        )}
       </div>
     </motion.div>
   );

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -223,10 +223,9 @@ export const OrderDetails = memo(function OrderDetails({
   // Read crypto payment method from URL parameters
   const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod") as CryptoPaymentMethodType | null;
   const effectiveCryptoPaymentMethod =
-    cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
-
-  // Use selectedCryptoPaymentMethod for OrderStatus if provided, otherwise fall back to effective method
-  const orderStatusPaymentMethod = selectedCryptoPaymentMethod || effectiveCryptoPaymentMethod;
+    selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE
+      ? selectedCryptoPaymentMethod
+      : cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
 
   const setB3ModalOpen = useModalStore((state: any) => state.setB3ModalOpen);
 
@@ -575,7 +574,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (refundTxs.length > 0) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -653,7 +652,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (executeTx) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -780,7 +779,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -909,7 +908,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (depositTxs?.length || waitingForDeposit) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -1008,7 +1007,7 @@ export const OrderDetails = memo(function OrderDetails({
 
   return (
     <>
-      <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+      <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
       {statusDisplay === "processing" && (
         <>
           {order.onrampMetadata ? (

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -27,6 +27,7 @@ export function OrderTokenAmount({
   innerClassName,
   amountClassName,
   tokenSelectClassName,
+  onTokenSelect,
 }: {
   disabled?: boolean;
   inputValue: string;
@@ -43,6 +44,7 @@ export function OrderTokenAmount({
   innerClassName?: string;
   amountClassName?: string;
   tokenSelectClassName?: string;
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(token.address);
@@ -64,6 +66,31 @@ export function OrderTokenAmount({
   }, [token.address, chainId, context, onChangeInput]);
 
   const handleTokenSelect = (newToken: any) => {
+    const token: components["schemas"]["Token"] = {
+      address: newToken.address,
+      chainId: newToken.chainId,
+      decimals: newToken.decimals,
+      metadata: { logoURI: newToken.logoURI },
+      name: newToken.name,
+      symbol: newToken.symbol,
+    };
+
+    // Call the onTokenSelect callback if provided
+    if (onTokenSelect) {
+      let isDefaultPrevented = false;
+      const event = {
+        preventDefault: () => {
+          isDefaultPrevented = true;
+        },
+      };
+
+      onTokenSelect(token, event);
+
+      if (isDefaultPrevented) {
+        return; // Early return if callback prevented default behavior
+      }
+    }
+
     // Mark that we're about to change tokens
     prevTokenRef.current = "changing"; // Temporary value to force effect
 
@@ -71,14 +98,7 @@ export function OrderTokenAmount({
     setChainId(newToken.chainId);
 
     // Then set the new token
-    setToken({
-      address: newToken.address,
-      chainId: newToken.chainId, // Use the new chain ID
-      decimals: newToken.decimals,
-      metadata: { logoURI: newToken.logoURI },
-      name: newToken.name,
-      symbol: newToken.symbol,
-    });
+    setToken(token);
 
     // If this is the source token, reset the amount immediately
     if (context === "from") {