Explorer validator sorting (#7481)

https://user-images.githubusercontent.com/8676844/213721479-facc840a-6829-47b8-a34b-d057a0d3ec58.mov
MystenLabs · Jan 23, 2023 · 958802e · 958802e · vercel · Jan 23, 2023
1 parent 6b27f65
commit 958802e
Show file tree

Hide file tree

Showing 9 changed files with 317 additions and 190 deletions.
diff --git a/apps/explorer/src/components/recent-packages-card/RecentPackagesCard.tsx b/apps/explorer/src/components/recent-packages-card/RecentPackagesCard.tsx
@@ -23,19 +23,19 @@ const TRUNCATE_LENGTH = 16;
 
 const columns = [
     {
-        headerLabel: 'Time',
+        header: 'Time',
         accessorKey: 'time',
     },
     {
-        headerLabel: 'Package ID',
+        header: 'Package ID',
         accessorKey: 'packageId',
     },
     {
-        headerLabel: 'Transaction ID',
+        header: 'Transaction ID',
         accessorKey: 'txnDigest',
     },
     {
-        headerLabel: 'Sender',
+        header: 'Sender',
         accessorKey: 'sender',
     },
 ];

diff --git a/apps/explorer/src/components/top-validators-card/StakeColumn.tsx b/apps/explorer/src/components/top-validators-card/StakeColumn.tsx
@@ -3,23 +3,30 @@
 
 import { SUI_TYPE_ARG } from '@mysten/sui.js';
 
-import { useFormatCoin } from '~/hooks/useFormatCoin';
+import { useFormatCoin, CoinFormat } from '~/hooks/useFormatCoin';
 import { Text } from '~/ui/Text';
 
 type StakeColumnProps = {
     stake: bigint | number | string;
+    hideCoinSymbol?: boolean;
 };
 
-export function StakeColumn({ stake }: StakeColumnProps) {
-    const [amount, symbol] = useFormatCoin(stake, SUI_TYPE_ARG);
+export function StakeColumn({ stake, hideCoinSymbol }: StakeColumnProps) {
+    const [amount, symbol] = useFormatCoin(
+        stake,
+        SUI_TYPE_ARG,
+        hideCoinSymbol ? CoinFormat.FULL : CoinFormat.ROUNDED
+    );
     return (
         <div className="flex items-end gap-0.5">
             <Text variant="bodySmall/medium" color="steel-darker">
                 {amount}
             </Text>
-            <Text variant="captionSmall/medium" color="steel-dark">
-                {symbol}
-            </Text>
+            {!hideCoinSymbol && (
+                <Text variant="captionSmall/medium" color="steel-dark">
+                    {symbol}
+                </Text>
+            )}
         </div>
     );
 }
diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -86,15 +86,15 @@ const validatorsTable = (
         }),
         columns: [
             {
-                headerLabel: 'Name',
+                header: 'Name',
                 accessorKey: 'name',
             },
             {
-                headerLabel: 'Address',
+                header: 'Address',
                 accessorKey: 'address',
             },
             {
-                headerLabel: 'Stake',
+                header: 'Stake',
                 accessorKey: 'stake',
             },
         ],

diff --git a/apps/explorer/src/components/transaction-card/TxCardUtils.tsx b/apps/explorer/src/components/transaction-card/TxCardUtils.tsx
@@ -141,31 +141,29 @@ export const genTableDataFromTxData = (
         })),
         columns: [
             {
-                headerLabel: 'Time',
+                header: 'Time',
                 accessorKey: 'date',
             },
             {
-                headerLabel: 'Type',
+                header: 'Type',
                 accessorKey: 'txTypes',
             },
             {
-                headerLabel: () => (
+                header: () => (
                     <div className={styles.addresses}>Transaction ID</div>
                 ),
                 accessorKey: 'transactionId',
             },
             {
-                headerLabel: () => (
-                    <div className={styles.addresses}>Addresses</div>
-                ),
+                header: () => <div className={styles.addresses}>Addresses</div>,
                 accessorKey: 'addresses',
             },
             {
-                headerLabel: 'Amount',
+                header: 'Amount',
                 accessorKey: 'amounts',
             },
             {
-                headerLabel: 'Gas',
+                header: 'Gas',
                 accessorKey: 'gas',
             },
         ],