Other fixes not directly related to StakingOverview and friends

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import BigNumber from "bignumber.js";
 
 import {
   Button,
@@ -74,7 +75,7 @@ export const UnbondPosition = (props: Props): JSX.Element => {
     (pos) => pos.owner === owner
   );
 
-  const stakedAmount = Number(currentBondingPosition?.stakedAmount || "0");
+  const stakedAmount = new BigNumber(currentBondingPosition?.stakedAmount || "0");
 
   // storing the bonding amount input value locally here as string
   // we threat them as strings except below in validation
@@ -95,14 +96,14 @@ export const UnbondPosition = (props: Props): JSX.Element => {
   // unbonding amount and displayed value with a very naive validation
   // TODO (https://github.com/anoma/namada-interface/issues/4#issuecomment-1260564499)
   // do proper validation as part of input
-  const amountToUnstakeAsNumber = Number(amountToBondOrUnbond);
-  const remainsBonded = stakedAmount - amountToUnstakeAsNumber;
+  const amountToUnstakeAsNumber = new BigNumber(amountToBondOrUnbond);
+  const remainsBonded = stakedAmount.minus(amountToUnstakeAsNumber);
 
   // if the input value is incorrect we display an error
   const isEntryIncorrect =
-    (amountToBondOrUnbond !== "" && amountToUnstakeAsNumber <= 0) ||
-    remainsBonded < 0 ||
-    Number.isNaN(amountToUnstakeAsNumber);
+    (amountToBondOrUnbond !== "" && amountToUnstakeAsNumber.isLessThanOrEqualTo(0)) ||
+    remainsBonded.isLessThan(0) ||
+    amountToUnstakeAsNumber.isNaN();
 
   // if the input value is incorrect or empty we disable the confirm button
   const isEntryIncorrectOrEmpty =
@@ -114,8 +115,8 @@ export const UnbondPosition = (props: Props): JSX.Element => {
     : `${remainsBonded}`;
 
   // This is the value that we pass to be dispatch to the action
-  const delta = amountToUnstakeAsNumber * -1;
-  const deltaAsString = `${delta}`;
+  const delta = amountToUnstakeAsNumber.multipliedBy(-1);
+  const deltaAsString = `${delta.toString()}`;
 
   // data for the summary table
   const unbondingSummary = [

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,
@@ -21,7 +21,7 @@ const validatorDetailsConfigurations: TableConfigurations<KeyValueData, never> =
   {
     rowRenderer: (rowData: KeyValueData) => {
       // we have to figure if this is the row for validator homepage, hench an anchor
-      const linkOrText = rowData.value.startsWith("https:") ? (
+      const linkOrText = /^https?:/.test(rowData.value) ? (
         <a href={rowData.value} target="_blank" rel="noopener noreferrer">
           {rowData.value}
         </a>
@@ -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",

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() + "%";