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 livepeer#236 and ensure the explorer is future-proof.
rickstaa · Dec 3, 2023 · eabdd52 · eabdd52
1 parent 7572353
commit eabdd52
Show file tree

Hide file tree

Showing 19 changed files with 126 additions and 93 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# IDE's
+.vscode
+*.code-workspace
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,21 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.printWidth": 80,
-  "editor.formatOnSaveMode": "modifications"
+  "editor.formatOnSaveMode": "modifications",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#db11d5",
+    "activityBar.background": "#db11d5",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#c9cf10",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#db11d5",
+    "tab.activeBorder": "#db11d5",
+    "titleBar.activeBackground": "#ac0da7",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#ac0da799",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#ac0da7"
 }
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>