added ability to add exchanges and a custom delete exchange dialog

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

@@ -5,6 +5,7 @@ import { useCallback, useMemo, useState, useEffect } from 'react';
 import { useExchanges } from '../hooks/useExchanges';
 import { Exchange, ProviderMapping } from '../types';
 import { AddProviderMappingDialog } from './AddProviderMappingDialog';
+import { DeleteExchangeDialog } from './DeleteExchangeDialog';
 
 export function ExchangesTable() {
   const { 
@@ -24,6 +25,11 @@ export function ExchangesTable() {
     exchangeId: string;
     exchangeName: string;
   } | null>(null);
+  const [deleteDialog, setDeleteDialog] = useState<{
+    exchangeId: string;
+    exchangeName: string;
+    providerMappingCount: number;
+  } | null>(null);
 
   const handleCellEdit = useCallback(
     async (id: string, field: string, value: string) => {
@@ -47,14 +53,16 @@ export function ExchangesTable() {
     setAddProviderDialog({ exchangeId, exchangeName });
   }, []);
 
-  const handleDeleteExchange = useCallback(async (exchangeId: string, exchangeName: string) => {
-    if (confirm(`Are you sure you want to delete "${exchangeName}"? This will hide the exchange and make all its provider mappings available for remapping.`)) {
-      const success = await updateExchange(exchangeId, { visible: false });
-      if (success) {
-        // Optionally refresh the list or show a success message
-        refetch();
-      }
+  const handleDeleteExchange = useCallback((exchangeId: string, exchangeName: string, providerMappingCount: number) => {
+    setDeleteDialog({ exchangeId, exchangeName, providerMappingCount });
+  }, []);
+
+  const handleConfirmDelete = useCallback(async (exchangeId: string) => {
+    const success = await updateExchange(exchangeId, { visible: false });
+    if (success) {
+      refetch();
     }
+    return success;
   }, [updateExchange, refetch]);
 
   const handleToggleProviderMapping = useCallback(
@@ -292,7 +300,11 @@ export function ExchangesTable() {
               Add
             </button>
             <button
-              onClick={() => handleDeleteExchange(row.original.id, row.original.name)}
+              onClick={() => handleDeleteExchange(
+                row.original.id, 
+                row.original.name, 
+                parseInt(row.original.provider_mapping_count) || 0
+              )}
               className="inline-flex items-center gap-1 px-3 py-1.5 bg-danger/20 text-danger rounded text-xs hover:bg-danger/30 transition-colors whitespace-nowrap"
               title="Delete Exchange"
             >
@@ -321,6 +333,7 @@ export function ExchangesTable() {
     handleToggleActive,
     handleAddProviderMapping,
     handleDeleteExchange,
+    handleConfirmDelete,
     handleRowExpand,
   ]);
 
@@ -433,6 +446,17 @@ export function ExchangesTable() {
           }}
         />
       )}
+
+      {deleteDialog && (
+        <DeleteExchangeDialog
+          isOpen={true}
+          exchangeId={deleteDialog.exchangeId}
+          exchangeName={deleteDialog.exchangeName}
+          providerMappingCount={deleteDialog.providerMappingCount}
+          onClose={() => setDeleteDialog(null)}
+          onConfirmDelete={handleConfirmDelete}
+        />
+      )}
     </>
   );
 }