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

Merge branch 'feature/swr-address-resolution' into develop

This commit is contained in:
Willian Mitsuda 2021-12-25 23:19:09 -03:00
parent 4f01a2a279 d3ab2a483b
commit 8d8fa14289
26 changed files with 74 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/TokenTransferItem.tsx
View File

@ -10,13 +10,11 @@ import {
TokenMeta,
TokenTransfer,
} from "./types";
import { ResolvedAddresses } from "./api/address-resolver";
import { Metadata } from "./sourcify/useSourcify";
type TokenTransferItemProps = {
t: TokenTransfer;
tokenMeta?: TokenMeta | null | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
};
@ -24,7 +22,6 @@ type TokenTransferItemProps = {
const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
t,
tokenMeta,
resolvedAddresses,
metadatas,
}) => (
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
@ -37,7 +34,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<TransactionAddress
address={t.from}
addressCtx={AddressContext.FROM}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[t.from]}
/>
</div>
@ -46,7 +42,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<TransactionAddress
address={t.to}
addressCtx={AddressContext.TO}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[t.to]}
/>
</div>
@ -60,11 +55,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
/>
</ValueHighlighter>
</span>
<TransactionAddress
address={t.token}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[t.token]}
/>
<TransactionAddress address={t.token} metadata={metadatas[t.token]} />
</div>
</div>
</div>

29
src/Transaction.tsx
View File

@ -11,10 +11,6 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
import { useETHUSDOracle } from "./usePriceOracle";
import { useAppConfigContext } from "./useAppConfig";
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
import {
transactionDataCollector,
useResolvedAddresses,
} from "./useResolvedAddresses";
import { SelectedTransactionContext } from "./useSelectedTransaction";
const Details = React.lazy(
@ -45,12 +41,6 @@ const Transaction: React.FC = () => {
}
const txData = useTxData(provider, txhash);
const addrCollector = useMemo(
() => transactionDataCollector(txData),
[txData]
);
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
const internalOps = useInternalOperations(provider, txData);
const sendsEthToMiner = useMemo(() => {
if (!txData || !internalOps) {
@ -119,29 +109,14 @@ const Transaction: React.FC = () => {
internalOps={internalOps}
sendsEthToMiner={sendsEthToMiner}
ethUSDPrice={blockETHUSDPrice}
resolvedAddresses={resolvedAddresses}
/>
}
/>
<Route
path="logs"
element={
<Logs
txData={txData}
metadata={metadata}
resolvedAddresses={resolvedAddresses}
/>
}
/>
<Route
path="trace"
element={
<Trace
txData={txData}
resolvedAddresses={resolvedAddresses}
/>
}
element={<Logs txData={txData} metadata={metadata} />}
/>
<Route path="trace" element={<Trace txData={txData} />} />
</Routes>
</React.Suspense>
</SelectionContext.Provider>

6
src/address/AddressTransactionResults.tsx
View File

@ -10,7 +10,6 @@ import { useFeeToggler } from "../search/useFeeToggler";
import { SelectionContext, useSelection } from "../useSelection";
import { useMultipleETHUSDOracle } from "../usePriceOracle";
import { RuntimeContext } from "../useRuntime";
import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
import { useParams, useSearchParams } from "react-router-dom";
import { ChecksummedAddress } from "../types";
import { useContractsMetadata } from "../hooks";
@ -102,10 +101,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
}, [page]);
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
// Resolve all addresses that appear on this page results
const addrCollector = useMemo(() => pageCollector(page), [page]);
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
// Calculate Sourcify metadata for all addresses that appear on this page results
const addresses = useMemo(() => {
const _addresses = [address];
@ -152,7 +147,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
<TransactionItem
key={tx.hash}
tx={tx}
resolvedAddresses={resolvedAddresses}
selectedAddress={address}
feeDisplay={feeDisplay}
priceMap={priceMap}

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

@ -1,4 +1,3 @@
import { BaseProvider } from "@ethersproject/providers";
import { ensRenderer } from "../../components/ENSName";
import { plainStringRenderer } from "../../components/PlainString";
import { tokenRenderer } from "../../components/TokenName";
@ -48,30 +47,3 @@ resolverRendererRegistry.set(uniswapV2Resolver, uniswapV2PairRenderer);
resolverRendererRegistry.set(uniswapV3Resolver, uniswapV3PairRenderer);
resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
resolverRendererRegistry.set(hardcodedResolver, plainStringRenderer);
// TODO: implement progressive resolving
export const batchPopulate = async (
provider: BaseProvider,
addresses: string[],
currentMap: ResolvedAddresses | undefined
): Promise<ResolvedAddresses> => {
const solvers: Promise<SelectedResolvedName<any> | undefined>[] = [];
const unresolvedAddresses = addresses.filter(
(a) => currentMap?.[a] === undefined
);
for (const a of unresolvedAddresses) {
solvers.push(mainResolver.resolveAddress(provider, a));
}
const resultMap: ResolvedAddresses = currentMap ? { ...currentMap } : {};
const results = await Promise.all(solvers);
for (let i = 0; i < results.length; i++) {
const r = results[i];
if (r === undefined) {
continue;
}
resultMap[unresolvedAddresses[i]] = r;
}
return resultMap;
};

4
src/block/BlockTransactionResults.tsx
View File

@ -8,7 +8,6 @@ import TransactionItem from "../search/TransactionItem";
import { useFeeToggler } from "../search/useFeeToggler";
import { RuntimeContext } from "../useRuntime";
import { SelectionContext, useSelection } from "../useSelection";
import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
import { ChecksummedAddress, ProcessedTransaction } from "../types";
import { PAGE_SIZE } from "../params";
import { useMultipleETHUSDOracle } from "../usePriceOracle";
@ -30,8 +29,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
const { provider } = useContext(RuntimeContext);
const selectionCtx = useSelection();
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
const addrCollector = useMemo(() => pageCollector(page), [page]);
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
const blockTags = useMemo(() => [blockTag], [blockTag]);
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
@ -79,7 +76,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
<TransactionItem
key={tx.hash}
tx={tx}
resolvedAddresses={resolvedAddresses}
feeDisplay={feeDisplay}
priceMap={priceMap}
metadatas={metadatas}

14
src/components/AddressOrENSName.tsx
View File

@ -1,24 +1,22 @@
import React from "react";
import {
ResolvedAddresses,
resolverRendererRegistry,
} from "../api/address-resolver";
import React, { useContext } from "react";
import { resolverRendererRegistry } from "../api/address-resolver";
import { useResolvedAddress } from "../useResolvedAddresses";
import { RuntimeContext } from "../useRuntime";
import PlainAddress from "./PlainAddress";
type AddressOrENSNameProps = {
address: string;
selectedAddress?: string;
dontOverrideColors?: boolean;
resolvedAddresses?: ResolvedAddresses | undefined;
};
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
address,
selectedAddress,
dontOverrideColors,
resolvedAddresses,
}) => {
const resolvedAddress = resolvedAddresses?.[address];
const { provider } = useContext(RuntimeContext);
const resolvedAddress = useResolvedAddress(provider, address);
const linkable = address !== selectedAddress;
if (!resolvedAddress) {

4
src/components/DecoratedAddressLink.tsx
View File

@ -9,7 +9,6 @@ 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 { ResolvedAddresses } from "../api/address-resolver";
import { Metadata } from "../sourcify/useSourcify";
type DecoratedAddressLinkProps = {
@ -21,7 +20,6 @@ type DecoratedAddressLinkProps = {
selfDestruct?: boolean;
txFrom?: boolean;
txTo?: boolean;
resolvedAddresses?: ResolvedAddresses | undefined;
metadata?: Metadata | null | undefined;
};
@ -34,7 +32,6 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
selfDestruct,
txFrom,
txTo,
resolvedAddresses,
metadata,
}) => {
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
@ -87,7 +84,6 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
address={address}
selectedAddress={selectedAddress}
dontOverrideColors={mint || burn}
resolvedAddresses={resolvedAddresses}
/>
</div>
);

20
src/components/InternalCreate.tsx
View File

@ -5,17 +5,12 @@ import TransactionAddress from "./TransactionAddress";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { InternalOperation } from "../types";
import { ResolvedAddresses } from "../api/address-resolver";
type InternalCreateProps = {
internalOp: InternalOperation;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InternalCreate: React.FC<InternalCreateProps> = ({
internalOp,
resolvedAddresses,
}) => (
const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
<div className="flex items-baseline space-x-1 whitespace-nowrap">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
@ -23,20 +18,11 @@ const InternalCreate: React.FC<InternalCreateProps> = ({
<span>Contract</span>
<div className="flex items-baseline">
<AddressHighlighter address={internalOp.to}>
<DecoratedAddressLink
address={internalOp.to}
creation
resolvedAddresses={resolvedAddresses}
/>
<DecoratedAddressLink address={internalOp.to} creation />
</AddressHighlighter>
</div>
<span className="flex items-baseline text-gray-400">
(Creator:{" "}
<TransactionAddress
address={internalOp.from}
resolvedAddresses={resolvedAddresses}
/>
)
(Creator: <TransactionAddress address={internalOp.from} />)
</span>
</div>
);

22
src/components/InternalSelfDestruct.tsx
View File

@ -5,19 +5,16 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { TransactionData, InternalOperation } from "../types";
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 toMiner =
txData.confirmedData?.miner !== undefined &&
@ -32,21 +29,12 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
<span>Contract</span>
<div className="flex items-baseline">
<AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink
address={internalOp.from}
selfDestruct
resolvedAddresses={resolvedAddresses}
/>
<DecoratedAddressLink address={internalOp.from} selfDestruct />
</AddressHighlighter>
</div>
{internalOp.value.isZero() && (
<div className="flex items-baseline text-gray-400">
(To:{" "}
<TransactionAddress
address={internalOp.to}
resolvedAddresses={resolvedAddresses}
/>
)
(To: <TransactionAddress address={internalOp.to} />)
</div>
)}
</div>
@ -64,11 +52,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={internalOp.to}
miner={toMiner}
resolvedAddresses={resolvedAddresses}
/>
<DecoratedAddressLink address={internalOp.to} miner={toMiner} />
</div>
</AddressHighlighter>
</div>

21
src/components/InternalTransactionOperation.tsx
View File

@ -3,37 +3,24 @@ import InternalTransfer from "./InternalTransfer";
import InternalSelfDestruct from "./InternalSelfDestruct";
import InternalCreate from "./InternalCreate";
import { TransactionData, InternalOperation, OperationType } from "../types";
import { ResolvedAddresses } from "../api/address-resolver";
type InternalTransactionOperationProps = {
txData: TransactionData;
internalOp: InternalOperation;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
({ txData, internalOp, resolvedAddresses }) => (
({ txData, internalOp }) => (
<>
{internalOp.type === OperationType.TRANSFER && (
<InternalTransfer
txData={txData}
internalOp={internalOp}
resolvedAddresses={resolvedAddresses}
/>
<InternalTransfer txData={txData} internalOp={internalOp} />
)}
{internalOp.type === OperationType.SELF_DESTRUCT && (
<InternalSelfDestruct
txData={txData}
internalOp={internalOp}
resolvedAddresses={resolvedAddresses}
/>
<InternalSelfDestruct txData={txData} internalOp={internalOp} />
)}
{(internalOp.type === OperationType.CREATE ||
internalOp.type === OperationType.CREATE2) && (
<InternalCreate
internalOp={internalOp}
resolvedAddresses={resolvedAddresses}
/>
<InternalCreate internalOp={internalOp} />
)}
</>
);

5
src/components/InternalTransfer.tsx
View File

@ -5,18 +5,15 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { TransactionData, InternalOperation } from "../types";
import { ResolvedAddresses } from "../api/address-resolver";
type InternalTransferProps = {
txData: TransactionData;
internalOp: InternalOperation;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InternalTransfer: React.FC<InternalTransferProps> = ({
txData,
internalOp,
resolvedAddresses,
}) => {
const fromMiner =
txData.confirmedData?.miner !== undefined &&
@ -44,7 +41,6 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
miner={fromMiner}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</div>
</AddressHighlighter>
@ -62,7 +58,6 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
miner={toMiner}
txFrom={internalOp.to === txData.from}
txTo={internalOp.to === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</div>
</AddressHighlighter>

4
src/components/TransactionAddress.tsx
View File

@ -1,7 +1,6 @@
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 "../sourcify/useSourcify";
@ -9,14 +8,12 @@ import { Metadata } from "../sourcify/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();
@ -32,7 +29,6 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
txFrom={address === txData?.from}
txTo={address === txData?.to || creation}
creation={creation}
resolvedAddresses={resolvedAddresses}
metadata={metadata}
/>
</AddressHighlighter>

6
src/search/TransactionItem.tsx
View File

@ -18,12 +18,10 @@ 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 "../sourcify/useSourcify";
type TransactionItemProps = {
tx: ProcessedTransaction;
resolvedAddresses?: ResolvedAddresses;
selectedAddress?: string;
feeDisplay: FeeDisplay;
priceMap: Record<BlockTag, BigNumber>;
@ -32,7 +30,6 @@ type TransactionItemProps = {
const TransactionItem: React.FC<TransactionItemProps> = ({
tx,
resolvedAddresses,
selectedAddress,
feeDisplay,
priceMap,
@ -87,7 +84,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
address={tx.from}
selectedAddress={selectedAddress}
miner={tx.miner === tx.from}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
)}
@ -110,7 +106,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
address={tx.to}
selectedAddress={selectedAddress}
miner={tx.miner === tx.to}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[tx.to]}
/>
</AddressHighlighter>
@ -120,7 +115,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
address={tx.createdContractAddress!}
selectedAddress={selectedAddress}
creation
resolvedAddresses={resolvedAddresses}
metadata={metadatas[tx.createdContractAddress!]}
/>
</AddressHighlighter>

14
src/transaction/Details.tsx
View File

@ -42,7 +42,6 @@ import {
useTransactionDescription,
} from "../use4Bytes";
import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
import { ResolvedAddresses } from "../api/address-resolver";
import { RuntimeContext } from "../useRuntime";
import { useContractsMetadata } from "../hooks";
import { useTransactionError } from "../useErigonHooks";
@ -56,7 +55,6 @@ type DetailsProps = {
internalOps?: InternalOperation[];
sendsEthToMiner: boolean;
ethUSDPrice: BigNumber | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const Details: React.FC<DetailsProps> = ({
@ -68,7 +66,6 @@ const Details: React.FC<DetailsProps> = ({
internalOps,
sendsEthToMiner,
ethUSDPrice,
resolvedAddresses,
}) => {
const hasEIP1559 =
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
@ -200,7 +197,6 @@ const Details: React.FC<DetailsProps> = ({
hasParamNames
userMethod={userError}
devMethod={devError}
resolvedAddresses={resolvedAddresses}
/>
)}
</Tab.Panel>
@ -252,10 +248,7 @@ 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">
<TransactionAddress
address={txData.from}
resolvedAddresses={resolvedAddresses}
/>
<TransactionAddress address={txData.from} />
<Copy value={txData.from} />
</div>
<div className="flex items-baseline pl-3">
@ -268,7 +261,6 @@ const Details: React.FC<DetailsProps> = ({
<div className="flex items-baseline space-x-2 -ml-1">
<TransactionAddress
address={txData.to}
resolvedAddresses={resolvedAddresses}
metadata={metadatas?.[txData.to]}
/>
<Copy value={txData.to} />
@ -281,7 +273,6 @@ const Details: React.FC<DetailsProps> = ({
<div className="flex items-baseline space-x-2 -ml-1">
<TransactionAddress
address={txData.confirmedData?.createdContractAddress!}
resolvedAddresses={resolvedAddresses}
metadata={
metadatas?.[txData.confirmedData?.createdContractAddress!]
}
@ -296,7 +287,6 @@ const Details: React.FC<DetailsProps> = ({
key={i}
txData={txData}
internalOp={op}
resolvedAddresses={resolvedAddresses}
/>
))}
</div>
@ -314,7 +304,6 @@ const Details: React.FC<DetailsProps> = ({
key={i}
t={t}
tokenMeta={txData.tokenMetas[t.token]}
resolvedAddresses={resolvedAddresses}
metadatas={metadatas}
/>
))}
@ -438,7 +427,6 @@ const Details: React.FC<DetailsProps> = ({
data={txData.data}
userMethod={userMethod}
devMethod={devMethod}
resolvedAddresses={resolvedAddresses}
/>
</InfoRow>
</ContentFrame>

11
src/transaction/LogEntry.tsx
View File

@ -8,23 +8,16 @@ import ModeTab from "../components/ModeTab";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import DecodedLogSignature from "./decoder/DecodedLogSignature";
import { useTopic0 } from "../useTopic0";
import { ResolvedAddresses } from "../api/address-resolver";
import { ChecksummedAddress } from "../types";
import { Metadata } from "../sourcify/useSourcify";
type LogEntryProps = {
log: Log;
logDesc: LogDescription | null | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
};
const LogEntry: React.FC<LogEntryProps> = ({
log,
logDesc,
resolvedAddresses,
metadatas,
}) => {
const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
const rawTopic0 = log.topics[0];
const topic0 = useTopic0(rawTopic0);
@ -65,7 +58,6 @@ const LogEntry: React.FC<LogEntryProps> = ({
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<TransactionAddress
address={log.address}
resolvedAddresses={resolvedAddresses}
metadata={metadatas[log.address]}
/>
<Copy value={log.address} />
@ -109,7 +101,6 @@ const LogEntry: React.FC<LogEntryProps> = ({
args={resolvedLogDesc.args}
paramTypes={resolvedLogDesc.eventFragment.inputs}
hasParamNames={resolvedLogDesc === logDesc}
resolvedAddresses={resolvedAddresses}
/>
</div>
</div>

5
src/transaction/Logs.tsx
View File

@ -4,17 +4,15 @@ import ContentFrame from "../ContentFrame";
import LogEntry from "./LogEntry";
import { TransactionData } from "../types";
import { Metadata } from "../sourcify/useSourcify";
import { ResolvedAddresses } from "../api/address-resolver";
import { RuntimeContext } from "../useRuntime";
import { useContractsMetadata } from "../hooks";
type LogsProps = {
txData: TransactionData;
metadata: Metadata | null | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
const baseMetadatas = useMemo((): Record<string, Metadata | null> => {
if (!txData.to || metadata === undefined) {
return {};
@ -68,7 +66,6 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
key={i}
log={l}
logDesc={logDescs?.[i]}
resolvedAddresses={resolvedAddresses}
metadatas={metadatas}
/>
))}

38
src/transaction/Trace.tsx
View File

@ -1,37 +1,18 @@
import React, { useContext, useMemo } from "react";
import React, { useContext } 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 { useTraceTransaction } 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 Trace: React.FC<TraceProps> = ({ txData }) => {
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>
@ -39,20 +20,11 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
{traces ? (
<>
<div className="border hover:border-gray-500 rounded px-1 py-0.5">
<TransactionAddress
address={txData.from}
resolvedAddresses={resolvedAddresses}
/>
<TransactionAddress address={txData.from} />
</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}
/>
<TraceItem key={i} t={t} last={i === a.length - 1} />
))}
</div>
</>

19
src/transaction/TraceInput.tsx
View File

@ -7,26 +7,19 @@ import FunctionSignature from "./FunctionSignature";
import InputDecoder from "./decoder/InputDecoder";
import ExpanderSwitch from "../components/ExpanderSwitch";
import { TraceEntry } from "../useErigonHooks";
import { ResolvedAddresses } from "../api/address-resolver";
import {
extract4Bytes,
FourBytesEntry,
use4Bytes,
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 TraceInput: React.FC<TraceInputProps> = ({ t }) => {
const raw4Bytes = extract4Bytes(t.input);
const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
const fourBytes = use4Bytes(raw4Bytes);
const sigText =
raw4Bytes === null ? "<fallback>" : fourBytes?.name ?? raw4Bytes;
const hasParams = t.input.length > 10;
@ -54,10 +47,7 @@ const TraceInput: React.FC<TraceInputProps> = ({
) : (
<>
<span>
<TransactionAddress
address={t.to}
resolvedAddresses={resolvedAddresses}
/>
<TransactionAddress address={t.to} />
</span>
{t.type !== "CREATE" && t.type !== "CREATE2" && (
<>
@ -93,7 +83,6 @@ const TraceInput: React.FC<TraceInputProps> = ({
data={t.input}
userMethod={undefined}
devMethod={undefined}
resolvedAddresses={resolvedAddresses}
/>
</div>
<div>)</div>

51
src/transaction/TraceItem.tsx
View File

@ -3,24 +3,15 @@ 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 TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
const [expanded, setExpanded] = useState<boolean>(true);
return (
@ -42,11 +33,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
/>
</Switch>
)}
<TraceInput
t={t}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
<TraceInput t={t} />
</div>
{t.children && (
<div
@ -54,11 +41,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
expanded ? "" : "hidden"
}`}
>
<TraceChildren
c={t.children}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
<TraceChildren c={t.children} />
</div>
)}
</>
@ -67,26 +50,16 @@ const TraceItem: React.FC<TraceItemProps> = ({
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}
/>
))}
</>
);
}
);
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
return (
<>
{c.map((tc, i, a) => (
<TraceItem key={i} t={tc} last={i === a.length - 1} />
))}
</>
);
});
export default TraceItem;

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

@ -1,19 +1,14 @@
import React from "react";
import TransactionAddress from "../../components/TransactionAddress";
import Copy from "../../components/Copy";
import { ResolvedAddresses } from "../../api/address-resolver";
type AddressDecoderProps = {
r: string;
resolvedAddresses?: ResolvedAddresses | undefined;
};
const AddressDecoder: React.FC<AddressDecoderProps> = ({
r,
resolvedAddresses,
}) => (
const AddressDecoder: React.FC<AddressDecoderProps> = ({ r }) => (
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<TransactionAddress address={r} resolvedAddresses={resolvedAddresses} />
<TransactionAddress address={r} />
<Copy value={r} />
</div>
);

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

@ -8,7 +8,6 @@ import Uint256Decoder from "./Uint256Decoder";
import AddressDecoder from "./AddressDecoder";
import BooleanDecoder from "./BooleanDecoder";
import BytesDecoder from "./BytesDecoder";
import { ResolvedAddresses } from "../../api/address-resolver";
import SelectionHighlighter, {
valueSelector,
} from "../../components/SelectionHighlighter";
@ -20,7 +19,6 @@ type DecodedParamRowProps = {
paramType: ParamType;
arrayElem?: number | undefined;
help?: string | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
@ -30,7 +28,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
paramType,
arrayElem,
help,
resolvedAddresses,
}) => {
const [showHelp, setShowHelp] = useState<boolean>(false);
@ -80,10 +77,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
{paramType.baseType === "uint256" ? (
<Uint256Decoder r={r} />
) : paramType.baseType === "address" ? (
<AddressDecoder
r={r.toString()}
resolvedAddresses={resolvedAddresses}
/>
<AddressDecoder r={r.toString()} />
) : paramType.baseType === "bool" ? (
<BooleanDecoder r={r} />
) : paramType.baseType === "bytes" ? (
@ -111,7 +105,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
i={idx}
r={e}
paramType={paramType.components[idx]}
resolvedAddresses={resolvedAddresses}
/>
))}
{paramType.baseType === "array" &&
@ -122,7 +115,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
r={e}
paramType={paramType.arrayChildren}
arrayElem={idx}
resolvedAddresses={resolvedAddresses}
/>
))}
</>

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

@ -2,7 +2,6 @@ import React from "react";
import { ParamType, Result } from "@ethersproject/abi";
import DecodedParamRow from "./DecodedParamRow";
import { DevMethod, UserMethod } from "../../sourcify/useSourcify";
import { ResolvedAddresses } from "../../api/address-resolver";
type DecodedParamsTableProps = {
args: Result;
@ -10,7 +9,6 @@ type DecodedParamsTableProps = {
hasParamNames?: boolean;
userMethod?: UserMethod | undefined;
devMethod?: DevMethod | undefined;
resolvedAddresses?: ResolvedAddresses | undefined;
};
const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
@ -18,7 +16,6 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
paramTypes,
hasParamNames = true,
devMethod,
resolvedAddresses,
}) => (
<table className="border w-full">
<thead>
@ -47,7 +44,6 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
r={r}
paramType={paramTypes[i]}
help={devMethod?.params?.[paramTypes[i].name]}
resolvedAddresses={resolvedAddresses}
/>
))}
</tbody>

4
src/transaction/decoder/InputDecoder.tsx
View File

@ -5,7 +5,6 @@ import { Tab } from "@headlessui/react";
import ModeTab from "../../components/ModeTab";
import DecodedParamsTable from "./DecodedParamsTable";
import { DevMethod, UserMethod } from "../../sourcify/useSourcify";
import { ResolvedAddresses } from "../../api/address-resolver";
type InputDecoderProps = {
fourBytes: string;
@ -14,7 +13,6 @@ type InputDecoderProps = {
data: string;
userMethod: UserMethod | undefined;
devMethod: DevMethod | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InputDecoder: React.FC<InputDecoderProps> = ({
@ -24,7 +22,6 @@ const InputDecoder: React.FC<InputDecoderProps> = ({
data,
userMethod,
devMethod,
resolvedAddresses,
}) => {
const utfInput = useMemo(() => {
try {
@ -57,7 +54,6 @@ const InputDecoder: React.FC<InputDecoderProps> = ({
hasParamNames={hasParamNames}
userMethod={userMethod}
devMethod={devMethod}
resolvedAddresses={resolvedAddresses}
/>
)}
</Tab.Panel>

53
src/use4Bytes.ts
View File

@ -1,11 +1,11 @@
import { useState, useEffect, useContext, useMemo } from "react";
import { useContext, useMemo } from "react";
import {
Fragment,
Interface,
TransactionDescription,
} from "@ethersproject/abi";
import { BigNumberish } from "@ethersproject/bignumber";
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
import { RuntimeContext } from "./useRuntime";
import { fourBytesURL } from "./url";
@ -14,8 +14,6 @@ export type FourBytesEntry = {
signature: string | undefined;
};
export type FourBytesMap = Record<string, FourBytesEntry | null | undefined>;
/**
* Given a hex input data; extract the method selector
*
@ -61,38 +59,6 @@ const fetch4Bytes = async (
}
};
// TODO: migrate to swr and merge with use4Bytes
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
*
@ -111,10 +77,6 @@ export const use4Bytes = (
const assetsURLPrefix = config?.assetsURLPrefix;
const fourBytesFetcher = (key: string | null) => {
// TODO: throw error?
if (assetsURLPrefix === undefined) {
return undefined;
}
if (key === null || key === "0x") {
return undefined;
}
@ -126,17 +88,14 @@ export const use4Bytes = (
return undefined;
}
return fetch4Bytes(assetsURLPrefix, key.slice(2));
return fetch4Bytes(assetsURLPrefix!, key.slice(2));
};
const { data, error } = useSWR<FourBytesEntry | null | undefined>(
rawFourBytes,
const { data, error } = useSWRImmutable<FourBytesEntry | null | undefined>(
assetsURLPrefix !== undefined ? rawFourBytes : null,
fourBytesFetcher
);
if (error) {
return undefined;
}
return data;
return error ? undefined : data;
};
export const useMethodSelector = (data: string): [boolean, string, string] => {

43
src/useErigonHooks.ts
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useMemo } from "react";
import { useState, useEffect } from "react";
import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
import { JsonRpcProvider } from "@ethersproject/providers";
import { getAddress } from "@ethersproject/address";
@ -6,7 +6,6 @@ import { Contract } from "@ethersproject/contracts";
import { defaultAbiCoder } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
import { extract4Bytes } from "./use4Bytes";
import { getInternalOperations } from "./nodeFunctions";
import {
TokenMetas,
@ -408,46 +407,6 @@ export const useTraceTransaction = (
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;
};
const hasCode = async (
provider: JsonRpcProvider,
address: ChecksummedAddress

141
src/useResolvedAddresses.ts
View File

@ -1,14 +1,11 @@
import { useState, useEffect, useRef, useContext } from "react";
import { JsonRpcProvider } from "@ethersproject/providers";
import { useState, useEffect, useContext } from "react";
import { BaseProvider } from "@ethersproject/providers";
import { getAddress, isAddress } from "@ethersproject/address";
import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
import { TraceGroup } from "./useErigonHooks";
import useSWRImmutable from "swr/immutable";
import { mainResolver } from "./api/address-resolver";
import { SelectedResolvedName } from "./api/address-resolver/CompositeAddressResolver";
import { RuntimeContext } from "./useRuntime";
import {
ChecksummedAddress,
ProcessedTransaction,
TransactionData,
} from "./types";
import { ChecksummedAddress } from "./types";
export const useAddressOrENSFromURL = (
addressOrName: string,
@ -69,118 +66,22 @@ export const useAddressOrENSFromURL = (
return [checksummedAddress, isENS, error];
};
export type AddressCollector = () => string[];
export const pageCollector =
(page: ProcessedTransaction[] | undefined): AddressCollector =>
() => {
if (!page) {
return [];
export const useResolvedAddress = (
provider: BaseProvider | undefined,
address: ChecksummedAddress
): SelectedResolvedName<any> | undefined => {
const fetcher = async (
key: string
): Promise<SelectedResolvedName<any> | undefined> => {
if (!provider) {
return undefined;
}
const uniqueAddresses = new Set<string>();
for (const tx of page) {
if (tx.from) {
uniqueAddresses.add(tx.from);
}
if (tx.to) {
uniqueAddresses.add(tx.to);
}
if (tx.createdContractAddress) {
uniqueAddresses.add(tx.createdContractAddress);
}
}
return Array.from(uniqueAddresses);
return mainResolver.resolveAddress(provider, address);
};
export const transactionDataCollector =
(txData: TransactionData | null | undefined): AddressCollector =>
() => {
if (!txData) {
return [];
}
const uniqueAddresses = new Set<string>();
// Standard fields
uniqueAddresses.add(txData.from);
if (txData.to) {
uniqueAddresses.add(txData.to);
}
if (txData.confirmedData?.createdContractAddress) {
uniqueAddresses.add(txData.confirmedData?.createdContractAddress);
}
// Dig token transfers
for (const t of txData.tokenTransfers) {
uniqueAddresses.add(t.from);
uniqueAddresses.add(t.to);
uniqueAddresses.add(t.token);
}
// Dig log addresses
if (txData.confirmedData) {
for (const l of txData.confirmedData.logs) {
uniqueAddresses.add(l.address);
// TODO: find a way to dig over decoded address log attributes
}
}
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
) => {
const [names, setNames] = useState<ResolvedAddresses>();
const ref = useRef<ResolvedAddresses | undefined>();
useEffect(() => {
ref.current = names;
});
useEffect(
() => {
if (!provider) {
return;
}
const populate = async () => {
const _addresses = addrCollector();
const _names = await batchPopulate(provider, _addresses, ref.current);
setNames(_names);
};
populate();
},
// DON'T put names variables in dependency array; this is intentional; useRef
[provider, addrCollector]
);
return names;
const { data, error } = useSWRImmutable(address, fetcher);
if (error) {
return undefined;
}
return data;
};