@b3dotfun/sdk 0.0.65-test.4 → 0.0.65-test.6

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

@@ -794,7 +794,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         };
     }, [activePanel, navigateBack]);
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
                     setOrderId(undefined);
                     navigateBack();
                     setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back

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

@@ -39,6 +39,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
     const walletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Use custom hook to determine wallet display logic
     const { shouldShowConnectedEOA, shouldShowWagmiWallet } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
+    console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
     // Map wagmi connector names to thirdweb wallet IDs
     const getThirdwebWalletId = (connectorName) => {
         const walletMap = {
@@ -204,7 +205,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                                                     sonner_1.toast.success("Selected B3 Account");
                                                 }, className: (0, cn_1.cn)("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
                                                     ? "connected-wallet border-as-brand bg-as-brand/5"
-                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [walletImage ? ((0, jsx_runtime_1.jsx)("img", { src: walletImage, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "other-payment-methods", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                                    : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [walletImage ? ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "other-payment-methods", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                                                     // Always show wallet selection modal first
                                                     setShowWalletModal(true);
                                                 }, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {

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

@@ -60,9 +60,9 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
     }
     // Show loading state while checking geo availability
     if (isLoadingGeoOnramp) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", 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.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary ml-2 text-sm", children: "Loading payment methods..." })] })] }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method 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 items-center gap-4", 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.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary ml-2 text-sm", children: "Loading payment methods..." })] })] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", 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.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: availablePaymentMethods.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method-no-methods bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No payment methods available in your region for the selected amount." }) })) : (availablePaymentMethods.map(method => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method 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 items-center gap-4", 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.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: availablePaymentMethods.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method-no-methods bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No payment methods available in your region for the selected amount." }) })) : (availablePaymentMethods.map(method => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                             setSelectedPaymentMethod(method.id);
                             onSelectPaymentMethod(method.id);
                         }, className: (0, cn_1.cn)("fiat-payment-method-item bg-as-surface-secondary border-as-border-secondary flex w-full items-center gap-4 rounded-2xl border p-4 transition-all duration-200", selectedPaymentMethod === method.id

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

@@ -416,7 +416,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                                         ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
                                                         : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", 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 ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), (0, jsx_runtime_1.jsxs)("button", { className: "order-details-cancel-btn flex w-full items-center justify-center gap-2", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", 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 ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), (0, jsx_runtime_1.jsxs)("button", { className: "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));

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

@@ -16,7 +16,7 @@ function OrderHistory({ mode, onBack, onSelectOrder }) {
     const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, react_1.useAnyspendOrderHistory)(address);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Order History", showCloseButton: false, handleBack: onBack, className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", onClick: () => {
                         refetchOrderHistory();
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) }) }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-3 px-5", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 px-5 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-3 px-5 pt-5", children: [...orderHistory]
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) }) }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-3 px-5", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 px-5 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full px-5 pt-5", children: [...orderHistory]
                     .sort((a, b) => b.createdAt - a.createdAt)
                     .map(order => ((0, jsx_runtime_1.jsx)(OrderHistoryItem_1.OrderHistoryItem, { order: order, onSelectOrder: onSelectOrder, mode: mode }, order.id))) }))] }));
 }

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: [(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
                                                     ? BigInt(actualDstAmount)
                                                     : expectedDstAmount
                                                         ? BigInt(expectedDstAmount)

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

@@ -14,6 +14,7 @@ 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
@@ -76,8 +77,9 @@ 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`,
+    console.log("srcAmountOnRamp :", srcAmountOnRamp.length);
+    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/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 px-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 })] })] }) }));
+    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/hooks/useConnectedWalletDisplay.js

@@ -22,7 +22,8 @@ function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const isWalletDuplicated = isSameAddress(connectedEOAAddress, 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/global-account/react/components/AccountAssets/AccountAssets.js

@@ -5,15 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 function AccountAssets({ nfts, isLoading }) {
     // Initialize with all collections expanded
-    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: "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" });
-    }
     // Group NFTs by collection
-    const groupedNFTs = nfts.nfts.reduce((acc, nft) => {
+    const groupedNFTs = nfts?.nfts?.reduce((acc, nft) => {
         const collectionId = nft.collection?.collection_id || "unknown";
         if (!acc[collectionId]) {
             acc[collectionId] = {
@@ -26,7 +19,14 @@ function AccountAssets({ nfts, isLoading }) {
         acc[collectionId].nfts.push(nft);
         return acc;
     }, {});
-    const collections = Object.values(groupedNFTs);
+    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: "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" });
+    }
     const toggleCollection = (collectionId) => {
         setExpandedCollections(prev => {
             const next = new Set(prev);

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

@@ -301,14 +301,14 @@ function AvatarEditor({ onSetAvatar, className }) {
         };
     })
         .filter(p => p.avatar !== null) || []; // Filter out profiles with invalid avatars
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex w-full max-w-md flex-col bg-white", className), children: [viewStep === "upload" && (0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Upload Image" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center p-6", children: [viewStep === "select" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-32 w-32 overflow-hidden rounded-full", children: safePreviewUrl || selectedAvatar || currentAvatar ? ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: safePreviewUrl || selectedAvatar || currentAvatar || "", alt: "Avatar preview", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-full w-full" })) }), (selectedAvatar !== currentAvatar || selectedFile) && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRemovePreview, className: "absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadImageClick, className: "font-inter mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] shadow-sm transition-colors hover:bg-[#f4f4f5]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "h-4 w-4" }), "Upload image"] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-4 text-sm font-semibold text-[#475467]", children: "Pick an avatar from your linked profiles, ENS or upload a new one." }), (0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex gap-3", children: profileAvatars.map((profileAvatar, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("b3-modal-avatar-editor flex w-full max-w-md flex-col bg-white", className), children: [viewStep === "upload" && (0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Upload Image" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center p-6", children: [viewStep === "select" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-32 w-32 overflow-hidden rounded-full", children: safePreviewUrl || selectedAvatar || currentAvatar ? ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: safePreviewUrl || selectedAvatar || currentAvatar || "", alt: "Avatar preview", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-full w-full" })) }), (selectedAvatar !== currentAvatar || selectedFile) && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRemovePreview, className: "absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadImageClick, className: "font-inter mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] shadow-sm transition-colors hover:bg-[#f4f4f5]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "h-4 w-4" }), "Upload image"] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-4 text-sm font-semibold text-[#475467]", children: "Pick an avatar from your linked profiles, ENS or upload a new one." }), (0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex gap-3", children: profileAvatars.map((profileAvatar, index) => {
                                             // Skip if avatar is null (should not happen due to filter, but TypeScript doesn't know that)
                                             if (!profileAvatar.avatar)
                                                 return null;
                                             return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", onMouseEnter: () => setHoveredProfile(profileAvatar.type), onMouseLeave: () => setHoveredProfile(null), children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleProfileAvatarSelect(profileAvatar.avatar || "", profileAvatar.type || ""), className: (0, cn_1.cn)("h-16 w-16 overflow-hidden rounded-full border-2 transition-all", selectedProfileType === profileAvatar.type
                                                             ? "border-[#3368ef] ring-2 ring-[#3368ef]/20"
                                                             : "border-transparent hover:border-[#e4e4e7]"), children: (0, jsx_runtime_1.jsx)("img", { src: profileAvatar.avatar, alt: `${profileAvatar.type} avatar`, className: "h-full w-full object-cover" }) }), hoveredProfile === profileAvatar.type && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#18181b] px-3 py-1.5 text-xs text-white", children: profileAvatar.name }))] }, index));
-                                        }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleLinkMoreAccount, className: "font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.75 2.75C8.75 2.33579 8.41421 2 8 2C7.58579 2 7.25 2.33579 7.25 2.75V7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H7.25V13.25C7.25 13.6642 7.58579 14 8 14C8.41421 14 8.75 13.6642 8.75 13.25V8.75H13.25C13.6642 8.75 14 8.41421 14 8C14 7.58579 13.6642 7.25 13.25 7.25H8.75V2.75Z", fill: "currentColor" }) }), "Link more account"] })] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !selectedFile ? ((0, jsx_runtime_1.jsxs)("div", { onClick: handleOpenFilePicker, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: (0, cn_1.cn)("mb-6 flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-16 transition-colors", isDragging
+                                        }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleLinkMoreAccount, className: "b3-modal-link-more-account font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.75 2.75C8.75 2.33579 8.41421 2 8 2C7.58579 2 7.25 2.33579 7.25 2.75V7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H7.25V13.25C7.25 13.6642 7.58579 14 8 14C8.41421 14 8.75 13.6642 8.75 13.25V8.75H13.25C13.6642 8.75 14 8.41421 14 8C14 7.58579 13.6642 7.25 13.25 7.25H8.75V2.75Z", fill: "currentColor" }) }), "Link more account"] })] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !selectedFile ? ((0, jsx_runtime_1.jsxs)("div", { onClick: handleOpenFilePicker, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: (0, cn_1.cn)("b3-modal-upload-view mb-6 flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-16 transition-colors", isDragging
                                 ? "border-[#3368ef] bg-[#f0f5ff]"
                                 : "border-[#e4e4e7] hover:border-[#3368ef] hover:bg-[#f0f5ff]"), children: [(0, jsx_runtime_1.jsxs)("p", { className: "font-inter mb-1 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-[#3368ef]", children: "Click to upload" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#71717a]", children: " or drag and drop" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[#71717a]", children: "PNG, JPG or GIF (up to 5MB)" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: safePreviewUrl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_easy_crop_1.default, { image: safePreviewUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onCropComplete: onCropComplete, onZoomChange: setZoom, cropShape: "rect", showGrid: false, style: {
                                                     containerStyle: {
@@ -320,5 +320,5 @@ function AvatarEditor({ onSetAvatar, className }) {
                                                         border: "2px solid #3368ef",
                                                         borderRadius: "0px",
                                                     },
-                                                } }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRemovePreview, className: "absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-full w-full" })) }), safePreviewUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "flex-shrink-0 text-sm font-semibold text-[#475467]", children: "Zoom" }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: 1, max: 3, step: 0.1, value: zoom, onChange: e => setZoom(Number(e.target.value)), className: "flex-1 accent-[#3368ef]" })] }))] })) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleCancel, variant: "outline", disabled: isLoading, className: "flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]", children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleSaveChanges, disabled: isLoading || (!selectedFile && !selectedProfileType), className: "flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ("Save changes") })] })] }));
+                                                } }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRemovePreview, className: "absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-full w-full" })) }), safePreviewUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "flex-shrink-0 text-sm font-semibold text-[#475467]", children: "Zoom" }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: 1, max: 3, step: 0.1, value: zoom, onChange: e => setZoom(Number(e.target.value)), className: "flex-1 accent-[#3368ef]" })] }))] })) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleCancel, variant: "outline", disabled: isLoading, className: "flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]", children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleSaveChanges, disabled: isLoading || (!selectedFile && !selectedProfileType), className: "b3-modal-save-button flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ("Save changes") })] })] }));
 }

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

@@ -77,10 +77,11 @@ function B3DynamicModal() {
     ];
     // Check if current content type is in freestyle types
     const isFreestyleType = freestyleTypes.includes(contentType?.type);
+    console.log("contentType :", contentType);
     const hideCloseButton = true;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
-    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6");
+    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:p-0", contentType?.type === "send" && "p-0", contentType?.type === "manageAccount" && " md:p-0 md:pt-2", contentType?.type === "linkAccount" && "md:p-0");
     debug("contentType", contentType);
     const renderContent = () => {
         if (!contentType)

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

@@ -29,7 +29,7 @@ const IPFS_GATEWAY_URL = "https://cloudflare-ipfs.com";
 function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.client, width, height, controls, style, }) {
     // If no source, render fallback
     if (!src) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-label": alt, children: (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-label": alt, children: (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
     }
     // Convert IPFS URLs to HTTP gateway URLs if needed
     // This handles both ipfs:// URLs and existing HTTP gateway URLs

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

@@ -32,6 +32,7 @@ const formatProfileTitle = (title) => {
 const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
 const LinkAccount = ({ partnerId, onLogout, chain, }) => {
     const [unlinkingAccountId, setUnlinkingAccountId] = (0, react_2.useState)(null);
+    const [profileToUnlink, setProfileToUnlink] = (0, react_2.useState)(null);
     const { data: profilesRaw = [], isLoading: isLoadingProfiles } = (0, react_3.useProfiles)({ client: thirdweb_1.client });
     const { mutate: unlinkProfile, isPending: isUnlinking } = (0, react_3.useUnlinkProfile)();
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
@@ -100,16 +101,34 @@ const LinkAccount = ({ partnerId, onLogout, chain, }) => {
         ...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
         originalProfile: profile,
     }));
-    const handleUnlink = async (profile) => {
-        setUnlinkingAccountId(profile.title);
-        try {
-            unlinkProfile({ client: thirdweb_1.client, profileToUnlink: profile.originalProfile }, mutationOptions);
+    console.log("profiles :", profiles);
+    // Reset confirmation state after 3 seconds
+    (0, react_2.useEffect)(() => {
+        if (profileToUnlink) {
+            const timer = setTimeout(() => {
+                setProfileToUnlink(null);
+            }, 5000);
+            return () => clearTimeout(timer);
         }
-        catch (error) {
-            console.error("Error unlinking account:", error);
+    }, [profileToUnlink]);
+    const handleUnlinkClick = (profile) => {
+        // If this profile is already pending confirmation, perform the unlink
+        if (profileToUnlink?.title === profile.title) {
+            setUnlinkingAccountId(profile.title);
+            try {
+                unlinkProfile({ client: thirdweb_1.client, profileToUnlink: profile.originalProfile }, mutationOptions);
+            }
+            catch (error) {
+                console.error("Error unlinking account:", error);
+            }
+            finally {
+                setUnlinkingAccountId(null);
+                setProfileToUnlink(null);
+            }
         }
-        finally {
-            setUnlinkingAccountId(null);
+        else {
+            // First click - set pending confirmation
+            setProfileToUnlink(profile);
         }
     };
     const handleOpenLinkModal = () => {
@@ -145,7 +164,9 @@ const LinkAccount = ({ partnerId, onLogout, chain, }) => {
                                                                             ? "font-mono text-sm" // Use monospace font for addresses
                                                                             : "break-words" // Use break-words for emails/names (better than break-all)
                                                                         }`, title: isAddress ? profile.title : undefined, children: displayTitle }), isAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100", title: "Copy full address", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 12, className: "text-gray-500 hover:text-gray-700" }) }))] }));
-                                                        })(), (0, jsx_runtime_1.jsx)("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), (0, jsx_runtime_1.jsx)("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-account-unlink-loading animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" })), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleOpenLinkModal, disabled: isLinking, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0001 13.3333V6.66667M6.66675 10H13.3334M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10Z", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Link new account" })] }) })] }), showReferralInfo && (
+                                                        })(), (0, jsx_runtime_1.jsx)("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), (0, jsx_runtime_1.jsx)("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: profileToUnlink?.title === profile.title ? "sm" : "icon", className: `linked-account-unlink-button transition-all ${profileToUnlink?.title === profile.title
+                                        ? "bg-b3-negative hover:bg-b3-negative/90 text-white"
+                                        : "text-b3-grey hover:text-b3-negative"}`, onClick: () => handleUnlinkClick(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-account-unlink-loading h-4 w-4 animate-spin" })) : profileToUnlink?.title === profile.title ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 14, className: "linked-account-unlink-icon" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold", children: "Unlink" })] })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty font-neue-montreal-medium text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" })), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleOpenLinkModal, disabled: isLinking, className: "b3-modal-link-new-account-button bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0001 13.3333V6.66667M6.66675 10H13.3334M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10Z", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Link new account" })] }) })] }), showReferralInfo && (
             /* Referral Section */
             (0, jsx_runtime_1.jsxs)("div", { className: "referrals-section space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header-editing", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-edit-form flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
                                                         setIsEditingCode(false);

package/dist/cjs/global-account/react/components/ManageAccount/BottomNavigation.js

@@ -13,7 +13,7 @@ const SettingsIcon = () => {
 };
 const BottomNavigation = () => {
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: (0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [(0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [(0, jsx_runtime_1.jsx)(HomeIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), (0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: (0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [(0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [(0, jsx_runtime_1.jsx)(HomeIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), (0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", onClick: () => {
                         setB3ModalContentType({
                             type: "anySpend",
                             showBackButton: true,

package/dist/cjs/global-account/react/components/ManageAccount/Header.js

@@ -76,7 +76,7 @@ function WalletItem({ wallet, isActive, onClick }) {
                     : isGlobalAccount
                         ? "Smart Wallet"
                         : "Wallet";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors ${isActive ? "bg-[#F4F4F5]" : "hover:bg-b3-line/50"}`, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isGlobalAccount ? ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center p-1", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? ((0, jsx_runtime_1.jsx)("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center", children: (0, jsx_runtime_1.jsx)(WalletIcon_1.WalletIcon, {}) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && ((0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: (0, jsx_runtime_1.jsx)(CheckIcon, {}) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `b3-modal-wallet-item ${isActive ? "b3-modal-wallet-item-active bg-[#F4F4F5]" : "hover:bg-b3-line/50"} box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isGlobalAccount ? ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center p-1", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? ((0, jsx_runtime_1.jsx)("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center", children: (0, jsx_runtime_1.jsx)(WalletIcon_1.WalletIcon, {}) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && ((0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: (0, jsx_runtime_1.jsx)(CheckIcon, {}) }))] }));
 }
 function Header({ onLogout }) {
     const activeWallet = (0, react_3.useActiveWallet)();
@@ -114,7 +114,7 @@ function Header({ onLogout }) {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: "single", collapsible: true, value: isExpanded ? "wallet-switcher" : "", className: "bg-b3-background border-b3-line relative border-b", onValueChange: (value) => setIsExpanded(value === "wallet-switcher"), children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: "wallet-switcher", className: "border-none", children: [(0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { className: "group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isActiveGlobalAccount ? ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center p-1", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : activeWalletImage ? ((0, jsx_runtime_1.jsx)("img", { src: activeWalletImage, alt: "Active Wallet", className: "size-full object-contain p-1" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center", children: (0, jsx_runtime_1.jsx)(WalletIcon_1.WalletIcon, {}) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Active Wallet" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: address })] })] })] }), (0, jsx_runtime_1.jsx)(ChevronDownIcon_1.ChevronDownIcon, { className: "text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isExpanded && ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { forceMount: true, className: "absolute left-0 right-0 top-full z-50 overflow-visible", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, ease: "easeInOut" }, className: "flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [connectedWallets.map(wallet => ((0, jsx_runtime_1.jsx)(WalletItem, { wallet: wallet, isActive: activeWallet?.id === wallet.id, onClick: () => handleWalletSwitch(wallet) }, wallet.id))), (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors", onClick: handleLinkWallet, children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(LinkIcon_1.default, { className: "text-b3-grey" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Link another wallet" }) })] })] }), (0, jsx_runtime_1.jsxs)("button", { className: "border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: "single", collapsible: true, value: isExpanded ? "wallet-switcher" : "", className: "b3-modal-wallet-switcher bg-b3-background border-b3-line relative border-b", onValueChange: (value) => setIsExpanded(value === "wallet-switcher"), children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: "wallet-switcher", className: "border-none", children: [(0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { className: "b3-modal-wallet-switcher-trigger group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isActiveGlobalAccount ? ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center p-1", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : activeWalletImage ? ((0, jsx_runtime_1.jsx)("img", { src: activeWalletImage, alt: "Active Wallet", className: "size-full object-contain p-1" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex size-full items-center justify-center", children: (0, jsx_runtime_1.jsx)(WalletIcon_1.WalletIcon, {}) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: "Active Wallet" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: address })] })] })] }), (0, jsx_runtime_1.jsx)(ChevronDownIcon_1.ChevronDownIcon, { className: "b3-modal-wallet-switcher-chevron text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isExpanded && ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { forceMount: true, className: "absolute left-0 right-0 top-full z-50 overflow-visible", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, ease: "easeInOut" }, className: "b3-modal-wallet-switcher-content flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [connectedWallets.map(wallet => ((0, jsx_runtime_1.jsx)(WalletItem, { wallet: wallet, isActive: activeWallet?.id === wallet.id, onClick: () => handleWalletSwitch(wallet) }, wallet.id))), (0, jsx_runtime_1.jsxs)("div", { className: "b3-modal-link-another-wallet hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors", onClick: handleLinkWallet, children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(LinkIcon_1.default, { className: "text-b3-grey" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Link another wallet" }) })] })] }), (0, jsx_runtime_1.jsxs)("button", { className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
                                         boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
                                     }, children: [logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin", size: 20 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.default, { size: 20, className: "text-b3-grey" })), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-base", children: "Sign out" })] })] }) })) })] }) }));
 }

package/dist/cjs/global-account/react/components/ManageAccount/HomeActions.js

@@ -13,7 +13,7 @@ const HomeActionButton = ({ customClass, icon, label, onClick, }) => {
 const HomeActions = ({ showDeposit, showSwap }) => {
     const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6", children: [showDeposit && ((0, jsx_runtime_1.jsx)(HomeActionButton, { customClass: "manage-account-deposit", icon: (0, jsx_runtime_1.jsx)(BankIcon_1.BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), label: "Deposit", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "b3-modal-home-actions border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6", children: [showDeposit && ((0, jsx_runtime_1.jsx)(HomeActionButton, { customClass: "manage-account-deposit", icon: (0, jsx_runtime_1.jsx)(BankIcon_1.BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), label: "Deposit", onClick: () => {
                     setB3ModalOpen(true);
                     setB3ModalContentType({
                         type: "deposit",

package/dist/cjs/global-account/react/components/ManageAccount/HomeContent.js

@@ -12,5 +12,5 @@ const NFTContent_1 = __importDefault(require("./NFTContent"));
 const ProfileSection_1 = __importDefault(require("./ProfileSection"));
 const TokenContent_1 = __importDefault(require("./TokenContent"));
 function HomeContent({ showDeposit = false, showSwap = true }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(ProfileSection_1.default, {}), (0, jsx_runtime_1.jsx)(HomeActions_1.default, { showDeposit: showDeposit, showSwap: showSwap }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2 p-5", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "balance", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.TabsList, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), (0, jsx_runtime_1.jsx)(Tabs_1.TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), (0, jsx_runtime_1.jsx)(Tabs_1.TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(TokenContent_1.default, {}) }), (0, jsx_runtime_1.jsx)(Tabs_1.TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(NFTContent_1.default, {}) })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(ProfileSection_1.default, {}), (0, jsx_runtime_1.jsx)(HomeActions_1.default, { showDeposit: showDeposit, showSwap: showSwap }), (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-balance-content space-y-2 p-5", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "balance", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.TabsList, { className: "b3-modal-balance-tabs-list", children: [(0, jsx_runtime_1.jsx)(Tabs_1.TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), (0, jsx_runtime_1.jsx)(Tabs_1.TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), (0, jsx_runtime_1.jsx)(Tabs_1.TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(TokenContent_1.default, {}) }), (0, jsx_runtime_1.jsx)(Tabs_1.TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(NFTContent_1.default, {}) })] }) })] })] }));
 }

package/dist/cjs/global-account/react/components/ManageAccount/ProfileSection.js

@@ -42,6 +42,6 @@ const ProfileSection = () => {
     const avatarSrc = user?.avatar || profile?.avatar;
     // Get current username - prioritize user.username, fallback to profile data
     const currentUsername = user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "");
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between px-5 py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [(0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted", children: " $" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[30px]", children: (0, number_1.formatDisplayNumber)(totalBalanceUsd, { fractionDigits: 2 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between px-5 py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [(0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted", children: " $" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[30px]", children: (0, number_1.formatDisplayNumber)(totalBalanceUsd, { fractionDigits: 2 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
 };
 exports.default = ProfileSection;

package/dist/cjs/global-account/react/components/ManageAccount/SettingsContent.js

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const react_2 = require("thirdweb/react");
 const LinkIcon_1 = __importDefault(require("../icons/LinkIcon"));
 const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
 const SettingsMenuItem_1 = __importDefault(require("./SettingsMenuItem"));
@@ -12,6 +14,8 @@ const SettingsProfileCard_1 = __importDefault(require("./SettingsProfileCard"));
 const SettingsContent = ({ partnerId, onLogout, chain, }) => {
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
     const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const { data: profilesRaw = [] } = (0, react_2.useProfiles)({ client: thirdweb_1.client });
+    const profiles = profilesRaw.filter((profile) => !["custom_auth_endpoint"].includes(profile.type));
     const handleNavigate = (type) => {
         if (type === "home") {
             setB3ModalContentType({
@@ -45,6 +49,6 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         }
         setB3ModalOpen(true);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3 px-5", children: (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)(LinkIcon_1.default, { className: "text-b3-grey-500" }), title: "Linked Accounts", subtitle: "3 connected accounts", onClick: () => handleNavigate("linkAccount") }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3 px-5", children: (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)(LinkIcon_1.default, { className: "text-b3-grey-500" }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }) })] }));
 };
 exports.default = SettingsContent;

package/dist/cjs/global-account/react/components/ManageAccount/SettingsMenuItem.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const SettingsMenuItem = ({ icon, title, subtitle, onClick }) => {
-    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-start gap-1 text-left", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]", children: title }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]", children: subtitle })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, className: "text-[#51525c]" })] }));
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-start gap-1 text-left", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]", children: title }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]", children: subtitle })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, className: "text-[#51525c]" })] }));
 };
 exports.default = SettingsMenuItem;

package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -101,6 +101,6 @@ const SettingsProfileCard = () => {
                 /* Edit mode - inline input */
                 (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-semibold focus:border-b3-primary-blue w-full rounded-md border px-2 py-1 text-lg leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 18, className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, strokeWidth: 2.5 }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
                 /* Display mode */
-                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
 };
 exports.default = SettingsProfileCard;

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

@@ -7,6 +7,6 @@ const stores_1 = require("../../stores");
 const ModalHeader = ({ showBackButton = true, handleBack, handleClose, title, children, showCloseButton = true, className, showBackWord = false, }) => {
     const navigateBack = (0, stores_1.useModalStore)(state => state.navigateBack);
     const setB3ModalOpen = (0, stores_1.useModalStore)(state => state.setB3ModalOpen);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className), children: [showBackButton ? ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack || navigateBack, className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-6 w-6 rotate-90 text-[#51525c]" }), showBackWord && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-2" })), (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-lg font-semibold leading-7 text-[#18181b]", children: title }), showCloseButton ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose || (() => setB3ModalOpen(false)), className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6 text-[#51525c]" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-2" })), children] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("b3-modal-header flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className), children: [showBackButton ? ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack || navigateBack, className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6 text-[#51525c]" }), showBackWord && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-2" })), (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-lg font-semibold leading-7 text-[#18181b]", children: title }), showCloseButton ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose || (() => setB3ModalOpen(false)), className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6 text-[#51525c]" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-2" })), children] }));
 };
 exports.default = ModalHeader;