@abstraxn/signer-react 1.0.0

package/dist/src/components/WalletModal/components/ReceiveModal.css

@@ -0,0 +1,136 @@
+/* Receive Funds modal - styled to match the provided design screenshot */
+
+/* Modal padding */
+.wallet-modal-content.wallet-modal-receive {
+  padding: 20px;
+  gap: 0;
+}
+
+/* Header */
+.wallet-modal-content.wallet-modal-receive .wallet-modal-receive-header {
+  margin-bottom: 16px;
+}
+
+.wallet-modal-content.wallet-modal-receive .wallet-modal-receive-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  flex: 1;
+  text-align: center;
+}
+
+/* Content */
+.wallet-modal-receive-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  padding: 0;
+  margin-top: 12px;
+}
+
+/* QR */
+.wallet-modal-receive-qr-card {
+  position: relative;
+}
+
+.wallet-modal-receive-qr {
+  width: 100%;
+  padding: 18px;
+  background: #ffffff;
+  border-radius: 18px;
+  border: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 25px -15px rgba(0, 0, 0, 0.25);
+}
+
+.wallet-modal-receive-qr-badge {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.wallet-modal-receive-qr-badge-inner {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #2563eb;
+}
+
+/* Address "input" row */
+.wallet-modal-receive-address-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1px solid;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.wallet-modal-receive-address-text {
+  flex: 1;
+  text-align: left;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
+}
+
+.wallet-modal-receive-copy-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.wallet-modal-theme-light .wallet-modal-receive-address-row {
+  background: #ffffff;
+  border-color: #e5e7eb;
+  color: #111827;
+}
+
+.wallet-modal-theme-light .wallet-modal-receive-address-row:hover {
+  background: #f9fafb;
+}
+
+.wallet-modal-theme-dark .wallet-modal-receive-address-row {
+  background: #1a1a1a;
+  border-color: #3a3a3a;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-dark .wallet-modal-receive-address-row:hover {
+  background: #202020;
+}
+
+.wallet-modal-receive-address-row.copied {
+  border-color: rgba(16, 185, 129, 0.55);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
+}
+
+/* Helper text */
+.wallet-modal-receive-helper {
+  font-size: 12px;
+  text-align: center;
+  margin: 0;
+}
+
+.wallet-modal-theme-light .wallet-modal-receive-helper {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-receive-helper {
+  color: #9ca3af;
+}

package/dist/src/components/WalletModal/components/ReceiveModal.d.ts

@@ -0,0 +1,8 @@
+import './ReceiveModal.css';
+export interface ReceiveModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    address: string | null;
+    theme?: 'light' | 'dark';
+}
+export declare function ReceiveModal({ isOpen, onClose, address, theme, }: ReceiveModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/WalletModal/components/ReceiveModal.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Receive Modal Component
+ */
+import { useState, useCallback } from 'react';
+import { QRCode } from '../../QRCode';
+import { formatAddress } from '../utils/formatUtils';
+import './ReceiveModal.css';
+export function ReceiveModal({ isOpen, onClose, address, theme = 'dark', }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(() => {
+        if (address) {
+            navigator.clipboard.writeText(address);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }, [address]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: onClose, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-receive`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: onClose, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Receive Funds" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsx("div", { className: "wallet-modal-receive-content", children: address && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "wallet-modal-receive-qr-card", children: [_jsx("div", { className: "wallet-modal-receive-qr", children: _jsx(QRCode, { value: address, size: 260 }) }), _jsx("div", { className: "wallet-modal-receive-qr-badge", "aria-hidden": "true", children: _jsx("div", { className: "wallet-modal-receive-qr-badge-inner", children: _jsxs("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M4 7.5C4 6.67157 4.67157 6 5.5 6H18.5C19.3284 6 20 6.67157 20 7.5V16.5C20 17.3284 19.3284 18 18.5 18H5.5C4.67157 18 4 17.3284 4 16.5V7.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 7.5L12 12L18.5 7.5", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round" })] }) }) })] }), _jsxs("button", { type: "button", className: `wallet-modal-receive-address-row wallet-modal-theme-${theme} ${copied ? 'copied' : ''}`, onClick: handleCopy, "aria-label": "Copy wallet address", children: [_jsx("span", { className: "wallet-modal-receive-address-text", children: formatAddress(address) }), _jsx("span", { className: "wallet-modal-receive-copy-icon", "aria-hidden": "true", children: copied ? (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M5.5 4.5H3.5C2.67157 4.5 2 5.17157 2 6V12.5C2 13.3284 2.67157 14 3.5 14H10C10.8284 14 11.5 13.3284 11.5 12.5V10.5M5.5 4.5C5.5 3.67157 6.17157 3 7 3H10.5C11.3284 3 12 3.67157 12 4.5V8M5.5 4.5C5.5 5.32843 6.17157 6 7 6H10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), _jsx("p", { className: "wallet-modal-receive-helper", children: "Copy the address to send funds to this wallet" })] })) })] }) }));
+}
+//# sourceMappingURL=ReceiveModal.js.map

package/dist/src/components/WalletModal/components/ReceiveModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiveModal.js","sourceRoot":"","sources":["../../../../../src/components/WalletModal/components/ReceiveModal.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/WalletModal/components/SendModal.css

@@ -0,0 +1,277 @@
+/* Send Modal Styles - Clean minimal design */
+
+/* Override modal padding for send modal */
+.wallet-modal-content.wallet-modal-send {
+  padding: 20px;
+  gap: 0;
+}
+
+/* Header */
+.wallet-modal-send-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+}
+
+.wallet-modal-send-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-title {
+  color: #ffffff;
+}
+
+
+/* Content */
+.wallet-modal-send-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0;
+  margin-top: 16px;
+}
+
+.wallet-modal-send-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wallet-modal-send-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  text-align: left;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-label {
+  color: #9ca3af;
+}
+
+/* Token Card */
+.wallet-modal-send-token-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: left;
+}
+
+.wallet-modal-send-token-card:hover {
+  border-color: #3b82f6;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-token-card {
+  border-color: #3a3a3a;
+  background: #1a1a1a;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-token-card:hover {
+  border-color: #3b82f6;
+}
+
+.wallet-modal-send-token-icon {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wallet-modal-send-token-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.wallet-modal-send-token-icon-placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-token-icon-placeholder {
+  background: #2a2a2a;
+  color: #9ca3af;
+}
+
+.wallet-modal-send-token-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wallet-modal-send-token-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-token-name {
+  color: #ffffff;
+}
+
+.wallet-modal-send-token-balance {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-token-balance {
+  color: #9ca3af;
+}
+
+/* Input Fields */
+.wallet-modal-send-input {
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  font-size: 15px;
+  outline: none;
+  transition: all 0.2s;
+  box-sizing: border-box;
+  color: #111827;
+}
+
+.wallet-modal-send-input::placeholder {
+  color: #9ca3af;
+}
+
+.wallet-modal-send-input:focus {
+  border-color: #3b82f6;
+}
+
+.wallet-modal-send-input.error {
+  border-color: #ef4444;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-input {
+  border-color: #3a3a3a;
+  background: #1a1a1a;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-input::placeholder {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-input:focus {
+  border-color: #3b82f6;
+}
+
+/* Amount Box */
+.wallet-modal-send-amount-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  box-sizing: border-box;
+  transition: all 0.2s;
+}
+
+.wallet-modal-send-amount-box:focus-within {
+  border-color: #3b82f6;
+}
+
+.wallet-modal-send-amount-box.error {
+  border-color: #ef4444;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-box {
+  border-color: #3a3a3a;
+  background: #1a1a1a;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-box:focus-within {
+  border-color: #3b82f6;
+}
+
+.wallet-modal-send-amount-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 15px;
+  outline: none;
+  min-width: 0;
+  color: #111827;
+  padding: 0;
+}
+
+.wallet-modal-send-amount-input::placeholder {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-input {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-input::placeholder {
+  color: #6b7280;
+}
+
+.wallet-modal-send-amount-symbol {
+  font-size: 15px;
+  font-weight: 500;
+  color: #6b7280;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-symbol {
+  color: #9ca3af;
+}
+
+/* Error Message */
+.wallet-modal-send-error {
+  font-size: 12px;
+  color: #ef4444;
+  text-align: left;
+}
+
+/* Send Button */
+.wallet-modal-send-btn {
+  width: 100%;
+  padding: 14px 24px;
+  border-radius: 12px;
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: #3b82f6;
+  color: #ffffff;
+  margin-top: 8px;
+}
+
+.wallet-modal-send-btn:hover:not(.disabled) {
+  background: #2563eb;
+}
+
+.wallet-modal-send-btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/src/components/WalletModal/components/SendModal.d.ts

@@ -0,0 +1,16 @@
+import type { ChainData } from "../../../chains";
+import "./SendModal.css";
+export interface SendModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    currentChain: ChainData | null;
+    displayAddress: string | null;
+    availableBalance: bigint | null;
+    externalWalletBalance: bigint | null;
+    walletBalance: bigint | null;
+    sendTransaction?: (tx: any) => Promise<{
+        hash: string;
+    }>;
+    theme?: "light" | "dark";
+}
+export declare function SendModal({ isOpen, onClose, currentChain, displayAddress, availableBalance, externalWalletBalance, walletBalance, sendTransaction, theme, }: SendModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/WalletModal/components/SendModal.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Send Modal Component
+ */
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { PreviewTransactionModal } from "./PreviewTransactionModal";
+import { SuccessModal } from "./SuccessModal";
+import { TokenSelectorModal } from "./TokenSelectorModal";
+import { useAddressValidation } from "../hooks/useAddressValidation";
+import { useAmountValidation } from "../hooks/useAmountValidation";
+import { useSendTransaction } from "../hooks/useSendTransaction";
+import { formatBalanceValue } from "../utils/formatUtils";
+import "./SendModal.css";
+export function SendModal({ isOpen, onClose, currentChain, displayAddress, availableBalance, externalWalletBalance, walletBalance, sendTransaction, theme = "dark", }) {
+    const [recipientAddress, setRecipientAddress] = useState("");
+    const [amount, setAmount] = useState("");
+    const [addressError, setAddressError] = useState("");
+    const [amountError, setAmountError] = useState("");
+    const [showPreview, setShowPreview] = useState(false);
+    const [showTokenSelector, setShowTokenSelector] = useState(false);
+    const [selectedToken, setSelectedToken] = useState(null);
+    const balance = externalWalletBalance || walletBalance || availableBalance;
+    // Get available tokens for the current chain
+    const availableTokens = useMemo(() => {
+        if (!currentChain)
+            return [];
+        const nativeToken = {
+            address: "0x0",
+            symbol: currentChain.nativeCurrency.symbol,
+            name: currentChain.nativeCurrency.name,
+            decimals: currentChain.nativeCurrency.decimals,
+            iconUrl: currentChain.iconUrl,
+            balance: balance || 0n,
+            isNative: true,
+        };
+        // Example tokens for Ethereum (you can expand this for other chains)
+        const tokensByChain = {
+            1: [
+                // Ethereum Mainnet
+                nativeToken,
+                {
+                    address: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
+                    symbol: "WETH",
+                    name: "Wrapped Ether",
+                    decimals: 18,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/eth.png",
+                    balance: 0n,
+                },
+                {
+                    address: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+                    symbol: "USDT",
+                    name: "Tether USD",
+                    decimals: 6,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/usdt.png",
+                    balance: 0n,
+                },
+                {
+                    address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+                    symbol: "USDC",
+                    name: "USD Coin",
+                    decimals: 6,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/usdc.png",
+                    balance: 0n,
+                },
+                {
+                    address: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
+                    symbol: "WBTC",
+                    name: "Wrapped Bitcoin",
+                    decimals: 8,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/btc.png",
+                    balance: 0n,
+                },
+            ],
+            137: [
+                // Polygon Mainnet
+                nativeToken,
+                {
+                    address: "0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270",
+                    symbol: "WMATIC",
+                    name: "Wrapped Matic",
+                    decimals: 18,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/matic.png",
+                    balance: 0n,
+                },
+                {
+                    address: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
+                    symbol: "USDT",
+                    name: "Tether USD",
+                    decimals: 6,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/usdt.png",
+                    balance: 0n,
+                },
+                {
+                    address: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174",
+                    symbol: "USDC",
+                    name: "USD Coin",
+                    decimals: 6,
+                    iconUrl: "https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/usdc.png",
+                    balance: 0n,
+                },
+            ],
+        };
+        return tokensByChain[currentChain.id] || [nativeToken];
+    }, [currentChain, balance]);
+    // Initialize selected token when chain changes
+    useEffect(() => {
+        if (currentChain && availableTokens.length > 0) {
+            // Set native token as default
+            const nativeToken = availableTokens.find((t) => t.isNative);
+            setSelectedToken(nativeToken || availableTokens[0]);
+        }
+    }, [currentChain, availableTokens]);
+    const { validate: validateAddress } = useAddressValidation(displayAddress, currentChain);
+    const { validate: validateAmount } = useAmountValidation(balance, currentChain);
+    const { send, isSending, txHash, reset } = useSendTransaction({
+        sendTransaction,
+        currentChain,
+        fromAddress: displayAddress,
+        onSuccess: () => {
+            setShowPreview(false);
+            setTimeout(() => {
+                handleReset();
+                onClose();
+            }, 3000);
+        },
+        onError: (error) => {
+            setAmountError(error.message);
+            setShowPreview(false);
+        },
+    });
+    const handleRecipientAddressChange = useCallback((value) => {
+        setRecipientAddress(value);
+        if (value) {
+            const error = validateAddress(value);
+            setAddressError(error);
+        }
+        else {
+            setAddressError("");
+        }
+    }, [validateAddress]);
+    const handleAmountChange = useCallback((value) => {
+        // Only allow numbers and decimal point
+        const sanitized = value.replace(/[^0-9.]/g, "");
+        // Prevent multiple decimal points
+        const parts = sanitized.split(".");
+        const finalValue = parts.length > 2 ? parts[0] + "." + parts.slice(1).join("") : sanitized;
+        setAmount(finalValue);
+        if (finalValue) {
+            const error = validateAmount(finalValue);
+            setAmountError(error);
+        }
+        else {
+            setAmountError("");
+        }
+    }, [validateAmount]);
+    const handlePreviewTransaction = useCallback(() => {
+        const addrError = validateAddress(recipientAddress);
+        const amtError = validateAmount(amount);
+        if (addrError || amtError) {
+            setAddressError(addrError);
+            setAmountError(amtError);
+            return;
+        }
+        setShowPreview(true);
+    }, [recipientAddress, amount, validateAddress, validateAmount]);
+    const handleConfirmSend = useCallback(async () => {
+        try {
+            await send(recipientAddress, amount);
+        }
+        catch (error) {
+            // Error handled in useSendTransaction
+        }
+    }, [send, recipientAddress, amount]);
+    const handleReset = useCallback(() => {
+        setRecipientAddress("");
+        setAmount("");
+        setAddressError("");
+        setAmountError("");
+        setShowPreview(false);
+        setShowTokenSelector(false);
+        reset();
+    }, [reset]);
+    const handleTokenSelect = useCallback((token) => {
+        setSelectedToken(token);
+        setShowTokenSelector(false);
+    }, []);
+    useEffect(() => {
+        if (!isOpen) {
+            handleReset();
+        }
+    }, [isOpen, handleReset]);
+    if (!isOpen)
+        return null;
+    const availableBalanceValue = useMemo(() => {
+        if (!balance || !selectedToken)
+            return "0";
+        return formatBalanceValue(balance, selectedToken.decimals);
+    }, [balance, selectedToken]);
+    const symbol = selectedToken?.symbol || currentChain?.nativeCurrency.symbol || "ETH";
+    const chainName = currentChain?.displayName || "Select Chain";
+    const isFormValid = !addressError && !amountError && recipientAddress && amount;
+    // Show success modal
+    if (txHash && !showPreview) {
+        return (_jsx(SuccessModal, { isOpen: true, onClose: () => {
+                reset();
+                onClose();
+            }, txHash: txHash, currentChain: currentChain, theme: theme }));
+    }
+    // Show preview modal
+    if (showPreview) {
+        return (_jsx(PreviewTransactionModal, { isOpen: true, onClose: () => setShowPreview(false), onConfirm: handleConfirmSend, recipientAddress: recipientAddress, amount: amount, displayAddress: displayAddress, currentChain: currentChain, isSending: isSending, theme: theme }));
+    }
+    // Show token selector modal
+    if (showTokenSelector) {
+        return (_jsx(TokenSelectorModal, { isOpen: true, onClose: () => setShowTokenSelector(false), onTokenSelect: handleTokenSelect, currentChain: currentChain, tokens: availableTokens, selectedToken: selectedToken || undefined, theme: theme }));
+    }
+    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: onClose, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-send`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-send-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: onClose, "aria-label": "Go back", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-send-title", children: "Send Funds" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsxs("div", { className: "wallet-modal-send-content", children: [_jsxs("div", { className: "wallet-modal-send-field", children: [_jsx("label", { className: "wallet-modal-send-label", children: "Token" }), _jsxs("button", { className: "wallet-modal-send-token-card", onClick: () => setShowTokenSelector(true), type: "button", children: [_jsx("div", { className: "wallet-modal-send-token-icon", children: selectedToken?.iconUrl ? (_jsx("img", { src: selectedToken.iconUrl, alt: selectedToken.name })) : (_jsx("div", { className: "wallet-modal-send-token-icon-placeholder", children: selectedToken?.symbol?.charAt(0) || "?" })) }), _jsxs("div", { className: "wallet-modal-send-token-details", children: [_jsx("span", { className: "wallet-modal-send-token-name", children: selectedToken?.name || "Ether" }), _jsxs("span", { className: "wallet-modal-send-token-balance", children: [availableBalanceValue, " ", symbol] })] })] })] }), _jsxs("div", { className: "wallet-modal-send-field", children: [_jsx("label", { className: "wallet-modal-send-label", children: "Send to" }), _jsx("input", { type: "text", className: `wallet-modal-send-input ${addressError ? "error" : ""}`, placeholder: "0x... or ENS name", value: recipientAddress, onChange: (e) => handleRecipientAddressChange(e.target.value) }), addressError && (_jsx("div", { className: "wallet-modal-send-error", children: addressError }))] }), _jsxs("div", { className: "wallet-modal-send-field", children: [_jsx("label", { className: "wallet-modal-send-label", children: "Amount" }), _jsxs("div", { className: `wallet-modal-send-amount-box ${amountError ? "error" : ""}`, children: [_jsx("input", { type: "text", className: "wallet-modal-send-amount-input", placeholder: "0", value: amount, onChange: (e) => handleAmountChange(e.target.value) }), _jsx("span", { className: "wallet-modal-send-amount-symbol", children: symbol })] }), amountError && (_jsx("div", { className: "wallet-modal-send-error", children: amountError }))] }), _jsx("button", { className: `wallet-modal-send-btn ${!isFormValid ? "disabled" : ""}`, onClick: handlePreviewTransaction, disabled: !isFormValid, children: "Send" })] })] }) }));
+}
+//# sourceMappingURL=SendModal.js.map