Add USD price next to ETH balance on address page

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);

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 && (

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,