From 60931863fa27e0e10c8a0a9d3c2ad343d8cebd62 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 19 Feb 2022 16:42:25 -0300
Subject: [PATCH] Add USD price next to ETH balance on address page

---
 src/PriceBox.tsx                          |  1 +
 src/address/AddressTransactionResults.tsx | 20 +++++++++++++++++---
 src/components/ETH2USDValue.tsx           |  7 +++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/PriceBox.tsx b/src/PriceBox.tsx
index ad73d06..2ebb5d7 100644
--- a/src/PriceBox.tsx
+++ b/src/PriceBox.tsx
@@ -10,6 +10,7 @@ import { useLatestBlock } from "./useLatestBlock";
 
 const ETH_FEED_DECIMALS = 8;
 
+// TODO: reduce duplication with useETHUSDOracle
 const PriceBox: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
   const latestBlock = useLatestBlock(provider);
diff --git a/src/address/AddressTransactionResults.tsx b/src/address/AddressTransactionResults.tsx
index 24793d0..1a95535 100644
--- a/src/address/AddressTransactionResults.tsx
+++ b/src/address/AddressTransactionResults.tsx
@@ -3,6 +3,7 @@ import { BlockTag } from "@ethersproject/providers";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import TransactionValue from "../components/TransactionValue";
+import ETH2USDValue from "../components/ETH2USDValue";
 import TransactionAddress from "../components/TransactionAddress";
 import Copy from "../components/Copy";
 import TransactionLink from "../components/TransactionLink";
@@ -101,9 +102,12 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
   // TODO: dedup blockTags
   const blockTags: BlockTag[] = useMemo(() => {
     if (!page) {
-      return [];
+      return ["latest"];
     }
-    return page.map((t) => t.blockNumber);
+
+    const blockTags: BlockTag[] = page.map((t) => t.blockNumber);
+    blockTags.push("latest");
+    return blockTags;
   }, [page]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
@@ -131,7 +135,17 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
       <SelectionContext.Provider value={selectionCtx}>
         {balance && (
           <InfoRow title="Balance">
-            <TransactionValue value={balance} />
+            <div className="space-x-2">
+              <TransactionValue value={balance} />
+              {!balance.isZero() && priceMap["latest"] !== undefined && (
+                <span className="px-2 border-green-200 border rounded-lg bg-green-100 text-green-600">
+                  <ETH2USDValue
+                    ethAmount={balance}
+                    eth2USDValue={priceMap["latest"]}
+                  />
+                </span>
+              )}
+            </div>
           </InfoRow>
         )}
         {creator && (
diff --git a/src/components/ETH2USDValue.tsx b/src/components/ETH2USDValue.tsx
index ef131d8..53ece53 100644
--- a/src/components/ETH2USDValue.tsx
+++ b/src/components/ETH2USDValue.tsx
@@ -7,6 +7,13 @@ type ETH2USDValueProps = {
   eth2USDValue: BigNumber;
 };
 
+/**
+ * Basic display of ETH -> USD values WITHOUT box decoration, only
+ * text formatting.
+ *
+ * USD amounts are displayed commified with 2 decimals places and $ prefix,
+ * i.e., "$1,000.00".
+ */
 const ETH2USDValue: React.FC<ETH2USDValueProps> = ({
   ethAmount,
   eth2USDValue,