added ability to add exchanges and a custom delete exchange dialog

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

@@ -0,0 +1,110 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
+import { useCallback, useState } from 'react';
+import { TrashIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+interface DeleteExchangeDialogProps {
+  isOpen: boolean;
+  exchangeId: string;
+  exchangeName: string;
+  providerMappingCount: number;
+  onClose: () => void;
+  onConfirmDelete: (exchangeId: string) => Promise<boolean>;
+}
+
+export function DeleteExchangeDialog({
+  isOpen,
+  exchangeId,
+  exchangeName,
+  providerMappingCount,
+  onClose,
+  onConfirmDelete,
+}: DeleteExchangeDialogProps) {
+  const [loading, setLoading] = useState(false);
+
+  const handleConfirm = useCallback(async () => {
+    setLoading(true);
+    try {
+      const success = await onConfirmDelete(exchangeId);
+      if (success) {
+        onClose();
+      }
+    } catch (error) {
+      console.error('Error deleting exchange:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [exchangeId, onConfirmDelete, onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-danger">
+            <ExclamationTriangleIcon className="h-5 w-5" />
+            Delete Exchange
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="p-4 bg-danger/10 border border-danger/20 rounded-lg">
+            <p className="text-sm text-text-primary">
+              Are you sure you want to delete <strong>"{exchangeName}"</strong>?
+            </p>
+          </div>
+
+          <div className="space-y-2 text-sm text-text-secondary">
+            <p className="font-medium text-text-primary">This action will:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Hide the exchange from all lists</li>
+              {providerMappingCount > 0 && (
+                <li className="text-yellow-400">
+                  Delete {providerMappingCount} provider mapping{providerMappingCount !== 1 ? 's' : ''}
+                </li>
+              )}
+              <li>Make provider exchanges available for remapping</li>
+            </ul>
+          </div>
+
+          {providerMappingCount > 0 && (
+            <div className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-md">
+              <div className="flex items-start gap-2">
+                <ExclamationTriangleIcon className="h-4 w-4 text-yellow-400 mt-0.5 flex-shrink-0" />
+                <div className="text-sm">
+                  <p className="font-medium text-yellow-400">Warning</p>
+                  <p className="text-text-secondary">
+                    This exchange has {providerMappingCount} provider mapping{providerMappingCount !== 1 ? 's' : ''}. 
+                    Deleting will permanently remove these mappings and make the provider exchanges 
+                    available for mapping to other exchanges.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="bg-surface-secondary p-3 rounded-md">
+            <p className="text-xs text-text-muted">
+              <strong>Note:</strong> This action cannot be undone. The exchange will be hidden 
+              but can be restored by directly updating the database if needed.
+            </p>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex justify-end gap-2 pt-4">
+          <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={handleConfirm}
+            disabled={loading}
+            className="bg-danger hover:bg-danger/90 text-white"
+          >
+            <TrashIcon className="h-4 w-4 mr-1" />
+            {loading ? 'Deleting...' : 'Delete Exchange'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}