Merge branch 'feature/chain-params' into develop

This commit is contained in:
Willian Mitsuda 2022-03-28 15:36:52 -03:00
commit c9debd585b
21 changed files with 233 additions and 97 deletions

View File

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

4
.gitmodules vendored
View File

@ -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

View File

@ -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/

1
chains Submodule

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

View File

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

View File

@ -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-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": "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)/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",

View File

@ -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,39 +41,46 @@ 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}>
<div className="h-screen flex flex-col">
<WarningHeader />
<Router>
<Routes>
<Route index element={<Home />} />
<Route path="/special/london" element={<London />} />
<Route path="*" element={<Main />}>
<Route path="block/:blockNumberOrHash" element={<Block />} />
<Route
path="block/:blockNumber/txs"
element={<BlockTransactions />}
/>
<Route path="tx/:txhash/*" element={<Transaction />} />
<Route
path="address/:addressOrName/*"
element={<Address />}
/>
<Route path="*" element={<PageNotFound />} />
</Route>
</Routes>
</Router>
<Footer />
</div>
<ChainInfoContext.Provider value={chainInfo}>
<div className="h-screen flex flex-col">
<WarningHeader />
<Router>
<Routes>
<Route index element={<Home />} />
<Route path="/special/london" element={<London />} />
<Route path="*" element={<Main />}>
<Route
path="block/:blockNumberOrHash"
element={<Block />}
/>
<Route
path="block/:blockNumber/txs"
element={<BlockTransactions />}
/>
<Route path="tx/:txhash/*" element={<Transaction />} />
<Route
path="address/:addressOrName/*"
element={<Address />}
/>
<Route path="*" element={<PageNotFound />} />
</Route>
</Routes>
</Router>
<Footer />
</div>
</ChainInfoContext.Provider>
</RuntimeContext.Provider>
)}
</Suspense>

View File

@ -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">

View File

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

View File

@ -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}>

View File

@ -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}>

View File

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

View File

@ -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 }) => (
<span className="text-sm">
{value ? (
<>
$
<span className="font-balance">
{commify(
FixedNumber.fromValue(value, ETH_FEED_DECIMALS).round(2).toString()
)}
</span>{" "}
<span className="text-xs text-gray-500">/ ETH</span>
</>
) : (
"N/A"
)}
</span>
);
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()
)}
</span>{" "}
<span className="text-xs text-gray-500">/ {nativeSymbol}</span>
</>
) : (
"N/A"
)}
</span>
);
};
export default React.memo(USDValue);

View File

@ -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} />

View File

@ -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>
</>

View File

@ -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>

View File

@ -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
key={i}
t={t}
last={i === a.length - 1}
txData={txData}
/>
<TraceItem key={i} t={t} last={i === a.length - 1} />
))}
</div>
</>

View File

@ -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">

View File

@ -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(
({ c, txData }) => {
return (
<>
{c.map((tc, i, a) => (
<TraceItem key={i} t={tc} last={i === a.length - 1} txData={txData} />
))}
</>
);
}
);
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
return (
<>
{c.map((tc, i, a) => (
<TraceItem key={i} t={tc} last={i === a.length - 1} />
))}
</>
);
});
export default TraceItem;

View File

@ -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`;

59
src/useChainInfo.ts Normal file
View File

@ -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;
};