Fix/954: Token & Explorer decimals (#1006)

* fix: token governance percentage displays

* fix: add percentage displays to selected network params

* fix: format

* fix: majority rule and proposal required percentage defaults

* fix: format

apps/explorer/src/app/routes/network-parameters/network-parameters.tsx

@@ -17,6 +17,22 @@ import type {
 } from './__generated__/NetworkParametersQuery';
 import orderBy from 'lodash/orderBy';
 
+const PERCENTAGE_PARAMS = [
+  'governance.proposal.asset.requiredMajority',
+  'governance.proposal.asset.requiredParticipation',
+  'governance.proposal.freeform.requiredMajority',
+  'governance.proposal.freeform.requiredParticipation',
+  'governance.proposal.market.requiredMajority',
+  'governance.proposal.market.requiredParticipation',
+  'governance.proposal.updateMarket.requiredMajority',
+  'governance.proposal.updateMarket.requiredMajorityLP',
+  'governance.proposal.updateMarket.requiredParticipation',
+  'governance.proposal.updateMarket.requiredParticipationLP',
+  'governance.proposal.updateNetParam.requiredMajority',
+  'governance.proposal.updateNetParam.requiredParticipation',
+  'validators.vote.required',
+];
+
 const BIG_NUMBER_PARAMS = [
   'spam.protection.delegation.min.tokens',
   'validators.delegation.minAmount',
@@ -37,11 +53,13 @@ const BIG_NUMBER_PARAMS = [
   'governance.proposal.market.minVoterBalance',
 ];
 
-export const renderRow = ({
-  key,
-  value,
-}: NetworkParametersQuery_networkParameters) => {
+export const NetworkParameterRow = ({
+  row: { key, value },
+}: {
+  row: NetworkParametersQuery_networkParameters;
+}) => {
   const isSyntaxRow = isJsonObject(value);
+
   return (
     <KeyValueTableRow
       key={key}
@@ -58,6 +76,8 @@ export const renderRow = ({
         value
       ) : BIG_NUMBER_PARAMS.includes(key) ? (
         addDecimalsFormatNumber(Number(value), 18)
+      ) : PERCENTAGE_PARAMS.includes(key) ? (
+        `${formatNumber(Number(value) * 100, 0)}%`
       ) : (
         formatNumber(Number(value), 4)
       )}
@@ -111,7 +131,9 @@ export const NetworkParametersTable = ({
         );
         return (
           <KeyValueTable data-testid="parameters">
-            {(ascParams || []).map((row) => renderRow(row))}
+            {(ascParams || []).map((row) => (
+              <NetworkParameterRow key={row.key} row={row} />
+            ))}
           </KeyValueTable>
         );
       }}

apps/token/src/routes/governance/components/vote-details/vote-progress.tsx

@@ -8,7 +8,7 @@ export const VoteProgress = ({
   progress: BigNumber;
 }) => {
   return (
-    <div className="w-full h-4 relative">
+    <div className="w-full h-4 relative bg-black-50">
       <div
         data-testid="vote-progress-indicator"
         className="absolute top-[-5px] w-[1px] h-16 bg-white z-[1]"

apps/token/src/routes/governance/hooks/use-vote-information.ts

@@ -30,8 +30,8 @@ const useProposalNetworkParams = ({
   ]);
   if (loading || !data) {
     return {
-      requiredMajority: new BigNumber(100),
-      requiredParticipation: new BigNumber(100),
+      requiredMajority: new BigNumber(1),
+      requiredParticipation: new BigNumber(1),
     };
   }
 
@@ -94,7 +94,9 @@ export const useVoteInformation = ({
 
   const requiredMajorityPercentage = React.useMemo(
     () =>
-      requiredMajority ? new BigNumber(requiredMajority) : new BigNumber(100),
+      requiredMajority
+        ? new BigNumber(requiredMajority).times(100)
+        : new BigNumber(100),
     [requiredMajority]
   );
 
@@ -110,7 +112,7 @@ export const useVoteInformation = ({
       },
       new BigNumber(0)
     );
-    return new BigNumber(addDecimal(new BigNumber(totalNoVotes), 18));
+    return new BigNumber(addDecimal(totalNoVotes, 18));
   }, [proposal.votes.no.votes]);
 
   const yesTokens = React.useMemo(() => {
@@ -125,7 +127,7 @@ export const useVoteInformation = ({
       },
       new BigNumber(0)
     );
-    return new BigNumber(addDecimal(new BigNumber(totalYesVotes), 18));
+    return new BigNumber(addDecimal(totalYesVotes, 18));
   }, [proposal.votes.yes.votes]);
 
   const totalTokensVoted = React.useMemo(
@@ -152,8 +154,11 @@ export const useVoteInformation = ({
   }, [requiredParticipation, totalTokensVoted, totalSupply]);
 
   const majorityMet = React.useMemo(() => {
-    return totalTokensVoted.isGreaterThanOrEqualTo(requiredMajority);
-  }, [requiredMajority, totalTokensVoted]);
+    return (
+      yesPercentage.isGreaterThanOrEqualTo(requiredMajorityPercentage) ||
+      noPercentage.isGreaterThanOrEqualTo(requiredMajorityPercentage)
+    );
+  }, [yesPercentage, noPercentage, requiredMajorityPercentage]);
 
   const totalTokensPercentage = React.useMemo(() => {
     return totalTokensVoted.multipliedBy(100).dividedBy(totalSupply);