signer-test-sdk-react 0.0.20 → 0.0.22

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

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

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

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

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

@@ -2,114 +2,22 @@ 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("");
+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('');
     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({
@@ -135,22 +43,22 @@ export function SendModal({ isOpen, onClose, currentChain, displayAddress, avail
             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(() => {
@@ -172,18 +80,13 @@ export function SendModal({ isOpen, onClose, currentChain, displayAddress, avail
         }
     }, [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();
@@ -192,12 +95,12 @@ export function SendModal({ isOpen, onClose, currentChain, displayAddress, avail
     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";
+        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';
     const isFormValid = !addressError && !amountError && recipientAddress && amount;
     // Show success modal
     if (txHash && !showPreview) {
@@ -210,10 +113,15 @@ export function SendModal({ isOpen, onClose, currentChain, displayAddress, avail
     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" })] })] }) }));
+    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" })] })] }) }));
 }
 //# sourceMappingURL=SendModal.js.map