getting close to having exchanges done

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

@@ -24,7 +24,6 @@ export function ExchangesTable() {
     exchangeId: string;
     exchangeName: string;
   } | null>(null);
-  const [expandedRowData, setExpandedRowData] = useState<Record<string, ProviderMapping[]>>({});
 
   const handleCellEdit = useCallback(
     async (id: string, field: string, value: string) => {
@@ -62,20 +61,7 @@ export function ExchangesTable() {
     async (mappingId: string, currentStatus: boolean) => {
       const success = await updateProviderMapping(mappingId, { active: !currentStatus });
       if (success) {
-        // Update the local expanded row data immediately
-        setExpandedRowData(prev => {
-          const updated = { ...prev };
-          Object.keys(updated).forEach(exchangeId => {
-            updated[exchangeId] = updated[exchangeId].map(mapping => 
-              mapping.id === mappingId 
-                ? { ...mapping, active: !currentStatus }
-                : mapping
-            );
-          });
-          return updated;
-        });
-        
-        // Also refresh the main table data
+        // Refresh the main table data to get updated counts and mappings
         refetch();
       }
     },
@@ -84,18 +70,10 @@ export function ExchangesTable() {
 
   const handleRowExpand = useCallback(
     async (row: any) => {
-      const exchangeId = row.original.id;
-      if (!expandedRowData[exchangeId]) {
-        const details = await fetchExchangeDetails(exchangeId);
-        if (details) {
-          setExpandedRowData(prev => ({
-            ...prev,
-            [exchangeId]: details.provider_mappings
-          }));
-        }
-      }
+      // Row expansion is now handled automatically by TanStack Table
+      // No need to fetch data since all mappings are already loaded
     },
-    [fetchExchangeDetails]
+    []
   );
 
   const columns = useMemo<ColumnDef<Exchange>[]>(() => {
@@ -258,27 +236,18 @@ export function ExchangesTable() {
           const activeMappings = parseInt(row.original.active_mapping_count) || 0;
           const verifiedMappings = parseInt(row.original.verified_mapping_count) || 0;
           
-          // Parse provider mappings from the expanded data or from a summary field
-          const exchangeId = row.original.id;
-          const mappings = expandedRowData[exchangeId] || [];
+          // Get provider mappings directly from the exchange data
+          const mappings = row.original.provider_mappings || [];
           
-          const handleLoadMappings = async () => {
-            if (mappings.length === 0 && totalMappings > 0) {
-              const details = await fetchExchangeDetails(exchangeId);
-              if (details) {
-                setExpandedRowData(prev => ({
-                  ...prev,
-                  [exchangeId]: details.provider_mappings
-                }));
-              }
-            }
-          };
+          // Sort mappings to show active ones first
+          const sortedMappings = [...mappings].sort((a, b) => {
+            if (a.active && !b.active) return -1;
+            if (!a.active && b.active) return 1;
+            return 0;
+          });
 
           return (
-            <div 
-              className="flex flex-col gap-1 cursor-pointer" 
-              onMouseEnter={handleLoadMappings}
-            >
+            <div className="flex flex-col gap-1">
               <div className="text-sm">
                 <span className="text-text-primary font-medium">{totalMappings}</span>
                 <span className="text-text-muted"> total</span>
@@ -290,18 +259,16 @@ export function ExchangesTable() {
               </div>
               {mappings.length > 0 ? (
                 <div className="flex flex-wrap gap-1 text-xs">
-                  {mappings.slice(0, 3).map((mapping, index) => (
-                    <span key={index} className={`${mapping.active ? 'text-text-primary' : 'text-text-muted'}`}>
-                      <span className="font-bold text-primary-400">{mapping.provider.toLowerCase()}</span>
-                      <span className="text-text-secondary">({mapping.provider_exchange_code})</span>
+                  {sortedMappings.slice(0, 3).map((mapping, index) => (
+                    <span key={index} className={mapping.active ? 'text-green-500' : 'text-text-muted'}>
+                      <span className={mapping.active ? 'font-bold text-green-500' : 'font-bold text-text-muted'}>{mapping.provider.toLowerCase()}</span>
+                      <span className={mapping.active ? 'text-green-500' : 'text-text-muted'}>({mapping.provider_exchange_code})</span>
                     </span>
                   ))}
-                  {mappings.length > 3 && (
-                    <span className="text-text-muted">+{mappings.length - 3} more</span>
+                  {sortedMappings.length > 3 && (
+                    <span className="text-text-muted">+{sortedMappings.length - 3} more</span>
                   )}
                 </div>
-              ) : totalMappings > 0 ? (
-                <div className="text-xs text-text-muted">Hover to load mappings...</div>
               ) : (
                 <div className="text-xs text-text-muted">No mappings</div>
               )}
@@ -350,13 +317,11 @@ export function ExchangesTable() {
   }, [
     editingCell,
     editValue,
-    expandedRowData,
     handleCellEdit,
     handleToggleActive,
     handleAddProviderMapping,
     handleDeleteExchange,
     handleRowExpand,
-    fetchExchangeDetails,
   ]);
 
   if (error) {
@@ -373,7 +338,7 @@ export function ExchangesTable() {
 
   const renderSubComponent = ({ row }: { row: any }) => {
     const exchange = row.original as Exchange;
-    const mappings = expandedRowData[exchange.id] || [];
+    const mappings = exchange.provider_mappings || [];
     
     if (mappings.length === 0) {
       return (