@b3dotfun/sdk 0.0.20 → 0.0.21-alpha.1

package/src/anyspend/react/components/AnySpendFingerprintWrapper.tsx

@@ -44,16 +44,12 @@ export function AnySpendFingerprintWrapper({ children, fingerprint }: AnySpendFi
   );
 }
 
-// Helper function to get fingerprint config from environment variables
-export function getFingerprintConfig(): FingerprintConfig | undefined {
-  const apiKey = process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY;
-
-  if (!apiKey) {
-    return undefined;
-  }
+const defaultApiKey = "80EnsS6POsxPAR9xGxmN";
 
+// Helper function to get fingerprint config from environment variables
+export function getFingerprintConfig(): FingerprintConfig {
   return {
-    apiKey,
+    apiKey: process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY || defaultApiKey,
     endpoint: process.env.NEXT_PUBLIC_FINGERPRINT_ENDPOINT,
     scriptUrlPattern: process.env.NEXT_PUBLIC_FINGERPRINT_SCRIPT_URL,
   };

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -123,7 +123,7 @@ export function AnySpendNFT({
 
         <DropdownMenu nftContract={nftContract} />
       </div>
-      <div className="from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t">
+      <div className="from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t">
         <div className="h-[100px] w-full" />
         <div className="mb-1 flex w-full flex-col items-center gap-2 p-5">
           <span className="font-sf-rounded text-2xl font-semibold">{nftContract.name}</span>

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

@@ -87,7 +87,7 @@ export default function ConnectWalletPayment({
         <ShinyButton
           accentColor={"hsl(var(--as-brand))"}
           textColor="text-white"
-          className="flex w-5/6 items-center gap-2 sm:px-0"
+          className="flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0"
           disabled={txLoading || isSwitchingOrExecuting}
           onClick={onPayment}
         >

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

@@ -1,15 +1,19 @@
 "use client";
 
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { thirdwebB3Mainnet } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 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 { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { useState } from "react";
+import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { useSetActiveWallet } from "thirdweb/react";
-import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { ConnectEmbed, lightTheme, useActiveWallet } from "thirdweb/react";
+import { createWallet } from "thirdweb/wallets";
+import { useDisconnect } from "wagmi";
 
-export enum PaymentMethod {
+export enum CryptoPaymentMethodType {
   NONE = "none",
   CONNECT_WALLET = "connect_wallet",
   TRANSFER_CRYPTO = "transfer_crypto",
@@ -22,11 +26,11 @@ interface CryptoPaymentMethodProps {
       icon?: string;
     };
   };
-  selectedPaymentMethod: PaymentMethod;
-  setSelectedPaymentMethod: (method: PaymentMethod) => void;
+  selectedPaymentMethod: CryptoPaymentMethodType;
+  setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
   isCreatingOrder: boolean;
   onBack: () => void;
-  onSelectPaymentMethod: (method: PaymentMethod) => void;
+  onSelectPaymentMethod: (method: CryptoPaymentMethodType) => void;
 }
 
 export function CryptoPaymentMethod({
@@ -36,59 +40,23 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { connect, connectors, isPending: isConnecting, error: connectError } = useConnect();
-  const wagmiAccount = useAccount();
-  const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = useAccountWallet();
+  const { wallet: globalWallet } = useAccountWallet();
+  const activeWallet = useActiveWallet();
   const { disconnect } = useDisconnect();
-  const previousAddress = useRef<string | undefined>(globalAddress);
+  const [showWalletModal, setShowWalletModal] = useState(false);
 
-  const setActiveWallet = useSetActiveWallet();
-
-  // Automatically set EOA wallet as active when available
-  useEffect(() => {
-    if (connectedEOAWallet) {
-      console.log("Setting active wallet", connectedEOAWallet);
-      setActiveWallet(connectedEOAWallet);
-    }
-  }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
-
-  // Handle wallet connection success
-  useEffect(() => {
-    if (globalAddress && previousAddress.current !== globalAddress) {
-      previousAddress.current = globalAddress;
-      toast.success("Wallet connected successfully");
-      // Automatically select connect wallet method and go back to main view
-      setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-      onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-    }
-  }, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
-
-  // Handle connection errors
-  useEffect(() => {
-    if (connectError) {
-      // Handle specific error cases
-      if (connectError.message.includes("Connector already connected")) {
-        // If connector is already connected, just proceed with the flow
-        console.log("Connector already connected, proceeding with selection");
-        // Use wagmi account address or global address
-        if (wagmiAccount.address || globalAddress) {
-          setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-          onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-        } else {
-          // Fallback: proceed anyway as the connector reports it's connected
-          setTimeout(() => {
-            setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-            onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-          }, 100);
-        }
-      } else {
-        toast.error(`Failed to connect wallet: ${connectError.message}`);
-      }
-    }
-  }, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
+  // Define available wallets for the modal
+  const availableWallets = [
+    createWallet("io.metamask"),
+    // createWallet("com.coinbase.wallet"),
+    createWallet("me.rainbow"),
+    createWallet("walletConnect"),
+    createWallet("io.rabby"),
+    createWallet("app.phantom"),
+  ];
 
   return (
-    <div className="mx-auto w-[460px] max-w-full">
+    <div className="mx-auto h-fit w-[460px] max-w-full">
       <div className={cn("relative flex flex-col gap-10")}>
         {/* Header */}
         <button
@@ -106,46 +74,11 @@ export function CryptoPaymentMethod({
         {/* Payment Methods */}
         <div className="flex flex-col gap-3">
           {/* Connect Wallet Option */}
-          {!globalAddress ? (
+          {!activeWallet ? (
             // Not connected - show single connect button
             <button
-              onClick={() => {
-                // Prevent connecting if already connecting or if there's already a connection
-                if (isConnecting) return;
-
-                try {
-                  // Check if wagmi already has a connection
-                  if (wagmiAccount.isConnected && wagmiAccount.address) {
-                    // Already connected via wagmi, just proceed with selection
-                    console.log("Wagmi already connected, proceeding with selection");
-                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    return;
-                  }
-
-                  // Check if global address exists (b3 account system)
-                  if (globalAddress) {
-                    // Already connected via global account, just proceed with selection
-                    console.log("Global address already exists, proceeding with selection");
-                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    return;
-                  }
-
-                  // Use the first available connector or a preferred one
-                  const preferredConnector =
-                    connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
-
-                  if (preferredConnector) {
-                    connect({ connector: preferredConnector });
-                  }
-                } catch (error) {
-                  console.error("Connection error:", error);
-                  toast.error("Failed to connect wallet. Please try again.");
-                }
-              }}
-              disabled={isConnecting}
-              className="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 disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => setShowWalletModal(true)}
+              className="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="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
@@ -153,14 +86,10 @@ export function CryptoPaymentMethod({
                 </div>
                 <div className="flex flex-col items-start text-left">
                   <h4 className="text-as-primary font-semibold">Connect wallet</h4>
-                  <p className="text-as-primary/60 text-sm">Connect your wallet to continue</p>
+                  <p className="text-as-primary/60 text-sm">Choose from multiple wallet options</p>
                 </div>
               </div>
-              {isConnecting ? (
-                <div className="border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2"></div>
-              ) : (
-                <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-              )}
+              <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
             </button>
           ) : (
             // Connected - show wallet info
@@ -176,25 +105,27 @@ export function CryptoPaymentMethod({
                   )}
                   <div className="flex flex-col">
                     <span className="text-as-primary font-semibold">Connected Wallet</span>
-                    <span className="text-as-primary/60 text-sm">{shortenAddress(globalAddress)}</span>
+                    <span className="text-as-primary/60 text-sm">
+                      {shortenAddress(activeWallet.getAccount()?.address || "")}
+                    </span>
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
                   <button
                     onClick={() => {
-                      setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                      onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                     }}
                     className="bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors"
                   >
                     Use Wallet
                   </button>
                   <button
-                    onClick={() => {
+                    onClick={async () => {
                       disconnect();
                       toast.success("Wallet disconnected");
-                      if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
-                        setSelectedPaymentMethod(PaymentMethod.NONE);
+                      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"
@@ -209,8 +140,8 @@ export function CryptoPaymentMethod({
           {/* Transfer Crypto Option */}
           <button
             onClick={() => {
-              setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
-              onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
+              setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+              onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
             }}
             disabled={isCreatingOrder}
             className="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"
@@ -222,6 +153,43 @@ export function CryptoPaymentMethod({
           </button>
         </div>
       </div>
+
+      {/* Wallet Connection Modal */}
+      {showWalletModal &&
+        createPortal(
+          <div className="pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
+            <div className="max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Connect Wallet</h3>
+                <button
+                  onClick={() => setShowWalletModal(false)}
+                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+              <ConnectEmbed
+                client={client}
+                chain={thirdwebB3Mainnet}
+                wallets={availableWallets}
+                showThirdwebBranding={false}
+                theme={lightTheme()}
+                onConnect={async wallet => {
+                  console.log("Wallet connected:", wallet);
+                  // setShowWalletModal(false);
+                  setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                  onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                  setShowWalletModal(false);
+                }}
+                style={{
+                  width: "100%",
+                  minHeight: "300px",
+                }}
+              />
+            </div>
+          </div>,
+          typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body,
+        )}
     </div>
   );
 }

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

@@ -75,7 +75,7 @@ export function FiatPaymentMethodComponent({
       id: FiatPaymentMethod.STRIPE,
       name: "Stripe",
       description: "Credit or debit card payment",
-      badge: stripeFee ? `$${stripeFee} fee` : "Standard Fee",
+      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : "Standard Fee",
       badgeColor: "bg-yellow-100 text-yellow-800",
       available: true,
     });

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

@@ -49,7 +49,7 @@ import { erc20Abi, WalletClient } from "viem";
 import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import ConnectWalletPayment from "./ConnectWalletPayment";
-import { PaymentMethod } from "./CryptoPaymentMethod";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import PaymentVendorUI from "./PaymentVendorUI";
 import { TransferCryptoDetails } from "./TransferCryptoDetails";
@@ -62,7 +62,7 @@ interface OrderDetailsProps {
   relayTx: components["schemas"]["RelayTx"] | null;
   executeTx: components["schemas"]["ExecuteTx"] | null;
   refundTxs: components["schemas"]["RefundTx"][] | null;
-  paymentMethod?: PaymentMethod; // Now optional since we read from URL
+  cryptoPaymentMethod?: CryptoPaymentMethodType; // Now optional since we read from URL
   onBack?: () => void;
 }
 
@@ -199,15 +199,16 @@ export const OrderDetails = memo(function OrderDetails({
   relayTx,
   executeTx,
   refundTxs,
-  paymentMethod = PaymentMethod.NONE,
+  cryptoPaymentMethod,
   onBack,
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  // Read payment method from URL parameters
-  const paymentMethodFromUrl = searchParams.get("paymentMethod") as PaymentMethod | null;
-  const effectivePaymentMethod = paymentMethodFromUrl || paymentMethod || PaymentMethod.NONE;
+  // Read crypto payment method from URL parameters
+  const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod") as CryptoPaymentMethodType | null;
+  const effectiveCryptoPaymentMethod =
+    cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
 
   const setB3ModalOpen = useModalStore((state: any) => state.setB3ModalOpen);
 
@@ -931,7 +932,7 @@ export const OrderDetails = memo(function OrderDetails({
         <>
           {order.onrampMetadata ? (
             <PaymentVendorUI isMainnet={isMainnet} order={order} dstTokenSymbol={dstToken.symbol} />
-          ) : effectivePaymentMethod === PaymentMethod.CONNECT_WALLET ? (
+          ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
             <ConnectWalletPayment
               order={order}
               onPayment={handlePayment}
@@ -942,7 +943,7 @@ export const OrderDetails = memo(function OrderDetails({
               tournament={tournament}
               nft={nft}
             />
-          ) : effectivePaymentMethod === PaymentMethod.TRANSFER_CRYPTO ? (
+          ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
             // Transfer Crypto Payment Method - Show new card-based UI
             <TransferCryptoDetails
               order={order}
@@ -1067,8 +1068,9 @@ export const OrderDetails = memo(function OrderDetails({
                       value={getPaymentUrl(
                         order.globalAddress,
                         BigInt(order.srcAmount),
-                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress,
+                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
                         order.srcChain,
+                        srcToken?.decimals,
                       )}
                       className="max-w-[200px]"
                     />
@@ -1153,10 +1155,7 @@ function TransactionDetails({
               initial={{ opacity: 0, scale: 0.3 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.5, ease: "easeOut", delay }}
-              className="bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm"
-              style={{
-                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)",
-              }}
+              className="bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm"
             >
               <CheckIcon className="text-as-primary h-3 w-3" />
             </motion.div>

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

@@ -24,11 +24,11 @@ export const OrderStatus = memo(function OrderStatus({ order }: { order: compone
     },
   ];
 
-  if (order.status === "waiting_stripe_payment") {
+  if (["waiting_stripe_payment"].includes(order.status)) {
     return <StepProgress steps={paymentSteps} currentStepIndex={0} />;
   }
 
-  if (order.status === "relay") {
+  if (["relay", "sending_token_from_vault"].includes(order.status)) {
     return <StepProgress steps={paymentSteps} currentStepIndex={1} />;
   }
 

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

@@ -147,9 +147,7 @@ function StripePaymentForm({
     try {
       const result = (await stripe.confirmPayment({
         elements,
-        confirmParams: {
-          return_url: `${window.location.origin}/?orderId=${order.id}&waitingForDeposit=true&fromStripe=true`,
-        },
+        redirect: "if_required",
       })) as PaymentIntentResult;
 
       if (result.error) {

package/src/anyspend/react/components/common/RecipientSelection.example.tsx

@@ -0,0 +1,52 @@
+/**
+ * Example usage of the RecipientSelection component
+ * This file demonstrates various ways to use the component with different props
+ */
+
+import { isAddress } from "viem";
+import { RecipientSelection } from "./RecipientSelection";
+
+// Basic usage example
+export function BasicRecipientSelection() {
+  return (
+    <RecipientSelection
+      onBack={() => console.log("Back clicked")}
+      onConfirm={address => console.log("Address confirmed:", address)}
+    />
+  );
+}
+
+// Custom styling and validation example
+export function CustomRecipientSelection() {
+  const validateEthereumAddress = (address: string): boolean => {
+    return isAddress(address);
+  };
+
+  return (
+    <RecipientSelection
+      initialValue="0x..."
+      placeholder="Enter Ethereum address"
+      title="Send to Ethereum Address"
+      description="Enter a valid Ethereum address to send tokens"
+      confirmText="Confirm Ethereum Address"
+      validateAddress={validateEthereumAddress}
+      autoFocus={false}
+      onBack={() => console.log("Going back")}
+      onConfirm={address => console.log("Valid Ethereum address:", address)}
+    />
+  );
+}
+
+// ENS-focused example
+export function ENSRecipientSelection() {
+  return (
+    <RecipientSelection
+      placeholder="Enter ENS name (e.g., vitalik.eth)"
+      title="Send to ENS Address"
+      description="Enter an ENS name or Ethereum address"
+      confirmText="Confirm ENS Address"
+      onBack={() => console.log("Back to previous view")}
+      onConfirm={address => console.log("ENS or address:", address)}
+    />
+  );
+}

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

@@ -0,0 +1,146 @@
+"use client";
+
+import { ChevronLeft } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export interface RecipientSelectionProps {
+  /**
+   * Initial recipient address value
+   */
+  initialValue?: string;
+  /**
+   * Placeholder text for the input field
+   */
+  placeholder?: string;
+  /**
+   * Title text displayed in the header
+   */
+  title?: string;
+  /**
+   * Description text displayed below the title
+   */
+  description?: string;
+  /**
+   * Text for the confirm button
+   */
+  confirmText?: string;
+  /**
+   * Callback when back button is clicked
+   */
+  onBack: () => void;
+  /**
+   * Callback when recipient address is confirmed
+   * @param address - The recipient address entered by the user
+   */
+  onConfirm: (address: string) => void;
+  /**
+   * Whether the component should auto-focus the input
+   */
+  autoFocus?: boolean;
+  /**
+   * Custom validation function for the address
+   * @param address - The address to validate
+   * @returns true if valid, false otherwise
+   */
+  validateAddress?: (address: string) => boolean;
+}
+
+export function RecipientSelection({
+  initialValue = "",
+  placeholder = "Enter recipient address",
+  title = "Add recipient address or ENS",
+  description = "Swap and send tokens to another address",
+  confirmText = "Confirm recipient address",
+  onBack,
+  onConfirm,
+  autoFocus = true,
+  validateAddress,
+}: RecipientSelectionProps) {
+  const [recipientAddress, setRecipientAddress] = useState<string>(initialValue);
+
+  // Update internal state when initialValue changes
+  useEffect(() => {
+    setRecipientAddress(initialValue);
+  }, [initialValue]);
+
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      setRecipientAddress(text);
+    } catch (err) {
+      console.error("Failed to read clipboard:", err);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (recipientAddress && (!validateAddress || validateAddress(recipientAddress))) {
+      onConfirm(recipientAddress);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && recipientAddress) {
+      handleConfirm();
+    }
+  };
+
+  const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
+  const canConfirm = recipientAddress && isAddressValid;
+
+  return (
+    <div className="mx-auto w-[460px] max-w-full">
+      <div className="flex flex-col gap-6">
+        {/* Header */}
+        <div className="flex justify-around">
+          <button
+            onClick={onBack}
+            className="text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+          <div className="flex-1 text-center">
+            <h2 className="text-as-primary text-lg font-semibold">{title}</h2>
+            <p className="text-as-primary/60 text-sm">{description}</p>
+          </div>
+        </div>
+
+        {/* Address Input */}
+        <div className="flex flex-col gap-4">
+          <div className="bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border">
+            <input
+              type="text"
+              placeholder={placeholder}
+              value={recipientAddress}
+              onChange={e => setRecipientAddress(e.target.value)}
+              onKeyDown={handleKeyDown}
+              className="text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none"
+              autoFocus={autoFocus}
+            />
+            <div className="border-as-border-secondary border-l">
+              <button
+                onClick={handlePaste}
+                className="text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors"
+              >
+                Paste
+              </button>
+            </div>
+          </div>
+
+          {/* Validation Error */}
+          {recipientAddress && !isAddressValid && (
+            <div className="text-as-red text-sm">Please enter a valid address</div>
+          )}
+
+          {/* Confirm Button */}
+          <button
+            onClick={handleConfirm}
+            disabled={!canConfirm}
+            className="bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed"
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -195,6 +195,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                     BigInt(order.srcAmount),
                     order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress,
                     order.srcChain,
+                    srcToken?.decimals,
                   )}
                   className="bg-as-surface-secondary max-h-48 max-w-48"
                 />

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

@@ -19,6 +19,7 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
+export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";
 export { TransferCryptoDetails } from "./common/TransferCryptoDetails";

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

@@ -5,6 +5,7 @@ export * from "./useAnyspendOrderHistory";
 export * from "./useAnyspendQuote";
 export * from "./useAnyspendTokens";
 export * from "./useCoinbaseOnrampOptions";
+export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
 export * from "./useSigMint";