diff --git a/src/App.tsx b/src/App.tsx index f8ca5ff..f8dd5d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import { DeedComponent } from "./Deed"; import { lookupDeed } from "./query/lookupDeed"; import { getDeedStatsQueryFn, getDeedsForAccountQueryFn } from "./query/reclaimSubgraph"; import { useSimpleSearch } from "./query/useSimpleSearch"; -import { shortenAddress } from "./utils"; +import { createDisplayEth, shortenAddress } from "./utils"; const getWarning = () => false; @@ -135,11 +135,11 @@ function App() { There are currently{" "} - {deedStats?.numOfDeeds ?? "12345"} + {deedStats?.numOfDeeds ?? "12345"} {" "} deeds holding{" "} - {deedStats?.currentValue ? formatEther(deedStats.currentValue) : "0.0000"} + {deedStats?.currentValue ? createDisplayEth(deedStats.currentValue) : "0.0000"}
To understand more about these unclaimed deposits,{" "} diff --git a/src/utils.ts b/src/utils.ts index d974453..0acf79f 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,3 +1,5 @@ +import { formatEther } from "viem"; + export const shortenAddress = (address = "", maxLength = 10, leftSlice = 5, rightSlice = 5) => { if (address.length < maxLength) { return address; @@ -5,3 +7,21 @@ export const shortenAddress = (address = "", maxLength = 10, leftSlice = 5, righ return `${address.slice(0, leftSlice + 2)}...${address.slice(-rightSlice)}`; }; + +export const createDisplayEth = (value: bigint) => { + const number = Number(formatEther(value)); + const options: Intl.NumberFormatOptions & { [x: string]: string } = { + style: "currency", + currency: "eth", + // @ts-expect-error + useGrouping: "auto", + trailingZeroDisplay: "auto", + }; + if (number < 0.00001) { + options.maximumSignificantDigits = 1; + } + options.minimumFractionDigits = 4; + options.maximumFractionDigits = 4; + options.currencyDisplay = "name"; + return new Intl.NumberFormat(undefined, options).format(number); +};