@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,700 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelView = void 0;
+exports.default = AnySpend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../anyspend");
+const StyleRoot_1 = __importDefault(require("../../../global-account/react/components/StyleRoot"));
+const button_1 = require("../../../global-account/react/components/ui/button");
+const ShinyButton_1 = __importDefault(require("../../../global-account/react/components/ui/ShinyButton"));
+const transition_panel_1 = require("../../../global-account/react/components/ui/transition-panel");
+const useAccountWallet_1 = require("../../../global-account/react/hooks/useAccountWallet");
+const useOnchainName_1 = require("../../../global-account/react/hooks/useOnchainName");
+const useRouter_1 = require("../../../global-account/react/hooks/useRouter");
+const useSearchParamsSSR_1 = __importDefault(require("../../../global-account/react/hooks/useSearchParamsSSR"));
+const useTokenData_1 = require("../../../global-account/react/hooks/useTokenData");
+const useTokenFromUrl_1 = require("../../../global-account/react/hooks/useTokenFromUrl");
+const formatAddress_1 = require("../../../shared/utils/formatAddress");
+const cn_1 = require("../../../shared/utils/cn");
+const number_1 = require("../../../shared/utils/number");
+const framer_motion_1 = require("framer-motion");
+const invariant_1 = __importDefault(require("invariant"));
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const sonner_1 = require("sonner");
+const viem_1 = require("viem");
+const chains_1 = require("viem/chains");
+const OrderDetails_1 = require("./common/OrderDetails");
+const OrderHistory_1 = __importDefault(require("./common/OrderHistory"));
+const OrderStatus_1 = require("./common/OrderStatus");
+const OrderTokenAmount_1 = require("./common/OrderTokenAmount");
+const PanelOnramp_1 = require("./common/PanelOnramp");
+const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
+const TokenBalance_1 = __importDefault(require("./common/TokenBalance"));
+const EnterRecipientModal_1 = require("./modals/EnterRecipientModal");
+var PanelView;
+(function (PanelView) {
+    PanelView[PanelView["MAIN"] = 0] = "MAIN";
+    PanelView[PanelView["HISTORY"] = 1] = "HISTORY";
+    PanelView[PanelView["ORDER_DETAILS"] = 2] = "ORDER_DETAILS";
+    PanelView[PanelView["LOADING"] = 3] = "LOADING";
+    PanelView[PanelView["FIAT_PAYMENT"] = 4] = "FIAT_PAYMENT";
+})(PanelView || (exports.PanelView = PanelView = {}));
+const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
+function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton }) {
+    const searchParams = (0, useSearchParamsSSR_1.default)();
+    const router = (0, useRouter_1.useRouter)();
+    // Determine if we're in "buy mode" based on whether destination token props are provided
+    const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
+    // Add refs to track URL state
+    const initialUrlProcessed = (0, react_1.useRef)(false);
+    const lastUrlUpdate = (0, react_1.useRef)(null);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(defaultActiveTab);
+    const [orderId, setOrderId] = (0, react_1.useState)(loadOrder);
+    const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, anyspend_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
+    !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
+    const [activePanel, setActivePanel] = (0, react_1.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    const [customRecipients, setCustomRecipients] = (0, react_1.useState)([]);
+    // const [newRecipientAddress, setNewRecipientAddress] = useState("");
+    // const recipientInputRef = useRef<HTMLInputElement>(null);
+    // Get initial chain IDs from URL or defaults
+    const initialSrcChainId = parseInt(searchParams.get("fromChainId") || "0") || (isMainnet ? chains_1.mainnet.id : chains_1.sepolia.id);
+    const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") ||
+        (isBuyMode ? destinationTokenChainId : isMainnet ? chains_1.base.id : chains_1.b3Sepolia.id);
+    // State for source chain/token selection
+    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_1.useState)(initialSrcChainId);
+    const defaultSrcToken = (0, anyspend_1.getDefaultToken)(selectedSrcChainId);
+    const srcTokenFromUrl = (0, useTokenFromUrl_1.useTokenFromUrl)({
+        defaultToken: defaultSrcToken,
+        prefix: "from"
+    });
+    const [selectedSrcToken, setSelectedSrcToken] = (0, react_1.useState)(srcTokenFromUrl);
+    const { data: srcTokenMetadata } = (0, useTokenData_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
+    const [srcAmount, setSrcAmount] = (0, react_1.useState)(searchParams.get("fromAmount") || "0.01");
+    // State for onramp amount
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_1.useState)(searchParams.get("fromAmount") || "5");
+    // State for destination chain/token selection
+    const [selectedDstChainId, setSelectedDstChainId] = (0, react_1.useState)(initialDstChainId);
+    const defaultDstToken = isBuyMode
+        ? {
+            symbol: "",
+            chainId: destinationTokenChainId,
+            address: destinationTokenAddress,
+            name: "",
+            decimals: 18,
+            metadata: {}
+        }
+        : (0, anyspend_1.getDefaultToken)(selectedDstChainId);
+    const dstTokenFromUrl = (0, useTokenFromUrl_1.useTokenFromUrl)({
+        defaultToken: defaultDstToken,
+        prefix: "to"
+    });
+    const [selectedDstToken, setSelectedDstToken] = (0, react_1.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const { data: dstTokenMetadata } = (0, useTokenData_1.useTokenData)(selectedDstToken?.chainId, selectedDstToken?.address);
+    const [dstAmount, setDstAmount] = (0, react_1.useState)(searchParams.get("toAmount") || "");
+    const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_1.useState)(true);
+    // Add refs to track if we've applied metadata
+    const appliedSrcMetadataRef = (0, react_1.useRef)(false);
+    const appliedDstMetadataRef = (0, react_1.useRef)(false);
+    // Update source token with metadata
+    (0, react_1.useEffect)(() => {
+        if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
+            // Mark as applied
+            appliedSrcMetadataRef.current = true;
+            const enhancedToken = {
+                ...selectedSrcToken,
+                decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
+                symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
+                name: srcTokenMetadata.name || selectedSrcToken.name,
+                metadata: {
+                    ...selectedSrcToken.metadata,
+                    logoURI: srcTokenMetadata.logoURI || selectedSrcToken.metadata?.logoURI
+                }
+            };
+            setSelectedSrcToken(enhancedToken);
+        }
+    }, [srcTokenMetadata, selectedSrcToken]);
+    // Reset source token ref when address/chain changes
+    (0, react_1.useEffect)(() => {
+        appliedSrcMetadataRef.current = false;
+    }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+    // Update destination token with metadata
+    (0, react_1.useEffect)(() => {
+        if (selectedDstToken && dstTokenMetadata && !appliedDstMetadataRef.current) {
+            // Mark as applied
+            appliedDstMetadataRef.current = true;
+            const enhancedToken = {
+                ...selectedDstToken,
+                decimals: dstTokenMetadata.decimals || selectedDstToken.decimals,
+                symbol: dstTokenMetadata.symbol || selectedDstToken.symbol,
+                name: dstTokenMetadata.name || selectedDstToken.name,
+                metadata: {
+                    ...selectedDstToken.metadata,
+                    logoURI: dstTokenMetadata.logoURI || selectedDstToken.metadata?.logoURI
+                }
+            };
+            setSelectedDstToken(enhancedToken);
+        }
+    }, [dstTokenMetadata, selectedDstToken]);
+    // Reset destination token ref when address/chain changes
+    (0, react_1.useEffect)(() => {
+        appliedDstMetadataRef.current = false;
+    }, [selectedDstToken.address, selectedDstToken.chainId]);
+    // Load swap configuration from URL on initial render
+    (0, react_1.useEffect)(() => {
+        // Skip if we've already processed the URL or if we have an order to load
+        if (initialUrlProcessed.current || loadOrder)
+            return;
+        try {
+            const tabParam = searchParams.get("tab");
+            // Set active tab if provided
+            if (tabParam === "fiat" || tabParam === "crypto") {
+                setActiveTab(tabParam);
+            }
+            // Set source amount if provided and valid
+            const fromAmountParam = searchParams.get("fromAmount");
+            if (fromAmountParam) {
+                try {
+                    const amount = parseFloat(fromAmountParam);
+                    if (!isNaN(amount)) {
+                        if (tabParam === "fiat") {
+                            setSrcAmountOnRamp(fromAmountParam);
+                        }
+                        else {
+                            setSrcAmount(fromAmountParam);
+                            setIsSrcInputDirty(true);
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error("Invalid fromAmount in URL", error);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error processing URL parameters", error);
+        }
+        // Mark that we've processed the initial URL
+        initialUrlProcessed.current = true;
+    }, [searchParams, loadOrder]);
+    // Update URL when swap configuration changes - but not on initial load
+    const updateSwapParamsInURL = (0, react_1.useCallback)(() => {
+        // Skip if:
+        // 1. There's an active order or orderId in the URL
+        // 2. We're not on the main panel
+        // 3. We haven't processed the initial URL yet
+        if (orderId ||
+            activePanel !== PanelView.MAIN ||
+            !initialUrlProcessed.current ||
+            searchParams.has("orderId") ||
+            mode === "modal")
+            return;
+        // Create a representation of the current state
+        const currentState = {
+            tab: activeTab,
+            fromChainId: activeTab === "crypto" ? selectedSrcChainId.toString() : undefined,
+            fromCurrency: activeTab === "crypto" ? selectedSrcToken.address : undefined,
+            fromAmount: activeTab === "crypto" ? srcAmount : undefined,
+            toChainId: selectedDstChainId.toString(),
+            toCurrency: selectedDstToken.address,
+            toAmount: dstAmount
+        };
+        // Compare with last update to prevent unnecessary URL changes
+        const lastState = lastUrlUpdate.current;
+        if (lastState &&
+            lastState.tab === currentState.tab &&
+            lastState.fromChainId === currentState.fromChainId &&
+            lastState.fromCurrency === currentState.fromCurrency &&
+            lastState.fromAmount === currentState.fromAmount &&
+            lastState.toChainId === currentState.toChainId &&
+            lastState.toCurrency === currentState.toCurrency &&
+            lastState.toAmount === currentState.toAmount) {
+            return; // Skip if no changes
+        }
+        // Update our ref with the current state
+        lastUrlUpdate.current = currentState;
+        // Build the URL parameters
+        const params = new URLSearchParams(searchParams.toString());
+        // Always update the tab parameter
+        params.set("tab", activeTab);
+        // Handle from-related parameters based on active tab
+        if (activeTab === "crypto") {
+            params.set("fromChainId", selectedSrcChainId.toString());
+            params.set("fromCurrency", selectedSrcToken.address);
+            params.set("fromAmount", srcAmount);
+        }
+        else {
+            // In fiat mode, remove token-related parameters but keep the amount
+            params.delete("fromChainId");
+            params.delete("fromCurrency");
+            params.set("fromAmount", srcAmountOnRamp);
+        }
+        params.set("toChainId", selectedDstChainId.toString());
+        params.set("toCurrency", selectedDstToken.address);
+        // Update URL without a full page reload
+        router.push(`${window.location.pathname}?${params.toString()}`);
+    }, [
+        orderId,
+        activePanel,
+        searchParams,
+        mode,
+        activeTab,
+        selectedSrcChainId,
+        selectedSrcToken.address,
+        srcAmount,
+        selectedDstChainId,
+        selectedDstToken.address,
+        dstAmount,
+        router,
+        srcAmountOnRamp
+    ]);
+    // Update URL when relevant state changes - but only after initial render
+    (0, react_1.useEffect)(() => {
+        // Skip the URL update on first render
+        if (initialUrlProcessed.current) {
+            updateSwapParamsInURL();
+        }
+    }, [
+        activeTab,
+        selectedSrcChainId,
+        selectedSrcToken.address,
+        selectedDstChainId,
+        selectedDstToken.address,
+        updateSwapParamsInURL
+    ]);
+    // Use our hook for ENS resolution
+    // const { address: resolvedAddress } = useResolveOnchainName(
+    //   (newRecipientAddress.toLowerCase().endsWith(".eth") ||
+    //     newRecipientAddress.startsWith("@") ||
+    //     newRecipientAddress.includes(".b3")) &&
+    //     newRecipientAddress.length > 2
+    //     ? newRecipientAddress
+    //     : undefined
+    // );
+    // Update the validAddressOrEns check to use resolvedAddress
+    // const validAddressOrEns = useMemo(
+    //   () =>
+    //     selectedDstChainId === RELAY_SOLANA_MAINNET_CHAIN_ID
+    //       ? isSolanaAddress(newRecipientAddress)
+    //       : isAddress(newRecipientAddress) || (resolvedAddress && isAddress(resolvedAddress)),
+    //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
+    // );
+    // State for recipient selection
+    const [recipientAddress, setRecipientAddress] = (0, react_1.useState)();
+    const { address: globalAddress, wallet: globalWallet } = (0, useAccountWallet_1.useAccountWallet)();
+    // Set default recipient address when wallet changes
+    (0, react_1.useEffect)(() => {
+        setRecipientAddress(globalAddress);
+    }, [globalAddress]);
+    // Get anyspend price
+    const activeInputAmountInWei = isSrcInputDirty
+        ? (0, viem_1.parseUnits)(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals).toString()
+        : (0, viem_1.parseUnits)(dstAmount.replaceAll(",", ""), selectedDstToken.decimals).toString();
+    const srcAmountOnrampInWei = (0, viem_1.parseUnits)(srcAmountOnRamp.replaceAll(",", ""), anyspend_1.USDC_BASE.decimals).toString();
+    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, anyspend_1.useAnyspendQuote)(isMainnet, activeTab === "crypto"
+        ? {
+            srcChain: selectedSrcChainId,
+            dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
+            srcTokenAddress: selectedSrcToken.address,
+            dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
+            type: anyspend_1.OrderType.Swap,
+            tradeType: isSrcInputDirty ? anyspend_1.TradeType.EXACT_INPUT : anyspend_1.TradeType.EXPECTED_OUTPUT,
+            amount: activeInputAmountInWei
+        }
+        : {
+            srcChain: chains_1.base.id,
+            dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
+            srcTokenAddress: anyspend_1.USDC_BASE.address,
+            dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
+            type: anyspend_1.OrderType.Swap,
+            tradeType: anyspend_1.TradeType.EXACT_INPUT,
+            amount: srcAmountOnrampInWei
+        });
+    // Replace the old ENS lookup with our new hooks
+    const { name: recipientName } = (0, useOnchainName_1.useOnchainName)(recipientAddress);
+    // const { name: walletName } = useOnchainName(globalAddress);
+    // Batch lookup for custom recipients
+    // const { names: customRecipientNames } = useOnchainNames(customRecipients.map(r => r.address));
+    // Load custom recipients from local storage on mount
+    (0, react_1.useEffect)(() => {
+        try {
+            const savedRecipients = localStorage.getItem(ANYSPEND_RECIPIENTS_KEY);
+            if (savedRecipients) {
+                const parsedRecipients = JSON.parse(savedRecipients);
+                // Only do this once, if custom recipients is empty
+                if (customRecipients.length > 0) {
+                    return;
+                }
+                // Add custom recipients based on local storage
+                setCustomRecipients(parsedRecipients);
+                // If no wallet is connected and no recipient is selected, select the first recipient
+                if (!globalAddress && !recipientAddress && parsedRecipients.length > 0) {
+                    setRecipientAddress(parsedRecipients[0].address);
+                }
+            }
+        }
+        catch (err) {
+            console.error("Error loading recipients from local storage:", err);
+        }
+        // Only run this effect once on mount
+    }, [globalAddress, recipientAddress, customRecipients.length]);
+    // Available recipient options
+    // const recipientOptions = useMemo<RecipientOption[]>(() => {
+    //   const options: RecipientOption[] = [];
+    //   // Add current wallet if connected
+    //   if (globalAddress) {
+    //     options.push({
+    //       address: globalAddress,
+    //       icon: "https://gradvatar.com/" + globalAddress,
+    //       label: "Current Wallet",
+    //       ensName: walletName
+    //     });
+    //   }
+    //   // Add custom recipients with their onchain names
+    //   customRecipients.forEach((recipient, index) => {
+    //     options.push({
+    //       ...recipient,
+    //       ensName: customRecipientNames[index] || undefined
+    //     });
+    //   });
+    //   // Add current recipientAddress if it exists and isn't already in options
+    //   if (
+    //     recipientAddress &&
+    //     !options.some(opt => normalizeAddress(opt.address) === normalizeAddress(recipientAddress))
+    //   ) {
+    //     options.push({
+    //       address: recipientAddress,
+    //       label: `Custom (${centerTruncate(recipientAddress, 6)})`,
+    //       ensName: recipientName
+    //     });
+    //   }
+    //   return options;
+    // }, [globalAddress, customRecipients, recipientAddress, recipientName, walletName, customRecipientNames]);
+    // const handleCreateOrder = async (recipientAddress: string) => {
+    //   try {
+    //     invariant(anyspendPrice, "Relay price is not found");
+    //     const srcAmountBigInt = parseUnits(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals);
+    //     createOrder({
+    //       isMainnet,
+    //       recipientAddress,
+    //       orderType: OrderType.Swap,
+    //       srcChain: selectedSrcChainId,
+    //       dstChain: selectedDstChainId,
+    //       srcToken: selectedSrcToken,
+    //       dstToken: selectedDstToken,
+    //       srcAmount: srcAmountBigInt.toString(),
+    //       expectedDstAmount: anyspendPrice?.data?.currencyOut?.amount || "0"
+    //     });
+    //   } catch (err) {
+    //     console.error(err);
+    //     toast.error((err as Error).message);
+    //     throw err; // Re-throw to handle in the calling function
+    //   }
+    // };
+    // const handleSaveRecipient = async () => {
+    //   if (!newRecipientAddress) {
+    //     toast.error("Please enter an address");
+    //     recipientInputRef.current?.focus();
+    //     return;
+    //   }
+    //   let normalizedAddress: string;
+    //   try {
+    //     // Handle ENS name
+    //     if (
+    //       newRecipientAddress.toLowerCase().endsWith(".eth") ||
+    //       newRecipientAddress.startsWith("@") ||
+    //       newRecipientAddress.includes(".b3")
+    //     ) {
+    //       if (!resolvedAddress) {
+    //         toast.error("Could not resolve ENS name");
+    //         return;
+    //       }
+    //       normalizedAddress = getAddress(resolvedAddress);
+    //     }
+    //     // Handle regular address
+    //     else {
+    //       if (!isEvmOrSolanaAddress(newRecipientAddress)) {
+    //         toast.error("Please enter a valid address or ENS name");
+    //         recipientInputRef.current?.focus();
+    //         return;
+    //       }
+    //       normalizedAddress = normalizeAddress(newRecipientAddress);
+    //     }
+    //     // Check for duplicate address
+    //     if (!customRecipients.some(r => normalizeAddress(r.address) === normalizedAddress)) {
+    //       // Add to custom recipients
+    //       const newRecipient = {
+    //         address: normalizedAddress,
+    //         label:
+    //           newRecipientAddress.toLowerCase().endsWith(".eth") ||
+    //           newRecipientAddress.startsWith("@") ||
+    //           newRecipientAddress.includes(".b3")
+    //             ? newRecipientAddress // Keep ENS name as label
+    //             : `Custom (${centerTruncate(normalizedAddress, 6)})`
+    //       };
+    //       setCustomRecipients(prev => [...prev, newRecipient]);
+    //     }
+    //     setRecipientAddress(normalizedAddress);
+    //     // Handle based on login state
+    //     if (!globalAddress) {
+    //       await handleCreateOrder(normalizedAddress);
+    //     } else {
+    //       setActivePanel(PanelView.MAIN);
+    //     }
+    //   } catch (err) {
+    //     // Error handling is done in handleCreateOrder
+    //     console.error("Error in handleSaveRecipient:", err);
+    //   }
+    // };
+    // Update dependent amount when relay price changes
+    (0, react_1.useEffect)(() => {
+        if (anyspendQuote?.data &&
+            anyspendQuote.data.currencyIn?.amount &&
+            anyspendQuote.data.currencyIn?.currency?.decimals &&
+            anyspendQuote.data.currencyOut?.amount &&
+            anyspendQuote.data.currencyOut?.currency?.decimals) {
+            if (isSrcInputDirty) {
+                const amount = anyspendQuote.data.currencyOut.amount;
+                const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+                setDstAmount((0, number_1.formatTokenAmount)(BigInt(amount), decimals, 6, false));
+            }
+            else {
+                const amount = anyspendQuote.data.currencyIn.amount;
+                const decimals = anyspendQuote.data.currencyIn.currency.decimals;
+                setSrcAmount((0, number_1.formatTokenAmount)(BigInt(amount), decimals, 6, false));
+            }
+        }
+        else {
+            if (isSrcInputDirty) {
+                setDstAmount("");
+            }
+            else {
+                setSrcAmount("");
+            }
+        }
+    }, [anyspendQuote, isSrcInputDirty]);
+    const { createOrder, isCreatingOrder } = (0, anyspend_1.useAnyspendCreateOrder)({
+        onSuccess: data => {
+            const orderId = data.data.id;
+            setOrderId(orderId);
+            // setNewRecipientAddress("");
+            setActivePanel(PanelView.ORDER_DETAILS);
+            // Add orderId to URL for persistence
+            const params = new URLSearchParams();
+            params.set("orderId", orderId);
+            router.push(`${window.location.pathname}?${params.toString()}`);
+        },
+        onError: error => {
+            console.error(error);
+            sonner_1.toast.error("Failed to create order: " + error.message);
+        }
+    });
+    // Determine button state and text
+    const btnInfo = (0, react_1.useMemo)(() => {
+        if (activeInputAmountInWei === "0")
+            return { text: "Enter an amount", disable: true, error: false };
+        if (isLoadingAnyspendQuote)
+            return { text: "Loading...", disable: true, error: false };
+        if (!recipientAddress)
+            return { text: "Select recipient", disable: false, error: false };
+        if (isCreatingOrder)
+            return { text: "Creating order...", disable: true, error: false };
+        if (!anyspendQuote || !anyspendQuote.success)
+            return { text: "Get rate error", disable: true, error: true };
+        if (activeTab === "fiat")
+            return { text: "Continue to payment", disable: false, error: false };
+        return { text: isBuyMode ? `Buy ${selectedDstToken.symbol}` : "Swap", disable: false, error: false };
+    }, [
+        activeInputAmountInWei,
+        isLoadingAnyspendQuote,
+        recipientAddress,
+        isCreatingOrder,
+        anyspendQuote,
+        activeTab,
+        isBuyMode,
+        selectedDstToken.symbol
+    ]);
+    // Handle main button click
+    const onMainButtonClick = async () => {
+        if (btnInfo.disable)
+            return;
+        if (!recipientAddress) {
+            setIsOpenPasteRecipientAddressModal(true);
+            return;
+        }
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
+            if (activeTab === "fiat") {
+                setActivePanel(PanelView.FIAT_PAYMENT);
+                return;
+            }
+            const srcAmountBigInt = (0, viem_1.parseUnits)(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals);
+            createOrder({
+                isMainnet,
+                recipientAddress,
+                orderType: anyspend_1.OrderType.Swap,
+                srcChain: selectedSrcChainId,
+                dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
+                srcToken: selectedSrcToken,
+                dstToken: isBuyMode
+                    ? { ...selectedDstToken, chainId: destinationTokenChainId, address: destinationTokenAddress }
+                    : selectedDstToken,
+                srcAmount: srcAmountBigInt.toString(),
+                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
+                creatorAddress: globalAddress
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    const onClickHistory = () => {
+        setOrderId(undefined);
+        setActivePanel(PanelView.HISTORY);
+        // Remove orderId from URL when going back to history
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete("orderId");
+        router.push(`${window.location.pathname}?${params.toString()}`);
+    };
+    // Open a dynamic modal
+    // const setIsDynamicModalOpen = useModalStore(state => state.setB3ModalOpen);
+    // const setDynamicModalContentType = useModalStore(state => state.setB3ModalContentType);
+    // Update useEffect for URL parameter to not override loadOrder
+    (0, react_1.useEffect)(() => {
+        if (loadOrder)
+            return; // Skip if we have a loadOrder
+        const orderIdParam = searchParams.get("orderId");
+        if (orderIdParam) {
+            setOrderId(orderIdParam);
+            setActivePanel(PanelView.ORDER_DETAILS);
+        }
+    }, [searchParams, loadOrder]);
+    const onSelectOrder = (selectedOrderId) => {
+        setActivePanel(PanelView.MAIN);
+        setOrderId(selectedOrderId);
+        // Update URL with the new orderId
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("orderId", selectedOrderId);
+        router.push(`${window.location.pathname}?${params.toString()}`);
+    };
+    // Save custom recipients to local storage when they change
+    (0, react_1.useEffect)(() => {
+        try {
+            localStorage.setItem(ANYSPEND_RECIPIENTS_KEY, JSON.stringify(customRecipients));
+        }
+        catch (err) {
+            console.error("Error saving recipients to local storage:", err);
+        }
+    }, [customRecipients]);
+    // Scroll to top when panel changes
+    (0, react_1.useEffect)(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }, [activePanel]);
+    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = (0, react_1.useState)(false);
+    const calculatePriceImpact = (inputUsd, outputUsd) => {
+        if (!inputUsd || !outputUsd) {
+            return { percentage: "0.00", isNegative: false };
+        }
+        const input = Number(inputUsd);
+        const output = Number(outputUsd);
+        // Handle edge cases
+        if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
+            return { percentage: "0.00", isNegative: false };
+        }
+        const percentageValue = ((output - input) / input) * 100;
+        // Handle the -0.00% case
+        if (percentageValue > -0.005 && percentageValue < 0) {
+            return { percentage: "0.00", isNegative: false };
+        }
+        return {
+            percentage: Math.abs(percentageValue).toFixed(2),
+            isNegative: percentageValue < 0
+        };
+    };
+    // Add state for rate details toggle
+    // const [showRateDetails, setShowRateDetails] = useState(false);
+    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.default, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col gap-4", children: [oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatusDisplay, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
+                                setOrderId(undefined);
+                                setActivePanel(PanelView.MAIN);
+                            } })] })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }) }));
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative mx-auto mb-4 grid h-10 w-fit min-w-[180px] grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => setActiveTab("crypto"), children: "Crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => setActiveTab("fiat"), children: "Fiat" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(TokenBalance_1.default, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
+                                            setIsSrcInputDirty(true);
+                                            setSrcAmount(value);
+                                        } })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                                    setIsSrcInputDirty(true);
+                                    setSrcAmount(value);
+                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", className: (0, cn_1.cn)("bg-as-n-8 border-as-stroke absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"), onClick: () => {
+                            if (activeTab === "fiat" || isBuyMode) {
+                                return;
+                            }
+                            // Swap chain selections
+                            const tempSrcChainId = selectedSrcChainId;
+                            const tempDstChainId = selectedDstChainId;
+                            setSelectedSrcChainId(tempDstChainId);
+                            setSelectedDstChainId(tempSrcChainId);
+                            // Swap token selections
+                            const tempSrcToken = selectedSrcToken;
+                            const tempDstToken = selectedDstToken;
+                            setSelectedSrcToken(tempDstToken);
+                            setSelectedDstToken(tempSrcToken);
+                            // Swap amounts
+                            const tempSrcAmount = srcAmount;
+                            const tempDstAmount = dstAmount;
+                            setSrcAmount(tempDstAmount);
+                            setDstAmount(tempSrcAmount);
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-primary/50 flex h-7 items-center gap-1 rounded-lg px-2", globalAddress && recipientAddress === globalAddress
+                                            ? "bg-as-on-surface-2 hover:bg-as-on-surface-3"
+                                            : "bg-as-yellow/70 hover:bg-as-yellow text-as-primary"), onClick: () => setIsOpenPasteRecipientAddressModal(true), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-4 w-4 rounded-full" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ClipboardIcon, { className: "h-4 w-4" })), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: recipientName ? recipientName : (0, formatAddress_1.shortenAddress)(recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setIsOpenPasteRecipientAddressModal(true), children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
+                            // Fixed destination token display in buy mode
+                            (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
+                                    setIsSrcInputDirty(false);
+                                    setDstAmount(value);
+                                }, chainId: selectedDstChainId, setChainId: setSelectedDstChainId, token: selectedDstToken, setToken: setSelectedDstToken })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, { style: "currency", fallback: "" }), anyspendQuote?.data?.currencyIn?.amountUsd &&
+                                        anyspendQuote?.data?.currencyOut?.amountUsd &&
+                                        (() => {
+                                            const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
+                                            // Parse the percentage as a number for comparison
+                                            const percentageNum = parseFloat(percentage);
+                                            // Don't show if less than 1%
+                                            if (percentageNum < 1) {
+                                                return null;
+                                            }
+                                            // Using inline style to ensure color displays
+                                            return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
+                                        })()] })] })] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)(ShinyButton_1.default, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-full" }))] })] }));
+    const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: anyspend_1.OrderType.Swap, anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
+            setOrderId(orderId);
+            setActivePanel(PanelView.ORDER_DETAILS);
+            // Add orderId to URL for persistence
+            const params = new URLSearchParams();
+            params.set("orderId", orderId);
+            router.push(`${window.location.pathname}?${params.toString()}`);
+        }, onBack: () => setActivePanel(PanelView.MAIN), recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
+    // Add tabs to the main component when no order is loaded
+    return ((0, jsx_runtime_1.jsx)(StyleRoot_1.default, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("mx-auto max-w-[calc(100vw-32px)]"), children: [(0, jsx_runtime_1.jsx)(transition_panel_1.TransitionPanel, { activeIndex: orderId
+                        ? oat
+                            ? PanelView.ORDER_DETAILS
+                            : PanelView.LOADING
+                        : activePanel === PanelView.ORDER_DETAILS
+                            ? PanelView.MAIN
+                            : activePanel, className: (0, cn_1.cn)("w-full", {
+                        "mt-0": mode === "modal"
+                    }), 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", { children: mainView }, "main-view"),
+                        (0, jsx_runtime_1.jsx)("div", { children: historyView }, "history-view"),
+                        (0, jsx_runtime_1.jsx)("div", { children: orderDetailsView }, "order-details-view"),
+                        (0, jsx_runtime_1.jsx)("div", { children: OrderDetails_1.OrderDetailsLoadingView }, "loading-view"),
+                        (0, jsx_runtime_1.jsx)("div", { children: onrampPaymentView }, "fiat-payment-view")
+                    ] }), (0, jsx_runtime_1.jsx)(EnterRecipientModal_1.EnterRecipientModal, { isOpenPasteRecipientAddress: isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddress: setIsOpenPasteRecipientAddressModal, recipientAddress: recipientAddress, setRecipientAddress: setRecipientAddress })] }) }));
+}