From fce7df64d0558b7c1a339fb2e90792456fd79c9a Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 9 Aug 2024 12:21:36 +1000
Subject: [PATCH] fix: eth display

---
 src/App.tsx  |  6 +++---
 src/utils.ts | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

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() {
         <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,{" "}
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);
+};