tiwiflix-wallet-connector 1.5.0 → 1.5.2

package/dist/index.esm.js

@@ -6460,7 +6460,7 @@ const BaseModal = ({ isOpen, onClose, title, children, modalPosition = 'bottom',
     return modalContent;
 };
 
-const AccountDetailsModal = ({ isOpen, onClose, account, onDisconnect, onCopyAddress, onOpenSwap, onOpenSend, onOpenActivity, balance, balanceLoading, twcBalance, usdValue, nftCount = 0, nftLoading = false, tonBalance = null, tonUsdValue = null, walletIcon, colors, isDarkMode, modalPosition = 'bottom', }) => {
+const AccountDetailsModal = ({ isOpen, onClose, account, onDisconnect, onCopyAddress, onOpenSwap, onOpenSend, onOpenActivity, balance, balanceLoading, twcBalance, usdValue, nftCount = 0, nftLoading = false, tonBalance = null, tonUsdValue = null, walletIcon, colors, isDarkMode, modalPosition = 'bottom', onSwitchWallet, }) => {
     // State for TWC price - hooks must be called before any conditional returns
     const [twcPrice, setTwcPrice] = useState(null);
     const [priceLoading, setPriceLoading] = useState(false);
@@ -7502,7 +7502,19 @@ const defaultStyles = {
         fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         boxShadow: '0 4px 14px 0 rgba(51, 150, 255, 0.39)',
     }};
-const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className, style, showBalance = false, modalPosition = 'center', theme = 'auto', buttonText = 'Connect Wallet', fetchTransactions, getExplorerUrl, fetchBalance, }) => {
+const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className, style, showBalance = false, modalPosition = 'center', theme = 'auto', buttonText = 'Connect Wallet', fetchTransactions, getExplorerUrl, fetchBalance: fetchBalanceProp, }) => {
+    // Provide a default fetchBalance if not passed
+    const fetchBalance = fetchBalanceProp || (async (account) => {
+        // Default: return zero balance with symbol based on chain
+        let symbol = 'TWC';
+        if (account?.chainType === 'ton')
+            symbol = 'TON';
+        if (account?.chainType === 'solana')
+            symbol = 'SOL';
+        if (account?.chainType === 'tron')
+            symbol = 'TRX';
+        return { amount: '0', symbol };
+    });
     // Detect dark mode
     const [isDarkMode, setIsDarkMode] = useState(false);
     useEffect(() => {
@@ -8503,6 +8515,12 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             setIsConnecting(false);
         }
         catch (err) {
+            // Always clear connection state on error
+            setAccount(null);
+            setStatus(ConnectionStatus.DISCONNECTED);
+            setIsInitializing(false);
+            setIsConnecting(false);
+            setShowModal(false);
             // Close modal if the user explicitly cancelled the connection
             const message = err instanceof Error ? err.message : String(err);
             const isUserCancellation = message.toLowerCase().includes('cancelled') ||
@@ -8513,22 +8531,11 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                 message.toLowerCase().includes('rejected') ||
                 message.toLowerCase().includes('modal closed by user') ||
                 message.toLowerCase().includes('connection cancelled by user');
-            if (isUserCancellation) {
-                setShowModal(false);
-                // Reset connecting state and verify actual connection status
-                const actualAccount = await connector.getAccount();
-                if (!actualAccount) {
-                    setAccount(null);
-                }
-            }
-            else if (isTonWallet) {
+            if (!isUserCancellation && isTonWallet) {
                 // For TON, only reopen the modal on non-cancellation errors
                 setShowModal(true);
             }
         }
-        finally {
-            setIsConnecting(false);
-        }
     }, [connector, fetchBalance, loadBalance]);
     const handleDisconnect = useCallback(async () => {
         try {
@@ -8592,24 +8599,36 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             setError('Failed to switch network. Please switch manually to BSC in your wallet.');
         }
     }, [connector]);
-    const handleOpenModal = useCallback(() => {
+    // Only open wallet selection modal if not connected, or if explicitly switching
+    const handleOpenModal = useCallback((force = false) => {
+        // If already connected and not explicitly switching, do nothing
+        const state = connector.getState();
+        if (!force && account && state.status === 'connected') {
+            return;
+        }
         // Show ALL wallets - use cached wallets to prevent re-renders
         if (!walletsRef.current) {
             walletsRef.current = connector.getAllWallets();
         }
         setAvailableWallets(walletsRef.current);
         setShowModal(true);
-    }, [connector]);
+    }, [connector, account]);
     // Render button based on connection status
     const renderButton = () => {
         // Check if we're waiting for connection OR waiting for balance to load
         // Show loading if: initializing, connecting, OR (account exists but balance hasn't loaded/resolved yet)
-        // Treat "0", "0.00" or empty as "not loaded yet" - only show connected state when we have real (non-zero) balance
-        const hasRealBalance = (balance.amount && balance.amount !== '0' && balance.amount !== '0.00' && balance.amount !== '' && balance.amount !== 'Loading...') ||
+        // For TON: treat as resolved after fetch completes (even if 0). For others: treat zero/empty as resolved.
+        (balance.amount && balance.amount !== '0' && balance.amount !== '0.00' && balance.amount !== '' && balance.amount !== 'Loading...') ||
             (twcBalance && twcBalance !== '0' && twcBalance !== '0.00' && twcBalance !== '' && twcBalance !== 'Loading...');
-        // For TON wallets, balance is resolved after fetch completes (even if empty/0)
-        // For other wallets, balance is resolved only if we have a real (non-zero) balance
-        const isBalanceResolved = !balanceLoading && (hasRealBalance || (account?.chainType === 'ton' && !isInitializing));
+        let isBalanceResolved;
+        if (account?.chainType === 'ton') {
+            // For TON, resolved if not loading or initializing
+            isBalanceResolved = !balanceLoading && !isInitializing;
+        }
+        else {
+            // For EVM, Solana, Tron: resolved if not loading (even if balance is zero)
+            isBalanceResolved = !balanceLoading && !isInitializing;
+        }
         const waitingForBalance = account && !isBalanceResolved;
         const isCheckingConnection = isInitializing || waitingForBalance || ((status === ConnectionStatus.CONNECTING || isConnecting) && !account);
         const isActuallyConnecting = (status === ConnectionStatus.CONNECTING || isConnecting) && account && isBalanceResolved;
@@ -8820,31 +8839,34 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
         // Wallet icon SVG component
         const WalletIcon = () => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { display: 'block' }, children: [jsx("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }), jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })] }));
-        return (jsxs("button", { onClick: handleOpenModal, style: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                padding: '12px 12px',
-                borderRadius: '12px',
-                border: 'none',
-                backgroundColor: '#FF9814', // Warm golden-orange
-                color: '#000000', // Black text
-                fontWeight: '700',
-                fontSize: '15px',
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
-                fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                boxShadow: '0 2px 8px rgba(255, 152, 20, 0.3)',
-                ...style,
-            }, className: className, onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = '#E8870F';
-                e.currentTarget.style.transform = 'translateY(-1px)';
-                e.currentTarget.style.boxShadow = '0 4px 12px rgba(255, 152, 20, 0.4)';
-            }, onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = '#FF9814';
-                e.currentTarget.style.transform = 'translateY(0)';
-                e.currentTarget.style.boxShadow = '0 2px 8px rgba(255, 152, 20, 0.3)';
-            }, children: [jsx("span", { style: { color: '#000000', display: 'flex', alignItems: 'center' }, children: jsx(WalletIcon, {}) }), jsx("span", { style: { color: '#000000', fontWeight: '500', fontSize: '14px' }, children: buttonText })] }));
+        // Only show connect button if not connected
+        if (!account || status !== ConnectionStatus.CONNECTED) {
+            return (jsxs("button", { onClick: () => handleOpenModal(), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    padding: '12px 12px',
+                    borderRadius: '12px',
+                    border: 'none',
+                    backgroundColor: '#FF9814', // Warm golden-orange
+                    color: '#000000', // Black text
+                    fontWeight: '700',
+                    fontSize: '15px',
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                    fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    boxShadow: '0 2px 8px rgba(255, 152, 20, 0.3)',
+                    ...style,
+                }, className: className, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = '#E8870F';
+                    e.currentTarget.style.transform = 'translateY(-1px)';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(255, 152, 20, 0.4)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = '#FF9814';
+                    e.currentTarget.style.transform = 'translateY(0)';
+                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(255, 152, 20, 0.3)';
+                }, children: [jsx("span", { style: { color: '#000000', display: 'flex', alignItems: 'center' }, children: jsx(WalletIcon, {}) }), jsx("span", { style: { color: '#000000', fontWeight: '500', fontSize: '14px' }, children: buttonText })] }));
+        }
     };
     // Group wallets by chain
     availableWallets.reduce((acc, wallet) => {
@@ -8863,7 +8885,9 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         .tiwiflix-scrollbar-hide::-webkit-scrollbar {
           display: none;
         }
-      ` }), renderButton(), jsx(AccountDetailsModal, { isOpen: showDetailsModal, onClose: () => setShowDetailsModal(false), account: account, onDisconnect: handleDisconnect, onCopyAddress: handleCopyAddress, onOpenSwap: () => setShowSwapModal(true), onOpenSend: () => setShowSendModal(true), onOpenActivity: () => setShowActivityModal(true), balance: balance, balanceLoading: balanceLoading, twcBalance: twcBalance, usdValue: usdValue, nftCount: nftCount, nftLoading: nftLoading, tonBalance: balance.amount || tonBalance, tonUsdValue: balance.usdValue ?? tonUsdValue, walletIcon: walletIcon, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsx(ActivityModal, { isOpen: showActivityModal, onClose: () => setShowActivityModal(false), transactions: txs, loading: txsLoading, error: txsError, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsx(SwapModal, { isOpen: showSwapModal && account?.chainType !== 'ton', onClose: () => setShowSwapModal(false), colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsx(SendModal, { isOpen: showSendModal, onClose: () => setShowSendModal(false), balance: balance, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, onSend: async () => {
+      ` }), renderButton(), jsx(AccountDetailsModal, { isOpen: showDetailsModal, onClose: () => setShowDetailsModal(false), account: account, onDisconnect: handleDisconnect, onCopyAddress: handleCopyAddress, onOpenSwap: () => setShowSwapModal(true), onOpenSend: () => setShowSendModal(true), onOpenActivity: () => setShowActivityModal(true), balance: balance, balanceLoading: balanceLoading, twcBalance: twcBalance, usdValue: usdValue, nftCount: nftCount, nftLoading: nftLoading, tonBalance: balance.amount || tonBalance, tonUsdValue: balance.usdValue ?? tonUsdValue, walletIcon: walletIcon, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, 
+                // Add a Switch Wallet button to allow explicit wallet switching
+                onSwitchWallet: () => handleOpenModal(true) }), jsx(ActivityModal, { isOpen: showActivityModal, onClose: () => setShowActivityModal(false), transactions: txs, loading: txsLoading, error: txsError, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsx(SwapModal, { isOpen: showSwapModal && account?.chainType !== 'ton', onClose: () => setShowSwapModal(false), colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsx(SendModal, { isOpen: showSendModal, onClose: () => setShowSendModal(false), balance: balance, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, onSend: async () => {
                     alert('Send functionality coming soon');
                     setShowSendModal(false);
                 } }), jsx(TWCBalanceModal, { isOpen: showTWCBalanceModal, onClose: () => setShowTWCBalanceModal(false), twcBalance: twcBalance, usdValue: usdValue, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, onBuyTWC: () => {

package/dist/index.js

@@ -6462,7 +6462,7 @@ const BaseModal = ({ isOpen, onClose, title, children, modalPosition = 'bottom',
     return modalContent;
 };
 
-const AccountDetailsModal = ({ isOpen, onClose, account, onDisconnect, onCopyAddress, onOpenSwap, onOpenSend, onOpenActivity, balance, balanceLoading, twcBalance, usdValue, nftCount = 0, nftLoading = false, tonBalance = null, tonUsdValue = null, walletIcon, colors, isDarkMode, modalPosition = 'bottom', }) => {
+const AccountDetailsModal = ({ isOpen, onClose, account, onDisconnect, onCopyAddress, onOpenSwap, onOpenSend, onOpenActivity, balance, balanceLoading, twcBalance, usdValue, nftCount = 0, nftLoading = false, tonBalance = null, tonUsdValue = null, walletIcon, colors, isDarkMode, modalPosition = 'bottom', onSwitchWallet, }) => {
     // State for TWC price - hooks must be called before any conditional returns
     const [twcPrice, setTwcPrice] = React.useState(null);
     const [priceLoading, setPriceLoading] = React.useState(false);
@@ -7504,7 +7504,19 @@ const defaultStyles = {
         fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         boxShadow: '0 4px 14px 0 rgba(51, 150, 255, 0.39)',
     }};
-const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className, style, showBalance = false, modalPosition = 'center', theme = 'auto', buttonText = 'Connect Wallet', fetchTransactions, getExplorerUrl, fetchBalance, }) => {
+const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className, style, showBalance = false, modalPosition = 'center', theme = 'auto', buttonText = 'Connect Wallet', fetchTransactions, getExplorerUrl, fetchBalance: fetchBalanceProp, }) => {
+    // Provide a default fetchBalance if not passed
+    const fetchBalance = fetchBalanceProp || (async (account) => {
+        // Default: return zero balance with symbol based on chain
+        let symbol = 'TWC';
+        if (account?.chainType === 'ton')
+            symbol = 'TON';
+        if (account?.chainType === 'solana')
+            symbol = 'SOL';
+        if (account?.chainType === 'tron')
+            symbol = 'TRX';
+        return { amount: '0', symbol };
+    });
     // Detect dark mode
     const [isDarkMode, setIsDarkMode] = React.useState(false);
     React.useEffect(() => {
@@ -8505,6 +8517,12 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             setIsConnecting(false);
         }
         catch (err) {
+            // Always clear connection state on error
+            setAccount(null);
+            setStatus(exports.ConnectionStatus.DISCONNECTED);
+            setIsInitializing(false);
+            setIsConnecting(false);
+            setShowModal(false);
             // Close modal if the user explicitly cancelled the connection
             const message = err instanceof Error ? err.message : String(err);
             const isUserCancellation = message.toLowerCase().includes('cancelled') ||
@@ -8515,22 +8533,11 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                 message.toLowerCase().includes('rejected') ||
                 message.toLowerCase().includes('modal closed by user') ||
                 message.toLowerCase().includes('connection cancelled by user');
-            if (isUserCancellation) {
-                setShowModal(false);
-                // Reset connecting state and verify actual connection status
-                const actualAccount = await connector.getAccount();
-                if (!actualAccount) {
-                    setAccount(null);
-                }
-            }
-            else if (isTonWallet) {
+            if (!isUserCancellation && isTonWallet) {
                 // For TON, only reopen the modal on non-cancellation errors
                 setShowModal(true);
             }
         }
-        finally {
-            setIsConnecting(false);
-        }
     }, [connector, fetchBalance, loadBalance]);
     const handleDisconnect = React.useCallback(async () => {
         try {
@@ -8594,24 +8601,36 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             setError('Failed to switch network. Please switch manually to BSC in your wallet.');
         }
     }, [connector]);
-    const handleOpenModal = React.useCallback(() => {
+    // Only open wallet selection modal if not connected, or if explicitly switching
+    const handleOpenModal = React.useCallback((force = false) => {
+        // If already connected and not explicitly switching, do nothing
+        const state = connector.getState();
+        if (!force && account && state.status === 'connected') {
+            return;
+        }
         // Show ALL wallets - use cached wallets to prevent re-renders
         if (!walletsRef.current) {
             walletsRef.current = connector.getAllWallets();
         }
         setAvailableWallets(walletsRef.current);
         setShowModal(true);
-    }, [connector]);
+    }, [connector, account]);
     // Render button based on connection status
     const renderButton = () => {
         // Check if we're waiting for connection OR waiting for balance to load
         // Show loading if: initializing, connecting, OR (account exists but balance hasn't loaded/resolved yet)
-        // Treat "0", "0.00" or empty as "not loaded yet" - only show connected state when we have real (non-zero) balance
-        const hasRealBalance = (balance.amount && balance.amount !== '0' && balance.amount !== '0.00' && balance.amount !== '' && balance.amount !== 'Loading...') ||
+        // For TON: treat as resolved after fetch completes (even if 0). For others: treat zero/empty as resolved.
+        (balance.amount && balance.amount !== '0' && balance.amount !== '0.00' && balance.amount !== '' && balance.amount !== 'Loading...') ||
             (twcBalance && twcBalance !== '0' && twcBalance !== '0.00' && twcBalance !== '' && twcBalance !== 'Loading...');
-        // For TON wallets, balance is resolved after fetch completes (even if empty/0)
-        // For other wallets, balance is resolved only if we have a real (non-zero) balance
-        const isBalanceResolved = !balanceLoading && (hasRealBalance || (account?.chainType === 'ton' && !isInitializing));
+        let isBalanceResolved;
+        if (account?.chainType === 'ton') {
+            // For TON, resolved if not loading or initializing
+            isBalanceResolved = !balanceLoading && !isInitializing;
+        }
+        else {
+            // For EVM, Solana, Tron: resolved if not loading (even if balance is zero)
+            isBalanceResolved = !balanceLoading && !isInitializing;
+        }
         const waitingForBalance = account && !isBalanceResolved;
         const isCheckingConnection = isInitializing || waitingForBalance || ((status === exports.ConnectionStatus.CONNECTING || isConnecting) && !account);
         const isActuallyConnecting = (status === exports.ConnectionStatus.CONNECTING || isConnecting) && account && isBalanceResolved;
@@ -8822,31 +8841,34 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
         // Wallet icon SVG component
         const WalletIcon = () => (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { display: 'block' }, children: [jsxRuntime.jsx("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }), jsxRuntime.jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })] }));
-        return (jsxRuntime.jsxs("button", { onClick: handleOpenModal, style: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                padding: '12px 12px',
-                borderRadius: '12px',
-                border: 'none',
-                backgroundColor: '#FF9814', // Warm golden-orange
-                color: '#000000', // Black text
-                fontWeight: '700',
-                fontSize: '15px',
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
-                fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                boxShadow: '0 2px 8px rgba(255, 152, 20, 0.3)',
-                ...style,
-            }, className: className, onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = '#E8870F';
-                e.currentTarget.style.transform = 'translateY(-1px)';
-                e.currentTarget.style.boxShadow = '0 4px 12px rgba(255, 152, 20, 0.4)';
-            }, onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = '#FF9814';
-                e.currentTarget.style.transform = 'translateY(0)';
-                e.currentTarget.style.boxShadow = '0 2px 8px rgba(255, 152, 20, 0.3)';
-            }, children: [jsxRuntime.jsx("span", { style: { color: '#000000', display: 'flex', alignItems: 'center' }, children: jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx("span", { style: { color: '#000000', fontWeight: '500', fontSize: '14px' }, children: buttonText })] }));
+        // Only show connect button if not connected
+        if (!account || status !== exports.ConnectionStatus.CONNECTED) {
+            return (jsxRuntime.jsxs("button", { onClick: () => handleOpenModal(), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    padding: '12px 12px',
+                    borderRadius: '12px',
+                    border: 'none',
+                    backgroundColor: '#FF9814', // Warm golden-orange
+                    color: '#000000', // Black text
+                    fontWeight: '700',
+                    fontSize: '15px',
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                    fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    boxShadow: '0 2px 8px rgba(255, 152, 20, 0.3)',
+                    ...style,
+                }, className: className, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = '#E8870F';
+                    e.currentTarget.style.transform = 'translateY(-1px)';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(255, 152, 20, 0.4)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = '#FF9814';
+                    e.currentTarget.style.transform = 'translateY(0)';
+                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(255, 152, 20, 0.3)';
+                }, children: [jsxRuntime.jsx("span", { style: { color: '#000000', display: 'flex', alignItems: 'center' }, children: jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx("span", { style: { color: '#000000', fontWeight: '500', fontSize: '14px' }, children: buttonText })] }));
+        }
     };
     // Group wallets by chain
     availableWallets.reduce((acc, wallet) => {
@@ -8865,7 +8887,9 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         .tiwiflix-scrollbar-hide::-webkit-scrollbar {
           display: none;
         }
-      ` }), renderButton(), jsxRuntime.jsx(AccountDetailsModal, { isOpen: showDetailsModal, onClose: () => setShowDetailsModal(false), account: account, onDisconnect: handleDisconnect, onCopyAddress: handleCopyAddress, onOpenSwap: () => setShowSwapModal(true), onOpenSend: () => setShowSendModal(true), onOpenActivity: () => setShowActivityModal(true), balance: balance, balanceLoading: balanceLoading, twcBalance: twcBalance, usdValue: usdValue, nftCount: nftCount, nftLoading: nftLoading, tonBalance: balance.amount || tonBalance, tonUsdValue: balance.usdValue ?? tonUsdValue, walletIcon: walletIcon, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsxRuntime.jsx(ActivityModal, { isOpen: showActivityModal, onClose: () => setShowActivityModal(false), transactions: txs, loading: txsLoading, error: txsError, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsxRuntime.jsx(SwapModal, { isOpen: showSwapModal && account?.chainType !== 'ton', onClose: () => setShowSwapModal(false), colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsxRuntime.jsx(SendModal, { isOpen: showSendModal, onClose: () => setShowSendModal(false), balance: balance, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, onSend: async () => {
+      ` }), renderButton(), jsxRuntime.jsx(AccountDetailsModal, { isOpen: showDetailsModal, onClose: () => setShowDetailsModal(false), account: account, onDisconnect: handleDisconnect, onCopyAddress: handleCopyAddress, onOpenSwap: () => setShowSwapModal(true), onOpenSend: () => setShowSendModal(true), onOpenActivity: () => setShowActivityModal(true), balance: balance, balanceLoading: balanceLoading, twcBalance: twcBalance, usdValue: usdValue, nftCount: nftCount, nftLoading: nftLoading, tonBalance: balance.amount || tonBalance, tonUsdValue: balance.usdValue ?? tonUsdValue, walletIcon: walletIcon, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, 
+                // Add a Switch Wallet button to allow explicit wallet switching
+                onSwitchWallet: () => handleOpenModal(true) }), jsxRuntime.jsx(ActivityModal, { isOpen: showActivityModal, onClose: () => setShowActivityModal(false), transactions: txs, loading: txsLoading, error: txsError, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsxRuntime.jsx(SwapModal, { isOpen: showSwapModal && account?.chainType !== 'ton', onClose: () => setShowSwapModal(false), colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition }), jsxRuntime.jsx(SendModal, { isOpen: showSendModal, onClose: () => setShowSendModal(false), balance: balance, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, onSend: async () => {
                     alert('Send functionality coming soon');
                     setShowSendModal(false);
                 } }), jsxRuntime.jsx(TWCBalanceModal, { isOpen: showTWCBalanceModal, onClose: () => setShowTWCBalanceModal(false), twcBalance: twcBalance, usdValue: usdValue, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition, onBuyTWC: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiwiflix-wallet-connector",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Multi-chain wallet connector for Tiwiflix supporting EVM, TON, Solana, and Tron wallets",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",