Merge pull request #13807 from ethereum/walletTableAbstraction

Product table refactor

Author: corwintines

.storybook/i18next.ts

@@ -23,7 +23,9 @@ export const ns = [
   "page-developers-index",
   "page-what-is-ethereum",
   "page-upgrades-index",
+  "page-wallets-find-wallet",
   "page-developers-docs",
+  "table",
 ] as const
 const supportedLngs = Object.keys(baseLocales)
 

package.json

@@ -45,12 +45,14 @@
     "@radix-ui/react-portal": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
+    "@tanstack/react-table": "^8.19.3",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.0",
@@ -87,6 +89,7 @@
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
+    "vaul": "^1.0.0",
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {

src/components/CentralizedExchanges/index.tsx

@@ -5,13 +5,13 @@ import type { ChildOnlyProp, Lang } from "@/lib/types"
 
 import CardList from "@/components/CardList"
 import Emoji from "@/components/Emoji"
-import Select from "@/components/ui/Select"
+import InlineLink from "@/components/ui/Link"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
 import { WEBSITE_EMAIL } from "@/lib/constants"
 
-import InlineLink from "../ui/Link"
+import Select from "../Select"
 
 import { useCentralizedExchanges } from "@/hooks/useCentralizedExchanges"
 

src/components/DataTable/index.tsx

@@ -0,0 +1,123 @@
+import { Fragment, useEffect, useRef, useState } from "react"
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableProps,
+  TableRow,
+} from "@/components/ui/Table"
+
+type DataTableProps<TData, TValue> = TableProps & {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  subComponent?: React.FC<TData>
+  noResultsComponent?: React.FC
+}
+
+const DataTable = <TData, TValue>({
+  columns,
+  data,
+  subComponent,
+  noResultsComponent,
+  ...props
+}: DataTableProps<TData, TValue>) => {
+  const [isVisible, setIsVisible] = useState(true)
+  const [currentData, setCurrentData] = useState(data)
+  const previousDataRef = useRef(data)
+
+  const table = useReactTable({
+    data: currentData,
+    columns,
+    getRowCanExpand: () => true,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+  })
+
+  useEffect(() => {
+    if (JSON.stringify(data) !== JSON.stringify(previousDataRef.current)) {
+      setIsVisible(false)
+      const timer = setTimeout(() => {
+        setCurrentData(data)
+        setIsVisible(true)
+        previousDataRef.current = data
+      }, 25) // Adjust this value to match your CSS transition duration
+
+      return () => clearTimeout(timer)
+    }
+  }, [data])
+
+  return (
+    <Table {...props}>
+      <TableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              return (
+                <Fragment key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </Fragment>
+              )
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody
+        className={`duration-25 transition-opacity ${
+          isVisible ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map((row, idx) => (
+            <Fragment key={row.id}>
+              <TableRow
+                data-state={row.getIsSelected() && "selected"}
+                className={`${row.getIsExpanded() ? "cursor-pointer border-b-background-highlight bg-background-highlight" : "cursor-pointer"} hover:bg-background-highlight`}
+                onClick={(e) => {
+                  // Prevent expanding the wallet more info section when clicking on the "Visit website" button
+                  if (!(e.target as Element).matches("a, a svg")) {
+                    row.getToggleExpandedHandler()()
+                  }
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+              {row.getIsExpanded() && (
+                <TableRow className={`bg-background-highlight`}>
+                  <TableCell colSpan={row.getAllCells().length}>
+                    {subComponent && subComponent(row.original, idx)}
+                  </TableCell>
+                </TableRow>
+              )}
+            </Fragment>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="h-24 text-center">
+              {noResultsComponent && noResultsComponent({})}
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
+
+export default DataTable