exchange page

apps/web-api/src/index.ts

@@ -21,7 +21,7 @@ const app = new Hono();
 app.use(
   '*',
   cors({
-    origin: ['http://localhost:4200', 'http://localhost:3000'], // React dev server ports
+    origin: ['http://localhost:4200', 'http://localhost:3000', 'http://localhost:3002'], // React dev server ports
     allowMethods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
     allowHeaders: ['Content-Type', 'Authorization'],
     credentials: true,

apps/web-app/src/features/exchanges/ExchangesPage.tsx

@@ -6,10 +6,8 @@ import {
 } from '@heroicons/react/24/outline';
 import { useEffect, useState } from 'react';
 import { ExchangesTable } from './components/ExchangesTable';
-import { useExchanges } from './hooks/useExchanges';
 
 export function ExchangesPage() {
-  const { syncExchanges } = useExchanges();
   const [syncing, setSyncing] = useState(false);
   const [syncStatus, setSyncStatus] = useState<{
     type: 'success' | 'error' | null;
@@ -31,18 +29,12 @@ export function ExchangesPage() {
     setSyncStatus({ type: null, message: '' });
 
     try {
-      const result = await syncExchanges();
+      // TODO: Implement sync functionality
-      if (result) {
+      await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate sync
-        setSyncStatus({
+      setSyncStatus({
-          type: 'success',
+        type: 'success',
-          message: `Exchange sync completed successfully! Job ID: ${result.jobId || 'Unknown'}`,
+        message: 'Exchange sync functionality coming soon!',
-        });
+      });
-      } else {
-        setSyncStatus({
-          type: 'error',
-          message: 'Sync failed - no result returned from server',
-        });
-      }
     } catch (error) {
       setSyncStatus({
         type: 'error',

apps/web-app/src/features/exchanges/components/ExchangesTable.tsx

@@ -18,6 +18,8 @@ export function ExchangesTable() {
     createProviderMapping,
     refetch 
   } = useExchanges();
+
+  console.log('ExchangesTable render:', { exchanges, loading, error });
   const [editingCell, setEditingCell] = useState<{ id: string; field: string } | null>(null);
   const [editValue, setEditValue] = useState('');
   const [addProviderDialog, setAddProviderDialog] = useState<{
@@ -381,6 +383,13 @@ export function ExchangesTable() {
     );
   };
 
+  console.log('About to render DataTable with:', {
+    dataLength: (exchanges || []).length,
+    columnsLength: columns.length,
+    loading,
+    error
+  });
+
   return (
     <>
       <div className="space-y-0">
@@ -388,6 +397,7 @@ export function ExchangesTable() {
           data={exchanges || []}
           columns={columns}
           loading={loading}
+          height={600}
           className="rounded-lg border border-border"
         />
         

apps/web-app/src/features/exchanges/hooks/useExchanges.ts

@@ -18,10 +18,12 @@ export function useExchanges() {
   const [error, setError] = useState<string | null>(null);
 
   const fetchExchanges = useCallback(async () => {
+    console.log('fetchExchanges called');
     try {
       setLoading(true);
       setError(null);
 
+      console.log('Making fetch request to:', `${API_BASE_URL}/exchanges`);
       const response = await fetch(`${API_BASE_URL}/exchanges`);
 
       if (!response.ok) {
@@ -29,8 +31,10 @@ export function useExchanges() {
       }
 
       const data = await response.json();
+      console.log('API response:', data);
 
       if (data.success) {
+        console.log('Setting exchanges:', data.data);
         setExchanges(data.data || []);
       } else {
         throw new Error(data.error || 'API returned error status');
@@ -249,6 +253,7 @@ export function useExchanges() {
   );
 
   useEffect(() => {
+    console.log('useExchanges useEffect triggered');
     fetchExchanges();
   }, [fetchExchanges]);