tiwiflix-wallet-connector 1.6.7 → 1.6.9

package/dist/index.d.ts

@@ -418,8 +418,6 @@ declare class WalletConnector {
      * Get TWC token balance for EVM wallets
      * TWC is ONLY available on BSC (chainId 56)
      */
-    private twcBalanceCache;
-    private readonly TWC_CACHE_TTL;
     private balanceFetchErrors;
     getTWCBalance(): Promise<{
         amount: string;
@@ -492,10 +490,6 @@ declare class WalletConnector {
      * Can optionally filter by collection addresses
      */
     private queryAllTONNFTs;
-    /**
-     * Query TON API for NFTs owned by an address in a specific collection
-     */
-    private queryTONNFTs;
 }
 
 /**

package/dist/index.esm.js

@@ -1907,7 +1907,7 @@ const defaultMultiChainConfig = {
         {
             chainId: 56,
             name: 'BNB Smart Chain',
-            rpcUrl: 'https://bsc-dataseed.binance.org',
+            rpcUrl: 'https://bsc.publicnode.com',
             blockExplorerUrl: 'https://bscscan.com',
             nativeCurrency: {
                 name: 'BNB',
@@ -2312,6 +2312,7 @@ class WalletConnector {
             error: null,
             twcBalance: null,
             usdValue: null,
+            chainId: null,
         };
         // Performance monitoring
         this.performanceMetrics = {
@@ -2325,8 +2326,6 @@ class WalletConnector {
          * TWC is ONLY available on BSC (chainId 56)
          */
         // Cache for TWC balance to avoid redundant fetches
-        this.twcBalanceCache = null;
-        this.TWC_CACHE_TTL = 30000; // 30 seconds cache
         // Error tracking for balance fetching
         this.balanceFetchErrors = [];
         this.config = config;
@@ -2425,13 +2424,38 @@ class WalletConnector {
      * Connect to a wallet
      */
     async connect(walletType) {
+        // Only allow EVM wallet connections on BSC (chainId 56)
+        let adapter = this.adapters.get(walletType);
+        if (adapter && adapter.chainType === ChainType.EVM && typeof adapter.getChainId === 'function') {
+            try {
+                const chainId = await adapter.getChainId();
+                if (chainId !== 56) {
+                    const error = new Error('Only Binance Smart Chain (BSC) is supported for EVM wallet connections. Please switch your wallet to BSC and try again.');
+                    this.updateState({
+                        status: ConnectionStatus.ERROR,
+                        error,
+                    });
+                    this.eventEmitter.emit(WalletEvent.ERROR, error);
+                    throw error;
+                }
+            }
+            catch (e) {
+                const error = new Error('Failed to detect EVM chain. Please ensure your wallet is connected to BSC.');
+                this.updateState({
+                    status: ConnectionStatus.ERROR,
+                    error,
+                });
+                this.eventEmitter.emit(WalletEvent.ERROR, error);
+                throw error;
+            }
+        }
         // Prevent duplicate connection requests
         if (this.state.status === ConnectionStatus.CONNECTING) {
             const error = new Error('Connection already in progress. Please wait...');
             console.warn('Duplicate connection attempt blocked:', walletType);
             throw error;
         }
-        const adapter = this.adapters.get(walletType);
+        // adapter already declared above
         if (!adapter) {
             const error = new Error(`Wallet ${walletType} is not registered`);
             this.updateState({
@@ -2668,7 +2692,7 @@ class WalletConnector {
             clearTimeout(safetyTimeout);
             clearTimeout(connectionTimeout);
             document.removeEventListener('visibilitychange', handleVisibilityChange);
-            error instanceof Error ? error.message : 'Connection failed';
+            // removed unused errorMsg
             this.debugTools.error('WALLET_CONNECTOR', 'Connection error caught', error);
             // Reset state on connection error
             this.updateState({
@@ -2750,7 +2774,7 @@ class WalletConnector {
         }
         else {
             // Connection failed - reset state properly
-            result.error?.message || 'Failed to connect';
+            // removed unused errorMsg
             this.debugTools.error('WALLET_CONNECTOR', 'Connection failed', result.error);
             this.updateState({
                 status: ConnectionStatus.DISCONNECTED,
@@ -3126,153 +3150,29 @@ class WalletConnector {
         this.sdkLoader.clearCache();
     }
     async getTWCBalance() {
-        if (!this.state.account) {
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.('[getTWCBalance] No wallet connected');
-            throw new Error('No wallet connected');
+        if (!this.state.account || this.state.account.chainType !== 'evm') {
+            throw new Error('No EVM account connected');
         }
         const accountAddress = this.state.account.address;
-        const chainId = this.state.chainId;
-        performance.now();
-        if (typeof window !== 'undefined')
-            window.showDebugLog?.(`[getTWCBalance] Called for account=${accountAddress}, chainId=${chainId}`);
-        // Check cache first
-        if (this.twcBalanceCache &&
-            this.twcBalanceCache.address === accountAddress &&
-            Date.now() - this.twcBalanceCache.timestamp < this.TWC_CACHE_TTL) {
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] Using cache for ${accountAddress}: ${JSON.stringify(this.twcBalanceCache)}`);
-            return {
-                amount: this.twcBalanceCache.balance,
-                symbol: 'TWC',
-                usdValue: this.twcBalanceCache.usdValue,
-                usdFormatted: priceService.formatUSDValue(this.twcBalanceCache.usdValue)
-            };
-        }
-        // TWC contract on BSC
         const TWC_CONTRACT = '0xDA1060158F7D593667cCE0a15DB346BB3FfB3596';
         const TWC_DECIMALS = 9;
         const TWC_SYMBOL = 'TWC';
-        try {
-            // Get balance directly from wallet provider via EVM adapter
-            // Use the currently connected wallet's adapter
-            const currentWallet = this.state.wallet;
-            if (!currentWallet) {
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.('[getTWCBalance] No wallet connected (no currentWallet)');
-                throw new Error('No wallet connected');
-            }
-            const adapter = this.adapters.get(currentWallet);
-            if (!adapter || adapter.chainType !== ChainType.EVM) {
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.('[getTWCBalance] No EVM adapter available');
-                throw new Error('No EVM adapter available');
-            }
-            // Debug: log adapter type and available methods
-            if (typeof window !== 'undefined') {
-                window.showDebugLog?.(`[getTWCBalance] Using adapter: ${adapter.constructor?.name || typeof adapter}`);
-                window.showDebugLog?.(`[getTWCBalance] Adapter keys: ${Object.keys(adapter).join(', ')}`);
-                window.showDebugLog?.(`[getTWCBalance] typeof getTokenBalance: ${typeof adapter.getTokenBalance}`);
-            }
-            let balance;
-            // Always use ethers fallback if EVM is connected, regardless of chainId
-            if (this.state.chainId !== 56) {
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Warning: Not on BSC (chainId=${this.state.chainId}), but fetching TWC balance using ethers fallback.`);
-                // Fallback: use ethers.js to fetch balance from chain
-                let provider = adapter.provider || this.getProvider();
-                if (!provider) {
-                    if (typeof window !== 'undefined')
-                        window.showDebugLog?.('[getTWCBalance] No provider available for ethers fallback');
-                    throw new Error('No provider available for ethers fallback');
-                }
-                if (!provider._isProvider) {
-                    provider = new ethers.BrowserProvider(provider);
-                }
-                const erc20Abi = ["function balanceOf(address) view returns (uint256)"];
-                const contract = new ethers.Contract(TWC_CONTRACT, erc20Abi, provider);
-                const rawBalance = await contract.balanceOf(accountAddress);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] [ethers fallback] rawBalance (BigInt) for ${accountAddress}: ${rawBalance?.toString?.()}`);
-                balance = ethers.formatUnits(rawBalance, TWC_DECIMALS);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Raw balance for ${accountAddress} (ethers): ${balance}`);
-            }
-            else if (typeof adapter.getTokenBalance === 'function') {
-                // Use adapter method if available and on BSC
-                const balancePromise = adapter.getTokenBalance(TWC_CONTRACT, TWC_DECIMALS, true);
-                const timeoutPromise = new Promise((_, reject) => {
-                    setTimeout(() => reject(new Error('Balance fetch timeout after 10 seconds')), 10000);
-                });
-                balance = await Promise.race([balancePromise, timeoutPromise]);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Raw balance for ${accountAddress} (adapter): ${balance}`);
-            }
-            else {
-                // Fallback: use ethers.js to fetch balance from chain (should not happen, but for safety)
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.('[getTWCBalance] Fallback to ethers.js for TWC balance (on BSC)');
-                let provider = adapter.provider || this.getProvider();
-                if (!provider) {
-                    if (typeof window !== 'undefined')
-                        window.showDebugLog?.('[getTWCBalance] No provider available for ethers fallback');
-                    throw new Error('No provider available for ethers fallback');
-                }
-                if (!provider._isProvider) {
-                    provider = new ethers.BrowserProvider(provider);
-                }
-                const erc20Abi = ["function balanceOf(address) view returns (uint256)"];
-                const contract = new ethers.Contract(TWC_CONTRACT, erc20Abi, provider);
-                const rawBalance = await contract.balanceOf(accountAddress);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] [ethers fallback] rawBalance (BigInt) for ${accountAddress}: ${rawBalance?.toString?.()}`);
-                balance = ethers.formatUnits(rawBalance, TWC_DECIMALS);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Raw balance for ${accountAddress} (ethers): ${balance}`);
-            }
-            // Calculate USD value with 5 second timeout
-            const usdPromise = priceService.calculateTWCValue(balance);
-            const usdTimeoutPromise = new Promise((resolve) => {
-                setTimeout(() => resolve(0), 5000); // Default to 0 on timeout
-            });
-            const usdValue = await Promise.race([usdPromise, usdTimeoutPromise]);
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] USD value for ${accountAddress}: ${usdValue}`);
-            // Update cache
-            this.twcBalanceCache = {
-                balance,
-                usdValue,
-                timestamp: Date.now(),
-                address: accountAddress
-            };
-            const result = {
-                amount: balance,
-                symbol: TWC_SYMBOL,
-                usdValue,
-                usdFormatted: priceService.formatUSDValue(usdValue)
-            };
-            // Keep state in sync
-            this.updateState({ twcBalance: result.amount, usdValue: result.usdValue ?? null });
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] Final result for ${accountAddress}: ${JSON.stringify(result)}`);
-            return result;
-        }
-        catch (error) {
-            const errorMsg = error instanceof Error ? error.message : String(error);
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] ERROR: ${errorMsg}`);
-            // Track error
-            this.balanceFetchErrors.push({
-                endpoint: 'wallet-provider',
-                error: errorMsg,
-                timestamp: Date.now()
-            });
-            // Keep only last 10 errors
-            if (this.balanceFetchErrors.length > 10) {
-                this.balanceFetchErrors = this.balanceFetchErrors.slice(-10);
-            }
-            throw error;
-        }
+        let provider = this.getProvider();
+        // If provider is missing or not a valid ethers.js provider, use a public BSC provider
+        if (!provider || typeof provider.call !== 'function') {
+            provider = new ethers.JsonRpcProvider('https://bsc.publicnode.com', 56);
+        }
+        const erc20Abi = ["function balanceOf(address) view returns (uint256)"];
+        const contract = new ethers.Contract(TWC_CONTRACT, erc20Abi, provider);
+        const rawBalance = await contract.balanceOf(accountAddress);
+        const balance = ethers.formatUnits(rawBalance, TWC_DECIMALS);
+        const usdValue = await priceService.calculateTWCValue(balance);
+        return {
+            amount: balance,
+            symbol: TWC_SYMBOL,
+            usdValue,
+            usdFormatted: priceService.formatUSDValue(usdValue)
+        };
     }
     /**
      * Get balance fetch error history (for debugging)
@@ -3534,73 +3434,6 @@ class WalletConnector {
             return [];
         }
     }
-    /**
-     * Query TON API for NFTs owned by an address in a specific collection
-     */
-    async queryTONNFTs(ownerAddress, collectionAddress) {
-        // TON API endpoints to try
-        const endpoints = [
-            'https://tonapi.io/v1',
-            'https://testnet.tonapi.io/v1'
-        ];
-        for (const baseUrl of endpoints) {
-            try {
-                // First, get NFT items for the collection
-                const collectionResponse = await fetch(`${baseUrl}/nft/getItems?collection=${collectionAddress}&limit=1000`, {
-                    method: 'GET',
-                    headers: {
-                        'Accept': 'application/json'
-                    }
-                });
-                if (!collectionResponse.ok) {
-                    continue; // Try next endpoint
-                }
-                const collectionData = await collectionResponse.json();
-                const nftItems = collectionData.nft_items || [];
-                // Filter NFTs owned by the specified address
-                const ownedNFTs = [];
-                for (const nft of nftItems) {
-                    if (nft.owner?.address === ownerAddress) {
-                        ownedNFTs.push({
-                            collection: collectionAddress,
-                            nftAddress: nft.address,
-                            name: nft.metadata?.name,
-                            description: nft.metadata?.description
-                        });
-                    }
-                }
-                return ownedNFTs;
-            }
-            catch (error) {
-                this.debugTools.warn('WALLET_CONNECTOR', `TON API call failed for ${baseUrl}`, error);
-                continue; // Try next endpoint
-            }
-        }
-        // If all endpoints fail, try a simpler approach using getAccountNftItems
-        try {
-            const accountResponse = await fetch(`${endpoints[0]}/account/getNftItems?account=${ownerAddress}&collection=${collectionAddress}&limit=100`, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/json'
-                }
-            });
-            if (accountResponse.ok) {
-                const accountData = await accountResponse.json();
-                const nftItems = accountData.nft_items || [];
-                return nftItems.map((nft) => ({
-                    collection: collectionAddress,
-                    nftAddress: nft.address,
-                    name: nft.metadata?.name,
-                    description: nft.metadata?.description
-                }));
-            }
-        }
-        catch (error) {
-            this.debugTools.warn('WALLET_CONNECTOR', 'Fallback NFT query also failed', error);
-        }
-        // Return empty array if all queries fail
-        return [];
-    }
 }
 
 /**
@@ -7651,8 +7484,41 @@ function showDebugLog(msg) {
 const tonApiCache = new Map();
 const CACHE_DURATION = 30000; // 30 seconds
 const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className, style, showBalance = false, modalPosition = 'center', theme = 'auto', buttonText = 'Connect Wallet', getExplorerUrl, }) => {
+    // Move all state hooks that are referenced early to the top to avoid use-before-init errors
+    const [isInitializing, setIsInitializing] = useState(true);
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [balanceLoading, setBalanceLoading] = useState(false);
     // Always fetch balance automatically when wallet is connected
     // Balance is always fetched automatically from the chain
+    // Helper: get the best available TWC balance (cached or real)
+    const getDisplayBalance = () => {
+        // Prefer real fetched balance if available and non-zero
+        if (twcBalance && twcBalance !== '0' && twcBalance !== '0.00')
+            return twcBalance;
+        // Fallback to cached balance if available and non-zero
+        if (account?.address) {
+            const cached = loadTWCBalanceFromCache(account.address);
+            if (cached?.balance && cached.balance !== '0' && cached.balance !== '0.00')
+                return cached.balance;
+        }
+        // If loading, keep showing last known value (even if zero)
+        if (isInitializing || isConnecting) {
+            if (twcBalance)
+                return twcBalance;
+            if (account?.address) {
+                const cached = loadTWCBalanceFromCache(account.address);
+                if (cached?.balance)
+                    return cached.balance;
+            }
+        }
+        // Otherwise, show 0
+        return '0';
+    };
+    // ...existing code...
+    // ...existing code...
+    // Helper: show spinner if loading/connecting
+    // Show spinner if initializing, connecting, or balance is loading
+    const showSpinner = Boolean(isInitializing || isConnecting || balanceLoading);
     // Detect dark mode
     const [isDarkMode, setIsDarkMode] = useState(false);
     useEffect(() => {
@@ -7670,7 +7536,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     }, [theme]);
     const [account, setAccount] = useState(null);
     const [status, setStatus] = useState(ConnectionStatus.DISCONNECTED);
-    const [isInitializing, setIsInitializing] = useState(true);
     const [showModal, setShowModal] = useState(false);
     // Preload Reown SDK when modal opens for faster connection
     React.useEffect(() => {
@@ -7692,7 +7557,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     const [showActivityModal, setShowActivityModal] = useState(false);
     const [showTWCBalanceModal, setShowTWCBalanceModal] = useState(false);
     const [availableWallets, setAvailableWallets] = useState([]);
-    const [isConnecting, setIsConnecting] = useState(false);
     const [error, setError] = useState(null);
     const [nftCount, setNftCount] = useState(0);
     const [nftLoading, setNftLoading] = useState(false);
@@ -7703,7 +7567,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     const [txsLoading, setTxsLoading] = useState(false);
     const [txsError, setTxsError] = useState(null);
     const [balance, setBalance] = useState({ amount: '', symbol: '' });
-    const [balanceLoading, setBalanceLoading] = useState(false);
     const [currentChainId, setCurrentChainId] = useState(null);
     const [isWrongNetwork, setIsWrongNetwork] = useState(false);
     // TWC Balance cache key prefix
@@ -8531,10 +8394,13 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         // Fetch TWC balance for all EVM chains (for debugging)
         try {
             const state = connector.getState();
-            if (state.account?.chainType !== 'evm') {
-                // Not EVM, do not fetch TWC balance
+            if (state.status !== 'connected' ||
+                !state.account ||
+                state.account.chainType !== 'evm') {
+                // Not connected, no account, or not EVM, do not fetch TWC balance
                 return null;
             }
+            // Allow fetching even if chainId is null, as long as account exists and is EVM
             // Log chainId for debug
             showDebugLog?.(`[fetchTWCBalanceWithRetry] Fetching TWC for chainId=${state.chainId}`);
             const twcBalance = await connector.getTWCBalance();
@@ -8878,8 +8744,8 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     }, [connector, account]);
     // Render button based on connection status
     const renderButton = () => {
-        // Only show connect button if we are fully initialized and truly disconnected (no account and status is DISCONNECTED)
-        if (!isInitializing && (!account && status === ConnectionStatus.DISCONNECTED)) {
+        // Always show connect button for first-time visitors or when not connected
+        if (!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: {
@@ -9053,34 +8919,75 @@ 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" })] }));
-        // 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 })] }));
-        }
+        // Always show the button, but change content based on connection state
+        const displayBalance = getDisplayBalance();
+        const isConnected = !!account && status === ConnectionStatus.CONNECTED;
+        // Helper for details modal open
+        const handleOpenDetailsModal = () => setShowDetailsModal(true);
+        // Wallet icon for display
+        const walletIcon = account ? getWalletIcon(connector.getState().wallet || '') : jsx("span", { children: "\uD83D\uDCBC" });
+        // Current wallet type
+        const currentWalletType = connector.getState().wallet;
+        return (jsxs(React.Fragment, { children: [jsx("style", { children: `
+          @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
+          .tiwiflix-scrollbar-hide::-webkit-scrollbar {
+            display: none;
+          }
+          .twc-balance-spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #FF9814;
+            border-top: 2px solid #fff;
+            border-radius: 50%;
+            animation: spin 0.7s linear infinite;
+            margin-left: 6px;
+            vertical-align: middle;
+          }
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }), jsxs("button", { onClick: () => (isConnected ? handleOpenDetailsModal() : handleOpenModal()), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '10px',
+                        padding: '12px 12px',
+                        borderRadius: '12px',
+                        border: 'none',
+                        backgroundColor: isConnected ? '#0A0A0A' : '#FF9814',
+                        color: isConnected ? '#FF9814' : '#000000',
+                        fontWeight: '700',
+                        fontSize: '15px',
+                        cursor: showSpinner ? 'wait' : 'pointer',
+                        transition: 'all 0.15s ease',
+                        fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                        boxShadow: isConnected ? '0 2px 8px rgba(10,10,10,0.3)' : '0 2px 8px rgba(255, 152, 20, 0.3)',
+                        opacity: showSpinner ? 0.85 : 1,
+                        pointerEvents: showSpinner ? 'none' : 'auto',
+                        ...style,
+                    }, className: className, disabled: showSpinner, onMouseEnter: (e) => {
+                        if (!isConnected) {
+                            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) => {
+                        if (!isConnected) {
+                            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: isConnected ? '#FF9814' : '#000000', display: 'flex', alignItems: 'center' }, children: jsx(WalletIcon, {}) }), jsx("span", { style: { color: isConnected ? '#FF9814' : '#000000', fontWeight: '500', fontSize: '14px' }, children: isConnected ? (jsxs(Fragment, { children: [twcIconMemoized, jsx("span", { style: { marginLeft: 6, fontWeight: 600, fontFamily: 'SF Mono, Monaco, Inconsolata, Roboto Mono, monospace' }, children: displayBalance }), showSpinner && jsx("span", { className: "twc-balance-spinner" })] })) : (jsxs(Fragment, { children: [buttonText, showSpinner && jsx("span", { className: "twc-balance-spinner" })] })) })] }), 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: () => {
+                        // Handle Buy TWC action
+                    }, onLearnMore: () => {
+                        // Handle Learn More action
+                    } }), jsx(WalletSelectModal, { isOpen: showModal, onClose: () => setShowModal(false), onSelectWallet: handleConnect, availableWallets: availableWallets, currentWalletType: currentWalletType, isConnecting: isConnecting, error: error, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition })] }));
     };
     // Group wallets by chain
     availableWallets.reduce((acc, wallet) => {

package/dist/index.js

@@ -1909,7 +1909,7 @@ const defaultMultiChainConfig = {
         {
             chainId: 56,
             name: 'BNB Smart Chain',
-            rpcUrl: 'https://bsc-dataseed.binance.org',
+            rpcUrl: 'https://bsc.publicnode.com',
             blockExplorerUrl: 'https://bscscan.com',
             nativeCurrency: {
                 name: 'BNB',
@@ -2314,6 +2314,7 @@ class WalletConnector {
             error: null,
             twcBalance: null,
             usdValue: null,
+            chainId: null,
         };
         // Performance monitoring
         this.performanceMetrics = {
@@ -2327,8 +2328,6 @@ class WalletConnector {
          * TWC is ONLY available on BSC (chainId 56)
          */
         // Cache for TWC balance to avoid redundant fetches
-        this.twcBalanceCache = null;
-        this.TWC_CACHE_TTL = 30000; // 30 seconds cache
         // Error tracking for balance fetching
         this.balanceFetchErrors = [];
         this.config = config;
@@ -2427,13 +2426,38 @@ class WalletConnector {
      * Connect to a wallet
      */
     async connect(walletType) {
+        // Only allow EVM wallet connections on BSC (chainId 56)
+        let adapter = this.adapters.get(walletType);
+        if (adapter && adapter.chainType === exports.ChainType.EVM && typeof adapter.getChainId === 'function') {
+            try {
+                const chainId = await adapter.getChainId();
+                if (chainId !== 56) {
+                    const error = new Error('Only Binance Smart Chain (BSC) is supported for EVM wallet connections. Please switch your wallet to BSC and try again.');
+                    this.updateState({
+                        status: exports.ConnectionStatus.ERROR,
+                        error,
+                    });
+                    this.eventEmitter.emit(exports.WalletEvent.ERROR, error);
+                    throw error;
+                }
+            }
+            catch (e) {
+                const error = new Error('Failed to detect EVM chain. Please ensure your wallet is connected to BSC.');
+                this.updateState({
+                    status: exports.ConnectionStatus.ERROR,
+                    error,
+                });
+                this.eventEmitter.emit(exports.WalletEvent.ERROR, error);
+                throw error;
+            }
+        }
         // Prevent duplicate connection requests
         if (this.state.status === exports.ConnectionStatus.CONNECTING) {
             const error = new Error('Connection already in progress. Please wait...');
             console.warn('Duplicate connection attempt blocked:', walletType);
             throw error;
         }
-        const adapter = this.adapters.get(walletType);
+        // adapter already declared above
         if (!adapter) {
             const error = new Error(`Wallet ${walletType} is not registered`);
             this.updateState({
@@ -2670,7 +2694,7 @@ class WalletConnector {
             clearTimeout(safetyTimeout);
             clearTimeout(connectionTimeout);
             document.removeEventListener('visibilitychange', handleVisibilityChange);
-            error instanceof Error ? error.message : 'Connection failed';
+            // removed unused errorMsg
             this.debugTools.error('WALLET_CONNECTOR', 'Connection error caught', error);
             // Reset state on connection error
             this.updateState({
@@ -2752,7 +2776,7 @@ class WalletConnector {
         }
         else {
             // Connection failed - reset state properly
-            result.error?.message || 'Failed to connect';
+            // removed unused errorMsg
             this.debugTools.error('WALLET_CONNECTOR', 'Connection failed', result.error);
             this.updateState({
                 status: exports.ConnectionStatus.DISCONNECTED,
@@ -3128,153 +3152,29 @@ class WalletConnector {
         this.sdkLoader.clearCache();
     }
     async getTWCBalance() {
-        if (!this.state.account) {
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.('[getTWCBalance] No wallet connected');
-            throw new Error('No wallet connected');
+        if (!this.state.account || this.state.account.chainType !== 'evm') {
+            throw new Error('No EVM account connected');
         }
         const accountAddress = this.state.account.address;
-        const chainId = this.state.chainId;
-        performance.now();
-        if (typeof window !== 'undefined')
-            window.showDebugLog?.(`[getTWCBalance] Called for account=${accountAddress}, chainId=${chainId}`);
-        // Check cache first
-        if (this.twcBalanceCache &&
-            this.twcBalanceCache.address === accountAddress &&
-            Date.now() - this.twcBalanceCache.timestamp < this.TWC_CACHE_TTL) {
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] Using cache for ${accountAddress}: ${JSON.stringify(this.twcBalanceCache)}`);
-            return {
-                amount: this.twcBalanceCache.balance,
-                symbol: 'TWC',
-                usdValue: this.twcBalanceCache.usdValue,
-                usdFormatted: priceService.formatUSDValue(this.twcBalanceCache.usdValue)
-            };
-        }
-        // TWC contract on BSC
         const TWC_CONTRACT = '0xDA1060158F7D593667cCE0a15DB346BB3FfB3596';
         const TWC_DECIMALS = 9;
         const TWC_SYMBOL = 'TWC';
-        try {
-            // Get balance directly from wallet provider via EVM adapter
-            // Use the currently connected wallet's adapter
-            const currentWallet = this.state.wallet;
-            if (!currentWallet) {
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.('[getTWCBalance] No wallet connected (no currentWallet)');
-                throw new Error('No wallet connected');
-            }
-            const adapter = this.adapters.get(currentWallet);
-            if (!adapter || adapter.chainType !== exports.ChainType.EVM) {
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.('[getTWCBalance] No EVM adapter available');
-                throw new Error('No EVM adapter available');
-            }
-            // Debug: log adapter type and available methods
-            if (typeof window !== 'undefined') {
-                window.showDebugLog?.(`[getTWCBalance] Using adapter: ${adapter.constructor?.name || typeof adapter}`);
-                window.showDebugLog?.(`[getTWCBalance] Adapter keys: ${Object.keys(adapter).join(', ')}`);
-                window.showDebugLog?.(`[getTWCBalance] typeof getTokenBalance: ${typeof adapter.getTokenBalance}`);
-            }
-            let balance;
-            // Always use ethers fallback if EVM is connected, regardless of chainId
-            if (this.state.chainId !== 56) {
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Warning: Not on BSC (chainId=${this.state.chainId}), but fetching TWC balance using ethers fallback.`);
-                // Fallback: use ethers.js to fetch balance from chain
-                let provider = adapter.provider || this.getProvider();
-                if (!provider) {
-                    if (typeof window !== 'undefined')
-                        window.showDebugLog?.('[getTWCBalance] No provider available for ethers fallback');
-                    throw new Error('No provider available for ethers fallback');
-                }
-                if (!provider._isProvider) {
-                    provider = new ethers.ethers.BrowserProvider(provider);
-                }
-                const erc20Abi = ["function balanceOf(address) view returns (uint256)"];
-                const contract = new ethers.ethers.Contract(TWC_CONTRACT, erc20Abi, provider);
-                const rawBalance = await contract.balanceOf(accountAddress);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] [ethers fallback] rawBalance (BigInt) for ${accountAddress}: ${rawBalance?.toString?.()}`);
-                balance = ethers.ethers.formatUnits(rawBalance, TWC_DECIMALS);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Raw balance for ${accountAddress} (ethers): ${balance}`);
-            }
-            else if (typeof adapter.getTokenBalance === 'function') {
-                // Use adapter method if available and on BSC
-                const balancePromise = adapter.getTokenBalance(TWC_CONTRACT, TWC_DECIMALS, true);
-                const timeoutPromise = new Promise((_, reject) => {
-                    setTimeout(() => reject(new Error('Balance fetch timeout after 10 seconds')), 10000);
-                });
-                balance = await Promise.race([balancePromise, timeoutPromise]);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Raw balance for ${accountAddress} (adapter): ${balance}`);
-            }
-            else {
-                // Fallback: use ethers.js to fetch balance from chain (should not happen, but for safety)
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.('[getTWCBalance] Fallback to ethers.js for TWC balance (on BSC)');
-                let provider = adapter.provider || this.getProvider();
-                if (!provider) {
-                    if (typeof window !== 'undefined')
-                        window.showDebugLog?.('[getTWCBalance] No provider available for ethers fallback');
-                    throw new Error('No provider available for ethers fallback');
-                }
-                if (!provider._isProvider) {
-                    provider = new ethers.ethers.BrowserProvider(provider);
-                }
-                const erc20Abi = ["function balanceOf(address) view returns (uint256)"];
-                const contract = new ethers.ethers.Contract(TWC_CONTRACT, erc20Abi, provider);
-                const rawBalance = await contract.balanceOf(accountAddress);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] [ethers fallback] rawBalance (BigInt) for ${accountAddress}: ${rawBalance?.toString?.()}`);
-                balance = ethers.ethers.formatUnits(rawBalance, TWC_DECIMALS);
-                if (typeof window !== 'undefined')
-                    window.showDebugLog?.(`[getTWCBalance] Raw balance for ${accountAddress} (ethers): ${balance}`);
-            }
-            // Calculate USD value with 5 second timeout
-            const usdPromise = priceService.calculateTWCValue(balance);
-            const usdTimeoutPromise = new Promise((resolve) => {
-                setTimeout(() => resolve(0), 5000); // Default to 0 on timeout
-            });
-            const usdValue = await Promise.race([usdPromise, usdTimeoutPromise]);
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] USD value for ${accountAddress}: ${usdValue}`);
-            // Update cache
-            this.twcBalanceCache = {
-                balance,
-                usdValue,
-                timestamp: Date.now(),
-                address: accountAddress
-            };
-            const result = {
-                amount: balance,
-                symbol: TWC_SYMBOL,
-                usdValue,
-                usdFormatted: priceService.formatUSDValue(usdValue)
-            };
-            // Keep state in sync
-            this.updateState({ twcBalance: result.amount, usdValue: result.usdValue ?? null });
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] Final result for ${accountAddress}: ${JSON.stringify(result)}`);
-            return result;
-        }
-        catch (error) {
-            const errorMsg = error instanceof Error ? error.message : String(error);
-            if (typeof window !== 'undefined')
-                window.showDebugLog?.(`[getTWCBalance] ERROR: ${errorMsg}`);
-            // Track error
-            this.balanceFetchErrors.push({
-                endpoint: 'wallet-provider',
-                error: errorMsg,
-                timestamp: Date.now()
-            });
-            // Keep only last 10 errors
-            if (this.balanceFetchErrors.length > 10) {
-                this.balanceFetchErrors = this.balanceFetchErrors.slice(-10);
-            }
-            throw error;
-        }
+        let provider = this.getProvider();
+        // If provider is missing or not a valid ethers.js provider, use a public BSC provider
+        if (!provider || typeof provider.call !== 'function') {
+            provider = new ethers.ethers.JsonRpcProvider('https://bsc.publicnode.com', 56);
+        }
+        const erc20Abi = ["function balanceOf(address) view returns (uint256)"];
+        const contract = new ethers.ethers.Contract(TWC_CONTRACT, erc20Abi, provider);
+        const rawBalance = await contract.balanceOf(accountAddress);
+        const balance = ethers.ethers.formatUnits(rawBalance, TWC_DECIMALS);
+        const usdValue = await priceService.calculateTWCValue(balance);
+        return {
+            amount: balance,
+            symbol: TWC_SYMBOL,
+            usdValue,
+            usdFormatted: priceService.formatUSDValue(usdValue)
+        };
     }
     /**
      * Get balance fetch error history (for debugging)
@@ -3536,73 +3436,6 @@ class WalletConnector {
             return [];
         }
     }
-    /**
-     * Query TON API for NFTs owned by an address in a specific collection
-     */
-    async queryTONNFTs(ownerAddress, collectionAddress) {
-        // TON API endpoints to try
-        const endpoints = [
-            'https://tonapi.io/v1',
-            'https://testnet.tonapi.io/v1'
-        ];
-        for (const baseUrl of endpoints) {
-            try {
-                // First, get NFT items for the collection
-                const collectionResponse = await fetch(`${baseUrl}/nft/getItems?collection=${collectionAddress}&limit=1000`, {
-                    method: 'GET',
-                    headers: {
-                        'Accept': 'application/json'
-                    }
-                });
-                if (!collectionResponse.ok) {
-                    continue; // Try next endpoint
-                }
-                const collectionData = await collectionResponse.json();
-                const nftItems = collectionData.nft_items || [];
-                // Filter NFTs owned by the specified address
-                const ownedNFTs = [];
-                for (const nft of nftItems) {
-                    if (nft.owner?.address === ownerAddress) {
-                        ownedNFTs.push({
-                            collection: collectionAddress,
-                            nftAddress: nft.address,
-                            name: nft.metadata?.name,
-                            description: nft.metadata?.description
-                        });
-                    }
-                }
-                return ownedNFTs;
-            }
-            catch (error) {
-                this.debugTools.warn('WALLET_CONNECTOR', `TON API call failed for ${baseUrl}`, error);
-                continue; // Try next endpoint
-            }
-        }
-        // If all endpoints fail, try a simpler approach using getAccountNftItems
-        try {
-            const accountResponse = await fetch(`${endpoints[0]}/account/getNftItems?account=${ownerAddress}&collection=${collectionAddress}&limit=100`, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/json'
-                }
-            });
-            if (accountResponse.ok) {
-                const accountData = await accountResponse.json();
-                const nftItems = accountData.nft_items || [];
-                return nftItems.map((nft) => ({
-                    collection: collectionAddress,
-                    nftAddress: nft.address,
-                    name: nft.metadata?.name,
-                    description: nft.metadata?.description
-                }));
-            }
-        }
-        catch (error) {
-            this.debugTools.warn('WALLET_CONNECTOR', 'Fallback NFT query also failed', error);
-        }
-        // Return empty array if all queries fail
-        return [];
-    }
 }
 
 /**
@@ -7653,8 +7486,41 @@ function showDebugLog(msg) {
 const tonApiCache = new Map();
 const CACHE_DURATION = 30000; // 30 seconds
 const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className, style, showBalance = false, modalPosition = 'center', theme = 'auto', buttonText = 'Connect Wallet', getExplorerUrl, }) => {
+    // Move all state hooks that are referenced early to the top to avoid use-before-init errors
+    const [isInitializing, setIsInitializing] = React.useState(true);
+    const [isConnecting, setIsConnecting] = React.useState(false);
+    const [balanceLoading, setBalanceLoading] = React.useState(false);
     // Always fetch balance automatically when wallet is connected
     // Balance is always fetched automatically from the chain
+    // Helper: get the best available TWC balance (cached or real)
+    const getDisplayBalance = () => {
+        // Prefer real fetched balance if available and non-zero
+        if (twcBalance && twcBalance !== '0' && twcBalance !== '0.00')
+            return twcBalance;
+        // Fallback to cached balance if available and non-zero
+        if (account?.address) {
+            const cached = loadTWCBalanceFromCache(account.address);
+            if (cached?.balance && cached.balance !== '0' && cached.balance !== '0.00')
+                return cached.balance;
+        }
+        // If loading, keep showing last known value (even if zero)
+        if (isInitializing || isConnecting) {
+            if (twcBalance)
+                return twcBalance;
+            if (account?.address) {
+                const cached = loadTWCBalanceFromCache(account.address);
+                if (cached?.balance)
+                    return cached.balance;
+            }
+        }
+        // Otherwise, show 0
+        return '0';
+    };
+    // ...existing code...
+    // ...existing code...
+    // Helper: show spinner if loading/connecting
+    // Show spinner if initializing, connecting, or balance is loading
+    const showSpinner = Boolean(isInitializing || isConnecting || balanceLoading);
     // Detect dark mode
     const [isDarkMode, setIsDarkMode] = React.useState(false);
     React.useEffect(() => {
@@ -7672,7 +7538,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     }, [theme]);
     const [account, setAccount] = React.useState(null);
     const [status, setStatus] = React.useState(exports.ConnectionStatus.DISCONNECTED);
-    const [isInitializing, setIsInitializing] = React.useState(true);
     const [showModal, setShowModal] = React.useState(false);
     // Preload Reown SDK when modal opens for faster connection
     React.useEffect(() => {
@@ -7694,7 +7559,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     const [showActivityModal, setShowActivityModal] = React.useState(false);
     const [showTWCBalanceModal, setShowTWCBalanceModal] = React.useState(false);
     const [availableWallets, setAvailableWallets] = React.useState([]);
-    const [isConnecting, setIsConnecting] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [nftCount, setNftCount] = React.useState(0);
     const [nftLoading, setNftLoading] = React.useState(false);
@@ -7705,7 +7569,6 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     const [txsLoading, setTxsLoading] = React.useState(false);
     const [txsError, setTxsError] = React.useState(null);
     const [balance, setBalance] = React.useState({ amount: '', symbol: '' });
-    const [balanceLoading, setBalanceLoading] = React.useState(false);
     const [currentChainId, setCurrentChainId] = React.useState(null);
     const [isWrongNetwork, setIsWrongNetwork] = React.useState(false);
     // TWC Balance cache key prefix
@@ -8533,10 +8396,13 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
         // Fetch TWC balance for all EVM chains (for debugging)
         try {
             const state = connector.getState();
-            if (state.account?.chainType !== 'evm') {
-                // Not EVM, do not fetch TWC balance
+            if (state.status !== 'connected' ||
+                !state.account ||
+                state.account.chainType !== 'evm') {
+                // Not connected, no account, or not EVM, do not fetch TWC balance
                 return null;
             }
+            // Allow fetching even if chainId is null, as long as account exists and is EVM
             // Log chainId for debug
             showDebugLog?.(`[fetchTWCBalanceWithRetry] Fetching TWC for chainId=${state.chainId}`);
             const twcBalance = await connector.getTWCBalance();
@@ -8880,8 +8746,8 @@ const ConnectButton = ({ connector, onConnect, onDisconnect, onError, className,
     }, [connector, account]);
     // Render button based on connection status
     const renderButton = () => {
-        // Only show connect button if we are fully initialized and truly disconnected (no account and status is DISCONNECTED)
-        if (!isInitializing && (!account && status === exports.ConnectionStatus.DISCONNECTED)) {
+        // Always show connect button for first-time visitors or when not connected
+        if (!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: {
@@ -9055,34 +8921,75 @@ 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" })] }));
-        // 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 })] }));
-        }
+        // Always show the button, but change content based on connection state
+        const displayBalance = getDisplayBalance();
+        const isConnected = !!account && status === exports.ConnectionStatus.CONNECTED;
+        // Helper for details modal open
+        const handleOpenDetailsModal = () => setShowDetailsModal(true);
+        // Wallet icon for display
+        const walletIcon = account ? getWalletIcon(connector.getState().wallet || '') : jsxRuntime.jsx("span", { children: "\uD83D\uDCBC" });
+        // Current wallet type
+        const currentWalletType = connector.getState().wallet;
+        return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("style", { children: `
+          @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
+          .tiwiflix-scrollbar-hide::-webkit-scrollbar {
+            display: none;
+          }
+          .twc-balance-spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #FF9814;
+            border-top: 2px solid #fff;
+            border-radius: 50%;
+            animation: spin 0.7s linear infinite;
+            margin-left: 6px;
+            vertical-align: middle;
+          }
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }), jsxRuntime.jsxs("button", { onClick: () => (isConnected ? handleOpenDetailsModal() : handleOpenModal()), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '10px',
+                        padding: '12px 12px',
+                        borderRadius: '12px',
+                        border: 'none',
+                        backgroundColor: isConnected ? '#0A0A0A' : '#FF9814',
+                        color: isConnected ? '#FF9814' : '#000000',
+                        fontWeight: '700',
+                        fontSize: '15px',
+                        cursor: showSpinner ? 'wait' : 'pointer',
+                        transition: 'all 0.15s ease',
+                        fontFamily: 'Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                        boxShadow: isConnected ? '0 2px 8px rgba(10,10,10,0.3)' : '0 2px 8px rgba(255, 152, 20, 0.3)',
+                        opacity: showSpinner ? 0.85 : 1,
+                        pointerEvents: showSpinner ? 'none' : 'auto',
+                        ...style,
+                    }, className: className, disabled: showSpinner, onMouseEnter: (e) => {
+                        if (!isConnected) {
+                            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) => {
+                        if (!isConnected) {
+                            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: isConnected ? '#FF9814' : '#000000', display: 'flex', alignItems: 'center' }, children: jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx("span", { style: { color: isConnected ? '#FF9814' : '#000000', fontWeight: '500', fontSize: '14px' }, children: isConnected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [twcIconMemoized, jsxRuntime.jsx("span", { style: { marginLeft: 6, fontWeight: 600, fontFamily: 'SF Mono, Monaco, Inconsolata, Roboto Mono, monospace' }, children: displayBalance }), showSpinner && jsxRuntime.jsx("span", { className: "twc-balance-spinner" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [buttonText, showSpinner && jsxRuntime.jsx("span", { className: "twc-balance-spinner" })] })) })] }), 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: () => {
+                        // Handle Buy TWC action
+                    }, onLearnMore: () => {
+                        // Handle Learn More action
+                    } }), jsxRuntime.jsx(WalletSelectModal, { isOpen: showModal, onClose: () => setShowModal(false), onSelectWallet: handleConnect, availableWallets: availableWallets, currentWalletType: currentWalletType, isConnecting: isConnecting, error: error, colors: colors, isDarkMode: isDarkMode, modalPosition: modalPosition })] }));
     };
     // Group wallets by chain
     availableWallets.reduce((acc, wallet) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiwiflix-wallet-connector",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "description": "Multi-chain wallet connector for Tiwiflix supporting EVM, TON, Solana, and Tron wallets",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -60,7 +60,7 @@
     "@tonconnect/ui": "^2.3.1",
     "@walletconnect/ethereum-provider": "^2.13.0",
     "@walletconnect/universal-provider": "^2.21.10",
-    "ethers": "^6.13.0",
+    "ethers": "^6.16.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "viem": "^2.42.1",