@b3dotfun/sdk 0.0.29 → 0.0.30-alpha.1

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

@@ -1,17 +1,13 @@
 "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 { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { ConnectEmbed, lightTheme, useActiveWallet, useDisconnect as useThirdwebDisconnect } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
-import { useDisconnect } from "wagmi";
+import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 
 export enum CryptoPaymentMethodType {
   NONE = "none",
@@ -41,20 +37,110 @@ export function CryptoPaymentMethod({
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
   const { wallet: globalWallet } = useAccountWallet();
-  const activeWallet = useActiveWallet();
+  const { address, isConnected, connector } = useAccount();
+  const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
-  const { disconnect: disconnectThirdweb } = useThirdwebDisconnect();
+  const { data: walletClient } = useWalletClient();
   const [showWalletModal, setShowWalletModal] = useState(false);
 
-  // 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"),
-  ];
+  // Define available wallet connectors
+  const availableConnectors = connectors.filter(connector =>
+    ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name),
+  );
+
+  // Define wallet options with icons and info
+  const walletOptions = [
+    {
+      id: "metamask",
+      name: "MetaMask",
+      icon: "🦊",
+      description: "Connect using MetaMask browser extension",
+      connector: availableConnectors.find(c => c.name === "MetaMask"),
+    },
+    {
+      id: "coinbase",
+      name: "Coinbase Wallet",
+      icon: "🔵",
+      description: "Connect using Coinbase Wallet",
+      connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
+    },
+    {
+      id: "rainbow",
+      name: "Rainbow",
+      icon: "🌈",
+      description: "Connect using Rainbow wallet",
+      connector: availableConnectors.find(c => c.name === "Rainbow"),
+    },
+    {
+      id: "walletconnect",
+      name: "WalletConnect",
+      icon: "🔗",
+      description: "Connect using WalletConnect protocol",
+      connector: availableConnectors.find(c => c.name === "WalletConnect"),
+    },
+    {
+      id: "phantom",
+      name: "Phantom",
+      icon: "https://phantom.app/favicon.ico",
+      description: "Connect using Phantom wallet",
+      connector: availableConnectors.find(c => c.name === "Phantom"),
+    },
+  ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
+
+  // Reset modal state when closing
+  const handleCloseModal = () => {
+    setShowWalletModal(false);
+  };
+
+  // Function to request wallet permissions for specific wallet
+  const requestWalletPermissions = async (walletConnector?: any) => {
+    try {
+      // If a specific wallet connector is provided and it's different from current
+      if (walletConnector && connector?.name !== walletConnector.name) {
+        // Disconnect current and connect to the selected wallet
+        // if (isConnected) {
+        //   disconnect();
+        //   // Small delay to ensure disconnection
+        //   await new Promise(resolve => setTimeout(resolve, 100));
+        // }
+        await connect({ connector: walletConnector });
+        setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+        onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+        toast.success(`Connected to ${walletConnector.name}`);
+        return;
+      }
+
+      // If same wallet or no specific wallet, request permissions for account switching
+      if (walletClient && "request" in walletClient) {
+        await walletClient.request({
+          method: "wallet_requestPermissions",
+          params: [{ eth_accounts: {} }],
+        });
+        toast.success("Account selection completed");
+        setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+        onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+      } else {
+        // Fallback: show modal for manual wallet selection
+        setShowWalletModal(true);
+      }
+    } catch (error) {
+      console.error("Failed to request wallet permissions:", error);
+      if (error && typeof error === "object" && "message" in error) {
+        const errorMessage = (error as any).message.toLowerCase();
+        if (
+          errorMessage.includes("rejected") ||
+          errorMessage.includes("denied") ||
+          errorMessage.includes("cancelled")
+        ) {
+          toast.error("Account selection cancelled");
+        } else {
+          toast.error("Failed to open account selection");
+        }
+      } else {
+        toast.error("Failed to open account selection");
+      }
+    }
+  };
 
   return (
     <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full">
@@ -68,78 +154,32 @@ export function CryptoPaymentMethod({
         </button>
         <div className="flex items-center justify-around gap-4">
           <div className="flex-1 text-center">
-            <h2 className="text-as-primary text-lg font-semibold">Choose payment method</h2>
+            <h2 className="text-as-primary text-lg font-semibold">Select a payment method</h2>
           </div>
         </div>
 
         {/* Payment Methods */}
-        <div className="crypto-payment-methods flex flex-col gap-3">
-          {/* Connect Wallet Option */}
-          {!activeWallet ? (
-            // Not connected - show single connect button
-            <button
-              onClick={() => 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>
-                  <p className="text-as-primary/60 text-sm">Choose from multiple wallet options</p>
-                </div>
+        <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>
-              <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-            </button>
-          ) : (
-            // Connected - show wallet info
-            <div className="crypto-payment-method-connect-wallet wallet-connected bg-as-surface-primary border-as-border-secondary rounded-xl border">
-              <div className="flex items-center justify-between p-4">
-                <div className="flex items-center gap-3">
-                  {globalWallet?.meta?.icon ? (
-                    <img src={globalWallet.meta.icon} alt="Connected Wallet" className="h-8 w-8 rounded-full" />
-                  ) : (
-                    <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
-                      <Wallet className="h-4 w-4 text-green-600" />
-                    </div>
-                  )}
-                  <div className="flex flex-col">
-                    <span className="text-as-primary font-semibold">Connected Wallet</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(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={async () => {
-                      disconnect();
-                      disconnectThirdweb(activeWallet);
-                      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 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 Option */}
+          {/* Transfer Crypto Section */}
           <button
             onClick={() => {
               setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
@@ -148,46 +188,145 @@ export function CryptoPaymentMethod({
             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 flex-col items-start text-left">
-              <h4 className="text-as-primary font-semibold">Transfer crypto</h4>
+            <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>
+
+          {/* Installed Wallets Section */}
+          {isConnected && (
+            <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" />
+                      ) : (
+                        <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>
+                    </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>
+              </div>
+            </div>
+          )}
         </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="wallet-connection-modal 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>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
+                </h3>
                 <button
-                  onClick={() => setShowWalletModal(false)}
+                  onClick={handleCloseModal}
                   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 className="space-y-4">
+                {/* Custom wallet options */}
+                <div className="space-y-3">
+                  {walletOptions.map(walletOption => {
+                    const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+
+                    return (
+                      <button
+                        key={walletOption.id}
+                        onClick={async () => {
+                          handleCloseModal();
+                          await requestWalletPermissions(walletOption.connector);
+                        }}
+                        disabled={isPending}
+                        className={`wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${
+                          isCurrentWallet
+                            ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+                            : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            <div
+                              className={`flex h-12 w-12 items-center justify-center rounded-xl text-xl ${
+                                isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"
+                              }`}
+                            >
+                              {walletOption.icon}
+                            </div>
+                            <div>
+                              <div className="flex items-center gap-2">
+                                <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                                  {walletOption.name}
+                                </div>
+                                {isCurrentWallet && (
+                                  <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200">
+                                    Connected
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-xs text-gray-500 dark:text-gray-400">
+                                {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
+                              </div>
+                            </div>
+                          </div>
+                          <ChevronRightCircle className="h-5 w-5 text-gray-400" />
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
             </div>
           </div>,
           typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body,

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

@@ -2,6 +2,7 @@
 
 import {
   ALL_CHAINS,
+  DEPOSIT_HYPE_ACTION,
   getChainName,
   getErrorDisplay,
   getExplorerTxUrl,
@@ -97,6 +98,9 @@ function getOrderSuccessText({
       actionText = `funded ${tournament?.name}`;
       return `Successfully ${actionText}`;
     case "custom":
+      if (order.metadata.action === DEPOSIT_HYPE_ACTION) {
+        return `Successfully deposited ${formatTokenAmount(BigInt(order.payload?.amount || "0"), 18)} HYPE to ${recipient}`;
+      }
       actionText = order.metadata.action || `executed contract`;
       return `Successfully ${actionText}`;
     default:
@@ -225,7 +229,7 @@ export const OrderDetails = memo(function OrderDetails({
   const [showQRCode, setShowQRCode] = useState(false);
   const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
 
-  const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+  const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
   const { colorMode } = useColorMode();
 
@@ -260,12 +264,12 @@ export const OrderDetails = memo(function OrderDetails({
       value = BigInt(0);
     }
 
-    const txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
+    const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
 
     if (txHash) {
       setTxHash(txHash as `0x${string}`);
     }
-  }, [order, switchChainAndExecute]);
+  }, [order, switchChainAndExecuteWithEOA]);
 
   // Main payment handler that triggers chain switch and payment
   const handlePayment = async () => {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, capitalizeFirstLetter, DEPOSIT_HYPE_ACTION, getChainName } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { CopyToClipboard } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
@@ -94,9 +94,11 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                     : order.type === "fund_tournament"
                       ? "Fund tournament"
                       : order.type === "custom"
-                        ? order.metadata.action
-                          ? capitalizeFirstLetter(order.metadata.action)
-                          : "Contract execution"
+                        ? order.metadata.action === DEPOSIT_HYPE_ACTION
+                          ? "Deposit HYPE"
+                          : order.metadata.action
+                            ? capitalizeFirstLetter(order.metadata.action)
+                            : "Contract execution"
                         : ""}
               </div>
 
@@ -113,6 +115,10 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                     <img src={tournament?.imageUrl} alt={tournament?.name || "Tournament"} className="h-5 w-5" />
                     <div>{tournament?.name || "Tournament"}</div>
                   </div>
+                ) : order.type === "custom" && order.metadata.action === DEPOSIT_HYPE_ACTION ? (
+                  <div className="flex items-center gap-2">
+                    <div>{formatTokenAmount(BigInt(order.payload.amount), dstToken.decimals)} HYPE</div>
+                  </div>
                 ) : null}
 
                 <div className="text-as-primary/50 flex items-center gap-2">

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

@@ -3,13 +3,20 @@ import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { useSearchParams } from "@b3dotfun/sdk/shared/react";
 import { Check, X } from "lucide-react";
 import { memo } from "react";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { Step, StepProgress } from "./StepProgress";
 
-export const OrderStatus = memo(function OrderStatus({ order }: { order: components["schemas"]["Order"] }) {
+export const OrderStatus = memo(function OrderStatus({
+  order,
+  selectedCryptoPaymentMethod,
+}: {
+  order: components["schemas"]["Order"];
+  selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
+}) {
   const isComplete = order.status === "executed";
   const { text, status: displayStatus, description } = getStatusDisplay(order);
   const searchParams = useSearchParams();
-  const cryptoPaymentMethod = searchParams.get("cryptoPaymentMethod");
+  const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
 
   console.log("OrderStatus", displayStatus);
   console.log("OrderStatus", order);

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

@@ -5,11 +5,11 @@ import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 
 import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function OrderTokenAmount({
   disabled,
@@ -140,7 +140,7 @@ export function OrderTokenAmount({
                 variant="outline"
                 role="combobox"
                 className={cn(
-                  "bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center",
+                  "token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center",
                   tokenSelectClassName,
                 )}
               >

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

@@ -22,6 +22,7 @@ export function PanelOnramp({
   onDestinationTokenChange,
   onDestinationChainChange,
   fiatPaymentMethodIndex,
+  recipientSelectionPanelIndex,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -34,6 +35,7 @@ export function PanelOnramp({
   onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
   onDestinationChainChange?: (chainId: number) => void;
   fiatPaymentMethodIndex: number;
+  recipientSelectionPanelIndex: number;
 }) {
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -199,7 +201,7 @@ export function PanelOnramp({
           {_recipientAddress ? (
             <button
               className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
-              onClick={() => setActivePanel(5)} // Recipient selection panel
+              onClick={() => setActivePanel(recipientSelectionPanelIndex)} // Recipient selection panel
             >
               <span className="text-sm">
                 {recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress)}

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

@@ -1,10 +1,11 @@
-import { Input, useAccountWallet, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { Input, 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 { FiatPaymentMethod } from "./FiatPaymentMethod";
@@ -45,8 +46,9 @@ export function PaySection({
   onSelectFiatPaymentMethod,
   anyspendQuote,
 }: PaySectionProps) {
-  const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
-  const connectedAddress = globalWallet?.address;
+  const { address: connectedAddress, isConnected } = useAccount();
+  const { data: profileData } = useProfile({ address: connectedAddress });
+  const connectedName = profileData?.displayName;
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
 
   // Add ref to track if we've applied metadata
@@ -82,18 +84,18 @@ export function PaySection({
       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="bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+      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>
         {paymentType === "crypto" ? (
           <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
+            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
             onClick={onSelectCryptoPaymentMethod}
           >
             {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
               <>
-                {globalAddress ? (
+                {isConnected ? (
                   <div className="flex items-center gap-1">
                     {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                   </div>
@@ -151,7 +153,7 @@ export function PaySection({
       {paymentType === "crypto" ? (
         <>
           <OrderTokenAmount
-            address={globalAddress}
+            address={connectedAddress}
             context="from"
             inputValue={srcAmount}
             onChangeInput={value => {
@@ -172,7 +174,7 @@ export function PaySection({
             </div>
             <TokenBalance
               token={selectedSrcToken}
-              walletAddress={globalAddress}
+              walletAddress={connectedAddress}
               onChangeInput={value => {
                 setIsSrcInputDirty(true);
                 setSrcAmount(value);