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

Add eoa/contract legend support to trace page

This commit is contained in:
Willian Mitsuda 2022-03-01 23:51:22 -03:00
parent 6220d230fa
commit 716ec73478
3 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/transaction/Trace.tsx
View File

@ -24,7 +24,12 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
</div> </div>
<div className="ml-5 space-y-3 self-stretch"> <div className="ml-5 space-y-3 self-stretch">
{traces.map((t, i, a) => ( {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> </div>
</> </>

23
src/transaction/TraceInput.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useContext, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb"; import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
import TransactionAddress from "../components/TransactionAddress"; import TransactionAddress from "../components/TransactionAddress";
@ -6,18 +6,21 @@ import FormattedBalance from "../components/FormattedBalance";
import FunctionSignature from "./FunctionSignature"; import FunctionSignature from "./FunctionSignature";
import InputDecoder from "./decoder/InputDecoder"; import InputDecoder from "./decoder/InputDecoder";
import ExpanderSwitch from "../components/ExpanderSwitch"; import ExpanderSwitch from "../components/ExpanderSwitch";
import { TraceEntry } from "../useErigonHooks"; import { RuntimeContext } from "../useRuntime";
import { TraceEntry, useHasCode } from "../useErigonHooks";
import { import {
extract4Bytes, extract4Bytes,
use4Bytes, use4Bytes,
useTransactionDescription, useTransactionDescription,
} from "../use4Bytes"; } from "../use4Bytes";
import { TransactionData } from "../types";
type TraceInputProps = { type TraceInputProps = {
t: TraceEntry; t: TraceEntry;
txData: TransactionData;
}; };
const TraceInput: React.FC<TraceInputProps> = ({ t }) => { const TraceInput: React.FC<TraceInputProps> = ({ t, txData }) => {
const raw4Bytes = extract4Bytes(t.input); const raw4Bytes = extract4Bytes(t.input);
const fourBytes = use4Bytes(raw4Bytes); const fourBytes = use4Bytes(raw4Bytes);
const sigText = const sigText =
@ -32,6 +35,15 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
const [expanded, setExpanded] = useState<boolean>(false); 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 ( return (
<div <div
className={`ml-5 border hover:border-gray-500 rounded px-1 py-0.5 ${ 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> <span>
<TransactionAddress address={t.to} /> <TransactionAddress
address={t.to}
eoa={toHasCode === undefined ? undefined : !toHasCode}
/>
</span> </span>
{t.type !== "CREATE" && t.type !== "CREATE2" && ( {t.type !== "CREATE" && t.type !== "CREATE2" && (
<> <>

29
src/transaction/TraceItem.tsx
View File

@ -5,13 +5,15 @@ import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare
import { Switch } from "@headlessui/react"; import { Switch } from "@headlessui/react";
import { TraceGroup } from "../useErigonHooks"; import { TraceGroup } from "../useErigonHooks";
import TraceInput from "./TraceInput"; import TraceInput from "./TraceInput";
import { TransactionData } from "../types";
type TraceItemProps = { type TraceItemProps = {
t: TraceGroup; t: TraceGroup;
last: boolean; 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); const [expanded, setExpanded] = useState<boolean>(true);
return ( return (
@ -33,7 +35,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
/> />
</Switch> </Switch>
)} )}
<TraceInput t={t} /> <TraceInput t={t} txData={txData} />
</div> </div>
{t.children && ( {t.children && (
<div <div
@ -41,7 +43,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
expanded ? "" : "hidden" expanded ? "" : "hidden"
}`} }`}
> >
<TraceChildren c={t.children} /> <TraceChildren c={t.children} txData={txData} />
</div> </div>
)} )}
</> </>
@ -50,16 +52,19 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
type TraceChildrenProps = { type TraceChildrenProps = {
c: TraceGroup[]; c: TraceGroup[];
txData: TransactionData;
}; };
const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => { const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
return ( ({ c, txData }) => {
<> return (
{c.map((tc, i, a) => ( <>
<TraceItem key={i} t={tc} last={i === a.length - 1} /> {c.map((tc, i, a) => (
))} <TraceItem key={i} t={tc} last={i === a.length - 1} txData={txData} />
</> ))}
); </>
}); );
}
);
export default TraceItem; export default TraceItem;