@b3dotfun/sdk 0.0.7-alpha.16 → 0.0.7-alpha.18

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

@@ -95,14 +95,15 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     const [activeTab, setActiveTab] = (0, react_2.useState)("crypto");
     // Get current user's wallet
     const currentWallet = (0, react_1.useAccountWallet)();
-    const recipientPropsProfile = (0, react_1.useBsmntProfile)({ address: recipientAddressProps });
-    const recipientAddress = recipientAddressProps || currentWallet.address;
-    const recipientEnsName = recipientAddressProps
-        ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-        : currentWallet.ensName;
-    const recipientImageUrl = recipientAddressProps
-        ? recipientPropsProfile.data?.avatar
-        : currentWallet.wallet.meta?.icon;
+    // Add state for recipient modal
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = (0, react_2.useState)(false);
+    // Add state for custom recipient
+    const [customRecipientAddress, setCustomRecipientAddress] = (0, react_2.useState)(recipientAddressProps);
+    // Update recipient logic to use custom recipient
+    const recipientAddress = customRecipientAddress || currentWallet.address;
+    const recipientPropsProfile = (0, react_1.useBsmntProfile)({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = (0, react_2.useState)(loadOrder);
     const [srcChainId, setSrcChainId] = (0, react_2.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
     // Get token list for token balance check
@@ -350,7 +351,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         ? "Receive NFT at"
                         : orderType === anyspend_1.OrderType.JoinTournament
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full justify-between border-none p-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -408,20 +409,22 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                     }
                                     : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
     // Return the TransitionPanel with all views
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
-                ? oat
-                    ? PanelView.ORDER_DETAILS
-                    : PanelView.LOADING
-                : activePanel === PanelView.ORDER_DETAILS
-                    ? PanelView.CONFIRM_ORDER
-                    : activePanel, className: (0, utils_1.cn)("w-full"), variants: {
-                enter: { x: 300, opacity: 0 },
-                center: { x: 0, opacity: 1 },
-                exit: { x: -300, opacity: 0 },
-            }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
-            ] }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.StyleRoot, { children: [(0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.CONFIRM_ORDER
+                        : activePanel, className: (0, utils_1.cn)("w-full"), variants: {
+                    enter: { x: 300, opacity: 0 },
+                    center: { x: 0, opacity: 1 },
+                    exit: { x: -300, opacity: 0 },
+                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
+                ] }), (0, jsx_runtime_1.jsx)(react_1.Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: (0, jsx_runtime_1.jsx)(react_1.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                                    setIsRecipientModalOpen(false);
+                                }, children: "Save" })] }) }) })] }));
 }

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

@@ -8,6 +8,7 @@ exports.OrderDetailsLoadingView = exports.OrderDetails = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../global-account/react");
+const hooks_1 = require("../../../../shared/react/hooks");
 const utils_1 = require("../../../../shared/utils");
 const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const number_1 = require("../../../../shared/utils/number");
@@ -15,7 +16,6 @@ const react_2 = require("@chakra-ui/react");
 const react_3 = require("@web3icons/react");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
-const navigation_1 = require("next/navigation");
 const qrcode_react_1 = require("qrcode.react");
 const react_4 = require("react");
 const react_timeago_1 = __importDefault(require("react-timeago"));
@@ -121,8 +121,8 @@ function roundTokenAmount(amount) {
     return `${wholePart}.${roundedDecimalPart}`;
 }
 exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, onBack, }) {
-    const router = (0, navigation_1.useRouter)();
-    const searchParams = (0, navigation_1.useSearchParams)();
+    const router = (0, hooks_1.useRouter)();
+    const searchParams = (0, hooks_1.useSearchParams)();
     const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
     const srcToken = anyspend_1.zToken.parse(order.metadata.srcToken);
     const dstToken = anyspend_1.zToken.parse(order.metadata.dstToken);
@@ -227,6 +227,25 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ isMainnet, mode
         params.set("waitingForDeposit", "true");
         router.push(`?${params}`);
     }, [router, searchParams]);
+    // Clean up URL parameters before closing modal or navigating back
+    const cleanupUrlParams = (0, react_4.useCallback)(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete("waitingForDeposit");
+        params.delete("orderId");
+        // Only update URL if params were actually removed
+        if (params.toString() !== searchParams.toString()) {
+            router.push(`?${params}`);
+        }
+    }, [router, searchParams]);
+    // Helper functions that clean up URL params before executing actions
+    const handleCloseModal = (0, react_4.useCallback)(() => {
+        cleanupUrlParams();
+        setB3ModalOpen(false);
+    }, [cleanupUrlParams, setB3ModalOpen]);
+    const handleBack = (0, react_4.useCallback)(() => {
+        cleanupUrlParams();
+        onBack?.();
+    }, [cleanupUrlParams, onBack]);
     (0, react_4.useEffect)(() => {
         if (txSuccess) {
             sonner_1.toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
@@ -279,7 +298,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ isMainnet, mode
                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
                             : null, refundTxs
                             ? refundTxs.map(rTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: `Refunded ${(0, number_1.formatTokenAmount)(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
-                            : null] }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
+                            : null] }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -301,7 +320,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ isMainnet, mode
                                     dstToken,
                                     recipientName,
                                     centerTruncate: centerTruncate_1.default,
-                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === anyspend_1.OrderType.JoinTournament && order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: () => setB3ModalOpen(false), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === anyspend_1.OrderType.JoinTournament && order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -331,7 +350,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ isMainnet, mode
                                     dstToken,
                                     recipientName,
                                     centerTruncate: centerTruncate_1.default,
-                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === anyspend_1.OrderType.JoinTournament && order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: () => setB3ModalOpen(false), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === anyspend_1.OrderType.JoinTournament && order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === anyspend_1.OrderStatus.Executed && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
@@ -381,7 +400,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ isMainnet, mode
                                                         : "Contract execution"
                                                     : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-2", children: [order.type === anyspend_1.OrderType.Swap ? (`~${formattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === anyspend_1.OrderType.MintNFT ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: nft?.name || "NFT" })] })) : order.type === anyspend_1.OrderType.JoinTournament || order.type === anyspend_1.OrderType.FundTournament ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: tournament?.name || "Tournament" })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: order.id })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientName && (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: recipientName }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
                                                 sonner_1.toast.success("Copied recipient address to clipboard");
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary flex items-center gap-2", children: [(0, centerTruncate_1.default)(order.recipientAddress, 10), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" })] })), (0, jsx_runtime_1.jsxs)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: onBack, children: ["Cancel and start over ", (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary flex items-center gap-2", children: [(0, centerTruncate_1.default)(order.recipientAddress, 10), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" })] })), (0, jsx_runtime_1.jsxs)("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: handleBack, children: ["Cancel and start over ", (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 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)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm", style: {

package/dist/cjs/anyspend/react/components/modals/EnterRecipientModal.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnterRecipientModal = EnterRecipientModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("../../../../global-account/react");
+const react_1 = require("../../../../global-account/react");
+const react_2 = require("react");
 function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress, }) {
-    const [modalRecipientAddress, setModalRecipientAddress] = (0, react_1.useState)(recipientAddress || "");
-    (0, react_1.useEffect)(() => {
+    const [modalRecipientAddress, setModalRecipientAddress] = (0, react_2.useState)(recipientAddress || "");
+    (0, react_2.useEffect)(() => {
         setModalRecipientAddress(recipientAddress || "");
     }, [recipientAddress]);
-    return ((0, jsx_runtime_1.jsx)(react_2.Dialog, { open: isOpenPasteRecipientAddress, onOpenChange: setIsOpenPasteRecipientAddress, children: (0, jsx_runtime_1.jsx)(react_2.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: modalRecipientAddress, onChange: e => setModalRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Dialog, { open: isOpenPasteRecipientAddress, onOpenChange: setIsOpenPasteRecipientAddress, children: (0, jsx_runtime_1.jsx)(react_1.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: modalRecipientAddress, onChange: e => setModalRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
                             setIsOpenPasteRecipientAddress(false);
                             setRecipientAddress(modalRecipientAddress);
                         }, children: "Save" })] }) }) }));

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

@@ -62,9 +62,9 @@ function useAccountWallet() {
         smartWalletIcon,
         walletImage,
     ]);
-    // useEffect(() => {
-    //   console.log(`account`, account);
-    //   console.log(`useAccountWallet`, res);
-    // }, [account, res]);
+    (0, react_2.useEffect)(() => {
+        console.log(`account`, account);
+        console.log(`useAccountWallet`, res);
+    }, [account, res]);
     return res;
 }

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokenFromUrl = useTokenFromUrl;
 exports.useTokenFromAddress = useTokenFromAddress;
 const supported_1 = require("../../../shared/constants/chains/supported");
+const hooks_1 = require("../../../shared/react/hooks");
 const react_query_1 = require("@tanstack/react-query");
-const navigation_1 = require("next/navigation");
 async function fetchTokenInfo(network, address) {
     const response = await fetch("https://api.b3.fun/tokens", {
         method: "POST",
@@ -28,10 +28,10 @@ async function fetchTokenInfo(network, address) {
  * Looks for parameters: [prefix]Currency
  */
 function useTokenFromUrl({ defaultToken, prefix }) {
-    const searchParams = (0, navigation_1.useSearchParams)();
+    const searchParams = (0, hooks_1.useSearchParams)();
     // Get parameters from URL
-    const currencyParam = searchParams?.get(`${prefix}Currency`);
-    const chainIdParam = searchParams?.get(`${prefix}ChainId`);
+    const currencyParam = searchParams.get(`${prefix}Currency`);
+    const chainIdParam = searchParams.get(`${prefix}ChainId`);
     // Determine if we should fetch token info
     const shouldFetchToken = Boolean(currencyParam && chainIdParam && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase());
     // Determine network based on chainId

package/dist/cjs/shared/react/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useNavigation";

package/dist/cjs/shared/react/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useNavigation"), exports);

package/dist/cjs/shared/react/hooks/useNavigation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Framework-agnostic hook for reading URL search parameters
+ * Works with Next.js, Vite, and other React applications
+ */
+export declare function useSearchParams(): URLSearchParams;
+/**
+ * Framework-agnostic navigation utility
+ * Works with Next.js, Vite, and other React applications
+ */
+export declare function useRouter(): {
+    push: (url: string) => void;
+};
+/**
+ * Direct utility function for getting search params without a hook
+ * Useful for server-side or one-time usage
+ */
+export declare function getSearchParams(): URLSearchParams | null;

package/dist/cjs/shared/react/hooks/useNavigation.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchParams = useSearchParams;
+exports.useRouter = useRouter;
+exports.getSearchParams = getSearchParams;
+const react_1 = require("react");
+/**
+ * Framework-agnostic hook for reading URL search parameters
+ * Works with Next.js, Vite, and other React applications
+ */
+function useSearchParams() {
+    const [searchParams, setSearchParams] = (0, react_1.useState)(() => {
+        if (typeof window !== "undefined") {
+            return new URLSearchParams(window.location.search);
+        }
+        return new URLSearchParams();
+    });
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== "undefined") {
+            const params = new URLSearchParams(window.location.search);
+            setSearchParams(params);
+            // Listen for URL changes (for client-side routing)
+            const handlePopState = () => {
+                setSearchParams(new URLSearchParams(window.location.search));
+            };
+            window.addEventListener("popstate", handlePopState);
+            return () => window.removeEventListener("popstate", handlePopState);
+        }
+    }, []);
+    return searchParams;
+}
+/**
+ * Framework-agnostic navigation utility
+ * Works with Next.js, Vite, and other React applications
+ */
+function useRouter() {
+    const push = (url) => {
+        if (typeof window !== "undefined") {
+            // For client-side routing frameworks, we should use history.pushState
+            // This will work for most SPA frameworks
+            window.history.pushState({}, "", url);
+            // Dispatch a custom event that components can listen to
+            window.dispatchEvent(new PopStateEvent("popstate"));
+        }
+    };
+    return { push };
+}
+/**
+ * Direct utility function for getting search params without a hook
+ * Useful for server-side or one-time usage
+ */
+function getSearchParams() {
+    if (typeof window !== "undefined") {
+        return new URLSearchParams(window.location.search);
+    }
+    return null;
+}

package/dist/cjs/shared/react/index.d.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/dist/cjs/shared/react/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { eqci, getDefaultToken, isCustomTxMetadata, isNftMetadata, isTournamentMetadata, NftType, OrderStatus, OrderType, RELAY_ETH_ADDRESS, USDC_BASE, useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions, } from "../../../anyspend/index.js";
-import { Badge, Button, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, TransitionPanel, useAccountWallet, useB3, useBsmntProfile, useHasMounted, useModalStore, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
+import { Badge, Button, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, TransitionPanel, useAccountWallet, useB3, useBsmntProfile, useHasMounted, useModalStore, useRouter, useSearchParamsSSR, useTokenBalancesByChain, Dialog, DialogContent, Input, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/index.js";
 import centerTruncate from "../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
@@ -89,14 +89,15 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const [activeTab, setActiveTab] = useState("crypto");
     // Get current user's wallet
     const currentWallet = useAccountWallet();
-    const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
-    const recipientAddress = recipientAddressProps || currentWallet.address;
-    const recipientEnsName = recipientAddressProps
-        ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-        : currentWallet.ensName;
-    const recipientImageUrl = recipientAddressProps
-        ? recipientPropsProfile.data?.avatar
-        : currentWallet.wallet.meta?.icon;
+    // Add state for recipient modal
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
+    // Add state for custom recipient
+    const [customRecipientAddress, setCustomRecipientAddress] = useState(recipientAddressProps);
+    // Update recipient logic to use custom recipient
+    const recipientAddress = customRecipientAddress || currentWallet.address;
+    const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = useState(loadOrder);
     const [srcChainId, setSrcChainId] = useState(isMainnet ? base.id : baseSepolia.id);
     // Get token list for token balance check
@@ -344,7 +345,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                         ? "Receive NFT at"
                         : orderType === OrderType.JoinTournament
                             ? "Join for"
-                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && _jsxs("span", { children: ["@", recipientEnsName] }), _jsx("span", { children: centerTruncate(recipientAddress) })] })] }), _jsx(ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [_jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && _jsxs("span", { children: ["@", recipientEnsName] }), _jsx("span", { children: centerTruncate(recipientAddress) })] })] }), _jsx(ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -402,20 +403,22 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                     }
                                     : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
     // Return the TransitionPanel with all views
-    return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
-                ? oat
-                    ? PanelView.ORDER_DETAILS
-                    : PanelView.LOADING
-                : activePanel === PanelView.ORDER_DETAILS
-                    ? PanelView.CONFIRM_ORDER
-                    : activePanel, className: cn("w-full"), variants: {
-                enter: { x: 300, opacity: 0 },
-                center: { x: 0, opacity: 1 },
-                exit: { x: -300, opacity: 0 },
-            }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                _jsx("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                _jsx("div", { className: "w-full", children: historyView }, "history-view"),
-                _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                _jsx("div", { className: "w-full", children: loadingView }, "loading-view"),
-            ] }) }));
+    return (_jsxs(StyleRoot, { children: [_jsx(TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.CONFIRM_ORDER
+                        : activePanel, className: cn("w-full"), variants: {
+                    enter: { x: 300, opacity: 0 },
+                    center: { x: 0, opacity: 1 },
+                    exit: { x: -300, opacity: 0 },
+                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                    _jsx("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
+                    _jsx("div", { className: "w-full", children: historyView }, "history-view"),
+                    _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                    _jsx("div", { className: "w-full", children: loadingView }, "loading-view"),
+                ] }), _jsx(Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: _jsx(DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "text-as-primary font-semibold", children: "To address" }), _jsx(Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                                    setIsRecipientModalOpen(false);
+                                }, children: "Save" })] }) }) })] }));
 }

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, capitalizeFirstLetter, EVM_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, OnrampVendor, OrderStatus, OrderType, RELAY_ETH_ADDRESS, zNft, zToken, zTournament, } from "../../../../anyspend/index.js";
 import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useChainSwitchWithAction, useModalStore, useOnchainName, } from "../../../../global-account/react/index.js";
+import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
@@ -9,7 +10,6 @@ import { useColorMode } from "@chakra-ui/react";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
 import { motion } from "framer-motion";
 import { CheckIcon, ChevronDown, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw, SquareArrowOutUpRight, } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import TimeAgo from "react-timeago";
@@ -221,6 +221,25 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
         params.set("waitingForDeposit", "true");
         router.push(`?${params}`);
     }, [router, searchParams]);
+    // Clean up URL parameters before closing modal or navigating back
+    const cleanupUrlParams = useCallback(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete("waitingForDeposit");
+        params.delete("orderId");
+        // Only update URL if params were actually removed
+        if (params.toString() !== searchParams.toString()) {
+            router.push(`?${params}`);
+        }
+    }, [router, searchParams]);
+    // Helper functions that clean up URL params before executing actions
+    const handleCloseModal = useCallback(() => {
+        cleanupUrlParams();
+        setB3ModalOpen(false);
+    }, [cleanupUrlParams, setB3ModalOpen]);
+    const handleBack = useCallback(() => {
+        cleanupUrlParams();
+        onBack?.();
+    }, [cleanupUrlParams, onBack]);
     useEffect(() => {
         if (txSuccess) {
             toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
@@ -273,7 +292,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
                             : null, refundTxs
                             ? refundTxs.map(rTx => (_jsx(TransactionDetails, { title: `Refunded ${formatTokenAmount(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
-                            : null] }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
+                            : null] }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -295,7 +314,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     dstToken,
                                     recipientName,
                                     centerTruncate,
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: () => setB3ModalOpen(false), children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -325,7 +344,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     dstToken,
                                     recipientName,
                                     centerTruncate,
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: () => setB3ModalOpen(false), children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
@@ -375,7 +394,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                                         : "Contract execution"
                                                     : "" }), _jsxs("div", { className: "flex items-end gap-2", children: [order.type === OrderType.Swap ? (`~${formattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === OrderType.MintNFT ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), _jsx("div", { children: nft?.name || "NFT" })] })) : order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), _jsx("div", { children: tournament?.name || "Tournament" })] })) : null, _jsxs("div", { className: "text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-primary/30", children: "Order ID" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: order.id })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-primary/30", children: "Recipient" }), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientName && _jsx("div", { className: "text-as-primary font-semibold", children: recipientName }), _jsx(CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
                                                 toast.success("Copied recipient address to clipboard");
-                                            }, children: _jsxs("div", { className: "text-as-primary flex items-center gap-2", children: [centerTruncate(order.recipientAddress, 10), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })), _jsxs("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: onBack, children: ["Cancel and start over ", _jsx(RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
+                                            }, children: _jsxs("div", { className: "text-as-primary flex items-center gap-2", children: [centerTruncate(order.recipientAddress, 10), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })), _jsxs("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: handleBack, children: ["Cancel and start over ", _jsx(RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm", style: {

package/dist/esm/anyspend/react/components/modals/EnterRecipientModal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { Dialog, DialogContent, Input, ShinyButton } from "../../../../global-account/react/index.js";
+import { useEffect, useState } from "react";
 export function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress, }) {
     const [modalRecipientAddress, setModalRecipientAddress] = useState(recipientAddress || "");
     useEffect(() => {

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

@@ -59,9 +59,9 @@ export function useAccountWallet() {
         smartWalletIcon,
         walletImage,
     ]);
-    // useEffect(() => {
-    //   console.log(`account`, account);
-    //   console.log(`useAccountWallet`, res);
-    // }, [account, res]);
+    useEffect(() => {
+        console.log(`account`, account);
+        console.log(`useAccountWallet`, res);
+    }, [account, res]);
     return res;
 }

package/dist/esm/global-account/react/hooks/useTokenFromUrl.js

@@ -1,7 +1,7 @@
 "use client";
 import { getCoingeckoChainInfo } from "../../../shared/constants/chains/supported.js";
+import { useSearchParams } from "../../../shared/react/hooks/index.js";
 import { useQuery } from "@tanstack/react-query";
-import { useSearchParams } from "next/navigation";
 async function fetchTokenInfo(network, address) {
     const response = await fetch("https://api.b3.fun/tokens", {
         method: "POST",
@@ -26,8 +26,8 @@ async function fetchTokenInfo(network, address) {
 export function useTokenFromUrl({ defaultToken, prefix }) {
     const searchParams = useSearchParams();
     // Get parameters from URL
-    const currencyParam = searchParams?.get(`${prefix}Currency`);
-    const chainIdParam = searchParams?.get(`${prefix}ChainId`);
+    const currencyParam = searchParams.get(`${prefix}Currency`);
+    const chainIdParam = searchParams.get(`${prefix}ChainId`);
     // Determine if we should fetch token info
     const shouldFetchToken = Boolean(currencyParam && chainIdParam && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase());
     // Determine network based on chainId

package/dist/esm/shared/react/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useNavigation";

package/dist/esm/shared/react/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useNavigation.js";

package/dist/esm/shared/react/hooks/useNavigation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Framework-agnostic hook for reading URL search parameters
+ * Works with Next.js, Vite, and other React applications
+ */
+export declare function useSearchParams(): URLSearchParams;
+/**
+ * Framework-agnostic navigation utility
+ * Works with Next.js, Vite, and other React applications
+ */
+export declare function useRouter(): {
+    push: (url: string) => void;
+};
+/**
+ * Direct utility function for getting search params without a hook
+ * Useful for server-side or one-time usage
+ */
+export declare function getSearchParams(): URLSearchParams | null;

package/dist/esm/shared/react/hooks/useNavigation.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+/**
+ * Framework-agnostic hook for reading URL search parameters
+ * Works with Next.js, Vite, and other React applications
+ */
+export function useSearchParams() {
+    const [searchParams, setSearchParams] = useState(() => {
+        if (typeof window !== "undefined") {
+            return new URLSearchParams(window.location.search);
+        }
+        return new URLSearchParams();
+    });
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const params = new URLSearchParams(window.location.search);
+            setSearchParams(params);
+            // Listen for URL changes (for client-side routing)
+            const handlePopState = () => {
+                setSearchParams(new URLSearchParams(window.location.search));
+            };
+            window.addEventListener("popstate", handlePopState);
+            return () => window.removeEventListener("popstate", handlePopState);
+        }
+    }, []);
+    return searchParams;
+}
+/**
+ * Framework-agnostic navigation utility
+ * Works with Next.js, Vite, and other React applications
+ */
+export function useRouter() {
+    const push = (url) => {
+        if (typeof window !== "undefined") {
+            // For client-side routing frameworks, we should use history.pushState
+            // This will work for most SPA frameworks
+            window.history.pushState({}, "", url);
+            // Dispatch a custom event that components can listen to
+            window.dispatchEvent(new PopStateEvent("popstate"));
+        }
+    };
+    return { push };
+}
+/**
+ * Direct utility function for getting search params without a hook
+ * Useful for server-side or one-time usage
+ */
+export function getSearchParams() {
+    if (typeof window !== "undefined") {
+        return new URLSearchParams(window.location.search);
+    }
+    return null;
+}

package/dist/esm/shared/react/index.d.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/dist/esm/shared/react/index.js

@@ -0,0 +1 @@
+export * from "./hooks/index.js";

package/dist/types/shared/react/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useNavigation";

package/dist/types/shared/react/hooks/useNavigation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Framework-agnostic hook for reading URL search parameters
+ * Works with Next.js, Vite, and other React applications
+ */
+export declare function useSearchParams(): URLSearchParams;
+/**
+ * Framework-agnostic navigation utility
+ * Works with Next.js, Vite, and other React applications
+ */
+export declare function useRouter(): {
+    push: (url: string) => void;
+};
+/**
+ * Direct utility function for getting search params without a hook
+ * Useful for server-side or one-time usage
+ */
+export declare function getSearchParams(): URLSearchParams | null;

package/dist/types/shared/react/index.d.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/package.json

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

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

@@ -43,6 +43,9 @@ import {
   useRouter,
   useSearchParamsSSR,
   useTokenBalancesByChain,
+  Dialog,
+  DialogContent,
+  Input,
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
@@ -203,15 +206,17 @@ export function AnySpendCustom({
   // Get current user's wallet
   const currentWallet = useAccountWallet();
 
-  const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
+  // Add state for recipient modal
+  const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
 
-  const recipientAddress = recipientAddressProps || currentWallet.address;
-  const recipientEnsName = recipientAddressProps
-    ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-    : currentWallet.ensName;
-  const recipientImageUrl = recipientAddressProps
-    ? recipientPropsProfile.data?.avatar
-    : currentWallet.wallet.meta?.icon;
+  // Add state for custom recipient
+  const [customRecipientAddress, setCustomRecipientAddress] = useState<string | undefined>(recipientAddressProps);
+
+  // Update recipient logic to use custom recipient
+  const recipientAddress = customRecipientAddress || currentWallet.address;
+  const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
+  const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+  const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
 
@@ -505,7 +510,11 @@ export function AnySpendCustom({
                 : "Recipient"}
         </div>
         <div>
-          <Button variant="outline" className="w-full justify-between border-none p-0">
+          <Button
+            variant="outline"
+            className="w-full justify-between border-none p-0"
+            onClick={() => setIsRecipientModalOpen(true)}
+          >
             <div className="flex items-center gap-2">
               {recipientImageUrl && (
                 <img
@@ -864,6 +873,32 @@ export function AnySpendCustom({
           </div>,
         ]}
       </TransitionPanel>
+
+      {/* Add EnterRecipientModal */}
+      <Dialog open={isRecipientModalOpen} onOpenChange={setIsRecipientModalOpen}>
+        <DialogContent className="w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5">
+          <div className="flex flex-col gap-3">
+            <div className="text-as-primary font-semibold">To address</div>
+            <Input
+              value={customRecipientAddress || ""}
+              onChange={e => setCustomRecipientAddress(e.target.value)}
+              placeholder="Enter address"
+              className="h-12 rounded-lg"
+              spellCheck={false}
+            />
+            <ShinyButton
+              accentColor={"hsl(var(--as-brand))"}
+              textColor="text-white"
+              className="w-full rounded-lg"
+              onClick={() => {
+                setIsRecipientModalOpen(false);
+              }}
+            >
+              Save
+            </ShinyButton>
+          </div>
+        </DialogContent>
+      </Dialog>
     </StyleRoot>
   );
 }

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

@@ -36,6 +36,7 @@ import {
   useModalStore,
   useOnchainName,
 } from "@b3dotfun/sdk/global-account/react";
+import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
@@ -53,7 +54,6 @@ import {
   RefreshCcw,
   SquareArrowOutUpRight,
 } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import TimeAgo from "react-timeago";
@@ -340,6 +340,29 @@ export const OrderDetails = memo(function OrderDetails({
     router.push(`?${params}`);
   }, [router, searchParams]);
 
+  // Clean up URL parameters before closing modal or navigating back
+  const cleanupUrlParams = useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete("waitingForDeposit");
+    params.delete("orderId");
+
+    // Only update URL if params were actually removed
+    if (params.toString() !== searchParams.toString()) {
+      router.push(`?${params}`);
+    }
+  }, [router, searchParams]);
+
+  // Helper functions that clean up URL params before executing actions
+  const handleCloseModal = useCallback(() => {
+    cleanupUrlParams();
+    setB3ModalOpen(false);
+  }, [cleanupUrlParams, setB3ModalOpen]);
+
+  const handleBack = useCallback(() => {
+    cleanupUrlParams();
+    onBack?.();
+  }, [cleanupUrlParams, onBack]);
+
   useEffect(() => {
     if (txSuccess) {
       toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
@@ -446,7 +469,7 @@ export const OrderDetails = memo(function OrderDetails({
         )}
         <button
           className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-          onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
+          onClick={mode === "page" ? handleBack : handleCloseModal}
         >
           {mode === "page" ? (
             <>
@@ -539,7 +562,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={() => setB3ModalOpen(false)}
+            onClick={handleCloseModal}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -549,7 +572,7 @@ export const OrderDetails = memo(function OrderDetails({
         {order.status === OrderStatus.Executed && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-            onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
+            onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
               <>
@@ -667,7 +690,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={() => setB3ModalOpen(false)}
+            onClick={handleCloseModal}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -677,7 +700,7 @@ export const OrderDetails = memo(function OrderDetails({
         {order.status === OrderStatus.Executed && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-            onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
+            onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
               <>
@@ -1075,7 +1098,7 @@ export const OrderDetails = memo(function OrderDetails({
 
       <button
         className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-        onClick={onBack}
+        onClick={handleBack}
       >
         Cancel and start over <RefreshCcw className="ml-2 h-4 w-4" />
       </button>

package/src/anyspend/react/components/modals/EnterRecipientModal.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 import { Dialog, DialogContent, Input, ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { useEffect, useState } from "react";
 
 export function EnterRecipientModal({
   isOpenPasteRecipientAddress,

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -101,10 +101,10 @@ export function useAccountWallet(): {
     ],
   );
 
-  // useEffect(() => {
-  //   console.log(`account`, account);
-  //   console.log(`useAccountWallet`, res);
-  // }, [account, res]);
+  useEffect(() => {
+    console.log(`account`, account);
+    console.log(`useAccountWallet`, res);
+  }, [account, res]);
 
   return res;
 }

package/src/global-account/react/hooks/useTokenFromUrl.tsx

@@ -2,8 +2,8 @@
 
 import { Token } from "@b3dotfun/sdk/anyspend";
 import { getCoingeckoChainInfo } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
 import { useQuery } from "@tanstack/react-query";
-import { useSearchParams } from "next/navigation";
 
 interface UseTokenFromUrlOptions {
   /**
@@ -56,8 +56,8 @@ export function useTokenFromUrl({ defaultToken, prefix }: UseTokenFromUrlOptions
   const searchParams = useSearchParams();
 
   // Get parameters from URL
-  const currencyParam = searchParams?.get(`${prefix}Currency`);
-  const chainIdParam = searchParams?.get(`${prefix}ChainId`);
+  const currencyParam = searchParams.get(`${prefix}Currency`);
+  const chainIdParam = searchParams.get(`${prefix}ChainId`);
 
   // Determine if we should fetch token info
   const shouldFetchToken = Boolean(

package/src/shared/react/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useNavigation";

package/src/shared/react/hooks/useNavigation.ts

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Framework-agnostic hook for reading URL search parameters
+ * Works with Next.js, Vite, and other React applications
+ */
+export function useSearchParams() {
+  const [searchParams, setSearchParams] = useState<URLSearchParams>(() => {
+    if (typeof window !== "undefined") {
+      return new URLSearchParams(window.location.search);
+    }
+    return new URLSearchParams();
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      setSearchParams(params);
+
+      // Listen for URL changes (for client-side routing)
+      const handlePopState = () => {
+        setSearchParams(new URLSearchParams(window.location.search));
+      };
+
+      window.addEventListener("popstate", handlePopState);
+      return () => window.removeEventListener("popstate", handlePopState);
+    }
+  }, []);
+
+  return searchParams;
+}
+
+/**
+ * Framework-agnostic navigation utility
+ * Works with Next.js, Vite, and other React applications
+ */
+export function useRouter() {
+  const push = (url: string) => {
+    if (typeof window !== "undefined") {
+      // For client-side routing frameworks, we should use history.pushState
+      // This will work for most SPA frameworks
+      window.history.pushState({}, "", url);
+
+      // Dispatch a custom event that components can listen to
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    }
+  };
+
+  return { push };
+}
+
+/**
+ * Direct utility function for getting search params without a hook
+ * Useful for server-side or one-time usage
+ */
+export function getSearchParams(): URLSearchParams | null {
+  if (typeof window !== "undefined") {
+    return new URLSearchParams(window.location.search);
+  }
+  return null;
+}

package/src/shared/react/index.ts

@@ -0,0 +1 @@
+export * from "./hooks";