tiwiflix-wallet-connector 1.5.8 → 1.6.0

package/dist/index.esm.js

@@ -7516,20 +7516,6 @@ const TWCBalanceModal = ({ isOpen, onClose, twcBalance, usdValue, colors, isDark
 
 const tonApiCache = new Map();
 const CACHE_DURATION = 30000; // 30 seconds
-const defaultStyles = {
-    button: {
-        padding: '10px 20px',
-        borderRadius: '14px',
-        border: 'none',
-        backgroundColor: '#3396FF', // This will be overridden by theme colors in actual usage
-        color: 'white',
-        fontWeight: '500',
-        fontSize: '14px',
-        cursor: 'pointer',
-        transition: 'all 0.15s ease',
-        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 Now', getExplorerUrl, }) => {
     // Always fetch balance automatically when wallet is connected
     // Balance is always fetched automatically from the chain
@@ -7705,7 +7691,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     React.useRef(null);
     // Get theme colors
     const colors = getThemeColors(isDarkMode);
-    console.log('above loadbalance');
     // Load balance with caching
     const loadBalance = useCallback(async () => {
         if (!account) {
@@ -7825,7 +7810,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }, 4000); // force-resolve after 4s
         return () => clearTimeout(timeout);
     }, [isInitializing, balanceLoading, isConnecting]);
-    // Check chain ID and validate network
+    // Remove network restriction: allow all EVM networks to connect
     useEffect(() => {
         const checkChain = async () => {
             if (!account || account.chainType !== 'evm') {
@@ -7836,16 +7821,13 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             try {
                 const chainId = await connector.getCurrentChain();
                 setCurrentChainId(chainId);
-                // BSC Mainnet = 56, BSC Testnet = 97
-                const isBSC = chainId === 56 || chainId === 97;
-                setIsWrongNetwork(!isBSC && chainId !== null);
+                // No restriction: allow all EVM networks
+                setIsWrongNetwork(false);
             }
             catch (err) {
             }
         };
         checkChain();
-        // Also periodically check if still connected to EVM wallet
-        // This handles cases where chain is changed from wallet UI
         if (account && account.chainType === 'evm') {
             const interval = setInterval(checkChain, 2000);
             return () => clearInterval(interval);
@@ -7906,7 +7888,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
         let initTimeout;
         // If already connected, get account immediately and load balance
-        if (initialState.status === ConnectionStatus.CONNECTED) {
+        if (initialState.status === ConnectionStatus.CONNECTED && initialState.account) {
             // Set isInitializing to true initially, will be set to false once balance loads
             setIsInitializing(true);
             // Safety timeout - ensure we NEVER stay in loading state for more than 2 seconds
@@ -7917,9 +7899,22 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             connector.getAccount().then(async (acc) => {
                 if (!isMounted)
                     return;
-                setAccount(acc);
+                // Only set account to null if status is truly disconnected
+                if (!acc && connector.getState().status === ConnectionStatus.DISCONNECTED) {
+                    setAccount(null);
+                }
+                else if (acc) {
+                    setAccount(acc);
+                }
+                // Only proceed if account is present
+                if (!acc) {
+                    clearTimeout(safetyTimeout);
+                    setIsInitializing(false);
+                    setBalanceLoading(false);
+                    return;
+                }
                 // Load balance when account is available
-                if (acc && acc.chainType === 'ton') {
+                if (acc.chainType === 'ton') {
                     // For TON wallets, fetch balance and NFTs
                     setTwcBalance('0');
                     try {
@@ -7943,7 +7938,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                     // Check if we have real TWC balance (not 0)
                     const state = connector.getState();
                     const stateTwcBalance = state.twcBalance;
-                    if (acc && stateTwcBalance && stateTwcBalance !== '0' && stateTwcBalance !== '0.00') {
+                    if (stateTwcBalance && stateTwcBalance !== '0' && stateTwcBalance !== '0.00') {
                         if (!isMounted)
                             return;
                         setTwcBalance(stateTwcBalance);
@@ -7955,7 +7950,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                         clearTimeout(safetyTimeout);
                         setIsInitializing(false);
                     }
-                    else if (acc) {
+                    else {
                         // Try to load from cache as fallback
                         const cached = loadTWCBalanceFromCache(acc.address);
                         if (cached?.balance && cached.balance !== '0' && cached.balance !== '0.00') {
@@ -8047,9 +8042,11 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                     return;
                 clearTimeout(safetyTimeout);
                 setIsInitializing(false);
-                // If we can't get account even though status is connected, disconnect
-                setAccount(null);
-                connector.disconnect().catch(() => { });
+                setBalanceLoading(false);
+                // Only set account to null if status is truly disconnected
+                if (connector.getState().status === ConnectionStatus.DISCONNECTED) {
+                    setAccount(null);
+                }
             });
         }
         else {
@@ -8381,7 +8378,13 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
     }, [account]);
     const fetchTWCBalanceWithRetry = useCallback(async (maxRetries = 3, initialDelay = 200) => {
+        // Only fetch TWC balance if wallet is on BSC (chainId 56)
         try {
+            const state = connector.getState();
+            if (state.account?.chainType !== 'evm' || state.chainId !== 56) {
+                // Not on BSC, do not fetch TWC balance
+                return null;
+            }
             const twcBalance = await connector.getTWCBalance();
             return {
                 balance: twcBalance.amount || '0',
@@ -8403,13 +8406,14 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
         return null;
     }, [connector]);
-    // Load balance when account changes
+    // Load balance when account or network (chain) changes
     useEffect(() => {
         let isActive = true;
-        console.log('[ConnectButton] useEffect: account changed', { account });
+        // Only log and run effect if account is not null
         if (account) {
-            // For EVM wallets, try to get TWC balance
-            if (account.chainType === 'evm') {
+            console.log('[ConnectButton] useEffect: account or chain changed', { account, currentChainId });
+            // For EVM wallets, only fetch TWC balance if on BSC
+            if (account.chainType === 'evm' && currentChainId === 56) {
                 // First check state/cache for immediate display
                 const state = connector.getState();
                 let hasBalance = false;
@@ -8432,9 +8436,9 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                         hasBalance = true;
                     }
                 }
-                // Only fetch if we don't have a balance yet
-                if (!hasBalance) {
-                    console.log('[ConnectButton] Fetching TWC balance for EVM wallet:', account.address);
+                // Only fetch if we don't have a balance yet, or if the chain/network changed
+                if (!hasBalance || currentChainId !== null) {
+                    console.log('[ConnectButton] Fetching TWC balance for BSC wallet:', account.address, currentChainId);
                     fetchTWCBalanceWithRetry(2, 200).then((result) => {
                         if (!isActive)
                             return;
@@ -8452,16 +8456,23 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                             setTwcBalance('0');
                             setUsdValueStable(null);
                             setIsInitializing(false);
-                            console.warn('[ConnectButton] No TWC balance found for EVM wallet:', account.address);
+                            console.warn('[ConnectButton] No TWC balance found for BSC wallet:', account.address);
                         }
                     }).catch(() => {
                         if (!isActive)
                             return;
                         setIsInitializing(false);
-                        console.error('[ConnectButton] Error fetching TWC balance for EVM wallet:', account.address);
+                        console.error('[ConnectButton] Error fetching TWC balance for BSC wallet:', account.address);
                     });
                 }
             }
+            else if (account.chainType === 'evm' && currentChainId !== 56) {
+                // EVM wallet but not on BSC, do not fetch TWC balance, do not show switch chain
+                setTwcBalance(null);
+                setUsdValueStable(null);
+                setIsInitializing(false);
+                // Do not show error or prompt
+            }
             else {
                 // Non-EVM wallet, just check state
                 const state = connector.getState();
@@ -8482,7 +8493,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             isActive = false;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [account?.address]);
+    }, [account?.address, currentChainId]);
     // Polling mechanism as fallback to ensure TWC balance is always fetched
     useEffect(() => {
         if (!account || account.chainType !== 'evm') {
@@ -8649,7 +8660,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             alert('Address copied to clipboard!');
         }
     }, [account]);
-    const handleSwitchToBSC = useCallback(async () => {
+    useCallback(async () => {
         try {
             // Try to switch to BSC Mainnet (56)
             await connector.switchChain(56);
@@ -8674,85 +8685,47 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     }, [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)
-        // 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...');
-        // Treat balance loading as background; only gate on initial connection.
-        const isCheckingConnection = isInitializing || ((status === ConnectionStatus.CONNECTING || isConnecting) && !account);
-        const isActuallyConnecting = (status === ConnectionStatus.CONNECTING || isConnecting) && !!account && !isInitializing;
-        // Check connection state
-        if (isCheckingConnection) {
-            // Show loading connected button structure while checking connection
-            const isMobile = isMobileViewport();
-            // Loading spinner component
-            const LoadingSpinner = () => (jsxs(Fragment, { children: [jsx("div", { style: {
-                            width: isMobile ? '12px' : '14px',
-                            height: isMobile ? '12px' : '14px',
-                            border: '2px solid rgba(255, 255, 255, 0.3)',
-                            borderTopColor: '#FFFFFF',
-                            borderRadius: '50%',
-                            animation: 'spin 0.8s linear infinite',
-                        } }), jsx("style", { children: `
-            @keyframes spin {
-              to { transform: rotate(360deg); }
-            }
-          ` })] }));
-            return (jsx("button", { onClick: () => setShowDetailsModal(false), style: {
+        // Only show connect button if we are fully initialized and truly disconnected
+        if (!isInitializing && (!account || status === ConnectionStatus.DISCONNECTED)) {
+            // 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',
-                    justifyContent: 'space-between',
-                    padding: isMobile ? '4px 4px' : '6px 6px',
-                    borderRadius: '50px',
+                    gap: '10px',
+                    padding: '12px 12px',
+                    borderRadius: '12px',
                     border: 'none',
-                    background: '#2A2A2A',
-                    minWidth: isMobile ? '160px' : '320px',
-                    maxWidth: isMobile ? '100%' : undefined,
-                    cursor: 'default',
+                    backgroundColor: '#FF9814',
+                    color: '#000000',
+                    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, disabled: true, children: jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: isMobile ? '6px' : '10px', flex: '1', minWidth: 0, padding: isMobile ? '4px' : '8px' }, children: [twcIconMemoized, jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: isMobile ? '4px' : '6px', minWidth: 0 }, children: [jsx(LoadingSpinner, {}), jsx("div", { style: {
-                                        fontSize: isMobile ? '11px' : '12px',
-                                        fontWeight: '400',
-                                        color: '#FFFFFF',
-                                        fontFamily: 'Lexend, sans-serif',
-                                    }, children: "Loading..." }), jsx("div", { style: {
-                                        fontSize: isMobile ? '11px' : '12px',
-                                        fontWeight: '400',
-                                        color: '#FFFFFF',
-                                        fontFamily: 'Lexend, sans-serif',
-                                        flexShrink: 0,
-                                    }, children: "TWC" })] })] }) }));
+                }, 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 })] }));
         }
-        if (isActuallyConnecting) {
-            return (jsx("button", { style: { ...defaultStyles.button, opacity: 0.7, ...style }, className: className, disabled: true, children: "\u23F3 Connecting..." }));
+        // ...existing code...
+        // All other states (including loading, connecting, connected) should only show the connected button or loading spinner if account is present or initializing is true
+        // If initializing, show nothing (or a spinner if desired)
+        if (isInitializing) {
+            // Optionally, you can show a spinner or skeleton here, but do not show connect/disconnect buttons
+            return null;
         }
+        // ...existing code...
+        // The rest of the renderButton logic (wrong network, connected, etc.) remains unchanged
         if (account) {
-            // Show "Wrong Network" button if connected to non-BSC network
-            if (isWrongNetwork) {
-                return (jsx("button", { onClick: handleSwitchToBSC, style: {
-                        padding: '10px 16px',
-                        borderRadius: '16px',
-                        border: 'none',
-                        backgroundColor: '#F59E0B',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '10px',
-                        cursor: 'pointer',
-                        transition: 'all 0.15s ease',
-                        fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                        ...style,
-                    }, className: className, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = '#D97706';
-                        e.currentTarget.style.transform = 'translateY(-1px)';
-                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(245, 158, 11, 0.4)';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = '#F59E0B';
-                        e.currentTarget.style.transform = 'translateY(0)';
-                        e.currentTarget.style.boxShadow = 'none';
-                    }, children: jsx("span", { style: { fontSize: '13px', fontWeight: '600', color: 'white' }, children: "\uD83D\uDD04 Switch to BSC" }) }));
-            }
+            // ...existing code...
             // Show normal connected button - styled to match design
             // Parse balance amount and symbol separately
             // For TON: show TON balance (not TWC, not NFT count in button)

package/dist/index.js

@@ -7518,20 +7518,6 @@ const TWCBalanceModal = ({ isOpen, onClose, twcBalance, usdValue, colors, isDark
 
 const tonApiCache = new Map();
 const CACHE_DURATION = 30000; // 30 seconds
-const defaultStyles = {
-    button: {
-        padding: '10px 20px',
-        borderRadius: '14px',
-        border: 'none',
-        backgroundColor: '#3396FF', // This will be overridden by theme colors in actual usage
-        color: 'white',
-        fontWeight: '500',
-        fontSize: '14px',
-        cursor: 'pointer',
-        transition: 'all 0.15s ease',
-        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 Now', getExplorerUrl, }) => {
     // Always fetch balance automatically when wallet is connected
     // Balance is always fetched automatically from the chain
@@ -7707,7 +7693,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     React.useRef(null);
     // Get theme colors
     const colors = getThemeColors(isDarkMode);
-    console.log('above loadbalance');
     // Load balance with caching
     const loadBalance = React.useCallback(async () => {
         if (!account) {
@@ -7827,7 +7812,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }, 4000); // force-resolve after 4s
         return () => clearTimeout(timeout);
     }, [isInitializing, balanceLoading, isConnecting]);
-    // Check chain ID and validate network
+    // Remove network restriction: allow all EVM networks to connect
     React.useEffect(() => {
         const checkChain = async () => {
             if (!account || account.chainType !== 'evm') {
@@ -7838,16 +7823,13 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             try {
                 const chainId = await connector.getCurrentChain();
                 setCurrentChainId(chainId);
-                // BSC Mainnet = 56, BSC Testnet = 97
-                const isBSC = chainId === 56 || chainId === 97;
-                setIsWrongNetwork(!isBSC && chainId !== null);
+                // No restriction: allow all EVM networks
+                setIsWrongNetwork(false);
             }
             catch (err) {
             }
         };
         checkChain();
-        // Also periodically check if still connected to EVM wallet
-        // This handles cases where chain is changed from wallet UI
         if (account && account.chainType === 'evm') {
             const interval = setInterval(checkChain, 2000);
             return () => clearInterval(interval);
@@ -7908,7 +7890,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
         let initTimeout;
         // If already connected, get account immediately and load balance
-        if (initialState.status === exports.ConnectionStatus.CONNECTED) {
+        if (initialState.status === exports.ConnectionStatus.CONNECTED && initialState.account) {
             // Set isInitializing to true initially, will be set to false once balance loads
             setIsInitializing(true);
             // Safety timeout - ensure we NEVER stay in loading state for more than 2 seconds
@@ -7919,9 +7901,22 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             connector.getAccount().then(async (acc) => {
                 if (!isMounted)
                     return;
-                setAccount(acc);
+                // Only set account to null if status is truly disconnected
+                if (!acc && connector.getState().status === exports.ConnectionStatus.DISCONNECTED) {
+                    setAccount(null);
+                }
+                else if (acc) {
+                    setAccount(acc);
+                }
+                // Only proceed if account is present
+                if (!acc) {
+                    clearTimeout(safetyTimeout);
+                    setIsInitializing(false);
+                    setBalanceLoading(false);
+                    return;
+                }
                 // Load balance when account is available
-                if (acc && acc.chainType === 'ton') {
+                if (acc.chainType === 'ton') {
                     // For TON wallets, fetch balance and NFTs
                     setTwcBalance('0');
                     try {
@@ -7945,7 +7940,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                     // Check if we have real TWC balance (not 0)
                     const state = connector.getState();
                     const stateTwcBalance = state.twcBalance;
-                    if (acc && stateTwcBalance && stateTwcBalance !== '0' && stateTwcBalance !== '0.00') {
+                    if (stateTwcBalance && stateTwcBalance !== '0' && stateTwcBalance !== '0.00') {
                         if (!isMounted)
                             return;
                         setTwcBalance(stateTwcBalance);
@@ -7957,7 +7952,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                         clearTimeout(safetyTimeout);
                         setIsInitializing(false);
                     }
-                    else if (acc) {
+                    else {
                         // Try to load from cache as fallback
                         const cached = loadTWCBalanceFromCache(acc.address);
                         if (cached?.balance && cached.balance !== '0' && cached.balance !== '0.00') {
@@ -8049,9 +8044,11 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                     return;
                 clearTimeout(safetyTimeout);
                 setIsInitializing(false);
-                // If we can't get account even though status is connected, disconnect
-                setAccount(null);
-                connector.disconnect().catch(() => { });
+                setBalanceLoading(false);
+                // Only set account to null if status is truly disconnected
+                if (connector.getState().status === exports.ConnectionStatus.DISCONNECTED) {
+                    setAccount(null);
+                }
             });
         }
         else {
@@ -8383,7 +8380,13 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
     }, [account]);
     const fetchTWCBalanceWithRetry = React.useCallback(async (maxRetries = 3, initialDelay = 200) => {
+        // Only fetch TWC balance if wallet is on BSC (chainId 56)
         try {
+            const state = connector.getState();
+            if (state.account?.chainType !== 'evm' || state.chainId !== 56) {
+                // Not on BSC, do not fetch TWC balance
+                return null;
+            }
             const twcBalance = await connector.getTWCBalance();
             return {
                 balance: twcBalance.amount || '0',
@@ -8405,13 +8408,14 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         }
         return null;
     }, [connector]);
-    // Load balance when account changes
+    // Load balance when account or network (chain) changes
     React.useEffect(() => {
         let isActive = true;
-        console.log('[ConnectButton] useEffect: account changed', { account });
+        // Only log and run effect if account is not null
         if (account) {
-            // For EVM wallets, try to get TWC balance
-            if (account.chainType === 'evm') {
+            console.log('[ConnectButton] useEffect: account or chain changed', { account, currentChainId });
+            // For EVM wallets, only fetch TWC balance if on BSC
+            if (account.chainType === 'evm' && currentChainId === 56) {
                 // First check state/cache for immediate display
                 const state = connector.getState();
                 let hasBalance = false;
@@ -8434,9 +8438,9 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                         hasBalance = true;
                     }
                 }
-                // Only fetch if we don't have a balance yet
-                if (!hasBalance) {
-                    console.log('[ConnectButton] Fetching TWC balance for EVM wallet:', account.address);
+                // Only fetch if we don't have a balance yet, or if the chain/network changed
+                if (!hasBalance || currentChainId !== null) {
+                    console.log('[ConnectButton] Fetching TWC balance for BSC wallet:', account.address, currentChainId);
                     fetchTWCBalanceWithRetry(2, 200).then((result) => {
                         if (!isActive)
                             return;
@@ -8454,16 +8458,23 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
                             setTwcBalance('0');
                             setUsdValueStable(null);
                             setIsInitializing(false);
-                            console.warn('[ConnectButton] No TWC balance found for EVM wallet:', account.address);
+                            console.warn('[ConnectButton] No TWC balance found for BSC wallet:', account.address);
                         }
                     }).catch(() => {
                         if (!isActive)
                             return;
                         setIsInitializing(false);
-                        console.error('[ConnectButton] Error fetching TWC balance for EVM wallet:', account.address);
+                        console.error('[ConnectButton] Error fetching TWC balance for BSC wallet:', account.address);
                     });
                 }
             }
+            else if (account.chainType === 'evm' && currentChainId !== 56) {
+                // EVM wallet but not on BSC, do not fetch TWC balance, do not show switch chain
+                setTwcBalance(null);
+                setUsdValueStable(null);
+                setIsInitializing(false);
+                // Do not show error or prompt
+            }
             else {
                 // Non-EVM wallet, just check state
                 const state = connector.getState();
@@ -8484,7 +8495,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             isActive = false;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [account?.address]);
+    }, [account?.address, currentChainId]);
     // Polling mechanism as fallback to ensure TWC balance is always fetched
     React.useEffect(() => {
         if (!account || account.chainType !== 'evm') {
@@ -8651,7 +8662,7 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
             alert('Address copied to clipboard!');
         }
     }, [account]);
-    const handleSwitchToBSC = React.useCallback(async () => {
+    React.useCallback(async () => {
         try {
             // Try to switch to BSC Mainnet (56)
             await connector.switchChain(56);
@@ -8676,85 +8687,47 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     }, [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)
-        // 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...');
-        // Treat balance loading as background; only gate on initial connection.
-        const isCheckingConnection = isInitializing || ((status === exports.ConnectionStatus.CONNECTING || isConnecting) && !account);
-        const isActuallyConnecting = (status === exports.ConnectionStatus.CONNECTING || isConnecting) && !!account && !isInitializing;
-        // Check connection state
-        if (isCheckingConnection) {
-            // Show loading connected button structure while checking connection
-            const isMobile = isMobileViewport();
-            // Loading spinner component
-            const LoadingSpinner = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: {
-                            width: isMobile ? '12px' : '14px',
-                            height: isMobile ? '12px' : '14px',
-                            border: '2px solid rgba(255, 255, 255, 0.3)',
-                            borderTopColor: '#FFFFFF',
-                            borderRadius: '50%',
-                            animation: 'spin 0.8s linear infinite',
-                        } }), jsxRuntime.jsx("style", { children: `
-            @keyframes spin {
-              to { transform: rotate(360deg); }
-            }
-          ` })] }));
-            return (jsxRuntime.jsx("button", { onClick: () => setShowDetailsModal(false), style: {
+        // Only show connect button if we are fully initialized and truly disconnected
+        if (!isInitializing && (!account || status === exports.ConnectionStatus.DISCONNECTED)) {
+            // 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',
-                    justifyContent: 'space-between',
-                    padding: isMobile ? '4px 4px' : '6px 6px',
-                    borderRadius: '50px',
+                    gap: '10px',
+                    padding: '12px 12px',
+                    borderRadius: '12px',
                     border: 'none',
-                    background: '#2A2A2A',
-                    minWidth: isMobile ? '160px' : '320px',
-                    maxWidth: isMobile ? '100%' : undefined,
-                    cursor: 'default',
+                    backgroundColor: '#FF9814',
+                    color: '#000000',
+                    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, disabled: true, children: jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: isMobile ? '6px' : '10px', flex: '1', minWidth: 0, padding: isMobile ? '4px' : '8px' }, children: [twcIconMemoized, jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: isMobile ? '4px' : '6px', minWidth: 0 }, children: [jsxRuntime.jsx(LoadingSpinner, {}), jsxRuntime.jsx("div", { style: {
-                                        fontSize: isMobile ? '11px' : '12px',
-                                        fontWeight: '400',
-                                        color: '#FFFFFF',
-                                        fontFamily: 'Lexend, sans-serif',
-                                    }, children: "Loading..." }), jsxRuntime.jsx("div", { style: {
-                                        fontSize: isMobile ? '11px' : '12px',
-                                        fontWeight: '400',
-                                        color: '#FFFFFF',
-                                        fontFamily: 'Lexend, sans-serif',
-                                        flexShrink: 0,
-                                    }, children: "TWC" })] })] }) }));
+                }, 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 })] }));
         }
-        if (isActuallyConnecting) {
-            return (jsxRuntime.jsx("button", { style: { ...defaultStyles.button, opacity: 0.7, ...style }, className: className, disabled: true, children: "\u23F3 Connecting..." }));
+        // ...existing code...
+        // All other states (including loading, connecting, connected) should only show the connected button or loading spinner if account is present or initializing is true
+        // If initializing, show nothing (or a spinner if desired)
+        if (isInitializing) {
+            // Optionally, you can show a spinner or skeleton here, but do not show connect/disconnect buttons
+            return null;
         }
+        // ...existing code...
+        // The rest of the renderButton logic (wrong network, connected, etc.) remains unchanged
         if (account) {
-            // Show "Wrong Network" button if connected to non-BSC network
-            if (isWrongNetwork) {
-                return (jsxRuntime.jsx("button", { onClick: handleSwitchToBSC, style: {
-                        padding: '10px 16px',
-                        borderRadius: '16px',
-                        border: 'none',
-                        backgroundColor: '#F59E0B',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '10px',
-                        cursor: 'pointer',
-                        transition: 'all 0.15s ease',
-                        fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                        ...style,
-                    }, className: className, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = '#D97706';
-                        e.currentTarget.style.transform = 'translateY(-1px)';
-                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(245, 158, 11, 0.4)';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = '#F59E0B';
-                        e.currentTarget.style.transform = 'translateY(0)';
-                        e.currentTarget.style.boxShadow = 'none';
-                    }, children: jsxRuntime.jsx("span", { style: { fontSize: '13px', fontWeight: '600', color: 'white' }, children: "\uD83D\uDD04 Switch to BSC" }) }));
-            }
+            // ...existing code...
             // Show normal connected button - styled to match design
             // Parse balance amount and symbol separately
             // For TON: show TON balance (not TWC, not NFT count in button)

package/package.json

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