@b3dotfun/sdk 0.0.12 → 0.0.13-alpha.1

package/dist/cjs/global-account/react/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useURLParams = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalance = exports.useSiwe = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfilePreference = exports.useProfile = exports.useOneBalance = exports.useOnchainName = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGetGeo = exports.useGetAllTWSigners = exports.useExchangeRate = exports.useConnect = exports.useClaim = exports.useChainSwitchWithAction = exports.useBsmntProfile = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = void 0;
+exports.useURLParams = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalance = exports.useSiwe = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfilePreference = exports.useProfile = exports.useOneBalance = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGetGeo = exports.useGetAllTWSigners = exports.useExchangeRate = exports.useConnect = exports.useClaim = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = void 0;
 var useAccountAssets_1 = require("./useAccountAssets");
 Object.defineProperty(exports, "useAccountAssets", { enumerable: true, get: function () { return useAccountAssets_1.useAccountAssets; } });
 var useAccountWallet_1 = require("./useAccountWallet");
@@ -15,8 +15,6 @@ var useB3EnsName_1 = require("./useB3EnsName");
 Object.defineProperty(exports, "useB3EnsName", { enumerable: true, get: function () { return useB3EnsName_1.useB3EnsName; } });
 var useBestTransactionPath_1 = require("./useBestTransactionPath");
 Object.defineProperty(exports, "useBestTransactionPath", { enumerable: true, get: function () { return useBestTransactionPath_1.useBestTransactionPath; } });
-var useBsmntProfile_1 = require("./useBsmntProfile");
-Object.defineProperty(exports, "useBsmntProfile", { enumerable: true, get: function () { return useBsmntProfile_1.useBsmntProfile; } });
 var useChainSwitchWithAction_1 = require("./useChainSwitchWithAction");
 Object.defineProperty(exports, "useChainSwitchWithAction", { enumerable: true, get: function () { return useChainSwitchWithAction_1.useChainSwitchWithAction; } });
 var useClaim_1 = require("./useClaim");
@@ -42,8 +40,6 @@ Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: functio
 var useNativeBalance_1 = require("./useNativeBalance");
 Object.defineProperty(exports, "useNativeBalance", { enumerable: true, get: function () { return useNativeBalance_1.useNativeBalance; } });
 Object.defineProperty(exports, "useNativeBalanceFromRPC", { enumerable: true, get: function () { return useNativeBalance_1.useNativeBalanceFromRPC; } });
-var useOnchainName_1 = require("./useOnchainName");
-Object.defineProperty(exports, "useOnchainName", { enumerable: true, get: function () { return useOnchainName_1.useOnchainName; } });
 var useOneBalance_1 = require("./useOneBalance");
 Object.defineProperty(exports, "useOneBalance", { enumerable: true, get: function () { return useOneBalance_1.useOneBalance; } });
 var useProfile_1 = require("./useProfile");

package/dist/cjs/global-account/react/hooks/useAccountWallet.js

@@ -6,7 +6,6 @@ const constants_1 = require("../../../shared/constants");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const in_app_1 = require("thirdweb/wallets/in-app");
-const useBsmntProfile_1 = require("./useBsmntProfile");
 function useLastAuthProvider() {
     const [lastAuthProvider, setLastAuthProvider] = (0, react_2.useState)(null);
     (0, react_2.useEffect)(() => {
@@ -32,8 +31,8 @@ function useAccountWallet() {
     const smartWalletIcon = lastAuthProvider && !connectedEOAWallet
         ? in_app_1.socialIcons[lastAuthProvider]
         : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
-    const { data: profileData } = (0, useBsmntProfile_1.useBsmntProfile)({ address: account?.address });
-    const ensName = profileData?.username?.replace(/\.b3\.fun/g, "");
+    const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
+    const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
     const avatarUrl = profileData?.avatar;
     const res = (0, react_2.useMemo)(() => ({
         wallet: {

package/dist/cjs/global-account/react/hooks/useProfile.d.ts

@@ -21,6 +21,13 @@ export interface PreferenceRequestBody {
     signer: string;
     timestamp: number;
 }
+export interface DisplayNameRequestBody {
+    key: string;
+    displayName: string;
+    signature: string;
+    signer: string;
+    timestamp: number;
+}
 export declare function useProfile({ address, name, fresh, }: {
     address?: string;
     name?: string;
@@ -35,4 +42,24 @@ export declare function useProfilePreference(): {
         success: boolean;
     }>;
 };
+export declare function useDisplayName(): {
+    setName: (key: string, displayName: string, signerAddress: string, signMessage: (message: string) => Promise<string>) => Promise<{
+        success: boolean;
+    }>;
+};
+export declare function useProfileSettings(): {
+    setPreference: (key: string, preferredType: string, signerAddress: string, signMessage: (message: string) => Promise<string>) => Promise<{
+        success: boolean;
+    }>;
+    setDisplayName: (key: string, displayName: string, signerAddress: string, signMessage: (message: string) => Promise<string>) => Promise<{
+        success: boolean;
+    }>;
+    updateSettings: (key: string, signerAddress: string, signMessage: (message: string) => Promise<string>, settings: {
+        preferredType?: string;
+        displayName?: string;
+    }) => Promise<{
+        preference?: any;
+        displayName?: any;
+    }>;
+};
 export default useProfile;

package/dist/cjs/global-account/react/hooks/useProfile.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProfile = useProfile;
 exports.useProfilePreference = useProfilePreference;
+exports.useDisplayName = useDisplayName;
+exports.useProfileSettings = useProfileSettings;
 const react_query_1 = require("@tanstack/react-query");
 const PROFILES_API_URL = "https://profiles.b3.fun";
 async function fetchProfile({ address, name, fresh = false, }) {
@@ -40,6 +42,25 @@ async function setProfilePreference({ key, preferredType, signature, signer, tim
     }
     return response.json();
 }
+async function setDisplayName({ key, displayName, signature, signer, timestamp, }) {
+    const response = await fetch(`${PROFILES_API_URL}/display-name`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            key,
+            displayName,
+            signature,
+            signer,
+            timestamp,
+        }),
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to set display name: ${response.statusText}`);
+    }
+    return response.json();
+}
 function useProfile({ address, name, fresh = false, }, options) {
     return (0, react_query_1.useQuery)({
         queryKey: ["profile", address || name, fresh],
@@ -69,4 +90,48 @@ function useProfilePreference() {
     };
     return { setPreference };
 }
+function useDisplayName() {
+    const setName = async (key, displayName, signerAddress, signMessage) => {
+        const timestamp = Math.floor(Date.now() / 1000);
+        const message = `SetDisplayName:${key}:${displayName}:${timestamp}`;
+        try {
+            const signature = await signMessage(message);
+            return setDisplayName({
+                key,
+                displayName,
+                signature,
+                signer: signerAddress,
+                timestamp,
+            });
+        }
+        catch (error) {
+            throw new Error(`Failed to set display name: ${error}`);
+        }
+    };
+    return { setName };
+}
+function useProfileSettings() {
+    const { setPreference } = useProfilePreference();
+    const { setName } = useDisplayName();
+    const updateSettings = async (key, signerAddress, signMessage, settings) => {
+        const results = {};
+        try {
+            if (settings.preferredType) {
+                results.preference = await setPreference(key, settings.preferredType, signerAddress, signMessage);
+            }
+            if (settings.displayName) {
+                results.displayName = await setName(key, settings.displayName, signerAddress, signMessage);
+            }
+            return results;
+        }
+        catch (error) {
+            throw new Error(`Failed to update profile settings: ${error}`);
+        }
+    };
+    return {
+        setPreference,
+        setDisplayName: setName,
+        updateSettings,
+    };
+}
 exports.default = useProfile;

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, } from "../../../anyspend/react/index.js";
-import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useOnchainName, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number.js";
@@ -299,11 +299,8 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
             tradeType: "EXACT_INPUT",
             amount: srcAmountOnrampInWei,
         });
-    // Replace the old ENS lookup with our new hooks
-    const { name: recipientName } = useOnchainName(recipientAddress);
-    // const { name: walletName } = useOnchainName(globalAddress);
-    // Batch lookup for custom recipients
-    // const { names: customRecipientNames } = useOnchainNames(customRecipients.map(r => r.address));
+    const recipientProfile = useProfile({ address: recipientAddress });
+    const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
     // Load custom recipients from local storage on mount
     useEffect(() => {
         try {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { eqci, getDefaultToken } from "../../../anyspend/index.js";
 import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Badge, Button, Dialog, DialogContent, Input, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useBsmntProfile, useHasMounted, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
+import { Badge, Button, Dialog, DialogContent, Input, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/index.js";
 import centerTruncate from "../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
@@ -96,8 +96,8 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const [customRecipientAddress, setCustomRecipientAddress] = useState(recipientAddressProps);
     // Update recipient logic to use custom recipient
     const recipientAddress = customRecipientAddress || currentWallet.address;
-    const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
-    const recipientEnsName = recipientPropsProfile.data?.username?.replace(/\.b3\.fun/g, "");
+    const recipientPropsProfile = useProfile({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.name?.replace(/\.b3\.fun/g, "");
     const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = useState(loadOrder);
     const [srcChainId, setSrcChainId] = useState(isMainnet ? base.id : baseSepolia.id);

package/dist/esm/anyspend/react/components/AnySpendFingerprintWrapper.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+interface FingerprintConfig {
+    apiKey: string;
+    endpoint?: string;
+    scriptUrlPattern?: string;
+}
+interface AnySpendFingerprintWrapperProps {
+    children: ReactNode;
+    fingerprint?: FingerprintConfig;
+}
+/**
+ * Internal wrapper that only initializes FingerprintJS when AnySpend components are actually used.
+ * This prevents unnecessary fingerprinting of users who don't interact with AnySpend.
+ */
+export declare function AnySpendFingerprintWrapper({ children, fingerprint }: AnySpendFingerprintWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function getFingerprintConfig(): FingerprintConfig | undefined;
+export {};

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

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { FingerprintJSPro, FpjsProvider } from "@fingerprintjs/fingerprintjs-pro-react";
+/**
+ * Internal wrapper that only initializes FingerprintJS when AnySpend components are actually used.
+ * This prevents unnecessary fingerprinting of users who don't interact with AnySpend.
+ */
+export function AnySpendFingerprintWrapper({ children, fingerprint }) {
+    // If no fingerprint config is provided, render children without fingerprinting
+    if (!fingerprint?.apiKey) {
+        console.warn("No Fingerprint API key provided. Fingerprinting will be disabled.");
+        return _jsx(_Fragment, { children: children });
+    }
+    // Ensure endpoint has https:// prefix
+    const endpoint = fingerprint.endpoint && !fingerprint.endpoint.startsWith("http")
+        ? `https://${fingerprint.endpoint}`
+        : fingerprint.endpoint;
+    return (_jsx(FpjsProvider, { loadOptions: {
+            apiKey: fingerprint.apiKey,
+            endpoint: endpoint ? [endpoint, FingerprintJSPro.defaultEndpoint] : undefined,
+            scriptUrlPattern: fingerprint.scriptUrlPattern
+                ? [fingerprint.scriptUrlPattern, FingerprintJSPro.defaultScriptUrlPattern]
+                : undefined,
+        }, children: children }));
+}
+// Helper function to get fingerprint config from environment variables
+export function getFingerprintConfig() {
+    const apiKey = process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY;
+    if (!apiKey) {
+        return undefined;
+    }
+    return {
+        apiKey,
+        endpoint: process.env.NEXT_PUBLIC_FINGERPRINT_ENDPOINT,
+        scriptUrlPattern: process.env.NEXT_PUBLIC_FINGERPRINT_SCRIPT_URL,
+    };
+}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, capitalizeFirstLetter, EVM_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
-import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useChainSwitchWithAction, useModalStore, useOnchainName, } from "../../../../global-account/react/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useChainSwitchWithAction, useModalStore, useProfile, } from "../../../../global-account/react/index.js";
 import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
@@ -124,7 +124,8 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
     const dstToken = order.metadata.dstToken;
     const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
     const tournament = order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
-    const { name: recipientName } = useOnchainName(order.recipientAddress);
+    const profile = useProfile({ address: order.recipientAddress });
+    const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
     const account = useAccountWallet();
     const { data: walletClient } = useWalletClient();
     const [txHash, setTxHash] = useState();

package/dist/esm/anyspend/react/components/common/PanelOnrampPayment.d.ts

@@ -26,5 +26,5 @@ interface PanelOnrampPaymentProps {
     recipientEnsName?: string;
     recipientImageUrl?: string;
 }
-export declare function PanelOnrampPayment({ srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, }: PanelOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelOnrampPayment(props: PanelOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,9 +7,13 @@ import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-export function PanelOnrampPayment({ srcAmountOnRamp, 
-// recipientName,
-recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, }) {
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
+export function PanelOnrampPayment(props) {
+    const fingerprintConfig = getFingerprintConfig();
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(PanelOnrampPaymentInner, { ...props }) }));
+}
+function PanelOnrampPaymentInner(props) {
+    const { srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
     // Use a stable amount for geo onramp options to prevent unnecessary refetches
     const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
     const hasInitialized = useRef(false);
@@ -21,6 +25,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
         }
     }, [srcAmountOnRamp]);
     const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+    const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -104,7 +109,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                                                 ? "Receive NFT at"
                                                 : orderType === "join_tournament"
                                                     ? "Join for"
-                                                    : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && _jsxs("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), _jsxs("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoadingGeoOnramp ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Payment method" }), _jsx("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
+                                                    : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && _jsxs("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), _jsxs("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Payment method" }), _jsx("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
                                     (() => {
                                         const hasCard = coinbaseAvailablePaymentMethods.some(m => m.id === "CARD");
                                         const hasApplePay = coinbaseAvailablePaymentMethods.some(m => m.id === "APPLE_PAY");

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

@@ -8,11 +8,13 @@ import { AddressElement, Elements, PaymentElement, useElements, useStripe } from
 import { loadStripe } from "@stripe/stripe-js";
 import { HelpCircle, Info, 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({ isMainnet, order, onPaymentSuccess }) {
     const { theme } = useB3();
+    const fingerprintConfig = getFingerprintConfig();
     const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(isMainnet, order.stripePaymentIntentId);
     if (isLoadingStripeClientSecret) {
         return _jsx(StripeLoadingState, {});
@@ -20,10 +22,10 @@ export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }
     if (stripeClientSecretError) {
         return _jsx(StripeErrorState, { error: stripeClientSecretError.message });
     }
-    return (_jsx(Elements, { stripe: stripePromise, options: {
-            clientSecret: clientSecret || undefined,
-            appearance: { theme: theme === "light" ? "stripe" : "night" },
-        }, children: _jsx(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(Elements, { stripe: stripePromise, options: {
+                clientSecret: clientSecret || undefined,
+                appearance: { theme: theme === "light" ? "stripe" : "night" },
+            }, children: _jsx(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }) }));
 }
 function StripeLoadingState() {
     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: "Initializing payment" }), _jsx("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Setting up secure payment form..." })] })] }) }));
@@ -44,7 +46,6 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     useEffect(() => {
         if (stripe && elements) {
             setStripeReady(true);
-            console.log("@@stripe-web2-payment:initialized:", JSON.stringify({ orderId: order.id }, null, 2));
         }
     }, [stripe, elements, order.id]);
     useEffect(() => {
@@ -67,7 +68,6 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     // Handle payment element changes
     const handlePaymentElementChange = (event) => {
         // Show address element only for card payments
-        console.log("@@stripe-web2-payment:payment-element-change:", JSON.stringify(event, null, 2));
         setShowAddressElement(event.value.type === "card");
     };
     const handleSubmit = async (e) => {
@@ -79,7 +79,6 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         setLoading(true);
         setMessage(null);
         try {
-            console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
             const result = (await stripe.confirmPayment({
                 elements,
                 confirmParams: {
@@ -118,8 +117,6 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         const url = new URL(window.location.href);
         const fromStripe = url.searchParams.get("fromStripe");
         const paymentIntent = url.searchParams.get("payment_intent");
-        console.log("@@stripe-web2-payment:fromStripe:", fromStripe);
-        console.log("@@stripe-web2-payment:paymentIntent:", paymentIntent);
         if (fromStripe && paymentIntent) {
             // Close the modal as we're returning from 3DS
             setB3ModalOpen(true);

package/dist/esm/anyspend/react/components/index.d.ts

@@ -2,6 +2,7 @@ export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
+export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";

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

@@ -3,6 +3,7 @@ export { AnySpend } from "./AnySpend.js";
 export { AnySpendBondKit } from "./AnySpendBondKit.js";
 export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
 export { AnySpendCustom } from "./AnySpendCustom.js";
+export * from "./AnySpendFingerprintWrapper.js";
 export { AnySpendNFT } from "./AnySpendNFT.js";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3.js";

package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.d.ts

@@ -9,5 +9,5 @@ interface WebviewOnrampPaymentProps {
     onPaymentSuccess: (orderId: string) => void;
     userId?: string;
 }
-export declare function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }: WebviewOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function WebviewOnrampPayment(props: WebviewOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,7 +9,12 @@ import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 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 }) }));
+}
 // Stripe Payment Form Component
 function StripePaymentForm({ order, onPaymentSuccess, }) {
     const stripe = useStripe();
@@ -79,7 +84,7 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
                                 },
                             } }) })), error && (_jsx("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), _jsx("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin" }), _jsx("span", { children: "Processing..." })] })) : (_jsx("span", { children: "Complete Payment" })) })] }) }) }));
 }
-export function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
+function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
     const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
     const hasInitialized = useRef(false);
     const [createdOrder, setCreatedOrder] = useState(null);

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.d.ts

@@ -1,5 +1,5 @@
-import { CreateOrderParams } from "./useAnyspendCreateOrder";
 import { components } from "../../../anyspend/types/api";
+import { CreateOrderParams } from "./useAnyspendCreateOrder";
 export type OnrampOptions = {
     vendor: components["schemas"]["OnrampMetadata"]["vendor"];
     paymentMethod: string;

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -1,6 +1,7 @@
 import { USDC_BASE } from "../../../anyspend/constants/index.js";
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
 import { buildMetadata, buildPayload, normalizeAddress } from "../../../anyspend/utils/index.js";
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
@@ -10,6 +11,12 @@ import { base } from "viem/chains";
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
+    // Get fingerprint data
+    const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
+    const visitorData = fpData && {
+        requestId: fpData.requestId,
+        visitorId: fpData.visitorId,
+    };
     const { mutate: createOrder, isPending } = useMutation({
         mutationFn: async (params) => {
             const { isMainnet, recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload, partnerId, } = params;
@@ -42,7 +49,9 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                         expectedDstAmount,
                         nft,
                         tournament,
-                        payload,
+                        payload: {
+                            ...payload,
+                        },
                     }),
                     onramp,
                     metadata: buildMetadata(orderType, {
@@ -52,10 +61,13 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                         expectedDstAmount,
                         nft,
                         tournament,
-                        payload,
+                        payload: {
+                            ...payload,
+                        },
                     }),
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
                     partnerId,
+                    visitorData,
                 });
             }
             catch (error) {

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOrder.js

@@ -1,5 +1,6 @@
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
 import { buildMetadata, buildPayload, normalizeAddress } from "../../../anyspend/utils/index.js";
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 /**
@@ -8,6 +9,12 @@ import { useMemo } from "react";
  * For onramp orders, use useAnyspendCreateOnrampOrder instead.
  */
 export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
+    // Get fingerprint data
+    const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
+    const visitorData = fpData && {
+        requestId: fpData.requestId,
+        visitorId: fpData.visitorId,
+    };
     const { mutate: createOrder, isPending } = useMutation({
         mutationFn: async (params) => {
             const { isMainnet, recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress, } = params;
@@ -28,7 +35,9 @@ export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
                         expectedDstAmount: params.expectedDstAmount,
                         nft: params.nft,
                         tournament: params.tournament,
-                        payload: params.payload,
+                        payload: {
+                            ...params.payload,
+                        },
                     }),
                     metadata: buildMetadata(orderType, {
                         orderType,
@@ -37,9 +46,12 @@ export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
                         expectedDstAmount: params.expectedDstAmount,
                         nft: params.nft,
                         tournament: params.tournament,
-                        payload: params.payload,
+                        payload: {
+                            ...params.payload,
+                        },
                     }),
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
+                    visitorData,
                 });
             }
             catch (error) {

package/dist/esm/anyspend/react/hooks/useCoinbaseOnrampOptions.d.ts

@@ -1,4 +1,5 @@
-export declare function useCoinbaseOnrampOptions(isMainnet: boolean, country?: string): {
+import { VisitorData } from "../../../anyspend/types/fingerprint";
+export declare function useCoinbaseOnrampOptions(isMainnet: boolean, country?: string, visitorData?: VisitorData, isLoadingVisitorData?: boolean): {
     coinbaseOnrampOptions: {
         paymentCurrencies: {
             id?: string;

package/dist/esm/anyspend/react/hooks/useCoinbaseOnrampOptions.js

@@ -1,11 +1,11 @@
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-export function useCoinbaseOnrampOptions(isMainnet, country) {
+export function useCoinbaseOnrampOptions(isMainnet, country, visitorData, isLoadingVisitorData) {
     const { data, isLoading, error, refetch } = useQuery({
-        queryKey: ["getCoinbaseOnrampOptions", isMainnet, country],
-        queryFn: () => anyspendService.getCoinbaseOnrampOptions(isMainnet, country),
-        enabled: Boolean(country),
+        queryKey: ["getCoinbaseOnrampOptions", isMainnet, country, visitorData],
+        queryFn: () => anyspendService.getCoinbaseOnrampOptions(isMainnet, country, visitorData),
+        enabled: Boolean(country) && !isLoadingVisitorData,
     });
     return useMemo(() => ({
         coinbaseOnrampOptions: data?.data,

package/dist/esm/anyspend/react/hooks/useGeoOnrampOptions.d.ts

@@ -33,7 +33,7 @@ export declare function useGeoOnrampOptions(isMainnet: boolean, srcFiatAmount: s
     isStripeOnrampSupported: boolean;
     isStripeWeb2Supported: boolean;
     isOnrampSupported: boolean;
-    isLoading: boolean;
+    isLoading: boolean | undefined;
     isLoadingGeo: boolean;
     isLoadingCoinbaseOnrampOptions: boolean;
     isLoadingStripeSupport: boolean;

package/dist/esm/anyspend/react/hooks/useGeoOnrampOptions.js

@@ -1,12 +1,19 @@
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMemo } from "react";
 import { useCoinbaseOnrampOptions } from "./useCoinbaseOnrampOptions.js";
 import { useGetGeo } from "./useGetGeo.js";
 import { useStripeSupport } from "./useStripeSupport.js";
 export function useGeoOnrampOptions(isMainnet, srcFiatAmount) {
+    // Get fingerprint data
+    const { data: fpData, isLoading: isLoadingVisitorData } = useVisitorData({ extendedResult: true }, { immediate: true });
+    const visitorData = fpData && {
+        requestId: fpData.requestId,
+        visitorId: fpData.visitorId,
+    };
     // Use existing hooks
     const { geoData, loading: isLoadingGeo, error: geoError } = useGetGeo();
-    const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } = useCoinbaseOnrampOptions(isMainnet, geoData?.country);
-    const { isStripeOnrampSupported, isStripeWeb2Supported, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(isMainnet, geoData?.ip || "", srcFiatAmount);
+    const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } = useCoinbaseOnrampOptions(isMainnet, geoData?.country, visitorData);
+    const { isStripeOnrampSupported, isStripeWeb2Supported, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(isMainnet, geoData?.ip || "", srcFiatAmount, visitorData);
     // Calculate available payment methods based on the amount
     const coinbaseAvailablePaymentMethods = useMemo(() => {
         if (!coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits || !srcFiatAmount)
@@ -27,7 +34,7 @@ export function useGeoOnrampOptions(isMainnet, srcFiatAmount) {
         isStripeOnrampSupported,
         isStripeWeb2Supported,
         isOnrampSupported: coinbaseAvailablePaymentMethods.length > 0 || isStripeOnrampSupported || isStripeWeb2Supported,
-        isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport,
+        isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport || isLoadingVisitorData,
         isLoadingGeo,
         isLoadingCoinbaseOnrampOptions,
         isLoadingStripeSupport,