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

Replace batch calls of address resolution caches and deep props down with in-place useSWR calls

Browse Source
This commit is contained in:
Willian Mitsuda 2021-12-16 23:17:13 -03:00
parent f1d06b5025
commit ff0fd63ab9
23 changed files with 64 additions and 223 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>

25
src/Transaction.tsx
View File

@ -11,10 +11,7 @@ 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 { transactionDataCollector } from "./useResolvedAddresses";
import { SelectedTransactionContext } from "./useSelectedTransaction";
const Details = React.lazy(
@ -49,7 +46,6 @@ const Transaction: React.FC = () => {
() => transactionDataCollector(txData),
[txData]
);
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
const internalOps = useInternalOperations(provider, txData);
const sendsEthToMiner = useMemo(() => {
@ -119,29 +115,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>

2
src/address/AddressTransactionResults.tsx
View File

@ -104,7 +104,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
// 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(() => {
@ -152,7 +151,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
<TransactionItem
key={tx.hash}
tx={tx}
resolvedAddresses={resolvedAddresses}
selectedAddress={address}
feeDisplay={feeDisplay}
priceMap={priceMap}

4
src/block/BlockTransactionResults.tsx
View File

@ -8,7 +8,7 @@ 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 { pageCollector } from "../useResolvedAddresses";
import { ChecksummedAddress, ProcessedTransaction } from "../types";
import { PAGE_SIZE } from "../params";
import { useMultipleETHUSDOracle } from "../usePriceOracle";
@ -31,7 +31,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
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 +78,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}
/>
))}

23
src/transaction/Trace.tsx
View File

@ -6,32 +6,19 @@ 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";
import { tracesCollector } 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,10 +26,7 @@ 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) => (
@ -51,7 +35,6 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
t={t}
last={i === a.length - 1}
fourBytesMap={sigMap}
resolvedAddresses={mergedResolvedAddresses}
/>
))}
</div>

14
src/transaction/TraceInput.tsx
View File

@ -7,7 +7,6 @@ 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,
@ -17,14 +16,9 @@ import {
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, fourBytesMap }) => {
const raw4Bytes = extract4Bytes(t.input);
const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
const sigText =
@ -54,10 +48,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 +84,6 @@ const TraceInput: React.FC<TraceInputProps> = ({
data={t.input}
userMethod={undefined}
devMethod={undefined}
resolvedAddresses={resolvedAddresses}
/>
</div>
<div>)</div>

25
src/transaction/TraceItem.tsx
View File

@ -5,22 +5,15 @@ 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, fourBytesMap }) => {
const [expanded, setExpanded] = useState<boolean>(true);
return (
@ -42,11 +35,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
/>
</Switch>
)}
<TraceInput
t={t}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
<TraceInput t={t} fourBytesMap={fourBytesMap} />
</div>
{t.children && (
<div
@ -54,11 +43,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
expanded ? "" : "hidden"
}`}
>
<TraceChildren
c={t.children}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
<TraceChildren c={t.children} fourBytesMap={fourBytesMap} />
</div>
)}
</>
@ -68,11 +53,10 @@ 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 }) => {
({ c, fourBytesMap }) => {
return (
<>
{c.map((tc, i, a) => (
@ -81,7 +65,6 @@ const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
t={tc}
last={i === a.length - 1}
fourBytesMap={fourBytesMap}
resolvedAddresses={resolvedAddresses}
/>
))}
</>

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>

30
src/useResolvedAddresses.ts
View File

@ -1,7 +1,13 @@
import { useState, useEffect, useRef, useContext } from "react";
import { JsonRpcProvider } from "@ethersproject/providers";
import { BaseProvider, JsonRpcProvider } from "@ethersproject/providers";
import { getAddress, isAddress } from "@ethersproject/address";
import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
import useSWR from "swr";
import {
batchPopulate,
mainResolver,
ResolvedAddresses,
} from "./api/address-resolver";
import { SelectedResolvedName } from "./api/address-resolver/CompositeAddressResolver";
import { TraceGroup } from "./useErigonHooks";
import { RuntimeContext } from "./useRuntime";
import {
@ -184,3 +190,23 @@ export const useResolvedAddresses = (
return names;
};
export const useResolvedAddress = (
provider: BaseProvider | undefined,
address: ChecksummedAddress
): SelectedResolvedName<any> | undefined => {
const fetcher = async (
key: string
): Promise<SelectedResolvedName<any> | undefined> => {
if (!provider) {
return undefined;
}
return mainResolver.resolveAddress(provider, address);
};
const { data, error } = useSWR(address, fetcher);
if (error) {
return undefined;
}
return data;
};