tiwiflix-wallet-connector 1.5.9 → 1.6.1

package/dist/index.esm.js

@@ -3529,9 +3529,13 @@ class MetamaskAdapter extends EVMBaseAdapter {
         // Debug mode - safe environment check for browser
         this.debugMode = isDevelopmentMode();
     }
-    // Always show MetaMask as available; we'll connect via SDK or injected provider at runtime
+    // Only show MetaMask as available if detected
     isAvailable() {
-        return true;
+        if (typeof window === 'undefined')
+            return false;
+        // Check for injected MetaMask provider
+        const provider = this.getInjectedProvider();
+        return !!provider;
     }
     /**
      * Debug logging utility
@@ -5077,13 +5081,10 @@ class TONBaseAdapter extends BaseWalletAdapter {
         return 'https://app.tiwiflix.xyz/manifest.json';
     }
     isAvailable() {
-        // Check if we're in a browser environment
+        // Only show TON wallet as available if a TON wallet is detected (extension or injected)
         if (typeof window === 'undefined')
             return false;
-        // TON Connect works via QR code and deep links even without browser extensions
-        // So we should always return true in browser environment
-        // The SDK will be loaded dynamically during connect()
-        return true;
+        return this.checkForTonWalletExtensions();
     }
     /**
      * @deprecated No longer used - TonConnect UI is loaded dynamically
@@ -7516,20 +7517,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
@@ -7824,7 +7811,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') {
@@ -7835,16 +7822,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);
@@ -8395,7 +8379,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',
@@ -8417,14 +8407,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;
         // Only log and run effect if account is not null
         if (account) {
-            console.log('[ConnectButton] useEffect: account changed', { 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;
@@ -8447,9 +8437,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;
@@ -8467,16 +8457,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();
@@ -8497,7 +8494,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') {
@@ -8664,7 +8661,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);
@@ -8689,85 +8686,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

@@ -3531,9 +3531,13 @@ class MetamaskAdapter extends EVMBaseAdapter {
         // Debug mode - safe environment check for browser
         this.debugMode = isDevelopmentMode();
     }
-    // Always show MetaMask as available; we'll connect via SDK or injected provider at runtime
+    // Only show MetaMask as available if detected
     isAvailable() {
-        return true;
+        if (typeof window === 'undefined')
+            return false;
+        // Check for injected MetaMask provider
+        const provider = this.getInjectedProvider();
+        return !!provider;
     }
     /**
      * Debug logging utility
@@ -5079,13 +5083,10 @@ class TONBaseAdapter extends BaseWalletAdapter {
         return 'https://app.tiwiflix.xyz/manifest.json';
     }
     isAvailable() {
-        // Check if we're in a browser environment
+        // Only show TON wallet as available if a TON wallet is detected (extension or injected)
         if (typeof window === 'undefined')
             return false;
-        // TON Connect works via QR code and deep links even without browser extensions
-        // So we should always return true in browser environment
-        // The SDK will be loaded dynamically during connect()
-        return true;
+        return this.checkForTonWalletExtensions();
     }
     /**
      * @deprecated No longer used - TonConnect UI is loaded dynamically
@@ -7518,20 +7519,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
@@ -7826,7 +7813,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') {
@@ -7837,16 +7824,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);
@@ -8397,7 +8381,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',
@@ -8419,14 +8409,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;
         // Only log and run effect if account is not null
         if (account) {
-            console.log('[ConnectButton] useEffect: account changed', { 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;
@@ -8449,9 +8439,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;
@@ -8469,16 +8459,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();
@@ -8499,7 +8496,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') {
@@ -8666,7 +8663,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);
@@ -8691,85 +8688,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.9",
+  "version": "1.6.1",
   "description": "Multi-chain wallet connector for Tiwiflix supporting EVM, TON, Solana, and Tron wallets",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",