refactor(tangle-dapp): Cleanup unstake & withdraw restake tables

Author: yuri-xyz

apps/tangle-dapp/src/components/LiquidStaking/LsUnbondingTable.tsx

@@ -13,7 +13,6 @@ import {
   TANGLE_DOCS_LIQUID_STAKING_URL,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import addCommasToNumber from '@webb-tools/webb-ui-components/utils/addCommasToNumber';
 import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 import { FC, useMemo, useState } from 'react';
@@ -177,7 +176,6 @@ const LsUnbondingTable: FC = () => {
 
   return (
     <Table
-      variant={TableVariant.DEFAULT}
       tableProps={table}
       title={pluralize('unstake request', rows.length !== 1)}
       isPaginated

apps/tangle-dapp/src/components/LiquidStaking/LsValidatorTable.tsx

@@ -21,7 +21,6 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -192,11 +191,7 @@ export const LsValidatorTable = () => {
                 debounceTime={300}
               />
 
-              <Table
-                variant={TableVariant.DEFAULT}
-                tableProps={table}
-                totalRecords={tableData.length}
-              />
+              <Table tableProps={table} totalRecords={tableData.length} />
             </div>
 
             {data.length > DEFAULT_PAGINATION.pageSize && (

apps/tangle-dapp/src/components/NominationsTable/NominationsTable.tsx

@@ -22,7 +22,6 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { FC, useState } from 'react';
 
 import calculateCommission from '../../utils/calculateCommission';
@@ -31,10 +30,10 @@ import PercentageCell from '../tableCells/PercentageCell';
 import TokenAmountCell from '../tableCells/TokenAmountCell';
 import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 
-const columnHelper = createColumnHelper<Nominee>();
+const COLUMN_HELPER = createColumnHelper<Nominee>();
 
-const columns = [
-  columnHelper.accessor('address', {
+const COLUMNS = [
+  COLUMN_HELPER.accessor('address', {
     header: () => <HeaderCell title="Validator" className="justify-start" />,
     cell: (props) => {
       const address = props.getValue();
@@ -62,7 +61,7 @@ const columns = [
     },
     sortingFn: getSortAddressOrIdentityFnc<Nominee>(),
   }),
-  columnHelper.accessor('isActive', {
+  COLUMN_HELPER.accessor('isActive', {
     header: () => <HeaderCell title="Status" className="justify-start" />,
     cell: (props) => {
       const isActive = props.getValue();
@@ -77,12 +76,12 @@ const columns = [
       return isActiveA ? 1 : -1;
     },
   }),
-  columnHelper.accessor('selfStakeAmount', {
+  COLUMN_HELPER.accessor('selfStakeAmount', {
     header: () => <HeaderCell title="Self-staked" className="justify-center" />,
     cell: (props) => <TokenAmountCell amount={props.getValue()} />,
     sortingFn: sortBnValueForNomineeOrValidator,
   }),
-  columnHelper.accessor('totalStakeAmount', {
+  COLUMN_HELPER.accessor('totalStakeAmount', {
     header: () => (
       <HeaderCell title="Effective amount staked" className="justify-center" />
     ),
@@ -94,13 +93,13 @@ const columns = [
     ),
     sortingFn: sortBnValueForNomineeOrValidator,
   }),
-  columnHelper.accessor('nominatorCount', {
+  COLUMN_HELPER.accessor('nominatorCount', {
     header: () => <HeaderCell title="Nominations" className="justify-center" />,
     cell: (props) => (
       <StringCell value={props.getValue().toString()} className="text-start" />
     ),
   }),
-  columnHelper.accessor('commission', {
+  COLUMN_HELPER.accessor('commission', {
     header: () => <HeaderCell title="Commission" className="justify-center" />,
     cell: (props) => (
       <PercentageCell percentage={calculateCommission(props.getValue())} />
@@ -125,7 +124,7 @@ const NominationsTable: FC<NominationsTableProps> = ({
 
   const table = useReactTable({
     data: nominees,
-    columns,
+    columns: COLUMNS,
     initialState: {
       pagination: {
         pageSize,
@@ -149,7 +148,6 @@ const NominationsTable: FC<NominationsTableProps> = ({
   return (
     <div className="overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160">
       <Table
-        variant={TableVariant.DEFAULT}
         thClassName="border-t-0 bg-mono-0"
         paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
         tableProps={table}

apps/tangle-dapp/src/components/PayoutTable/PayoutTable.tsx

@@ -25,7 +25,6 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 import { type FC, useState } from 'react';
 
@@ -243,7 +242,6 @@ const PayoutTable: FC<PayoutTableProps> = ({
     <>
       <div className="overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160">
         <Table
-          variant={TableVariant.DEFAULT}
           tableProps={table}
           isPaginated
           totalRecords={data.length}

apps/tangle-dapp/src/components/ValidatorTable/ValidatorTable.tsx

@@ -25,7 +25,6 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
 import { Link } from 'react-router';
 import { FC, useMemo, useState } from 'react';
@@ -203,7 +202,6 @@ const ValidatorTable: FC<ValidatorTableProps> = ({
 
   return (
     <Table
-      variant={TableVariant.DEFAULT}
       trClassName={IS_PRODUCTION_ENV ? '' : 'cursor-pointer'}
       tableProps={table}
       isPaginated

apps/tangle-dapp/src/data/useIdentities.tsx

@@ -21,16 +21,18 @@ const useIdentities = (
   );
 
   const identityNames = useMemo(() => {
-    if (result === null) return [];
+    if (result === null) {
+      return [];
+    }
 
-    return result.map((identityResult, idx) => {
+    return result.map((identityResult, index) => {
       if (identityResult.isNone) {
-        return [addresses[idx], null] as const;
+        return [addresses[index], null] as const;
       }
 
       const info = extractIdentityInfo(identityResult.unwrap()[0]);
 
-      return [addresses[idx], info] as const;
+      return [addresses[index], info] as const;
     });
   }, [addresses, result]);
 

apps/tangle-dapp/src/pages/nomination/[validatorAddress]/NodeSpecificationsTable.tsx

@@ -8,7 +8,6 @@ import {
 } from '@tanstack/react-table';
 import TableStatus from '@webb-tools/tangle-shared-ui/components/tables/TableStatus';
 import { fuzzyFilter, Table, Typography } from '@webb-tools/webb-ui-components';
-import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import cx from 'classnames';
 import { FC } from 'react';
 
@@ -113,11 +112,7 @@ const NodeSpecificationsTable: FC<NodeSpecificationsTableProps> = ({
 
         {/* Success; show the table */}
         {!isLoading && error === null && nodeSpecifications.length > 0 && (
-          <Table
-            variant={TableVariant.DEFAULT}
-            tableProps={table}
-            totalRecords={nodeSpecifications.length}
-          />
+          <Table tableProps={table} totalRecords={nodeSpecifications.length} />
         )}
       </div>
     </div>

apps/tangle-dapp/src/pages/restake/overview/OperatorsTable.tsx

@@ -41,6 +41,7 @@ const OperatorsTable: FC<Props> = ({
         ([addressString, { delegations, restakersCount }]) => {
           const address = assertSubstrateAddress(addressString);
           const tvlInUsd = operatorTVL?.[address] ?? null;
+
           const concentrationPercentage =
             operatorConcentration?.[address] ?? null;