Merge branch 'feature/chain-params' into develop

.dockerignore

@@ -7,3 +7,5 @@ trustwallet
 !trustwallet/blockchains/ethereum/assets
 !trustwallet/blockchains/polygon/assets
 !trustwallet/blockchains/smartchain/assets
+chains
+!chains/_data/chains

.gitmodules

@@ -10,3 +10,7 @@
 	path = topic0
 	url = https://github.com/wmitsuda/topic0.git
 	ignore = dirty
+[submodule "chains"]
+	path = chains
+	url = https://github.com/ethereum-lists/chains.git
+	ignore = dirty

Dockerfile

@@ -24,6 +24,10 @@ FROM alpine:3.15.0 AS topic0builder
 WORKDIR /topic0
 COPY topic0/with_parameter_names /topic0/
 
+FROM alpine:3.15.0 AS chainsbuilder
+WORKDIR /chains
+COPY chains/_data/chains /chains/
+
 # Add brotli module to official nginx image
 # Based on: https://github.com/nginxinc/docker-nginx/tree/master/modules
 FROM nginx:1.21.3-alpine as nginxbuilder
@@ -87,6 +91,7 @@ RUN set -ex \
        done \
     && rm -rf /tmp/packages
 RUN apk update && apk add jq
+COPY --from=chainsbuilder /chains /usr/share/nginx/html/chains/
 COPY --from=topic0builder /topic0 /usr/share/nginx/html/topic0/
 COPY --from=fourbytesbuilder /signatures /usr/share/nginx/html/signatures/
 COPY --from=logobuilder /assets /usr/share/nginx/html/assets/

chains

@@ -0,0 +1 @@
+Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84

nginx/conf.d/default.conf

@@ -113,6 +113,40 @@ server {
         }
     }
 
+    location /chains {
+        root   /usr/share/nginx/html;
+        expires 30d;
+
+        # Base on: https://michielkalkman.com/snippets/nginx-cors-open-configuration/
+        if ($request_method = 'OPTIONS') {
+            add_header 'Access-Control-Allow-Origin' '*';
+            #
+            # Om nom nom cookies
+            #
+            add_header 'Access-Control-Allow-Credentials' 'true';
+            add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
+
+            #
+            # Custom headers and headers various browsers *should* be OK with but aren't
+            #
+            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+
+            #
+            # Tell client that this pre-flight info is valid for 20 days
+            #
+            add_header 'Access-Control-Max-Age' 1728000;
+            add_header 'Content-Type' 'text/plain charset=UTF-8';
+            add_header 'Content-Length' 0;
+            return 204;
+        }
+        if ($request_method = 'GET') {
+            add_header 'Access-Control-Allow-Origin' '*' always;
+            add_header 'Access-Control-Allow-Credentials' 'true' always;
+            add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
+        }
+    }
+
     location / {
         root   /usr/share/nginx/html;
         index  index.html;

package.json

@@ -52,8 +52,8 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "source-map-explorer": "source-map-explorer build/static/js/*.js",
-    "assets-start": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/signatures:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
+    "assets-start": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/signatures:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/chains/_data/chains:/usr/share/nginx/html/chains/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
-    "assets-start-with-param-names": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/with_parameter_names:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
+    "assets-start-with-param-names": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/with_parameter_names:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/chains/_data/chains:/usr/share/nginx/html/chains/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
     "assets-stop": "docker stop otterscan-assets",
     "docker-build": "DOCKER_BUILDKIT=1 docker build -t otterscan -f Dockerfile .",
     "docker-start": "docker run --rm -p 5000:80 --name otterscan -d otterscan",

src/App.tsx

@@ -7,6 +7,7 @@ import ConnectionErrorPanel from "./ConnectionErrorPanel";
 import Footer from "./Footer";
 import { ConnectionStatus } from "./types";
 import { RuntimeContext, useRuntime } from "./useRuntime";
+import { ChainInfoContext, useChainInfoFromMetadataFile } from "./useChainInfo";
 
 const Block = React.lazy(
   () => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block")
@@ -40,16 +41,19 @@ const PageNotFound = React.lazy(
 
 const App = () => {
   const runtime = useRuntime();
+  const chainInfo = useChainInfoFromMetadataFile(runtime);
 
   return (
     <Suspense fallback={null}>
-      {runtime.connStatus !== ConnectionStatus.CONNECTED ? (
+      {runtime.connStatus !== ConnectionStatus.CONNECTED ||
+      chainInfo === undefined ? (
         <ConnectionErrorPanel
           connStatus={runtime.connStatus}
           config={runtime.config}
         />
       ) : (
         <RuntimeContext.Provider value={runtime}>
+          <ChainInfoContext.Provider value={chainInfo}>
             <div className="h-screen flex flex-col">
               <WarningHeader />
               <Router>
@@ -57,7 +61,10 @@ const App = () => {
                   <Route index element={<Home />} />
                   <Route path="/special/london" element={<London />} />
                   <Route path="*" element={<Main />}>
-                  <Route path="block/:blockNumberOrHash" element={<Block />} />
+                    <Route
+                      path="block/:blockNumberOrHash"
+                      element={<Block />}
+                    />
                     <Route
                       path="block/:blockNumber/txs"
                       element={<BlockTransactions />}
@@ -73,6 +80,7 @@ const App = () => {
               </Router>
               <Footer />
             </div>
+          </ChainInfoContext.Provider>
         </RuntimeContext.Provider>
       )}
     </Suspense>

src/Block.tsx

@@ -9,6 +9,7 @@ import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import NavBlock from "./block/NavBlock";
 import ContentFrame from "./ContentFrame";
+import BlockNotFound from "./components/BlockNotFound";
 import InfoRow from "./components/InfoRow";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
@@ -25,7 +26,7 @@ import { useLatestBlockNumber } from "./useLatestBlock";
 import { blockTxsURL } from "./url";
 import { useBlockData } from "./useErigonHooks";
 import { useETHUSDOracle } from "./usePriceOracle";
-import BlockNotFound from "./components/BlockNotFound";
+import { useChainInfo } from "./useChainInfo";
 
 const Block: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
@@ -33,6 +34,7 @@ const Block: React.FC = () => {
   if (blockNumberOrHash === undefined) {
     throw new Error("blockNumberOrHash couldn't be undefined here");
   }
+  const { nativeName, nativeSymbol } = useChainInfo();
 
   const block = useBlockData(provider, blockNumberOrHash);
   useEffect(() => {
@@ -144,7 +146,7 @@ const Block: React.FC = () => {
                     <span className="line-through">
                       <FormattedBalance value={burntFees} />
                     </span>{" "}
-                    Ether
+                    {nativeSymbol}
                   </span>
                 </span>
               </div>
@@ -163,7 +165,7 @@ const Block: React.FC = () => {
             {extraStr} (Hex:{" "}
             <span className="font-data break-all">{block.extraData}</span>)
           </InfoRow>
-          <InfoRow title="Ether Price">
+          <InfoRow title={`${nativeName} Price`}>
             <USDValue value={blockETHUSDPrice} />
           </InfoRow>
           <InfoRow title="Difficult">

src/PriceBox.tsx

@@ -7,12 +7,14 @@ import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Int
 import { RuntimeContext } from "./useRuntime";
 import { formatValue } from "./components/formatter";
 import { useLatestBlock } from "./useLatestBlock";
+import { useChainInfo } from "./useChainInfo";
 
 const ETH_FEED_DECIMALS = 8;
 
 // TODO: reduce duplication with useETHUSDOracle
 const PriceBox: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
+  const { nativeSymbol } = useChainInfo();
   const latestBlock = useLatestBlock(provider);
 
   const maybeOutdated: boolean =
@@ -80,9 +82,9 @@ const PriceBox: React.FC = () => {
           } font-sans text-xs text-gray-800`}
         >
           <span
-            title={`ETH/USD last updated at: ${latestPriceTimestamp?.toString()}`}
+            title={`${nativeSymbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
           >
-            Eth: $<span className="font-balance">{latestPrice}</span>
+            {nativeSymbol}: $<span className="font-balance">{latestPrice}</span>
           </span>
           {latestGasData && (
             <>

src/components/InternalSelfDestruct.tsx

@@ -4,8 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { TransactionData, InternalOperation } from "../types";
 import TransactionAddress from "./TransactionAddress";
+import { useChainInfo } from "../useChainInfo";
+import { TransactionData, InternalOperation } from "../types";
 
 type InternalSelfDestructProps = {
   txData: TransactionData;
@@ -16,6 +17,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   txData,
   internalOp,
 }) => {
+  const { nativeSymbol } = useChainInfo();
   const toMiner =
     txData.confirmedData?.miner !== undefined &&
     internalOp.to === txData.confirmedData.miner;
@@ -43,7 +45,9 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
           <span className="text-gray-500">
             <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
           </span>
-          <span>{formatEther(internalOp.value)} Ether</span>
+          <span>
+            {formatEther(internalOp.value)} {nativeSymbol}
+          </span>
           <div className="flex items-baseline">
             <span className="text-gray-500">To</span>
             <AddressHighlighter address={internalOp.to}>

src/components/InternalTransfer.tsx

@@ -6,6 +6,7 @@ import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { RuntimeContext } from "../useRuntime";
 import { useHasCode } from "../useErigonHooks";
+import { useChainInfo } from "../useChainInfo";
 import { TransactionData, InternalOperation } from "../types";
 
 type InternalTransferProps = {
@@ -17,6 +18,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
   txData,
   internalOp,
 }) => {
+  const { nativeSymbol } = useChainInfo();
   const fromMiner =
     txData.confirmedData?.miner !== undefined &&
     internalOp.from === txData.confirmedData.miner;
@@ -41,7 +43,9 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
       <span className="text-gray-500">
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
-      <span>{formatEther(internalOp.value)} Ether</span>
+      <span>
+        {formatEther(internalOp.value)} {nativeSymbol}
+      </span>
       <div className="flex items-baseline">
         <span className="text-gray-500">From</span>
         <AddressHighlighter address={internalOp.from}>

src/components/TransactionValue.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { BigNumber } from "@ethersproject/bignumber";
+import { useChainInfo } from "../useChainInfo";
 import { formatValue } from "./formatter";
 
 type TransactionValueProps = {
   value: BigNumber;
-  decimals?: number;
   hideUnit?: boolean;
-  unitName?: string;
 };
 
 /**
@@ -21,19 +20,18 @@ type TransactionValueProps = {
  */
 const TransactionValue: React.FC<TransactionValueProps> = ({
   value,
-  decimals = 18,
   hideUnit,
-  unitName = "ETH",
 }) => {
-  const formattedValue = formatValue(value, decimals);
+  const { nativeSymbol, nativeDecimals } = useChainInfo();
+  const formattedValue = formatValue(value, nativeDecimals);
 
   return (
     <span
       className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`}
-      title={`${formattedValue} ${unitName}`}
+      title={`${formattedValue} ${nativeSymbol}`}
     >
       <span className={`font-balance`}>{formattedValue}</span>
-      {!hideUnit && ` ${unitName}`}
+      {!hideUnit && ` ${nativeSymbol}`}
     </span>
   );
 };

src/components/USDValue.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
 import { commify } from "@ethersproject/units";
+import { useChainInfo } from "../useChainInfo";
 
 const ETH_FEED_DECIMALS = 8;
 
@@ -8,22 +9,28 @@ type USDValueProps = {
   value: BigNumber | undefined;
 };
 
-const USDValue: React.FC<USDValueProps> = ({ value }) => (
+const USDValue: React.FC<USDValueProps> = ({ value }) => {
+  const { nativeSymbol } = useChainInfo();
+
+  return (
     <span className="text-sm">
       {value ? (
         <>
           $
           <span className="font-balance">
             {commify(
-            FixedNumber.fromValue(value, ETH_FEED_DECIMALS).round(2).toString()
+              FixedNumber.fromValue(value, ETH_FEED_DECIMALS)
+                .round(2)
+                .toString()
             )}
           </span>{" "}
-        <span className="text-xs text-gray-500">/ ETH</span>
+          <span className="text-xs text-gray-500">/ {nativeSymbol}</span>
         </>
       ) : (
         "N/A"
       )}
     </span>
   );
+};
 
 export default React.memo(USDValue);

src/special/london/BlockRow.tsx

@@ -3,8 +3,9 @@ import { FixedNumber } from "@ethersproject/bignumber";
 import { commify, formatEther } from "@ethersproject/units";
 import BlockLink from "../../components/BlockLink";
 import TimestampAge from "../../components/TimestampAge";
-import { ExtendedBlock } from "../../useErigonHooks";
 import Blip from "./Blip";
+import { ExtendedBlock } from "../../useErigonHooks";
+import { useChainInfo } from "../../useChainInfo";
 
 const ELASTICITY_MULTIPLIER = 2;
 
@@ -15,6 +16,7 @@ type BlockRowProps = {
 };
 
 const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
+  const { nativeSymbol } = useChainInfo();
   const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@@ -53,10 +55,11 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
         </div>
       </div>
       <div className="text-right col-span-2">
-        {commify(formatEther(totalReward))} Ether
+        {commify(formatEther(totalReward))} {nativeSymbol}
       </div>
       <div className="text-right col-span-2 line-through text-orange-500">
-        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} Ether
+        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))}{" "}
+        {nativeSymbol}
       </div>
       <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />

src/transaction/Details.tsx

@@ -46,6 +46,7 @@ import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
 import { useContractsMetadata } from "../hooks";
 import { useTransactionError } from "../useErigonHooks";
+import { useChainInfo } from "../useChainInfo";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -86,6 +87,7 @@ const Details: React.FC<DetailsProps> = ({
   const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
 
   const { provider } = useContext(RuntimeContext);
+  const { nativeName, nativeSymbol } = useChainInfo();
   const addresses = useMemo(() => {
     const _addresses: ChecksummedAddress[] = [];
     if (txData.to) {
@@ -313,7 +315,7 @@ const Details: React.FC<DetailsProps> = ({
         </InfoRow>
       )}
       <InfoRow title="Value">
-        <FormattedBalance value={txData.value} /> Ether{" "}
+        <FormattedBalance value={txData.value} /> {nativeSymbol}{" "}
         {!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} />
@@ -336,7 +338,8 @@ const Details: React.FC<DetailsProps> = ({
       {txData.type === 2 && (
         <>
           <InfoRow title="Max Priority Fee Per Gas">
-            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxPriorityFeePerGas!} />{" "}
+            {nativeSymbol} (
             <FormattedBalance
               value={txData.maxPriorityFeePerGas!}
               decimals={9}
@@ -344,7 +347,7 @@ const Details: React.FC<DetailsProps> = ({
             Gwei)
           </InfoRow>
           <InfoRow title="Max Fee Per Gas">
-            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxFeePerGas!} /> {nativeSymbol} (
             <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
           </InfoRow>
         </>
@@ -353,7 +356,7 @@ const Details: React.FC<DetailsProps> = ({
         <InfoRow title="Gas Price">
           <div className="flex items-baseline space-x-1">
             <span>
-              <FormattedBalance value={txData.gasPrice} /> Ether (
+              <FormattedBalance value={txData.gasPrice} /> {nativeSymbol} (
               <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
             </span>
             {sendsEthToMiner && (
@@ -404,7 +407,8 @@ const Details: React.FC<DetailsProps> = ({
           <InfoRow title="Transaction Fee">
             <div className="space-y-3">
               <div>
-                <FormattedBalance value={txData.confirmedData.fee} /> Ether{" "}
+                <FormattedBalance value={txData.confirmedData.fee} />{" "}
+                {nativeSymbol}{" "}
                 {ethUSDPrice && (
                   <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
                     <ETH2USDValue
@@ -417,7 +421,7 @@ const Details: React.FC<DetailsProps> = ({
               {hasEIP1559 && <RewardSplit txData={txData} />}
             </div>
           </InfoRow>
-          <InfoRow title="Ether Price">
+          <InfoRow title={`${nativeName} Price`}>
             <USDValue value={ethUSDPrice} />
           </InfoRow>
         </>

src/transaction/RewardSplit.tsx

@@ -3,14 +3,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import FormattedBalance from "../components/FormattedBalance";
-import { TransactionData } from "../types";
 import PercentageGauge from "../components/PercentageGauge";
+import { TransactionData } from "../types";
+import { useChainInfo } from "../useChainInfo";
 
 type RewardSplitProps = {
   txData: TransactionData;
 };
 
 const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
+  const { nativeSymbol } = useChainInfo();
   const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed);
   const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul(
     txData.confirmedData!.gasUsed
@@ -39,7 +41,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
               <span className="line-through">
                 <FormattedBalance value={burntFees} />
               </span>{" "}
-              Ether
+              {nativeSymbol}
             </span>
           </span>
         </div>
@@ -55,7 +57,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
               <FontAwesomeIcon icon={faCoins} size="1x" />
             </span>
             <span>
-              <FormattedBalance value={minerReward} /> Ether
+              <FormattedBalance value={minerReward} /> {nativeSymbol}
             </span>
           </span>
         </div>

src/transaction/Trace.tsx

@@ -24,12 +24,7 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
             </div>
             <div className="ml-5 space-y-3 self-stretch">
               {traces.map((t, i, a) => (
-                <TraceItem
+                <TraceItem key={i} t={t} last={i === a.length - 1} />
-                  key={i}
-                  t={t}
-                  last={i === a.length - 1}
-                  txData={txData}
-                />
               ))}
             </div>
           </>

src/transaction/TraceInput.tsx

@@ -12,14 +12,14 @@ import {
   use4Bytes,
   useTransactionDescription,
 } from "../use4Bytes";
-import { TransactionData } from "../types";
+import { useChainInfo } from "../useChainInfo";
 
 type TraceInputProps = {
   t: TraceEntry;
-  txData: TransactionData;
 };
 
-const TraceInput: React.FC<TraceInputProps> = ({ t, txData }) => {
+const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
+  const { nativeSymbol } = useChainInfo();
   const raw4Bytes = extract4Bytes(t.input);
   const fourBytes = use4Bytes(raw4Bytes);
   const sigText =
@@ -57,7 +57,9 @@ const TraceInput: React.FC<TraceInputProps> = ({ t, txData }) => {
                 <FunctionSignature callType={t.type} sig={sigText} />
                 {t.value && !t.value.isZero() && (
                   <span className="text-red-700 whitespace-nowrap">
-                    {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
+                    {"{"}value: <FormattedBalance value={t.value} />{" "}
+                    {nativeSymbol}
+                    {"}"}
                   </span>
                 )}
                 <span className="whitespace-nowrap">

src/transaction/TraceItem.tsx

@@ -5,15 +5,13 @@ import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare
 import { Switch } from "@headlessui/react";
 import { TraceGroup } from "../useErigonHooks";
 import TraceInput from "./TraceInput";
-import { TransactionData } from "../types";
 
 type TraceItemProps = {
   t: TraceGroup;
   last: boolean;
-  txData: TransactionData;
 };
 
-const TraceItem: React.FC<TraceItemProps> = ({ t, last, txData }) => {
+const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
   const [expanded, setExpanded] = useState<boolean>(true);
 
   return (
@@ -35,7 +33,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last, txData }) => {
             />
           </Switch>
         )}
-        <TraceInput t={t} txData={txData} />
+        <TraceInput t={t} />
       </div>
       {t.children && (
         <div
@@ -43,7 +41,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last, txData }) => {
             expanded ? "" : "hidden"
           }`}
         >
-          <TraceChildren c={t.children} txData={txData} />
+          <TraceChildren c={t.children} />
         </div>
       )}
     </>
@@ -52,19 +50,16 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last, txData }) => {
 
 type TraceChildrenProps = {
   c: TraceGroup[];
-  txData: TransactionData;
 };
 
-const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
+const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
-  ({ c, txData }) => {
   return (
     <>
       {c.map((tc, i, a) => (
-          <TraceItem key={i} t={tc} last={i === a.length - 1} txData={txData} />
+        <TraceItem key={i} t={tc} last={i === a.length - 1} />
       ))}
     </>
   );
-  }
+});
-);
 
 export default TraceItem;

src/url.ts

@@ -15,6 +15,11 @@ export const tokenLogoURL = (
   address: string
 ): string => `${assetsURLPrefix}/assets/${chainId}/${address}/logo.png`;
 
+export const chainInfoURL = (
+  assetsURLPrefix: string,
+  chainId: number
+): string => `${assetsURLPrefix}/chains/eip155-${chainId}.json`;
+
 export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`;
 
 export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`;

src/useChainInfo.ts

@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { chainInfoURL } from "./url";
+import { OtterscanRuntime } from "./useRuntime";
+
+export type ChainInfo = {
+  nativeName: string;
+  nativeSymbol: string;
+  nativeDecimals: number;
+};
+
+export const defaultChainInfo: ChainInfo = {
+  nativeName: "Ether",
+  nativeSymbol: "ETH",
+  nativeDecimals: 18,
+};
+
+export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined);
+
+export const useChainInfoFromMetadataFile = (
+  runtime: OtterscanRuntime | undefined
+): ChainInfo | undefined => {
+  const assetsURLPrefix = runtime?.config?.assetsURLPrefix;
+  const chainId = runtime?.provider?.network.chainId;
+
+  const [chainInfo, setChainInfo] = useState<ChainInfo | undefined>(undefined);
+
+  useEffect(() => {
+    if (chainId === undefined) {
+      setChainInfo(undefined);
+      return;
+    }
+
+    const readChainInfo = async () => {
+      const res = await fetch(chainInfoURL(assetsURLPrefix!, chainId));
+      if (!res.ok) {
+        setChainInfo(defaultChainInfo);
+        return;
+      }
+      const info = await res.json();
+
+      setChainInfo({
+        nativeName: info.nativeCurrency.name,
+        nativeDecimals: info.nativeCurrency.decimals,
+        nativeSymbol: info.nativeCurrency.symbol,
+      });
+    };
+    readChainInfo();
+  }, [assetsURLPrefix, chainId]);
+
+  return chainInfo;
+};
+
+export const useChainInfo = (): ChainInfo => {
+  const chainInfo = useContext(ChainInfoContext);
+  if (chainInfo === undefined) {
+    throw new Error("no chain info");
+  }
+  return chainInfo;
+};