feat: add a unified formatting standard

components/Account/index.tsx

@@ -1,5 +1,5 @@
-import { formatAddress } from "@lib/utils";
 import { Box, Flex, Link as A } from "@livepeer/design-system";
+import { formatAddress } from "@utils/web3";
 import { useAccountAddress, useEnsData } from "hooks";
 import Link from "next/link";
 import { useRouter } from "next/router";

components/AccountCell/index.tsx

@@ -1,5 +1,6 @@
-import { formatAddress, textTruncate } from "@lib/utils";
+import { textTruncate } from "@lib/utils";
 import { Box, Flex } from "@livepeer/design-system";
+import { formatAddress } from "@utils/web3";
 import { useEnsData } from "hooks";
 import { QRCodeCanvas } from "qrcode.react";
 

components/Claim/index.tsx

@@ -1,9 +1,9 @@
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { l2Migrator } from "@lib/api/abis/bridge/L2Migrator";
 import { getL2MigratorAddress } from "@lib/api/contracts";
-import { formatAddress } from "@lib/utils";
 import { Box, Button, Container, Flex, Text } from "@livepeer/design-system";
 import { ArrowTopRightIcon } from "@modulz/radix-icons";
+import { formatAddress } from "@utils/web3";
 import { constants, ethers } from "ethers";
 import { useAccountAddress, useL1DelegatorData } from "hooks";
 import { useHandleTransaction } from "hooks/useHandleTransaction";

components/DelegatingView/index.tsx

@@ -1,9 +1,10 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import Stat from "@components/Stat";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { checkAddressEquality, formatAddress } from "@lib/utils";
 import { Box, Button, Flex, Link as A, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
+import { formatETH, formatLPT, formatPercent } from "@utils/numberFormatters";
+import { checkAddressEquality, formatAddress } from "@utils/web3";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
 import {
   useAccountAddress,
@@ -14,7 +15,6 @@ import { useBondingManagerAddress } from "hooks/useContracts";
 import { useHandleTransaction } from "hooks/useHandleTransaction";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import numbro from "numbro";
 import { useMemo } from "react";
 import Masonry from "react-masonry-css";
 import { Address } from "viem";
@@ -104,6 +104,22 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
     [pendingFees]
   );
 
+  const networkEquity = (() => {
+    if (!totalActiveStake) {
+      return 0;
+    }
+
+    // If self-delegating, include total delegated stake + pending stake
+    if (delegator?.delegate?.id === delegator?.id) {
+      const delegateTotalStake = Math.abs(
+        +(delegator?.delegate?.totalStake ?? 0)
+      );
+      return (delegateTotalStake + pendingStake) / totalActiveStake;
+    }
+
+    return pendingStake / totalActiveStake;
+  })();
+
   if (!delegator?.bondedAmount) {
     if (isMyAccount) {
       return (
@@ -185,11 +201,9 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   fontSize: 26,
                 }}
               >
-                {`${numbro(pendingStake).format(
-                  pendingStake > 0 && pendingStake < 0.01
-                    ? { mantissa: 4, trimMantissa: true }
-                    : { mantissa: 2, average: true, lowPrecision: false }
-                )} LPT`}
+                {`${formatLPT(pendingStake, {
+                  precision: pendingStake > 0 && pendingStake < 0.01 ? 4 : 2,
+                })}`}
               </Box>
             ) : null
           }
@@ -224,12 +238,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 <Box>
                   {unbonded > 0 ? (
                     <Text size="2" css={{ fontWeight: 600, color: "$red11" }}>
-                      {numbro(-unbonded).format({
-                        mantissa: 2,
-                        average: true,
-                        forceSign: true,
-                      })}{" "}
-                      LPT
+                      {formatLPT(-unbonded, { forceSign: true, precision: 2 })}
                     </Text>
                   ) : (
                     <Text size="2" css={{ fontWeight: 600 }}>
@@ -258,12 +267,10 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   </ExplorerTooltip>
                 </Flex>
                 <Text size="2" css={{ fontWeight: 600, color: "$green11" }}>
-                  {numbro(Math.abs(rewards)).format({
-                    mantissa: 2,
-                    average: true,
+                  {formatLPT(Math.abs(rewards), {
                     forceSign: true,
-                  })}{" "}
-                  LPT
+                    precision: 2,
+                  })}
                 </Text>
               </Flex>
             </Box>
@@ -280,10 +287,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   fontSize: 26,
                 }}
               >
-                {numbro(pendingFees).format({
-                  mantissa: 3,
-                })}{" "}
-                ETH
+                {formatETH(pendingFees, { precision: 3 })}
               </Box>
             ) : null
           }
@@ -316,11 +320,10 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   </ExplorerTooltip>
                 </Flex>
                 <Text size="2" css={{ fontWeight: 600 }}>
-                  {numbro(lifetimeEarnings || 0).format({
-                    mantissa: 3,
-                    average: true,
-                  })}{" "}
-                  ETH
+                  {formatETH(lifetimeEarnings || 0, {
+                    abbreviate: true,
+                    precision: 3,
+                  })}
                 </Text>
               </Flex>
               <Flex
@@ -349,11 +352,10 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   </ExplorerTooltip>
                 </Flex>
                 <Text size="2" css={{ fontWeight: 600 }}>
-                  {numbro(delegator?.withdrawnFees || 0).format({
-                    mantissa: 3,
-                    average: true,
-                  })}{" "}
-                  ETH
+                  {formatETH(delegator?.withdrawnFees, {
+                    abbreviate: true,
+                    precision: 3,
+                  })}
                 </Text>
               </Flex>
               {isMyAccount && !withdrawButtonDisabled && delegator?.id && (
@@ -396,22 +398,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 </ExplorerTooltip>
               </Flex>
             }
-            value={
-              <Box>
-                {numbro(
-                  totalActiveStake === 0
-                    ? 0
-                    : delegator.delegate.id === delegator.id
-                    ? (Math.abs(+delegator.delegate.totalStake) +
-                        pendingStake) /
-                      totalActiveStake
-                    : pendingStake / totalActiveStake
-                ).format({
-                  output: "percent",
-                  mantissa: 3,
-                })}
-              </Box>
-            }
+            value={<Box>{formatPercent(networkEquity, { precision: 3 })}</Box>}
             meta={
               <Box css={{ marginTop: "$4" }}>
                 <Flex
@@ -423,22 +410,16 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 >
                   <Box>
                     Account (
-                    {numbro(
+                    {formatPercent(
                       totalActiveStake === 0
                         ? 0
-                        : pendingStake / totalActiveStake
-                    ).format({
-                      output: "percent",
-                      mantissa: 2,
-                    })}
+                        : pendingStake / totalActiveStake,
+                      { precision: 2 }
+                    )}
                     )
                   </Box>
                   <Text size="2" css={{ fontWeight: 600 }}>
-                    {numbro(pendingStake).format({
-                      mantissa: 2,
-                      average: true,
-                    })}{" "}
-                    LPT
+                    {formatLPT(pendingStake, { precision: 2 })}
                   </Text>
                 </Flex>
                 <Flex
@@ -450,23 +431,20 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 >
                   <Box>
                     Orchestrator (
-                    {numbro(
+                    {formatPercent(
                       totalActiveStake === 0
                         ? 0
                         : Math.abs(+delegator.delegate.totalStake) /
-                            totalActiveStake
-                    ).format({
-                      output: "percent",
-                      mantissa: 2,
-                    })}
+                            totalActiveStake,
+                      { precision: 2 }
+                    )}
                     )
                   </Box>
                   <Text size="2" css={{ fontWeight: 600 }}>
-                    {numbro(Math.abs(+delegator.delegate.totalStake)).format({
-                      mantissa: 2,
-                      average: true,
-                    })}{" "}
-                    LPT
+                    {formatLPT(Math.abs(+delegator.delegate.totalStake), {
+                      precision: 2,
+                      abbreviate: true,
+                    })}
                   </Text>
                 </Flex>
               </Box>

components/DelegatingWidget/Header.tsx

@@ -1,6 +1,6 @@
 import { EnsIdentity } from "@lib/api/types/get-ens";
-import { formatAddress } from "@lib/utils";
 import { Box, Flex, Heading } from "@livepeer/design-system";
+import { formatAddress } from "@utils/web3";
 import { QRCodeCanvas } from "qrcode.react";
 
 import { TranscoderOrDelegateType } from ".";

components/DelegatingWidget/Input.tsx

@@ -1,5 +1,9 @@
 import { calculateROI } from "@lib/roi";
 import { Box } from "@livepeer/design-system";
+import {
+  PERCENTAGE_PRECISION_BILLION,
+  PERCENTAGE_PRECISION_MILLION,
+} from "@utils/web3";
 import { useExplorerStore } from "hooks";
 import { useEffect, useMemo } from "react";
 import { useWindowSize } from "react-use";
@@ -36,19 +40,20 @@ const Input = ({
         },
         feeParams: {
           ninetyDayVolumeETH: Number(transcoder.ninetyDayVolumeETH),
-          feeShare: Number(transcoder.feeShare) / 1000000,
+          feeShare: Number(transcoder.feeShare) / PERCENTAGE_PRECISION_MILLION,
           lptPriceEth: Number(protocol.lptPriceEth),
         },
         rewardParams: {
-          inflation: Number(protocol.inflation) / 1000000000,
+          inflation: Number(protocol.inflation) / PERCENTAGE_PRECISION_BILLION,
           inflationChangePerRound:
-            Number(protocol.inflationChange) / 1000000000,
+            Number(protocol.inflationChange) / PERCENTAGE_PRECISION_BILLION,
           totalSupply: Number(protocol.totalSupply),
           totalActiveStake: Number(protocol.totalActiveStake),
           roundLength: Number(protocol.roundLength),
 
           rewardCallRatio,
-          rewardCut: Number(transcoder.rewardCut) / 1000000,
+          rewardCut:
+            Number(transcoder.rewardCut) / PERCENTAGE_PRECISION_MILLION,
           treasuryRewardCut: treasury.treasuryRewardCutRate,
         },
       }),

components/DelegatingWidget/InputBox.tsx

@@ -1,8 +1,8 @@
 import { TranscoderOrDelegateType } from "@components/DelegatingWidget";
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import { EnsIdentity } from "@lib/api/types/get-ens";
-import { fromWei } from "@lib/utils";
 import { Box, Card, Flex } from "@livepeer/design-system";
+import { fromWei } from "@utils/web3";
 import { AccountQueryResult } from "apollo";
 import {
   StakingAction,

components/DelegatingWidget/ProjectionBox.tsx

@@ -1,21 +1,20 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import { Box, Card, Flex, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
+import { formatETH, formatLPT, formatPercent } from "@utils/numberFormatters";
 import { useExplorerStore } from "hooks";
-import numbro from "numbro";
-import { useMemo } from "react";
 
 const ProjectionBox = ({ action }) => {
   const { yieldResults } = useExplorerStore();
 
-  const formattedPrinciple = useMemo(
-    () =>
-      numbro(Number(yieldResults?.principle) || 0).format({
-        mantissa: 0,
-        average: true,
-      }),
-    [yieldResults]
-  );
+  const formattedPrinciple = formatLPT(Number(yieldResults?.principle), {
+    precision: 0,
+  });
+
+  const roi = yieldResults.principle
+    ? (yieldResults.roiFeesLpt + yieldResults.roiRewards) /
+      +yieldResults.principle
+    : 0;
 
   return (
     <Card
@@ -76,15 +75,7 @@ const ProjectionBox = ({ action }) => {
             </Box>
             {action === "delegate" && (
               <Box css={{ fontFamily: "$monospace", color: "$neutral11" }}>
-                {numbro(
-                  yieldResults.principle
-                    ? (yieldResults.roiFeesLpt + yieldResults.roiRewards) /
-                        +yieldResults.principle
-                    : 0
-                ).format({
-                  mantissa: 1,
-                  output: "percent",
-                })}
+                {formatPercent(roi, { precision: 1 })}
               </Box>
             )}
           </Flex>
@@ -110,10 +101,10 @@ const ProjectionBox = ({ action }) => {
               </ExplorerTooltip>
             </Flex>
             <Text css={{ fontSize: "$2", fontFamily: "$monospace" }}>
-              {numbro(yieldResults.roiRewards).format({
-                mantissa: 1,
-              })}{" "}
-              LPT
+              {formatLPT(yieldResults.roiRewards, {
+                precision: 1,
+                abbreviate: false,
+              })}
             </Text>
           </Flex>
           <Flex css={{ justifyContent: "space-between", alignItems: "center" }}>
@@ -137,10 +128,7 @@ const ProjectionBox = ({ action }) => {
               </ExplorerTooltip>
             </Flex>
             <Text css={{ fontSize: "$2", fontFamily: "$monospace" }}>
-              {numbro(yieldResults.roiFees).format({
-                mantissa: 3,
-              })}{" "}
-              ETH
+              {formatETH(yieldResults.roiFees, { precision: 3 })}
             </Text>
           </Flex>
         </Box>