develop to main

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}
             />
             <span className="font-inter font-normal text-[10px] sm:text-[12px] leading-[100%] tracking-[0%] text-right align-middle text-text-secondary">
               ${calculateUsdValue}

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() {
               <MobileLoadingSkeleton />
             </div>
           ) : transactions?.length > 0 ? (
-            <Accordion type="single" collapsible className="flex flex-col gap-3">
+            <Accordion
+              type="single"
+              collapsible
+              className="flex flex-col gap-3"
+            >
               {transactions.map((tx: TransactionNormalized, index) => (
                 <MobileTransactionItem
                   key={tx.contractRegistrationTxHash}

src/components/ui/status-icon.tsx

@@ -50,7 +50,7 @@ export function StatusIcon({ status, className = '' }: StatusIconProps) {
         break;
       case ReservationStatus.Expired:
         return (
-          <div className={`bg-[#FF5353] rounded-full p-[0.125rem] ${className}`}>
+          <div className={`bg-grey rounded-full p-[0.125rem] ${className}`}>
             <img src={expiredIcon} alt="Expired" className="w-3.5 h-3.5" />
           </div>
         );

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<number | null>(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 };
 }

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(<TransactionsTable />, { wrapper });
+    expect(container.firstChild).toBeNull();
   });
 
   it('shows wallet not connected state when no wallet is connected', async () => {