From 5086b6f8565fc665669b6e3349f404420a5e9d1d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 2 Apr 2022 14:56:36 -0300
Subject: [PATCH] Use native ethereum-lists/chains json format; dont reinvent
 the wheel

---
 src/Block.tsx                           |  8 +++++---
 src/PriceBox.tsx                        |  8 +++++---
 src/components/InternalSelfDestruct.tsx |  6 ++++--
 src/components/InternalTransfer.tsx     |  6 ++++--
 src/components/TransactionValue.tsx     | 10 ++++++----
 src/components/USDValue.tsx             |  6 ++++--
 src/special/london/BlockRow.tsx         |  9 +++++----
 src/transaction/Details.tsx             | 18 +++++++++---------
 src/transaction/RewardSplit.tsx         |  8 +++++---
 src/transaction/TraceInput.tsx          |  7 ++++---
 src/useChainInfo.ts                     | 24 +++++++++++++++---------
 11 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 97b14ba..c8afe43 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -34,7 +34,9 @@ const Block: React.FC = () => {
   if (blockNumberOrHash === undefined) {
     throw new Error("blockNumberOrHash couldn't be undefined here");
   }
-  const { nativeName, nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { name, symbol },
+  } = useChainInfo();
 
   const block = useBlockData(provider, blockNumberOrHash);
   useEffect(() => {
@@ -146,7 +148,7 @@ const Block: React.FC = () => {
                     <span className="line-through">
                       <FormattedBalance value={burntFees} />
                     </span>{" "}
-                    {nativeSymbol}
+                    {symbol}
                   </span>
                 </span>
               </div>
@@ -165,7 +167,7 @@ const Block: React.FC = () => {
             {extraStr} (Hex:{" "}
             <span className="font-data break-all">{block.extraData}</span>)
           </InfoRow>
-          <InfoRow title={`${nativeName} Price`}>
+          <InfoRow title={`${name} Price`}>
             <USDValue value={blockETHUSDPrice} />
           </InfoRow>
           <InfoRow title="Difficult">
diff --git a/src/PriceBox.tsx b/src/PriceBox.tsx
index 2f5bd4d..1e2586a 100644
--- a/src/PriceBox.tsx
+++ b/src/PriceBox.tsx
@@ -14,7 +14,9 @@ const ETH_FEED_DECIMALS = 8;
 // TODO: reduce duplication with useETHUSDOracle
 const PriceBox: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
   const latestBlock = useLatestBlock(provider);
 
   const maybeOutdated: boolean =
@@ -82,9 +84,9 @@ const PriceBox: React.FC = () => {
           } font-sans text-xs text-gray-800`}
         >
           <span
-            title={`${nativeSymbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
+            title={`${symbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
           >
-            {nativeSymbol}: $<span className="font-balance">{latestPrice}</span>
+            {symbol}: $<span className="font-balance">{latestPrice}</span>
           </span>
           {latestGasData && (
             <>
diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx
index 9bcb0ad..8cb828e 100644
--- a/src/components/InternalSelfDestruct.tsx
+++ b/src/components/InternalSelfDestruct.tsx
@@ -17,7 +17,9 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   txData,
   internalOp,
 }) => {
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
   const toMiner =
     txData.confirmedData?.miner !== undefined &&
     internalOp.to === txData.confirmedData.miner;
@@ -46,7 +48,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
             <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
           </span>
           <span>
-            {formatEther(internalOp.value)} {nativeSymbol}
+            {formatEther(internalOp.value)} {symbol}
           </span>
           <div className="flex items-baseline">
             <span className="text-gray-500">To</span>
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index b73bdf0..b52acb9 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -18,7 +18,9 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
   txData,
   internalOp,
 }) => {
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
   const fromMiner =
     txData.confirmedData?.miner !== undefined &&
     internalOp.from === txData.confirmedData.miner;
@@ -44,7 +46,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
       <span>
-        {formatEther(internalOp.value)} {nativeSymbol}
+        {formatEther(internalOp.value)} {symbol}
       </span>
       <div className="flex items-baseline">
         <span className="text-gray-500">From</span>
diff --git a/src/components/TransactionValue.tsx b/src/components/TransactionValue.tsx
index b4a9d54..53f9300 100644
--- a/src/components/TransactionValue.tsx
+++ b/src/components/TransactionValue.tsx
@@ -22,16 +22,18 @@ const TransactionValue: React.FC<TransactionValueProps> = ({
   value,
   hideUnit,
 }) => {
-  const { nativeSymbol, nativeDecimals } = useChainInfo();
-  const formattedValue = formatValue(value, nativeDecimals);
+  const {
+    nativeCurrency: { symbol, decimals },
+  } = useChainInfo();
+  const formattedValue = formatValue(value, decimals);
 
   return (
     <span
       className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`}
-      title={`${formattedValue} ${nativeSymbol}`}
+      title={`${formattedValue} ${symbol}`}
     >
       <span className={`font-balance`}>{formattedValue}</span>
-      {!hideUnit && ` ${nativeSymbol}`}
+      {!hideUnit && ` ${symbol}`}
     </span>
   );
 };
diff --git a/src/components/USDValue.tsx b/src/components/USDValue.tsx
index 9554e41..90da1c2 100644
--- a/src/components/USDValue.tsx
+++ b/src/components/USDValue.tsx
@@ -10,7 +10,9 @@ type USDValueProps = {
 };
 
 const USDValue: React.FC<USDValueProps> = ({ value }) => {
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
 
   return (
     <span className="text-sm">
@@ -24,7 +26,7 @@ const USDValue: React.FC<USDValueProps> = ({ value }) => {
                 .toString()
             )}
           </span>{" "}
-          <span className="text-xs text-gray-500">/ {nativeSymbol}</span>
+          <span className="text-xs text-gray-500">/ {symbol}</span>
         </>
       ) : (
         "N/A"
diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx
index 3d1cf8f..3bec637 100644
--- a/src/special/london/BlockRow.tsx
+++ b/src/special/london/BlockRow.tsx
@@ -16,7 +16,9 @@ type BlockRowProps = {
 };
 
 const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
   const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@@ -55,11 +57,10 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
         </div>
       </div>
       <div className="text-right col-span-2">
-        {commify(formatEther(totalReward))} {nativeSymbol}
+        {commify(formatEther(totalReward))} {symbol}
       </div>
       <div className="text-right col-span-2 line-through text-orange-500">
-        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))}{" "}
-        {nativeSymbol}
+        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} {symbol}
       </div>
       <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index e845d5e..a5d0661 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -87,7 +87,9 @@ const Details: React.FC<DetailsProps> = ({
   const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
 
   const { provider } = useContext(RuntimeContext);
-  const { nativeName, nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { name, symbol },
+  } = useChainInfo();
   const addresses = useMemo(() => {
     const _addresses: ChecksummedAddress[] = [];
     if (txData.to) {
@@ -315,7 +317,7 @@ const Details: React.FC<DetailsProps> = ({
         </InfoRow>
       )}
       <InfoRow title="Value">
-        <FormattedBalance value={txData.value} /> {nativeSymbol}{" "}
+        <FormattedBalance value={txData.value} /> {symbol}{" "}
         {!txData.value.isZero() && ethUSDPrice && (
           <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
             <ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
@@ -338,8 +340,7 @@ const Details: React.FC<DetailsProps> = ({
       {txData.type === 2 && (
         <>
           <InfoRow title="Max Priority Fee Per Gas">
-            <FormattedBalance value={txData.maxPriorityFeePerGas!} />{" "}
-            {nativeSymbol} (
+            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> {symbol} (
             <FormattedBalance
               value={txData.maxPriorityFeePerGas!}
               decimals={9}
@@ -347,7 +348,7 @@ const Details: React.FC<DetailsProps> = ({
             Gwei)
           </InfoRow>
           <InfoRow title="Max Fee Per Gas">
-            <FormattedBalance value={txData.maxFeePerGas!} /> {nativeSymbol} (
+            <FormattedBalance value={txData.maxFeePerGas!} /> {symbol} (
             <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
           </InfoRow>
         </>
@@ -356,7 +357,7 @@ const Details: React.FC<DetailsProps> = ({
         <InfoRow title="Gas Price">
           <div className="flex items-baseline space-x-1">
             <span>
-              <FormattedBalance value={txData.gasPrice} /> {nativeSymbol} (
+              <FormattedBalance value={txData.gasPrice} /> {symbol} (
               <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
             </span>
             {sendsEthToMiner && (
@@ -407,8 +408,7 @@ const Details: React.FC<DetailsProps> = ({
           <InfoRow title="Transaction Fee">
             <div className="space-y-3">
               <div>
-                <FormattedBalance value={txData.confirmedData.fee} />{" "}
-                {nativeSymbol}{" "}
+                <FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
                 {ethUSDPrice && (
                   <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
                     <ETH2USDValue
@@ -421,7 +421,7 @@ const Details: React.FC<DetailsProps> = ({
               {hasEIP1559 && <RewardSplit txData={txData} />}
             </div>
           </InfoRow>
-          <InfoRow title={`${nativeName} Price`}>
+          <InfoRow title={`${name} Price`}>
             <USDValue value={ethUSDPrice} />
           </InfoRow>
         </>
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index d6e47b3..b9268c4 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -12,7 +12,9 @@ type RewardSplitProps = {
 };
 
 const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
   const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed);
   const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul(
     txData.confirmedData!.gasUsed
@@ -41,7 +43,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
               <span className="line-through">
                 <FormattedBalance value={burntFees} />
               </span>{" "}
-              {nativeSymbol}
+              {symbol}
             </span>
           </span>
         </div>
@@ -57,7 +59,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
               <FontAwesomeIcon icon={faCoins} size="1x" />
             </span>
             <span>
-              <FormattedBalance value={minerReward} /> {nativeSymbol}
+              <FormattedBalance value={minerReward} /> {symbol}
             </span>
           </span>
         </div>
diff --git a/src/transaction/TraceInput.tsx b/src/transaction/TraceInput.tsx
index c21adfc..f8f469a 100644
--- a/src/transaction/TraceInput.tsx
+++ b/src/transaction/TraceInput.tsx
@@ -19,7 +19,9 @@ type TraceInputProps = {
 };
 
 const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
-  const { nativeSymbol } = useChainInfo();
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
   const raw4Bytes = extract4Bytes(t.input);
   const fourBytes = use4Bytes(raw4Bytes);
   const sigText =
@@ -57,8 +59,7 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
                 <FunctionSignature callType={t.type} sig={sigText} />
                 {t.value && !t.value.isZero() && (
                   <span className="text-red-700 whitespace-nowrap">
-                    {"{"}value: <FormattedBalance value={t.value} />{" "}
-                    {nativeSymbol}
+                    {"{"}value: <FormattedBalance value={t.value} /> {symbol}
                     {"}"}
                   </span>
                 )}
diff --git a/src/useChainInfo.ts b/src/useChainInfo.ts
index 5cd0f01..1d62904 100644
--- a/src/useChainInfo.ts
+++ b/src/useChainInfo.ts
@@ -3,15 +3,19 @@ import { chainInfoURL } from "./url";
 import { OtterscanRuntime } from "./useRuntime";
 
 export type ChainInfo = {
-  nativeName: string;
-  nativeSymbol: string;
-  nativeDecimals: number;
+  nativeCurrency: {
+    name: string;
+    symbol: string;
+    decimals: number;
+  };
 };
 
 export const defaultChainInfo: ChainInfo = {
-  nativeName: "Ether",
-  nativeSymbol: "ETH",
-  nativeDecimals: 18,
+  nativeCurrency: {
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+  },
 };
 
 export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined);
@@ -40,9 +44,11 @@ export const useChainInfoFromMetadataFile = (
         const info = await res.json();
 
         setChainInfo({
-          nativeName: info.nativeCurrency.name,
-          nativeDecimals: info.nativeCurrency.decimals,
-          nativeSymbol: info.nativeCurrency.symbol,
+          nativeCurrency: {
+            name: info.nativeCurrency.name,
+            decimals: info.nativeCurrency.decimals,
+            symbol: info.nativeCurrency.symbol,
+          },
         });
       } catch (err) {
         // ignore