fix(tangle-dapp): Fix percentage formatting bug

apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx

@@ -133,13 +133,13 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
         header: () => 'My Stake',
         cell: (props) => <TokenAmountCell amount={props.getValue()} />,
       }),
-      COLUMN_HELPER.accessor('commissionPercentage', {
+      COLUMN_HELPER.accessor('commissionFractional', {
         header: () => 'Commission',
-        cell: (props) => <PercentageCell percentage={props.getValue()} />,
+        cell: (props) => <PercentageCell fractional={props.getValue()} />,
       }),
       COLUMN_HELPER.accessor('apyPercentage', {
         header: () => 'APY',
-        cell: (props) => <PercentageCell percentage={props.getValue()} />,
+        cell: (props) => <PercentageCell fractional={props.getValue()} />,
       }),
       COLUMN_HELPER.display({
         id: 'actions',
@@ -256,7 +256,7 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
 
     return selectedPool === undefined
       ? null
-      : (selectedPool.commissionPercentage ?? null);
+      : (selectedPool.commissionFractional ?? null);
   }, [pools, selectedPoolId]);
 
   // Reset the selected pool's ID after all the management

apps/tangle-dapp/components/LiquidStaking/UpdateCommissionModal.tsx

@@ -34,17 +34,16 @@ const UpdateCommissionModal: FC<UpdateCommissionModalProps> = ({
   const { execute, status } = useLsSetCommissionTx();
   const [isDestinationInputError, setIsDestinationInputError] = useState(false);
 
-  const [destinationAccountAddress, setDestinationAccountAddress] = useState<
-    string | null
-  >(null);
+  const [destinationAccountAddress, setDestinationAccountAddress] =
+    useState<string>('');
 
   const isReady =
     poolId !== null &&
     execute !== null &&
     commission !== null &&
     commission !== currentCommissionFractional &&
     status !== TxStatus.PROCESSING &&
-    destinationAccountAddress !== null &&
+    destinationAccountAddress !== '' &&
     !isDestinationInputError;
 
   const handleUpdateCommissionClick = useCallback(() => {
@@ -91,7 +90,7 @@ const UpdateCommissionModal: FC<UpdateCommissionModalProps> = ({
             id="ls-update-commission-reward-destination-address"
             type={AddressType.Both}
             title="Reward Destination Address"
-            value={destinationAccountAddress ?? ''}
+            value={destinationAccountAddress}
             setValue={setDestinationAccountAddress}
             wrapperOverrides={{ isFullWidth: true }}
             setErrorMessage={(error) =>

apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx

@@ -4,7 +4,7 @@ import { FC, useMemo } from 'react';
 import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
 import { LsProtocolId } from '../../../constants/liquidStaking/types';
 import formatBn from '../../../utils/formatBn';
-import formatPercentage from '../../../utils/formatPercentage';
+import formatFractional from '../../../utils/formatFractional';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
 import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage';
 import DetailItem from './DetailItem';
@@ -52,7 +52,7 @@ const FeeDetailItem: FC<FeeDetailItemProps> = ({
   const feeTitle =
     typeof feePercentage !== 'number'
       ? 'Fee'
-      : `Fee (${formatPercentage(feePercentage * 100)})`;
+      : `Fee (${formatFractional(feePercentage * 100)})`;
 
   return <DetailItem title={feeTitle} value={formattedFeeAmount} />;
 };

apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx

@@ -34,7 +34,7 @@ import {
 import { useLsStore } from '../../../data/liquidStaking/useLsStore';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
 import addCommasToNumber from '../../../utils/addCommasToNumber';
-import formatPercentage from '../../../utils/formatPercentage';
+import formatFractional from '../../../utils/formatFractional';
 import isLsParachainChainId from '../../../utils/liquidStaking/isLsParachainChainId';
 import stringifyTimeUnit from '../../../utils/liquidStaking/stringifyTimeUnit';
 import GlassCard from '../../GlassCard';
@@ -108,7 +108,7 @@ const COLUMNS = [
             return undefined;
           }
 
-          return formatPercentage(progress * 100);
+          return formatFractional(progress * 100);
         }
         // Otherwise, it must be a Parachain unstake request's
         // remaining time unit.

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

@@ -93,7 +93,7 @@ const columns = [
   columnHelper.accessor('commission', {
     header: () => <HeaderCell title="Commission" className="justify-center" />,
     cell: (props) => (
-      <PercentageCell percentage={calculateCommission(props.getValue())} />
+      <PercentageCell fractional={calculateCommission(props.getValue())} />
     ),
     sortingFn: sortBnValueForNomineeOrValidator,
   }),

apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx

@@ -38,7 +38,7 @@ import React, {
 
 import { Validator } from '../../types';
 import calculateCommission from '../../utils/calculateCommission';
-import formatPercentage from '../../utils/formatPercentage';
+import formatFractional from '../../utils/formatFractional';
 import {
   getSortAddressOrIdentityFnc,
   sortBnValueForNomineeOrValidator,
@@ -188,7 +188,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
         cell: (props) => (
           <div className="flex items-center justify-start">
             <Chip color="dark-grey">
-              {formatPercentage(calculateCommission(props.getValue()))}
+              {formatFractional(calculateCommission(props.getValue()))}
             </Chip>
           </div>
         ),

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

@@ -71,7 +71,7 @@ const getTableColumns = (isWaiting?: boolean) => [
   columnHelper.accessor('commission', {
     header: () => <HeaderCell title="Commission" />,
     cell: (props) => (
-      <PercentageCell percentage={calculateCommission(props.getValue())} />
+      <PercentageCell fractional={calculateCommission(props.getValue())} />
     ),
     sortingFn: sortBnValueForNomineeOrValidator,
   }),

apps/tangle-dapp/components/tableCells/PercentageCell.tsx

@@ -2,14 +2,14 @@ import { Typography } from '@webb-tools/webb-ui-components';
 import { FC } from 'react';
 
 import { EMPTY_VALUE_PLACEHOLDER } from '../../constants';
-import formatPercentage from '../../utils/formatPercentage';
+import formatFractional from '../../utils/formatFractional';
 
 export type PercentageCellProps = {
-  percentage?: number;
+  fractional?: number;
 };
 
-const PercentageCell: FC<PercentageCellProps> = ({ percentage }) => {
-  if (percentage === undefined) {
+const PercentageCell: FC<PercentageCellProps> = ({ fractional }) => {
+  if (fractional === undefined) {
     return EMPTY_VALUE_PLACEHOLDER;
   }
 
@@ -19,7 +19,7 @@ const PercentageCell: FC<PercentageCellProps> = ({ percentage }) => {
       fw="normal"
       className="text-mono-200 dark:text-mono-0"
     >
-      {formatPercentage(percentage)}
+      {formatFractional(fractional)}
     </Typography>
   );
 };

apps/tangle-dapp/components/tables/Operators/index.tsx

@@ -21,7 +21,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
 import { PagePath, QueryParamKey } from '../../../types';
-import formatPercentage from '../../../utils/formatPercentage';
+import formatFractional from '../../../utils/formatFractional';
 import getTVLToDisplay from '../../../utils/getTVLToDisplay';
 import { getSortAddressOrIdentityFnc } from '../../../utils/table';
 import { TableStatus } from '../../TableStatus';
@@ -94,7 +94,7 @@ const columns = [
           >
             {typeof value !== 'number'
               ? EMPTY_VALUE_PLACEHOLDER
-              : formatPercentage(value)}
+              : formatFractional(value)}
           </Typography>
         </TableCellWrapper>
       );

apps/tangle-dapp/components/tables/Vaults/index.tsx

@@ -19,7 +19,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
 import { PagePath, QueryParamKey } from '../../../types';
-import formatPercentage from '../../../utils/formatPercentage';
+import formatFractional from '../../../utils/formatFractional';
 import getTVLToDisplay from '../../../utils/getTVLToDisplay';
 import LsTokenIcon from '../../LsTokenIcon';
 import { TableStatus } from '../../TableStatus';
@@ -62,7 +62,7 @@ const columns = [
           >
             {typeof value !== 'number'
               ? EMPTY_VALUE_PLACEHOLDER
-              : formatPercentage(value)}
+              : formatFractional(value)}
           </Typography>
         </TableCellWrapper>
       );

apps/tangle-dapp/constants/liquidStaking/types.ts

@@ -160,7 +160,7 @@ export type LsPool = {
   validators: SubstrateAddress[];
   totalStaked: BN;
   apyPercentage?: number;
-  commissionPercentage?: number;
+  commissionFractional?: number;
   members: Map<SubstrateAddress, PalletAssetsAssetAccount>;
   protocolId: LsProtocolId;
 };

apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx

@@ -104,13 +104,13 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
       // TODO: Decimals.
       cell: (props) => <TokenAmountCell amount={props.getValue()} />,
     }),
-    COLUMN_HELPER.accessor('commissionPercentage', {
+    COLUMN_HELPER.accessor('commissionFractional', {
       header: () => 'Commission',
-      cell: (props) => <PercentageCell percentage={props.getValue()} />,
+      cell: (props) => <PercentageCell fractional={props.getValue()} />,
     }),
     COLUMN_HELPER.accessor('apyPercentage', {
       header: () => 'APY',
-      cell: (props) => <PercentageCell percentage={props.getValue()} />,
+      cell: (props) => <PercentageCell fractional={props.getValue()} />,
     }),
     COLUMN_HELPER.display({
       id: 'actions',

apps/tangle-dapp/data/liquidStaking/adapters/polkadot.tsx

@@ -21,7 +21,7 @@ import assertSubstrateAddress from '../../../utils/assertSubstrateAddress';
 import calculateCommission from '../../../utils/calculateCommission';
 import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
 import formatBn from '../../../utils/formatBn';
-import formatPercentage from '../../../utils/formatPercentage';
+import formatFractional from '../../../utils/formatFractional';
 import { GetTableColumnsFn } from '../adapter';
 import {
   sortCommission,
@@ -185,7 +185,7 @@ const getTableColumns: GetTableColumnsFn<PolkadotValidator> = (
             fw="normal"
             className="text-mono-200 dark:text-mono-0"
           >
-            {formatPercentage(calculateCommission(props.getValue()))}
+            {formatFractional(calculateCommission(props.getValue()))}
           </Typography>
         </div>
       ),

apps/tangle-dapp/data/liquidStaking/useLsPools.ts

@@ -5,7 +5,7 @@ import { LsPool, LsProtocolId } from '../../constants/liquidStaking/types';
 import useNetworkFeatures from '../../hooks/useNetworkFeatures';
 import { NetworkFeature } from '../../types';
 import assertSubstrateAddress from '../../utils/assertSubstrateAddress';
-import permillToPercentage from '../../utils/permillToPercentage';
+import perbillToFractional from '../../utils/perbillToFractional';
 import useLsPoolCompoundApys from './apy/useLsPoolCompoundApys';
 import useLsBondedPools from './useLsBondedPools';
 import useLsPoolMembers from './useLsPoolMembers';
@@ -55,9 +55,9 @@ const useLsPools = (): Map<number, LsPool> | null | Error => {
         return acc.add(account.balance.toBn());
       }, BN_ZERO);
 
-      const commissionPercentage = tanglePool.commission.current.isNone
+      const commissionFractional = tanglePool.commission.current.isNone
         ? undefined
-        : permillToPercentage(tanglePool.commission.current.unwrap()[0]);
+        : perbillToFractional(tanglePool.commission.current.unwrap()[0]);
 
       const validators = poolNominations.get(poolId) ?? [];
       const apyEntry = compoundApys.get(poolId);
@@ -79,7 +79,7 @@ const useLsPools = (): Map<number, LsPool> | null | Error => {
         ownerAddress,
         nominatorAddress,
         bouncerAddress,
-        commissionPercentage,
+        commissionFractional,
         validators,
         totalStaked,
         apyPercentage,

apps/tangle-dapp/data/liquidStaking/useLsValidatorSelectionTableColumns.tsx

@@ -27,7 +27,7 @@ import {
 } from '../../types/liquidStaking';
 import calculateCommission from '../../utils/calculateCommission';
 import formatBn from '../../utils/formatBn';
-import formatPercentage from '../../utils/formatPercentage';
+import formatFractional from '../../utils/formatFractional';
 
 const validatorColumnHelper = createColumnHelper<Validator>();
 const dappColumnHelper = createColumnHelper<Dapp>();
@@ -139,7 +139,7 @@ export const useLsValidatorSelectionTableColumns = (
               fw="normal"
               className="text-mono-200 dark:text-mono-0"
             >
-              {formatPercentage(calculateCommission(props.getValue()))}
+              {formatFractional(calculateCommission(props.getValue()))}
             </Typography>
           </div>
         ),

apps/tangle-dapp/utils/formatFractional.ts

@@ -0,0 +1,14 @@
+const formatFractional = (fractional: number): `${string}%` => {
+  const fractionalString = (fractional * 100).toFixed(2);
+
+  // If the percentage is 0, display '<0.01' instead of '0.00'.
+  // This helps avoid confusing the user to believe that the value is 0.
+  const percentage =
+    fractionalString === '0.00' && fractional !== 0
+      ? '<0.01'
+      : fractionalString;
+
+  return `${percentage}%`;
+};
+
+export default formatFractional;

apps/tangle-dapp/utils/perbillToFractional.ts

@@ -0,0 +1,7 @@
+import { Perbill } from '@polkadot/types/interfaces';
+
+const perbillToFractional = (perbill: Perbill): number => {
+  return perbill.toNumber() / 1_000_000_000;
+};
+
+export default perbillToFractional;