From 156d6e7e739b1ecf38ed8c569fe4b4d4e7ff9e29 Mon Sep 17 00:00:00 2001 From: muzam1l Date: Thu, 19 May 2022 23:41:16 +0530 Subject: [PATCH 1/2] Leaderboard number format --- components/Leaderboard/index.tsx | 37 +++++++++++++++++++++----------- utils/helpers.ts | 4 ++-- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/components/Leaderboard/index.tsx b/components/Leaderboard/index.tsx index 748174f..33d7b7e 100644 --- a/components/Leaderboard/index.tsx +++ b/components/Leaderboard/index.tsx @@ -48,7 +48,7 @@ const Leaderboard: FC = ({ id: "juicer", width: "10%", minWidth: "140px", - whiteSpace: 'nowrap', + whiteSpace: "nowrap", align: "left", Cell: ({ value }: { value: JuicerColumn["juicer"] }) => { return {value}; @@ -58,19 +58,28 @@ const Leaderboard: FC = ({ Header: "Juice Pressed", accessor: "juiceAmount", sortType: (rowA, rowB, _columnId, desc) => { - const diff: BigNumber = BigNumber.from(rowA.values.juiceAmount).sub(BigNumber.from(rowB.values.juiceAmount)) + const diff: BigNumber = BigNumber.from(rowA.values.juiceAmount).sub( + BigNumber.from(rowB.values.juiceAmount) + ); if (diff.isZero()) { - return 0 + return 0; } else if (desc && diff.gt(0)) { - return 1 + return 1; } else { - return -1 + return -1; } }, id: "juiceAmount", align: "right", Cell: ({ value }: { value: JuicerColumn["juiceAmount"] }) => { - return {formatJuice(BigNumber.from(value)) || "xxxx"}; + return ( + + {formatJuice(BigNumber.from(value), { + minimumFractionDigits: 3, + maximumFractionDigits: 3, + }) || "xxxx"} + + ); }, }, ], @@ -93,12 +102,16 @@ const Leaderboard: FC = ({ useEffect(() => { const _data = getData(); - setData(_data && _data.map(value => { - if (isAddress(value.juicer)) { - value.juicer = getTruncatedAddress(value.juicer) - } - return value - }) || []); + setData( + (_data && + _data.map((value) => { + if (isAddress(value.juicer)) { + value.juicer = getTruncatedAddress(value.juicer); + } + return value; + })) || + [] + ); }, [getData]); const segmentData: { label: string; key: LeaderboardRange }[] = []; diff --git a/utils/helpers.ts b/utils/helpers.ts index 799959b..23b72b2 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -13,8 +13,8 @@ export const isValidEmail = (email?: string) => type Nullable = T | null | undefined; -export const formatJuice = (amount: Nullable) => - Number(ethers.utils.formatUnits(amount || 0, juiceDecimals)).toLocaleString(); +export const formatJuice = (amount: Nullable, options?: Intl.NumberFormatOptions) => + Number(ethers.utils.formatUnits(amount || 0, juiceDecimals)).toLocaleString(undefined, options); export const parseJuice = (amount: Nullable) => ethers.utils.parseUnits(amount?.toString() || "0", juiceDecimals); From 363f5029e05eefb2537a4a2942341488bba51602 Mon Sep 17 00:00:00 2001 From: muzam1l Date: Thu, 19 May 2022 23:41:16 +0530 Subject: [PATCH 2/2] Leaderboard number format --- components/Leaderboard/index.tsx | 37 +++++++++++++++++++++----------- utils/helpers.ts | 4 ++-- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/components/Leaderboard/index.tsx b/components/Leaderboard/index.tsx index 748174f..33d7b7e 100644 --- a/components/Leaderboard/index.tsx +++ b/components/Leaderboard/index.tsx @@ -48,7 +48,7 @@ const Leaderboard: FC = ({ id: "juicer", width: "10%", minWidth: "140px", - whiteSpace: 'nowrap', + whiteSpace: "nowrap", align: "left", Cell: ({ value }: { value: JuicerColumn["juicer"] }) => { return {value}; @@ -58,19 +58,28 @@ const Leaderboard: FC = ({ Header: "Juice Pressed", accessor: "juiceAmount", sortType: (rowA, rowB, _columnId, desc) => { - const diff: BigNumber = BigNumber.from(rowA.values.juiceAmount).sub(BigNumber.from(rowB.values.juiceAmount)) + const diff: BigNumber = BigNumber.from(rowA.values.juiceAmount).sub( + BigNumber.from(rowB.values.juiceAmount) + ); if (diff.isZero()) { - return 0 + return 0; } else if (desc && diff.gt(0)) { - return 1 + return 1; } else { - return -1 + return -1; } }, id: "juiceAmount", align: "right", Cell: ({ value }: { value: JuicerColumn["juiceAmount"] }) => { - return {formatJuice(BigNumber.from(value)) || "xxxx"}; + return ( + + {formatJuice(BigNumber.from(value), { + minimumFractionDigits: 3, + maximumFractionDigits: 3, + }) || "xxxx"} + + ); }, }, ], @@ -93,12 +102,16 @@ const Leaderboard: FC = ({ useEffect(() => { const _data = getData(); - setData(_data && _data.map(value => { - if (isAddress(value.juicer)) { - value.juicer = getTruncatedAddress(value.juicer) - } - return value - }) || []); + setData( + (_data && + _data.map((value) => { + if (isAddress(value.juicer)) { + value.juicer = getTruncatedAddress(value.juicer); + } + return value; + })) || + [] + ); }, [getData]); const segmentData: { label: string; key: LeaderboardRange }[] = []; diff --git a/utils/helpers.ts b/utils/helpers.ts index 799959b..23b72b2 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -13,8 +13,8 @@ export const isValidEmail = (email?: string) => type Nullable = T | null | undefined; -export const formatJuice = (amount: Nullable) => - Number(ethers.utils.formatUnits(amount || 0, juiceDecimals)).toLocaleString(); +export const formatJuice = (amount: Nullable, options?: Intl.NumberFormatOptions) => + Number(ethers.utils.formatUnits(amount || 0, juiceDecimals)).toLocaleString(undefined, options); export const parseJuice = (amount: Nullable) => ethers.utils.parseUnits(amount?.toString() || "0", juiceDecimals);