signer-test-sdk-react 0.0.22 → 0.0.23

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

@@ -1,9 +1,38 @@
-/* Send Modal Styles - extracted from WalletModal.css */
+/* 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: 20px;
-  padding: 20px 0;
+  gap: 16px;
+  padding: 0;
+  margin-top: 16px;
 }
 
 .wallet-modal-send-field {
@@ -15,6 +44,7 @@
 .wallet-modal-send-label {
   font-size: 14px;
   font-weight: 500;
+  color: #374151;
   text-align: left;
 }
 
@@ -22,175 +52,208 @@
   color: #9ca3af;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-label {
-  color: #6b7280;
-}
-
-.wallet-modal-send-token-selector-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.wallet-modal-send-chain-selector {
-  width: 100%;
-}
-
-.wallet-modal-send-amount-wrapper {
+/* Token Card */
+.wallet-modal-send-token-card {
   display: flex;
   align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px;
   border-radius: 12px;
-  border: 1px solid;
-  overflow: hidden;
-  background: transparent;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: left;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-amount-wrapper {
-  border-color: #3a3a3a;
-  background: #2a2a2a;
+.wallet-modal-send-token-card:hover {
+  border-color: #3b82f6;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-amount-wrapper {
-  border-color: #e5e7eb;
-  background: #f9fafb;
+.wallet-modal-theme-dark .wallet-modal-send-token-card {
+  border-color: #3a3a3a;
+  background: #1a1a1a;
 }
 
-.wallet-modal-send-amount-wrapper.error {
-  border-color: #ef4444;
+.wallet-modal-theme-dark .wallet-modal-send-token-card:hover {
+  border-color: #3b82f6;
 }
 
-.wallet-modal-send-amount-prefix {
-  padding: 14px 16px;
-  font-size: 15px;
-  font-weight: 500;
+.wallet-modal-send-token-icon {
+  width: 40px;
+  height: 40px;
   flex-shrink: 0;
-  border-right: 1px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-amount-prefix {
-  color: #ffffff;
-  border-color: #3a3a3a;
+.wallet-modal-send-token-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-amount-prefix {
-  color: #111827;
-  border-color: #e5e7eb;
+.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-send-amount-input {
-  flex: 1;
-  padding: 14px 16px;
-  border: none;
-  background: transparent;
-  font-size: 16px;
-  font-weight: 500;
-  outline: none;
-  min-width: 0;
+.wallet-modal-theme-dark .wallet-modal-send-token-icon-placeholder {
+  background: #2a2a2a;
+  color: #9ca3af;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-amount-input {
-  color: #ffffff;
+.wallet-modal-send-token-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-amount-input {
+.wallet-modal-send-token-name {
+  font-size: 16px;
+  font-weight: 600;
   color: #111827;
 }
 
-.wallet-modal-send-amount-input::placeholder {
-  opacity: 0.5;
+.wallet-modal-theme-dark .wallet-modal-send-token-name {
+  color: #ffffff;
 }
 
-.wallet-modal-send-amount-suffix {
-  padding: 14px 16px;
-  font-size: 14px;
-  flex-shrink: 0;
-  opacity: 0.7;
+.wallet-modal-send-token-balance {
+  font-size: 13px;
+  color: #6b7280;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-amount-suffix {
+.wallet-modal-theme-dark .wallet-modal-send-token-balance {
   color: #9ca3af;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-amount-suffix {
-  color: #6b7280;
+/* 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-balance {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  margin-top: 4px;
+.wallet-modal-send-input::placeholder {
+  color: #9ca3af;
 }
 
-.wallet-modal-send-balance-label {
-  opacity: 0.7;
+.wallet-modal-send-input:focus {
+  border-color: #3b82f6;
 }
 
-.wallet-modal-send-balance-value {
-  font-weight: 500;
+.wallet-modal-send-input.error {
+  border-color: #ef4444;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-balance {
-  color: #9ca3af;
+.wallet-modal-theme-dark .wallet-modal-send-input {
+  border-color: #3a3a3a;
+  background: #1a1a1a;
+  color: #ffffff;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-balance {
+.wallet-modal-theme-dark .wallet-modal-send-input::placeholder {
   color: #6b7280;
 }
 
-.wallet-modal-send-address-input {
+.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: 14px 16px;
+  padding: 12px 14px;
   border-radius: 12px;
-  border: 1px solid;
-  background: transparent;
-  font-size: 14px;
-  font-family: monospace;
-  outline: none;
-  transition: all 0.2s;
+  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-theme-dark .wallet-modal-send-address-input {
+.wallet-modal-send-amount-box.error {
+  border-color: #ef4444;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-box {
   border-color: #3a3a3a;
-  background: #2a2a2a;
-  color: #ffffff;
+  background: #1a1a1a;
+}
+
+.wallet-modal-theme-dark .wallet-modal-send-amount-box:focus-within {
+  border-color: #3b82f6;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-address-input {
-  border-color: #e5e7eb;
-  background: #f9fafb;
+.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-address-input.error {
-  border-color: #ef4444;
+.wallet-modal-send-amount-input::placeholder {
+  color: #9ca3af;
 }
 
-.wallet-modal-send-address-input:focus {
-  border-color: #9333ea;
+.wallet-modal-theme-dark .wallet-modal-send-amount-input {
+  color: #ffffff;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-address-input:focus {
-  border-color: #a855f7;
+.wallet-modal-theme-dark .wallet-modal-send-amount-input::placeholder {
+  color: #6b7280;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-address-input:focus {
-  border-color: #9333ea;
+.wallet-modal-send-amount-symbol {
+  font-size: 15px;
+  font-weight: 500;
+  color: #6b7280;
+  flex-shrink: 0;
+  margin-left: 8px;
 }
 
-.wallet-modal-send-address-input::placeholder {
-  opacity: 0.5;
+.wallet-modal-theme-dark .wallet-modal-send-amount-symbol {
+  color: #9ca3af;
 }
 
+/* Error Message */
 .wallet-modal-send-error {
   font-size: 12px;
   color: #ef4444;
-  margin-top: 4px;
   text-align: left;
 }
 
-.wallet-modal-send-preview-btn {
+/* Send Button */
+.wallet-modal-send-btn {
   width: 100%;
   padding: 14px 24px;
   border-radius: 12px;
@@ -199,36 +262,16 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.wallet-modal-send-preview-btn.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.wallet-modal-theme-dark .wallet-modal-send-preview-btn {
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
-}
-
-.wallet-modal-theme-light .wallet-modal-send-preview-btn {
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  background: #3b82f6;
   color: #ffffff;
+  margin-top: 8px;
 }
 
-.wallet-modal-theme-dark .wallet-modal-send-preview-btn:hover:not(.disabled) {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
+.wallet-modal-send-btn:hover:not(.disabled) {
+  background: #2563eb;
 }
 
-.wallet-modal-theme-light .wallet-modal-send-preview-btn:hover:not(.disabled) {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
+.wallet-modal-send-btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }

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

@@ -1,10 +1,9 @@
-import type { ChainData } from '../../../chains';
-import './SendModal.css';
+import type { ChainData } from "../../../chains";
+import "./SendModal.css";
 export interface SendModalProps {
     isOpen: boolean;
     onClose: () => void;
     currentChain: ChainData | null;
-    availableChains: ChainData[];
     displayAddress: string | null;
     availableBalance: bigint | null;
     externalWalletBalance: bigint | null;
@@ -12,7 +11,6 @@ export interface SendModalProps {
     sendTransaction?: (tx: any) => Promise<{
         hash: string;
     }>;
-    switchChainEnhanced?: (chainId: number) => Promise<void>;
-    theme?: 'light' | 'dark';
+    theme?: "light" | "dark";
 }
-export declare function SendModal({ isOpen, onClose, currentChain, availableChains, displayAddress, availableBalance, externalWalletBalance, walletBalance, sendTransaction, switchChainEnhanced, theme, }: SendModalProps): import("react/jsx-runtime").JSX.Element | null;
+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

@@ -2,22 +2,114 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Send Modal Component
  */
-import { useState, useCallback, useMemo, useEffect } from 'react';
-import { ChainSelector } from './ChainSelector';
-import { PreviewTransactionModal } from './PreviewTransactionModal';
-import { SuccessModal } from './SuccessModal';
-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, availableChains, displayAddress, availableBalance, externalWalletBalance, walletBalance, sendTransaction, switchChainEnhanced, theme = 'dark', }) {
-    const [recipientAddress, setRecipientAddress] = useState('');
-    const [amount, setAmount] = useState('');
-    const [addressError, setAddressError] = useState('');
-    const [amountError, setAmountError] = useState('');
+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({
@@ -43,22 +135,22 @@ export function SendModal({ isOpen, onClose, currentChain, availableChains, disp
             setAddressError(error);
         }
         else {
-            setAddressError('');
+            setAddressError("");
         }
     }, [validateAddress]);
     const handleAmountChange = useCallback((value) => {
         // Only allow numbers and decimal point
-        const sanitized = value.replace(/[^0-9.]/g, '');
+        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;
+        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('');
+            setAmountError("");
         }
     }, [validateAmount]);
     const handlePreviewTransaction = useCallback(() => {
@@ -80,13 +172,18 @@ export function SendModal({ isOpen, onClose, currentChain, availableChains, disp
         }
     }, [send, recipientAddress, amount]);
     const handleReset = useCallback(() => {
-        setRecipientAddress('');
-        setAmount('');
-        setAddressError('');
-        setAmountError('');
+        setRecipientAddress("");
+        setAmount("");
+        setAddressError("");
+        setAmountError("");
         setShowPreview(false);
+        setShowTokenSelector(false);
         reset();
     }, [reset]);
+    const handleTokenSelect = useCallback((token) => {
+        setSelectedToken(token);
+        setShowTokenSelector(false);
+    }, []);
     useEffect(() => {
         if (!isOpen) {
             handleReset();
@@ -95,12 +192,12 @@ export function SendModal({ isOpen, onClose, currentChain, availableChains, disp
     if (!isOpen)
         return null;
     const availableBalanceValue = useMemo(() => {
-        if (!balance || !currentChain)
-            return '0';
-        return formatBalanceValue(balance, currentChain.nativeCurrency.decimals);
-    }, [balance, currentChain]);
-    const symbol = currentChain?.nativeCurrency.symbol || 'ETH';
-    const chainName = currentChain?.displayName || 'Select Chain';
+        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) {
@@ -113,15 +210,10 @@ export function SendModal({ isOpen, onClose, currentChain, availableChains, disp
     if (showPreview) {
         return (_jsx(PreviewTransactionModal, { isOpen: true, onClose: () => setShowPreview(false), onConfirm: handleConfirmSend, recipientAddress: recipientAddress, amount: amount, displayAddress: displayAddress, currentChain: currentChain, isSending: isSending, 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-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: "Send" }), _jsx("div", { style: { width: '40px' } })] }), _jsxs("div", { className: "wallet-modal-send-content", children: [_jsxs("div", { className: "wallet-modal-send-field", children: [_jsx("label", { className: "wallet-modal-send-label", children: "Select any token" }), _jsx("div", { className: "wallet-modal-send-token-selector-wrapper", children: _jsx(ChainSelector, { currentChain: currentChain, availableChains: availableChains, onChainSelect: async (chainId) => {
-                                            if (switchChainEnhanced && chainId !== currentChain?.id) {
-                                                try {
-                                                    await switchChainEnhanced(chainId);
-                                                }
-                                                catch (error) {
-                                                    console.error('Failed to switch chain:', error);
-                                                }
-                                            }
-                                        }, theme: theme, className: "wallet-modal-send-chain-selector" }) })] }), _jsxs("div", { className: "wallet-modal-send-field", children: [_jsxs("div", { className: "wallet-modal-send-amount-wrapper", children: [_jsx("div", { className: "wallet-modal-send-amount-prefix", children: symbol }), _jsx("input", { type: "text", className: `wallet-modal-send-amount-input ${amountError ? 'error' : ''}`, placeholder: "Enter amount", value: amount, onChange: (e) => handleAmountChange(e.target.value) }), _jsx("div", { className: "wallet-modal-send-amount-suffix", children: "$ --" })] }), amountError && _jsx("div", { className: "wallet-modal-send-error", children: amountError }), _jsxs("div", { className: "wallet-modal-send-balance", children: [_jsx("span", { className: "wallet-modal-send-balance-label", children: "Available:" }), _jsxs("span", { className: "wallet-modal-send-balance-value", children: [availableBalanceValue, " ", symbol] })] })] }), _jsxs("div", { className: "wallet-modal-send-field", children: [_jsx("label", { className: "wallet-modal-send-label", children: "Recipient Address" }), _jsx("input", { type: "text", className: `wallet-modal-send-address-input ${addressError ? 'error' : ''}`, placeholder: "Address", value: recipientAddress, onChange: (e) => handleRecipientAddressChange(e.target.value) }), addressError && _jsx("div", { className: "wallet-modal-send-error", children: addressError })] }), _jsx("button", { className: `wallet-modal-send-preview-btn wallet-modal-theme-${theme} ${!isFormValid ? 'disabled' : ''}`, onClick: handlePreviewTransaction, disabled: !isFormValid, children: "Preview transaction" })] })] }) }));
+    // 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