dashboard: update table, add search

wormhole-foundation · Dec 3, 2023 · 34a2b7a · 34a2b7a
1 parent e1331e9
commit 34a2b7a
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 70 deletions.
diff --git a/dashboard/src/components/Accountant.tsx b/dashboard/src/components/Accountant.tsx
@@ -1,24 +1,27 @@
-import { ExpandMore } from '@mui/icons-material';
+import { ExpandMore, Search } from '@mui/icons-material';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Box,
   Card,
+  InputAdornment,
   LinearProgress,
   Link,
+  TextField,
   Tooltip,
   Typography,
 } from '@mui/material';
 import {
   SortingState,
   createColumnHelper,
   getCoreRowModel,
+  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { CloudGovernorInfo } from '../hooks/useCloudGovernorInfo';
 import useGetAccountantAccounts, { Account } from '../hooks/useGetAccountantAccounts';
 import useGetAccountantPendingTransfers, {
@@ -38,7 +41,7 @@ import numeral from 'numeral';
 
 type PendingTransferForAcct = PendingTransfer & { isEnqueuedInGov: boolean };
 type AccountWithTokenData = Account & {
-  tokenData?: TokenDataEntry;
+  tokenData: TokenDataEntry;
   tvlTvm: number;
   adjBalance: number;
 };
@@ -196,11 +199,13 @@ const accountsColumns = [
     header: () => 'Chain',
     cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
     sortingFn: `text`,
+    enableGlobalFilter: false,
   }),
   accountsColumnHelper.accessor('key.token_chain', {
     header: () => 'Token Chain',
     cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
     sortingFn: `text`,
+    enableGlobalFilter: false,
   }),
   accountsColumnHelper.accessor('tokenData.native_address', {
     header: () => 'Native Address',
@@ -211,32 +216,40 @@ const accountsColumns = [
   accountsColumnHelper.accessor('tokenData.symbol', {
     header: () => 'Symbol',
   }),
+  accountsColumnHelper.accessor('tokenData.coin_gecko_coin_id', {
+    header: () => 'Coin Gecko ID',
+  }),
   accountsColumnHelper.accessor('tokenData.price_usd', {
     header: () => 'Price',
     cell: (info) => (info.getValue() ? numeral(info.getValue()).format('$0,0.0000') : ''),
+    enableGlobalFilter: false,
   }),
   accountsColumnHelper.accessor('adjBalance', {
     header: () => 'Adjusted Balance',
     cell: (info) =>
       info.getValue() < 1
         ? info.getValue().toFixed(4)
         : numeral(info.getValue()).format('0,0.0000'),
+    enableGlobalFilter: false,
   }),
   accountsColumnHelper.accessor('tvlTvm', {
     header: () => 'TVL/TVM',
     cell: (info) =>
       info.getValue() < 1
         ? `$${info.getValue().toFixed(4)}`
         : numeral(info.getValue()).format('$0,0.0000'),
+    enableGlobalFilter: false,
   }),
   accountsColumnHelper.accessor('tokenData.decimals', {
     header: () => 'Decimals',
+    enableGlobalFilter: false,
   }),
   accountsColumnHelper.accessor('key.token_address', {
     header: () => 'Token Address',
   }),
   accountsColumnHelper.accessor('balance', {
     header: () => 'Raw Balance',
+    enableGlobalFilter: false,
   }),
 ];
 
@@ -312,6 +325,16 @@ function Accountant({ governorInfo }: { governorInfo: CloudGovernorInfo }) {
           ...a,
           adjBalance: 0,
           tvlTvm: 0,
+          tokenData: {
+            coin_gecko_coin_id: '',
+            decimals: 0,
+            name: '',
+            native_address: '',
+            price_usd: '',
+            symbol: '',
+            token_address: '',
+            token_chain: 0,
+          },
         };
       const adjBalance = Number(a.balance) / 10 ** Math.min(thisTokenData.decimals, 8);
       const tvlTvm = adjBalance * Number(thisTokenData.price_usd);
@@ -376,18 +399,25 @@ function Accountant({ governorInfo }: { governorInfo: CloudGovernorInfo }) {
     getSortedRowModel: getSortedRowModel(),
     onSortingChange: setOverviewSorting,
   });
+  const [accountsGlobalFilter, setAccountsGlobalFilter] = useState('');
+  const handleAccountsGlobalFilterChange = useCallback((e: any) => {
+    setAccountsGlobalFilter(e.target.value);
+  }, []);
   const [accountsSorting, setAccountsSorting] = useState<SortingState>([]);
   const accounts = useReactTable({
     columns: accountsColumns,
     data: accountsWithTokenData,
     state: {
+      globalFilter: accountsGlobalFilter,
       sorting: accountsSorting,
     },
-    getRowId: (key) => JSON.stringify(key),
+    getRowId: (token) => JSON.stringify(token.key),
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
     autoResetPageIndex: false,
+    onGlobalFilterChange: setAccountsGlobalFilter,
     onSortingChange: setAccountsSorting,
   });
   const pendingByChain = useMemo(
@@ -483,7 +513,23 @@ function Accountant({ governorInfo }: { governorInfo: CloudGovernorInfo }) {
               <Typography>Accounts ({accountsInfo.length})</Typography>
             </AccordionSummary>
             <AccordionDetails>
-              <Table<AccountWithTokenData> table={accounts} paginated />
+              <TextField
+                type="search"
+                value={accountsGlobalFilter}
+                onChange={handleAccountsGlobalFilterChange}
+                margin="dense"
+                size="small"
+                sx={{ mb: 1 }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Search />
+                    </InputAdornment>
+                  ),
+                }}
+                placeholder="Search Token"
+              />
+              <Table<AccountWithTokenData> table={accounts} paginated noWrap />
             </AccordionDetails>
           </Accordion>
         </Card>

diff --git a/dashboard/src/components/Governor.tsx b/dashboard/src/components/Governor.tsx
@@ -10,28 +10,31 @@ import {
   GovernorGetEnqueuedVAAsResponse_Entry,
   GovernorGetTokenListResponse_Entry,
 } from '@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc';
-import { ExpandMore } from '@mui/icons-material';
+import { ExpandMore, Search } from '@mui/icons-material';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Box,
   Card,
+  InputAdornment,
   LinearProgress,
   Link,
+  TextField,
   Tooltip,
   Typography,
 } from '@mui/material';
 import {
   createColumnHelper,
   getCoreRowModel,
+  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
 import numeral from 'numeral';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import useGovernorInfo from '../hooks/useGovernorInfo';
 import chainIdToName from '../utils/chainIdToName';
 import {
@@ -161,6 +164,7 @@ const tokenColumns = [
     header: () => 'Chain',
     cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
     sortingFn: `text`,
+    enableGlobalFilter: false,
   }),
   tokenColumnHelper.accessor('originAddress', {
     header: () => 'Token',
@@ -199,6 +203,7 @@ const tokenColumns = [
   tokenColumnHelper.accessor('price', {
     header: () => <Box order="1">Price</Box>,
     cell: (info) => <Box textAlign="right">${numeral(info.getValue()).format('0,0.0000')}</Box>,
+    enableGlobalFilter: false,
   }),
 ];
 
@@ -267,16 +272,24 @@ function Governor() {
     getSortedRowModel: getSortedRowModel(),
     onSortingChange: setEnqueuedSorting,
   });
+  const [tokenGlobalFilter, setTokenGlobalFilter] = useState('');
+  const handleTokenGlobalFilterChange = useCallback((e: any) => {
+    setTokenGlobalFilter(e.target.value);
+  }, []);
   const [tokenSorting, setTokenSorting] = useState<SortingState>([]);
   const tokenTable = useReactTable({
     columns: tokenColumns,
     data: displayTokens,
     state: {
+      globalFilter: tokenGlobalFilter,
       sorting: tokenSorting,
     },
     getRowId: (token) => `${token.originChainId}_${token.originAddress}`,
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    onGlobalFilterChange: setTokenGlobalFilter,
     onSortingChange: setTokenSorting,
   });
   return (
@@ -350,6 +363,22 @@ function Governor() {
               <Typography>Tokens ({governorInfo.tokens.length})</Typography>
             </AccordionSummary>
             <AccordionDetails>
+              <TextField
+                type="search"
+                value={tokenGlobalFilter}
+                onChange={handleTokenGlobalFilterChange}
+                margin="dense"
+                size="small"
+                sx={{ mb: 1, ml: 1.5 }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Search />
+                    </InputAdornment>
+                  ),
+                }}
+                placeholder="Search Address"
+              />
               <Table<GovernorGetTokenListResponse_Entry> table={tokenTable} />
             </AccordionDetails>
           </Accordion>

diff --git a/dashboard/src/components/MainnetGovernor.tsx b/dashboard/src/components/MainnetGovernor.tsx
@@ -9,6 +9,7 @@ import {
   ExpandMore,
   KeyboardArrowDown,
   KeyboardArrowRight,
+  Search,
   WarningAmberOutlined,
 } from '@mui/icons-material';
 import {
@@ -18,8 +19,10 @@ import {
   Box,
   Card,
   IconButton,
+  InputAdornment,
   LinearProgress,
   Link,
+  TextField,
   Tooltip,
   Typography,
 } from '@mui/material';
@@ -29,12 +32,13 @@ import {
   createColumnHelper,
   getCoreRowModel,
   getExpandedRowModel,
+  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import numeral from 'numeral';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   AvailableNotionalByChain,
   CloudGovernorInfo,
@@ -254,6 +258,7 @@ const tokenColumns = [
     header: () => 'Chain',
     cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
     sortingFn: `text`,
+    enableGlobalFilter: false,
   }),
   tokenColumnHelper.accessor('originAddress', {
     header: () => 'Token',
@@ -291,6 +296,7 @@ const tokenColumns = [
   tokenColumnHelper.accessor('price', {
     header: () => <Box order="1">Price</Box>,
     cell: (info) => <Box textAlign="right">${numeral(info.getValue()).format('0,0.0000')}</Box>,
+    enableGlobalFilter: false,
   }),
 ];
 
@@ -368,16 +374,24 @@ function MainnetGovernor({ governorInfo }: { governorInfo: CloudGovernorInfo })
     getSortedRowModel: getSortedRowModel(),
     onSortingChange: setEnqueuedSorting,
   });
+  const [tokenGlobalFilter, setTokenGlobalFilter] = useState('');
+  const handleTokenGlobalFilterChange = useCallback((e: any) => {
+    setTokenGlobalFilter(e.target.value);
+  }, []);
   const [tokenSorting, setTokenSorting] = useState<SortingState>([]);
   const tokenTable = useReactTable({
     columns: tokenColumns,
     data: displayTokens,
     state: {
+      globalFilter: tokenGlobalFilter,
       sorting: tokenSorting,
     },
     getRowId: (token) => `${token.originChainId}_${token.originAddress}`,
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    onGlobalFilterChange: setTokenGlobalFilter,
     onSortingChange: setTokenSorting,
   });
   const enqueuedByChain: ChainIdToEnqueuedCount = useMemo(
@@ -482,7 +496,23 @@ function MainnetGovernor({ governorInfo }: { governorInfo: CloudGovernorInfo })
               <Typography>Tokens ({governorInfo.tokens.length})</Typography>
             </AccordionSummary>
             <AccordionDetails>
-              <Table<GovernorToken> table={tokenTable} />
+              <TextField
+                type="search"
+                value={tokenGlobalFilter}
+                onChange={handleTokenGlobalFilterChange}
+                margin="dense"
+                size="small"
+                sx={{ mb: 1 }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Search />
+                    </InputAdornment>
+                  ),
+                }}
+                placeholder="Search Address"
+              />
+              <Table<GovernorToken> table={tokenTable} paginated />
             </AccordionDetails>
           </Accordion>
         </Card>