Merge pull request #6 from ensdomains/fix/eth-display

fix: eth display

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() {
         <Typography>
           There are currently{" "}
           <Skeleton style={{ display: "inline-block" }} loading={isDeedStatsLoading}>
-            {deedStats?.numOfDeeds ?? "12345"}
+            <b>{deedStats?.numOfDeeds ?? "12345"}</b>
           </Skeleton>{" "}
           deeds holding{" "}
           <Skeleton style={{ display: "inline-block" }} loading={isDeedStatsLoading}>
-            {deedStats?.currentValue ? formatEther(deedStats.currentValue) : "0.0000"}
+            <b>{deedStats?.currentValue ? createDisplayEth(deedStats.currentValue) : "0.0000"}</b>
           </Skeleton>
           <br />
           To understand more about these unclaimed deposits,{" "}

src/utils.ts

@@ -1,7 +1,27 @@
+import { formatEther } from "viem";
+
 export const shortenAddress = (address = "", maxLength = 10, leftSlice = 5, rightSlice = 5) => {
   if (address.length < maxLength) {
     return address;
   }
 
   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);
+};