dashboard: governor token list pagination fix

Author: evan-gray

dashboard/src/components/ExplorerAssetURL.tsx

@@ -26,16 +26,15 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { chainIdToName } from '@wormhole-foundation/wormhole-monitor-common';
 import numeral from 'numeral';
 import { useCallback, useMemo, useState } from 'react';
 import useGovernorInfo from '../hooks/useGovernorInfo';
 import { CHAIN_ICON_MAP, WORMHOLE_RPC_HOSTS } from '../utils/consts';
 import CollapsibleSection from './CollapsibleSection';
 import EnqueuedVAAChecker from './EnqueuedVAAChecker';
-import { ExplorerAssetURL } from './ExplorerAssetURL';
 import { ExplorerTxHash } from './ExplorerTxHash';
 import Table from './Table';
-import { chainIdToName } from '@wormhole-foundation/wormhole-monitor-common';
 
 const calculatePercent = (notional: GovernorGetAvailableNotionalByChainResponse_Entry): number => {
   try {
@@ -146,9 +145,6 @@ const tokenColumns = [
   }),
   tokenColumnHelper.accessor('originAddress', {
     header: () => 'Token',
-    cell: (info) => (
-      <ExplorerAssetURL chain={info.row.original.originChainId} assetAddr={info.getValue()} />
-    ),
   }),
   tokenColumnHelper.accessor('price', {
     header: () => <Box order="1">Price</Box>,
@@ -329,7 +325,7 @@ function Governor() {
                 }}
                 placeholder="Search Address"
               />
-              <Table<GovernorGetTokenListResponse_Entry> table={tokenTable} />
+              <Table<GovernorGetTokenListResponse_Entry> table={tokenTable} paginated />
             </AccordionDetails>
           </Accordion>
         </Card>

dashboard/src/components/Governor.tsx

@@ -43,7 +43,6 @@ import { CHAIN_ICON_MAP, WORMHOLE_RPC_HOSTS } from '../utils/consts';
 import { getQuorumLossCount } from './Alerts';
 import CollapsibleSection from './CollapsibleSection';
 import EnqueuedVAAChecker from './EnqueuedVAAChecker';
-import { ExplorerAssetURL } from './ExplorerAssetURL';
 import { ExplorerTxHash } from './ExplorerTxHash';
 import Table from './Table';
 
@@ -272,9 +271,6 @@ const tokenColumns = [
   }),
   tokenColumnHelper.accessor('originAddress', {
     header: () => 'Token',
-    cell: (info) => (
-      <ExplorerAssetURL chain={info.row.original.originChainId} assetAddr={info.getValue()} />
-    ),
   }),
   tokenColumnHelper.accessor('price', {
     header: () => <Box order="1">Price</Box>,

dashboard/src/components/MainnetGovernor.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { useNetworkContext } from '../contexts/NetworkContext';
 import { getQuorumCount } from '../components/Alerts';
 import { GUARDIAN_SET_4 } from '@wormhole-foundation/wormhole-monitor-common';
+import { tryHexToNativeAssetString } from '../utils/nativeAsset';
 
 export interface AvailableNotionalByChain {
   guardianName?: string;
@@ -192,7 +193,16 @@ const getInfo = async (endpoint: string): Promise<CloudGovernorInfo> => {
     });
   }
 
-  const tokens = firstConfig?.tokens || [];
+  const tokens =
+    firstConfig?.tokens?.map((entry) => {
+      try {
+        return {
+          ...entry,
+          originAddress: tryHexToNativeAssetString(entry.originAddress, entry.originChainId),
+        };
+      } catch (e) {}
+      return entry;
+    }) || [];
 
   const vaaById: { [key: string]: EnqueuedVAA } = {};
   const totalEnqueuedVaas: TotalEnqueuedVaasByGuardianByChain = {};

dashboard/src/hooks/useCloudGovernorInfo.ts

@@ -8,6 +8,7 @@ import { useNetworkContext } from '../contexts/NetworkContext';
 import { getGovernorAvailableNotionalByChain } from '../utils/getGovernorAvailableNotionalByChain';
 import { getGovernorEnqueuedVAAs } from '../utils/getGovernorEnqueuedVAAs';
 import { getGovernorTokenList } from '../utils/getGovernorTokenList';
+import { tryHexToNativeAssetString } from '../utils/nativeAsset';
 
 type GovernorInfo = {
   notionals: GovernorGetAvailableNotionalByChainResponse_Entry[];
@@ -51,7 +52,21 @@ function useGovernorInfo(): GovernorInfo {
       while (!cancelled && currentNetwork.type === 'guardian') {
         const response = await getGovernorTokenList(currentNetwork);
         if (!cancelled) {
-          setGovernorInfo((info) => ({ ...info, tokens: response.entries }));
+          setGovernorInfo((info) => ({
+            ...info,
+            tokens: response.entries.map((entry) => {
+              try {
+                return {
+                  ...entry,
+                  originAddress: tryHexToNativeAssetString(
+                    entry.originAddress,
+                    entry.originChainId
+                  ),
+                };
+              } catch (e) {}
+              return entry;
+            }),
+          }));
           await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
         }
       }

dashboard/src/hooks/useGovernorInfo.ts

@@ -0,0 +1,34 @@
+import { chainToChainId, chainToPlatform, toChain } from '@wormhole-foundation/sdk-base';
+import base58 from 'bs58';
+import { Buffer } from 'buffer';
+
+// ported from @certusone/wormhole-sdk
+
+const hexToUint8Array = (h: string): Uint8Array => {
+  if (h.startsWith('0x')) h = h.slice(2);
+  return new Uint8Array(Buffer.from(h, 'hex'));
+};
+
+function hexToNativeAssetStringAlgorand(s: string): string {
+  return BigInt(s.startsWith('0x') ? s : `0x${s}`).toString();
+}
+
+const tryUint8ArrayToNative = (a: Uint8Array, chain: number): string => {
+  const platform = chainToPlatform(toChain(chain));
+  if (platform === 'Evm') {
+    console.log('here', `0x${Buffer.from(a).toString('hex')}`);
+    return `0x${Buffer.from(a).toString('hex').substring(24)}`;
+  } else if (platform === 'Solana') {
+    return base58.encode(a);
+  }
+  return `0x${Buffer.from(a).toString('hex')}`;
+};
+
+const tryHexToNativeString = (h: string, c: number): string =>
+  tryUint8ArrayToNative(hexToUint8Array(h), c);
+
+export const tryHexToNativeAssetString = (h: string, c: number): string =>
+  c === chainToChainId('Algorand')
+    ? // Algorand assets are represented by their asset ids, not an address
+      hexToNativeAssetStringAlgorand(h)
+    : tryHexToNativeString(h, c);