@b3dotfun/sdk 0.0.83 → 0.0.84-alpha.1

package/dist/types/anyspend/utils/chain.d.ts

@@ -1,6 +1,6 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Account, Chain, PublicClient, Transport, WalletClient } from "viem";
-import { ChainType, IBaseChain, IEVMChain, ISolanaChain } from "../types/chain";
+import { ChainType, IBaseChain, IEVMChain, IHyperliquidChain, ISolanaChain } from "../types/chain";
 export declare const hyperEVM: {
     blockExplorers: {
         readonly default: {
@@ -42,8 +42,10 @@ export declare const hyperEVM: {
 export declare const EVM_MAINNET: Record<number, IEVMChain>;
 export declare const EVM_TESTNET: Record<number, IEVMChain>;
 export declare const SOLANA_MAINNET: ISolanaChain;
+export declare const HYPERLIQUID_MAINNET: IHyperliquidChain;
 export declare const EVM_CHAINS: Record<number, IEVMChain>;
 export declare const SOLANA_CHAINS: Record<number, ISolanaChain>;
+export declare const HYPERLIQUID_CHAINS: Record<number, IHyperliquidChain>;
 export declare const ALL_CHAINS: Record<number, IBaseChain>;
 export declare function getSolanaChains(network: "mainnet" | "testnet"): ISolanaChain;
 export declare function getAllEvmChains(network: "mainnet" | "testnet"): Record<number, IEVMChain>;
@@ -63,3 +65,20 @@ export declare function getExplorerAddressUrl(chainId: number, address: string):
 export declare function getMulticall3Address(chainId: number): string;
 export declare function getNativeToken(chainId: number): components["schemas"]["Token"];
 export declare function isEvmChain(chainId: number): boolean;
+export declare function isHyperliquidChain(chainId: number): boolean;
+export declare function getHyperliquidChain(chainId: number): IHyperliquidChain;
+/**
+ * Get available chain IDs for AnySpend based on context (source or destination).
+ * Filters out chains that shouldn't be available for the given context.
+ *
+ * @param context - "from" for source chains, "to" for destination chains
+ * @returns Array of available chain IDs
+ *
+ * @example
+ * // Get source chains (excludes Hyperliquid)
+ * const sourceChains = getAvailableChainIds("from") // [1, 8453, 137, ...]
+ *
+ * // Get destination chains (includes Hyperliquid)
+ * const destChains = getAvailableChainIds("to") // [1, 8453, 137, ..., 1337]
+ */
+export declare function getAvailableChainIds(context: "from" | "to"): number[];

package/dist/types/anyspend/utils/token.d.ts

@@ -1,6 +1,12 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 export declare const HYPERLIQUID_CHAIN_ID = 1337;
 export declare const HYPEREVM_CHAIN_ID = 999;
+/**
+ * Hyperliquid uses a special 34-character USDC address format (0x + 32 hex digits)
+ * instead of the standard 42-character EVM address format.
+ * This is required by Relay SDK for Hyperliquid integration.
+ */
+export declare const HYPERLIQUID_USDC_ADDRESS = "0x00000000000000000000000000000000";
 export declare function isNativeToken(address: string): boolean;
 export declare function getSolanaToken(): components["schemas"]["Token"];
 export declare function getEthToken(chainId: number): components["schemas"]["Token"];
@@ -8,3 +14,4 @@ export declare function getPolToken(): components["schemas"]["Token"];
 export declare function getBnbToken(): components["schemas"]["Token"];
 export declare function getAvaxToken(): components["schemas"]["Token"];
 export declare function getHyperEVMNativeToken(): components["schemas"]["Token"];
+export declare function getHyperliquidUSDCToken(): components["schemas"]["Token"];

package/dist/types/global-account/react/hooks/index.d.ts

@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics";
 export { useAuthentication } from "./useAuthentication";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
-export { useBestTransactionPath } from "./useBestTransactionPath";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
 export * from "./useClaim";
 export { useClient } from "./useClient";

package/dist/types/global-account/react/hooks/useFirstEOA.d.ts

@@ -7454,12 +7454,12 @@ export declare function useFirstEOA(chain?: {
             [x: `bytes18[${string}]`]: undefined;
             [x: `bytes6[${string}]`]: undefined;
             [x: `bytes9[${string}]`]: undefined;
+            [x: `bytes8[${string}]`]: undefined;
             [x: `bytes2[${string}]`]: undefined;
             [x: `bytes3[${string}]`]: undefined;
             [x: `bytes4[${string}]`]: undefined;
             [x: `bytes5[${string}]`]: undefined;
             [x: `bytes7[${string}]`]: undefined;
-            [x: `bytes8[${string}]`]: undefined;
             [x: `bytes10[${string}]`]: undefined;
             [x: `bytes11[${string}]`]: undefined;
             [x: `bytes12[${string}]`]: undefined;
@@ -7556,12 +7556,12 @@ export declare function useFirstEOA(chain?: {
             bytes18?: undefined;
             bytes6?: undefined;
             bytes9?: undefined;
+            bytes8?: undefined;
             bytes2?: undefined;
             bytes3?: undefined;
             bytes4?: undefined;
             bytes5?: undefined;
             bytes7?: undefined;
-            bytes8?: undefined;
             bytes10?: undefined;
             bytes11?: undefined;
             bytes12?: undefined;

package/dist/types/shared/utils/payment.utils.d.ts

@@ -1,4 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+export declare function getStripePromise(): Promise<import("@stripe/stripe-js").Stripe | null>;
 export declare function getVendorDisplayName(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
 export declare function getPaymentMethodDescription(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
 export declare function formatStripeAmount(amount: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.83",
+  "version": "0.0.84-alpha.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/constants/index.ts

@@ -3,7 +3,7 @@ import { components } from "../types/api";
 
 export const ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
 
-export const RELAY_ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
+export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const RELAY_SOL_ADDRESS = "11111111111111111111111111111111";
 
 export const RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;

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

@@ -1,6 +1,14 @@
 "use client";
 
-import { getDefaultToken, USDC_BASE } from "@b3dotfun/sdk/anyspend";
+import {
+  eqci,
+  getDefaultToken,
+  getHyperliquidUSDCToken,
+  HYPERLIQUID_CHAIN_ID,
+  HYPERLIQUID_USDC_ADDRESS,
+  USDC_BASE,
+  ZERO_ADDRESS,
+} from "@b3dotfun/sdk/anyspend";
 import {
   useAnyspendCreateOnrampOrder,
   useAnyspendCreateOrder,
@@ -223,15 +231,22 @@ function AnySpendInner({
 
   // State for destination chain/token selection
   const [selectedDstChainId, setSelectedDstChainId] = useState<number>(initialDstChainId);
+  // Helper to check if address is Hyperliquid USDC (supports both 34-char and 42-char formats)
+  const isHyperliquidUSDCAddress = (address?: string) =>
+    eqci(address, HYPERLIQUID_USDC_ADDRESS) || eqci(address, ZERO_ADDRESS);
+
   const defaultDstToken = isBuyMode
-    ? {
-        symbol: "",
-        chainId: destinationTokenChainId,
-        address: destinationTokenAddress,
-        name: "",
-        decimals: 18,
-        metadata: {},
-      }
+    ? // Special case: Hyperliquid uses zero address for USDC
+      destinationTokenChainId === HYPERLIQUID_CHAIN_ID && isHyperliquidUSDCAddress(destinationTokenAddress)
+      ? getHyperliquidUSDCToken()
+      : {
+          symbol: "",
+          chainId: destinationTokenChainId,
+          address: destinationTokenAddress,
+          name: "",
+          decimals: 18,
+          metadata: {},
+        }
     : getDefaultToken(selectedDstChainId);
   const dstTokenFromUrl = useTokenFromUrl({
     defaultToken: defaultDstToken,
@@ -277,6 +292,12 @@ function AnySpendInner({
   // Update destination token with metadata
   useEffect(() => {
     if (selectedDstToken && dstTokenMetadata && !appliedDstMetadataRef.current) {
+      // Skip metadata enhancement for Hyperliquid USDC - we already have correct metadata from getHyperliquidUSDCToken()
+      if (selectedDstToken.chainId === HYPERLIQUID_CHAIN_ID && isHyperliquidUSDCAddress(selectedDstToken.address)) {
+        appliedDstMetadataRef.current = true;
+        return;
+      }
+
       // Mark as applied
       appliedDstMetadataRef.current = true;
 
@@ -1126,12 +1147,18 @@ function AnySpendInner({
               "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
               isBuyMode && "top-[calc(50%+56px)] cursor-default",
               activeTab === "fiat" && "hidden",
+              selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
             )}
             onClick={() => {
               if (activeTab === "fiat" || isBuyMode) {
                 return;
               }
 
+              // Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
+              if (selectedDstChainId === HYPERLIQUID_CHAIN_ID) {
+                return;
+              }
+
               // Swap chain selections
               const tempSrcChainId = selectedSrcChainId;
               const tempDstChainId = selectedDstChainId;

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

@@ -1,5 +1,5 @@
 import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "@b3dotfun/sdk/anyspend";
-import { RELAY_ETH_ADDRESS, USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
+import { USDC_BASE, ZERO_ADDRESS } from "@b3dotfun/sdk/anyspend/constants";
 import {
   CreateOrderParams,
   useAnyspendCreateOnrampOrder,
@@ -48,6 +48,7 @@ import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodStat
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
+import { CryptoPaymentMethodDisplay } from "./common/CryptoPaymentMethodDisplay";
 import { FeeBreakDown } from "./common/FeeBreakDown";
 import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
@@ -295,7 +296,7 @@ function AnySpendCustomInner({
     // First check native tokens (ETH, etc.)
     const nativeToken = nativeTokens?.find(t => t.chainId === srcChainId && Number(t.displayValue) > 0);
     if (nativeToken) {
-      const matchingToken = tokenList.find(t => t.address === RELAY_ETH_ADDRESS);
+      const matchingToken = tokenList.find(t => t.address === ZERO_ADDRESS);
       if (matchingToken) return matchingToken;
     }
 
@@ -469,7 +470,7 @@ function AnySpendCustomInner({
 
   const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
 
-  const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
+  const { address: connectedAddress, name: connectedName } = useConnectedUserProfile(effectiveCryptoPaymentMethod);
   const recipientProfile = useProfile({ address: recipientAddress });
   const recipientName = recipientProfile.data?.name;
 
@@ -951,28 +952,11 @@ function AnySpendCustomInner({
                   className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
                 >
-                  {effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-                    <>
-                      {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" />
-                    </>
-                  ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-                    <>
-                      <span className="whitespace-nowrap">Transfer crypto</span>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : (
-                    <>
-                      <span className="whitespace-nowrap">Select payment method</span>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  )}
+                  <CryptoPaymentMethodDisplay
+                    paymentMethod={effectiveCryptoPaymentMethod}
+                    connectedAddress={connectedAddress}
+                    connectedName={connectedName}
+                  />
                 </button>
               </motion.div>
 

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

@@ -1,13 +1,12 @@
 import { useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
-import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
-import { ChevronRight, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { components } from "../../../types/api";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { CryptoPaymentMethodDisplay } from "./CryptoPaymentMethodDisplay";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { TokenBalance } from "./TokenBalance";
 
@@ -103,33 +102,11 @@ export function CryptoPaySection({
           className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
           onClick={onSelectCryptoPaymentMethod}
         >
-          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-            <>
-              {walletAddress ? (
-                <div className="flex items-center gap-1">
-                  {connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "")}
-                </div>
-              ) : (
-                "Connect wallet"
-              )}
-              <ChevronRight className="h-4 w-4" />
-            </>
-          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
-            <>
-              Global Account
-              <ChevronRight className="h-4 w-4" />
-            </>
-          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-            <>
-              Transfer crypto
-              <ChevronRight className="h-4 w-4" />
-            </>
-          ) : (
-            <>
-              Select payment method
-              <ChevronRight className="h-4 w-4" />
-            </>
-          )}
+          <CryptoPaymentMethodDisplay
+            paymentMethod={selectedCryptoPaymentMethod}
+            connectedAddress={walletAddress}
+            connectedName={connectedName}
+          />
         </button>
       </div>
       <OrderTokenAmount

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/CryptoReceiveSection.tsx

@@ -1,3 +1,4 @@
+import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
@@ -94,11 +95,21 @@ export function CryptoReceiveSection({
           <div className="text-as-primary text-2xl font-bold">{dstAmount || "0"}</div>
           <div className="bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3">
             {(dstTokenLogoURI || dstToken.metadata?.logoURI) && (
-              <img
-                src={dstTokenLogoURI || dstToken.metadata?.logoURI}
-                alt={dstTokenSymbol || dstToken.symbol}
-                className="h-8 w-8 rounded-full"
-              />
+              <div className="relative">
+                <img
+                  src={dstTokenLogoURI || dstToken.metadata?.logoURI}
+                  alt={dstTokenSymbol || dstToken.symbol}
+                  className="h-8 w-8 rounded-full"
+                />
+                {/* Chain logo overlay */}
+                {ALL_CHAINS[dstToken.chainId]?.logoUrl && (
+                  <img
+                    src={ALL_CHAINS[dstToken.chainId].logoUrl}
+                    alt="Chain"
+                    className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-white"
+                  />
+                )}
+              </div>
             )}
             <span className="text-as-brand text-lg font-bold">{dstTokenSymbol || dstToken.symbol}</span>
           </div>

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" },