diff --git a/src/components/amount-input/index.tsx b/src/components/amount-input/index.tsx index 15ff6d9..e867cad 100644 --- a/src/components/amount-input/index.tsx +++ b/src/components/amount-input/index.tsx @@ -116,12 +116,13 @@ export const AmountInput = ({ pattern="[0-9]*[.]?[0-9]*" value={normalizedAmount} onChange={handleAmountChange} - className={`text-text-primary text-2xl sm:text-3xl font-bold bg-transparent border-none outline-none text-right w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${ - currency === 'xbtc' ? 'text-[#2A273080]' : '' - }`} + className={cn( + 'text-text-primary text-2xl sm:text-3xl font-bold bg-transparent border-none outline-none text-right w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', + readOnly && 'text-text-secondary' + )} placeholder="0.000" readOnly={readOnly} - disabled={currency === 'xbtc'} + disabled={readOnly} /> ${calculateUsdValue} diff --git a/src/components/history-table/transactions-table.tsx b/src/components/history-table/transactions-table.tsx index 79a65b7..c8359e2 100644 --- a/src/components/history-table/transactions-table.tsx +++ b/src/components/history-table/transactions-table.tsx @@ -25,6 +25,7 @@ import { TransactionTrackerDialog } from '../transaction-tracker'; import { useState } from 'react'; import { useTransactions } from '@/hooks/useTransactions'; import { TransactionNormalized } from './transaction-history-adapter'; +import { useSupportedChains } from '@/hooks/useSupportedChains'; /** * Transactions history table component @@ -44,10 +45,13 @@ export default function TransactionsTable() { txHash: string; } | null>(null); const [openTrackerDialog, setOpenTrackerDialog] = useState(false); + const { isSupported } = useSupportedChains(); const isWalletConnected = address !== undefined; const renderContent = () => { + if (!isSupported) return null; + // Render mobile view if (isMobile) { return ( @@ -60,7 +64,11 @@ export default function TransactionsTable() { ) : transactions?.length > 0 ? ( - + {transactions.map((tx: TransactionNormalized, index) => ( +
Expired
); diff --git a/src/hooks/useSupportedChains.ts b/src/hooks/useSupportedChains.ts index 390cba3..ef0519c 100644 --- a/src/hooks/useSupportedChains.ts +++ b/src/hooks/useSupportedChains.ts @@ -1,26 +1,51 @@ import { useEffect, useState } from 'react'; import { supportedChains } from '@/config/evm-chains'; +import { useAccount } from 'wagmi'; export function useSupportedChains() { const [chainId, setChainId] = useState(null); + const { isConnected } = useAccount(); useEffect(() => { - if (window.ethereum) { - window.ethereum.request({ method: 'eth_chainId' }).then((id: string) => { - setChainId(parseInt(id, 16)); - }); - const handler = (id: string) => { + const getChainId = async () => { + try { + // Intentar obtener el chainId del provider actual + const provider = window.ethereum?.providers?.find((p: { isMetaMask?: boolean }) => p.isMetaMask) || window.ethereum; + + if (provider) { + const id = await provider.request({ method: 'eth_chainId' }); + console.log('Raw chain ID from provider:', id); + setChainId(parseInt(id as string, 16)); + } + } catch (error) { + console.error('Error getting chain ID:', error); + } + }; + + if (isConnected) { + getChainId(); + + const handleChainChanged = (id: string) => { + console.log('Chain changed event received:', id); setChainId(parseInt(id, 16)); }; - window.ethereum.on('chainChanged', handler); + + window.ethereum?.on('chainChanged', handleChainChanged); + return () => { - window.ethereum.removeListener('chainChanged', handler); + window.ethereum?.removeListener('chainChanged', handleChainChanged); }; + } else { + setChainId(null); } - }, []); + }, [isConnected]); + + const isSupported = isConnected && chainId !== null && supportedChains.some(chain => chain.id === chainId); - const isSupported = - chainId !== null && supportedChains.some(chain => chain.id === chainId); + console.log('Current chain ID:', chainId); + console.log('Is connected:', isConnected); + console.log('Supported chains:', supportedChains.map(c => c.name)); + console.log('Is supported:', isSupported); return { chainId, isSupported }; } diff --git a/src/test/components/history-table/transactions-table.test.tsx b/src/test/components/history-table/transactions-table.test.tsx index 88e0243..c8431f7 100644 --- a/src/test/components/history-table/transactions-table.test.tsx +++ b/src/test/components/history-table/transactions-table.test.tsx @@ -6,6 +6,7 @@ import { vi, describe, it, expect, beforeEach } from 'vitest'; import { Mock } from 'vitest'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { useWindowSize } from '@/components/history-table/utils'; +import { useSupportedChains } from '@/hooks/useSupportedChains'; // Mock ContractManager vi.mock('@/services/ContractManager', () => ({ @@ -32,6 +33,13 @@ vi.mock('@/hooks/useTransactions', () => ({ useTransactions: vi.fn(), })); +// Mock useSupportedChains +vi.mock('@/hooks/useSupportedChains', () => ({ + useSupportedChains: vi.fn(() => ({ + isSupported: true, + })), +})); + // Mock window size hook and utils vi.mock('@/components/history-table/utils', () => ({ useWindowSize: vi.fn(), @@ -78,6 +86,19 @@ describe('TransactionsTable', () => { beforeEach(() => { vi.clearAllMocks(); (useWindowSize as Mock).mockReturnValue({ width: 1024 }); // Default to desktop + (useSupportedChains as Mock).mockReturnValue({ isSupported: true }); // Default to supported chain + }); + + it('returns null when chain is not supported', async () => { + (useSupportedChains as Mock).mockReturnValue({ isSupported: false }); + (useAccount as Mock).mockReturnValue({ address: '0x123' } as UseAccountReturn); + (useTransactions as Mock).mockReturnValue({ + data: [], + isLoading: false + } as UseTransactionsReturn); + + const { container } = render(, { wrapper }); + expect(container.firstChild).toBeNull(); }); it('shows wallet not connected state when no wallet is connected', async () => {