@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,693 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getDefaultToken, OrderType, TradeType, USDC_BASE, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote } from "../../../anyspend";
+import StyleRoot from "../../../global-account/react/components/StyleRoot";
+import { Button } from "../../../global-account/react/components/ui/button";
+import ShinyButton from "../../../global-account/react/components/ui/ShinyButton";
+import { TransitionPanel } from "../../../global-account/react/components/ui/transition-panel";
+import { useAccountWallet } from "../../../global-account/react/hooks/useAccountWallet";
+import { useOnchainName } from "../../../global-account/react/hooks/useOnchainName";
+import { useRouter } from "../../../global-account/react/hooks/useRouter";
+import useSearchParams from "../../../global-account/react/hooks/useSearchParamsSSR";
+import { useTokenData } from "../../../global-account/react/hooks/useTokenData";
+import { useTokenFromUrl } from "../../../global-account/react/hooks/useTokenFromUrl";
+import { shortenAddress } from "../../../shared/utils/formatAddress";
+import { cn } from "../../../shared/utils/cn";
+import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number";
+import { motion } from "framer-motion";
+import invariant from "invariant";
+import { ArrowDown, ChevronRightCircle, ChevronsUpDown, CircleAlert, ClipboardIcon, HistoryIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { parseUnits } from "viem";
+import { b3Sepolia, base, mainnet, sepolia } from "viem/chains";
+import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
+import OrderHistory from "./common/OrderHistory";
+import { OrderStatusDisplay } from "./common/OrderStatus";
+import { OrderTokenAmount } from "./common/OrderTokenAmount";
+import { PanelOnramp } from "./common/PanelOnramp";
+import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
+import TokenBalance from "./common/TokenBalance";
+import { EnterRecipientModal } from "./modals/EnterRecipientModal";
+export 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 || (PanelView = {}));
+const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
+export default function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton }) {
+    const searchParams = useSearchParams();
+    const router = 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 = useRef(false);
+    const lastUrlUpdate = useRef(null);
+    const [activeTab, setActiveTab] = useState(defaultActiveTab);
+    const [orderId, setOrderId] = useState(loadOrder);
+    const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(isMainnet, orderId);
+    !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
+    const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    const [customRecipients, setCustomRecipients] = 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 ? mainnet.id : sepolia.id);
+    const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") ||
+        (isBuyMode ? destinationTokenChainId : isMainnet ? base.id : b3Sepolia.id);
+    // State for source chain/token selection
+    const [selectedSrcChainId, setSelectedSrcChainId] = useState(initialSrcChainId);
+    const defaultSrcToken = getDefaultToken(selectedSrcChainId);
+    const srcTokenFromUrl = useTokenFromUrl({
+        defaultToken: defaultSrcToken,
+        prefix: "from"
+    });
+    const [selectedSrcToken, setSelectedSrcToken] = useState(srcTokenFromUrl);
+    const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
+    const [srcAmount, setSrcAmount] = useState(searchParams.get("fromAmount") || "0.01");
+    // State for onramp amount
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = useState(searchParams.get("fromAmount") || "5");
+    // State for destination chain/token selection
+    const [selectedDstChainId, setSelectedDstChainId] = useState(initialDstChainId);
+    const defaultDstToken = isBuyMode
+        ? {
+            symbol: "",
+            chainId: destinationTokenChainId,
+            address: destinationTokenAddress,
+            name: "",
+            decimals: 18,
+            metadata: {}
+        }
+        : getDefaultToken(selectedDstChainId);
+    const dstTokenFromUrl = useTokenFromUrl({
+        defaultToken: defaultDstToken,
+        prefix: "to"
+    });
+    const [selectedDstToken, setSelectedDstToken] = useState(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const { data: dstTokenMetadata } = useTokenData(selectedDstToken?.chainId, selectedDstToken?.address);
+    const [dstAmount, setDstAmount] = useState(searchParams.get("toAmount") || "");
+    const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
+    // Add refs to track if we've applied metadata
+    const appliedSrcMetadataRef = useRef(false);
+    const appliedDstMetadataRef = useRef(false);
+    // Update source token with metadata
+    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
+    useEffect(() => {
+        appliedSrcMetadataRef.current = false;
+    }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+    // Update destination token with metadata
+    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
+    useEffect(() => {
+        appliedDstMetadataRef.current = false;
+    }, [selectedDstToken.address, selectedDstToken.chainId]);
+    // Load swap configuration from URL on initial render
+    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 = 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
+    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] = useState();
+    const { address: globalAddress, wallet: globalWallet } = useAccountWallet();
+    // Set default recipient address when wallet changes
+    useEffect(() => {
+        setRecipientAddress(globalAddress);
+    }, [globalAddress]);
+    // Get anyspend price
+    const activeInputAmountInWei = isSrcInputDirty
+        ? parseUnits(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals).toString()
+        : parseUnits(dstAmount.replaceAll(",", ""), selectedDstToken.decimals).toString();
+    const srcAmountOnrampInWei = parseUnits(srcAmountOnRamp.replaceAll(",", ""), USDC_BASE.decimals).toString();
+    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote(isMainnet, activeTab === "crypto"
+        ? {
+            srcChain: selectedSrcChainId,
+            dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
+            srcTokenAddress: selectedSrcToken.address,
+            dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
+            type: OrderType.Swap,
+            tradeType: isSrcInputDirty ? TradeType.EXACT_INPUT : TradeType.EXPECTED_OUTPUT,
+            amount: activeInputAmountInWei
+        }
+        : {
+            srcChain: base.id,
+            dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
+            srcTokenAddress: USDC_BASE.address,
+            dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
+            type: OrderType.Swap,
+            tradeType: TradeType.EXACT_INPUT,
+            amount: srcAmountOnrampInWei
+        });
+    // Replace the old ENS lookup with our new hooks
+    const { name: recipientName } = 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
+    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
+    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(formatTokenAmount(BigInt(amount), decimals, 6, false));
+            }
+            else {
+                const amount = anyspendQuote.data.currencyIn.amount;
+                const decimals = anyspendQuote.data.currencyIn.currency.decimals;
+                setSrcAmount(formatTokenAmount(BigInt(amount), decimals, 6, false));
+            }
+        }
+        else {
+            if (isSrcInputDirty) {
+                setDstAmount("");
+            }
+            else {
+                setSrcAmount("");
+            }
+        }
+    }, [anyspendQuote, isSrcInputDirty]);
+    const { createOrder, isCreatingOrder } = 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);
+            toast.error("Failed to create order: " + error.message);
+        }
+    });
+    // Determine button state and text
+    const btnInfo = 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 {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(recipientAddress, "Recipient address is not found");
+            if (activeTab === "fiat") {
+                setActivePanel(PanelView.FIAT_PAYMENT);
+                return;
+            }
+            const srcAmountBigInt = parseUnits(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals);
+            createOrder({
+                isMainnet,
+                recipientAddress,
+                orderType: 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);
+            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
+    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
+    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
+    useEffect(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }, [activePanel]);
+    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = 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 = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsxs("div", { className: "relative flex flex-col gap-4", children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(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" && _jsx("div", { className: "h-12" })] }) }));
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _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: [_jsx("div", { className: 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" } }), _jsx("button", { className: 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" }), _jsx("button", { className: 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" })] }), _jsxs("div", { className: "relative flex max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Send" }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
+                                            setIsSrcInputDirty(true);
+                                            setSrcAmount(value);
+                                        } })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                                    setIsSrcInputDirty(true);
+                                    setSrcAmount(value);
+                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) })] })) : (_jsx(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: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), _jsxs(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: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsxs("button", { className: 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 ? (_jsx("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-4 w-4 rounded-full" })) : (_jsx(ClipboardIcon, { className: "h-4 w-4" })), _jsx("div", { className: "text-sm", children: recipientName ? recipientName : shortenAddress(recipientAddress) }), _jsx(ChevronsUpDown, { className: "h-3 w-3" })] })) : (_jsxs("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setIsOpenPasteRecipientAddressModal(true), children: [_jsx("div", { className: "text-sm font-medium", children: "Select recipient" }), _jsx(ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
+                            // Fixed destination token display in buy mode
+                            _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _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 && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
+                                    setIsSrcInputDirty(false);
+                                    setDstAmount(value);
+                                }, chainId: selectedDstChainId, setChainId: setSelectedDstChainId, token: selectedDstToken, setToken: setSelectedDstToken })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [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 (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
+                                        })()] })] })] }), getAnyspendQuoteError && (_jsxs("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [_jsx(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" }), _jsx("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), _jsxs(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: [_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: [btnInfo.text, !btnInfo.disable && !btnInfo.error && (_jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : (_jsx("div", { className: "h-2 w-full" }))] })] }));
+    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: 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 (_jsx(StyleRoot, { children: _jsxs("div", { className: cn("mx-auto max-w-[calc(100vw-32px)]"), children: [_jsx(TransitionPanel, { activeIndex: orderId
+                        ? oat
+                            ? PanelView.ORDER_DETAILS
+                            : PanelView.LOADING
+                        : activePanel === PanelView.ORDER_DETAILS
+                            ? PanelView.MAIN
+                            : activePanel, className: 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: [
+                        _jsx("div", { children: mainView }, "main-view"),
+                        _jsx("div", { children: historyView }, "history-view"),
+                        _jsx("div", { children: orderDetailsView }, "order-details-view"),
+                        _jsx("div", { children: OrderDetailsLoadingView }, "loading-view"),
+                        _jsx("div", { children: onrampPaymentView }, "fiat-payment-view")
+                    ] }), _jsx(EnterRecipientModal, { isOpenPasteRecipientAddress: isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddress: setIsOpenPasteRecipientAddressModal, recipientAddress: recipientAddress, setRecipientAddress: setRecipientAddress })] }) }));
+}