Merge branch 'release/v2022.03.02-otterscan'
This commit is contained in:
Willian Mitsuda
commit
0f9f1e5211
|
|
@ -5,3 +5,7 @@ node_modules
|
|||
!4bytes/with_parameter_names
|
||||
trustwallet
|
||||
!trustwallet/blockchains/ethereum/assets
|
||||
!trustwallet/blockchains/polygon/assets
|
||||
!trustwallet/blockchains/smartchain/assets
|
||||
chains
|
||||
!chains/_data/chains
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
2
4bytes
2
4bytes
|
|
@ -1 +1 @@
|
|||
Subproject commit 0ee722e516c91dc6a3de01c26ea06955123eeddb
|
||||
Subproject commit 9603b20bd08ef0089a5fdca385afd3a3251d662c
|
||||
19
Dockerfile
19
Dockerfile
|
|
@ -1,4 +1,4 @@
|
|||
FROM node:16.13.0-alpine3.14 AS builder
|
||||
FROM node:16.14.0-alpine3.15 AS builder
|
||||
WORKDIR /otterscan-build
|
||||
COPY ["package.json", "package-lock.json", "/otterscan-build/"]
|
||||
RUN npm install
|
||||
|
|
@ -7,21 +7,27 @@ COPY ["public", "/otterscan-build/public/"]
|
|||
COPY ["src", "/otterscan-build/src/"]
|
||||
RUN npm run build
|
||||
|
||||
FROM alpine:3.14.0 AS logobuilder
|
||||
FROM alpine:3.15.0 AS logobuilder
|
||||
RUN apk add imagemagick parallel
|
||||
WORKDIR /assets
|
||||
COPY trustwallet/blockchains/ethereum/assets /assets/
|
||||
RUN find . -name logo.png | parallel magick convert {} -filter Lanczos -resize 32x32 {}
|
||||
COPY trustwallet/blockchains/ethereum/assets /assets/1/
|
||||
COPY trustwallet/blockchains/polygon/assets /assets/137/
|
||||
COPY trustwallet/blockchains/smartchain/assets /assets/56/
|
||||
RUN find . -name logo.png | parallel magick convert {} -filter Lanczos -resize 32x32 {}; exit 0
|
||||
|
||||
FROM alpine:3.14.0 AS fourbytesbuilder
|
||||
FROM alpine:3.15.0 AS fourbytesbuilder
|
||||
WORKDIR /signatures
|
||||
COPY 4bytes/signatures /signatures/
|
||||
COPY 4bytes/with_parameter_names /signatures/
|
||||
|
||||
FROM alpine:3.14.0 AS topic0builder
|
||||
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
|
||||
|
|
@ -85,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/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
48
package.json
48
package.json
|
|
@ -7,43 +7,43 @@
|
|||
"@blackbox-vision/react-qr-reader": "^5.0.0",
|
||||
"@chainlink/contracts": "^0.4.0",
|
||||
"@craco/craco": "^6.4.3",
|
||||
"@fontsource/fira-code": "^4.5.5",
|
||||
"@fontsource/roboto": "^4.5.3",
|
||||
"@fontsource/roboto-mono": "^4.5.3",
|
||||
"@fontsource/space-grotesk": "^4.5.3",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.1.17",
|
||||
"@headlessui/react": "^1.4.3",
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@fontsource/fira-code": "^4.5.8",
|
||||
"@fontsource/roboto": "^4.5.5",
|
||||
"@fontsource/roboto-mono": "^4.5.5",
|
||||
"@fontsource/space-grotesk": "^4.5.5",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@fortawesome/react-fontawesome": "^0.1.18",
|
||||
"@headlessui/react": "^1.5.0",
|
||||
"@testing-library/jest-dom": "^5.16.3",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/node": "^16.11.14",
|
||||
"@types/react": "^17.0.39",
|
||||
"@types/react": "^17.0.43",
|
||||
"@types/react-blockies": "^1.4.1",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-dom": "^17.0.14",
|
||||
"@types/react-highlight": "^0.12.5",
|
||||
"@types/react-syntax-highlighter": "^13.5.2",
|
||||
"chart.js": "^3.7.1",
|
||||
"ethers": "^5.5.4",
|
||||
"highlightjs-solidity": "^2.0.4",
|
||||
"ethers": "^5.6.1",
|
||||
"highlightjs-solidity": "^2.0.5",
|
||||
"react": "^17.0.2",
|
||||
"react-blockies": "^1.4.1",
|
||||
"react-chartjs-2": "^4.0.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-error-boundary": "^3.1.4",
|
||||
"react-helmet-async": "^1.1.2",
|
||||
"react-helmet-async": "^1.2.3",
|
||||
"react-image": "^4.0.3",
|
||||
"react-router-dom": "^6.2.1",
|
||||
"react-router-dom": "^6.2.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-syntax-highlighter": "^15.4.5",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"serve": "^13.0.2",
|
||||
"swr": "^1.2.1",
|
||||
"typescript": "^4.5.5",
|
||||
"use-keyboard-shortcut": "^1.1.3",
|
||||
"swr": "^1.2.2",
|
||||
"typescript": "^4.6.3",
|
||||
"use-keyboard-shortcut": "^1.1.4",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
@ -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 -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 -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",
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.8.8",
|
||||
"compress-create-react-app": "^1.1.3",
|
||||
"compress-create-react-app": "^1.2.1",
|
||||
"postcss": "^7.0.39",
|
||||
"source-map-explorer": "^2.5.2",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
|
||||
|
|
|
|||
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 && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
t,
|
||||
tokenMeta,
|
||||
metadatas,
|
||||
}) => (
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faCaretRight} size="1x" />
|
||||
|
|
@ -35,6 +36,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
address={t.from}
|
||||
addressCtx={AddressContext.FROM}
|
||||
metadata={metadatas[t.from]}
|
||||
showCodeIndicator
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex space-x-1">
|
||||
|
|
@ -43,6 +45,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
address={t.to}
|
||||
addressCtx={AddressContext.TO}
|
||||
metadata={metadatas[t.to]}
|
||||
showCodeIndicator
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex space-x-1">
|
||||
|
|
@ -60,5 +63,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(TokenTransferItem);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { RuntimeContext } from "./useRuntime";
|
|||
import { useInternalOperations, useTxData } from "./useErigonHooks";
|
||||
import { SelectionContext, useSelection } from "./useSelection";
|
||||
import { SelectedTransactionContext } from "./useSelectedTransaction";
|
||||
import { BlockNumberContext } from "./useBlockTagContext";
|
||||
import { useETHUSDOracle } from "./usePriceOracle";
|
||||
import { useAppConfigContext } from "./useAppConfig";
|
||||
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
|
||||
|
|
@ -74,12 +75,14 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
|
|||
|
||||
return (
|
||||
<SelectedTransactionContext.Provider value={txData}>
|
||||
<BlockNumberContext.Provider value={txData?.confirmedData?.blockNumber}>
|
||||
<StandardFrame>
|
||||
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
||||
{txData === null && (
|
||||
<ContentFrame>
|
||||
<div className="py-4 text-sm">
|
||||
Transaction <span className="font-hash">{txHash}</span> not found.
|
||||
Transaction <span className="font-hash">{txHash}</span> not
|
||||
found.
|
||||
</div>
|
||||
</ContentFrame>
|
||||
)}
|
||||
|
|
@ -91,7 +94,8 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
|
|||
{txData.confirmedData?.blockNumber !== undefined && (
|
||||
<NavTab href="logs">
|
||||
Logs
|
||||
{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
|
||||
{txData &&
|
||||
` (${txData.confirmedData?.logs?.length ?? 0})`}
|
||||
</NavTab>
|
||||
)}
|
||||
<NavTab href="trace">Trace</NavTab>
|
||||
|
|
@ -124,6 +128,7 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
|
|||
</SelectionContext.Provider>
|
||||
)}
|
||||
</StandardFrame>
|
||||
</BlockNumberContext.Provider>
|
||||
</SelectedTransactionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { useParams, useSearchParams } from "react-router-dom";
|
|||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { useContractsMetadata } from "../hooks";
|
||||
import { useAddressBalance, useContractCreator } from "../useErigonHooks";
|
||||
import { BlockNumberContext } from "../useBlockTagContext";
|
||||
|
||||
type AddressTransactionResultsProps = {
|
||||
address: ChecksummedAddress;
|
||||
|
|
@ -133,6 +134,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
return (
|
||||
<ContentFrame tabs>
|
||||
<SelectionContext.Provider value={selectionCtx}>
|
||||
<BlockNumberContext.Provider value="latest">
|
||||
{balance && (
|
||||
<InfoRow title="Balance">
|
||||
<div className="space-x-2">
|
||||
|
|
@ -152,7 +154,10 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
<InfoRow title="Contract creator">
|
||||
<div className="flex divide-x-2 divide-dotted divide-gray-300">
|
||||
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
|
||||
<TransactionAddress address={creator.creator} />
|
||||
<TransactionAddress
|
||||
address={creator.creator}
|
||||
showCodeIndicator
|
||||
/>
|
||||
<Copy value={creator.creator} />
|
||||
</div>
|
||||
<div className="flex items-baseline pl-3">
|
||||
|
|
@ -161,6 +166,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
</div>
|
||||
</InfoRow>
|
||||
)}
|
||||
</BlockNumberContext.Provider>
|
||||
<NavBar address={address} page={page} controller={controller} />
|
||||
<ResultHeader
|
||||
feeDisplay={feeDisplay}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export interface IAddressResolver<T> {
|
|||
}
|
||||
|
||||
export type ResolvedAddressRenderer<T> = (
|
||||
chainId: number,
|
||||
address: string,
|
||||
resolvedAddress: T,
|
||||
linkable: boolean,
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
"0x610B717796ad172B316836AC95a2ffad065CeaB4": "Tornado Cash: 1 WBTC",
|
||||
"0xbB93e510BbCD0B7beb5A853875f9eC60275CF498": "Tornado Cash: 10 WBTC",
|
||||
"0x94A1B5CdB22c43faab4AbEb5c74999895464Ddaf": "Tornado Cash: Old Proxy",
|
||||
"0xCa0840578f57fE71599D29375e16783424023357": "Tornado Cash: Nova",
|
||||
"0x56Eddb7aa87536c09CCc2793473599fD21A8b17F": "Binance",
|
||||
"0x9696f59E4d72E237BE84fFD425DCaD154Bf96976": "Binance"
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import React, { useContext } from "react";
|
||||
import PlainAddress from "./PlainAddress";
|
||||
import { resolverRendererRegistry } from "../api/address-resolver";
|
||||
import { useResolvedAddress } from "../useResolvedAddresses";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { ChecksummedAddress } from "../types";
|
||||
|
||||
type AddressOrENSNameProps = {
|
||||
address: ChecksummedAddress;
|
||||
selectedAddress?: string;
|
||||
dontOverrideColors?: boolean;
|
||||
};
|
||||
|
||||
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
|
||||
address,
|
||||
selectedAddress,
|
||||
dontOverrideColors,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const resolvedAddress = useResolvedAddress(provider, address);
|
||||
const linkable = address !== selectedAddress;
|
||||
|
||||
if (!resolvedAddress) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const [resolver, resolvedName] = resolvedAddress;
|
||||
const renderer = resolverRendererRegistry.get(resolver);
|
||||
if (renderer === undefined) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return renderer(address, resolvedName, linkable, !!dontOverrideColors);
|
||||
};
|
||||
|
||||
export default AddressOrENSName;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import StandardSubtitle from "../StandardSubtitle";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
|
||||
type AddressOrENSNameInvalidNonceProps = {
|
||||
addressOrENSName: string;
|
||||
|
|
@ -15,7 +15,7 @@ const AddressOrENSNameInvalidNonce: React.FC<
|
|||
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
||||
<ContentFrame>
|
||||
<div className="flex py-4 text-sm">
|
||||
<AddressOrENSName address={addressOrENSName} />
|
||||
<DecoratedAddressLink address={addressOrENSName} />
|
||||
<span>: no transaction found for nonce="{nonce}".</span>
|
||||
</div>
|
||||
</ContentFrame>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import StandardSubtitle from "../StandardSubtitle";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
|
||||
type AddressOrENSNameNoTxProps = {
|
||||
addressOrENSName: string;
|
||||
|
|
@ -14,7 +14,7 @@ const AddressOrENSNameNoTx: React.FC<AddressOrENSNameNoTxProps> = ({
|
|||
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
||||
<ContentFrame>
|
||||
<div className="flex py-4 text-sm">
|
||||
<AddressOrENSName address={addressOrENSName} />
|
||||
<DecoratedAddressLink address={addressOrENSName} />
|
||||
<span>: no outbound transactions found.</span>
|
||||
</div>
|
||||
</ContentFrame>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
|
||||
|
|
@ -6,21 +6,25 @@ import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
|
|||
import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
|
||||
import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
|
||||
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
|
||||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import SourcifyLogo from "../sourcify/SourcifyLogo";
|
||||
import { AddressContext, ZERO_ADDRESS } from "../types";
|
||||
import PlainAddress from "./PlainAddress";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useResolvedAddress } from "../useResolvedAddresses";
|
||||
import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
|
||||
import { resolverRendererRegistry } from "../api/address-resolver";
|
||||
|
||||
type DecoratedAddressLinkProps = {
|
||||
address: string;
|
||||
selectedAddress?: string;
|
||||
addressCtx?: AddressContext;
|
||||
creation?: boolean;
|
||||
miner?: boolean;
|
||||
selfDestruct?: boolean;
|
||||
txFrom?: boolean;
|
||||
txTo?: boolean;
|
||||
address: ChecksummedAddress;
|
||||
selectedAddress?: ChecksummedAddress | undefined;
|
||||
addressCtx?: AddressContext | undefined;
|
||||
creation?: boolean | undefined;
|
||||
miner?: boolean | undefined;
|
||||
selfDestruct?: boolean | undefined;
|
||||
txFrom?: boolean | undefined;
|
||||
txTo?: boolean | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
eoa?: boolean | undefined;
|
||||
};
|
||||
|
||||
const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
||||
|
|
@ -33,6 +37,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
txFrom,
|
||||
txTo,
|
||||
metadata,
|
||||
eoa,
|
||||
}) => {
|
||||
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
|
||||
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
|
||||
|
|
@ -80,13 +85,84 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
<SourcifyLogo />
|
||||
</NavLink>
|
||||
)}
|
||||
<AddressOrENSName
|
||||
<ResolvedAddress
|
||||
address={address}
|
||||
selectedAddress={selectedAddress}
|
||||
dontOverrideColors={mint || burn}
|
||||
/>
|
||||
{!mint && !burn && (
|
||||
<>
|
||||
{eoa === true && (
|
||||
<AddressLegend title="Externally owned account">
|
||||
[EOA]
|
||||
</AddressLegend>
|
||||
)}
|
||||
{eoa === false && (
|
||||
<AddressLegend title="Contract account">[C]</AddressLegend>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ResolvedAddressProps = {
|
||||
address: ChecksummedAddress;
|
||||
selectedAddress?: ChecksummedAddress | undefined;
|
||||
dontOverrideColors?: boolean;
|
||||
};
|
||||
|
||||
const ResolvedAddress: React.FC<ResolvedAddressProps> = ({
|
||||
address,
|
||||
selectedAddress,
|
||||
dontOverrideColors,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const resolvedAddress = useResolvedAddress(provider, address);
|
||||
const linkable = address !== selectedAddress;
|
||||
|
||||
if (!provider || !resolvedAddress) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const [resolver, resolvedName] = resolvedAddress;
|
||||
const renderer = resolverRendererRegistry.get(resolver);
|
||||
if (renderer === undefined) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return renderer(
|
||||
provider.network.chainId,
|
||||
address,
|
||||
resolvedName,
|
||||
linkable,
|
||||
!!dontOverrideColors
|
||||
);
|
||||
};
|
||||
|
||||
type AddressLegendProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
const AddressLegend: React.FC<AddressLegendProps> = ({ title, children }) => (
|
||||
<span
|
||||
className="text-xs text-gray-400 text-opacity-70 not-italic"
|
||||
title={title}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
export default React.memo(DecoratedAddressLink);
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
|
|||
);
|
||||
|
||||
export const ensRenderer: ResolvedAddressRenderer<string> = (
|
||||
chainId,
|
||||
address,
|
||||
resolvedAddress,
|
||||
linkable,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@ const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
|
|||
</AddressHighlighter>
|
||||
</div>
|
||||
<span className="flex items-baseline text-gray-400">
|
||||
(Creator: <TransactionAddress address={internalOp.from} />)
|
||||
(Creator:{" "}
|
||||
<TransactionAddress address={internalOp.from} showCodeIndicator />)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { formatEther } from "@ethersproject/units";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
|
||||
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 = {
|
||||
|
|
@ -15,6 +18,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
txData,
|
||||
internalOp,
|
||||
}) => {
|
||||
const { nativeSymbol } = useChainInfo();
|
||||
const fromMiner =
|
||||
txData.confirmedData?.miner !== undefined &&
|
||||
internalOp.from === txData.confirmedData.miner;
|
||||
|
|
@ -22,12 +26,26 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
txData.confirmedData?.miner !== undefined &&
|
||||
internalOp.to === txData.confirmedData.miner;
|
||||
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const fromHasCode = useHasCode(
|
||||
provider,
|
||||
internalOp.from,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
internalOp.to,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-baseline space-x-1 whitespace-nowrap">
|
||||
<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}>
|
||||
|
|
@ -41,6 +59,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
miner={fromMiner}
|
||||
txFrom={internalOp.from === txData.from}
|
||||
txTo={internalOp.from === txData.to}
|
||||
eoa={fromHasCode === undefined ? undefined : !fromHasCode}
|
||||
/>
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
|
|
@ -58,6 +77,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
miner={toMiner}
|
||||
txFrom={internalOp.to === txData.from}
|
||||
txTo={internalOp.to === txData.to}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const PlainString: React.FC<PlainStringProps> = ({
|
|||
};
|
||||
|
||||
export const plainStringRenderer: ResolvedAddressRenderer<string> = (
|
||||
chainId,
|
||||
address,
|
||||
resolvedAddress,
|
||||
linkable,
|
||||
|
|
|
|||
|
|
@ -7,16 +7,17 @@ import { RuntimeContext } from "../useRuntime";
|
|||
import { ChecksummedAddress } from "../types";
|
||||
|
||||
type TokenLogoProps = {
|
||||
chainId: number;
|
||||
address: ChecksummedAddress;
|
||||
name: string;
|
||||
};
|
||||
|
||||
const TokenLogo: React.FC<TokenLogoProps> = ({ address, name }) => {
|
||||
const TokenLogo: React.FC<TokenLogoProps> = ({ chainId, address, name }) => {
|
||||
const { config } = useContext(RuntimeContext);
|
||||
|
||||
const srcList: string[] = [];
|
||||
if (config) {
|
||||
srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", address));
|
||||
srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", chainId, address));
|
||||
}
|
||||
const { src, isLoading } = useImage({ srcList, useSuspense: false });
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolve
|
|||
import { TokenMeta } from "../types";
|
||||
|
||||
type TokenNameProps = {
|
||||
chainId: number;
|
||||
address: string;
|
||||
name: string;
|
||||
symbol: string;
|
||||
|
|
@ -13,6 +14,7 @@ type TokenNameProps = {
|
|||
};
|
||||
|
||||
const TokenName: React.FC<TokenNameProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
name,
|
||||
symbol,
|
||||
|
|
@ -29,6 +31,7 @@ const TokenName: React.FC<TokenNameProps> = ({
|
|||
title={`${name} (${symbol}): ${address}`}
|
||||
>
|
||||
<Content
|
||||
chainId={chainId}
|
||||
address={address}
|
||||
linkable={true}
|
||||
name={name}
|
||||
|
|
@ -43,12 +46,19 @@ const TokenName: React.FC<TokenNameProps> = ({
|
|||
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
|
||||
title={`${name} (${symbol}): ${address}`}
|
||||
>
|
||||
<Content address={address} linkable={false} name={name} symbol={symbol} />
|
||||
<Content
|
||||
chainId={chainId}
|
||||
address={address}
|
||||
linkable={false}
|
||||
name={name}
|
||||
symbol={symbol}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ContentProps = {
|
||||
chainId: number;
|
||||
address: string;
|
||||
name: string;
|
||||
symbol: string;
|
||||
|
|
@ -56,6 +66,7 @@ type ContentProps = {
|
|||
};
|
||||
|
||||
const Content: React.FC<ContentProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
name,
|
||||
symbol,
|
||||
|
|
@ -65,7 +76,7 @@ const Content: React.FC<ContentProps> = ({
|
|||
<div
|
||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
||||
>
|
||||
<TokenLogo address={address} name={name} />
|
||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||
</div>
|
||||
<span className="truncate">
|
||||
{name} ({symbol})
|
||||
|
|
@ -74,12 +85,14 @@ const Content: React.FC<ContentProps> = ({
|
|||
);
|
||||
|
||||
export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
|
||||
chainId,
|
||||
address,
|
||||
tokenMeta,
|
||||
linkable,
|
||||
dontOverrideColors
|
||||
) => (
|
||||
<TokenName
|
||||
chainId={chainId}
|
||||
address={address}
|
||||
name={tokenMeta.name}
|
||||
symbol={tokenMeta.symbol}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,42 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import AddressHighlighter from "./AddressHighlighter";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
import { useSelectedTransaction } from "../useSelectedTransaction";
|
||||
import { AddressContext } from "../types";
|
||||
import { useBlockNumberContext } from "../useBlockTagContext";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
import { AddressContext, ChecksummedAddress } from "../types";
|
||||
|
||||
type TransactionAddressProps = {
|
||||
address: string;
|
||||
address: ChecksummedAddress;
|
||||
addressCtx?: AddressContext | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
showCodeIndicator?: boolean;
|
||||
};
|
||||
|
||||
const TransactionAddress: React.FC<TransactionAddressProps> = ({
|
||||
address,
|
||||
addressCtx,
|
||||
metadata,
|
||||
showCodeIndicator = false,
|
||||
}) => {
|
||||
const txData = useSelectedTransaction();
|
||||
// TODO: push down creation coloring logic into DecoratedAddressLink
|
||||
const creation = address === txData?.confirmedData?.createdContractAddress;
|
||||
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const blockNumber = useBlockNumberContext();
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
address,
|
||||
blockNumber !== undefined
|
||||
? blockNumber === "latest"
|
||||
? "latest"
|
||||
: blockNumber - 1
|
||||
: undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<AddressHighlighter address={address}>
|
||||
<DecoratedAddressLink
|
||||
|
|
@ -30,6 +47,11 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
|
|||
txTo={address === txData?.to || creation}
|
||||
creation={creation}
|
||||
metadata={metadata}
|
||||
eoa={
|
||||
showCodeIndicator && blockNumber !== undefined
|
||||
? !toHasCode
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from "../api/address-resolver/UniswapV1Resolver";
|
||||
|
||||
type UniswapV1ExchangeNameProps = {
|
||||
chainId: number;
|
||||
address: string;
|
||||
token: UniswapV1TokenMeta;
|
||||
linkable: boolean;
|
||||
|
|
@ -16,6 +17,7 @@ type UniswapV1ExchangeNameProps = {
|
|||
};
|
||||
|
||||
const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
token,
|
||||
linkable,
|
||||
|
|
@ -32,10 +34,11 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
|
|||
>
|
||||
<span>Uniswap V1 LP:</span>
|
||||
<Content
|
||||
linkable={true}
|
||||
chainId={chainId}
|
||||
address={token.address}
|
||||
name={token.name}
|
||||
symbol={token.symbol}
|
||||
linkable
|
||||
/>
|
||||
</NavLink>
|
||||
);
|
||||
|
|
@ -48,7 +51,7 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
|
|||
>
|
||||
<span>Uniswap V1 LP:</span>
|
||||
<Content
|
||||
linkable={false}
|
||||
chainId={chainId}
|
||||
address={token.address}
|
||||
name={token.name}
|
||||
symbol={token.symbol}
|
||||
|
|
@ -58,13 +61,15 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
|
|||
};
|
||||
|
||||
type ContentProps = {
|
||||
linkable: boolean;
|
||||
chainId: number;
|
||||
address: ChecksummedAddress;
|
||||
name: string;
|
||||
symbol: string;
|
||||
linkable?: boolean;
|
||||
};
|
||||
|
||||
const Content: React.FC<ContentProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
name,
|
||||
symbol,
|
||||
|
|
@ -74,15 +79,17 @@ const Content: React.FC<ContentProps> = ({
|
|||
<div
|
||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
||||
>
|
||||
<TokenLogo address={address} name={name} />
|
||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||
</div>
|
||||
<span>{symbol}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
export const uniswapV1PairRenderer: ResolvedAddressRenderer<UniswapV1PairMeta> =
|
||||
(address, tokenMeta, linkable, dontOverrideColors) => (
|
||||
export const uniswapV1PairRenderer: ResolvedAddressRenderer<
|
||||
UniswapV1PairMeta
|
||||
> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
|
||||
<UniswapV1ExchangeName
|
||||
chainId={chainId}
|
||||
address={address}
|
||||
token={tokenMeta.token}
|
||||
linkable={linkable}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
import { ChecksummedAddress } from "../types";
|
||||
|
||||
type UniswapV2PairNameProps = {
|
||||
chainId: number;
|
||||
address: string;
|
||||
token0: UniswapV2TokenMeta;
|
||||
token1: UniswapV2TokenMeta;
|
||||
|
|
@ -17,6 +18,7 @@ type UniswapV2PairNameProps = {
|
|||
};
|
||||
|
||||
const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
token0,
|
||||
token1,
|
||||
|
|
@ -34,17 +36,19 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
|
|||
>
|
||||
<span>Uniswap V2 LP:</span>
|
||||
<Content
|
||||
linkable={true}
|
||||
chainId={chainId}
|
||||
address={token0.address}
|
||||
name={token0.name}
|
||||
symbol={token0.symbol}
|
||||
linkable
|
||||
/>
|
||||
<span>/</span>
|
||||
<Content
|
||||
linkable={true}
|
||||
chainId={chainId}
|
||||
address={token1.address}
|
||||
name={token1.name}
|
||||
symbol={token1.symbol}
|
||||
linkable
|
||||
/>
|
||||
</NavLink>
|
||||
);
|
||||
|
|
@ -57,14 +61,14 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
|
|||
>
|
||||
<span>Uniswap V2 LP:</span>
|
||||
<Content
|
||||
linkable={false}
|
||||
chainId={chainId}
|
||||
address={token0.address}
|
||||
name={token0.name}
|
||||
symbol={token0.symbol}
|
||||
/>
|
||||
<span>/</span>
|
||||
<Content
|
||||
linkable={false}
|
||||
chainId={chainId}
|
||||
address={token1.address}
|
||||
name={token1.name}
|
||||
symbol={token1.symbol}
|
||||
|
|
@ -74,13 +78,15 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
|
|||
};
|
||||
|
||||
type ContentProps = {
|
||||
linkable: boolean;
|
||||
chainId: number;
|
||||
address: ChecksummedAddress;
|
||||
name: string;
|
||||
symbol: string;
|
||||
linkable?: boolean;
|
||||
};
|
||||
|
||||
const Content: React.FC<ContentProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
name,
|
||||
symbol,
|
||||
|
|
@ -90,15 +96,17 @@ const Content: React.FC<ContentProps> = ({
|
|||
<div
|
||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
||||
>
|
||||
<TokenLogo address={address} name={name} />
|
||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||
</div>
|
||||
<span>{symbol}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
export const uniswapV2PairRenderer: ResolvedAddressRenderer<UniswapV2PairMeta> =
|
||||
(address, tokenMeta, linkable, dontOverrideColors) => (
|
||||
export const uniswapV2PairRenderer: ResolvedAddressRenderer<
|
||||
UniswapV2PairMeta
|
||||
> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
|
||||
<UniswapV2PairName
|
||||
chainId={chainId}
|
||||
address={address}
|
||||
token0={tokenMeta.token0}
|
||||
token1={tokenMeta.token1}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
import { ChecksummedAddress } from "../types";
|
||||
|
||||
type UniswapV3PoolNameProps = {
|
||||
chainId: number;
|
||||
address: string;
|
||||
token0: UniswapV3TokenMeta;
|
||||
token1: UniswapV3TokenMeta;
|
||||
|
|
@ -18,6 +19,7 @@ type UniswapV3PoolNameProps = {
|
|||
};
|
||||
|
||||
const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
token0,
|
||||
token1,
|
||||
|
|
@ -38,17 +40,19 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
|
|||
>
|
||||
<span>Uniswap V3 LP:</span>
|
||||
<Content
|
||||
linkable={true}
|
||||
chainId={chainId}
|
||||
address={token0.address}
|
||||
name={token0.name}
|
||||
symbol={token0.symbol}
|
||||
linkable
|
||||
/>
|
||||
<span>/</span>
|
||||
<Content
|
||||
linkable={true}
|
||||
chainId={chainId}
|
||||
address={token1.address}
|
||||
name={token1.name}
|
||||
symbol={token1.symbol}
|
||||
linkable
|
||||
/>
|
||||
<span>/ {fee / 10000}%</span>
|
||||
</NavLink>
|
||||
|
|
@ -64,14 +68,14 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
|
|||
>
|
||||
<span>Uniswap V3 LP:</span>
|
||||
<Content
|
||||
linkable={false}
|
||||
chainId={chainId}
|
||||
address={token0.address}
|
||||
name={token0.name}
|
||||
symbol={token0.symbol}
|
||||
/>
|
||||
<span>/</span>
|
||||
<Content
|
||||
linkable={false}
|
||||
chainId={chainId}
|
||||
address={token1.address}
|
||||
name={token1.name}
|
||||
symbol={token1.symbol}
|
||||
|
|
@ -82,13 +86,15 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
|
|||
};
|
||||
|
||||
type ContentProps = {
|
||||
linkable: boolean;
|
||||
chainId: number;
|
||||
address: ChecksummedAddress;
|
||||
name: string;
|
||||
symbol: string;
|
||||
linkable?: boolean;
|
||||
};
|
||||
|
||||
const Content: React.FC<ContentProps> = ({
|
||||
chainId,
|
||||
address,
|
||||
name,
|
||||
symbol,
|
||||
|
|
@ -98,15 +104,17 @@ const Content: React.FC<ContentProps> = ({
|
|||
<div
|
||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
||||
>
|
||||
<TokenLogo address={address} name={name} />
|
||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||
</div>
|
||||
<span>{symbol}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
export const uniswapV3PairRenderer: ResolvedAddressRenderer<UniswapV3PairMeta> =
|
||||
(address, tokenMeta, linkable, dontOverrideColors) => (
|
||||
export const uniswapV3PairRenderer: ResolvedAddressRenderer<
|
||||
UniswapV3PairMeta
|
||||
> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
|
||||
<UniswapV3PairName
|
||||
chainId={chainId}
|
||||
address={address}
|
||||
token0={tokenMeta.token0}
|
||||
token1={tokenMeta.token1}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { BlockTag } from "@ethersproject/abstract-provider";
|
||||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
|
@ -16,6 +16,8 @@ import TransactionDirection, {
|
|||
import TransactionValue from "../components/TransactionValue";
|
||||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { FeeDisplay } from "./useFeeToggler";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { formatValue } from "../components/formatter";
|
||||
import ETH2USDValue from "../components/ETH2USDValue";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
|
|
@ -35,6 +37,13 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
priceMap,
|
||||
metadatas,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
tx.to ?? undefined,
|
||||
tx.blockNumber - 1
|
||||
);
|
||||
|
||||
let direction: Direction | undefined;
|
||||
if (selectedAddress) {
|
||||
if (tx.from === selectedAddress && tx.to === selectedAddress) {
|
||||
|
|
@ -107,6 +116,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress={selectedAddress}
|
||||
miner={tx.miner === tx.to}
|
||||
metadata={metadatas[tx.to]}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
) : (
|
||||
|
|
@ -116,6 +126,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress={selectedAddress}
|
||||
creation
|
||||
metadata={metadatas[tx.createdContractAddress!]}
|
||||
eoa={false}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -264,6 +266,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<TransactionAddress
|
||||
address={txData.to}
|
||||
metadata={metadatas?.[txData.to]}
|
||||
showCodeIndicator
|
||||
/>
|
||||
<Copy value={txData.to} />
|
||||
</div>
|
||||
|
|
@ -312,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} />
|
||||
|
|
@ -335,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}
|
||||
|
|
@ -343,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>
|
||||
</>
|
||||
|
|
@ -352,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 && (
|
||||
|
|
@ -403,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
|
||||
|
|
@ -416,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>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,14 @@ import {
|
|||
use4Bytes,
|
||||
useTransactionDescription,
|
||||
} from "../use4Bytes";
|
||||
import { useChainInfo } from "../useChainInfo";
|
||||
|
||||
type TraceInputProps = {
|
||||
t: TraceEntry;
|
||||
};
|
||||
|
||||
const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
|
||||
const { nativeSymbol } = useChainInfo();
|
||||
const raw4Bytes = extract4Bytes(t.input);
|
||||
const fourBytes = use4Bytes(raw4Bytes);
|
||||
const sigText =
|
||||
|
|
@ -47,7 +49,7 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
|
|||
) : (
|
||||
<>
|
||||
<span>
|
||||
<TransactionAddress address={t.to} />
|
||||
<TransactionAddress address={t.to} showCodeIndicator />
|
||||
</span>
|
||||
{t.type !== "CREATE" && t.type !== "CREATE2" && (
|
||||
<>
|
||||
|
|
@ -55,7 +57,9 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
|
|||
<FunctionSignature callType={t.type} sig={sigText} />
|
||||
{t.value && !t.value.isZero() && (
|
||||
<span className="text-red-700 whitespace-nowrap">
|
||||
{"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
|
||||
{"{"}value: <FormattedBalance value={t.value} />{" "}
|
||||
{nativeSymbol}
|
||||
{"}"}
|
||||
</span>
|
||||
)}
|
||||
<span className="whitespace-nowrap">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import React from "react";
|
||||
import TransactionAddress from "../../components/TransactionAddress";
|
||||
import Copy from "../../components/Copy";
|
||||
import { ChecksummedAddress } from "../../types";
|
||||
|
||||
type AddressDecoderProps = {
|
||||
r: string;
|
||||
r: ChecksummedAddress;
|
||||
};
|
||||
|
||||
const AddressDecoder: React.FC<AddressDecoderProps> = ({ r }) => (
|
||||
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
|
||||
<TransactionAddress address={r} />
|
||||
<TransactionAddress address={r} showCodeIndicator />
|
||||
<Copy value={r} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
10
src/url.ts
10
src/url.ts
|
|
@ -11,8 +11,14 @@ export const topic0URL = (assetsURLPrefix: string, topic0: string): string =>
|
|||
|
||||
export const tokenLogoURL = (
|
||||
assetsURLPrefix: string,
|
||||
chainId: number,
|
||||
address: string
|
||||
): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
|
||||
): 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}`;
|
||||
|
||||
|
|
@ -67,4 +73,4 @@ export const sourcifySourceFile = (
|
|||
)}/contracts/full_match/${chainId}/${address}/sources/${filepath}`;
|
||||
|
||||
export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
|
||||
`https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;
|
||||
`https://remix.ethereum.org/#activate=sourcify&call=sourcify//fetchAndSave//${checksummedAddress}//${networkId}`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { createContext, useContext } from "react";
|
||||
|
||||
/**
|
||||
* This context means child components have a temporal context expressed in
|
||||
* terms of BlockTag.
|
||||
*
|
||||
* One obvious example is: child components want to show an UI indicator if
|
||||
* the address is an EOA or contract. But if this address is currently a
|
||||
* contract and it is an UI element of an existing transaction, it may be that
|
||||
* at the time (block) the transaction happened it was still an EOA (create2),
|
||||
* so it should be displayed as an EOA.
|
||||
*/
|
||||
export const BlockNumberContext = createContext<number | "latest" | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
export const useBlockNumberContext = () => useContext(BlockNumberContext);
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
|
||||
import {
|
||||
Block,
|
||||
BlockWithTransactions,
|
||||
BlockTag,
|
||||
} from "@ethersproject/abstract-provider";
|
||||
import { JsonRpcProvider } from "@ethersproject/providers";
|
||||
import { getAddress } from "@ethersproject/address";
|
||||
import { Contract } from "@ethersproject/contracts";
|
||||
|
|
@ -7,6 +11,7 @@ import { defaultAbiCoder } from "@ethersproject/abi";
|
|||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
|
||||
import useSWR, { useSWRConfig } from "swr";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
import { getInternalOperations } from "./nodeFunctions";
|
||||
import {
|
||||
TokenMetas,
|
||||
|
|
@ -679,3 +684,43 @@ export const useAddressBalance = (
|
|||
|
||||
return balance;
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a generic fetch for SWR, where the key is an array, whose
|
||||
* element 0 is the JSON-RPC method, and the remaining are the method
|
||||
* arguments.
|
||||
*/
|
||||
export const providerFetcher =
|
||||
(provider: JsonRpcProvider | undefined) =>
|
||||
async (...key: any[]): Promise<any | undefined> => {
|
||||
if (provider === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
for (const a of key) {
|
||||
if (a === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
const method = key[0];
|
||||
const args = key.slice(1);
|
||||
const result = await provider.send(method, args);
|
||||
// console.log(`providerFetcher: ${method} ${args} === ${result}`);
|
||||
return result;
|
||||
};
|
||||
|
||||
export const useHasCode = (
|
||||
provider: JsonRpcProvider | undefined,
|
||||
address: ChecksummedAddress | undefined,
|
||||
blockTag: BlockTag = "latest"
|
||||
): boolean | undefined => {
|
||||
const fetcher = providerFetcher(provider);
|
||||
const { data, error } = useSWRImmutable(
|
||||
["ots_hasCode", address, blockTag],
|
||||
fetcher
|
||||
);
|
||||
if (error) {
|
||||
return undefined;
|
||||
}
|
||||
return data as boolean | undefined;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 0e2488c4b4c366c0ed54d5d85b2feaa0f0940b05
|
||||
Subproject commit b8d1c58acfd93b1b698fe5854f2c09bff70e9fdf
|
||||
Loading…
Reference in New Issue