Merge branch 'feature/address-eoa-contract-decoration' into develop
This commit is contained in:
commit
ede3e880ea
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
|
||||
import TransactionAddress from "./components/TransactionAddress";
|
||||
|
@ -9,13 +9,17 @@ import {
|
|||
ChecksummedAddress,
|
||||
TokenMeta,
|
||||
TokenTransfer,
|
||||
TransactionData,
|
||||
} from "./types";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { useHasCode } from "./useErigonHooks";
|
||||
import { Metadata } from "./sourcify/useSourcify";
|
||||
|
||||
type TokenTransferItemProps = {
|
||||
t: TokenTransfer;
|
||||
tokenMeta?: TokenMeta | null | undefined;
|
||||
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
|
||||
txData: TransactionData;
|
||||
};
|
||||
|
||||
// TODO: handle partial
|
||||
|
@ -23,42 +27,59 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
t,
|
||||
tokenMeta,
|
||||
metadatas,
|
||||
}) => (
|
||||
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faCaretRight} size="1x" />
|
||||
</span>
|
||||
<div className="grid grid-cols-7 gap-x-1 w-full">
|
||||
<div className="col-span-2 flex space-x-1">
|
||||
<span className="font-bold">From</span>
|
||||
<TransactionAddress
|
||||
address={t.from}
|
||||
addressCtx={AddressContext.FROM}
|
||||
metadata={metadatas[t.from]}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex space-x-1">
|
||||
<span className="font-bold">To</span>
|
||||
<TransactionAddress
|
||||
address={t.to}
|
||||
addressCtx={AddressContext.TO}
|
||||
metadata={metadatas[t.to]}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex space-x-1">
|
||||
<span className="font-bold">For</span>
|
||||
<span>
|
||||
<ValueHighlighter value={t.value}>
|
||||
<FormattedBalance
|
||||
value={t.value}
|
||||
decimals={tokenMeta?.decimals ?? 0}
|
||||
/>
|
||||
</ValueHighlighter>
|
||||
</span>
|
||||
<TransactionAddress address={t.token} metadata={metadatas[t.token]} />
|
||||
txData,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const fromHasCode = useHasCode(
|
||||
provider,
|
||||
t.from,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
t.to,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faCaretRight} size="1x" />
|
||||
</span>
|
||||
<div className="grid grid-cols-7 gap-x-1 w-full">
|
||||
<div className="col-span-2 flex space-x-1">
|
||||
<span className="font-bold">From</span>
|
||||
<TransactionAddress
|
||||
address={t.from}
|
||||
addressCtx={AddressContext.FROM}
|
||||
metadata={metadatas[t.from]}
|
||||
eoa={fromHasCode === undefined ? undefined : !fromHasCode}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex space-x-1">
|
||||
<span className="font-bold">To</span>
|
||||
<TransactionAddress
|
||||
address={t.to}
|
||||
addressCtx={AddressContext.TO}
|
||||
metadata={metadatas[t.to]}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex space-x-1">
|
||||
<span className="font-bold">For</span>
|
||||
<span>
|
||||
<ValueHighlighter value={t.value}>
|
||||
<FormattedBalance
|
||||
value={t.value}
|
||||
decimals={tokenMeta?.decimals ?? 0}
|
||||
/>
|
||||
</ValueHighlighter>
|
||||
</span>
|
||||
<TransactionAddress address={t.token} metadata={metadatas[t.token]} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(TokenTransferItem);
|
||||
|
|
|
@ -1,54 +0,0 @@
|
|||
import React, { useContext } from "react";
|
||||
import PlainAddress from "./PlainAddress";
|
||||
import { resolverRendererRegistry } from "../api/address-resolver";
|
||||
import { useResolvedAddress } from "../useResolvedAddresses";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { ChecksummedAddress } from "../types";
|
||||
|
||||
type AddressOrENSNameProps = {
|
||||
address: ChecksummedAddress;
|
||||
selectedAddress?: string;
|
||||
dontOverrideColors?: boolean;
|
||||
};
|
||||
|
||||
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
|
||||
address,
|
||||
selectedAddress,
|
||||
dontOverrideColors,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const resolvedAddress = useResolvedAddress(provider, address);
|
||||
const linkable = address !== selectedAddress;
|
||||
|
||||
if (!provider || !resolvedAddress) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const [resolver, resolvedName] = resolvedAddress;
|
||||
const renderer = resolverRendererRegistry.get(resolver);
|
||||
if (renderer === undefined) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return renderer(
|
||||
provider.network.chainId,
|
||||
address,
|
||||
resolvedName,
|
||||
linkable,
|
||||
!!dontOverrideColors
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressOrENSName;
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import StandardSubtitle from "../StandardSubtitle";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
|
||||
type AddressOrENSNameInvalidNonceProps = {
|
||||
addressOrENSName: string;
|
||||
|
@ -15,7 +15,7 @@ const AddressOrENSNameInvalidNonce: React.FC<
|
|||
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
||||
<ContentFrame>
|
||||
<div className="flex py-4 text-sm">
|
||||
<AddressOrENSName address={addressOrENSName} />
|
||||
<DecoratedAddressLink address={addressOrENSName} />
|
||||
<span>: no transaction found for nonce="{nonce}".</span>
|
||||
</div>
|
||||
</ContentFrame>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import StandardSubtitle from "../StandardSubtitle";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
|
||||
type AddressOrENSNameNoTxProps = {
|
||||
addressOrENSName: string;
|
||||
|
@ -14,7 +14,7 @@ const AddressOrENSNameNoTx: React.FC<AddressOrENSNameNoTxProps> = ({
|
|||
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
||||
<ContentFrame>
|
||||
<div className="flex py-4 text-sm">
|
||||
<AddressOrENSName address={addressOrENSName} />
|
||||
<DecoratedAddressLink address={addressOrENSName} />
|
||||
<span>: no outbound transactions found.</span>
|
||||
</div>
|
||||
</ContentFrame>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
|
||||
|
@ -6,21 +6,25 @@ import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
|
|||
import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
|
||||
import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
|
||||
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
|
||||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import SourcifyLogo from "../sourcify/SourcifyLogo";
|
||||
import { AddressContext, ZERO_ADDRESS } from "../types";
|
||||
import PlainAddress from "./PlainAddress";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useResolvedAddress } from "../useResolvedAddresses";
|
||||
import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
|
||||
import { resolverRendererRegistry } from "../api/address-resolver";
|
||||
|
||||
type DecoratedAddressLinkProps = {
|
||||
address: string;
|
||||
selectedAddress?: string;
|
||||
addressCtx?: AddressContext;
|
||||
creation?: boolean;
|
||||
miner?: boolean;
|
||||
selfDestruct?: boolean;
|
||||
txFrom?: boolean;
|
||||
txTo?: boolean;
|
||||
address: ChecksummedAddress;
|
||||
selectedAddress?: ChecksummedAddress | undefined;
|
||||
addressCtx?: AddressContext | undefined;
|
||||
creation?: boolean | undefined;
|
||||
miner?: boolean | undefined;
|
||||
selfDestruct?: boolean | undefined;
|
||||
txFrom?: boolean | undefined;
|
||||
txTo?: boolean | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
eoa?: boolean | undefined;
|
||||
};
|
||||
|
||||
const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
||||
|
@ -33,6 +37,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
txFrom,
|
||||
txTo,
|
||||
metadata,
|
||||
eoa,
|
||||
}) => {
|
||||
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
|
||||
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
|
||||
|
@ -80,13 +85,84 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
<SourcifyLogo />
|
||||
</NavLink>
|
||||
)}
|
||||
<AddressOrENSName
|
||||
<ResolvedAddress
|
||||
address={address}
|
||||
selectedAddress={selectedAddress}
|
||||
dontOverrideColors={mint || burn}
|
||||
/>
|
||||
{!mint && !burn && (
|
||||
<>
|
||||
{eoa === true && (
|
||||
<AddressLegend title="Externally owned account">
|
||||
[EOA]
|
||||
</AddressLegend>
|
||||
)}
|
||||
{eoa === false && (
|
||||
<AddressLegend title="Contract account">[C]</AddressLegend>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ResolvedAddressProps = {
|
||||
address: ChecksummedAddress;
|
||||
selectedAddress?: ChecksummedAddress | undefined;
|
||||
dontOverrideColors?: boolean;
|
||||
};
|
||||
|
||||
const ResolvedAddress: React.FC<ResolvedAddressProps> = ({
|
||||
address,
|
||||
selectedAddress,
|
||||
dontOverrideColors,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const resolvedAddress = useResolvedAddress(provider, address);
|
||||
const linkable = address !== selectedAddress;
|
||||
|
||||
if (!provider || !resolvedAddress) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const [resolver, resolvedName] = resolvedAddress;
|
||||
const renderer = resolverRendererRegistry.get(resolver);
|
||||
if (renderer === undefined) {
|
||||
return (
|
||||
<PlainAddress
|
||||
address={address}
|
||||
linkable={linkable}
|
||||
dontOverrideColors={dontOverrideColors}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return renderer(
|
||||
provider.network.chainId,
|
||||
address,
|
||||
resolvedName,
|
||||
linkable,
|
||||
!!dontOverrideColors
|
||||
);
|
||||
};
|
||||
|
||||
type AddressLegendProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
const AddressLegend: React.FC<AddressLegendProps> = ({ title, children }) => (
|
||||
<span
|
||||
className="text-xs text-gray-400 text-opacity-70 not-italic"
|
||||
title={title}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
export default React.memo(DecoratedAddressLink);
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { formatEther } from "@ethersproject/units";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
|
||||
import AddressHighlighter from "./AddressHighlighter";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { TransactionData, InternalOperation } from "../types";
|
||||
|
||||
type InternalTransferProps = {
|
||||
|
@ -22,6 +24,18 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
txData.confirmedData?.miner !== undefined &&
|
||||
internalOp.to === txData.confirmedData.miner;
|
||||
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const fromHasCode = useHasCode(
|
||||
provider,
|
||||
internalOp.from,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
internalOp.to,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-baseline space-x-1 whitespace-nowrap">
|
||||
<span className="text-gray-500">
|
||||
|
@ -41,6 +55,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
miner={fromMiner}
|
||||
txFrom={internalOp.from === txData.from}
|
||||
txTo={internalOp.from === txData.to}
|
||||
eoa={fromHasCode === undefined ? undefined : !fromHasCode}
|
||||
/>
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
|
@ -58,6 +73,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
miner={toMiner}
|
||||
txFrom={internalOp.to === txData.from}
|
||||
txTo={internalOp.to === txData.to}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
|
|
|
@ -9,12 +9,14 @@ type TransactionAddressProps = {
|
|||
address: string;
|
||||
addressCtx?: AddressContext | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
eoa?: boolean | undefined;
|
||||
};
|
||||
|
||||
const TransactionAddress: React.FC<TransactionAddressProps> = ({
|
||||
address,
|
||||
addressCtx,
|
||||
metadata,
|
||||
eoa,
|
||||
}) => {
|
||||
const txData = useSelectedTransaction();
|
||||
// TODO: push down creation coloring logic into DecoratedAddressLink
|
||||
|
@ -30,6 +32,7 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
|
|||
txTo={address === txData?.to || creation}
|
||||
creation={creation}
|
||||
metadata={metadata}
|
||||
eoa={eoa}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { BlockTag } from "@ethersproject/abstract-provider";
|
||||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
@ -16,6 +16,8 @@ import TransactionDirection, {
|
|||
import TransactionValue from "../components/TransactionValue";
|
||||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { FeeDisplay } from "./useFeeToggler";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { formatValue } from "../components/formatter";
|
||||
import ETH2USDValue from "../components/ETH2USDValue";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
|
@ -35,6 +37,13 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
priceMap,
|
||||
metadatas,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
tx.to ?? undefined,
|
||||
tx.blockNumber - 1
|
||||
);
|
||||
|
||||
let direction: Direction | undefined;
|
||||
if (selectedAddress) {
|
||||
if (tx.from === selectedAddress && tx.to === selectedAddress) {
|
||||
|
@ -107,6 +116,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress={selectedAddress}
|
||||
miner={tx.miner === tx.to}
|
||||
metadata={metadatas[tx.to]}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
) : (
|
||||
|
@ -116,6 +126,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress={selectedAddress}
|
||||
creation
|
||||
metadata={metadatas[tx.createdContractAddress!]}
|
||||
eoa={false}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
)}
|
||||
|
|
|
@ -45,7 +45,7 @@ import {
|
|||
import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useContractsMetadata } from "../hooks";
|
||||
import { useTransactionError } from "../useErigonHooks";
|
||||
import { useHasCode, useTransactionError } from "../useErigonHooks";
|
||||
|
||||
type DetailsProps = {
|
||||
txData: TransactionData;
|
||||
|
@ -118,6 +118,12 @@ const Details: React.FC<DetailsProps> = ({
|
|||
: undefined;
|
||||
const [expanded, setExpanded] = useState<boolean>(false);
|
||||
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
txData.to,
|
||||
txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<ContentFrame tabs>
|
||||
<InfoRow title="Transaction Hash">
|
||||
|
@ -264,6 +270,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<TransactionAddress
|
||||
address={txData.to}
|
||||
metadata={metadatas?.[txData.to]}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
<Copy value={txData.to} />
|
||||
</div>
|
||||
|
@ -307,6 +314,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
t={t}
|
||||
tokenMeta={txData.tokenMetas[t.token]}
|
||||
metadatas={metadatas}
|
||||
txData={txData}
|
||||
/>
|
||||
))}
|
||||
</InfoRow>
|
||||
|
|
|
@ -24,7 +24,12 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
|
|||
</div>
|
||||
<div className="ml-5 space-y-3 self-stretch">
|
||||
{traces.map((t, i, a) => (
|
||||
<TraceItem key={i} t={t} last={i === a.length - 1} />
|
||||
<TraceItem
|
||||
key={i}
|
||||
t={t}
|
||||
last={i === a.length - 1}
|
||||
txData={txData}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
|
||||
import TransactionAddress from "../components/TransactionAddress";
|
||||
|
@ -6,18 +6,21 @@ import FormattedBalance from "../components/FormattedBalance";
|
|||
import FunctionSignature from "./FunctionSignature";
|
||||
import InputDecoder from "./decoder/InputDecoder";
|
||||
import ExpanderSwitch from "../components/ExpanderSwitch";
|
||||
import { TraceEntry } from "../useErigonHooks";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { TraceEntry, useHasCode } from "../useErigonHooks";
|
||||
import {
|
||||
extract4Bytes,
|
||||
use4Bytes,
|
||||
useTransactionDescription,
|
||||
} from "../use4Bytes";
|
||||
import { TransactionData } from "../types";
|
||||
|
||||
type TraceInputProps = {
|
||||
t: TraceEntry;
|
||||
txData: TransactionData;
|
||||
};
|
||||
|
||||
const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
|
||||
const TraceInput: React.FC<TraceInputProps> = ({ t, txData }) => {
|
||||
const raw4Bytes = extract4Bytes(t.input);
|
||||
const fourBytes = use4Bytes(raw4Bytes);
|
||||
const sigText =
|
||||
|
@ -32,6 +35,15 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
|
|||
|
||||
const [expanded, setExpanded] = useState<boolean>(false);
|
||||
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const toHasCode = useHasCode(
|
||||
provider,
|
||||
t.to,
|
||||
txData.confirmedData !== undefined
|
||||
? txData.confirmedData.blockNumber - 1
|
||||
: undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`ml-5 border hover:border-gray-500 rounded px-1 py-0.5 ${
|
||||
|
@ -47,7 +59,10 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
|
|||
) : (
|
||||
<>
|
||||
<span>
|
||||
<TransactionAddress address={t.to} />
|
||||
<TransactionAddress
|
||||
address={t.to}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</span>
|
||||
{t.type !== "CREATE" && t.type !== "CREATE2" && (
|
||||
<>
|
||||
|
|
|
@ -5,13 +5,15 @@ import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare
|
|||
import { Switch } from "@headlessui/react";
|
||||
import { TraceGroup } from "../useErigonHooks";
|
||||
import TraceInput from "./TraceInput";
|
||||
import { TransactionData } from "../types";
|
||||
|
||||
type TraceItemProps = {
|
||||
t: TraceGroup;
|
||||
last: boolean;
|
||||
txData: TransactionData;
|
||||
};
|
||||
|
||||
const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
|
||||
const TraceItem: React.FC<TraceItemProps> = ({ t, last, txData }) => {
|
||||
const [expanded, setExpanded] = useState<boolean>(true);
|
||||
|
||||
return (
|
||||
|
@ -33,7 +35,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
|
|||
/>
|
||||
</Switch>
|
||||
)}
|
||||
<TraceInput t={t} />
|
||||
<TraceInput t={t} txData={txData} />
|
||||
</div>
|
||||
{t.children && (
|
||||
<div
|
||||
|
@ -41,7 +43,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
|
|||
expanded ? "" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<TraceChildren c={t.children} />
|
||||
<TraceChildren c={t.children} txData={txData} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
@ -50,16 +52,19 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
|
|||
|
||||
type TraceChildrenProps = {
|
||||
c: TraceGroup[];
|
||||
txData: TransactionData;
|
||||
};
|
||||
|
||||
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
|
||||
return (
|
||||
<>
|
||||
{c.map((tc, i, a) => (
|
||||
<TraceItem key={i} t={tc} last={i === a.length - 1} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
|
||||
({ c, txData }) => {
|
||||
return (
|
||||
<>
|
||||
{c.map((tc, i, a) => (
|
||||
<TraceItem key={i} t={tc} last={i === a.length - 1} txData={txData} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default TraceItem;
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
|
||||
import {
|
||||
Block,
|
||||
BlockWithTransactions,
|
||||
BlockTag,
|
||||
} from "@ethersproject/abstract-provider";
|
||||
import { JsonRpcProvider } from "@ethersproject/providers";
|
||||
import { getAddress } from "@ethersproject/address";
|
||||
import { Contract } from "@ethersproject/contracts";
|
||||
|
@ -7,6 +11,7 @@ import { defaultAbiCoder } from "@ethersproject/abi";
|
|||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
|
||||
import useSWR, { useSWRConfig } from "swr";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
import { getInternalOperations } from "./nodeFunctions";
|
||||
import {
|
||||
TokenMetas,
|
||||
|
@ -679,3 +684,43 @@ export const useAddressBalance = (
|
|||
|
||||
return balance;
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a generic fetch for SWR, where the key is an array, whose
|
||||
* element 0 is the JSON-RPC method, and the remaining are the method
|
||||
* arguments.
|
||||
*/
|
||||
export const providerFetcher =
|
||||
(provider: JsonRpcProvider | undefined) =>
|
||||
async (...key: any[]): Promise<any | undefined> => {
|
||||
if (provider === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
for (const a of key) {
|
||||
if (a === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
const method = key[0];
|
||||
const args = key.slice(1);
|
||||
const result = await provider.send(method, args);
|
||||
// console.log(`providerFetcher: ${method} ${args} === ${result}`);
|
||||
return result;
|
||||
};
|
||||
|
||||
export const useHasCode = (
|
||||
provider: JsonRpcProvider | undefined,
|
||||
address: ChecksummedAddress | undefined,
|
||||
blockTag: BlockTag = "latest"
|
||||
): boolean | undefined => {
|
||||
const fetcher = providerFetcher(provider);
|
||||
const { data, error } = useSWRImmutable(
|
||||
["ots_hasCode", address, blockTag],
|
||||
fetcher
|
||||
);
|
||||
if (error) {
|
||||
return undefined;
|
||||
}
|
||||
return data as boolean | undefined;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue