Merge pull request #90 from bitsnark/fix/ui-4

Fix/UI 4

Author: njaume

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/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 () => {