@b3dotfun/sdk 0.0.83-test.0 → 0.0.84-alpha.0

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

@@ -4,13 +4,8 @@ import { toast, useAccountWallet, WalletImage } from "@b3dotfun/sdk/global-accou
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
-import { createWallet, WalletId } from "thirdweb/wallets";
-import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+import { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/react";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
@@ -35,128 +30,32 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
-  const { connector, address } = useAccount();
-  const { connect, connectors, isPending } = useConnect();
+  const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
   const { disconnect } = useDisconnect();
-  const { data: walletClient } = useWalletClient();
-  const [showWalletModal, setShowWalletModal] = useState(false);
-  const setActiveWallet = useSetActiveWallet();
+  const { connect: openConnectModal } = useConnectModal();
   const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
 
-  const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
   // Use custom hook to determine wallet display logic
-  const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
-  console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
+  const { shouldShowConnectedEOA } = useConnectedWalletDisplay(selectedPaymentMethod);
 
-  // Map wagmi connector names to thirdweb wallet IDs
-  const getThirdwebWalletId = (connectorName: string): WalletId | null => {
-    const walletMap: Record<string, WalletId> = {
-      MetaMask: "io.metamask",
-      "Coinbase Wallet": "com.coinbase.wallet",
-      Rainbow: "me.rainbow",
-      WalletConnect: "walletConnect",
-      Phantom: "app.phantom",
-    };
-    return walletMap[connectorName] || null;
-  };
-
-  // Create thirdweb wallet from wagmi connector
-  const createThirdwebWalletFromConnector = async (connectorName: string) => {
-    const walletId = getThirdwebWalletId(connectorName);
-    if (!walletId) {
-      console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
-      return null;
-    }
-
-    try {
-      const thirdwebWallet = createWallet(walletId);
-      // Connect the wallet to sync with the existing wagmi connection
-      await thirdwebWallet.connect({ client });
-      return thirdwebWallet;
-    } catch (error) {
-      console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
-      return null;
-    }
-  };
-
-  // Define available wallet connectors
-  const availableConnectors = connectors.filter(connector =>
-    ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
-  );
-
-  // Define wallet options with icons and info
-  const walletOptions = [
-    {
-      id: "metamask",
-      name: "MetaMask",
-      icon: <WalletMetamask size={48} />,
-      description: "Connect using MetaMask browser extension",
-      connector: availableConnectors.find(c => c.name === "MetaMask"),
-    },
-    {
-      id: "coinbase",
-      name: "Coinbase Wallet",
-      icon: <WalletCoinbase size={48} />,
-      description: "Connect using Coinbase Wallet",
-      connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
-    },
-    {
-      id: "rainbow",
-      name: "Rainbow",
-      icon: <WalletRainbow size={48} />,
-      description: "Connect using Rainbow wallet",
-      connector: availableConnectors.find(c => c.name === "Rainbow"),
-    },
-    {
-      id: "walletconnect",
-      name: "WalletConnect",
-      icon: <WalletWalletConnect size={48} />,
-      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);
-  };
-
-  // Function to request wallet permissions for specific wallet
-  const requestWalletPermissions = async (walletConnector?: any) => {
+  // Handle wallet connection using thirdweb modal
+  const handleConnectWallet = async () => {
     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;
+      // Disconnect current wallet before connecting a new one
+      if (connectedEOAWallet) {
+        await disconnect(connectedEOAWallet);
       }
-
-      // 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");
+      const wallet = await openConnectModal({ client, setActive: false });
+      if (wallet) {
+        // setActiveWallet(wallet);
         setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
         onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-      } else {
-        // Fallback: show modal for manual wallet selection
-        setShowWalletModal(true);
+        toast.success("Wallet connected");
       }
     } catch (error) {
-      console.error("Failed to request wallet permissions:", error);
+      console.error("Failed to connect wallet:", error);
       if (error && typeof error === "object" && "message" in error) {
         const errorMessage = (error as any).message.toLowerCase();
         if (
@@ -164,12 +63,10 @@ export function CryptoPaymentMethod({
           errorMessage.includes("denied") ||
           errorMessage.includes("cancelled")
         ) {
-          toast.error("Account selection cancelled");
+          // User cancelled - no toast needed
         } else {
-          toast.error("Failed to open account selection");
+          toast.error("Failed to connect wallet");
         }
-      } else {
-        toast.error("Failed to open account selection");
       }
     }
   };
@@ -236,7 +133,7 @@ export function CryptoPaymentMethod({
         {/* Payment Methods */}
         <div className="crypto-payment-methods flex flex-col gap-4">
           {/* Installed Wallets Section */}
-          {(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (
+          {(shouldShowConnectedEOA || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
@@ -247,10 +144,7 @@ export function CryptoPaymentMethod({
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                      if (connectedEOAWallet) {
-                        setActiveWallet(connectedEOAWallet);
-                      }
-                      toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
+                      toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
                     }}
                     className={cn(
                       "crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
@@ -266,7 +160,7 @@ export function CryptoPaymentMethod({
                         </div>
                         <div className="flex flex-col">
                           <span className="text-as-primary font-semibold">
-                            {eoaWalletInfo?.name || connector?.name || "Connected Wallet"}
+                            {eoaWalletInfo?.name || "Connected Wallet"}
                           </span>
                           <span className="text-as-primary/60 text-sm">
                             {shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
@@ -280,62 +174,9 @@ export function CryptoPaymentMethod({
                         <button
                           onClick={e => {
                             e.stopPropagation();
-                            disconnect();
-                            toast.success("Wallet disconnected");
-                            if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-                              setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                            if (connectedEOAWallet) {
+                              disconnect(connectedEOAWallet);
                             }
-                          }}
-                          className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
-                        >
-                          <X className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </div>
-                  </button>
-                )}
-
-                {shouldShowWagmiWallet && (
-                  <button
-                    onClick={async () => {
-                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-
-                      // Create thirdweb wallet from wagmi connector
-                      if (connector?.name) {
-                        const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
-                        if (thirdwebWallet) {
-                          setActiveWallet(thirdwebWallet);
-                        }
-                      }
-
-                      toast.success(`Selected ${connector?.name || "wallet"}`);
-                    }}
-                    className={cn(
-                      "crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
-                      selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
-                        ? "connected-wallet border-as-brand bg-as-brand/5"
-                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
-                    )}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
-                          <Wallet className="h-5 w-5 text-blue-600" />
-                        </div>
-                        <div className="flex flex-col">
-                          <span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
-                          <span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
-                        </div>
-                      </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);
@@ -398,10 +239,7 @@ export function CryptoPaymentMethod({
             <div className="space-y-3">
               {/* Connect Wallet Section */}
               <button
-                onClick={() => {
-                  // Always show wallet selection modal first
-                  setShowWalletModal(true);
-                }}
+                onClick={handleConnectWallet}
                 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">
@@ -438,75 +276,6 @@ export function CryptoPaymentMethod({
           </div>
         </div>
       </div>
-
-      {/* Wallet Connection Modal */}
-      {showWalletModal &&
-        createPortal(
-          <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">
-                  {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
-                </h3>
-                <button
-                  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>
-
-              <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">
-                            {walletOption.icon}
-
-                            <div>
-                              <div className="wallet-option-name 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,
-        )}
     </div>
   );
 }

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

@@ -0,0 +1,64 @@
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { ChevronRight } from "lucide-react";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+
+interface CryptoPaymentMethodDisplayProps {
+  paymentMethod: CryptoPaymentMethodType;
+  connectedAddress?: string | null;
+  connectedName?: string | null;
+}
+
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+export function CryptoPaymentMethodDisplay({
+  paymentMethod,
+  connectedAddress,
+  connectedName,
+}: CryptoPaymentMethodDisplayProps) {
+  if (paymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+    return (
+      <>
+        {connectedAddress ? (
+          <span className="text-as-tertiarry whitespace-nowrap">
+            {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress)}
+          </span>
+        ) : (
+          <span className="whitespace-nowrap">Connect wallet</span>
+        )}
+        <ChevronRight className="h-4 w-4 shrink-0" />
+      </>
+    );
+  }
+
+  if (paymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+    return (
+      <>
+        <span className="whitespace-nowrap">Global Account</span>
+        <ChevronRight className="h-4 w-4 shrink-0" />
+      </>
+    );
+  }
+
+  if (paymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+    return (
+      <>
+        <span className="whitespace-nowrap">Transfer crypto</span>
+        <ChevronRight className="h-4 w-4 shrink-0" />
+      </>
+    );
+  }
+
+  // NONE or any other case
+  return (
+    <>
+      <span className="whitespace-nowrap">Select payment method</span>
+      <ChevronRight className="h-4 w-4 shrink-0" />
+    </>
+  );
+}

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

@@ -4,8 +4,8 @@ import {
   ALL_CHAINS,
   getChainName,
   getPaymentUrl,
-  RELAY_ETH_ADDRESS,
   RELAY_SOLANA_MAINNET_CHAIN_ID,
+  ZERO_ADDRESS,
 } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/global-account/react";
@@ -121,7 +121,7 @@ export function InsufficientDepositPayment({
               value={getPaymentUrl(
                 order.globalAddress,
                 BigInt(depositDeficit),
-                order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
+                order.srcTokenAddress === ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
                 order.srcChain,
                 srcToken?.decimals,
               )}

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

@@ -8,8 +8,8 @@ import {
   getPaymentUrl,
   getStatusDisplay,
   isNativeToken,
-  RELAY_ETH_ADDRESS,
   RELAY_SOLANA_MAINNET_CHAIN_ID,
+  ZERO_ADDRESS,
 } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import {
@@ -327,16 +327,17 @@ export const OrderDetails = memo(function OrderDetails({
   // Main payment handler that triggers chain switch and payment
   const handlePayment = useCallback(async () => {
     console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
+    const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
     if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
-      // Use the existing depositDeficit calculation to determine amount to send
-      const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
+      // Solana payment flow
       await initiatePhantomTransfer({
         amountLamports: amountToSend,
         tokenAddress: order.srcTokenAddress,
         recipientAddress: order.globalAddress,
       });
     } else {
-      // Use unified payment process for both EOA and AA wallets
+      // EVM payment flow (EOA and AA wallets)
+      // Note: Hyperliquid is NOT supported as source chain, only as destination chain
       await handleUnifiedPaymentProcess();
     }
   }, [order, walletClient?.chain?.id, depositDeficit, handleUnifiedPaymentProcess, initiatePhantomTransfer]);
@@ -1039,7 +1040,7 @@ export const OrderDetails = memo(function OrderDetails({
                       value={getPaymentUrl(
                         order.globalAddress,
                         BigInt(order.srcAmount),
-                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
+                        order.srcTokenAddress === ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
                         order.srcChain,
                         srcToken?.decimals,
                       )}

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { ALL_CHAINS, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS, getAvailableChainIds } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button, useAccountWallet, useTokenBalancesByChain } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
@@ -9,7 +10,6 @@ import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { CheckCircle2, ChevronsUpDown } from "lucide-react";
 import { useMemo } from "react";
 import { ChainTokenIcon } from "./ChainTokenIcon";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function OrderToken({
   context,
@@ -44,7 +44,7 @@ export function OrderToken({
     // Get balance for the selected token
     let balance: bigint | null = null;
     if (token && wallet?.address) {
-      if (token.address === RELAY_ETH_ADDRESS) {
+      if (token.address === ZERO_ADDRESS) {
         // Native token
         const nativeToken = nativeTokens?.find(t => t.chainId === chainId);
         balance = nativeToken?.value ?? null;
@@ -69,12 +69,12 @@ export function OrderToken({
   return (
     <TokenSelector
       address={address}
-      chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      chainIdsFilter={getAvailableChainIds(context)}
       context={context}
       fromChainWalletVMSupported={true}
       isValidAddress={true}
       key={undefined}
-      lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      lockedChainIds={getAvailableChainIds(context)}
       multiWalletSupportEnabled={true}
       onAnalyticEvent={undefined}
       popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}

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

@@ -5,7 +5,7 @@ import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 import { formatUnits } from "viem";
 
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { getNativeRequired } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
@@ -163,12 +163,12 @@ export function OrderTokenAmount({
         {!hideTokenSelect && (
           <TokenSelector
             address={address}
-            chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+            chainIdsFilter={getAvailableChainIds(context)}
             context={context}
             fromChainWalletVMSupported={true}
             isValidAddress={true}
             key={`selector-${context}-${token.address}-${chainId}`}
-            lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+            lockedChainIds={getAvailableChainIds(context)}
             multiWalletSupportEnabled={true}
             onAnalyticEvent={undefined}
             popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}

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

@@ -4,7 +4,7 @@ import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
@@ -79,12 +79,12 @@ export function OrderTokenAmountFiat({
   return (
     <TokenSelector
       address={address}
-      chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      chainIdsFilter={getAvailableChainIds(context)}
       context={context}
       fromChainWalletVMSupported={true}
       isValidAddress={true}
       key={`selector-${context}-${token.address}-${chainId}`}
-      lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      lockedChainIds={getAvailableChainIds(context)}
       multiWalletSupportEnabled={true}
       onAnalyticEvent={undefined}
       popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}

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

@@ -4,12 +4,12 @@ import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } 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 "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function OrderTokenAmountFiat({
   disabled,
@@ -118,12 +118,12 @@ export function OrderTokenAmountFiat({
           {!hideTokenSelect && (
             <TokenSelector
               address={address}
-              chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+              chainIdsFilter={getAvailableChainIds(context)}
               context={context}
               fromChainWalletVMSupported={true}
               isValidAddress={true}
               key={`selector-${context}-${token.address}-${chainId}`}
-              lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+              lockedChainIds={getAvailableChainIds(context)}
               multiWalletSupportEnabled={true}
               onAnalyticEvent={undefined}
               popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}
@@ -173,12 +173,12 @@ export function OrderTokenAmountFiat({
         {!hideTokenSelect && (
           <TokenSelector
             address={address}
-            chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+            chainIdsFilter={getAvailableChainIds(context)}
             context={context}
             fromChainWalletVMSupported={true}
             isValidAddress={true}
             key={`selector-${context}-${token.address}-${chainId}`}
-            lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+            lockedChainIds={getAvailableChainIds(context)}
             multiWalletSupportEnabled={true}
             onAnalyticEvent={undefined}
             popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}

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

@@ -1,19 +1,17 @@
-import { STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend/constants";
+import { getStripePromise } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { OrderDetailsCollapsible, useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { ShinyButton, useB3, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { formatStripeAmount } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe, PaymentIntentResult, StripePaymentElementOptions } from "@stripe/stripe-js";
+import { PaymentIntentResult, StripePaymentElementOptions } from "@stripe/stripe-js";
 import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 import HowItWorks from "./HowItWorks";
 import PaymentMethodIcons from "./PaymentMethodIcons";
 
-const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
-
 interface PaymentStripeWeb2Props {
   order: components["schemas"]["Order"];
   stripePaymentIntentId: string;
@@ -38,7 +36,7 @@ export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaym
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
       <Elements
-        stripe={stripePromise}
+        stripe={getStripePromise()}
         options={{
           clientSecret: clientSecret || undefined,
           appearance: { theme: theme === "light" ? "stripe" : "night" },