diff --git a/.vscode/settings.json b/.vscode/settings.json index 1dce9a6..0f627c9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "typescript.tsdk": "node_modules/typescript/lib", - "prettier.printWidth": 80, - "editor.formatOnSaveMode": "modifications" -} + "typescript.tsdk": "node_modules/typescript/lib", + "prettier.printWidth": 80, + "editor.formatOnSaveMode": "modifications" + } diff --git a/components/DelegatingView/index.tsx b/components/DelegatingView/index.tsx index 28db64d..a4b268e 100644 --- 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`} ) : null } @@ -222,7 +222,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { {unbonded > 0 ? ( - {numeral(-unbonded).format("+0.00a")} LPT + {numbro(-unbonded).format("+0.00a")} LPT ) : ( @@ -251,7 +251,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { - {numeral(Math.abs(rewards)).format("+0.00a")} LPT + {numbro(Math.abs(rewards)).format("+0.00a")} LPT @@ -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 ) : null } @@ -301,7 +301,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { - {numeral(lifetimeEarnings || 0).format("0.000a")} ETH + {numbro(lifetimeEarnings || 0).format("0.000a")} ETH { - {numeral(delegator?.withdrawnFees || 0).format("0.000a")} ETH + {numbro(delegator?.withdrawnFees || 0).format("0.000a")} ETH {isMyAccount && !withdrawButtonDisabled && delegator?.id && ( @@ -374,7 +374,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { } value={ - {numeral( + {numbro( totalActiveStake === 0 ? 0 : delegator.delegate.id === delegator.id @@ -396,7 +396,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { > Account ( - {numeral( + {numbro( totalActiveStake === 0 ? 0 : pendingStake / totalActiveStake @@ -404,7 +404,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { ) - {numeral(pendingStake).format("0.00a")} LPT + {numbro(pendingStake).format("0.00a")} LPT { > Orchestrator ( - {numeral( + {numbro( totalActiveStake === 0 ? 0 : Math.abs(+delegator.delegate.totalStake) / @@ -425,7 +425,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => { ) - {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 index 9105318..d088e6f 100644 --- 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 }) => { {action === "delegate" && ( - {numeral( + {numbro( yieldResults.principle ? (yieldResults.roiFeesLpt + yieldResults.roiRewards) / +yieldResults.principle @@ -96,7 +96,7 @@ const ProjectionBox = ({ action }) => { - {numeral(yieldResults.roiRewards).format("0.0")} LPT + {numbro(yieldResults.roiRewards).format("0.0")} LPT @@ -120,7 +120,7 @@ const ProjectionBox = ({ action }) => { - {numeral(yieldResults.roiFees).format("0.000")} ETH + {numbro(yieldResults.roiFees).format("0.000")} ETH diff --git a/components/DelegatingWidget/index.tsx b/components/DelegatingWidget/index.tsx index ed93774..0ba7944 100644 --- 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 = ({ {`This transaction will move your current delegated stake of `} - {numeral(delegator?.bondedAmount || 0).format("0,0.0")} + {numbro(delegator?.bondedAmount || 0).format("0,0.0")} {` LPT`} {` from `} diff --git a/components/ExplorerChart/index.tsx b/components/ExplorerChart/index.tsx index d0be4bc..8c5fae2 100644 --- 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( () => 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 index 6217e06..5534553 100644 --- 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) { {" "} - +{numeral(event.additionalAmount).format("0.0a")} + +{numbro(event.additionalAmount).format("0.0a")} {" "} LPT @@ -329,7 +329,7 @@ function renderSwitch(event: any, i: number) { {" "} - +{numeral(event.amount).format("0.0a")} + +{numbro(event.amount).format("0.0a")} {" "} LPT @@ -389,7 +389,7 @@ function renderSwitch(event: any, i: number) { {" "} - -{numeral(event.amount).format("0.0a")} + -{numbro(event.amount).format("0.0a")} {" "} LPT @@ -448,7 +448,7 @@ function renderSwitch(event: any, i: number) { {" "} - +{numeral(event.rewardTokens).format("0.00a")} + +{numbro(event.rewardTokens).format("0.00a")} {" "} LPT @@ -570,7 +570,7 @@ function renderSwitch(event: any, i: number) { {" "} - {numeral(event.amount).format("0.00a")} + {numbro(event.amount).format("0.00a")} {" "} LPT @@ -627,7 +627,7 @@ function renderSwitch(event: any, i: number) { {" "} - {numeral(event.amount).format("0.000a")} + {numbro(event.amount).format("0.000a")} {" "} ETH @@ -684,7 +684,7 @@ function renderSwitch(event: any, i: number) { {" "} - +{numeral(event.faceValue).format("0.000a")} + +{numbro(event.faceValue).format("0.000a")} {" "} ETH @@ -741,7 +741,7 @@ function renderSwitch(event: any, i: number) { {" "} - +{numeral(event.amount).format("0.00a")} + +{numbro(event.amount).format("0.00a")} {" "} ETH @@ -803,7 +803,7 @@ function renderSwitch(event: any, i: number) { {" "} - +{numeral(event.amount).format("0.00a")} + +{numbro(event.amount).format("0.00a")} {" "} ETH diff --git a/components/OrchestratingView/index.tsx b/components/OrchestratingView/index.tsx index f7e89ac..148f442 100644 --- 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"})} /> change === "none" - ? `Fixed at ${numeral( + ? `Fixed at ${numbro( Number(protocolData?.inflation) / 1000000000 ).format("0.000%")}` : change === "positive" - ? `+${numeral( + ? `+${numbro( Number(protocolData?.inflationChange) / 1000000000 ).format("0.00000%")} per round` - : `-${numeral( + : `-${numbro( Number(protocolData?.inflationChange) / 1000000000 ).format("0.00000%")} per round`, [protocolData?.inflation, protocolData?.inflationChange] @@ -108,7 +108,7 @@ const OrchestratorList = ({ [protocolData] ); const formattedPrinciple = useMemo( - () => numeral(Number(principle) || 150).format("0a"), + () => numbro(Number(principle) || 150).format("0a"), [principle] ); @@ -351,23 +351,23 @@ const OrchestratorList = ({ ); const feeCut = useMemo( () => - numeral( + numbro( 1 - Number(row.values.earnings.feeShare) / 1000000 - ).format("0%"), + ).format({mantissa:0, output: "percent"}), [row.values.earnings.feeShare] ); const rewardCut = useMemo( () => - numeral(Number(row.values.earnings.rewardCut) / 1000000).format( + numbro(Number(row.values.earnings.rewardCut) / 1000000).format( "0%" ), [row.values.earnings.rewardCut] ); const rewardCalls = useMemo( () => - `${numeral(row.values.earnings.rewardCalls) + `${numbro(row.values.earnings.rewardCalls) .divide(row.values.earnings.rewardCallLength) - .format("0%")}`, + .format({mantissa:0, output: "precent"})}`, [ row.values.earnings.rewardCalls, row.values.earnings.rewardCallLength, @@ -390,7 +390,7 @@ const OrchestratorList = ({ ) : ( <> - {numeral( + {numbro( row.values.earnings.roi.delegatorPercent.fees + row.values.earnings.roi.delegatorPercent.rewards ).format("0.0%")} @@ -433,7 +433,7 @@ const OrchestratorList = ({ size="2" > Rewards ( - {numeral( + {numbro( row.values.earnings.roi.delegatorPercent.rewards ).format("0.0%")} ): @@ -448,7 +448,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral( + {numbro( row.values.earnings.roi.delegator.rewards ).format("0.0")} {" LPT"} @@ -465,7 +465,7 @@ const OrchestratorList = ({ size="2" > Fees ( - {numeral( + {numbro( row.values.earnings.roi.delegatorPercent.fees ).format("0.0%")} ): @@ -480,7 +480,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral( + {numbro( row.values.earnings.roi.delegator.fees ).format("0.000")} {" ETH"} @@ -622,7 +622,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral( + {numbro( row.values.earnings.ninetyDayVolumeETH ).format("0.000a")} {" ETH"} @@ -648,7 +648,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral(row.values.earnings.totalStake).format( + {numbro(row.values.earnings.totalStake).format( "0.0a" )} {" LPT"} @@ -717,7 +717,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral(AVERAGE_L1_BLOCK_TIME).format("0")} + {numbro(AVERAGE_L1_BLOCK_TIME).format("0")} {" seconds"} @@ -741,7 +741,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral( + {numbro( row.values.earnings.roi.params.roundsCount ).format("0")} {" rounds"} @@ -767,7 +767,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral(row.values.earnings.totalActiveStake).format( + {numbro(row.values.earnings.totalActiveStake).format( "0.0a" )} {" LPT"} @@ -817,7 +817,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral(row.values.totalStake).format("0,0")} LPT + {numbro(row.values.totalStake).format({mantissa:0, thousandSeparated: true})} LPT ), @@ -847,7 +847,7 @@ const OrchestratorList = ({ }} size="2" > - {numeral(row.values.ninetyDayVolumeETH).format("0.00a")} ETH + {numbro(row.values.ninetyDayVolumeETH).format("0.00a")} ETH ), @@ -1112,7 +1112,7 @@ const OrchestratorList = ({ fontWeight: 600, }} > - {numeral(principle).format("0.0a")} + {numbro(principle).format("0.0a")} {" LPT"} diff --git a/components/PerformanceList/index.tsx b/components/PerformanceList/index.tsx index 5d736ca..24c3949 100644 --- a/components/PerformanceList/index.tsx +++ b/components/PerformanceList/index.tsx @@ -7,7 +7,7 @@ import QRCode from "qrcode.react"; import { useAllScoreData, useEnsData } from "hooks"; import { OrchestratorsQueryResult } from "apollo"; import { ALL_REGIONS } from "utils/allRegions"; -import numeral from "numeral"; +import numbro from "numbro"; const EmptyData = () => ; @@ -180,7 +180,7 @@ const PerformanceList = ({ } return ( - {numeral(row.values[`scores.${region}`]) + {numbro(row.values[`scores.${region}`]) .divide(10) .format("0.00")} @@ -200,9 +200,9 @@ const PerformanceList = ({ return ( - {numeral(row.values[`successRates.${region}`]) + {numbro(row.values[`successRates.${region}`]) .divide(100) - .format("0%")} + .format({mantissa:0, output: "percent"})} ); }, @@ -219,7 +219,7 @@ const PerformanceList = ({ } return ( - {numeral(row.values[`roundTripScores.${region}`]) + {numbro(row.values[`roundTripScores.${region}`]) .divide(10) .format("0.00")} diff --git a/components/RoundStatus/index.tsx b/components/RoundStatus/index.tsx index 4362d3b..afb0953 100644 --- a/components/RoundStatus/index.tsx +++ b/components/RoundStatus/index.tsx @@ -12,7 +12,7 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { useCurrentRoundData } from "hooks"; import { useTheme } from "next-themes"; -import numeral from "numeral"; +import numbro from "numbro"; import { useMemo } from "react"; import { buildStyles } from "react-circular-progressbar"; import CircularProgressbar from "../CircularProgressBar"; @@ -238,7 +238,7 @@ const Index = ({ The amount of fees that have been paid out in the current round. Equivalent to{" "} - {numeral(protocol?.currentRound?.volumeUSD || 0).format( + {numbro(protocol?.currentRound?.volumeUSD || 0).format( "$0,0k" )}{" "} at recent prices of ETH. @@ -279,7 +279,7 @@ const Index = ({ color: "white", }} > - {numeral(protocol?.currentRound?.volumeETH || 0).format( + {numbro(protocol?.currentRound?.volumeETH || 0).format( "0.00a" )}{" "} ETH @@ -329,8 +329,8 @@ const Index = ({ color: "white", }} > - {numeral(rewardTokensClaimed).format("0")}/ - {numeral(protocol?.currentRound?.mintableTokens || 0).format( + {numbro(rewardTokensClaimed).format("0")}/ + {numbro(protocol?.currentRound?.mintableTokens || 0).format( "0" )}{" "} LPT diff --git a/components/TransactionsList/index.tsx b/components/TransactionsList/index.tsx index 2889a2c..39be8d6 100644 --- a/components/TransactionsList/index.tsx +++ b/components/TransactionsList/index.tsx @@ -7,7 +7,7 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { useEnsData } from "hooks"; import Link from "next/link"; -import numeral from "numeral"; +import numbro from "numbro"; import { useCallback, useMemo } from "react"; dayjs.extend(relativeTime); @@ -20,24 +20,24 @@ export const FILTERED_EVENT_TYPENAMES = [ const getLptAmount = (number: number | string | undefined) => { return ( - {`${numeral(number || 0).format("0.00a")} LPT`} + {`${numbro(number || 0).format("0.00a")} LPT`} ); }; const getEthAmount = (number: number | string | undefined) => { return ( - {`${numeral(number || 0).format("0.000a")} ETH`} + {`${numbro(number || 0).format("0.000a")} ETH`} ); }; const getRound = (number: number | string | undefined) => { - return `#${numeral(number || 0).format("0")}`; + return `#${numbro(number || 0).format("0")}`; }; const getPercentAmount = (number: number | string | undefined) => { return ( - {numeral(number || 0).format("0%")} + {numbro(number || 0).format({mantissa:0, output: "percent"})} ); }; @@ -337,7 +337,7 @@ const TransactionsList = ({ {`The inflation has been set to `} - {numeral(event?.currentInflation || 0) + {numbro(event?.currentInflation || 0) .divide(1000000000) .format("0.0000%")} diff --git a/components/TreasuryVotingWidget/index.tsx b/components/TreasuryVotingWidget/index.tsx index b949b62..3f10a1f 100644 --- a/components/TreasuryVotingWidget/index.tsx +++ b/components/TreasuryVotingWidget/index.tsx @@ -2,7 +2,7 @@ import { Box, Button, Flex, Heading, Text } from "@livepeer/design-system"; import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; import { useAccountAddress } from "hooks"; -import numeral from "numeral"; +import numbro from "numbro"; import { useMemo } from "react"; import { abbreviateNumber, fromWei } from "../../lib/utils"; import VoteButton from "../VoteButton"; @@ -17,7 +17,7 @@ type Props = { vote: ProposalVotingPower | undefined | null; }; -const formatPercent = (percent: number) => numeral(percent).format("0.0000%"); +const formatPercent = (percent: number) => numbro(percent).format("0.0000%"); const shortenAddress = (address: string) => address?.replace(address.slice(5, 39), "…") ?? ""; diff --git a/components/VotingWidget/index.tsx b/components/VotingWidget/index.tsx index 808c37b..7e71055 100644 --- a/components/VotingWidget/index.tsx +++ b/components/VotingWidget/index.tsx @@ -16,7 +16,7 @@ import { AccountQuery, PollChoice } from "apollo"; import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; import { useAccountAddress, usePendingFeesAndStakeData } from "hooks"; -import numeral from "numeral"; +import numbro from "numbro"; import { useEffect, useMemo, useState } from "react"; import { CopyToClipboard } from "react-copy-to-clipboard"; import { abbreviateNumber, fromWei } from "../../lib/utils"; @@ -49,7 +49,7 @@ type Props = { myAccount: AccountQuery; }; -const formatPercent = (percent: number) => numeral(percent).format("0.0000%"); +const formatPercent = (percent: number) => numbro(percent).format("0.0000%"); const Index = ({ data }: { data: Props }) => { const accountAddress = useAccountAddress(); diff --git a/lib/utils.tsx b/lib/utils.tsx index 674d194..18a2c74 100644 --- a/lib/utils.tsx +++ b/lib/utils.tsx @@ -3,7 +3,7 @@ import { BigNumber, BigNumberish, ethers } from "ethers"; import { formatEther, parseUnits } from "ethers/lib/utils"; import { StakingAction } from "hooks"; import { CHAIN_INFO, DEFAULT_CHAIN_ID, INFURA_NETWORK_URLS } from "lib/chains"; -import Numeral from "numeral"; +import numbro from "numbro"; export const provider = new ethers.providers.JsonRpcProvider( INFURA_NETWORK_URLS[DEFAULT_CHAIN_ID] @@ -272,7 +272,7 @@ export const priceFormatter = new Intl.NumberFormat("en-US", { }); export const toK = (num) => { - return Numeral(num).format("0.[00]a"); + return numbro(num).format("0.[00]a"); }; /** diff --git a/package.json b/package.json index a35a77a..c68c79c 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "micro-cors": "^0.1.1", "next": "12.2.2", "next-themes": "^0.2.0", + "numbro": "^2.4.0", "numeral": "^2.0.6", "parse-domain": "^7.0.1", "qrcode.react": "^3.1.0", diff --git a/pages/treasury/[proposal].tsx b/pages/treasury/[proposal].tsx index d2fe118..00549f1 100644 --- a/pages/treasury/[proposal].tsx +++ b/pages/treasury/[proposal].tsx @@ -35,7 +35,7 @@ import FourZeroFour from "../404"; import { useProtocolQuery, useTreasuryProposalQuery } from "apollo"; import { sentenceCase } from "change-case"; import relativeTime from "dayjs/plugin/relativeTime"; -import numeral from "numeral"; +import numbro from "numbro"; import { BadgeVariantByState } from "@components/TreasuryProposalRow"; import TreasuryVotingWidget from "@components/TreasuryVotingWidget"; import { getProposalExtended } from "@lib/api/treasury"; @@ -46,7 +46,7 @@ import { BigNumber } from "ethers"; dayjs.extend(relativeTime); -const formatPercent = (percent: number) => numeral(percent).format("0.0000%"); +const formatPercent = (percent: number) => numbro(percent).format("0.0000%"); const shortenAddress = (address: string) => address?.replace(address.slice(5, 39), "…") ?? ""; diff --git a/pages/voting/[poll].tsx b/pages/voting/[poll].tsx index a905d46..9ba6950 100644 --- a/pages/voting/[poll].tsx +++ b/pages/voting/[poll].tsx @@ -32,10 +32,10 @@ import { getPollExtended, PollExtended } from "@lib/api/polls"; import { useAccountQuery, usePollQuery, useVoteQuery } from "apollo"; import { sentenceCase } from "change-case"; import relativeTime from "dayjs/plugin/relativeTime"; -import numeral from "numeral"; +import numbro from "numbro"; dayjs.extend(relativeTime); -const formatPercent = (percent: number) => numeral(percent).format("0.0000%"); +const formatPercent = (percent: number) => numbro(percent).format("0.0000%"); const Poll = () => { const router = useRouter(); diff --git a/yarn.lock b/yarn.lock index f60a190..2e4b1c9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4553,6 +4553,11 @@ bigint-buffer@^1.1.5: dependencies: bindings "^1.3.0" +"bignumber.js@^8 || ^9": + version "9.1.2" + resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c" + integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug== + binary-extensions@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" @@ -8528,6 +8533,13 @@ nullthrows@^1.1.1: resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1" integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw== +numbro@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/numbro/-/numbro-2.4.0.tgz#3cecae307ab2c2d9fd3e1c08249f4abd504bd577" + integrity sha512-t6rVkO1CcKvffvOJJu/zMo70VIcQSR6w3AmIhfHGvmk4vHbNe6zHgomB0aWFAPZWM9JBVWBM0efJv9DBiRoSTA== + dependencies: + bignumber.js "^8 || ^9" + numeral@^2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"