enhancement: polish units and copy validators address (#1373)

* fix: add copy to validators table address * fix: poslih units on validator and epoch pages + add copy on validator page * feat: add click to copy to validators in the epoch page * feat: add toggable units to delegated amount in delegation output --------- Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Apr 3, 2024 · 2afc55f · 2afc55f
1 parent 590470e
commit 2afc55f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 25 deletions.
diff --git a/client/src/app/components/nova/OutputView.tsx b/client/src/app/components/nova/OutputView.tsx
@@ -210,7 +210,17 @@ const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmoun
             {output.type === OutputType.Delegation && (
                 <React.Fragment>
                     <div className="card--label">Delegated amount:</div>
-                    <div className="card--value row">{Number((output as DelegationOutput).delegatedAmount)}</div>
+                    <div className="card--value row">
+                        <span
+                            className="pointer"
+                            onClick={(e) => {
+                                setIsFormattedBalance(!isFormattedBalance);
+                                e.stopPropagation();
+                            }}
+                        >
+                            {formatAmount(Number((output as DelegationOutput).delegatedAmount), tokenInfo, !isFormattedBalance)}
+                        </span>
+                    </div>
                     <div className="card--label">Delegation Id:</div>
                     <div className="card--value row">{delegationId}</div>
                     <div className="card--label">Validator Address:</div>

diff --git a/client/src/app/components/nova/TableCell.tsx b/client/src/app/components/nova/TableCell.tsx
@@ -1,13 +1,15 @@
 import { SlotStatus } from "~/app/lib/enums";
 import { PillStatus } from "~/app/lib/ui/enums";
-import React from "react";
+import React, { useState } from "react";
 import StatusPill from "./StatusPill";
 import TruncatedId from "../stardust/TruncatedId";
 import classNames from "classnames";
 import { useSlotManaBurned } from "~/helpers/nova/hooks/useSlotManaBurned";
 import { useSlotStats } from "~/helpers/nova/hooks/useSlotStats";
 import Spinner from "../Spinner";
 import { Link } from "react-router-dom";
+import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
+import { BaseTokenResponse } from "@iota/sdk-wasm-nova/web";
 
 export enum TableCellType {
     StatusPill = "status-pill",
@@ -16,10 +18,19 @@ export enum TableCellType {
     TruncatedId = "truncated-id",
     Stats = "stats",
     BurnedMana = "burned-mana",
+    Formatted = "formatted",
     Empty = "empty",
 }
 
-export type TTableData = IPillStatusCell | ITextCell | ILinkCell | ITruncatedIdCell | IStatsCell | IBurnedManaCell | IEmptyCell;
+export type TTableData =
+    | IPillStatusCell
+    | ITextCell
+    | ILinkCell
+    | ITruncatedIdCell
+    | IStatsCell
+    | IBurnedManaCell
+    | IFormattedCell
+    | IEmptyCell;
 
 export default function TableCellWrapper(cellData: TTableData): React.JSX.Element {
     let Component: React.JSX.Element;
@@ -43,6 +54,9 @@ export default function TableCellWrapper(cellData: TTableData): React.JSX.Elemen
         case TableCellType.BurnedMana:
             Component = <BurnedManaCell {...cellData} />;
             break;
+        case TableCellType.Formatted:
+            Component = <FormattedCell {...cellData} />;
+            break;
         default: {
             Component = <TextCell {...cellData} />;
             break;
@@ -108,16 +122,34 @@ function TextCell({ data, highlight }: ITextCell): React.JSX.Element {
     return <span className={classNames({ highlight })}>{data}</span>;
 }
 
+interface IFormattedCell {
+    data: string | number | bigint;
+    type: TableCellType.Formatted;
+    tokenInfo: BaseTokenResponse;
+    isFormatted?: boolean;
+}
+
+function FormattedCell({ data, tokenInfo, isFormatted }: IFormattedCell): React.JSX.Element {
+    const [isFormattedAmount, setIsFormattedAmount] = useState(isFormatted);
+
+    return (
+        <span onClick={() => setIsFormattedAmount(!isFormattedAmount)} className="pointer margin-r-5">
+            {formatAmount(data, tokenInfo, isFormattedAmount)}
+        </span>
+    );
+}
+
 interface ITruncatedIdCell {
     data: string;
     type: TableCellType.TruncatedId;
     href: string;
+    shouldCopy?: boolean;
 }
 
-function TruncatedIdCell({ data, href }: ITruncatedIdCell): React.JSX.Element {
+function TruncatedIdCell({ data, href, shouldCopy }: ITruncatedIdCell): React.JSX.Element {
     return (
         <div className="truncated-id-cell">
-            <TruncatedId id={data} link={href} />
+            <TruncatedId id={data} link={href} showCopyButton={shouldCopy} />
         </div>
     );
 }

diff --git a/client/src/app/lib/ui/enums/ValidatorsTableHeadings.enum.ts b/client/src/app/lib/ui/enums/ValidatorsTableHeadings.enum.ts
@@ -3,7 +3,8 @@ export enum ValidatorsTableHeadings {
     Candidate = "Candidate",
     Elected = "Elected",
     FixedCost = "Fixed Cost",
-    Stake = "Own/Delegated Stake",
     PoolStake = "Pool Stake",
+    ValidatorStake = "Validator Stake",
+    DelegatedStake = "Delegated Stake",
     RankedByStake = "Ranked by Stake",
 }
diff --git a/client/src/helpers/nova/hooks/useGenerateCommitteeTable.ts b/client/src/helpers/nova/hooks/useGenerateCommitteeTable.ts
@@ -2,7 +2,6 @@ import type { ITableRow } from "~/app/components/Table";
 import { TableCellType, type TTableData } from "~/app/components/nova/TableCell";
 import { BaseTokenResponse, CommitteeMember, ValidatorResponse } from "@iota/sdk-wasm-nova/web";
 import { CommitteeTableHeadings } from "~/app/lib/ui/enums/CommitteeTableHeadings.enum";
-import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
 
 function getCommitteeTableRow(
     network: string,
@@ -14,37 +13,42 @@ function getCommitteeTableRow(
 
     Object.values(CommitteeTableHeadings).forEach((heading) => {
         let tableData: TTableData | null = null;
-
+        const delegatedStake = BigInt(validator.poolStake) - BigInt(validator.validatorStake);
         switch (heading) {
             case CommitteeTableHeadings.Address:
                 tableData = {
                     type: TableCellType.TruncatedId,
                     data: validator.address,
                     href: `/${network}/addr/${validator.address}`,
+                    shouldCopy: true,
                 };
                 break;
             case CommitteeTableHeadings.Cost:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: formatAmount(validator.fixedCost, manaInfo),
+                    type: TableCellType.Formatted,
+                    data: validator.fixedCost,
+                    tokenInfo: manaInfo,
                 };
                 break;
             case CommitteeTableHeadings.PoolStake:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: formatAmount(validator.poolStake, tokenInfo),
+                    type: TableCellType.Formatted,
+                    data: validator.poolStake,
+                    tokenInfo,
                 };
                 break;
             case CommitteeTableHeadings.ValidatorStake:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: formatAmount(validator.validatorStake, tokenInfo),
+                    type: TableCellType.Formatted,
+                    data: validator.validatorStake,
+                    tokenInfo,
                 };
                 break;
             case CommitteeTableHeadings.DelegatedStake:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: formatAmount(BigInt(validator.poolStake) - BigInt(validator.validatorStake), tokenInfo),
+                    type: TableCellType.Formatted,
+                    data: delegatedStake,
+                    tokenInfo,
                 };
                 break;
             default:

diff --git a/client/src/helpers/nova/hooks/useGenerateValidatorsTable.ts b/client/src/helpers/nova/hooks/useGenerateValidatorsTable.ts
@@ -2,7 +2,6 @@ import type { ITableRow } from "~/app/components/Table";
 import { TableCellType, type TTableData } from "~/app/components/nova/TableCell";
 import { BaseTokenResponse } from "@iota/sdk-wasm-nova/web";
 import { ValidatorsTableHeadings } from "~/app/lib/ui/enums/ValidatorsTableHeadings.enum";
-import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
 import { useNetworkInfoNova } from "../networkInfo";
 import { IValidator } from "~/models/api/nova/IValidatorsResponse";
 
@@ -18,7 +17,7 @@ function getValidatorTableRow(
     const address = validatorResponse.address;
     const inCommittee = validator.inCommittee;
     const delegatedStake = validatorResponse.poolStake - validatorResponse.validatorStake;
-    const stake = `${formatAmount(validatorResponse.validatorStake, tokenInfo)}/${formatAmount(delegatedStake, tokenInfo)}`;
+
     Object.values(ValidatorsTableHeadings).forEach((heading) => {
         let tableData: TTableData | null = null;
 
@@ -28,6 +27,7 @@ function getValidatorTableRow(
                     type: TableCellType.TruncatedId,
                     data: address,
                     href: `/${network}/addr/${address}`,
+                    shouldCopy: true,
                 };
                 break;
             case ValidatorsTableHeadings.Candidate:
@@ -44,20 +44,30 @@ function getValidatorTableRow(
                 break;
             case ValidatorsTableHeadings.FixedCost:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: formatAmount(validatorResponse.fixedCost, manaInfo),
+                    type: TableCellType.Formatted,
+                    data: validatorResponse.fixedCost,
+                    tokenInfo: manaInfo,
                 };
                 break;
-            case ValidatorsTableHeadings.Stake:
+            case ValidatorsTableHeadings.ValidatorStake:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: stake,
+                    type: TableCellType.Formatted,
+                    data: validatorResponse.validatorStake,
+                    tokenInfo,
+                };
+                break;
+            case ValidatorsTableHeadings.DelegatedStake:
+                tableData = {
+                    type: TableCellType.Formatted,
+                    data: delegatedStake,
+                    tokenInfo,
                 };
                 break;
             case ValidatorsTableHeadings.PoolStake:
                 tableData = {
-                    type: TableCellType.Text,
-                    data: formatAmount(validatorResponse.poolStake, tokenInfo),
+                    type: TableCellType.Formatted,
+                    data: validatorResponse.poolStake,
+                    tokenInfo,
                 };
                 break;
             case ValidatorsTableHeadings.RankedByStake: