@b3dotfun/sdk 0.0.29-alpha.2 → 0.0.29-alpha.4

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

@@ -70,6 +70,7 @@ function AnySpendDepositHypeInner({
     activePanel,
     setActivePanel,
     orderId,
+    setOrderId,
     oat,
     selectedSrcChainId,
     setSelectedSrcChainId,
@@ -413,6 +414,7 @@ function AnySpendDepositHypeInner({
               refundTxs={oat.data.refundTxs}
               cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
               onBack={() => {
+                setOrderId(undefined);
                 setActivePanel(PanelView.MAIN);
                 onSuccess?.();
               }}
@@ -470,6 +472,8 @@ function AnySpendDepositHypeInner({
     />
   );
 
+  console.log("activePanel", activePanel, orderId, oat);
+
   // If showing token selection, render with panel transitions
   return (
     <StyleRoot>

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

@@ -3,9 +3,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 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 { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 
 type Tournament = components["schemas"]["Tournament"];
@@ -33,6 +35,7 @@ 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 srcToken = order.metadata.srcToken;
   const dstToken = order.metadata.dstToken;
@@ -82,6 +85,12 @@ export default function ConnectWalletPayment({
             </>
           )}
         </ShinyButton>
+        <span className="label-style text-as-primary/50 text-xs">
+          Connected to:{" "}
+          {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+            ? centerTruncate(phantomWalletAddress, 6)
+            : centerTruncate(connectedAddress || "")}
+        </span>
 
         <div className="mt-4">
           <OrderDetailsCollapsible

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,107 @@ 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);
+  const [selectedWalletConnector, setSelectedWalletConnector] = useState<any>(null);
+  const [modalStep, setModalStep] = useState<"wallet-selection" | "account-selection">("wallet-selection");
 
-  // 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"),
+    },
+  ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
+
+  // Reset modal state when closing
+  const handleCloseModal = () => {
+    setShowWalletModal(false);
+    setModalStep("wallet-selection");
+    setSelectedWalletConnector(null);
+  };
+
+  // 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 +151,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,11 +185,73 @@ 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>
 
@@ -162,32 +261,119 @@ export function CryptoPaymentMethod({
           <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>
+                <div className="flex items-center gap-2">
+                  {modalStep === "account-selection" && (
+                    <button
+                      onClick={() => setModalStep("wallet-selection")}
+                      className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    >
+                      <ChevronLeft className="h-5 w-5" />
+                    </button>
+                  )}
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                    {modalStep === "wallet-selection"
+                      ? "Select a payment method"
+                      : `Connect ${selectedWalletConnector?.name}`}
+                  </h3>
+                </div>
                 <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">
+                {modalStep === "wallet-selection" ? (
+                  <>
+                    {/* Custom wallet options */}
+                    <div className="space-y-3">
+                      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                        {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
+                      </h4>
+                      {walletOptions.map(walletOption => {
+                        const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+
+                        return (
+                          <button
+                            key={walletOption.id}
+                            onClick={async () => {
+                              setSelectedWalletConnector(walletOption.connector);
+                              setModalStep("account-selection");
+                            }}
+                            disabled={isPending}
+                            className={`w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${
+                              isCurrentWallet
+                                ? "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>
+                  </>
+                ) : (
+                  /* Account Selection Step */
+                  <div className="space-y-4">
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Connect to {selectedWalletConnector?.name} to view available accounts
+                    </p>
+                    <button
+                      onClick={async () => {
+                        handleCloseModal();
+                        await requestWalletPermissions(selectedWalletConnector);
+                      }}
+                      disabled={isPending}
+                      className="w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
+                    >
+                      <div className="flex items-center justify-center gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700">
+                          <Wallet className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+                        </div>
+                        <div>
+                          <div className="text-sm font-medium text-gray-900 dark:text-white">
+                            {isPending
+                              ? `Connecting to ${selectedWalletConnector?.name}...`
+                              : `Connect ${selectedWalletConnector?.name}`}
+                          </div>
+                          <div className="text-xs text-gray-500 dark:text-gray-400">
+                            {isPending ? "Please check your wallet" : "Click to connect and select account"}
+                          </div>
+                        </div>
+                      </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

@@ -225,7 +225,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 +260,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/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
@@ -88,12 +90,12 @@ export function PaySection({
         <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);

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

@@ -7,7 +7,7 @@ import {
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-import { useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { useAccountWallet, useProfile, useRouter, useSearchParamsSSR } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -47,6 +47,9 @@ export function useAnyspendFlow({
   sourceTokenAddress,
   sourceTokenChainId,
 }: UseAnyspendFlowProps) {
+  const searchParams = useSearchParamsSSR();
+  const router = useRouter();
+
   // Panel and order state
   const [activePanel, setActivePanel] = useState<PanelView>(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
@@ -82,6 +85,12 @@ export function useAnyspendFlow({
     }
   }, [selectedRecipientAddress, globalAddress]);
 
+  useEffect(() => {
+    if (paymentType === "crypto") {
+      setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+    }
+  }, [paymentType]);
+
   // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
   useEffect(() => {
     const fetchSourceToken = async () => {
@@ -142,6 +151,17 @@ export function useAnyspendFlow({
     }
   }, [anyspendQuote]);
 
+  // Update useEffect for URL parameter to not override loadOrder
+  useEffect(() => {
+    if (loadOrder) return; // Skip if we have a loadOrder
+
+    const orderIdParam = searchParams.get("orderId");
+    if (orderIdParam) {
+      setOrderId(orderIdParam);
+      setActivePanel(PanelView.ORDER_DETAILS);
+    }
+  }, [searchParams, loadOrder]);
+
   // Order creation hooks
   const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
     onSuccess: data => {
@@ -149,6 +169,18 @@ export function useAnyspendFlow({
       setOrderId(newOrderId);
       setActivePanel(PanelView.ORDER_DETAILS);
       onOrderSuccess?.(newOrderId);
+
+      // Add orderId and payment method to URL for persistence
+      const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+      params.set("orderId", newOrderId);
+      if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+        console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+        params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+      } else {
+        console.log("Payment method is NONE, not setting in URL");
+      }
+      console.log("Final URL params:", params.toString());
+      router.push(`${window.location.pathname}?${params.toString()}`);
     },
     onError: error => {
       console.error(error);