fix: make votingPower and commission BigNumbers

apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx

@@ -8,6 +8,7 @@ import {
   StakingBalancesValue,
   StakingOverviewContainer,
 } from "./StakingOverview.components";
+import { formatPercentage } from "@anoma/utils";
 
 const MyValidatorsRowRenderer = (
   myValidatorRow: MyValidators,
@@ -84,8 +85,8 @@ const AllValidatorsRowRenderer = (
           {validator.name}
         </TableLink>
       </td>
-      <td>{validator.votingPower}</td>
-      <td>{validator.commission}</td>
+      <td>{validator.votingPower.toString()}</td>
+      <td>{formatPercentage(validator.commission)}</td>
     </>
   );
 };

apps/namada-interface/src/App/Staking/ValidatorDetails/ValidatorDetails.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 
-import { truncateInMiddle } from "@anoma/utils";
+import { truncateInMiddle, formatPercentage } from "@anoma/utils";
 import {
   Button,
   ButtonVariant,
@@ -101,8 +101,12 @@ const validatorToDataRows = (
   }
   return [
     { uuid: "1", key: "Name", value: truncateInMiddle(validator.name, 5, 5) },
-    { uuid: "2", key: "Commission", value: validator.commission },
-    { uuid: "3", key: "Voting Power", value: validator.votingPower },
+    {
+      uuid: "2",
+      key: "Commission",
+      value: formatPercentage(validator.commission),
+    },
+    { uuid: "3", key: "Voting Power", value: validator.votingPower.toString() },
     {
       uuid: "4",
       key: "Description",

apps/namada-interface/src/slices/StakingAndGovernance/actions.ts

@@ -32,9 +32,9 @@ const toValidator = (votesPerToken: BigNumber) => (
 ): Validator => ({
   uuid: address,
   name: address,
-  votingPower: (new BigNumber(stake)).multipliedBy(votesPerToken).toString(),
+  votingPower: (new BigNumber(stake)).multipliedBy(votesPerToken),
   homepageUrl: "http://namada.net",
-  commission: "TBD",
+  commission: new BigNumber(0), // TODO: implement commission
   description: "TBD",
 });
 

apps/namada-interface/src/slices/StakingAndGovernance/fakeData.ts

@@ -1,3 +1,5 @@
+import BigNumber from "bignumber.js";
+
 import { Validator, StakingPosition, MyBalanceEntry } from "./types";
 export const myBalancesData: MyBalanceEntry[] = [
   {
@@ -58,86 +60,86 @@ export const allValidatorsData: Validator[] = [
     uuid: "polychain-capital",
     name: "Polychain capital",
     homepageUrl: "https://polychain.capital",
-    votingPower: "NAM 100 000",
-    commission: "22%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.22),
     description:
       "Polychain is an investment firm committed to exceptional returns for investors through actively managed portfolios of blockchain assets.",
   },
   {
     uuid: "figment",
     name: "Figment",
     homepageUrl: "https://figment.io",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description:
       "Makers of Hubble and Canada’s largest Cosmos validator, Figment is the easiest and most secure way to stake your Atoms.",
   },
   {
     uuid: "p2p",
     name: "P2P",
     homepageUrl: "https://p2p.org",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description:
       "One of the winners of Cosmos Game of Stakes. We provide a simple, secure and intelligent staking service to help you generate rewards on your blockchain assets across 9+ networks within a single interface. Let’s stake together - p2p.org.",
   },
   {
     uuid: "coinbase-custody",
     name: "Coinbase Custody",
     homepageUrl: "https://custody.coinbase.com",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description: "Coinbase Custody Cosmos Validator",
   },
   {
     uuid: "chorus-one",
     name: "Chorus One",
     homepageUrl: "https://chorus.one",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description:
       "Secure Cosmos and shape its future by delegating to Chorus One, a highly secure and stable validator. By delegating, you agree to the terms of service at: https://chorus.one/cosmos/tos",
   },
   {
     uuid: "binance-staking",
     name: "Binance Staking",
     homepageUrl: "https://binance.com",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description: "Exchange the world",
   },
   {
     uuid: "dokiacapital",
     name: "DokiaCapital",
     homepageUrl: "https://staking.dokia.cloud",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description:
       "Downtime is not an option for Dokia Capital. We operate an enterprise-grade infrastructure that is robust and secure.",
   },
   {
     uuid: "kraken",
     name: "Kraken",
     homepageUrl: "https://kraken.com",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description: "Kraken Exchange validator",
   },
   {
     uuid: "zero-knowledge-validator-(ZKV)",
     name: "Zero Knowledge Validator (ZKV)",
     homepageUrl: "https://zkvalidator.com",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description:
       "Zero Knowledge Validator: Stake & Support ZKP Research & Privacy Tech",
   },
   {
     uuid: "paradigm",
     name: "Paradigm",
     homepageUrl: "https://www.paradigm.xyz",
-    votingPower: "NAM 100 000",
-    commission: "20%",
+    votingPower: new BigNumber(100_000),
+    commission: new BigNumber(0.20),
     description: "",
   },
 ];

apps/namada-interface/src/slices/StakingAndGovernance/types.ts

@@ -1,3 +1,5 @@
+import BigNumber from "bignumber.js";
+
 export const STAKING_AND_GOVERNANCE = "stakingAndGovernance";
 export const FETCH_VALIDATORS = `${STAKING_AND_GOVERNANCE}/FETCH_VALIDATORS`;
 export const FETCH_MY_VALIDATORS = `${STAKING_AND_GOVERNANCE}/FETCH_MY_VALIDATORS`;
@@ -21,9 +23,9 @@ type Unique = {
 // represents the details of a validator
 export type Validator = Unique & {
   name: string;
-  votingPower: string;
+  votingPower: BigNumber;
   homepageUrl: string;
-  commission: string;
+  commission: BigNumber;
   description: string;
 };
 

packages/utils/src/helpers/index.ts

@@ -240,3 +240,6 @@ export type SchemaObject<T> =
       } :
       never :
     never;
+
+export const formatPercentage = (bigNumber: BigNumber): string =>
+  bigNumber.multipliedBy(100).toString() + "%";