Merge branch 'feature/chain-params' into develop
This commit is contained in:
Willian Mitsuda
commit
c9debd585b
@ -7,3 +7,5 @@ trustwallet
|
||||
!trustwallet/blockchains/ethereum/assets
|
||||
!trustwallet/blockchains/polygon/assets
|
||||
!trustwallet/blockchains/smartchain/assets
|
||||
chains
|
||||
!chains/_data/chains
|
||||
|
||||
4
.gitmodules
vendored
4
.gitmodules
vendored
@ -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
|
||||
|
||||
@ -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
1
chains
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84
|
||||
@ -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;
|
||||
|
||||
@ -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",
|
||||
|
||||
12
src/App.tsx
12
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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 && (
|
||||
<>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 }) => {
|
||||
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
|
||||
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;
|
||||
|
||||
@ -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
59
src/useChainInfo.ts
Normal 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;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user