@b3dotfun/sdk 0.0.16-alpha.0 → 0.0.16-alpha.2

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

@@ -186,8 +186,6 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         srcToken,
     ]);
     const { anyspendQuote, isLoadingAnyspendQuote } = (0, react_1.useAnyspendQuote)(isMainnet, getRelayQuoteRequest);
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
     const { orderAndTransactions: oat } = (0, react_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
     const onSelectOrder = (selectedOrderId) => {
         setActivePanel(PanelView.ORDER_DETAILS);
@@ -198,7 +196,9 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
     const [srcAmount, setSrcAmount] = (0, react_4.useState)(null);
-    const formattedSrcAmount = srcAmount ? (0, number_1.formatTokenAmount)(srcAmount, srcToken.decimals, 6, false) : null;
+    const formattedSrcAmount = srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), srcToken.decimals) : null;
+    // Get geo data and onramp options (after quote is available)
+    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, formattedSrcAmount || "0");
     // Update the selected src token to USDC and chain to base when the active tab is fiat,
     // also force not to update srcToken by setting dirtySelectSrcToken to true.
     (0, react_4.useEffect)(() => {
@@ -215,7 +215,8 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             anyspendQuote.data.currencyIn?.currency?.decimals) {
             // Use toPrecision instead of toSignificant
             const amount = anyspendQuote.data.currencyIn.amount;
-            setSrcAmount(BigInt(amount));
+            const roundUpAmount = (0, anyspend_1.roundUpUSDCBaseAmountToNearest)(amount);
+            setSrcAmount(BigInt(roundUpAmount));
         }
         else {
             setSrcAmount(null);
@@ -305,7 +306,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                 (0, invariant_1.default)(srcChainId === chains_1.base.id, "Selected src chain is not base");
                 void createOnrampOrder({
                     ...createOrderParams,
-                    srcFiatAmount: anyspendQuote?.data?.currencyIn?.amountUsd || "0",
+                    srcFiatAmount: formattedSrcAmount || "0",
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,
@@ -394,7 +395,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote || !recipientAddress, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote && recipientAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : recipientAddress ? ("No quote found") : ("Please select a recipient") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: anyspendQuote?.data?.currencyIn?.amountUsd || "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: metadata.type === "mint_nft"
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote || !recipientAddress, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote && recipientAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : recipientAddress ? ("No quote found") : ("Please select a recipient") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: metadata.type === "mint_nft"
                                     ? metadata.nftContract.type === "erc1155"
                                         ? {
                                             type: "erc1155",

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

@@ -11,7 +11,6 @@ const centerTruncate_1 = __importDefault(require("../../../../shared/utils/cente
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
-const react_4 = require("react");
 const sonner_1 = require("sonner");
 const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
 function PanelOnrampPayment(props) {
@@ -20,17 +19,8 @@ function PanelOnrampPayment(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] = (0, react_4.useState)(srcAmountOnRamp);
-    const hasInitialized = (0, react_4.useRef)(false);
-    // Only update the stable amount on first render or when explicitly needed
-    (0, react_4.useEffect)(() => {
-        if (!hasInitialized.current && srcAmountOnRamp) {
-            setStableAmountForGeo(srcAmountOnRamp);
-            hasInitialized.current = true;
-        }
-    }, [srcAmountOnRamp]);
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(isMainnet, stableAmountForGeo);
+    console.log(`PanelOnrampPaymentInner:srcAmountOnRamp`, srcAmountOnRamp);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(isMainnet, srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {

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

@@ -91,18 +91,9 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
                             } }) })), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Processing..." })] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Complete Payment" })) })] }) }) }));
 }
 function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
-    const [stableAmountForGeo, setStableAmountForGeo] = (0, react_3.useState)(srcAmountOnRamp);
-    const hasInitialized = (0, react_3.useRef)(false);
     const [createdOrder, setCreatedOrder] = (0, react_3.useState)(null);
     const orderCreationAttempted = (0, react_3.useRef)(false);
-    // Only update the stable amount on first render or when explicitly needed
-    (0, react_3.useEffect)(() => {
-        if (!hasInitialized.current && srcAmountOnRamp) {
-            setStableAmountForGeo(srcAmountOnRamp);
-            hasInitialized.current = true;
-        }
-    }, [srcAmountOnRamp]);
-    const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = (0, react_1.useGeoOnrampOptions)(true, stableAmountForGeo);
+    const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = (0, react_1.useGeoOnrampOptions)(true, srcAmountOnRamp);
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {
             setCreatedOrder(data.data);

package/dist/cjs/anyspend/utils/number.d.ts

@@ -11,3 +11,10 @@ export declare function escapeRegExp(string: string): string;
  * For example, roundUpUSDCBaseAmountToNearest("2663988") = "2670000"
  */
 export declare function roundUpUSDCBaseAmountToNearest(value: string): string;
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export declare function roundUpUsdAmountToNearest(value: string): string;

package/dist/cjs/anyspend/utils/number.js

@@ -9,6 +9,7 @@ exports.mulpowToBig = mulpowToBig;
 exports.truncateValue = truncateValue;
 exports.escapeRegExp = escapeRegExp;
 exports.roundUpUSDCBaseAmountToNearest = roundUpUSDCBaseAmountToNearest;
+exports.roundUpUsdAmountToNearest = roundUpUsdAmountToNearest;
 const big_js_1 = __importDefault(require("big.js"));
 const viem_1 = require("viem");
 // Configure Big.js to use exponential notation only for very large/small numbers
@@ -88,3 +89,20 @@ function roundUpUSDCBaseAmountToNearest(value) {
     const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
     return res;
 }
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+function roundUpUsdAmountToNearest(value) {
+    const divisor = new big_js_1.default(0.01); // Round to nearest 0.01 USD
+    const srcAmountBig = new big_js_1.default(value);
+    const remainder = srcAmountBig.mod(divisor);
+    // If remainder is already 0 (exactly divisible by 0.01), return the original amount
+    if (remainder.eq(0)) {
+        return value;
+    }
+    const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
+    return res;
+}

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { eqci, getDefaultToken } from "../../../anyspend/index.js";
+import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } 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, 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";
+import { formatUnits } from "../../../shared/utils/number.js";
 import { simpleHashChainToChainName } from "../../../shared/utils/simplehash.js";
 import invariant from "invariant";
 import { ChevronRightCircle, Loader2 } from "lucide-react";
@@ -180,8 +180,6 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         srcToken,
     ]);
     const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(isMainnet, getRelayQuoteRequest);
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
     const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(isMainnet, orderId);
     const onSelectOrder = (selectedOrderId) => {
         setActivePanel(PanelView.ORDER_DETAILS);
@@ -192,7 +190,9 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
     const [srcAmount, setSrcAmount] = useState(null);
-    const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
+    const formattedSrcAmount = srcAmount ? formatUnits(srcAmount.toString(), srcToken.decimals) : null;
+    // Get geo data and onramp options (after quote is available)
+    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, formattedSrcAmount || "0");
     // Update the selected src token to USDC and chain to base when the active tab is fiat,
     // also force not to update srcToken by setting dirtySelectSrcToken to true.
     useEffect(() => {
@@ -209,7 +209,8 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
             anyspendQuote.data.currencyIn?.currency?.decimals) {
             // Use toPrecision instead of toSignificant
             const amount = anyspendQuote.data.currencyIn.amount;
-            setSrcAmount(BigInt(amount));
+            const roundUpAmount = roundUpUSDCBaseAmountToNearest(amount);
+            setSrcAmount(BigInt(roundUpAmount));
         }
         else {
             setSrcAmount(null);
@@ -299,7 +300,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                 invariant(srcChainId === base.id, "Selected src chain is not base");
                 void createOnrampOrder({
                     ...createOrderParams,
-                    srcFiatAmount: anyspendQuote?.data?.currencyIn?.amountUsd || "0",
+                    srcFiatAmount: formattedSrcAmount || "0",
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,
@@ -388,7 +389,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote || !recipientAddress, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : anyspendQuote && recipientAddress ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : recipientAddress ? ("No quote found") : ("Please select a recipient") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsx("div", { className: "mt-6 flex w-full flex-col gap-6", children: _jsx(PanelOnrampPayment, { srcAmountOnRamp: anyspendQuote?.data?.currencyIn?.amountUsd || "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: metadata.type === "mint_nft"
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote || !recipientAddress, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : anyspendQuote && recipientAddress ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : recipientAddress ? ("No quote found") : ("Please select a recipient") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsx("div", { className: "mt-6 flex w-full flex-col gap-6", children: _jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: metadata.type === "mint_nft"
                                     ? metadata.nftContract.type === "erc1155"
                                         ? {
                                             type: "erc1155",

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

@@ -5,7 +5,6 @@ import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
 export function PanelOnrampPayment(props) {
@@ -14,17 +13,8 @@ export function PanelOnrampPayment(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);
-    // Only update the stable amount on first render or when explicitly needed
-    useEffect(() => {
-        if (!hasInitialized.current && srcAmountOnRamp) {
-            setStableAmountForGeo(srcAmountOnRamp);
-            hasInitialized.current = true;
-        }
-    }, [srcAmountOnRamp]);
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+    console.log(`PanelOnrampPaymentInner:srcAmountOnRamp`, srcAmountOnRamp);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {

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

@@ -85,18 +85,9 @@ 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" })) })] }) }) }));
 }
 function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
-    const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
-    const hasInitialized = useRef(false);
     const [createdOrder, setCreatedOrder] = useState(null);
     const orderCreationAttempted = useRef(false);
-    // Only update the stable amount on first render or when explicitly needed
-    useEffect(() => {
-        if (!hasInitialized.current && srcAmountOnRamp) {
-            setStableAmountForGeo(srcAmountOnRamp);
-            hasInitialized.current = true;
-        }
-    }, [srcAmountOnRamp]);
-    const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, stableAmountForGeo);
+    const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, srcAmountOnRamp);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
             setCreatedOrder(data.data);

package/dist/esm/anyspend/utils/number.d.ts

@@ -11,3 +11,10 @@ export declare function escapeRegExp(string: string): string;
  * For example, roundUpUSDCBaseAmountToNearest("2663988") = "2670000"
  */
 export declare function roundUpUSDCBaseAmountToNearest(value: string): string;
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export declare function roundUpUsdAmountToNearest(value: string): string;

package/dist/esm/anyspend/utils/number.js

@@ -77,3 +77,20 @@ export function roundUpUSDCBaseAmountToNearest(value) {
     const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
     return res;
 }
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export function roundUpUsdAmountToNearest(value) {
+    const divisor = new Big(0.01); // Round to nearest 0.01 USD
+    const srcAmountBig = new Big(value);
+    const remainder = srcAmountBig.mod(divisor);
+    // If remainder is already 0 (exactly divisible by 0.01), return the original amount
+    if (remainder.eq(0)) {
+        return value;
+    }
+    const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
+    return res;
+}

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

@@ -11,3 +11,10 @@ export declare function escapeRegExp(string: string): string;
  * For example, roundUpUSDCBaseAmountToNearest("2663988") = "2670000"
  */
 export declare function roundUpUSDCBaseAmountToNearest(value: string): string;
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export declare function roundUpUsdAmountToNearest(value: string): string;

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { eqci, getDefaultToken } from "@b3dotfun/sdk/anyspend";
+import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "@b3dotfun/sdk/anyspend";
 import { RELAY_ETH_ADDRESS, USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import {
   CreateOrderParams,
@@ -38,7 +38,7 @@ import {
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
-import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { simpleHashChainToChainName } from "@b3dotfun/sdk/shared/utils/simplehash";
 import invariant from "invariant";
 import { ChevronRightCircle, Loader2 } from "lucide-react";
@@ -299,12 +299,6 @@ export function AnySpendCustom({
   ]);
   const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(isMainnet, getRelayQuoteRequest);
 
-  // Get geo data and onramp options (after quote is available)
-  const { geoData, isOnrampSupported } = useGeoOnrampOptions(
-    isMainnet,
-    anyspendQuote?.data?.currencyIn?.amountUsd || "0",
-  );
-
   const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(isMainnet, orderId);
 
   const onSelectOrder = (selectedOrderId: string) => {
@@ -317,7 +311,10 @@ export function AnySpendCustom({
   };
 
   const [srcAmount, setSrcAmount] = useState<bigint | null>(null);
-  const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
+  const formattedSrcAmount = srcAmount ? formatUnits(srcAmount.toString(), srcToken.decimals) : null;
+
+  // Get geo data and onramp options (after quote is available)
+  const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, formattedSrcAmount || "0");
 
   // Update the selected src token to USDC and chain to base when the active tab is fiat,
   // also force not to update srcToken by setting dirtySelectSrcToken to true.
@@ -338,7 +335,8 @@ export function AnySpendCustom({
     ) {
       // Use toPrecision instead of toSignificant
       const amount = anyspendQuote.data.currencyIn.amount;
-      setSrcAmount(BigInt(amount));
+      const roundUpAmount = roundUpUSDCBaseAmountToNearest(amount);
+      setSrcAmount(BigInt(roundUpAmount));
     } else {
       setSrcAmount(null);
     }
@@ -440,7 +438,7 @@ export function AnySpendCustom({
         invariant(srcChainId === base.id, "Selected src chain is not base");
         void createOnrampOrder({
           ...createOrderParams,
-          srcFiatAmount: anyspendQuote?.data?.currencyIn?.amountUsd || "0",
+          srcFiatAmount: formattedSrcAmount || "0",
           onramp: {
             vendor: onramp.vendor,
             paymentMethod: onramp.paymentMethod,
@@ -816,7 +814,7 @@ export function AnySpendCustom({
         <TabsContent value="fiat">
           <div className="mt-6 flex w-full flex-col gap-6">
             <PanelOnrampPayment
-              srcAmountOnRamp={anyspendQuote?.data?.currencyIn?.amountUsd || "0"}
+              srcAmountOnRamp={srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"}
               recipientName={recipientEnsName}
               recipientAddress={recipientAddress}
               isMainnet={isMainnet}

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

@@ -6,7 +6,6 @@ import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 
@@ -64,17 +63,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
     recipientImageUrl,
   } = props;
 
-  // Use a stable amount for geo onramp options to prevent unnecessary refetches
-  const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
-  const hasInitialized = useRef(false);
-
-  // Only update the stable amount on first render or when explicitly needed
-  useEffect(() => {
-    if (!hasInitialized.current && srcAmountOnRamp) {
-      setStableAmountForGeo(srcAmountOnRamp);
-      hasInitialized.current = true;
-    }
-  }, [srcAmountOnRamp]);
+  console.log(`PanelOnrampPaymentInner:srcAmountOnRamp`, srcAmountOnRamp);
 
   const {
     geoData,
@@ -83,7 +72,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
     isStripeOnrampSupported,
     stripeWeb2Support,
     isLoading: isLoadingGeoOnramp,
-  } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+  } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
 
   const isLoading = isLoadingGeoOnramp;
 

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

@@ -159,20 +159,10 @@ function WebviewOnrampPaymentInner({
   userId,
   partnerId,
 }: WebviewOnrampPaymentProps) {
-  const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
-  const hasInitialized = useRef(false);
   const [createdOrder, setCreatedOrder] = useState<components["schemas"]["Order"] | null>(null);
   const orderCreationAttempted = useRef(false);
 
-  // Only update the stable amount on first render or when explicitly needed
-  useEffect(() => {
-    if (!hasInitialized.current && srcAmountOnRamp) {
-      setStableAmountForGeo(srcAmountOnRamp);
-      hasInitialized.current = true;
-    }
-  }, [srcAmountOnRamp]);
-
-  const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, stableAmountForGeo);
+  const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, srcAmountOnRamp);
 
   const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
     onSuccess: data => {

package/src/anyspend/utils/number.ts

@@ -91,3 +91,21 @@ export function roundUpUSDCBaseAmountToNearest(value: string): string {
   const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
   return res;
 }
+
+/**
+ * Round up a USD amount to the nearest multiple of 0.01 USD
+ * @param value - The USD amount to round up
+ * @returns The rounded USD amount
+ * For example, roundUpUsdAmountToNearest("2.663988") = "2.67"
+ */
+export function roundUpUsdAmountToNearest(value: string): string {
+  const divisor = new Big(0.01); // Round to nearest 0.01 USD
+  const srcAmountBig = new Big(value);
+  const remainder = srcAmountBig.mod(divisor);
+  // If remainder is already 0 (exactly divisible by 0.01), return the original amount
+  if (remainder.eq(0)) {
+    return value;
+  }
+  const res = srcAmountBig.plus(divisor.minus(remainder)).toString();
+  return res;
+}