a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'release/v2021.11.03-otterscan'

This commit is contained in:
Willian Mitsuda 2021-11-22 19:10:29 -03:00
parent 53587cacf4 c2629b5830
commit 36985ed0f8
51 changed files with 1615 additions and 993 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.nvmrc
View File

@ -1 +1 @@
v14.17.3
v16.13.0

3
Dockerfile
View File

@ -1,5 +1,4 @@
FROM node:14.17.3-alpine3.14 AS builder
RUN npm i -g npm@7.19.1
FROM node:16.13.0-alpine3.14 AS builder
WORKDIR /otterscan-build
COPY ["package.json", "package-lock.json", "/otterscan-build/"]
RUN npm install

2
nginx/conf.d/default.conf
View File

@ -118,7 +118,7 @@ server {
index index.html;
try_files $uri /index.html;
brotli_static on;
# brotli_static on;
}
#error_page 404 /404.html;

2
nginx/nginx.conf
View File

@ -4,7 +4,7 @@ worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
load_module modules/ngx_http_brotli_static_module.so;
#load_module modules/ngx_http_brotli_static_module.so;
events {
worker_connections 1024;

743
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@ -7,7 +7,7 @@
"@blackbox-vision/react-qr-reader": "^5.0.0",
"@chainlink/contracts": "^0.2.2",
"@craco/craco": "^6.4.0",
"@fontsource/fira-code": "^4.5.1",
"@fontsource/fira-code": "^4.5.2",
"@fontsource/roboto": "^4.5.1",
"@fontsource/roboto-mono": "^4.5.0",
"@fontsource/space-grotesk": "^4.5.0",
@ -16,21 +16,21 @@
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@headlessui/react": "^1.4.1",
"@testing-library/jest-dom": "^5.14.1",
"@headlessui/react": "^1.4.2",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.24",
"@types/node": "^14.17.5",
"@types/react": "^17.0.33",
"@types/react": "^17.0.35",
"@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.10",
"@types/react-dom": "^17.0.11",
"@types/react-highlight": "^0.12.5",
"@types/react-router-dom": "^5.3.2",
"@types/react-syntax-highlighter": "^13.5.2",
"chart.js": "^3.5.1",
"ethers": "^5.5.1",
"highlightjs-solidity": "^2.0.1",
"highlightjs-solidity": "^2.0.2",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-blockies": "^1.4.1",
@ -41,8 +41,8 @@
"react-image": "^4.0.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-syntax-highlighter": "^15.4.4",
"serve": "^12.0.1",
"react-syntax-highlighter": "^15.4.5",
"serve": "^13.0.2",
"typescript": "^4.4.4",
"use-keyboard-shortcut": "^1.0.6",
"web-vitals": "^1.0.1"

35
src/AddressTransactions.tsx
View File

@ -31,7 +31,8 @@ import { useFeeToggler } from "./search/useFeeToggler";
import { SelectionContext, useSelection } from "./useSelection";
import { useMultipleETHUSDOracle } from "./usePriceOracle";
import { useAppConfigContext } from "./useAppConfig";
import { useSourcify } from "./useSourcify";
import { useMultipleMetadata } from "./useSourcify";
import { ChecksummedAddress } from "./types";
import SourcifyLogo from "./sourcify.svg";
type BlockParams = {
@ -181,12 +182,31 @@ const AddressTransactions: React.FC = () => {
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
const selectionCtx = useSelection();
const addresses = useMemo(() => {
const _addresses: ChecksummedAddress[] = [];
if (checksummedAddress) {
_addresses.push(checksummedAddress);
}
if (page) {
for (const t of page) {
if (t.to) {
_addresses.push(t.to);
}
}
}
return _addresses;
}, [checksummedAddress, page]);
const { sourcifySource } = useAppConfigContext();
const rawMetadata = useSourcify(
checksummedAddress,
const metadatas = useMultipleMetadata(
undefined,
addresses,
provider?.network.chainId,
sourcifySource
);
const addressMetadata =
checksummedAddress !== undefined
? metadatas[checksummedAddress]
: undefined;
return (
<StandardFrame>
@ -224,18 +244,18 @@ const AddressTransactions: React.FC = () => {
<NavTab href={`/address/${checksummedAddress}/contract`}>
<span
className={`flex items-baseline space-x-2 ${
rawMetadata === undefined ? "italic opacity-50" : ""
addressMetadata === undefined ? "italic opacity-50" : ""
}`}
>
<span>Contract</span>
{rawMetadata === undefined ? (
{addressMetadata === undefined ? (
<span className="self-center">
<FontAwesomeIcon
className="animate-spin"
icon={faCircleNotch}
/>
</span>
) : rawMetadata === null ? (
) : addressMetadata === null ? (
<span className="self-center text-red-500">
<FontAwesomeIcon icon={faQuestionCircle} />
</span>
@ -288,6 +308,7 @@ const AddressTransactions: React.FC = () => {
selectedAddress={checksummedAddress}
feeDisplay={feeDisplay}
priceMap={priceMap}
metadatas={metadatas}
/>
))}
<div className="flex justify-between items-baseline py-3">
@ -316,7 +337,7 @@ const AddressTransactions: React.FC = () => {
<Route path="/address/:addressOrName/contract" exact>
<Contracts
checksummedAddress={checksummedAddress}
rawMetadata={rawMetadata}
rawMetadata={addressMetadata}
/>
</Route>
</Switch>

33
src/TokenTransferItem.tsx
View File

@ -1,31 +1,31 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import AddressHighlighter from "./components/AddressHighlighter";
import TransactionAddress from "./components/TransactionAddress";
import ValueHighlighter from "./components/ValueHighlighter";
import DecoratedAddressLink from "./components/DecoratedAddressLink";
import FormattedBalance from "./components/FormattedBalance";
import {
AddressContext,
ChecksummedAddress,
TokenMeta,
TokenTransfer,
TransactionData,
} from "./types";
import { ResolvedAddresses } from "./api/address-resolver";
import { Metadata } from "./useSourcify";
type TokenTransferItemProps = {
t: TokenTransfer;
txData: TransactionData;
tokenMeta?: TokenMeta | undefined;
tokenMeta?: TokenMeta | null | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
};
// TODO: handle partial
const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
t,
txData,
tokenMeta,
resolvedAddresses,
metadatas,
}) => (
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
<span className="text-gray-500">
@ -34,25 +34,21 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<div className="grid grid-cols-5 gap-x-1">
<div className="flex space-x-1">
<span className="font-bold">From</span>
<AddressHighlighter address={t.from}>
<DecoratedAddressLink
<TransactionAddress
address={t.from}
addressCtx={AddressContext.FROM}
txFrom={t.from === txData.from}
txTo={t.from === txData.to}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[t.from]}
/>
</AddressHighlighter>
</div>
<div className="flex space-x-1">
<span className="font-bold">To</span>
<AddressHighlighter address={t.to}>
<DecoratedAddressLink
<TransactionAddress
address={t.to}
addressCtx={AddressContext.TO}
txFrom={t.to === txData.from}
txTo={t.to === txData.to}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[t.to]}
/>
</AddressHighlighter>
</div>
<div className="col-span-3 flex space-x-1">
<span className="font-bold">For</span>
@ -64,12 +60,11 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
/>
</ValueHighlighter>
</span>
<AddressHighlighter address={t.token}>
<DecoratedAddressLink
<TransactionAddress
address={t.token}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[t.token]}
/>
</AddressHighlighter>
</div>
</div>
</div>

16
src/Transaction.tsx
View File

@ -15,6 +15,7 @@ import {
transactionDataCollector,
useResolvedAddresses,
} from "./useResolvedAddresses";
import { SelectedTransactionContext } from "./useSelectedTransaction";
const Details = React.lazy(
() =>
@ -29,6 +30,12 @@ const Logs = React.lazy(
/* webpackChunkName: "txlogs", webpackPrefetch: true */ "./transaction/Logs"
)
);
const Trace = React.lazy(
() =>
import(
/* webpackChunkName: "txtrace", webpackPrefetch: true */ "./transaction/Trace"
)
);
type TransactionParams = {
txhash: string;
@ -76,6 +83,7 @@ const Transaction: React.FC = () => {
const txDesc = useTransactionDescription(metadata, txData);
return (
<SelectedTransactionContext.Provider value={txData}>
<StandardFrame>
<StandardSubtitle>Transaction Details</StandardSubtitle>
{txData === null && (
@ -96,6 +104,7 @@ const Transaction: React.FC = () => {
{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
</NavTab>
)}
<NavTab href={`/tx/${txhash}/trace`}>Trace</NavTab>
</Tab.List>
</Tab.Group>
<React.Suspense fallback={null}>
@ -119,11 +128,18 @@ const Transaction: React.FC = () => {
resolvedAddresses={resolvedAddresses}
/>
</Route>
<Route path="/tx/:txhash/trace" exact>
<Trace
txData={txData}
resolvedAddresses={resolvedAddresses}
/>
</Route>
</Switch>
</React.Suspense>
</SelectionContext.Provider>
)}
</StandardFrame>
</SelectedTransactionContext.Provider>
);
};

10
src/api/address-resolver/ERCTokenResolver.ts
View File

@ -11,11 +11,17 @@ export class ERCTokenResolver implements IAddressResolver<TokenMeta> {
): Promise<TokenMeta | undefined> {
const erc20Contract = new Contract(address, erc20, provider);
try {
const [name, symbol, decimals] = await Promise.all([
const [name, symbol, decimals] = (await Promise.all([
erc20Contract.name(),
erc20Contract.symbol(),
erc20Contract.decimals(),
]);
])) as [string, string, number];
// Prevent faulty tokens with empty name/symbol
if (!name.trim() || !symbol.trim()) {
return undefined;
}
return {
name,
symbol,

22
src/api/address-resolver/HardcodedAddressResolver.ts Normal file
View File

@ -0,0 +1,22 @@
import { BaseProvider } from "@ethersproject/providers";
import { IAddressResolver } from "./address-resolver";
type HardcodedAddressMap = Record<string, string | undefined>;
export class HardcodedAddressResolver implements IAddressResolver<string> {
async resolveAddress(
provider: BaseProvider,
address: string
): Promise<string | undefined> {
try {
const addressMap: HardcodedAddressMap = await import(
`./hardcoded-addresses/${provider.network.chainId}.json`
);
return addressMap[address];
} catch (err) {
// Ignore on purpose
return undefined;
}
}
}

13
src/api/address-resolver/hardcoded-addresses/1.json Normal file
View File

@ -0,0 +1,13 @@
{
"0x7d655c57f71464B6f83811C55D84009Cd9f5221C": "Gitcoin: Bulk Checkout",
"0xf2354570bE2fB420832Fb7Ff6ff0AE0dF80CF2c6": "Gitcoin: GR8 Matching Payout",
"0x3342E3737732D879743f2682A3953a730ae4F47C": "Gitcoin: GR9 Matching Payout",
"0x3ebAFfe01513164e638480404c651E885cCA0AA4": "Gitcoin: GR10 Matching Payout",
"0x0EbD2E2130b73107d0C45fF2E16c93E7e2e10e3a": "Gitcoin: GR11 Matching Payout",
"0x722122dF12D4e14e13Ac3b6895a86e84145b6967": "Tornado Cash: Proxy",
"0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95": "Uniswap V1: Factory",
"0x5C69bEe701ef814a2B6a3EDD4B1652CB9cc5aA6f": "Uniswap V2: Factory",
"0xf164fC0Ec4E93095b804a4795bBe1e041497b92a": "Uniswap V2: Router 1",
"0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D": "Uniswap V2: Router 2",
"0x1F98431c8aD98523631AE4a59f267346ea31F984": "Uniswap V3: Router"
}

5
src/api/address-resolver/index.ts
View File

@ -1,5 +1,6 @@
import { BaseProvider } from "@ethersproject/providers";
import { ensRenderer } from "../../components/ENSName";
import { plainStringRenderer } from "../../components/PlainString";
import { tokenRenderer } from "../../components/TokenName";
import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver";
import {
@ -8,16 +9,19 @@ import {
} from "./CompositeAddressResolver";
import { ENSAddressResolver } from "./ENSAddressResolver";
import { ERCTokenResolver } from "./ERCTokenResolver";
import { HardcodedAddressResolver } from "./HardcodedAddressResolver";
export type ResolvedAddresses = Record<string, SelectedResolvedName<any>>;
// Create and configure the main resolver
export const ensResolver = new ENSAddressResolver();
export const ercTokenResolver = new ERCTokenResolver();
export const hardcodedResolver = new HardcodedAddressResolver();
const _mainResolver = new CompositeAddressResolver();
_mainResolver.addResolver(ensResolver);
_mainResolver.addResolver(ercTokenResolver);
_mainResolver.addResolver(hardcodedResolver);
export const mainResolver: IAddressResolver<SelectedResolvedName<any>> =
_mainResolver;
@ -28,6 +32,7 @@ export const resolverRendererRegistry = new Map<
>();
resolverRendererRegistry.set(ensResolver, ensRenderer);
resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
resolverRendererRegistry.set(hardcodedResolver, plainStringRenderer);
// TODO: implement progressive resolving
export const batchPopulate = async (

20
src/block/BlockTransactionResults.tsx
View File

@ -9,9 +9,11 @@ import { useFeeToggler } from "../search/useFeeToggler";
import { RuntimeContext } from "../useRuntime";
import { SelectionContext, useSelection } from "../useSelection";
import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
import { ProcessedTransaction } from "../types";
import { ChecksummedAddress, ProcessedTransaction } from "../types";
import { PAGE_SIZE } from "../params";
import { useMultipleETHUSDOracle } from "../usePriceOracle";
import { useAppConfigContext } from "../useAppConfig";
import { useMultipleMetadata } from "../useSourcify";
type BlockTransactionResultsProps = {
blockTag: BlockTag;
@ -34,6 +36,21 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
const blockTags = useMemo(() => [blockTag], [blockTag]);
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
const addresses = useMemo((): ChecksummedAddress[] => {
if (!page) {
return [];
}
return page.map((t) => t.to).filter((to): to is string => to !== undefined);
}, [page]);
const { sourcifySource } = useAppConfigContext();
const metadatas = useMultipleMetadata(
undefined,
addresses,
provider?.network.chainId,
sourcifySource
);
return (
<ContentFrame>
<div className="flex justify-between items-baseline py-3">
@ -63,6 +80,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
resolvedAddresses={resolvedAddresses}
feeDisplay={feeDisplay}
priceMap={priceMap}
metadatas={metadatas}
/>
))}
<div className="flex justify-between items-baseline py-3">

38
src/components/AddressHighlighter.tsx
View File

@ -1,40 +1,22 @@
import React, { useMemo } from "react";
import { useSelectionContext } from "../useSelection";
import React from "react";
import SelectionHighlighter, { addressSelector } from "./SelectionHighlighter";
type AddressHighlighterProps = React.PropsWithChildren<{
address: string;
}>;
// TODO: replace all occurences with SelectionHighlighter and remove this component
const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
address,
children,
}) => {
const [selection, setSelection] = useSelectionContext();
const [select, deselect] = useMemo(() => {
const _select = () => {
setSelection({ type: "address", content: address });
};
const _deselect = () => {
setSelection(null);
};
return [_select, _deselect];
}, [setSelection, address]);
return (
<div
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
selection !== null &&
selection.type === "address" &&
selection.content === address
? "border-orange-400 bg-yellow-100"
: "border-transparent"
}`}
onMouseEnter={select}
onMouseLeave={deselect}
}) => (
<SelectionHighlighter
myType="address"
myContent={address}
selector={addressSelector}
>
{children}
</div>
</SelectionHighlighter>
);
};
export default React.memo(AddressHighlighter);
export default AddressHighlighter;

27
src/components/AddressLink.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import { NavLink } from "react-router-dom";
type AddressLinkProps = {
address: string;
text?: string;
dontOverrideColors?: boolean;
};
const AddressLink: React.FC<AddressLinkProps> = ({
address,
text,
dontOverrideColors,
}) => (
<NavLink
className={`${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} font-address truncate`}
to={`/address/${address}`}
>
<span className="truncate" title={text ?? address}>
{text ?? address}
</span>
</NavLink>
);
export default AddressLink;

19
src/components/DecoratedAddressLink.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
@ -8,6 +9,8 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
import AddressOrENSName from "./AddressOrENSName";
import { AddressContext, ZERO_ADDRESS } from "../types";
import { ResolvedAddresses } from "../api/address-resolver";
import { Metadata } from "../useSourcify";
import SourcifyLogo from "../sourcify.svg";
type DecoratedAddressLinkProps = {
address: string;
@ -19,6 +22,7 @@ type DecoratedAddressLinkProps = {
txFrom?: boolean;
txTo?: boolean;
resolvedAddresses?: ResolvedAddresses | undefined;
metadata?: Metadata | null | undefined;
};
const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
@ -31,6 +35,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
txFrom,
txTo,
resolvedAddresses,
metadata,
}) => {
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@ -70,6 +75,20 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
<FontAwesomeIcon icon={faCoins} size="1x" />
</span>
)}
{metadata && (
<NavLink
className="self-center flex-shrink-0 flex items-center"
to={`/address/${address}/contract`}
>
<img
src={SourcifyLogo}
alt="Sourcify logo"
title="Verified by Sourcify"
width={16}
height={16}
/>
</NavLink>
)}
<AddressOrENSName
address={address}
selectedAddress={selectedAddress}

34
src/components/ENSNameLink.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import { NavLink } from "react-router-dom";
import ENSLogo from "./ensLogo.svg";
type ENSNameLinkProps = {
name: string;
address: string;
dontOverrideColors?: boolean;
};
const ENSNameLink: React.FC<ENSNameLinkProps> = ({
name,
address,
dontOverrideColors,
}) => (
<NavLink
className={`flex items-baseline space-x-1 font-sans ${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} truncate`}
to={`/address/${name}`}
title={`${name}: ${address}`}
>
<img
className="self-center"
src={ENSLogo}
alt="ENS Logo"
width={12}
height={12}
/>
<span className="truncate">{name}</span>
</NavLink>
);
export default ENSNameLink;

31
src/components/InternalCreate.tsx
View File

@ -1,45 +1,44 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import TransactionAddress from "./TransactionAddress";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { TransactionData, InternalOperation } from "../types";
import { InternalOperation } from "../types";
import { ResolvedAddresses } from "../api/address-resolver";
type InternalCreateProps = {
txData: TransactionData;
internalOp: InternalOperation;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InternalCreate: React.FC<InternalCreateProps> = ({
txData,
internalOp,
}) => {
return (
<>
<div className="flex items-baseline space-x-1 text-xs">
resolvedAddresses,
}) => (
<div className="flex items-baseline space-x-1 whitespace-nowrap">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
</span>
<span>Contract</span>
<div className="flex items-baseline">
<AddressHighlighter address={internalOp.to}>
<DecoratedAddressLink address={internalOp.to} creation />
<DecoratedAddressLink
address={internalOp.to}
creation
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</div>
<span className="flex items-baseline text-gray-400">
(Creator:{" "}
<AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink
<TransactionAddress
address={internalOp.from}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
)
</span>
</div>
</>
);
};
export default React.memo(InternalCreate);
export default InternalCreate;

45
src/components/InternalSelfDestruct.tsx
View File

@ -1,52 +1,57 @@
import React, { useContext } from "react";
import React 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 { TransactionData, InternalOperation } from "../types";
const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
import { ResolvedAddresses } from "../api/address-resolver";
import TransactionAddress from "./TransactionAddress";
type InternalSelfDestructProps = {
txData: TransactionData;
internalOp: InternalOperation;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
txData,
internalOp,
resolvedAddresses,
}) => {
const { provider } = useContext(RuntimeContext);
const network = provider?.network;
const toMiner =
txData.confirmedData?.miner !== undefined &&
internalOp.to === txData.confirmedData.miner;
return (
<>
<div className="flex items-baseline space-x-1 text-xs">
<div className="flex items-baseline space-x-1 whitespace-nowrap">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
</span>
<span>Contract</span>
<div className="flex items-baseline">
<AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink address={internalOp.from} selfDestruct />
<DecoratedAddressLink
address={internalOp.from}
selfDestruct
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</div>
{network?.chainId === 1 && internalOp.to === CHI_ADDRESS && (
<span className="text-gray-400">(Chi Gastoken)</span>
)}
{network?.chainId === 1 && internalOp.to === GST2_ADDRESS && (
<span className="text-gray-400">(GST2 Gastoken)</span>
{internalOp.value.isZero() && (
<div className="flex items-baseline text-gray-400">
(To:{" "}
<TransactionAddress
address={internalOp.to}
resolvedAddresses={resolvedAddresses}
/>
)
</div>
)}
</div>
{!internalOp.value.isZero() && (
<div className="ml-5 flex items-baseline space-x-1 text-xs">
<div className="ml-5 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span>
@ -59,7 +64,11 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink address={internalOp.to} miner={toMiner} />
<DecoratedAddressLink
address={internalOp.to}
miner={toMiner}
resolvedAddresses={resolvedAddresses}
/>
</div>
</AddressHighlighter>
</div>
@ -69,4 +78,4 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
);
};
export default React.memo(InternalSelfDestruct);
export default InternalSelfDestruct;

11
src/components/InternalTransactionOperation.tsx
View File

@ -22,11 +22,18 @@ const InternalTransactionOperation: React.FC<InternalTransactionOperationProps>
/>
)}
{internalOp.type === OperationType.SELF_DESTRUCT && (
<InternalSelfDestruct txData={txData} internalOp={internalOp} />
<InternalSelfDestruct
txData={txData}
internalOp={internalOp}
resolvedAddresses={resolvedAddresses}
/>
)}
{(internalOp.type === OperationType.CREATE ||
internalOp.type === OperationType.CREATE2) && (
<InternalCreate txData={txData} internalOp={internalOp} />
<InternalCreate
internalOp={internalOp}
resolvedAddresses={resolvedAddresses}
/>
)}
</>
);

6
src/components/InternalTransfer.tsx
View File

@ -26,7 +26,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
internalOp.to === txData.confirmedData.miner;
return (
<div className="flex items-baseline space-x-1 text-xs">
<div className="flex items-baseline space-x-1 whitespace-nowrap">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span>
@ -44,6 +44,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
miner={fromMiner}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</div>
</AddressHighlighter>
@ -61,6 +62,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
miner={toMiner}
txFrom={internalOp.to === txData.from}
txTo={internalOp.to === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</div>
</AddressHighlighter>
@ -69,4 +71,4 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
);
};
export default React.memo(InternalTransfer);
export default InternalTransfer;

15
src/components/ModeTab.tsx
View File

@ -1,13 +1,20 @@
import React from "react";
import { Tab } from "@headlessui/react";
const ModeTab: React.FC = ({ children }) => (
type ModeTabProps = {
disabled?: boolean | undefined;
};
const ModeTab: React.FC<ModeTabProps> = ({ disabled, children }) => (
<Tab
className={({ selected }) =>
`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
selected ? "border-blue-300" : ""
}`
`border rounded-lg px-2 py-1 bg-gray-100 ${
disabled
? "border-gray-100 text-gray-300 cursor-default"
: "hover:bg-gray-200 hover:shadow text-gray-500 hover:text-gray-600"
} text-xs ${selected ? "border-blue-300" : ""}`
}
disabled={disabled}
>
{children}
</Tab>

53
src/components/PlainString.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
type PlainStringProps = {
address: string;
name: string;
linkable: boolean;
dontOverrideColors: boolean | undefined;
};
const PlainString: React.FC<PlainStringProps> = ({
address,
name,
linkable,
dontOverrideColors,
}) => {
if (linkable) {
return (
<NavLink
className={`${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} truncate`}
to={`/address/${address}`}
title={name}
>
{name}
</NavLink>
);
}
return (
<span className="text-gray-400 truncate" title={name}>
{name}
</span>
);
};
export const plainStringRenderer: ResolvedAddressRenderer<string> = (
address,
resolvedAddress,
linkable,
dontOverrideColors
) => (
<PlainString
address={address}
name={resolvedAddress}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export default PlainString;

78
src/components/SelectionHighlighter.tsx Normal file
View File

@ -0,0 +1,78 @@
import React, { useMemo } from "react";
import {
useSelectionContext,
OptionalSelection,
SelectionType,
} from "../useSelection";
export type ContentSelector = (
selection: OptionalSelection,
content: string
) => boolean;
export const genericSelector =
(type: SelectionType) =>
(selection: OptionalSelection, content: string): boolean =>
selection !== null &&
selection.type === type &&
selection.content === content;
export const addressSelector: ContentSelector = genericSelector("address");
export const functionSigSelector: ContentSelector =
genericSelector("functionSig");
type SelectionHighlighterProps = React.PropsWithChildren<{
myType: SelectionType;
myContent: string;
selector: ContentSelector;
}>;
const SelectionHighlighter: React.FC<SelectionHighlighterProps> = ({
myType,
myContent,
selector,
children,
}) => {
const [selection, setSelection] = useSelectionContext();
const [select, deselect] = useMemo(() => {
const _select = () => {
setSelection({ type: myType, content: myContent });
};
const _deselect = () => {
setSelection(null);
};
return [_select, _deselect];
}, [setSelection, myType, myContent]);
return (
<HighlighterBox
selected={selector(selection, myContent)}
select={select}
deselect={deselect}
>
{children}
</HighlighterBox>
);
};
type HighlighterBoxProps = {
selected: boolean;
select: () => void;
deselect: () => void;
};
const HighlighterBox: React.FC<HighlighterBoxProps> = React.memo(
({ selected, select, deselect, children }) => (
<div
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
selected ? "border-orange-400 bg-yellow-100" : "border-transparent"
}`}
onMouseEnter={select}
onMouseLeave={deselect}
>
{children}
</div>
)
);
export default SelectionHighlighter;

42
src/components/TransactionAddress.tsx Normal file
View File

@ -0,0 +1,42 @@
import React from "react";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { ResolvedAddresses } from "../api/address-resolver";
import { useSelectedTransaction } from "../useSelectedTransaction";
import { AddressContext } from "../types";
import { Metadata } from "../useSourcify";
type TransactionAddressProps = {
address: string;
addressCtx?: AddressContext | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
metadata?: Metadata | null | undefined;
};
const TransactionAddress: React.FC<TransactionAddressProps> = ({
address,
addressCtx,
resolvedAddresses,
metadata,
}) => {
const txData = useSelectedTransaction();
// TODO: push down creation coloring logic into DecoratedAddressLink
const creation = address === txData?.confirmedData?.createdContractAddress;
return (
<AddressHighlighter address={address}>
<DecoratedAddressLink
address={address}
addressCtx={addressCtx}
miner={address === txData?.confirmedData?.miner}
txFrom={address === txData?.from}
txTo={address === txData?.to || creation}
creation={creation}
resolvedAddresses={resolvedAddresses}
metadata={metadata}
/>
</AddressHighlighter>
);
};
export default TransactionAddress;

1
src/components/ValueHighlighter.tsx
View File

@ -6,6 +6,7 @@ type ValueHighlighterProps = React.PropsWithChildren<{
value: BigNumber;
}>;
// TODO: replace all occurences with SelectionHighlighter and remove this component
const ValueHighlighter: React.FC<ValueHighlighterProps> = ({
value,
children,

2
src/params.ts
View File

@ -1,3 +1,3 @@
export const MIN_API_LEVEL = 2;
export const MIN_API_LEVEL = 3;
export const PAGE_SIZE = 25;

7
src/search/TransactionItem.tsx
View File

@ -14,11 +14,12 @@ import TransactionDirection, {
Flags,
} from "../components/TransactionDirection";
import TransactionValue from "../components/TransactionValue";
import { ProcessedTransaction } from "../types";
import { ChecksummedAddress, ProcessedTransaction } from "../types";
import { FeeDisplay } from "./useFeeToggler";
import { formatValue } from "../components/formatter";
import ETH2USDValue from "../components/ETH2USDValue";
import { ResolvedAddresses } from "../api/address-resolver";
import { Metadata } from "../useSourcify";
type TransactionItemProps = {
tx: ProcessedTransaction;
@ -26,6 +27,7 @@ type TransactionItemProps = {
selectedAddress?: string;
feeDisplay: FeeDisplay;
priceMap: Record<BlockTag, BigNumber>;
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
};
const TransactionItem: React.FC<TransactionItemProps> = ({
@ -34,6 +36,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
selectedAddress,
feeDisplay,
priceMap,
metadatas,
}) => {
let direction: Direction | undefined;
if (selectedAddress) {
@ -105,6 +108,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
selectedAddress={selectedAddress}
miner={tx.miner === tx.to}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[tx.to]}
/>
</AddressHighlighter>
) : (
@ -114,6 +118,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
selectedAddress={selectedAddress}
creation
resolvedAddresses={resolvedAddresses}
metadata={metadatas[tx.createdContractAddress!]}
/>
</AddressHighlighter>
)}

167
src/transaction/Details.tsx
View File

@ -1,12 +1,6 @@
import React, { useMemo } from "react";
import {
TransactionDescription,
Fragment,
Interface,
} from "@ethersproject/abi";
import React, { useContext, useMemo } from "react";
import { TransactionDescription } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { toUtf8String } from "@ethersproject/strings";
import { Tab } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@ -15,8 +9,7 @@ import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow";
import BlockLink from "../components/BlockLink";
import BlockConfirmations from "../components/BlockConfirmations";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import TransactionAddress from "../components/TransactionAddress";
import Copy from "../components/Copy";
import Nonce from "../components/Nonce";
import Timestamp from "../components/Timestamp";
@ -29,16 +22,25 @@ import USDValue from "../components/USDValue";
import FormattedBalance from "../components/FormattedBalance";
import ETH2USDValue from "../components/ETH2USDValue";
import TokenTransferItem from "../TokenTransferItem";
import { TransactionData, InternalOperation } from "../types";
import {
TransactionData,
InternalOperation,
ChecksummedAddress,
} from "../types";
import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition";
import ModeTab from "../components/ModeTab";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
import { DevDoc, UserDoc } from "../useSourcify";
import InputDecoder from "./decoder/InputDecoder";
import {
rawInputTo4Bytes,
use4Bytes,
useTransactionDescription,
} from "../use4Bytes";
import { DevDoc, useMultipleMetadata, UserDoc } from "../useSourcify";
import { ResolvedAddresses } from "../api/address-resolver";
import { RuntimeContext } from "../useRuntime";
import { useAppConfigContext } from "../useAppConfig";
type DetailsProps = {
txData: TransactionData;
@ -65,35 +67,42 @@ const Details: React.FC<DetailsProps> = ({
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
txData.confirmedData?.blockBaseFeePerGas !== null;
const utfInput = useMemo(() => {
try {
return txData && toUtf8String(txData.data);
} catch (err) {
console.warn("Error while converting input data to string");
console.warn(err);
return "<can't decode>";
}
}, [txData]);
const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
const fourBytesEntry = use4Bytes(fourBytes);
const fourBytesTxDesc = useMemo(() => {
if (!fourBytesEntry) {
return fourBytesEntry;
}
if (!txData || !fourBytesEntry.signature) {
return undefined;
}
const sig = fourBytesEntry?.signature;
const functionFragment = Fragment.fromString(`function ${sig}`);
const intf = new Interface([functionFragment]);
return intf.parseTransaction({ data: txData.data, value: txData.value });
}, [txData, fourBytesEntry]);
const fourBytesTxDesc = useTransactionDescription(
fourBytesEntry,
txData.data,
txData.value
);
const resolvedTxDesc = txDesc ?? fourBytesTxDesc;
const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;
const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
const { provider } = useContext(RuntimeContext);
const addresses = useMemo(() => {
const _addresses: ChecksummedAddress[] = [];
if (txData.to) {
_addresses.push(txData.to);
}
if (txData.confirmedData?.createdContractAddress) {
_addresses.push(txData.confirmedData.createdContractAddress);
}
for (const t of txData.tokenTransfers) {
_addresses.push(t.from);
_addresses.push(t.to);
_addresses.push(t.token);
}
return _addresses;
}, [txData]);
const { sourcifySource } = useAppConfigContext();
const metadatas = useMultipleMetadata(
undefined,
addresses,
provider?.network.chainId,
sourcifySource
);
return (
<ContentFrame tabs>
<InfoRow title="Transaction Hash">
@ -152,14 +161,10 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="From / Nonce">
<div className="flex divide-x-2 divide-dotted divide-gray-300">
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={txData.from}>
<DecoratedAddressLink
<TransactionAddress
address={txData.from}
miner={txData.from === txData.confirmedData?.miner}
txFrom
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
<Copy value={txData.from} />
</div>
<div className="flex items-baseline pl-3">
@ -170,14 +175,11 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
{txData.to ? (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.to}>
<DecoratedAddressLink
<TransactionAddress
address={txData.to}
miner={txData.to === txData.confirmedData?.miner}
txTo
resolvedAddresses={resolvedAddresses}
metadata={metadatas?.[txData.to]}
/>
</AddressHighlighter>
<Copy value={txData.to} />
</div>
) : txData.confirmedData === undefined ? (
@ -186,21 +188,18 @@ const Details: React.FC<DetailsProps> = ({
</span>
) : (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter
<TransactionAddress
address={txData.confirmedData?.createdContractAddress!}
>
<DecoratedAddressLink
address={txData.confirmedData.createdContractAddress!}
creation
txTo
resolvedAddresses={resolvedAddresses}
metadata={
metadatas?.[txData.confirmedData?.createdContractAddress!]
}
/>
</AddressHighlighter>
<Copy value={txData.confirmedData.createdContractAddress!} />
</div>
)}
{internalOps && internalOps.length > 0 && (
<div className="mt-2 space-y-1">
<div className="mt-2 space-y-1 overflow-x-auto">
{internalOps.map((op, i) => (
<InternalTransactionOperation
key={i}
@ -219,17 +218,15 @@ const Details: React.FC<DetailsProps> = ({
)}
{txData.tokenTransfers.length > 0 && (
<InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
<div>
{txData.tokenTransfers.map((t, i) => (
<TokenTransferItem
key={i}
t={t}
txData={txData}
tokenMeta={txData.tokenMetas[t.token]}
resolvedAddresses={resolvedAddresses}
metadatas={metadatas}
/>
))}
</div>
</InfoRow>
)}
<InfoRow title="Value">
@ -256,24 +253,16 @@ const Details: React.FC<DetailsProps> = ({
{txData.type === 2 && (
<>
<InfoRow title="Max Priority Fee Per Gas">
<span>
<FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
<FormattedBalance
value={txData.maxPriorityFeePerGas!}
decimals={9}
/>{" "}
Gwei)
</span>
</InfoRow>
<InfoRow title="Max Fee Per Gas">
<span>
<FormattedBalance value={txData.maxFeePerGas!} /> Ether (
<FormattedBalance
value={txData.maxFeePerGas!}
decimals={9}
/>{" "}
Gwei)
</span>
<FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
</InfoRow>
</>
)}
@ -315,7 +304,6 @@ const Details: React.FC<DetailsProps> = ({
)}
{txData.confirmedData && hasEIP1559 && (
<InfoRow title="Block Base Fee">
<span>
<FormattedBalance
value={txData.confirmedData.blockBaseFeePerGas!}
decimals={9}
@ -326,7 +314,6 @@ const Details: React.FC<DetailsProps> = ({
decimals={0}
/>{" "}
wei)
</span>
</InfoRow>
)}
{txData.confirmedData && (
@ -353,47 +340,15 @@ const Details: React.FC<DetailsProps> = ({
</>
)}
<InfoRow title="Input Data">
<Tab.Group>
<Tab.List className="flex space-x-1 mb-1">
<ModeTab>Decoded</ModeTab>
<ModeTab>Raw</ModeTab>
<ModeTab>UTF-8</ModeTab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
{fourBytes === "0x" ? (
<>No parameters</>
) : resolvedTxDesc === undefined ? (
<>Waiting for data...</>
) : resolvedTxDesc === null ? (
<>Can't decode data</>
) : (
<DecodedParamsTable
args={resolvedTxDesc.args}
paramTypes={resolvedTxDesc.functionFragment.inputs}
txData={txData}
<InputDecoder
fourBytes={fourBytes}
resolvedTxDesc={resolvedTxDesc}
hasParamNames={resolvedTxDesc === txDesc}
data={txData.data}
userMethod={userMethod}
devMethod={devMethod}
resolvedAddresses={resolvedAddresses}
/>
)}
</Tab.Panel>
<Tab.Panel>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={txData.data}
readOnly
/>
</Tab.Panel>
<Tab.Panel>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={utfInput}
readOnly
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</InfoRow>
</ContentFrame>
);

34
src/transaction/FunctionSignature.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import SelectionHighlighter, {
functionSigSelector,
} from "../components/SelectionHighlighter";
type FunctionSignatureProps = {
callType: string;
sig: string;
};
const FunctionSignature: React.FC<FunctionSignatureProps> = ({
callType,
sig,
}) => (
<SelectionHighlighter
myType="functionSig"
myContent={sig}
selector={functionSigSelector}
>
<span
className={`font-bold ${
callType === "STATICCALL"
? "text-red-700"
: callType === "DELEGATECALL" || callType === "CALLCODE"
? "text-gray-400"
: "text-blue-900"
}`}
>
{sig}
</span>
</SelectionHighlighter>
);
export default FunctionSignature;

20
src/transaction/LogEntry.tsx
View File

@ -2,28 +2,28 @@ import React, { useMemo } from "react";
import { Log } from "@ethersproject/abstract-provider";
import { Fragment, Interface, LogDescription } from "@ethersproject/abi";
import { Tab } from "@headlessui/react";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import TransactionAddress from "../components/TransactionAddress";
import Copy from "../components/Copy";
import ModeTab from "../components/ModeTab";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import DecodedLogSignature from "./decoder/DecodedLogSignature";
import { TransactionData } from "../types";
import { useTopic0 } from "../useTopic0";
import { ResolvedAddresses } from "../api/address-resolver";
import { ChecksummedAddress } from "../types";
import { Metadata } from "../useSourcify";
type LogEntryProps = {
txData: TransactionData;
log: Log;
logDesc: LogDescription | null | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
};
const LogEntry: React.FC<LogEntryProps> = ({
txData,
log,
logDesc,
resolvedAddresses,
metadatas,
}) => {
const rawTopic0 = log.topics[0];
const topic0 = useTopic0(rawTopic0);
@ -63,15 +63,11 @@ const LogEntry: React.FC<LogEntryProps> = ({
<div className="font-bold text-right">Address</div>
<div className="col-span-11 mr-auto">
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={log.address}>
<DecoratedAddressLink
<TransactionAddress
address={log.address}
miner={log.address === txData.confirmedData?.miner}
txFrom={log.address === txData.from}
txTo={log.address === txData.to}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[log.address]}
/>
</AddressHighlighter>
<Copy value={log.address} />
</div>
</div>
@ -112,8 +108,8 @@ const LogEntry: React.FC<LogEntryProps> = ({
<DecodedParamsTable
args={resolvedLogDesc.args}
paramTypes={resolvedLogDesc.eventFragment.inputs}
txData={txData}
hasParamNames={resolvedLogDesc === logDesc}
resolvedAddresses={resolvedAddresses}
/>
</div>
</div>

10
src/transaction/Logs.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo } from "react";
import React, { useContext, useMemo } from "react";
import { Interface } from "@ethersproject/abi";
import ContentFrame from "../ContentFrame";
import LogEntry from "./LogEntry";
@ -6,6 +6,7 @@ import { TransactionData } from "../types";
import { useAppConfigContext } from "../useAppConfig";
import { Metadata, useMultipleMetadata } from "../useSourcify";
import { ResolvedAddresses } from "../api/address-resolver";
import { RuntimeContext } from "../useRuntime";
type LogsProps = {
txData: TransactionData;
@ -24,15 +25,16 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
return md;
}, [txData.to, metadata]);
const { sourcifySource } = useAppConfigContext();
const logAddresses = useMemo(
() => txData.confirmedData?.logs.map((l) => l.address) ?? [],
[txData]
);
const { provider } = useContext(RuntimeContext);
const { sourcifySource } = useAppConfigContext();
const metadatas = useMultipleMetadata(
baseMetadatas,
logAddresses,
1,
provider?.network.chainId,
sourcifySource
);
const logDescs = useMemo(() => {
@ -69,10 +71,10 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
{txData.confirmedData.logs.map((l, i) => (
<LogEntry
key={i}
txData={txData}
log={l}
logDesc={logDescs?.[i]}
resolvedAddresses={resolvedAddresses}
metadatas={metadatas}
/>
))}
</>

69
src/transaction/Trace.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { useContext, useMemo } from "react";
import ContentFrame from "../ContentFrame";
import TransactionAddress from "../components/TransactionAddress";
import TraceItem from "./TraceItem";
import { TransactionData } from "../types";
import { useBatch4Bytes } from "../use4Bytes";
import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks";
import { RuntimeContext } from "../useRuntime";
import { ResolvedAddresses } from "../api/address-resolver";
import { tracesCollector, useResolvedAddresses } from "../useResolvedAddresses";
type TraceProps = {
txData: TransactionData;
resolvedAddresses: ResolvedAddresses | undefined;
};
const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
const { provider } = useContext(RuntimeContext);
const traces = useTraceTransaction(provider, txData.transactionHash);
const uniqueSignatures = useUniqueSignatures(traces);
const sigMap = useBatch4Bytes(uniqueSignatures);
const addrCollector = useMemo(() => tracesCollector(traces), [traces]);
const traceResolvedAddresses = useResolvedAddresses(provider, addrCollector);
const mergedResolvedAddresses = useMemo(() => {
const merge = {};
if (resolvedAddresses) {
Object.assign(merge, resolvedAddresses);
}
if (traceResolvedAddresses) {
Object.assign(merge, traceResolvedAddresses);
}
return merge;
}, [resolvedAddresses, traceResolvedAddresses]);
return (
<ContentFrame tabs>
<div className="mt-4 mb-5 space-y-3 font-code text-sm flex flex-col items-start overflow-x-auto">
{traces ? (
<>
<div className="border hover:border-gray-500 rounded px-1 py-0.5">
<TransactionAddress
address={txData.from}
resolvedAddresses={resolvedAddresses}
/>
</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}
fourBytesMap={sigMap}
resolvedAddresses={mergedResolvedAddresses}
/>
))}
</div>
</>
) : (
<div className="border hover:border-gray-500 rounded px-1 py-1 w-96 h-7">
<div className="animate-pulse w-full h-full rounded bg-gray-200"></div>
</div>
)}
</div>
</ContentFrame>
);
};
export default React.memo(Trace);

113
src/transaction/TraceInput.tsx Normal file
View File

@ -0,0 +1,113 @@
import React, { useState } from "react";
import { Switch } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
import TransactionAddress from "../components/TransactionAddress";
import FormattedBalance from "../components/FormattedBalance";
import FunctionSignature from "./FunctionSignature";
import InputDecoder from "./decoder/InputDecoder";
import { TraceEntry } from "../useErigonHooks";
import { ResolvedAddresses } from "../api/address-resolver";
import {
extract4Bytes,
FourBytesEntry,
useTransactionDescription,
} from "../use4Bytes";
type TraceInputProps = {
t: TraceEntry;
fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
resolvedAddresses: ResolvedAddresses | undefined;
};
const TraceInput: React.FC<TraceInputProps> = ({
t,
fourBytesMap,
resolvedAddresses,
}) => {
const raw4Bytes = extract4Bytes(t.input);
const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
const sigText =
raw4Bytes === null ? "<fallback>" : fourBytes?.name ?? raw4Bytes;
const hasParams = t.input.length > 10;
const fourBytesTxDesc = useTransactionDescription(
fourBytes,
t.input,
t.value
);
const [expanded, setExpanded] = useState<boolean>(false);
return (
<div
className={`ml-5 border hover:border-gray-500 rounded px-1 py-0.5 ${
expanded ? "w-full" : ""
}`}
>
<div className="flex items-baseline">
<span className="text-xs text-gray-400 lowercase">{t.type}</span>
{t.type === "SELFDESTRUCT" ? (
<span className="pl-2 text-red-800" title="Self destruct">
<FontAwesomeIcon icon={faBomb} size="1x" />
</span>
) : (
<>
<span>
<TransactionAddress
address={t.to}
resolvedAddresses={resolvedAddresses}
/>
</span>
{t.type !== "CREATE" && t.type !== "CREATE2" && (
<>
<span>.</span>
<FunctionSignature callType={t.type} sig={sigText} />
{t.value && !t.value.isZero() && (
<span className="text-red-700 whitespace-nowrap">
{"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
</span>
)}
<span className="whitespace-nowrap">
(
{hasParams && (
<Switch
className="text-xs"
checked={expanded}
onChange={setExpanded}
>
{expanded ? (
<span className="text-gray-400">[-]</span>
) : (
<>[...]</>
)}
</Switch>
)}
{(!hasParams || !expanded) && <>)</>}
</span>
</>
)}
</>
)}
</div>
{hasParams && expanded && (
<>
<div className="ml-5 mr-1 my-2">
<InputDecoder
fourBytes={raw4Bytes ?? "0x"}
resolvedTxDesc={fourBytesTxDesc}
hasParamNames={false}
data={t.input}
userMethod={undefined}
devMethod={undefined}
resolvedAddresses={resolvedAddresses}
/>
</div>
<div>)</div>
</>
)}
</div>
);
};
export default TraceInput;

92
src/transaction/TraceItem.tsx Normal file
View File

@ -0,0 +1,92 @@
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlusSquare } from "@fortawesome/free-regular-svg-icons/faPlusSquare";
import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare";
import { Switch } from "@headlessui/react";
import { FourBytesEntry } from "../use4Bytes";
import { TraceGroup } from "../useErigonHooks";
import { ResolvedAddresses } from "../api/address-resolver";
import TraceInput from "./TraceInput";
type TraceItemProps = {
t: TraceGroup;
last: boolean;
fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
resolvedAddresses: ResolvedAddresses | undefined;
};
const TraceItem: React.FC<TraceItemProps> = ({
t,
last,
fourBytesMap,
resolvedAddresses,
}) => {
const [expanded, setExpanded] = useState<boolean>(true);
return (
<>
<div className="flex relative">
<div className="absolute border-l border-b w-5 h-6 transform -translate-y-3"></div>
{!last && (
<div className="absolute left-0 border-l w-5 h-full transform translate-y-3"></div>
)}
{t.children && (
<Switch
className="absolute left-0 bg-white transform -translate-x-1/2 text-gray-500"
checked={expanded}
onChange={setExpanded}
>
<FontAwesomeIcon
icon={expanded ? faMinusSquare : faPlusSquare}
size="1x"
/>
</Switch>
)}
<TraceInput
t={t}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
</div>
{t.children && (
<div
className={`pl-10 ${last ? "" : "border-l"} space-y-3 ${
expanded ? "" : "hidden"
}`}
>
<TraceChildren
c={t.children}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
</div>
)}
</>
);
};
type TraceChildrenProps = {
c: TraceGroup[];
fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
resolvedAddresses: ResolvedAddresses | undefined;
};
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
({ c, fourBytesMap, resolvedAddresses }) => {
return (
<>
{c.map((tc, i, a) => (
<TraceItem
key={i}
t={tc}
last={i === a.length - 1}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
))}
</>
);
}
);
export default TraceItem;

27
src/transaction/decoder/AddressDecoder.tsx
View File

@ -1,26 +1,21 @@
import React from "react";
import AddressHighlighter from "../../components/AddressHighlighter";
import DecoratedAddressLink from "../../components/DecoratedAddressLink";
import TransactionAddress from "../../components/TransactionAddress";
import Copy from "../../components/Copy";
import { TransactionData } from "../../types";
import { ResolvedAddresses } from "../../api/address-resolver";
type AddressDecoderProps = {
r: any;
txData: TransactionData;
r: string;
resolvedAddresses?: ResolvedAddresses | undefined;
};
const AddressDecoder: React.FC<AddressDecoderProps> = ({ r, txData }) => (
const AddressDecoder: React.FC<AddressDecoderProps> = ({
r,
resolvedAddresses,
}) => (
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={r.toString()}>
<DecoratedAddressLink
address={r.toString()}
miner={r.toString() === txData.confirmedData?.miner}
txFrom={r.toString() === txData.from}
txTo={r.toString() === txData.to}
/>
</AddressHighlighter>
<Copy value={r.toString()} />
<TransactionAddress address={r} resolvedAddresses={resolvedAddresses} />
<Copy value={r} />
</div>
);
export default React.memo(AddressDecoder);
export default AddressDecoder;

15
src/transaction/decoder/DecodedParamRow.tsx
View File

@ -8,16 +8,16 @@ import Uint256Decoder from "./Uint256Decoder";
import AddressDecoder from "./AddressDecoder";
import BooleanDecoder from "./BooleanDecoder";
import BytesDecoder from "./BytesDecoder";
import { TransactionData } from "../../types";
import { ResolvedAddresses } from "../../api/address-resolver";
type DecodedParamRowProps = {
prefix?: ReactNode;
i?: number | undefined;
r: any;
paramType: ParamType;
txData: TransactionData;
arrayElem?: number | undefined;
help?: string | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
@ -25,9 +25,9 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
i,
r,
paramType,
txData,
arrayElem,
help,
resolvedAddresses,
}) => {
const [showHelp, setShowHelp] = useState<boolean>(false);
@ -72,7 +72,10 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
{paramType.baseType === "uint256" ? (
<Uint256Decoder r={r} />
) : paramType.baseType === "address" ? (
<AddressDecoder r={r} txData={txData} />
<AddressDecoder
r={r.toString()}
resolvedAddresses={resolvedAddresses}
/>
) : paramType.baseType === "bool" ? (
<BooleanDecoder r={r} />
) : paramType.baseType === "bytes" ? (
@ -99,7 +102,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
i={idx}
r={e}
paramType={paramType.components[idx]}
txData={txData}
resolvedAddresses={resolvedAddresses}
/>
))}
{paramType.baseType === "array" &&
@ -109,8 +112,8 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
prefix={paramType.name ?? <span className="italic">param_{i}</span>}
r={e}
paramType={paramType.arrayChildren}
txData={txData}
arrayElem={idx}
resolvedAddresses={resolvedAddresses}
/>
))}
</>

8
src/transaction/decoder/DecodedParamsTable.tsx
View File

@ -1,24 +1,24 @@
import React from "react";
import { ParamType, Result } from "@ethersproject/abi";
import DecodedParamRow from "./DecodedParamRow";
import { TransactionData } from "../../types";
import { DevMethod, UserMethod } from "../../useSourcify";
import { ResolvedAddresses } from "../../api/address-resolver";
type DecodedParamsTableProps = {
args: Result;
paramTypes: ParamType[];
txData: TransactionData;
hasParamNames?: boolean;
userMethod?: UserMethod | undefined;
devMethod?: DevMethod | undefined;
resolvedAddresses?: ResolvedAddresses | undefined;
};
const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
args,
paramTypes,
txData,
hasParamNames = true,
devMethod,
resolvedAddresses,
}) => (
<table className="border w-full">
<thead>
@ -46,8 +46,8 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
i={i}
r={r}
paramType={paramTypes[i]}
txData={txData}
help={devMethod?.params?.[paramTypes[i].name]}
resolvedAddresses={resolvedAddresses}
/>
))}
</tbody>

83
src/transaction/decoder/InputDecoder.tsx Normal file
View File

@ -0,0 +1,83 @@
import React, { useMemo } from "react";
import { TransactionDescription } from "@ethersproject/abi";
import { toUtf8String } from "@ethersproject/strings";
import { Tab } from "@headlessui/react";
import ModeTab from "../../components/ModeTab";
import DecodedParamsTable from "./DecodedParamsTable";
import { DevMethod, UserMethod } from "../../useSourcify";
import { ResolvedAddresses } from "../../api/address-resolver";
type InputDecoderProps = {
fourBytes: string;
resolvedTxDesc: TransactionDescription | null | undefined;
hasParamNames: boolean;
data: string;
userMethod: UserMethod | undefined;
devMethod: DevMethod | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InputDecoder: React.FC<InputDecoderProps> = ({
fourBytes,
resolvedTxDesc,
hasParamNames,
data,
userMethod,
devMethod,
resolvedAddresses,
}) => {
const utfInput = useMemo(() => {
try {
return toUtf8String(data);
} catch (err) {
// Silently ignore on purpose
return undefined;
}
}, [data]);
return (
<Tab.Group>
<Tab.List className="flex space-x-1 mb-1">
<ModeTab disabled={!resolvedTxDesc}>Decoded</ModeTab>
<ModeTab>Raw</ModeTab>
<ModeTab disabled={utfInput === undefined}>UTF-8</ModeTab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
{fourBytes === "0x" ? (
<>No parameters</>
) : resolvedTxDesc === undefined ? (
<>Waiting for data...</>
) : resolvedTxDesc === null ? (
<>Can't decode data</>
) : (
<DecodedParamsTable
args={resolvedTxDesc.args}
paramTypes={resolvedTxDesc.functionFragment.inputs}
hasParamNames={hasParamNames}
userMethod={userMethod}
devMethod={devMethod}
resolvedAddresses={resolvedAddresses}
/>
)}
</Tab.Panel>
<Tab.Panel>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={data}
readOnly
/>
</Tab.Panel>
<Tab.Panel>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={utfInput}
readOnly
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
);
};
export default InputDecoder;

5
src/types.ts
View File

@ -67,6 +67,9 @@ export type ConfirmedTransactionData = {
// The VOID...
export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
// TODO: replace all occurrences of plain string
export type ChecksummedAddress = string;
export enum AddressContext {
FROM,
TO,
@ -104,4 +107,4 @@ export type TokenMeta = {
decimals: number;
};
export type TokenMetas = Record<string, TokenMeta>;
export type TokenMetas = Record<string, TokenMeta | null | undefined>;

15
src/url.ts
View File

@ -1,4 +1,5 @@
import { BlockTag } from "@ethersproject/abstract-provider";
import { ChecksummedAddress } from "./types";
export const fourBytesURL = (
assetsURLPrefix: string,
@ -38,27 +39,27 @@ const resolveSourcifySource = (source: SourcifySource) => {
return sourcifyHttpRepoPrefix;
}
throw new Error(`Unknown Sourcify intergration source code: ${source}`);
throw new Error(`Unknown Sourcify integration source code: ${source}`);
};
export const sourcifyMetadata = (
checksummedAddress: string,
networkId: number,
address: ChecksummedAddress,
chainId: number,
source: SourcifySource
) =>
`${resolveSourcifySource(
source
)}/contracts/full_match/${networkId}/${checksummedAddress}/metadata.json`;
)}/contracts/full_match/${chainId}/${address}/metadata.json`;
export const sourcifySourceFile = (
checksummedAddress: string,
networkId: number,
address: ChecksummedAddress,
chainId: number,
filepath: string,
source: SourcifySource
) =>
`${resolveSourcifySource(
source
)}/contracts/full_match/${networkId}/${checksummedAddress}/sources/${filepath}`;
)}/contracts/full_match/${chainId}/${address}/sources/${filepath}`;
export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
`https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;

139
src/use4Bytes.ts
View File

@ -1,21 +1,97 @@
import { useState, useEffect, useContext } from "react";
import { useState, useEffect, useContext, useMemo } from "react";
import {
Fragment,
Interface,
TransactionDescription,
} from "@ethersproject/abi";
import { RuntimeContext } from "./useRuntime";
import { fourBytesURL } from "./url";
import { BigNumberish } from "@ethersproject/bignumber";
export type FourBytesEntry = {
name: string;
signature: string | undefined;
};
export type FourBytesMap = Record<string, FourBytesEntry | null | undefined>;
const simpleTransfer: FourBytesEntry = {
name: "Transfer",
name: "transfer",
signature: undefined,
};
const fullCache = new Map<string, FourBytesEntry | null>();
export const extract4Bytes = (rawInput: string): string | null => {
if (rawInput.length < 10) {
return null;
}
return rawInput.slice(0, 10);
};
export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
const fetch4Bytes = async (
assetsURLPrefix: string,
fourBytes: string
): Promise<FourBytesEntry | null> => {
const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
try {
const res = await fetch(signatureURL);
if (!res.ok) {
console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
return null;
}
// Get only the first occurrence, for now ignore alternative param names
const sigs = await res.text();
const sig = sigs.split(";")[0];
const cut = sig.indexOf("(");
const method = sig.slice(0, cut);
const entry: FourBytesEntry = {
name: method,
signature: sig,
};
return entry;
} catch (err) {
console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
return null;
}
};
export const useBatch4Bytes = (
rawFourByteSigs: string[] | undefined
): FourBytesMap => {
const runtime = useContext(RuntimeContext);
const assetsURLPrefix = runtime.config?.assetsURLPrefix;
const [fourBytesMap, setFourBytesMap] = useState<FourBytesMap>({});
useEffect(() => {
if (!rawFourByteSigs || assetsURLPrefix === undefined) {
setFourBytesMap({});
return;
}
const loadSigs = async () => {
const promises = rawFourByteSigs.map((s) =>
fetch4Bytes(assetsURLPrefix, s.slice(2))
);
const results = await Promise.all(promises);
const _fourBytesMap: Record<string, FourBytesEntry | null> = {};
for (let i = 0; i < rawFourByteSigs.length; i++) {
_fourBytesMap[rawFourByteSigs[i]] = results[i];
}
setFourBytesMap(_fourBytesMap);
};
loadSigs();
}, [assetsURLPrefix, rawFourByteSigs]);
return fourBytesMap;
};
/**
* Extract 4bytes DB info
*
@ -47,35 +123,12 @@ export const use4Bytes = (
return;
}
const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
fetch(signatureURL)
.then(async (res) => {
if (!res.ok) {
console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
fullCache.set(fourBytes, null);
setEntry(null);
return;
}
// Get only the first occurrence, for now ignore alternative param names
const sigs = await res.text();
const sig = sigs.split(";")[0];
const cut = sig.indexOf("(");
let method = sig.slice(0, cut);
method = method.charAt(0).toUpperCase() + method.slice(1);
const entry: FourBytesEntry = {
name: method,
signature: sig,
};
setEntry(entry);
const loadSig = async () => {
const entry = await fetch4Bytes(assetsURLPrefix, fourBytes);
fullCache.set(fourBytes, entry);
})
.catch((err) => {
console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
setEntry(null);
fullCache.set(fourBytes, null);
});
setEntry(entry);
};
loadSig();
}, [fourBytes, assetsURLPrefix]);
if (rawFourBytes === "0x") {
@ -96,3 +149,29 @@ export const use4Bytes = (
fullCache.set(fourBytes, entry);
return entry;
};
export const useTransactionDescription = (
fourBytesEntry: FourBytesEntry | null | undefined,
data: string | undefined,
value: BigNumberish | undefined
): TransactionDescription | null | undefined => {
const txDesc = useMemo(() => {
if (!fourBytesEntry) {
return fourBytesEntry;
}
if (
!fourBytesEntry.signature ||
data === undefined ||
value === undefined
) {
return undefined;
}
const sig = fourBytesEntry?.signature;
const functionFragment = Fragment.fromString(`function ${sig}`);
const intf = new Interface([functionFragment]);
return intf.parseTransaction({ data, value });
}, [fourBytesEntry, data, value]);
return txDesc;
};

136
src/useErigonHooks.ts
View File

@ -1,10 +1,11 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useMemo } from "react";
import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
import { JsonRpcProvider } from "@ethersproject/providers";
import { getAddress } from "@ethersproject/address";
import { Contract } from "@ethersproject/contracts";
import { BigNumber } from "@ethersproject/bignumber";
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
import { extract4Bytes } from "./use4Bytes";
import { getInternalOperations } from "./nodeFunctions";
import {
TokenMetas,
@ -221,7 +222,7 @@ export const useTxData = (
// Extract token meta
const tokenMetas: TokenMetas = {};
for (const t of tokenTransfers) {
if (tokenMetas[t.token]) {
if (tokenMetas[t.token] !== undefined) {
continue;
}
const erc20Contract = new Contract(t.token, erc20, provider);
@ -237,6 +238,7 @@ export const useTxData = (
decimals,
};
} catch (err) {
tokenMetas[t.token] = null;
console.warn(`Couldn't get token ${t.token} metadata; ignoring`, err);
}
}
@ -308,3 +310,133 @@ export const useInternalOperations = (
return intTransfers;
};
export type TraceEntry = {
type: string;
depth: number;
from: string;
to: string;
value: BigNumber;
input: string;
};
export type TraceGroup = TraceEntry & {
children: TraceGroup[] | null;
};
export const useTraceTransaction = (
provider: JsonRpcProvider | undefined,
txHash: string
): TraceGroup[] | undefined => {
const [traceGroups, setTraceGroups] = useState<TraceGroup[] | undefined>();
useEffect(() => {
if (!provider) {
setTraceGroups(undefined);
return;
}
const traceTx = async () => {
const results = await provider.send("ots_traceTransaction", [txHash]);
// Implement better formatter
for (let i = 0; i < results.length; i++) {
results[i].from = provider.formatter.address(results[i].from);
results[i].to = provider.formatter.address(results[i].to);
results[i].value =
results[i].value === null
? null
: provider.formatter.bigNumber(results[i].value);
}
// Build trace tree
const buildTraceTree = (
flatList: TraceEntry[],
depth: number = 0
): TraceGroup[] => {
const entries: TraceGroup[] = [];
let children: TraceEntry[] | null = null;
for (let i = 0; i < flatList.length; i++) {
if (flatList[i].depth === depth) {
if (children !== null) {
const childrenTree = buildTraceTree(children, depth + 1);
const prev = entries.pop();
if (prev) {
prev.children = childrenTree;
entries.push(prev);
}
}
entries.push({
...flatList[i],
children: null,
});
children = null;
} else {
if (children === null) {
children = [];
}
children.push(flatList[i]);
}
}
if (children !== null) {
const childrenTree = buildTraceTree(children, depth + 1);
const prev = entries.pop();
if (prev) {
prev.children = childrenTree;
entries.push(prev);
}
}
return entries;
};
const traceTree = buildTraceTree(results);
setTraceGroups(traceTree);
};
traceTx();
}, [provider, txHash]);
return traceGroups;
};
/**
* Flatten a trace tree and extract and dedup 4byte function signatures
*/
export const useUniqueSignatures = (traces: TraceGroup[] | undefined) => {
const uniqueSignatures = useMemo(() => {
if (!traces) {
return undefined;
}
const sigs = new Set<string>();
let nextTraces: TraceGroup[] = [...traces];
while (nextTraces.length > 0) {
const traces = nextTraces;
nextTraces = [];
for (const t of traces) {
if (
t.type === "CALL" ||
t.type === "DELEGATECALL" ||
t.type === "STATICCALL" ||
t.type === "CALLCODE"
) {
const fourBytes = extract4Bytes(t.input);
if (fourBytes) {
sigs.add(fourBytes);
}
}
if (t.children) {
nextTraces.push(...t.children);
}
}
}
return [...sigs];
}, [traces]);
return uniqueSignatures;
};

8
src/useProvider.ts
View File

@ -1,5 +1,9 @@
import { useEffect, useState } from "react";
import { JsonRpcProvider, WebSocketProvider } from "@ethersproject/providers";
import {
JsonRpcProvider,
JsonRpcBatchProvider,
WebSocketProvider,
} from "@ethersproject/providers";
import { ConnectionStatus } from "./types";
import { MIN_API_LEVEL } from "./params";
@ -35,7 +39,7 @@ export const useProvider = (
if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) {
provider = new WebSocketProvider(erigonURL);
} else {
provider = new JsonRpcProvider(erigonURL);
provider = new JsonRpcBatchProvider(erigonURL);
}
// Check if it is at least a regular ETH node

26
src/useResolvedAddresses.ts
View File

@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
import { JsonRpcProvider } from "@ethersproject/providers";
import { ProcessedTransaction, TransactionData } from "./types";
import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
import { TraceGroup } from "./useErigonHooks";
export type AddressCollector = () => string[];
@ -61,6 +62,31 @@ export const transactionDataCollector =
return Array.from(uniqueAddresses);
};
export const tracesCollector =
(traces: TraceGroup[] | undefined): AddressCollector =>
() => {
if (traces === undefined) {
return [];
}
const uniqueAddresses = new Set<string>();
let searchTraces = [...traces];
while (searchTraces.length > 0) {
const nextSearch: TraceGroup[] = [];
for (const g of searchTraces) {
uniqueAddresses.add(g.from);
uniqueAddresses.add(g.to);
if (g.children) {
nextSearch.push(...g.children);
}
}
searchTraces = nextSearch;
}
return Array.from(uniqueAddresses);
};
export const useResolvedAddresses = (
provider: JsonRpcProvider | undefined,
addrCollector: AddressCollector

9
src/useSelectedTransaction.ts Normal file
View File

@ -0,0 +1,9 @@
import { createContext, useContext } from "react";
import { TransactionData } from "./types";
export const SelectedTransactionContext = createContext<
TransactionData | null | undefined
>(undefined);
export const useSelectedTransaction = () =>
useContext(SelectedTransactionContext);

6
src/useSelection.ts
View File

@ -6,12 +6,14 @@ import {
useContext,
} from "react";
export type SelectionType = "address" | "value" | "functionSig";
export type Selection = {
type: "address" | "value";
type: SelectionType;
content: string;
};
type OptionalSelection = Selection | null;
export type OptionalSelection = Selection | null;
export const useSelection = (): [
OptionalSelection,

56
src/useSourcify.ts
View File

@ -1,6 +1,6 @@
import { useState, useEffect, useMemo } from "react";
import { Interface } from "@ethersproject/abi";
import { TransactionData } from "./types";
import { ChecksummedAddress, TransactionData } from "./types";
import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url";
export type UserMethod = {
@ -65,24 +65,19 @@ export type Metadata = {
};
};
export const fetchSourcifyMetadata = async (
checksummedAddress: string,
const fetchSourcifyMetadata = async (
address: ChecksummedAddress,
chainId: number,
source: SourcifySource,
abortController: AbortController
): Promise<Metadata | null> => {
try {
const contractMetadataURL = sourcifyMetadata(
checksummedAddress,
chainId,
source
);
const result = await fetch(contractMetadataURL, {
const metadataURL = sourcifyMetadata(address, chainId, source);
const result = await fetch(metadataURL, {
signal: abortController.signal,
});
if (result.ok) {
const _metadata = await result.json();
return _metadata;
return await result.json();
}
return null;
@ -92,15 +87,16 @@ export const fetchSourcifyMetadata = async (
}
};
// TODO: replace every occurrence with the multiple version one
export const useSourcify = (
checksummedAddress: string | undefined,
address: ChecksummedAddress | undefined,
chainId: number | undefined,
source: SourcifySource
): Metadata | null | undefined => {
const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
useEffect(() => {
if (!checksummedAddress || chainId === undefined) {
if (!address || chainId === undefined) {
return;
}
setRawMetadata(undefined);
@ -108,7 +104,7 @@ export const useSourcify = (
const abortController = new AbortController();
const fetchMetadata = async () => {
const _metadata = await fetchSourcifyMetadata(
checksummedAddress,
address,
chainId,
source,
abortController
@ -120,47 +116,53 @@ export const useSourcify = (
return () => {
abortController.abort();
};
}, [checksummedAddress, chainId, source]);
}, [address, chainId, source]);
return rawMetadata;
};
export const useMultipleMetadata = (
baseMetadatas: Record<string, Metadata | null>,
checksummedAddress: (string | undefined)[],
baseMetadatas: Record<string, Metadata | null> | undefined,
addresses: (ChecksummedAddress | undefined)[],
chainId: number | undefined,
source: SourcifySource
): Record<string, Metadata | null | undefined> => {
): Record<ChecksummedAddress, Metadata | null | undefined> => {
const [rawMetadata, setRawMetadata] = useState<
Record<string, Metadata | null | undefined>
>({});
useEffect(() => {
if (!checksummedAddress || chainId === undefined) {
if (!addresses || chainId === undefined) {
return;
}
setRawMetadata({});
const abortController = new AbortController();
const fetchMetadata = async (addresses: string[]) => {
const fetchMetadata = async (dedupedAddresses: string[]) => {
const promises: Promise<Metadata | null>[] = [];
for (const addr of addresses) {
for (const address of dedupedAddresses) {
promises.push(
fetchSourcifyMetadata(addr, chainId, source, abortController)
fetchSourcifyMetadata(address, chainId, source, abortController)
);
}
const results = await Promise.all(promises);
const metadatas: Record<string, Metadata | null> = { ...baseMetadatas };
if (abortController.signal.aborted) {
return;
}
const metadatas: Record<string, Metadata | null> = baseMetadatas
? { ...baseMetadatas }
: {};
for (let i = 0; i < results.length; i++) {
metadatas[addresses[i]] = results[i];
metadatas[dedupedAddresses[i]] = results[i];
}
setRawMetadata(metadatas);
};
const deduped = new Set(
checksummedAddress.filter(
(a): a is string => a !== undefined && baseMetadatas[a] === undefined
addresses.filter(
(a): a is ChecksummedAddress =>
a !== undefined && baseMetadatas?.[a] === undefined
)
);
fetchMetadata(Array.from(deduped));
@ -168,7 +170,7 @@ export const useMultipleMetadata = (
return () => {
abortController.abort();
};
}, [baseMetadatas, checksummedAddress, chainId, source]);
}, [baseMetadatas, addresses, chainId, source]);
return rawMetadata;
};

2
trustwallet

@ -1 +1 @@
Subproject commit e439c36937deb321ad01c23ac23941e8a491efe9
Subproject commit 30e4ffa0153594b11421cf383b1192e4414d2f66

3
tsconfig.json
View File

@ -14,7 +14,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"downlevelIteration": true
},
"include": ["src"]
}