@b3dotfun/sdk 0.0.35-alpha.0 → 0.0.35-alpha.2

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

@@ -8,6 +8,7 @@ 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";
 
 type Tournament = components["schemas"]["Tournament"];
@@ -22,6 +23,7 @@ interface ConnectWalletPaymentProps {
   phantomWalletAddress?: string | null;
   tournament?: Tournament;
   nft?: NFT;
+  cryptoPaymentMethod: CryptoPaymentMethodType;
 }
 
 export default function ConnectWalletPayment({
@@ -32,6 +34,7 @@ export default function ConnectWalletPayment({
   phantomWalletAddress,
   tournament,
   nft,
+  cryptoPaymentMethod,
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
@@ -79,7 +82,9 @@ export default function ConnectWalletPayment({
               <span className="whitespace-nowrap pl-4 text-lg md:text-sm">
                 {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                   ? "Pay from Phantom Wallet"
-                  : "Pay from Connected Wallet"}
+                  : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+                    ? "Pay from Global Account"
+                    : "Pay from Connected Wallet"}
               </span>
               <ChevronRight className="h-4 w-4" />
             </>

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

@@ -0,0 +1,153 @@
+import { useAccountWallet, useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+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";
+import { TokenBalance } from "./TokenBalance";
+
+interface CryptoPaySectionProps {
+  // Token state
+  selectedSrcChainId: number;
+  setSelectedSrcChainId: (chainId: number) => void;
+  selectedSrcToken: components["schemas"]["Token"];
+  setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
+  srcAmount: string;
+  setSrcAmount: (amount: string) => void;
+  setIsSrcInputDirty: (dirty: boolean) => void;
+  // Payment method state
+  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+  onSelectCryptoPaymentMethod: () => void;
+  // Quote data
+  anyspendQuote?: any;
+}
+
+export function CryptoPaySection({
+  selectedSrcChainId,
+  setSelectedSrcChainId,
+  selectedSrcToken,
+  setSelectedSrcToken,
+  srcAmount,
+  setSrcAmount,
+  setIsSrcInputDirty,
+  selectedCryptoPaymentMethod,
+  onSelectCryptoPaymentMethod,
+  anyspendQuote,
+}: CryptoPaySectionProps) {
+  const { address: connectedAddress, isConnected } = useAccount();
+  const { data: profileData } = useProfile({ address: connectedAddress });
+  const connectedName = profileData?.displayName;
+  const { address: globalAddress } = 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;
+
+  // Add ref to track if we've applied metadata
+  const appliedSrcMetadataRef = useRef(false);
+
+  // Update source token with metadata
+  useEffect(() => {
+    if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
+      // Mark as applied
+      appliedSrcMetadataRef.current = true;
+
+      const enhancedToken = {
+        ...selectedSrcToken,
+        decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
+        symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
+        name: srcTokenMetadata.name || selectedSrcToken.name,
+        metadata: {
+          ...selectedSrcToken.metadata,
+          logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+        },
+      };
+      setSelectedSrcToken(enhancedToken);
+    }
+  }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
+
+  // Reset source token ref when address/chain changes
+  useEffect(() => {
+    appliedSrcMetadataRef.current = false;
+  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
+      className="pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+    >
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
+        <button
+          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          onClick={onSelectCryptoPaymentMethod}
+        >
+          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+            <>
+              {isConnected ? (
+                <div className="flex items-center gap-1">
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                </div>
+              ) : (
+                "Connect wallet"
+              )}
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
+            <>
+              Global Account
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+            <>
+              Transfer crypto
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Select payment method
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </div>
+      <OrderTokenAmount
+        address={walletAddress}
+        context="from"
+        inputValue={srcAmount}
+        onChangeInput={value => {
+          setIsSrcInputDirty(true);
+          setSrcAmount(value);
+        }}
+        chainId={selectedSrcChainId}
+        setChainId={setSelectedSrcChainId}
+        token={selectedSrcToken}
+        setToken={setSelectedSrcToken}
+      />
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-5 items-center text-sm">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+        </div>
+        <TokenBalance
+          token={selectedSrcToken}
+          walletAddress={walletAddress}
+          onChangeInput={value => {
+            setIsSrcInputDirty(true);
+            setSrcAmount(value);
+          }}
+        />
+      </div>
+    </motion.div>
+  );
+}

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

@@ -13,6 +13,7 @@ import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 export enum CryptoPaymentMethodType {
   NONE = "none",
   CONNECT_WALLET = "connect_wallet",
+  GLOBAL_WALLET = "global_wallet",
   TRANSFER_CRYPTO = "transfer_crypto",
 }
 
@@ -37,7 +38,7 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { wallet: globalWallet } = useAccountWallet();
+  const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
   const { address, isConnected, connector } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
@@ -201,58 +202,94 @@ export function CryptoPaymentMethod({
           </button>
 
           {/* Installed Wallets Section */}
-          {isConnected && (
+          {(isConnected || 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 */}
-                <button
-                  onClick={() => {
-                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                    toast.success(`Selected ${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">
-                      {globalWallet?.meta?.icon ? (
-                        <img src={globalWallet.meta.icon} alt="Wallet" className="h-10 w-10 rounded-full" />
-                      ) : (
+                {isConnected && (
+                  <button
+                    onClick={() => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      toast.success(`Selected ${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">{connector?.name || "Connected Wallet"}</span>
-                        <span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
+                          <span className="text-as-primary/60 text-sm">{shortenAddress(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>
-                    <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>
+                  </button>
+                )}
+
+                {/* Global Wallet (B3 Account) */}
+                {globalAddress && (
+                  <button
+                    onClick={() => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                      toast.success("Selected B3 Account");
+                    }}
+                    className={cn(
+                      "crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_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">
+                        {globalWallet?.meta?.icon ? (
+                          <img src={globalWallet.meta.icon} alt="Global Account" className="h-10 w-10 rounded-full" />
+                        ) : (
+                          <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
+                            <Wallet className="h-5 w-5 text-purple-600" />
+                          </div>
+                        )}
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">Global Account</span>
+                          <span className="text-as-primary/60 text-sm">{shortenAddress(globalAddress || "")}</span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </button>
+                  </button>
+                )}
               </div>
             </div>
           )}

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

@@ -240,7 +240,8 @@ export const OrderDetails = memo(function OrderDetails({
   const [showQRCode, setShowQRCode] = useState(false);
   const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
 
-  const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+  const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } =
+    useUnifiedChainSwitchAndExecute();
 
   const roundedUpSrcAmount = useMemo(() => {
     // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
@@ -293,12 +294,18 @@ export const OrderDetails = memo(function OrderDetails({
       value = BigInt(0);
     }
 
-    const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
+    // Use appropriate execution method based on payment method
+    let txHash: string | undefined;
+    if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+      txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
+    } else {
+      txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
+    }
 
     if (txHash) {
       setTxHash(txHash as `0x${string}`);
     }
-  }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
+  }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
 
   // Main payment handler that triggers chain switch and payment
   const handlePayment = async () => {
@@ -994,7 +1001,8 @@ export const OrderDetails = memo(function OrderDetails({
         <>
           {order.onrampMetadata ? (
             <PaymentVendorUI order={order} dstTokenSymbol={dstToken.symbol} />
-          ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+          ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+            effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
             <ConnectWalletPayment
               order={order}
               onPayment={handlePayment}
@@ -1004,6 +1012,7 @@ export const OrderDetails = memo(function OrderDetails({
               phantomWalletAddress={phantomWalletAddress}
               tournament={tournament}
               nft={nft}
+              cryptoPaymentMethod={effectiveCryptoPaymentMethod}
             />
           ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
             // Transfer Crypto Payment Method - Show new card-based UI

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

@@ -1,4 +1,4 @@
-import { Input, useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
@@ -8,12 +8,10 @@ import { useEffect, useRef } from "react";
 import { useAccount } from "wagmi";
 import { components } from "../../../types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { TokenBalance } from "./TokenBalance";
 
-interface PaySectionProps {
-  paymentType: "crypto" | "fiat";
+interface CryptoPaySectionProps {
   // Token state
   selectedSrcChainId: number;
   setSelectedSrcChainId: (chainId: number) => void;
@@ -24,15 +22,12 @@ interface PaySectionProps {
   setIsSrcInputDirty: (dirty: boolean) => void;
   // Payment method state
   selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-  selectedFiatPaymentMethod: FiatPaymentMethod;
   onSelectCryptoPaymentMethod: () => void;
-  onSelectFiatPaymentMethod: () => void;
   // Quote data
   anyspendQuote?: any;
 }
 
-export function PaySection({
-  paymentType,
+export function CryptoPaySection({
   selectedSrcChainId,
   setSelectedSrcChainId,
   selectedSrcToken,
@@ -41,11 +36,9 @@ export function PaySection({
   setSrcAmount,
   setIsSrcInputDirty,
   selectedCryptoPaymentMethod,
-  selectedFiatPaymentMethod,
   onSelectCryptoPaymentMethod,
-  onSelectFiatPaymentMethod,
   anyspendQuote,
-}: PaySectionProps) {
+}: CryptoPaySectionProps) {
   const { address: connectedAddress, isConnected } = useAccount();
   const { data: profileData } = useProfile({ address: connectedAddress });
   const connectedName = profileData?.displayName;
@@ -88,137 +81,68 @@ export function PaySection({
     >
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
-        {paymentType === "crypto" ? (
-          <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
-            onClick={onSelectCryptoPaymentMethod}
-          >
-            {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-              <>
-                {isConnected ? (
-                  <div className="flex items-center gap-1">
-                    {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
-                  </div>
-                ) : (
-                  "Connect wallet"
-                )}
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-              <>
-                Transfer crypto
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
-          </button>
-        ) : (
-          <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
-            onClick={onSelectFiatPaymentMethod}
-          >
-            {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">C</span>
-                  </div>
-                  Coinbase Pay
+        <button
+          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          onClick={onSelectCryptoPaymentMethod}
+        >
+          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+            <>
+              {isConnected ? (
+                <div className="flex items-center gap-1">
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                 </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">S</span>
-                  </div>
-                  Credit/Debit Card
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
-          </button>
-        )}
+              ) : (
+                "Connect wallet"
+              )}
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
+            <>
+              Global Account
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+            <>
+              Transfer crypto
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Select payment method
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </div>
+      <OrderTokenAmount
+        address={connectedAddress}
+        context="from"
+        inputValue={srcAmount}
+        onChangeInput={value => {
+          setIsSrcInputDirty(true);
+          setSrcAmount(value);
+        }}
+        chainId={selectedSrcChainId}
+        setChainId={setSelectedSrcChainId}
+        token={selectedSrcToken}
+        setToken={setSelectedSrcToken}
+      />
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-5 items-center text-sm">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+        </div>
+        <TokenBalance
+          token={selectedSrcToken}
+          walletAddress={connectedAddress}
+          onChangeInput={value => {
+            setIsSrcInputDirty(true);
+            setSrcAmount(value);
+          }}
+        />
       </div>
-      {paymentType === "crypto" ? (
-        <>
-          <OrderTokenAmount
-            address={connectedAddress}
-            context="from"
-            inputValue={srcAmount}
-            onChangeInput={value => {
-              setIsSrcInputDirty(true);
-              setSrcAmount(value);
-            }}
-            chainId={selectedSrcChainId}
-            setChainId={setSelectedSrcChainId}
-            token={selectedSrcToken}
-            setToken={setSelectedSrcToken}
-          />
-          <div className="flex items-center justify-between">
-            <div className="text-as-primary/50 flex h-5 items-center text-sm">
-              {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
-                style: "currency",
-                fallback: "",
-              })}
-            </div>
-            <TokenBalance
-              token={selectedSrcToken}
-              walletAddress={connectedAddress}
-              onChangeInput={value => {
-                setIsSrcInputDirty(true);
-                setSrcAmount(value);
-              }}
-            />
-          </div>
-        </>
-      ) : (
-        <>
-          {/* Fiat amount input - styled like PanelOnramp */}
-          <div className="flex items-center justify-center pb-2 pt-8">
-            <div className="flex gap-1">
-              <span className="text-as-tertiarry text-2xl font-bold">$</span>
-              <Input
-                type="text"
-                value={srcAmount}
-                onChange={e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, ""))}
-                placeholder="5"
-                className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
-                style={{
-                  width: `${Math.max(50, srcAmount.length * 34)}px`,
-                }}
-              />
-            </div>
-          </div>
-
-          {/* Quick Amount Buttons */}
-          <div className="mx-auto mb-6 inline-grid grid-cols-4 gap-2">
-            {["5", "10", "20", "25"].map(value => (
-              <button
-                key={value}
-                onClick={() => setSrcAmount(value)}
-                className={`bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${
-                  srcAmount === value
-                    ? "border-as-border-secondary bg-as-surface-secondary"
-                    : "bg-as-surface-secondary hover:bg-as-surface-secondary"
-                }`}
-              >
-                ${value}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
     </motion.div>
   );
 }

package/src/anyspend/react/components/index.ts

@@ -5,13 +5,14 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoPaySection } from "./common/CryptoPaySection";
 export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
@@ -20,7 +21,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
-export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";