@b3dotfun/sdk 0.0.83-alpha.5 → 0.0.83-alpha.7

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -114,14 +114,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // State for destination chain/token selection
     const [selectedDstChainId, setSelectedDstChainId] = (0, react_4.useState)(initialDstChainId);
     const defaultDstToken = isBuyMode
-        ? {
-            symbol: "",
-            chainId: destinationTokenChainId,
-            address: destinationTokenAddress,
-            name: "",
-            decimals: 18,
-            metadata: {},
-        }
+        ? // Special case: Hyperliquid uses zero address for USDC
+            destinationTokenChainId === anyspend_1.HYPERLIQUID_CHAIN_ID && (0, anyspend_1.eqci)(destinationTokenAddress, anyspend_1.ZERO_ADDRESS)
+                ? (0, anyspend_1.getHyperliquidUSDCToken)()
+                : {
+                    symbol: "",
+                    chainId: destinationTokenChainId,
+                    address: destinationTokenAddress,
+                    name: "",
+                    decimals: 18,
+                    metadata: {},
+                }
         : (0, anyspend_1.getDefaultToken)(selectedDstChainId);
     const dstTokenFromUrl = (0, react_2.useTokenFromUrl)({
         defaultToken: defaultDstToken,
@@ -159,6 +162,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // Update destination token with metadata
     (0, react_4.useEffect)(() => {
         if (selectedDstToken && dstTokenMetadata && !appliedDstMetadataRef.current) {
+            // Skip metadata enhancement for Hyperliquid USDC - we already have correct metadata from getHyperliquidUSDCToken()
+            if (selectedDstToken.chainId === anyspend_1.HYPERLIQUID_CHAIN_ID && (0, anyspend_1.eqci)(selectedDstToken.address, anyspend_1.ZERO_ADDRESS)) {
+                appliedDstMetadataRef.current = true;
+                return;
+            }
             // Mark as applied
             appliedDstMetadataRef.current = true;
             const enhancedToken = {

package/dist/cjs/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -5,19 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PaymentStripeWeb2;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("../../../../anyspend/constants");
+const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_1 = require("../../../../anyspend/react");
 const react_2 = require("../../../../global-account/react");
 const number_1 = require("../../../../shared/utils/number");
-const payment_utils_1 = require("../../../../shared/utils/payment.utils");
+const payment_utils_2 = require("../../../../shared/utils/payment.utils");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
-const stripe_js_1 = require("@stripe/stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("react");
 const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
 const HowItWorks_1 = __importDefault(require("./HowItWorks"));
 const PaymentMethodIcons_1 = __importDefault(require("./PaymentMethodIcons"));
-const stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
 function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
     const { theme } = (0, react_2.useB3)();
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
@@ -28,7 +26,7 @@ function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
     if (stripeClientSecretError) {
         return (0, jsx_runtime_1.jsx)(StripeErrorState, { error: stripeClientSecretError.message });
     }
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: stripePromise, options: {
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(), options: {
                 clientSecret: clientSecret || undefined,
                 appearance: { theme: theme === "light" ? "stripe" : "night" },
             }, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }) }));
@@ -61,7 +59,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             try {
                 const paymentIntent = await stripe.retrievePaymentIntent(clientSecret);
                 const amount = paymentIntent.paymentIntent?.amount
-                    ? (0, payment_utils_1.formatStripeAmount)(paymentIntent.paymentIntent.amount)
+                    ? (0, payment_utils_2.formatStripeAmount)(paymentIntent.paymentIntent.amount)
                     : null;
                 setAmount(amount);
             }

package/dist/cjs/anyspend/react/components/common/PaymentVendorUI.js

@@ -1,12 +1,51 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PaymentVendorUI;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const PaymentOneClick_1 = __importDefault(require("./PaymentOneClick"));
-const PaymentStripeWeb2_1 = __importDefault(require("./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 = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require("./PaymentStripeWeb2"))));
+function StripeLoadingFallback() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/70 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-medium", children: "Loading payment" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Initializing secure payment form..." })] })] }) }));
+}
 function PaymentVendorUI({ order, dstTokenSymbol }) {
     const vendor = order.onrampMetadata?.vendor;
     // Handle one-click payment flows (Coinbase, Stripe redirect)
@@ -15,7 +54,7 @@ function PaymentVendorUI({ order, dstTokenSymbol }) {
     }
     // Handle Stripe Web2 payment flow
     if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
-        return (0, jsx_runtime_1.jsx)(PaymentStripeWeb2_1.default, { order: order, stripePaymentIntentId: order.stripePaymentIntentId });
+        return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(StripeLoadingFallback, {}), children: (0, jsx_runtime_1.jsx)(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId }) }));
     }
     // Return null for unsupported vendors
     return null;

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebviewOnrampPayment = WebviewOnrampPayment;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
+const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_1 = require("../../../../anyspend/react");
 const react_2 = require("../../../../global-account/react");
 const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
-const stripe_js_1 = require("@stripe/stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
 const viem_1 = require("viem");
 const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
-const stripePromise = (0, stripe_js_1.loadStripe)(anyspend_1.STRIPE_CONFIG.publishableKey);
 function WebviewOnrampPayment(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(WebviewOnrampPaymentInner, { ...props }) }));
@@ -169,7 +168,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
     if (createdOrder && clientSecret) {
         return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col divide-y", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Receiving" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
                                                                 ? Number((0, viem_1.formatUnits)(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
-                                                                : "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: stripePromise, options: {
+                                                                : "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(), options: {
                         clientSecret,
                         appearance: {
                             theme: "flat",

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

@@ -1,4 +1,5 @@
 import { components } from "../../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/dist/cjs/shared/utils/payment.utils.js

@@ -1,10 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStripePromise = getStripePromise;
 exports.getVendorDisplayName = getVendorDisplayName;
 exports.getPaymentMethodDescription = getPaymentMethodDescription;
 exports.formatStripeAmount = formatStripeAmount;
 exports.generateReturnUrl = generateReturnUrl;
 const constants_1 = require("../../anyspend/constants");
+const stripe_js_1 = require("@stripe/stripe-js");
+let stripePromise = null;
+function getStripePromise() {
+    if (!stripePromise) {
+        stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
+    }
+    return stripePromise;
+}
 function getVendorDisplayName(vendor) {
     switch (vendor) {
         case "coinbase":

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getDefaultToken, HYPERLIQUID_CHAIN_ID, USDC_BASE } from "../../../anyspend/index.js";
+import { eqci, getDefaultToken, getHyperliquidUSDCToken, HYPERLIQUID_CHAIN_ID, USDC_BASE, ZERO_ADDRESS, } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TabsPrimitive, toast, TransitionPanel, useAccountWallet, useB3, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import BottomNavigation from "../../../global-account/react/components/ManageAccount/BottomNavigation.js";
@@ -107,14 +107,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // State for destination chain/token selection
     const [selectedDstChainId, setSelectedDstChainId] = useState(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,
@@ -152,6 +155,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // 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;
             const enhancedToken = {

package/dist/esm/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -1,17 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { STRIPE_CONFIG } from "../../../../anyspend/constants/index.js";
+import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
 import { OrderDetailsCollapsible, useStripeClientSecret } from "../../../../anyspend/react/index.js";
 import { ShinyButton, useB3, useModalStore, useProfile } from "../../../../global-account/react/index.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { formatStripeAmount } from "../../../../shared/utils/payment.utils.js";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
 import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
 import HowItWorks from "./HowItWorks.js";
 import PaymentMethodIcons from "./PaymentMethodIcons.js";
-const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
 export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
     const { theme } = useB3();
     const fingerprintConfig = getFingerprintConfig();
@@ -22,7 +20,7 @@ export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaym
     if (stripeClientSecretError) {
         return _jsx(StripeErrorState, { error: stripeClientSecretError.message });
     }
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(Elements, { stripe: stripePromise, options: {
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(Elements, { stripe: getStripePromise(), options: {
                 clientSecret: clientSecret || undefined,
                 appearance: { theme: theme === "light" ? "stripe" : "night" },
             }, children: _jsx(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }) }));

package/dist/esm/anyspend/react/components/common/PaymentVendorUI.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
 import PaymentOneClick from "./PaymentOneClick.js";
-import PaymentStripeWeb2 from "./PaymentStripeWeb2.js";
+// 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"));
+function StripeLoadingFallback() {
+    return (_jsx("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: _jsxs("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [_jsx("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), _jsxs("div", { className: "text-as-primary/70 text-center", children: [_jsx("div", { className: "text-lg font-medium", children: "Loading payment" }), _jsx("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Initializing secure payment form..." })] })] }) }));
+}
 export default function PaymentVendorUI({ order, dstTokenSymbol }) {
     const vendor = order.onrampMetadata?.vendor;
     // Handle one-click payment flows (Coinbase, Stripe redirect)
@@ -9,7 +15,7 @@ export default function PaymentVendorUI({ order, dstTokenSymbol }) {
     }
     // Handle Stripe Web2 payment flow
     if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
-        return _jsx(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId });
+        return (_jsx(Suspense, { fallback: _jsx(StripeLoadingFallback, {}), children: _jsx(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId }) }));
     }
     // Return null for unsupported vendors
     return null;

package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getChainName, STRIPE_CONFIG } from "../../../../anyspend/index.js";
+import { getChainName } from "../../../../anyspend/index.js";
+import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
 import { toast } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 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";
 import { formatUnits } from "viem";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
-const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
 export function WebviewOnrampPayment(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(WebviewOnrampPaymentInner, { ...props }) }));
@@ -163,7 +162,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
     if (createdOrder && clientSecret) {
         return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "flex flex-col divide-y", children: [_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Receiving" }), _jsxs("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && (_jsx("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), _jsxs("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
                                                                 ? Number(formatUnits(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
-                                                                : "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Network" }), _jsx("span", { className: "font-medium", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Recipient" }), _jsx("span", { className: "font-medium", children: centerTruncate(recipientAddress) })] })), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "You Pay" }), _jsxs("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), _jsx(Elements, { stripe: stripePromise, options: {
+                                                                : "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Network" }), _jsx("span", { className: "font-medium", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Recipient" }), _jsx("span", { className: "font-medium", children: centerTruncate(recipientAddress) })] })), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "You Pay" }), _jsxs("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), _jsx(Elements, { stripe: getStripePromise(), options: {
                         clientSecret,
                         appearance: {
                             theme: "flat",

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

@@ -1,4 +1,5 @@
 import { components } from "../../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/dist/esm/shared/utils/payment.utils.js

@@ -1,4 +1,12 @@
-import { VENDOR_DISPLAY_NAMES } from "../../anyspend/constants/index.js";
+import { STRIPE_CONFIG, VENDOR_DISPLAY_NAMES } from "../../anyspend/constants/index.js";
+import { loadStripe } from "@stripe/stripe-js";
+let stripePromise = null;
+export function getStripePromise() {
+    if (!stripePromise) {
+        stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
+    }
+    return stripePromise;
+}
 export function getVendorDisplayName(vendor) {
     switch (vendor) {
         case "coinbase":

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-alpha.5",
+  "version": "0.0.83-alpha.7",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -1,6 +1,13 @@
 "use client";
 
-import { getDefaultToken, HYPERLIQUID_CHAIN_ID, 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;
 

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/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/shared/utils/payment.utils.ts

@@ -1,5 +1,14 @@
-import { VENDOR_DISPLAY_NAMES } from "@b3dotfun/sdk/anyspend/constants";
+import { STRIPE_CONFIG, VENDOR_DISPLAY_NAMES } from "@b3dotfun/sdk/anyspend/constants";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { loadStripe } from "@stripe/stripe-js";
+
+let stripePromise: ReturnType<typeof loadStripe> | null = null;
+export function getStripePromise() {
+  if (!stripePromise) {
+    stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
+  }
+  return stripePromise;
+}
 
 export function getVendorDisplayName(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string {
   switch (vendor) {