@ordanetwork/sdk 1.2.0 → 1.3.0

package/dist/cjs/react/components/Widget/Widget.js

@@ -0,0 +1,686 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Widget = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("../ui/button");
+const appkit_1 = require("../../config/appkit");
+const hooks_1 = require("../../hooks");
+const useMultiChainBalances_1 = require("../../hooks/useMultiChainBalances");
+const useTokenPrices_1 = require("../../hooks/useTokenPrices");
+const format_1 = require("../../lib/utils/format");
+const validation_1 = require("../../lib/utils/validation");
+const quote_1 = require("./types/quote");
+const inputFormatters_1 = require("../../lib/utils/inputFormatters");
+const constants_1 = require("../../lib/constants");
+const react_1 = require("@reown/appkit/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+const components_1 = require("./components");
+const OffRampRecipientDialog_1 = require("./components/OffRampRecipientDialog");
+const QUOTE_CACHE_TTL_MS = 30000;
+const QUOTE_DEBOUNCE_MS = 500;
+const MAX_FIAT_AMOUNT = 10000;
+const Widget = () => {
+    const [fromAmount, setFromAmount] = (0, react_2.useState)('');
+    const [toAmount, setToAmount] = (0, react_2.useState)('');
+    const [fromTokenSelected, setFromTokenSelected] = (0, react_2.useState)(null);
+    const [toTokenSelected, setToTokenSelected] = (0, react_2.useState)(null);
+    const [selectTokenDialogOpened, setSelectTokenDialogOpened] = (0, react_2.useState)(false);
+    const [recipientDialogOpened, setRecipientDialogOpened] = (0, react_2.useState)(false);
+    const [offRampRecipientDialogOpened, setOffRampRecipientDialogOpened] = (0, react_2.useState)(false);
+    const [transactionDialogOpened, setTransactionDialogOpened] = (0, react_2.useState)(false);
+    const [selectingSide, setSelectingSide] = (0, react_2.useState)(null);
+    const [collapsibleExpanded, setCollapsibleExpanded] = (0, react_2.useState)(false);
+    const [transactionType, setTransactionType] = (0, react_2.useState)(null);
+    const [defaultRecipient, setDefaultRecipient] = (0, react_2.useState)(null);
+    // Approval state management - persists across dialog open/close
+    const [approvalComplete, setApprovalComplete] = (0, react_2.useState)(false);
+    const [approvalTxHash, setApprovalTxHash] = (0, react_2.useState)(null);
+    const [fromSelectedChain, setFromSelectedChain] = (0, react_2.useState)(null);
+    const [toSelectedChain, setToSelectedChain] = (0, react_2.useState)(null);
+    const handleSetSelectedChain = (chain, selectingSide) => {
+        if (selectingSide === 'from') {
+            setFromSelectedChain(chain);
+            setFromAmount('');
+            return;
+        }
+        setToSelectedChain(chain);
+        setToAmount('');
+    };
+    const [cryptoRecipient, setCryptoRecipient] = (0, react_2.useState)(null);
+    const [fiatRecipient, setFiatRecipient] = (0, react_2.useState)(null);
+    const { quote, isLoading, error, requestQuote, clearQuote } = (0, hooks_1.useQuote)();
+    const offRampQuote = (0, hooks_1.useOffRamp)();
+    const onRampQuote = (0, hooks_1.useOnRamp)();
+    const { createRecipient } = (0, hooks_1.useRecipient)();
+    const quoteCache = (0, react_2.useRef)(new Map());
+    const { address: evmAddress, isConnected } = (0, react_1.useAppKitAccount)();
+    const { chainId, switchNetwork } = (0, react_1.useAppKitNetwork)();
+    const { open: openAppKit } = (0, react_1.useAppKit)();
+    const previousRecipientAddressRef = (0, react_2.useRef)(null);
+    const { allBalances, solanaAddress } = (0, useMultiChainBalances_1.useMultiChainBalances)();
+    const fromTokenBalance = fromTokenSelected?.chainId === 'fiat'
+        ? undefined
+        : allBalances.find((balance) => {
+            return (balance.tokenAddress?.toLowerCase() === fromTokenSelected?.address?.toLowerCase() &&
+                balance.chainId === fromTokenSelected?.chainId);
+        })?.balanceFormatted ?? '0';
+    // Note: solanaAddress is now obtained from useMultiChainBalances hook
+    const tokensForPricing = (0, react_2.useMemo)(() => {
+        const tokens = [];
+        if (fromTokenSelected && fromTokenSelected.chainId !== 'fiat' && fromTokenSelected.address) {
+            tokens.push({
+                address: fromTokenSelected.address,
+                chainId: fromTokenSelected.chainId,
+            });
+        }
+        if (toTokenSelected && toTokenSelected.chainId !== 'fiat' && toTokenSelected.address) {
+            tokens.push({
+                address: toTokenSelected.address,
+                chainId: toTokenSelected.chainId,
+            });
+        }
+        return tokens;
+    }, [fromTokenSelected, toTokenSelected]);
+    const { prices: priceData, isLoading: isPricesLoading } = (0, useTokenPrices_1.useTokenPrices)({ tokens: tokensForPricing });
+    const fromUsdValue = (0, react_2.useMemo)(() => {
+        if (!fromAmount || !fromTokenSelected || fromTokenSelected.chainId === 'fiat') {
+            return null;
+        }
+        const price = priceData.find((p) => p.chainId === fromTokenSelected.chainId && p.address.toLowerCase() === fromTokenSelected.address?.toLowerCase());
+        if (!price?.usdPrice)
+            return null;
+        const numericAmount = parseFloat(fromAmount);
+        if (isNaN(numericAmount))
+            return null;
+        return numericAmount * price.usdPrice;
+    }, [fromAmount, fromTokenSelected, priceData]);
+    const toUsdValue = (0, react_2.useMemo)(() => {
+        if (!toAmount || !toTokenSelected || toTokenSelected.chainId === 'fiat') {
+            return null;
+        }
+        const price = priceData.find((p) => p.chainId === toTokenSelected.chainId && p.address.toLowerCase() === toTokenSelected.address?.toLowerCase());
+        if (!price?.usdPrice)
+            return null;
+        const numericAmount = parseFloat(toAmount);
+        if (isNaN(numericAmount))
+            return null;
+        return numericAmount * price.usdPrice;
+    }, [toAmount, toTokenSelected, priceData]);
+    const getFromAddress = (0, react_2.useCallback)((token) => {
+        if (!token)
+            return null;
+        const isSolana = String(token.chainId) === '1001001';
+        const isFiat = token.chainId === 'fiat';
+        if (isFiat) {
+            return null;
+        }
+        if (isSolana) {
+            if (!solanaAddress) {
+                console.error('[Widget] Solana wallet not connected');
+                return null;
+            }
+            return solanaAddress;
+        }
+        else {
+            if (!evmAddress) {
+                console.error('[Widget] EVM wallet not connected');
+                return null;
+            }
+            return evmAddress || null;
+        }
+    }, [evmAddress, solanaAddress]);
+    const getToAddress = (0, react_2.useCallback)((token) => {
+        if (!token)
+            return null;
+        const isSolana = String(token.chainId) === '1001001';
+        const isFiat = token.chainId === 'fiat';
+        if (isFiat) {
+            return null;
+        }
+        if (cryptoRecipient?.recipientId) {
+            return null;
+        }
+        if (isSolana) {
+            return solanaAddress;
+        }
+        else {
+            return evmAddress || null;
+        }
+    }, [evmAddress, solanaAddress, cryptoRecipient]);
+    const getChainName = (chainId) => {
+        const names = {
+            '1': 'Ethereum',
+            '137': 'Polygon',
+            '42161': 'Arbitrum',
+            '10': 'Optimism',
+            '8453': 'Base',
+            '43114': 'Avalanche',
+            '1001001': 'Solana',
+        };
+        return names[chainId.toString()] || `Chain ${chainId}`;
+    };
+    const ensureCorrectChain = (0, react_2.useCallback)(async (token) => {
+        if (!token || token.chainId === 'fiat')
+            return true;
+        const isSolana = String(token.chainId) === '1001001';
+        if (isSolana) {
+            return true;
+        }
+        if (chainId !== token.chainId) {
+            try {
+                const targetNetwork = appkit_1.evmNetworks.find((network) => network.id === Number(token.chainId));
+                if (!targetNetwork) {
+                    console.error('[Widget] Network not supported:', token.chainId);
+                    sonner_1.toast.error('Network not supported', {
+                        description: `Chain ID ${token.chainId} is not configured`,
+                        duration: 4000,
+                    });
+                    return false;
+                }
+                sonner_1.toast.info('Switching network...', {
+                    description: `Switching to ${getChainName(token.chainId)}`,
+                    duration: 2000,
+                });
+                await switchNetwork(targetNetwork);
+                sonner_1.toast.success('Network switched', {
+                    description: `Connected to ${getChainName(token.chainId)}`,
+                    duration: 2000,
+                });
+                return true;
+            }
+            catch (err) {
+                console.error('[Widget] Chain switch failed:', err);
+                sonner_1.toast.error('Network switch failed', {
+                    description: 'Please switch network manually in your wallet',
+                    duration: 4000,
+                });
+                return false;
+            }
+        }
+        return true;
+    }, [chainId, switchNetwork]);
+    const getTransactionType = (from, to) => {
+        if (!from || !to)
+            return null;
+        const isFromFiat = from.chainId === 'fiat';
+        const isToFiat = to.chainId === 'fiat';
+        if (isFromFiat && !isToFiat)
+            return 'onRamp';
+        if (!isFromFiat && isToFiat)
+            return 'offRamp';
+        if (!isFromFiat && !isToFiat)
+            return 'swap';
+        return null;
+    };
+    const getCacheKey = (0, react_2.useCallback)(() => {
+        const fromIdentifier = fromTokenSelected?.chainId === 'fiat' ? fromTokenSelected.symbol : fromTokenSelected?.address;
+        const toIdentifier = toTokenSelected?.chainId === 'fiat' ? toTokenSelected.symbol : toTokenSelected?.address;
+        const recipient = transactionType === 'offRamp' ? fiatRecipient?.recipientId : cryptoRecipient?.recipientId;
+        return `${transactionType}-${fromIdentifier}-${toIdentifier}-${fromAmount}-${recipient}`;
+    }, [transactionType, fromTokenSelected, toTokenSelected, fromAmount, cryptoRecipient, fiatRecipient]);
+    const extractToAmount = (0, react_2.useCallback)((quote) => {
+        if ((0, quote_1.isDirectTransferResponse)(quote)) {
+            return (0, format_1.parseFromNativeUnits)(quote.providerQuoteDetails.toAmount, toTokenSelected.decimals);
+        }
+        if ((0, quote_1.isTransferResponse)(quote)) {
+            return (0, format_1.parseFromNativeUnits)(quote.quote.toAmount, toTokenSelected.decimals);
+        }
+        if ((0, quote_1.isOfframpResponse)(quote)) {
+            return quote.quote.toAmount;
+        }
+        if ((0, quote_1.isOnrampResponse)(quote)) {
+            return (0, format_1.parseFromNativeUnits)(quote.quote.toAmount, toTokenSelected.decimals);
+        }
+        return '';
+    }, [toTokenSelected]);
+    const fetchQuote = (0, react_2.useCallback)(async () => {
+        if (!fromTokenSelected || !toTokenSelected)
+            return;
+        const cacheKey = getCacheKey();
+        const cached = quoteCache.current.get(cacheKey);
+        if (cached && Date.now() - cached.timestamp < QUOTE_CACHE_TTL_MS) {
+            console.log('[Widget] Using cached quote');
+            setToAmount(extractToAmount(cached.quote));
+            return;
+        }
+        try {
+            let quoteResponse = null;
+            if (transactionType === 'swap') {
+                const fromAmountNative = (0, format_1.parseToNativeUnits)(fromAmount, fromTokenSelected.decimals);
+                const fromAddr = getFromAddress(fromTokenSelected);
+                if (!fromAddr) {
+                    throw new Error(`Connect ${String(fromTokenSelected.chainId) === '1001001' ? 'Solana' : 'EVM'} wallet`);
+                }
+                console.log(`[Widget] Requesting SWAP quote: ${fromAmount} ${fromTokenSelected.symbol} → ${toTokenSelected.symbol}`);
+                console.log(`[Widget] From address: ${fromAddr}`);
+                quoteResponse = await requestQuote({
+                    fromChain: fromTokenSelected.chainId,
+                    fromToken: fromTokenSelected.address,
+                    fromAddress: fromAddr,
+                    intent: { method: 'fromAmount', value: fromAmountNative },
+                    recipientId: cryptoRecipient?.recipientId,
+                });
+            }
+            else if (transactionType === 'onRamp') {
+                console.log(`[Widget] Requesting ON-RAMP quote: ${fromAmount} ${fromTokenSelected.symbol} → ${toTokenSelected.symbol}`);
+                quoteResponse = await onRampQuote.requestQuote({
+                    fromCurrency: fromTokenSelected.symbol,
+                    intent: { method: 'fromAmount', value: fromAmount },
+                    recipientId: cryptoRecipient?.recipientId,
+                });
+            }
+            else if (transactionType === 'offRamp') {
+                const fromAmountNative = (0, format_1.parseToNativeUnits)(fromAmount, fromTokenSelected.decimals);
+                const fromAddr = getFromAddress(fromTokenSelected);
+                if (!fromAddr) {
+                    throw new Error(`Connect ${String(fromTokenSelected.chainId) === '1001001' ? 'Solana' : 'EVM'} wallet`);
+                }
+                console.log(`[Widget] Requesting OFF-RAMP quote: ${fromAmount} ${fromTokenSelected.symbol} → ${toTokenSelected.symbol}`);
+                console.log(`[Widget] From address: ${fromAddr}`);
+                quoteResponse = await offRampQuote.requestQuote({
+                    fromChain: fromTokenSelected.chainId,
+                    fromToken: fromTokenSelected.address,
+                    fromAddress: fromAddr,
+                    intent: { method: 'fromAmount', value: fromAmountNative },
+                    recipientId: fiatRecipient?.recipientId,
+                });
+            }
+            if (quoteResponse) {
+                quoteCache.current.set(cacheKey, { quote: quoteResponse, timestamp: Date.now() });
+                const displayAmount = extractToAmount(quoteResponse);
+                setToAmount(displayAmount);
+                console.log(`[Widget] Quote received: ${displayAmount} ${toTokenSelected.symbol}`);
+            }
+        }
+        catch (err) {
+            console.error('[Widget] Quote fetch error:', err);
+            setToAmount('');
+        }
+    }, [
+        transactionType,
+        fromTokenSelected,
+        toTokenSelected,
+        fromAmount,
+        cryptoRecipient,
+        fiatRecipient,
+        requestQuote,
+        onRampQuote.requestQuote,
+        offRampQuote.requestQuote,
+        getCacheKey,
+        extractToAmount,
+        getFromAddress,
+    ]);
+    (0, react_2.useEffect)(() => {
+        if (!transactionType || !fromTokenSelected || !toTokenSelected || !fromAmount) {
+            clearQuote();
+            offRampQuote.clearQuote();
+            onRampQuote.clearQuote();
+            setToAmount('');
+            return;
+        }
+        if (!(0, validation_1.isValidAmount)(fromAmount)) {
+            return;
+        }
+        const needsCryptoRecipient = transactionType === 'swap' || transactionType === 'onRamp';
+        const needsFiatRecipient = transactionType === 'offRamp';
+        if (needsCryptoRecipient && !cryptoRecipient) {
+            return;
+        }
+        if (needsFiatRecipient && !fiatRecipient) {
+            return;
+        }
+        const fromIsCrypto = fromTokenSelected.chainId !== 'fiat';
+        const toIsCrypto = toTokenSelected.chainId !== 'fiat';
+        if ((fromIsCrypto && !fromTokenSelected.decimals) || (toIsCrypto && !toTokenSelected.decimals)) {
+            console.error('[Widget] Token decimals not available');
+            return;
+        }
+        const hasActiveError = error || offRampQuote.error || onRampQuote.error;
+        if (hasActiveError) {
+            console.log('[Widget] Skipping quote request - active error present');
+            return;
+        }
+        console.log('[Widget] Scheduling quote request...');
+        const timeoutId = setTimeout(() => {
+            fetchQuote();
+        }, QUOTE_DEBOUNCE_MS);
+        return () => clearTimeout(timeoutId);
+    }, [
+        transactionType,
+        fromTokenSelected,
+        toTokenSelected,
+        fromAmount,
+        cryptoRecipient,
+        fiatRecipient,
+        fetchQuote,
+        clearQuote,
+        offRampQuote.clearQuote,
+        onRampQuote.clearQuote,
+    ]);
+    (0, react_2.useEffect)(() => {
+        const activeError = error || offRampQuote.error || onRampQuote.error;
+        if (activeError) {
+            sonner_1.toast.error('Failed to generate quote', {
+                description: activeError.message || 'Please try again',
+                duration: 4000,
+            });
+        }
+    }, [error, offRampQuote.error, onRampQuote.error]);
+    (0, react_2.useEffect)(() => {
+        if (error) {
+            clearQuote();
+        }
+        if (offRampQuote.error) {
+            offRampQuote.clearQuote();
+        }
+        if (onRampQuote.error) {
+            onRampQuote.clearQuote();
+        }
+    }, [
+        fromAmount,
+        fromTokenSelected?.address,
+        fromTokenSelected?.symbol,
+        toTokenSelected?.address,
+        toTokenSelected?.symbol,
+        cryptoRecipient?.recipientId,
+        fiatRecipient?.recipientId,
+        clearQuote,
+        offRampQuote.clearQuote,
+        onRampQuote.clearQuote,
+    ]);
+    (0, react_2.useEffect)(() => {
+        if (cryptoRecipient?.address) {
+            previousRecipientAddressRef.current = cryptoRecipient.address;
+        }
+    }, [cryptoRecipient]);
+    (0, react_2.useEffect)(() => {
+        const type = getTransactionType(fromTokenSelected, toTokenSelected);
+        setTransactionType(type);
+        setDefaultRecipient(null);
+        setCryptoRecipient(null);
+        if (type !== 'offRamp') {
+            setFiatRecipient(null);
+        }
+    }, [fromTokenSelected, toTokenSelected]);
+    (0, react_2.useEffect)(() => {
+        setApprovalComplete(false);
+        setApprovalTxHash(null);
+    }, [quote?.transactionId, fromTokenSelected?.address, toTokenSelected?.address, evmAddress, chainId]);
+    // Auto-set recipient to connected wallet when "To" token is selected
+    (0, react_2.useEffect)(() => {
+        let isMounted = true;
+        const autoSetRecipient = async () => {
+            console.log('[Widget] Auto-set recipient triggered', {
+                toTokenSelected: toTokenSelected?.symbol,
+                transactionType,
+                hasCryptoRecipient: !!cryptoRecipient,
+                evmAddress,
+                solanaAddress,
+            });
+            if (!toTokenSelected || transactionType === 'offRamp' || !transactionType) {
+                console.log('[Widget] Auto-set recipient: early return - missing toToken or offRamp or no transactionType');
+                return;
+            }
+            if (cryptoRecipient) {
+                console.log('[Widget] Auto-set recipient: early return - recipient already exists');
+                return;
+            }
+            const isSolana = String(toTokenSelected.chainId) === '1001001';
+            const connectedWalletAddress = isSolana ? solanaAddress : evmAddress;
+            const targetAddress = previousRecipientAddressRef.current || connectedWalletAddress;
+            if (!targetAddress) {
+                console.log('[Widget] Auto-set recipient: early return - no target address', {
+                    isSolana,
+                    solanaAddress,
+                    evmAddress,
+                });
+                return;
+            }
+            // Get chain logo URL for display
+            const chainLogoUrl = (0, constants_1.getChainLogoUrl)(toTokenSelected.chainId, toTokenSelected.symbol);
+            if (!chainLogoUrl) {
+                console.log('[Widget] Auto-set recipient: early return - no chain logo URL', {
+                    chainId: toTokenSelected.chainId,
+                    symbol: toTokenSelected.symbol,
+                });
+                return;
+            }
+            console.log('[Widget] Creating auto-recipient', {
+                targetAddress,
+                chain: toTokenSelected.chainId,
+                token: toTokenSelected.address,
+                chainLogoUrl,
+            });
+            const result = await createRecipient({
+                name: `Wallet ${targetAddress.slice(0, 6)}...${targetAddress.slice(-4)}`,
+                cryptoSettlementDetails: {
+                    toChain: toTokenSelected.chainId,
+                    toToken: toTokenSelected.address || '',
+                    toAddress: targetAddress,
+                },
+            });
+            if (result && isMounted) {
+                console.log('[Widget] Auto-recipient created successfully:', result);
+                const displayAddress = `${targetAddress.slice(0, 6)}...${targetAddress.slice(-4)}`;
+                const recipientData = {
+                    recipientId: result.recipientId,
+                    address: targetAddress,
+                    displayInfo: {
+                        key: displayAddress,
+                        chain: toTokenSelected.chainId,
+                        image: chainLogoUrl,
+                    },
+                };
+                setCryptoRecipient(recipientData);
+                setDefaultRecipient(recipientData.displayInfo);
+                previousRecipientAddressRef.current = null;
+            }
+            else if (!result) {
+                console.error('[Widget] Failed to create auto-recipient');
+            }
+        };
+        autoSetRecipient();
+        return () => {
+            isMounted = false;
+        };
+    }, [toTokenSelected, transactionType, cryptoRecipient, evmAddress, solanaAddress, createRecipient]);
+    const toggleCollapsibleExpanded = () => {
+        setCollapsibleExpanded((prev) => !prev);
+    };
+    const toggleSelectTokenDialogOpened = () => {
+        setSelectTokenDialogOpened((prev) => !prev);
+    };
+    const toggleRecipientDialogOpened = () => {
+        setRecipientDialogOpened((prev) => !prev);
+    };
+    const toggleOffRampRecipientDialogOpened = () => {
+        setOffRampRecipientDialogOpened((prev) => !prev);
+    };
+    const handleSelectRecipient = () => {
+        if (!toTokenSelected) {
+            sonner_1.toast.error('Please select a token first', {
+                description: 'You need to choose a destination token before selecting a recipient',
+                duration: 4000,
+            });
+            return;
+        }
+        if (transactionType === 'offRamp') {
+            toggleOffRampRecipientDialogOpened();
+            return;
+        }
+        toggleRecipientDialogOpened();
+    };
+    const toggleTransactionDialogOpened = () => {
+        setTransactionDialogOpened((prev) => !prev);
+    };
+    const handleSetToken = async (token) => {
+        if (selectingSide === 'from' && token.chainId !== 'fiat') {
+            const switched = await ensureCorrectChain(token);
+            if (!switched) {
+                console.warn('[Widget] Token selected but chain not switched');
+            }
+        }
+        if (selectingSide === 'from') {
+            setFromTokenSelected(token);
+            setFromSelectedChain(null);
+            setFromAmount('');
+        }
+        else if (selectingSide === 'to') {
+            setToTokenSelected(token);
+            setToSelectedChain(null);
+            setToAmount('');
+        }
+        toggleSelectTokenDialogOpened();
+    };
+    const handleCleanSelectedToken = (side) => {
+        if (side === 'from') {
+            setFromTokenSelected(null);
+            return;
+        }
+        setToTokenSelected(null);
+    };
+    const handleSwapTokens = () => {
+        const isFromTokenBRL = fromTokenSelected?.symbol === 'BRL';
+        const isToTokenNonBRZ = toTokenSelected?.symbol !== 'BRZ' && toTokenSelected?.chainId !== 'fiat';
+        if (isFromTokenBRL && isToTokenNonBRZ) {
+            sonner_1.toast.warning('Conversion not supported', {
+                description: 'On-ramp is only available for BRL to BRZ conversions.',
+                duration: 4000,
+            });
+            setFromTokenSelected(null);
+            setToTokenSelected(fromTokenSelected);
+            return;
+        }
+        setFromTokenSelected(toTokenSelected);
+        setToTokenSelected(fromTokenSelected);
+    };
+    const transactionButtonAction = async () => {
+        if (!isConnected) {
+            await openAppKit();
+            return;
+        }
+        if (!fromTokenSelected && !toTokenSelected) {
+            return;
+        }
+        if (fromTokenSelected && fromTokenSelected.chainId !== 'fiat') {
+            const chainCorrect = await ensureCorrectChain(fromTokenSelected);
+            if (!chainCorrect) {
+                return;
+            }
+        }
+        return toggleTransactionDialogOpened();
+    };
+    const handleCleanTokenInputs = () => {
+        setFromAmount('');
+        setToAmount('');
+        setFromTokenSelected(null);
+        setToTokenSelected(null);
+    };
+    const handleCompleteTransaction = () => {
+        handleCleanTokenInputs();
+        setApprovalComplete(false);
+        setApprovalTxHash(null);
+        toggleTransactionDialogOpened();
+    };
+    const hasMissingInfo = !fromAmount || !toAmount || !fromTokenSelected || !toTokenSelected;
+    const insufficientAmount = fromTokenSelected?.chainId === 'fiat'
+        ? Number(fromAmount) > MAX_FIAT_AMOUNT
+        : Number(fromAmount) > Number(fromTokenBalance);
+    const isLoadingQuote = isLoading || offRampQuote.isLoading || onRampQuote.isLoading;
+    const disableTransactionButton = hasMissingInfo ||
+        insufficientAmount ||
+        isLoadingQuote ||
+        ((transactionType === 'swap' || transactionType === 'onRamp') && !cryptoRecipient) ||
+        (transactionType === 'offRamp' && !fiatRecipient) ||
+        (transactionType === 'swap' && !quote) ||
+        (transactionType === 'onRamp' && !onRampQuote.quote) ||
+        (transactionType === 'offRamp' && !offRampQuote.quote);
+    const transactionButtonLabel = () => {
+        if (!isConnected) {
+            return 'Connect wallet';
+        }
+        if (!fromTokenSelected || !toTokenSelected) {
+            return 'Select asset';
+        }
+        if (transactionType === 'swap' || transactionType === 'offRamp') {
+            const needsSolana = String(fromTokenSelected.chainId) === '1001001';
+            const needsEvm = fromTokenSelected.chainId !== 'fiat' && !needsSolana;
+            if (needsSolana && !solanaAddress) {
+                return 'Connect Solana wallet';
+            }
+            if (needsEvm && !evmAddress) {
+                return 'Connect EVM wallet';
+            }
+        }
+        if (insufficientAmount) {
+            if (fromTokenSelected.chainId === 'fiat') {
+                return 'Maximum on-ramp amount exceeded';
+            }
+            return `Insufficient ${fromTokenSelected.symbol}`;
+        }
+        if (transactionType === 'swap' || transactionType === 'onRamp') {
+            if (!cryptoRecipient) {
+                return 'Select recipient';
+            }
+        }
+        if (transactionType === 'offRamp' && !fiatRecipient) {
+            return 'Select recipient';
+        }
+        if (isLoadingQuote) {
+            return 'Finalizing quote';
+        }
+        return 'Review';
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto w-full max-w-md space-y-2", children: [(0, jsx_runtime_1.jsx)(components_1.Header, {}), (0, jsx_runtime_1.jsxs)("div", { className: "bg-main-bg flex flex-col overflow-hidden rounded-2xl border border-zinc-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-secondary relative flex flex-col p-4 focus-within:bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute right-[59px] top-[104px] z-50 h-[30px] w-0.5 bg-zinc-200 sm:right-[59px]" }), (0, jsx_runtime_1.jsx)(components_1.TokenInput, { label: "From", amount: fromAmount, onAmountChange: setFromAmount, token: fromTokenSelected, tokenBalance: fromTokenBalance, usdValue: fromUsdValue, isLoadingPrice: isPricesLoading, onSelect: () => {
+                                    setSelectingSide('from');
+                                    toggleSelectTokenDialogOpened();
+                                } })] }), (0, jsx_runtime_1.jsx)(components_1.CollapsibleDetails, { expanded: collapsibleExpanded, handleSwapTokens: handleSwapTokens, toggleCollapsibleExpanded: toggleCollapsibleExpanded, swapQuote: quote, onRampQuote: onRampQuote.quote, offRampQuote: offRampQuote.quote, transactionType: transactionType }), (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-secondary relative flex flex-col p-4 focus-within:bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-[72px] right-[59px] z-50 h-[66px] w-0.5 bg-zinc-200 sm:right-[59px]" }), (0, jsx_runtime_1.jsx)(components_1.TokenInput, { label: "To", amount: (0, inputFormatters_1.roundToNineDecimals)(toAmount), onAmountChange: setToAmount, token: toTokenSelected, usdValue: toUsdValue, isLoadingPrice: isPricesLoading, onSelect: () => {
+                                    setSelectingSide('to');
+                                    toggleSelectTokenDialogOpened();
+                                }, isLoading: isLoadingQuote, disabled: true })] })] }), (0, jsx_runtime_1.jsx)(components_1.Recipient, { handleSelectRecipient: handleSelectRecipient, recipient: defaultRecipient }), (0, jsx_runtime_1.jsxs)(button_1.Button, { onClick: transactionButtonAction, variant: "default", className: "mt-5 h-14 w-full cursor-pointer rounded-2xl text-sm font-medium", disabled: disableTransactionButton, children: [isLoadingQuote && ((0, jsx_runtime_1.jsx)("div", { className: "flex h-9 items-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }) })), transactionButtonLabel()] }), (0, jsx_runtime_1.jsx)(components_1.Footer, {}), selectTokenDialogOpened && ((0, jsx_runtime_1.jsx)(components_1.SelectAssetDialog, { open: selectTokenDialogOpened, handleSetToken: handleSetToken, toggleDialogOpen: toggleSelectTokenDialogOpened, selectingSide: selectingSide, fromTokenSelected: fromTokenSelected, toTokenSelected: toTokenSelected, handleCleanSelectedToken: handleCleanSelectedToken, handleSetSelectedChain: handleSetSelectedChain, selectedChain: selectingSide === 'from' ? fromSelectedChain : toSelectedChain })), offRampRecipientDialogOpened && ((0, jsx_runtime_1.jsx)(OffRampRecipientDialog_1.OffRampRecipientDialog, { open: offRampRecipientDialogOpened, toggleDialogOpen: toggleOffRampRecipientDialogOpened, toCurrency: toTokenSelected?.symbol || 'BRL', setDefaultRecipient: (info) => {
+                    if (typeof info === 'function')
+                        return;
+                    if (fiatRecipient && info) {
+                        setFiatRecipient({
+                            ...fiatRecipient,
+                            displayInfo: info,
+                        });
+                    }
+                }, onRecipientSelected: (data) => {
+                    setFiatRecipient({
+                        recipientId: data.recipientId,
+                        displayInfo: {
+                            key: data.name,
+                            chain: 'PIX',
+                            image: 'pix-icon',
+                        },
+                    });
+                    setDefaultRecipient({
+                        key: data.name,
+                        chain: 'PIX',
+                        image: 'pix-icon',
+                    });
+                } })), recipientDialogOpened && ((0, jsx_runtime_1.jsx)(components_1.RecipientDialog, { open: recipientDialogOpened, toggleDialogOpen: toggleRecipientDialogOpened, toChain: toTokenSelected?.chainId || '', toToken: toTokenSelected?.address || '', onAddressSelected: (data) => {
+                    const displayAddress = `${data.address.slice(0, 6)}...${data.address.slice(-4)}`;
+                    const chainLogoUrl = (0, constants_1.getChainLogoUrl)(toTokenSelected?.chainId || '', toTokenSelected?.symbol);
+                    setCryptoRecipient({
+                        recipientId: data.recipientId,
+                        address: data.address,
+                        displayInfo: {
+                            key: displayAddress,
+                            chain: toTokenSelected?.chainId || 'Unknown',
+                            image: chainLogoUrl || '',
+                        },
+                    });
+                    setDefaultRecipient({
+                        key: displayAddress,
+                        chain: toTokenSelected?.chainId || 'Unknown',
+                        image: chainLogoUrl || '',
+                    });
+                } })), transactionDialogOpened && ((0, jsx_runtime_1.jsx)(components_1.TransactionDialog, { open: transactionDialogOpened, toggleDialogOpen: toggleTransactionDialogOpened, fromTokenSelected: fromTokenSelected, toTokenSelected: toTokenSelected, fromAmount: fromAmount, toAmount: toAmount, handleCompleteTransaction: handleCompleteTransaction, transactionType: transactionType, swapQuote: quote, onRampQuote: onRampQuote.quote, offRampQuote: offRampQuote.quote, fromAddress: getFromAddress(fromTokenSelected), toAddress: getToAddress(toTokenSelected), approvalComplete: approvalComplete, setApprovalComplete: setApprovalComplete, approvalTxHash: approvalTxHash, setApprovalTxHash: setApprovalTxHash }))] }));
+};
+exports.Widget = Widget;
+//# sourceMappingURL=Widget.js.map