Parameterize components by chain native name/token symbol/decimals

2022-03-25 21:38:12 -03:00 · 2022-03-25 21:38:12 -03:00 · 4b85cc8cd5
parent f14e8590d1
commit 4b85cc8cd5
12 changed files with 127 additions and 68 deletions
--- a/src/App.tsx
+++ b/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, defaultChainInfo } from "./useChainInfo";

 const Block = React.lazy(
  () => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block")
@ -50,6 +51,7 @@ const App = () => {
        />
      ) : (
        <RuntimeContext.Provider value={runtime}>
+          <ChainInfoContext.Provider value={defaultChainInfo}>
            <div className="h-screen flex flex-col">
              <WarningHeader />
              <Router>
@ -57,7 +59,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 +78,7 @@ const App = () => {
              </Router>
              <Footer />
            </div>
+          </ChainInfoContext.Provider>
        </RuntimeContext.Provider>
      )}
    </Suspense>
--- a/src/Block.tsx
+++ b/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">
--- a/src/PriceBox.tsx
+++ b/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 && (
            <>
--- a/src/components/InternalSelfDestruct.tsx
+++ b/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}>
--- a/src/components/InternalTransfer.tsx
+++ b/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}>
--- a/src/components/TransactionValue.tsx
+++ b/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>
  );
 };
--- a/src/components/USDValue.tsx
+++ b/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);
--- a/src/special/london/BlockRow.tsx
+++ b/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} />
--- a/src/transaction/Details.tsx
+++ b/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>
        </>
--- a/src/transaction/RewardSplit.tsx
+++ b/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>
--- a/src/transaction/TraceInput.tsx
+++ b/src/transaction/TraceInput.tsx
@ -12,6 +12,7 @@ import {
  use4Bytes,
  useTransactionDescription,
 } from "../use4Bytes";
+import { useChainInfo } from "../useChainInfo";
 import { TransactionData } from "../types";

 type TraceInputProps = {
@ -20,6 +21,7 @@ type TraceInputProps = {
 };

 const TraceInput: React.FC<TraceInputProps> = ({ t, txData }) => {
+  const { nativeSymbol } = useChainInfo();
  const raw4Bytes = extract4Bytes(t.input);
  const fourBytes = use4Bytes(raw4Bytes);
  const sigText =
@ -57,7 +59,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">
--- a/src/useChainInfo.ts
+++ b/src/useChainInfo.ts
@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+
+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 useChainInfo = (): ChainInfo => {
+  const chainInfo = useContext(ChainInfoContext);
+  if (chainInfo === undefined) {
+    throw new Error("no chain info");
+  }
+  return chainInfo;
+};