refactor: migrate numeral library to numbro

This commit deprecates the use of the unmaintained [numeral-js](https://github.com/adamwdraper/Numeral-js) library and replaces it with the [numbro](https://github.com/BenjaminVanRyseghem/numbro). This was done to fix #236 and ensure the explorer is future-proof.
livepeer · Dec 3, 2023 · 039d3a2 · 039d3a2
1 parent 7572353
commit 039d3a2
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 93 deletions.
diff --git a/components/DelegatingView/index.tsx b/components/DelegatingView/index.tsx
@@ -14,7 +14,7 @@ import {
 import { useBondingManagerAddress } from "hooks/useContracts";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import numeral from "numeral";
+import numbro from "numbro";
 import { useMemo } from "react";
 import Masonry from "react-masonry-css";
 import { Address, useContractWrite, usePrepareContractWrite } from "wagmi";
@@ -187,7 +187,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   fontSize: 26,
                 }}
               >
-                {`${numeral(pendingStake).format("0.00a")} LPT`}
+                {`${numbro(pendingStake).format("0.00a")} LPT`}
               </Box>
             ) : null
           }
@@ -222,7 +222,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 <Box>
                   {unbonded > 0 ? (
                     <Text size="2" css={{ fontWeight: 600, color: "$red11" }}>
-                      {numeral(-unbonded).format("+0.00a")} LPT
+                      {numbro(-unbonded).format("+0.00a")} LPT
                     </Text>
                   ) : (
                     <Text size="2" css={{ fontWeight: 600 }}>
@@ -251,7 +251,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   </ExplorerTooltip>
                 </Flex>
                 <Text size="2" css={{ fontWeight: 600, color: "$green11" }}>
-                  {numeral(Math.abs(rewards)).format("+0.00a")} LPT
+                  {numbro(Math.abs(rewards)).format("+0.00a")} LPT
                 </Text>
               </Flex>
             </Box>
@@ -268,7 +268,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   fontSize: 26,
                 }}
               >
-                {numeral(pendingFees).format("0.000")} ETH
+                {numbro(pendingFees).format("0.000")} ETH
               </Box>
             ) : null
           }
@@ -301,7 +301,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   </ExplorerTooltip>
                 </Flex>
                 <Text size="2" css={{ fontWeight: 600 }}>
-                  {numeral(lifetimeEarnings || 0).format("0.000a")} ETH
+                  {numbro(lifetimeEarnings || 0).format("0.000a")} ETH
                 </Text>
               </Flex>
               <Flex
@@ -330,7 +330,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                   </ExplorerTooltip>
                 </Flex>
                 <Text size="2" css={{ fontWeight: 600 }}>
-                  {numeral(delegator?.withdrawnFees || 0).format("0.000a")} ETH
+                  {numbro(delegator?.withdrawnFees || 0).format("0.000a")} ETH
                 </Text>
               </Flex>
               {isMyAccount && !withdrawButtonDisabled && delegator?.id && (
@@ -374,7 +374,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
             }
             value={
               <Box>
-                {numeral(
+                {numbro(
                   totalActiveStake === 0
                     ? 0
                     : delegator.delegate.id === delegator.id
@@ -396,15 +396,15 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 >
                   <Box>
                     Account (
-                    {numeral(
+                    {numbro(
                       totalActiveStake === 0
                         ? 0
                         : pendingStake / totalActiveStake
                     ).format("0.00%")}
                     )
                   </Box>
                   <Text size="2" css={{ fontWeight: 600 }}>
-                    {numeral(pendingStake).format("0.00a")} LPT
+                    {numbro(pendingStake).format("0.00a")} LPT
                   </Text>
                 </Flex>
                 <Flex
@@ -416,7 +416,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 >
                   <Box>
                     Orchestrator (
-                    {numeral(
+                    {numbro(
                       totalActiveStake === 0
                         ? 0
                         : Math.abs(+delegator.delegate.totalStake) /
@@ -425,7 +425,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                     )
                   </Box>
                   <Text size="2" css={{ fontWeight: 600 }}>
-                    {numeral(Math.abs(+delegator.delegate.totalStake)).format(
+                    {numbro(Math.abs(+delegator.delegate.totalStake)).format(
                       "0.00a"
                     )}{" "}
                     LPT

diff --git a/components/DelegatingWidget/ProjectionBox.tsx b/components/DelegatingWidget/ProjectionBox.tsx
@@ -2,14 +2,14 @@ import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import { Box, Card, Flex, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { useExplorerStore } from "hooks";
-import numeral from "numeral";
+import numbro from "numbro";
 import { useMemo } from "react";
 
 const ProjectionBox = ({ action }) => {
   const { yieldResults } = useExplorerStore();
 
   const formattedPrinciple = useMemo(
-    () => numeral(Number(yieldResults?.principle) || 0).format("0a"),
+    () => numbro(Number(yieldResults?.principle) || 0).format("0a"),
     [yieldResults]
   );
 
@@ -65,7 +65,7 @@ const ProjectionBox = ({ action }) => {
             </Box>
             {action === "delegate" && (
               <Box css={{ fontFamily: "$monospace", color: "$neutral11" }}>
-                {numeral(
+                {numbro(
                   yieldResults.principle
                     ? (yieldResults.roiFeesLpt + yieldResults.roiRewards) /
                         +yieldResults.principle
@@ -96,7 +96,7 @@ const ProjectionBox = ({ action }) => {
               </ExplorerTooltip>
             </Flex>
             <Text css={{ fontSize: "$2", fontFamily: "$monospace" }}>
-              {numeral(yieldResults.roiRewards).format("0.0")} LPT
+              {numbro(yieldResults.roiRewards).format("0.0")} LPT
             </Text>
           </Flex>
           <Flex css={{ justifyContent: "space-between", alignItems: "center" }}>
@@ -120,7 +120,7 @@ const ProjectionBox = ({ action }) => {
               </ExplorerTooltip>
             </Flex>
             <Text css={{ fontSize: "$2", fontFamily: "$monospace" }}>
-              {numeral(yieldResults.roiFees).format("0.000")} ETH
+              {numbro(yieldResults.roiFees).format("0.000")} ETH
             </Text>
           </Flex>
         </Box>

diff --git a/components/DelegatingWidget/index.tsx b/components/DelegatingWidget/index.tsx
@@ -2,7 +2,7 @@ import { EnsIdentity } from "@lib/api/types/get-ens";
 import { Box, Card, Flex, Text } from "@livepeer/design-system";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
 import { useEnsData, useExplorerStore } from "hooks";
-import numeral from "numeral";
+import numbro from "numbro";
 import { useMemo, useState } from "react";
 import ArrowDown from "../../public/img/arrow-down.svg";
 import Footer from "./Footer";
@@ -106,7 +106,7 @@ const Index = ({
                   <Text variant="neutral" css={{ textAlign: "center" }}>
                     {`This transaction will move your current delegated stake of `}
                     <Box as="span" css={{ fontWeight: 700 }}>
-                      {numeral(delegator?.bondedAmount || 0).format("0,0.0")}
+                      {numbro(delegator?.bondedAmount || 0).format("0,0.0")}
                       {` LPT`}
                     </Box>
                     {` from `}

diff --git a/components/ExplorerChart/index.tsx b/components/ExplorerChart/index.tsx
@@ -2,7 +2,7 @@ import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import { Box, Button, Flex, Skeleton, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import dayjs from "dayjs";
-import numeral from "numeral";
+import numbro from "numbro";
 import React, {
   useCallback,
   useEffect,
@@ -87,7 +87,7 @@ const ExplorerChart = ({
   );
   const formatSubtitle = useCallback(
     (value: number) =>
-      `${numeral(value).format(
+      `${numbro(value).format(
         unit === "usd"
           ? "$0,0"
           : unit === "eth"
@@ -107,7 +107,7 @@ const ExplorerChart = ({
   const defaultPercentChange = useMemo<string>(
     () =>
       basePercentChange !== 0
-        ? numeral(basePercentChange / 100).format("+0.00%")
+        ? numbro(basePercentChange / 100).format("+0.00%")
         : "",
     [basePercentChange]
   );
@@ -147,7 +147,7 @@ const ExplorerChart = ({
           fontWeight={400}
           fontSize="13px"
         >
-          {numeral(payload.value).format(
+          {numbro(payload.value).format(
             unit === "usd"
               ? "$0a"
               : unit === "eth"
@@ -255,7 +255,7 @@ const ExplorerChart = ({
                     ml: "$2",
                     fontSize: "$3",
                     color:
-                      (numeral(barSelected.percentChange).value() ?? 0) < 0
+                      (numbro(barSelected.percentChange).value() ?? 0) < 0
                         ? "#ff0022"
                         : "#00EB88",
                   }}

diff --git a/components/HistoryView/index.tsx b/components/HistoryView/index.tsx
@@ -11,7 +11,7 @@ import { useTransactionsQuery } from "apollo";
 import dayjs from "dayjs";
 import { CHAIN_INFO, DEFAULT_CHAIN_ID } from "lib/chains";
 import { useRouter } from "next/router";
-import numeral from "numeral";
+import numbro from "numbro";
 import { useMemo } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 
@@ -213,7 +213,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                +{numeral(event.additionalAmount).format("0.0a")}
+                +{numbro(event.additionalAmount).format("0.0a")}
               </Box>{" "}
               LPT
             </Box>
@@ -329,7 +329,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                +{numeral(event.amount).format("0.0a")}
+                +{numbro(event.amount).format("0.0a")}
               </Box>{" "}
               LPT
             </Box>
@@ -389,7 +389,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                -{numeral(event.amount).format("0.0a")}
+                -{numbro(event.amount).format("0.0a")}
               </Box>{" "}
               LPT
             </Box>
@@ -448,7 +448,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                +{numeral(event.rewardTokens).format("0.00a")}
+                +{numbro(event.rewardTokens).format("0.00a")}
               </Box>{" "}
               LPT
             </Box>
@@ -570,7 +570,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                {numeral(event.amount).format("0.00a")}
+                {numbro(event.amount).format("0.00a")}
               </Box>{" "}
               LPT
             </Box>
@@ -627,7 +627,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                {numeral(event.amount).format("0.000a")}
+                {numbro(event.amount).format("0.000a")}
               </Box>{" "}
               ETH
             </Box>
@@ -684,7 +684,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                +{numeral(event.faceValue).format("0.000a")}
+                +{numbro(event.faceValue).format("0.000a")}
               </Box>{" "}
               ETH
             </Box>
@@ -741,7 +741,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                +{numeral(event.amount).format("0.00a")}
+                +{numbro(event.amount).format("0.00a")}
               </Box>{" "}
               ETH
             </Box>
@@ -803,7 +803,7 @@ function renderSwitch(event: any, i: number) {
             <Box css={{ fontSize: "$3", ml: "$4" }}>
               {" "}
               <Box as="span" css={{ fontWeight: 600 }}>
-                +{numeral(event.amount).format("0.00a")}
+                +{numbro(event.amount).format("0.00a")}
               </Box>{" "}
               ETH
             </Box>

diff --git a/components/OrchestratingView/index.tsx b/components/OrchestratingView/index.tsx
@@ -2,7 +2,7 @@ import Stat from "@components/Stat";
 import { Box, Flex } from "@livepeer/design-system";
 import { CheckIcon, Cross1Icon } from "@modulz/radix-icons";
 import dayjs from "dayjs";
-import numeral from "numeral";
+import numbro from "numbro";
 import Masonry from "react-masonry-css";
 
 import { AccountQueryResult } from "apollo";
@@ -84,7 +84,7 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           }
           value={
             transcoder
-              ? `${numeral(transcoder?.totalStake || 0).format("0.00a")} LPT`
+              ? `${numbro(transcoder?.totalStake || 0).format("0.00a")} LPT`
               : null
           }
         />
@@ -100,7 +100,7 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           tooltip={`The transcoding score for the orchestrator's best operational region, ${maxScore.region}, in the past 24 hours. Note: this may be inaccurate, depending on the reliability of the testing infrastructure.`}
           value={
             scores
-              ? `${numeral(maxScore.score).divide(100).format("0.0%")} (${
+              ? `${numbro(maxScore.score).divide(100).format("0.0%")} (${
                   maxScore.region
                 })`
               : null
@@ -122,7 +122,7 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           tooltip={
             "The total amount of fees this orchestrator has earned (since the migration to Arbitrum One)."
           }
-          value={`${numeral(transcoder?.totalVolumeETH || 0).format(
+          value={`${numbro(transcoder?.totalVolumeETH || 0).format(
             "0.00a"
           )} ETH`}
         />
@@ -132,7 +132,7 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           tooltip="The most recent price for transcoding which the orchestrator is currently advertising off-chain to broadcasters. This may be different from on-chain pricing."
           value={
             scores
-              ? `${numeral(
+              ? `${numbro(
                   (scores?.pricePerPixel || 0) <= 0 ? 0 : scores.pricePerPixel
                 ).format("0,0")} WEI`
               : null
@@ -144,7 +144,7 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           tooltip={
             "The number of delegators which have delegated stake to this orchestrator."
           }
-          value={`${numeral(transcoder?.delegators?.length || 0).format(
+          value={`${numbro(transcoder?.delegators?.length || 0).format(
             "0,0"
           )}`}
         /> */}
@@ -154,7 +154,7 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           tooltip={
             "The percent of the transcoding fees which are kept by the orchestrator, with the remainder distributed to its delegators by percent stake."
           }
-          value={numeral(1 - (+(transcoder?.feeShare || 0)) / 1000000).format(
+          value={numbro(1 - (+(transcoder?.feeShare || 0)) / 1000000).format(
             "0%"
           )}
         />
@@ -164,9 +164,9 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
           tooltip={
             "The percent of the inflationary reward fees which are kept by the orchestrator, with the remainder distributed to its delegators by percent stake."
           }
-          value={numeral(transcoder?.rewardCut || 0)
+          value={numbro(transcoder?.rewardCut || 0)
             .divide(1000000)
-            .format("0%")}
+            .format({mantissa: 0, output: "percent"})}
         />
         <Stat
           className="masonry-grid_item"