Namadillo: Adding sortable headers to tables (#986)

* feat(components): adding sorting capability to StyledTableHeader * feat: implementing sortable headers * feat(namadillo): adding sorting to headers * fix: ops. rolling back changes on config.toml * refactor(namadillo): reusing hook instead of a custom function * feat(components): enabling third state for sortable table headers
anoma · Aug 8, 2024 · a46d927 · a46d927
1 parent eac7ec8
commit a46d927
Show file tree

Hide file tree

Showing 11 changed files with 373 additions and 55 deletions.
diff --git a/apps/namadillo/src/App/Staking/AllValidatorsTable.tsx b/apps/namadillo/src/App/Staking/AllValidatorsTable.tsx
@@ -10,6 +10,7 @@ import { atomsAreLoading, atomsAreNotInitialized } from "atoms/utils";
 import { allValidatorsAtom } from "atoms/validators";
 import BigNumber from "bignumber.js";
 import { useValidatorFilter } from "hooks/useValidatorFilter";
+import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
 import { useAtomValue } from "jotai";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -32,23 +33,34 @@ export const AllValidatorsTable = ({
   const isConnected = useAtomValue(namadaExtensionConnectedAtom);
   const navigate = useNavigate();
   const [filter, setFilter] = useState("");
+
   const filteredValidators = useValidatorFilter({
     validators: validators.isSuccess ? validators.data : [],
     myValidatorsAddresses: [],
     searchTerm: filter,
     onlyMyValidators: false,
   });
 
+  const { sortedValidators: sortedAndFilteredValidators, sortableColumns } =
+    useValidatorTableSorting({
+      validators: filteredValidators,
+      stakedAmountByAddress: {},
+    });
+
   const headers = [
     "",
     "Validator",
     "Address",
-    <div key={`all-validators-voting-power`} className="text-right">
-      Voting Power
-    </div>,
-    <div key={`all-validators-comission`} className="text-right">
-      Commission
-    </div>,
+    {
+      children: "Voting Power",
+      className: "text-right",
+      ...sortableColumns["votingPowerInNAM"],
+    },
+    {
+      children: "Comission",
+      className: "text-right",
+      ...sortableColumns["commission"],
+    },
   ];
 
   const renderRow = (validator: Validator): TableRow => ({
@@ -123,7 +135,7 @@ export const AllValidatorsTable = ({
           <div className="flex flex-col h-[490px] overflow-hidden">
             <ValidatorsTable
               id="all-validators"
-              validatorList={filteredValidators}
+              validatorList={sortedAndFilteredValidators}
               headers={headers}
               initialPage={initialPage}
               resultsPerPage={resultsPerPage}

diff --git a/apps/namadillo/src/App/Staking/IncrementBondingTable.tsx b/apps/namadillo/src/App/Staking/IncrementBondingTable.tsx
@@ -4,6 +4,7 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { NamInput } from "App/Common/NamInput";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
+import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
 import { twMerge } from "tailwind-merge";
 import { Validator } from "types";
 import { ValidatorCard } from "./ValidatorCard";
@@ -24,6 +25,11 @@ export const IncrementBondingTable = ({
   onChangeValidatorAmount,
   resultsPerPage = 100,
 }: IncrementBondingTableProps): JSX.Element => {
+  const { sortableColumns, sortedValidators } = useValidatorTableSorting({
+    validators,
+    stakedAmountByAddress,
+  });
+
   const headers = [
     { children: "Validator" },
     "Amount to Stake",
@@ -35,9 +41,16 @@ export const IncrementBondingTable = ({
         </div>
       ),
       className: "text-right",
+      ...sortableColumns["stakedAmount"],
+    },
+    {
+      children: <div className="w-full text-right">Voting Power</div>,
+      ...sortableColumns["votingPowerInNAM"],
+    },
+    {
+      children: <div className="w-full text-right">Commission</div>,
+      ...sortableColumns["commission"],
     },
-    { children: "Voting Power", className: "text-right" },
-    { children: "Commission", className: "text-right" },
   ];
 
   const renderRow = (validator: Validator): TableRow => {
@@ -136,7 +149,7 @@ export const IncrementBondingTable = ({
     <ValidatorsTable
       id="increment-bonding-table"
       tableClassName="flex-1 overflow-auto mt-2"
-      validatorList={validators}
+      validatorList={sortedValidators}
       updatedAmountByAddress={updatedAmountByAddress}
       headers={headers}
       renderRow={renderRow}

diff --git a/apps/namadillo/src/App/Staking/MyValidatorsTable.tsx b/apps/namadillo/src/App/Staking/MyValidatorsTable.tsx
@@ -5,42 +5,59 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { WalletAddress } from "App/Common/WalletAddress";
 import { myValidatorsAtom } from "atoms/validators";
 import BigNumber from "bignumber.js";
+import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
 import { useAtomValue } from "jotai";
 import { useNavigate } from "react-router-dom";
-import { MyValidator, Validator } from "types";
+import { Address, MyValidator, Validator } from "types";
 import { ValidatorCard } from "./ValidatorCard";
 import { ValidatorsTable } from "./ValidatorsTable";
 import StakingRoutes from "./routes";
 
 export const MyValidatorsTable = (): JSX.Element => {
   const navigate = useNavigate();
   const myValidators = useAtomValue(myValidatorsAtom);
-  const myValidatorsObj: Record<string, MyValidator> =
+
+  const validators =
+    myValidators.isSuccess ?
+      myValidators.data.map((v: MyValidator) => v.validator)
+    : [];
+
+  const stakedAmountByAddress: Record<Address, BigNumber> =
     myValidators.isSuccess ?
-      myValidators.data.reduce(
-        (acc: Record<string, MyValidator>, current: MyValidator) => {
-          return { ...acc, [current.validator.address]: current };
-        },
-        {}
-      )
+      myValidators.data.reduce((prev, current) => {
+        return {
+          ...prev,
+          [current.validator.address]: current.stakedAmount,
+        };
+      }, {})
     : {};
 
+  const { sortableColumns, sortedValidators } = useValidatorTableSorting({
+    validators,
+    stakedAmountByAddress,
+  });
+
   const head = [
     "My Validators",
     "Address",
-    <div key="my-validators-staked-amount" className="text-right">
-      Staked Amount
-    </div>,
-    <div key="my-validators-vp" className="text-right">
-      Voting Power
-    </div>,
-    <div key="my-validators-comission" className="text-right">
-      Commission
-    </div>,
+    {
+      children: "Staked Amount",
+      className: "text-right",
+      ...sortableColumns["stakedAmount"],
+    },
+    {
+      children: "Voting Power",
+      className: "text-right",
+      ...sortableColumns["votingPowerInNAM"],
+    },
+    {
+      children: "Commission",
+      className: "text-right",
+      ...sortableColumns["commission"],
+    },
   ];
 
   const renderRow = (validator: Validator): TableRow => {
-    const stakedAmount = myValidatorsObj[validator.address].stakedAmount;
     return {
       className: "",
       cells: [
@@ -57,7 +74,11 @@ export const MyValidatorsTable = (): JSX.Element => {
           key={`my-validator-currency-${validator.address}`}
           className="text-right leading-tight"
         >
-          <NamCurrency amount={stakedAmount || new BigNumber(0)} />
+          <NamCurrency
+            amount={
+              stakedAmountByAddress[validator.address] || new BigNumber(0)
+            }
+          />
         </div>,
         <div
           className="flex flex-col text-right leading-tight"
@@ -126,11 +147,7 @@ export const MyValidatorsTable = (): JSX.Element => {
         <ValidatorsTable
           id="my-validators"
           tableClassName="mt-2"
-          validatorList={
-            myValidators.isSuccess ?
-              myValidators.data.map((v: MyValidator) => v.validator)
-            : []
-          }
+          validatorList={sortedValidators}
           headers={head}
           renderRow={renderRow}
         />

diff --git a/apps/namadillo/src/App/Staking/ReDelegateTable.tsx b/apps/namadillo/src/App/Staking/ReDelegateTable.tsx
@@ -4,6 +4,7 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { NamInput } from "App/Common/NamInput";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
+import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
 import { twMerge } from "tailwind-merge";
 import { Validator } from "types";
 import { ValidatorCard } from "./ValidatorCard";
@@ -27,6 +28,11 @@ export const ReDelegateTable = ({
   renderInfoColumn,
   onChangeValidatorAmount,
 }: IncrementBondingTableProps): JSX.Element => {
+  const { sortableColumns, sortedValidators } = useValidatorTableSorting({
+    validators,
+    stakedAmountByAddress,
+  });
+
   const headers = [
     { children: "Validator" },
     "Amount to Re-delegate",
@@ -40,9 +46,18 @@ export const ReDelegateTable = ({
         </div>
       ),
       className: "text-right",
+      ...sortableColumns["stakedAmount"],
+    },
+    {
+      children: "Voting Power",
+      className: "text-right",
+      ...sortableColumns["votingPowerInNAM"],
+    },
+    {
+      children: "Commission",
+      className: "text-right",
+      ...sortableColumns["commission"],
     },
-    { children: "Voting Power", className: "text-right" },
-    { children: "Commission", className: "text-right" },
   ];
 
   const renderRow = (validator: Validator): TableRow => {
@@ -128,7 +143,7 @@ export const ReDelegateTable = ({
     <ValidatorsTable
       id="increment-bonding-table"
       tableClassName="mt-2"
-      validatorList={validators}
+      validatorList={sortedValidators}
       updatedAmountByAddress={updatedAmountByAddress}
       headers={headers}
       renderRow={renderRow}

diff --git a/apps/namadillo/src/App/Staking/UnstakeBondingTable.tsx b/apps/namadillo/src/App/Staking/UnstakeBondingTable.tsx
@@ -4,6 +4,7 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { NamInput } from "App/Common/NamInput";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
+import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
 import { twMerge } from "tailwind-merge";
 import { MyValidator, Validator } from "types";
 import { ValidatorCard } from "./ValidatorCard";
@@ -22,19 +23,43 @@ export const UnstakeBondingTable = ({
   stakedAmountByAddress,
   onChangeValidatorAmount,
 }: UnstakeBondingTableProps): JSX.Element => {
+  const validators = myValidators.map((mv) => mv.validator);
+
+  const { sortableColumns, sortedValidators } = useValidatorTableSorting({
+    validators,
+    stakedAmountByAddress,
+  });
+
   const headers = [
     { children: "Validator" },
     "Amount to Unstake",
-    <div key={`unstake-new-total`} className="text-right">
-      <span className="block">Stake</span>
-      <small className="text-xs text-neutral-500 block">New total Stake</small>
-    </div>,
-    <div key={`unstake-voting-power`} className="text-right">
-      Voting Power
-    </div>,
-    <div key={`unstake-commission`} className="text-right">
-      Commission
-    </div>,
+    {
+      children: (
+        <div key={`unstake-new-total`} className="text-right">
+          <span className="block">Stake</span>
+          <small className="text-xs text-neutral-500 block">
+            New total Stake
+          </small>
+        </div>
+      ),
+      ...sortableColumns["stakedAmount"],
+    },
+    {
+      children: (
+        <div key={`unstake-voting-power`} className="text-right">
+          Voting Power
+        </div>
+      ),
+      ...sortableColumns["stakedAmount"],
+    },
+    {
+      children: (
+        <div key={`unstake-commission`} className="text-right">
+          Commission
+        </div>
+      ),
+      ...sortableColumns["commission"],
+    },
   ];
 
   const renderRow = (validator: Validator): TableRow => {
@@ -127,7 +152,7 @@ export const UnstakeBondingTable = ({
     <ValidatorsTable
       id="increment-bonding-table"
       tableClassName="mt-2"
-      validatorList={myValidators.map((mv) => mv.validator)}
+      validatorList={sortedValidators}
       headers={headers}
       renderRow={renderRow}
     />