MVP

ss58-registry · Jun 28, 2024 · 6ffe083 · 6ffe083
1 parent 1405c3c
commit 6ffe083
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@substrate/ss58-registry": "^1.49.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-table": "^7.8.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,33 +1,9 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import SS58RegistryComponent from "./SS58RegistryComponent.tsx"
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <SS58RegistryComponent />
     </>
   )
 }

diff --git a/src/SS58RegistryComponent.tsx b/src/SS58RegistryComponent.tsx
@@ -0,0 +1,184 @@
+import React, { useMemo, useState } from 'react';
+import ss58Registry from '@substrate/ss58-registry';
+import { useTable, useGlobalFilter, useSortBy, usePagination, Column } from 'react-table';
+
+export interface RegistryEntry {
+	decimals: number[],
+	displayName: string;
+	network: string;
+	prefix: number;
+	standardAccount: '*25519' | 'Ed25519' | 'Sr25519' | 'secp256k1' | null;
+	symbols: string[];
+	website: string | null;
+}
+
+const SS58RegistryComponent: React.FC = () => {
+  const data = useMemo<RegistryEntry[]>(() => ss58Registry, []);
+  const [filterInput, setFilterInput] = useState("");
+
+  const columns = useMemo<Column<RegistryEntry>[]>(
+    () => [
+      {
+        Header: 'Prefix',
+        accessor: 'prefix',
+      },
+      {
+        Header: 'Network',
+        accessor: 'network',
+      },
+      {
+        Header: 'Display Name',
+        accessor: 'displayName',
+      },
+      {
+        Header: 'Symbols',
+        accessor: 'symbols',
+        Cell: ({ value }: { value: string[] | undefined }) => value?.join(', ') || 'N/A',
+      },
+      {
+        Header: 'Decimals',
+        accessor: 'decimals',
+        Cell: ({ value }: { value: number[] | undefined }) => value?.join(', ') || 'N/A',
+      },
+      {
+        Header: 'Standard Account',
+        accessor: 'standardAccount',
+        Cell: ({ value }: { value: string | undefined }) => value || 'N/A',
+      },
+      {
+        Header: 'Website',
+        accessor: 'website',
+        Cell: ({ value }: { value: string | undefined }) => 
+          value ? (
+            <a href={value} target="_blank" rel="noopener noreferrer">
+              {value}
+            </a>
+          ) : (
+            'N/A'
+          ),
+      },
+    ],
+    []
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    page,
+    setGlobalFilter,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data,
+      initialState: { pageIndex: 0, pageSize: 50 },
+    },
+    useGlobalFilter,
+    useSortBy,
+    usePagination
+  );
+
+  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value || "";
+    setGlobalFilter(value);
+    setFilterInput(value);
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-3xl font-bold mb-6">SS58 Registry</h1>
+      <input
+        value={filterInput}
+        onChange={handleFilterChange}
+        placeholder="Search in all columns..."
+        className="p-2 mb-4 border rounded w-full"
+      />
+      <div className="overflow-x-auto">
+        <table {...getTableProps()} className="min-w-full bg-white border border-gray-300">
+          <thead>
+            {headerGroups.map(headerGroup => (
+              <tr {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map(column => (
+                  <th
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
+                    className="p-2 bg-gray-100 border-b text-left"
+                  >
+                    {column.render('Header')}
+                    <span>
+                      {column.isSorted
+                        ? column.isSortedDesc
+                          ? ' 🔽'
+                          : ' 🔼'
+                        : ''}
+                    </span>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody {...getTableBodyProps()}>
+            {page.map((row) => {
+              prepareRow(row);
+              return (
+                <tr {...row.getRowProps()} className="border-b hover:bg-gray-50">
+                  {row.cells.map(cell => (
+                    <td {...cell.getCellProps()} className="p-2">
+                      {cell.render('Cell')}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-4 flex justify-between items-center">
+        <div>
+          <button onClick={() => gotoPage(0)} disabled={!canPreviousPage} className="mr-2 px-2 py-1 border rounded">
+            {'<<'}
+          </button>
+          <button onClick={() => previousPage()} disabled={!canPreviousPage} className="mr-2 px-2 py-1 border rounded">
+            {'<'}
+          </button>
+          <button onClick={() => nextPage()} disabled={!canNextPage} className="mr-2 px-2 py-1 border rounded">
+            {'>'}
+          </button>
+          <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} className="px-2 py-1 border rounded">
+            {'>>'}
+          </button>
+        </div>
+        <span>
+          Page{' '}
+          <strong>
+            {pageIndex + 1} of {pageOptions.length}
+          </strong>{' '}
+        </span>
+        <select
+          value={pageSize}
+          onChange={e => {
+            setPageSize(Number(e.target.value))
+          }}
+          className="p-2 border rounded"
+        >
+          {[50, 100, 200].map(pageSize => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default SS58RegistryComponent;
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>