Use standard TransactionValue component; add docs

src/address/AddressTransactionResults.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
 import { BlockTag } from "@ethersproject/providers";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
-import FormattedBalance from "../components/FormattedBalance";
+import TransactionValue from "../components/TransactionValue";
 import TransactionAddress from "../components/TransactionAddress";
 import Copy from "../components/Copy";
 import TransactionLink from "../components/TransactionLink";
@@ -131,7 +131,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
       <SelectionContext.Provider value={selectionCtx}>
         {balance && (
           <InfoRow title="Balance">
-            <FormattedBalance value={balance} /> Ether
+            <TransactionValue value={balance} />
           </InfoRow>
         )}
         {creator && (

src/components/FormattedBalance.tsx

@@ -7,6 +7,7 @@ type FormatterBalanceProps = {
   decimals?: number;
 };
 
+// TODO: remove duplication with TransactionValue component
 const FormattedBalance: React.FC<FormatterBalanceProps> = ({
   value,
   decimals = 18,

src/components/TransactionValue.tsx

@@ -8,6 +8,16 @@ type TransactionValueProps = {
   hideUnit?: boolean;
 };
 
+/**
+ * Standard component for displaying balances. It:
+ *
+ * - Commify non-decimal parts, i.e., 1,000,000.00
+ * - Light gray absolute zero values
+ * - Cut out decimal part is it is 0 to reduce UI clutter, i.e., show
+ * 123 instead of 123.00
+ *
+ * TODO: remove duplication with FormattedBalance
+ */
 const TransactionValue: React.FC<TransactionValueProps> = ({
   value,
   decimals = 18,