@b3dotfun/sdk 0.0.83 → 0.0.84-alpha.0

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

@@ -1,6 +1,13 @@
 "use client";
 
-import { getDefaultToken, USDC_BASE } from "@b3dotfun/sdk/anyspend";
+import {
+  eqci,
+  getDefaultToken,
+  getHyperliquidUSDCToken,
+  HYPERLIQUID_CHAIN_ID,
+  USDC_BASE,
+  ZERO_ADDRESS,
+} from "@b3dotfun/sdk/anyspend";
 import {
   useAnyspendCreateOnrampOrder,
   useAnyspendCreateOrder,
@@ -224,14 +231,17 @@ function AnySpendInner({
   // State for destination chain/token selection
   const [selectedDstChainId, setSelectedDstChainId] = useState<number>(initialDstChainId);
   const defaultDstToken = isBuyMode
-    ? {
-        symbol: "",
-        chainId: destinationTokenChainId,
-        address: destinationTokenAddress,
-        name: "",
-        decimals: 18,
-        metadata: {},
-      }
+    ? // Special case: Hyperliquid uses zero address for USDC
+      destinationTokenChainId === HYPERLIQUID_CHAIN_ID && eqci(destinationTokenAddress, ZERO_ADDRESS)
+      ? getHyperliquidUSDCToken()
+      : {
+          symbol: "",
+          chainId: destinationTokenChainId,
+          address: destinationTokenAddress,
+          name: "",
+          decimals: 18,
+          metadata: {},
+        }
     : getDefaultToken(selectedDstChainId);
   const dstTokenFromUrl = useTokenFromUrl({
     defaultToken: defaultDstToken,
@@ -277,6 +287,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 && eqci(selectedDstToken.address, ZERO_ADDRESS)) {
+        appliedDstMetadataRef.current = true;
+        return;
+      }
+
       // Mark as applied
       appliedDstMetadataRef.current = true;
 
@@ -1126,12 +1142,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/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" },

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

@@ -1,12 +1,32 @@
+import { lazy, Suspense } from "react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import PaymentOneClick from "./PaymentOneClick";
-import PaymentStripeWeb2 from "./PaymentStripeWeb2";
+
+// Lazy load Stripe component to prevent loadStripe() from running at module level
+// This prevents EIP-6963 wallet detection events when Stripe is not used
+const PaymentStripeWeb2 = lazy(() => import("./PaymentStripeWeb2"));
 
 interface PaymentVendorUIProps {
   order: components["schemas"]["Order"];
   dstTokenSymbol: string;
 }
 
+function StripeLoadingFallback() {
+  return (
+    <div className="relative my-8 flex w-full flex-1 flex-col items-center justify-center">
+      <div className="bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8">
+        <div className="bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full">
+          <div className="text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        </div>
+        <div className="text-as-primary/70 text-center">
+          <div className="text-lg font-medium">Loading payment</div>
+          <div className="text-as-primary/50 mt-2 text-sm">Initializing secure payment form...</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function PaymentVendorUI({ order, dstTokenSymbol }: PaymentVendorUIProps) {
   const vendor = order.onrampMetadata?.vendor;
 
@@ -17,7 +37,11 @@ export default function PaymentVendorUI({ order, dstTokenSymbol }: PaymentVendor
 
   // Handle Stripe Web2 payment flow
   if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
-    return <PaymentStripeWeb2 order={order} stripePaymentIntentId={order.stripePaymentIntentId} />;
+    return (
+      <Suspense fallback={<StripeLoadingFallback />}>
+        <PaymentStripeWeb2 order={order} stripePaymentIntentId={order.stripePaymentIntentId} />
+      </Suspense>
+    );
   }
 
   // Return null for unsupported vendors

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, getChainName, getPaymentUrl, ZERO_ADDRESS } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { CopyToClipboard, ShinyButton, TextLoop, toast } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
@@ -206,7 +206,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                   value={getPaymentUrl(
                     order.globalAddress,
                     BigInt(order.srcAmount),
-                    order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress,
+                    order.srcTokenAddress === ZERO_ADDRESS ? "ETH" : order.srcTokenAddress,
                     order.srcChain,
                     srcToken?.decimals,
                   )}

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -1,11 +1,11 @@
-import { getChainName, STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend";
+import { getChainName } from "@b3dotfun/sdk/anyspend";
+import { getStripePromise } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { toast } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
 import { Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
@@ -13,8 +13,6 @@ import { useEffect, useRef, useState } from "react";
 import { formatUnits } from "viem";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 
-const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
-
 interface WebviewOnrampPaymentProps {
   srcAmountOnRamp: string;
   recipientAddress?: string;
@@ -309,7 +307,7 @@ function WebviewOnrampPaymentInner({
 
         {/* Stripe Elements */}
         <Elements
-          stripe={stripePromise}
+          stripe={getStripePromise()}
           options={{
             clientSecret,
             appearance: {

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

@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions";
 export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
+export * from "./useHyperliquidTransfer";
 export * from "./useRecipientAddressState";
 export * from "./useSigMint";
 export * from "./useStripeClientSecret";

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

@@ -1,22 +1,19 @@
-import { useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { useConnectedWallets } from "thirdweb/react";
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 
 /**
  * Hook that provides connected user's address, profile, and cleaned display name
  * Combines logic for getting connected address from either global account or thirdweb wallets
  */
-export function useConnectedUserProfile() {
-  const { address: globalAddress } = useAccountWallet();
-  const connectedWallets = useConnectedWallets();
-
-  // Get connected address from global account or first connected wallet
-  const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+export function useConnectedUserProfile(selectedCryptoPaymentMethod?: CryptoPaymentMethodType) {
+  const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
 
   // Fetch profile data for the connected address with cleaned name
-  const connectedProfile = useProfile({ address: connectedAddress });
+  const connectedProfile = useProfile({ address: walletAddress });
 
   return {
-    address: connectedAddress,
+    address: walletAddress,
     profile: connectedProfile,
     name: connectedProfile.data?.name,
     isLoading: connectedProfile.isLoading,