added new exchanges system

apps/web-app/src/components/ui/DataTable/DataTable.tsx

@@ -0,0 +1,139 @@
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  height?: number;
+  loading?: boolean;
+  onRowClick?: (row: T) => void;
+  className?: string;
+}
+
+export function DataTable<T>({
+  data,
+  columns,
+  height,
+  loading = false,
+  onRowClick,
+  className = '',
+}: DataTableProps<T>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSorting: true,
+  });
+
+  const { rows } = table.getRowModel();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64 bg-background border border-border rounded-lg">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
+      </div>
+    );
+  }
+
+  return (
+    <TableVirtuoso
+      style={height ? { height: `${height}px` } : { height: '100%' }}
+      className={cn('border border-border rounded-lg', className)}
+      totalCount={rows.length}
+      components={{
+        Table: ({ style, ...props }) => (
+          <table
+            {...props}
+            {...{
+              style: {
+                ...style,
+                width: table.getCenterTotalSize(),
+                minWidth: '100%',
+              },
+            }}
+            className="bg-background"
+          />
+        ),
+        TableRow: props => {
+          const index = props['data-index'] as number;
+          const row = rows[index];
+
+          return (
+            <tr
+              {...props}
+              className="hover:bg-surface cursor-pointer border-b border-border"
+              onClick={() => onRowClick?.(row.original)}
+            >
+              {row.getVisibleCells().map(cell => (
+                <td
+                  key={cell.id}
+                  className="px-3 py-2 text-sm text-text-primary border-r border-border"
+                  style={{ width: cell.column.getSize() }}
+                >
+                  <div className="truncate">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </div>
+                </td>
+              ))}
+            </tr>
+          );
+        },
+      }}
+      fixedHeaderContent={() =>
+        table.getHeaderGroups().map(headerGroup => (
+          <tr key={headerGroup.id} className="bg-surface border-b border-border">
+            {headerGroup.headers.map(header => (
+              <th
+                key={header.id}
+                colSpan={header.colSpan}
+                className={cn(
+                  'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
+                  header.column.getCanSort() &&
+                    'cursor-pointer select-none hover:bg-surface-secondary'
+                )}
+                style={{ width: header.getSize() }}
+                onClick={header.column.getToggleSortingHandler()}
+              >
+                {header.isPlaceholder ? null : (
+                  <div className="flex items-center justify-between">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {header.column.getCanSort() && (
+                      <div className="ml-2 flex-shrink-0">
+                        {header.column.getIsSorted() === 'asc' ? (
+                          <ChevronUpIcon className="h-4 w-4 text-primary-400" />
+                        ) : header.column.getIsSorted() === 'desc' ? (
+                          <ChevronDownIcon className="h-4 w-4 text-primary-400" />
+                        ) : (
+                          <div className="h-4 w-4" />
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))
+      }
+    />
+  );
+}