@b3dotfun/sdk 0.0.73-test.3 → 0.0.74-alpha.0

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

@@ -28,7 +28,7 @@ function OrderHistoryItem({ order, onSelectOrder, mode }) {
     // Check if this is a one-click payment order
     const isOneClickPayment = !!order.oneClickBuyUrl;
     const vendorName = order.onrampMetadata?.vendor ? (0, payment_utils_1.getVendorDisplayName)(order.onrampMetadata.vendor) : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all", onSelectOrder && "cursor-pointer"), onClick: () => onSelectOrder?.(order.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-xs font-semibold", orderDisplayStatus === "processing" && "text-yellow-600", orderDisplayStatus === "success" && "text-green-600", orderDisplayStatus === "failure" && "text-red-600"), children: orderStatusText }), isOneClickPayment && vendorName && ((0, jsx_runtime_1.jsx)(react_1.Badge, { variant: "outline", className: "text-as-secondary px-2 py-0.5 text-[10px]", children: vendorName }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-secondary text-[10px] font-medium uppercase tracking-wide", children: (0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.createdAt) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center", isSmallView ? "gap-2" : "gap-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: [(0, jsx_runtime_1.jsx)("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [(0, number_1.formatTokenAmount)(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.srcChain) })] })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: (0, utils_1.cn)("text-as-secondary shrink-0 opacity-30", isSmallView ? "h-4 w-4" : "h-5 w-5") }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: nft ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: nft.imageUrl, alt: nft.name, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: nft.name }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) : tournament ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: tournament.imageUrl, alt: tournament.name, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: tournament.name }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [(0, number_1.formatTokenAmount)(actualDstAmount
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("font-inter border-as-border-secondary border-b py-5 font-medium transition-all last:border-b-0", onSelectOrder && "hover:bg-as-surface-secondary/50 cursor-pointer"), onClick: () => onSelectOrder?.(order.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-xs", orderDisplayStatus === "processing" && "text-yellow-600", orderDisplayStatus === "success" && "text-green-600", orderDisplayStatus === "failure" && "text-red-600"), children: orderStatusText }), isOneClickPayment && vendorName && ((0, jsx_runtime_1.jsx)(react_1.Badge, { variant: "outline", className: "text-as-secondary px-2 py-0.5 text-[10px]", children: vendorName }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-secondary text-[10px] font-medium uppercase tracking-wide", children: (0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.createdAt) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center", isSmallView ? "gap-2" : "gap-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: [order.metadata.srcToken.metadata.logoURI ? ((0, jsx_runtime_1.jsx)("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex shrink-0 items-center justify-center rounded-full bg-gray-200", isSmallView ? "h-7 w-7" : "h-8 w-8"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Coins, { className: (0, utils_1.cn)("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4") }) })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [(0, number_1.formatTokenAmount)(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.srcChain) })] })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: (0, utils_1.cn)("text-as-secondary shrink-0 opacity-30", isSmallView ? "h-4 w-4" : "h-5 w-5") }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: nft ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [nft.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: nft.imageUrl, alt: nft.name, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex shrink-0 items-center justify-center rounded-full bg-gray-200", isSmallView ? "h-7 w-7" : "h-8 w-8"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Image, { className: (0, utils_1.cn)("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4") }) })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: nft.name }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) : tournament ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tournament.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: tournament.imageUrl, alt: tournament.name, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex shrink-0 items-center justify-center rounded-full bg-gray-200", isSmallView ? "h-7 w-7" : "h-8 w-8"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Image, { className: (0, utils_1.cn)("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4") }) })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: tournament.name }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [dstToken.metadata.logoURI ? ((0, jsx_runtime_1.jsx)("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex shrink-0 items-center justify-center rounded-full bg-gray-200", isSmallView ? "h-7 w-7" : "h-8 w-8"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Coins, { className: (0, utils_1.cn)("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4") }) })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [(0, number_1.formatTokenAmount)(actualDstAmount
                                                     ? BigInt(actualDstAmount)
                                                     : expectedDstAmount
                                                         ? BigInt(expectedDstAmount)

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

@@ -9,11 +9,11 @@ const utils_1 = require("../../../../shared/utils");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
 const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
 const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
 const PointsBadge_1 = require("./PointsBadge");
+const ONE_CHAR_WIDTH = 30;
 function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, onShowFeeDetail, customUsdInputValues = ["5", "10", "20", "25"], }) {
     const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
     // Helper function to get fees from anyspend quote
@@ -67,7 +67,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
         const maxLimit = coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000";
         const numValue = parseFloat(value);
         if (!Number.isNaN(numValue) && numValue > parseFloat(maxLimit)) {
-            sonner_1.toast.error(`Maximum amount is $${maxLimit}`);
+            react_2.toast.error(`Maximum amount is $${maxLimit}`);
             setSrcAmountOnRamp(maxLimit);
             return;
         }
@@ -76,8 +76,8 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
-                                        width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+                                        width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
                                     } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))
                             .map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value

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 sonner_1 = require("sonner");
 const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
 function PanelOnrampPayment(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
@@ -28,29 +27,29 @@ function PanelOnrampPaymentInner(props) {
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_2.toast.error("Failed to create order: " + error.message);
         },
     });
     const handlePaymentMethodClick = async (vendor, paymentMethod) => {
         try {
             if (!recipientAddress) {
-                sonner_1.toast.error("Please select a recipient");
+                react_2.toast.error("Please select a recipient");
                 return;
             }
             if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
-                sonner_1.toast.error("Please enter a valid amount");
+                react_2.toast.error("Please enter a valid amount");
                 return;
             }
             if (vendor === "coinbase" && !coinbaseOnrampOptions) {
-                sonner_1.toast.error("Onramp options not available");
+                react_2.toast.error("Onramp options not available");
                 return;
             }
             if (vendor === "stripe-web2" && !stripeWeb2Support.isSupport) {
-                sonner_1.toast.error("Stripe credit card not available");
+                react_2.toast.error("Stripe credit card not available");
                 return;
             }
             if (!anyspendQuote) {
-                sonner_1.toast.error("Failed to get quote");
+                react_2.toast.error("Failed to get quote");
                 return;
             }
             const getDstToken = () => {
@@ -85,10 +84,10 @@ function PanelOnrampPaymentInner(props) {
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_2.toast.error("Failed to create order: " + err.message);
         }
     };
-    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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5", children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
                                     filter: "blur(0px)",

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

@@ -9,5 +9,5 @@ const react_1 = require("../../../../global-account/react");
 const cn_1 = require("../../../../shared/utils/cn");
 const link_1 = __importDefault(require("next/link"));
 function PointsDetailPanel({ pointsAmount = 0, onBack }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] }) }));
 }

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

@@ -32,5 +32,5 @@ function RecipientSelection({ initialValue = "", placeholder = "Enter recipient
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "recipient-selection mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "recipient-selection mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
 }

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

@@ -11,7 +11,6 @@ const react_2 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
 const qrcode_react_1 = require("qrcode.react");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const chains_1 = require("viem/chains");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
@@ -65,11 +64,11 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
     const formattedExpectedDstAmount = (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
     const handleCopyAddress = () => {
         navigator.clipboard.writeText(order.globalAddress);
-        sonner_1.toast.success("Deposit address copied to clipboard");
+        react_1.toast.success("Deposit address copied to clipboard");
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), (0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "order-transfer-crypto-timer-progress text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
-                                                sonner_1.toast.success("Amount copied to clipboard");
+                                                react_1.toast.success("Amount copied to clipboard");
                                             }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
 });

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

@@ -9,7 +9,6 @@ const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../global-account/react");
 const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const lucide_react_1 = require("lucide-react");
-const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 function WebviewOnrampOrderStatus({ order }) {
     console.log(order.status);
@@ -30,7 +29,7 @@ function WebviewOnrampOrderStatus({ order }) {
     const tokenLogoUrl = tokenMetadata?.logoURI || order.metadata.dstToken.metadata?.logoURI;
     const handleCopy = (text, label) => {
         navigator.clipboard.writeText(text);
-        sonner_1.toast.success(`${label} copied to clipboard`);
+        react_1.toast.success(`${label} copied to clipboard`);
     };
     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: "flex justify-center", children: (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "flex items-center gap-3 px-4 py-2 text-base", children: [isPending && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isExecuted && (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "h-4 w-4 text-green-500" }), isFailed && (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "h-4 w-4 text-red-500" }), (0, jsx_runtime_1.jsxs)("span", { children: [isPending && "Processing Payment...", isExecuted && "Payment Complete", isFailed && "Payment Failed", isRefunded && "Payment Refunded"] })] }) }), (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: "Amount Paid" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", Number((0, viem_1.formatUnits)(BigInt(order.srcAmount), order.metadata.srcToken.decimals)).toFixed(2)] })] }), order.type === "swap" && expectedAmount && ((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: "Est Token Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [tokenLogoUrl && ((0, jsx_runtime_1.jsx)("img", { src: tokenLogoUrl, alt: order.metadata.dstToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [expectedAmount, " ", order.metadata.dstToken.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)(order.dstChain) })] }), (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.jsxs)("button", { onClick: () => handleCopy(order.recipientAddress, "Recipient address"), className: "flex items-center gap-2 font-medium transition-colors hover:text-blue-600", children: [(0, centerTruncate_1.default)(order.recipientAddress, 8), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" })] })] }), (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: "Order ID" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleCopy(order.id, "Order ID"), className: "flex items-center gap-2 font-medium transition-colors hover:text-blue-600", children: [(0, centerTruncate_1.default)(order.id, 8), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" })] })] })] })] }) })] }));
 }

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

@@ -7,13 +7,13 @@ exports.WebviewOnrampPayment = WebviewOnrampPayment;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 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_2 = require("motion/react");
-const react_3 = require("react");
-const sonner_1 = require("sonner");
+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);
@@ -25,9 +25,9 @@ function WebviewOnrampPayment(props) {
 function StripePaymentForm({ order, onPaymentSuccess, }) {
     const stripe = (0, react_stripe_js_1.useStripe)();
     const elements = (0, react_stripe_js_1.useElements)();
-    const [isProcessing, setIsProcessing] = (0, react_3.useState)(false);
-    const [error, setError] = (0, react_3.useState)(null);
-    const [showAddressElement, setShowAddressElement] = (0, react_3.useState)(false);
+    const [isProcessing, setIsProcessing] = (0, react_4.useState)(false);
+    const [error, setError] = (0, react_4.useState)(null);
+    const [showAddressElement, setShowAddressElement] = (0, react_4.useState)(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -91,8 +91,8 @@ 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, }) {
-    const [createdOrder, setCreatedOrder] = (0, react_3.useState)(null);
-    const orderCreationAttempted = (0, react_3.useRef)(false);
+    const [createdOrder, setCreatedOrder] = (0, react_4.useState)(null);
+    const orderCreationAttempted = (0, react_4.useRef)(false);
     const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {
@@ -100,12 +100,12 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_2.toast.error("Failed to create order: " + error.message);
         },
     });
     const { clientSecret, isLoadingStripeClientSecret } = (0, react_1.useStripeClientSecret)(createdOrder?.stripePaymentIntentId || "");
     // Create order when component mounts and all required data is available
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         const createOrderIfPossible = async () => {
             if (!orderCreationAttempted.current &&
                 recipientAddress &&
@@ -140,7 +140,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
                 }
                 catch (err) {
                     console.error(err);
-                    sonner_1.toast.error("Failed to create order: " + err.message);
+                    react_2.toast.error("Failed to create order: " + err.message);
                 }
             }
         };
@@ -182,7 +182,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
                     }, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: createdOrder, onPaymentSuccess: onPaymentSuccess }) })] }));
     }
     // Show initial order summary while waiting for order creation
-    return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, className: "mx-auto w-full max-w-[460px]", 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
+    return ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, className: "mx-auto w-full max-w-[460px]", 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)] })] })] })] }) }) }));
 }

package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js

@@ -8,7 +8,6 @@ const anyspend_2 = require("../../../anyspend/services/anyspend");
 const react_2 = require("../../../global-account/react");
 const number_1 = require("../../../shared/utils/number");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod");
@@ -100,7 +99,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
                 }
                 catch (error) {
                     console.error("Failed to fetch source token:", error);
-                    sonner_1.toast.error(`Failed to load token ${sourceTokenAddress} on chain ${sourceTokenChainId}`);
+                    react_2.toast.error(`Failed to load token ${sourceTokenAddress} on chain ${sourceTokenChainId}`);
                     // Keep the default token on error
                 }
             }
@@ -117,7 +116,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
                 }
                 catch (error) {
                     console.error("Failed to fetch destination token:", error);
-                    sonner_1.toast.error(`Failed to load token ${destinationTokenAddress} on chain ${destinationTokenChainId}`);
+                    react_2.toast.error(`Failed to load token ${destinationTokenAddress} on chain ${destinationTokenChainId}`);
                     // Keep the default token on error
                 }
             }
@@ -199,7 +198,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_2.toast.error("Failed to create order: " + error.message);
         },
     });
     const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
@@ -211,7 +210,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_2.toast.error("Failed to create order: " + error.message);
         },
     });
     // Handle order completion

package/dist/cjs/anyspend/react/hooks/useConnectedWalletDisplay.js

@@ -10,7 +10,7 @@ const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod"
  */
 function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
-    const { address: wagmiAddress, isConnected: wagmiWalletIsConnected } = (0, wagmi_1.useAccount)();
+    const { address: wagmiAddress } = (0, wagmi_1.useAccount)();
     const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
     // Helper function to check if two addresses are the same
     const isSameAddress = (addr1, addr2) => {
@@ -23,7 +23,8 @@ function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
     // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
     const shouldShowConnectedEOA = !!connectedEOAWallet;
-    const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+    // this is disabled because we don't want to display In-App Wallet as a payment method
+    const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
     // Determine which address to use based on payment method
     let walletAddress;
     if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {

package/dist/cjs/anyspend/react/hooks/usePhantomTransfer.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePhantomTransfer = usePhantomTransfer;
+const react_1 = require("../../../global-account/react");
 const spl_token_1 = require("@solana/spl-token");
 const web3_js_1 = require("@solana/web3.js");
-const react_1 = require("react");
-const sonner_1 = require("sonner");
+const react_2 = require("react");
 /**
  * Custom hook for handling Phantom wallet transfers on Solana.
  * Supports both native SOL and SPL token transfers with automatic priority fee calculation.
@@ -25,13 +25,13 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
     const defaultRpcEndpoint = "https://mainnet.helius-rpc.com/?api-key=efafd9b3-1807-4cf8-8aa4-3d984f56d8fb";
     const effectiveRpcEndpoint = rpcEndpoint || defaultRpcEndpoint;
     // Check for Phantom wallet availability
-    const isPhantomMobile = (0, react_1.useMemo)(() => navigator.userAgent.includes("Phantom"), []);
-    const isPhantomBrowser = (0, react_1.useMemo)(() => window.phantom?.solana?.isPhantom, []);
+    const isPhantomMobile = (0, react_2.useMemo)(() => navigator.userAgent.includes("Phantom"), []);
+    const isPhantomBrowser = (0, react_2.useMemo)(() => window.phantom?.solana?.isPhantom, []);
     const isPhantomAvailable = isPhantomMobile || isPhantomBrowser;
     /**
      * Get the connected Phantom wallet address if available
      */
-    const getConnectedAddress = (0, react_1.useCallback)(() => {
+    const getConnectedAddress = (0, react_2.useCallback)(() => {
         const phantom = window.phantom?.solana;
         if (phantom?.isConnected && phantom?.publicKey) {
             return phantom.publicKey.toString();
@@ -41,7 +41,7 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
     /**
      * Calculate optimal priority fee based on recent network activity
      */
-    const calculatePriorityFee = (0, react_1.useCallback)(async (connection, fromPubkey) => {
+    const calculatePriorityFee = (0, react_2.useCallback)(async (connection, fromPubkey) => {
         let priorityFee = 10000; // Default fallback (10,000 micro-lamports)
         try {
             const recentFees = await connection.getRecentPrioritizationFees({
@@ -62,7 +62,7 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
     /**
      * Create a native SOL transfer transaction with priority fees
      */
-    const createNativeTransferTransaction = (0, react_1.useCallback)(async (_connection, fromPubkey, toPubkey, amount, priorityFee) => {
+    const createNativeTransferTransaction = (0, react_2.useCallback)(async (_connection, fromPubkey, toPubkey, amount, priorityFee) => {
         const computeUnitLimit = 1000; // SOL transfer + compute budget instructions need ~600-800 CU
         const computeUnitPrice = Math.min(priorityFee, 100000); // Cap at 100k micro-lamports for safety
         const transaction = new web3_js_1.Transaction()
@@ -89,7 +89,7 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
     /**
      * Create an SPL token transfer transaction with priority fees
      */
-    const createSPLTransferTransaction = (0, react_1.useCallback)(async (connection, fromPubkey, toPubkey, mintPubkey, amount, priorityFee) => {
+    const createSPLTransferTransaction = (0, react_2.useCallback)(async (connection, fromPubkey, toPubkey, mintPubkey, amount, priorityFee) => {
         // Get associated token accounts
         const fromTokenAccount = (0, spl_token_1.getAssociatedTokenAddressSync)(mintPubkey, fromPubkey);
         const toTokenAccount = (0, spl_token_1.getAssociatedTokenAddressSync)(mintPubkey, toPubkey);
@@ -127,17 +127,17 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
     /**
      * Initiate a Phantom wallet transfer for SOL or SPL tokens
      */
-    const initiateTransfer = (0, react_1.useCallback)(async ({ amountLamports, tokenAddress, recipientAddress }) => {
+    const initiateTransfer = (0, react_2.useCallback)(async ({ amountLamports, tokenAddress, recipientAddress }) => {
         try {
             // Step 1: Check if Phantom is installed
             if (!isPhantomAvailable) {
-                sonner_1.toast.error("Phantom wallet not installed. Please install Phantom wallet to continue.");
+                react_1.toast.error("Phantom wallet not installed. Please install Phantom wallet to continue.");
                 return;
             }
             // Step 2: Ensure Phantom is connected/unlocked
             const phantom = window.phantom?.solana;
             if (!phantom) {
-                sonner_1.toast.error("Phantom wallet not accessible");
+                react_1.toast.error("Phantom wallet not accessible");
                 return;
             }
             // Connect and unlock wallet if needed
@@ -147,7 +147,7 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
                 publicKey = connection.publicKey;
             }
             catch (connectError) {
-                sonner_1.toast.error("Failed to connect to Phantom wallet");
+                react_1.toast.error("Failed to connect to Phantom wallet");
                 return;
             }
             // Step 3: Setup connection and public keys
@@ -174,23 +174,23 @@ function usePhantomTransfer({ rpcEndpoint } = {}) {
             transaction.feePayer = fromPubkey;
             // Step 7: Sign and send transaction
             const signedTransaction = await phantom.signAndSendTransaction(transaction);
-            sonner_1.toast.success(`Transaction successful! Signature: ${signedTransaction.signature}`);
+            react_1.toast.success(`Transaction successful! Signature: ${signedTransaction.signature}`);
             console.log("Transaction sent with priority fees. Signature:", signedTransaction.signature);
         }
         catch (error) {
             console.error("Transfer error:", error);
             const errorMessage = error instanceof Error ? error.message : String(error);
             if (errorMessage.includes("User rejected")) {
-                sonner_1.toast.error("Transaction was cancelled by user");
+                react_1.toast.error("Transaction was cancelled by user");
             }
             else if (errorMessage.includes("insufficient")) {
-                sonner_1.toast.error("Insufficient balance for this transaction");
+                react_1.toast.error("Insufficient balance for this transaction");
             }
             else if (errorMessage.includes("blockhash not found")) {
-                sonner_1.toast.error("Network congestion detected. Please try again in a moment.");
+                react_1.toast.error("Network congestion detected. Please try again in a moment.");
             }
             else {
-                sonner_1.toast.error(`Transfer failed: ${errorMessage}`);
+                react_1.toast.error(`Transfer failed: ${errorMessage}`);
             }
         }
     }, [

package/dist/cjs/anyspend/react/utils/toast.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export toast from global-account for consistency
+ * This allows anyspend components to continue using the same toast API
+ */
+export { toast } from "../../../global-account/react/components/Toast/toastApi";
+export type { ToastItem, ToastType } from "../../../global-account/react/components/Toast/ToastContext";

package/dist/cjs/anyspend/react/utils/toast.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+/**
+ * Re-export toast from global-account for consistency
+ * This allows anyspend components to continue using the same toast API
+ */
+var toastApi_1 = require("../../../global-account/react/components/Toast/toastApi");
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return toastApi_1.toast; } });

package/dist/cjs/global-account/react/components/AccountAssets/AccountAssets.js

@@ -2,12 +2,48 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountAssets = AccountAssets;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 function AccountAssets({ nfts, isLoading }) {
+    // Initialize with all collections expanded
+    // Group NFTs by collection
+    const groupedNFTs = nfts?.nfts?.reduce((acc, nft) => {
+        const collectionId = nft.collection?.collection_id || "unknown";
+        if (!acc[collectionId]) {
+            acc[collectionId] = {
+                collection_id: collectionId,
+                collection_name: nft.collection?.name || "Unknown Collection",
+                collection_image: nft.collection?.image_url || nft.previews?.image_small_url || "",
+                nfts: [],
+            };
+        }
+        acc[collectionId].nfts.push(nft);
+        return acc;
+    }, {});
+    const collections = Object.values(groupedNFTs || {});
+    const [expandedCollections, setExpandedCollections] = (0, react_1.useState)(() => new Set(collections.map(c => c.collection_id)));
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "grid animate-pulse grid-cols-2 gap-4", children: [...Array(4)].map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted aspect-square rounded-lg" }, i))) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted mb-3 h-6 w-48 rounded" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" })] })] }, i))) }));
     }
     if (!nfts?.nfts?.length) {
         return (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-muted-foreground py-8 text-center", children: "No NFTs found" });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-4", children: nfts.nfts.map(nft => ((0, jsx_runtime_1.jsx)("div", { className: "group relative aspect-square overflow-hidden", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative h-full w-full overflow-hidden rounded-xl", children: [(0, jsx_runtime_1.jsx)("img", { src: nft.previews?.image_medium_url || nft.extra_metadata?.image_original_url || nft.collection?.image_url, alt: nft.name || "NFT", className: "h-full w-full rounded-xl object-cover" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black from-35% via-black/70 to-transparent p-3 opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-bold text-[16px] text-white drop-shadow-[0_1px_2px_rgba(0,0,0,1)]", children: nft.name || `#${nft.token_id}` }), (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-bold text-sm text-white/95 drop-shadow-[0_1px_2px_rgba(0,0,0,1)]", children: nft.collection?.name })] })] }) }, nft.nft_id))) }));
+    const toggleCollection = (collectionId) => {
+        setExpandedCollections(prev => {
+            const next = new Set(prev);
+            if (next.has(collectionId)) {
+                next.delete(collectionId);
+            }
+            else {
+                next.add(collectionId);
+            }
+            return next;
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3 px-4", children: collections.map(collection => {
+            const isExpanded = expandedCollections.has(collection.collection_id);
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleCollection(collection.collection_id), className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [collection.collection_image && ((0, jsx_runtime_1.jsx)("img", { src: collection.collection_image, alt: collection.collection_name, className: "h-5 w-5 shrink-0 rounded object-cover" })), (0, jsx_runtime_1.jsxs)("p", { className: "font-neue-montreal-medium text-[14px] text-[#3f3f46]", children: [collection.collection_name, " (", collection.nfts.length, ")"] })] }), (0, jsx_runtime_1.jsx)("svg", { className: `h-[18px] w-[18px] shrink-0 transition-transform ${isExpanded ? "rotate-180" : ""}`, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.5 6.75L9 11.25L13.5 6.75", stroke: "#51525C", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), isExpanded && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-3 overflow-x-auto", children: collection.nfts.map(nft => ((0, jsx_runtime_1.jsx)("div", { className: "relative h-[98px] w-[98px] shrink-0 overflow-hidden rounded-lg", children: (0, jsx_runtime_1.jsx)("img", { src: nft.previews?.image_medium_url ||
+                                    nft.extra_metadata?.image_original_url ||
+                                    nft.collection?.image_url ||
+                                    "", alt: nft.name || "NFT", className: "h-full w-full object-cover" }) }, nft.nft_id))) }))] }, collection.collection_id));
+        }) }));
 }

package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.js

@@ -10,7 +10,6 @@ const cn_1 = require("../../../../shared/utils/cn");
 const debug_1 = require("../../../../shared/utils/debug");
 const react_avatar_creator_1 = require("@readyplayerme/react-avatar-creator");
 const react_2 = require("react");
-const sonner_1 = require("sonner");
 const react_3 = require("thirdweb/react");
 const debug = (0, debug_1.debugB3React)("AvatarCreator");
 const config = {
@@ -35,13 +34,13 @@ function AvatarCreator({ onSetAvatar, className }) {
             const avatarUpload = await (0, updateAvatar_1.updateAvatar)(event.data.url);
             debug("@@avatarUpload", avatarUpload);
             await refreshProfile();
-            sonner_1.toast.success(hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!");
+            react_1.toast.success(hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!");
             onSetAvatar?.();
             await refetchRPMToken(undefined);
         }
         catch (e) {
             debug("@@error:AvatarCreator", e);
-            sonner_1.toast.error("Failed to update avatar. Please try again.");
+            react_1.toast.error("Failed to update avatar. Please try again.");
         }
         setIsLoading(false);
     };