Extract subcomponents
This commit is contained in:
Willian Mitsuda
parent
4c72fd6966
commit
1e095b6dd3
|
|
@ -7,27 +7,11 @@ import React, {
|
||||||
} from "react";
|
} from "react";
|
||||||
import { Route, Switch, useParams } from "react-router-dom";
|
import { Route, Switch, useParams } from "react-router-dom";
|
||||||
import { BigNumber, ethers } from "ethers";
|
import { BigNumber, ethers } from "ethers";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import {
|
|
||||||
faCheckCircle,
|
|
||||||
faTimesCircle,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import StandardFrame from "./StandardFrame";
|
import StandardFrame from "./StandardFrame";
|
||||||
import StandardSubtitle from "./StandardSubtitle";
|
import StandardSubtitle from "./StandardSubtitle";
|
||||||
import Tab from "./components/Tab";
|
import Tab from "./components/Tab";
|
||||||
import ContentFrame from "./ContentFrame";
|
import Details from "./transaction/Details";
|
||||||
import InfoRow from "./components/InfoRow";
|
import Logs from "./transaction/Logs";
|
||||||
import BlockLink from "./components/BlockLink";
|
|
||||||
import AddressHighlighter from "./components/AddressHighlighter";
|
|
||||||
import AddressOrENSName from "./components/AddressOrENSName";
|
|
||||||
import AddressLink from "./components/AddressLink";
|
|
||||||
import Copy from "./components/Copy";
|
|
||||||
import Timestamp from "./components/Timestamp";
|
|
||||||
import InternalTransfer from "./components/InternalTransfer";
|
|
||||||
import MethodName from "./components/MethodName";
|
|
||||||
import GasValue from "./components/GasValue";
|
|
||||||
import FormattedBalance from "./components/FormattedBalance";
|
|
||||||
import TokenTransferItem from "./TokenTransferItem";
|
|
||||||
import erc20 from "./erc20.json";
|
import erc20 from "./erc20.json";
|
||||||
import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
|
import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
|
||||||
import { RuntimeContext } from "./useRuntime";
|
import { RuntimeContext } from "./useRuntime";
|
||||||
|
|
@ -140,7 +124,7 @@ const Transaction: React.FC = () => {
|
||||||
return false;
|
return false;
|
||||||
}, [txData, transfers]);
|
}, [txData, transfers]);
|
||||||
|
|
||||||
const traceTransfersUsingOtsTrace = useCallback(async () => {
|
const traceTransfers = useCallback(async () => {
|
||||||
if (!provider || !txData) {
|
if (!provider || !txData) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -160,8 +144,8 @@ const Transaction: React.FC = () => {
|
||||||
setTransfers(_transfers);
|
setTransfers(_transfers);
|
||||||
}, [provider, txData]);
|
}, [provider, txData]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
traceTransfersUsingOtsTrace();
|
traceTransfers();
|
||||||
}, [traceTransfersUsingOtsTrace]);
|
}, [traceTransfers]);
|
||||||
|
|
||||||
const selectionCtx = useSelection();
|
const selectionCtx = useSelection();
|
||||||
|
|
||||||
|
|
@ -178,185 +162,14 @@ const Transaction: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/tx/:txhash/" exact>
|
<Route path="/tx/:txhash/" exact>
|
||||||
<ContentFrame tabs>
|
<Details
|
||||||
<InfoRow title="Transaction Hash">
|
|
||||||
<div className="flex items-baseline space-x-2">
|
|
||||||
<span className="font-hash">{txData.transactionHash}</span>
|
|
||||||
<Copy value={txData.transactionHash} />
|
|
||||||
</div>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Status">
|
|
||||||
{txData.status ? (
|
|
||||||
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
|
|
||||||
<FontAwesomeIcon icon={faCheckCircle} size="1x" />
|
|
||||||
<span>Success</span>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
|
|
||||||
<FontAwesomeIcon icon={faTimesCircle} size="1x" />
|
|
||||||
<span>Fail</span>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Block">
|
|
||||||
<div className="flex items-baseline space-x-2">
|
|
||||||
<BlockLink blockTag={txData.blockNumber} />
|
|
||||||
<span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
|
|
||||||
{txData.confirmations} Block Confirmations
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Timestamp">
|
|
||||||
<Timestamp value={txData.timestamp} />
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="From">
|
|
||||||
<div className="flex items-baseline space-x-2 -ml-1">
|
|
||||||
<AddressHighlighter address={txData.from}>
|
|
||||||
<AddressOrENSName
|
|
||||||
address={txData.from}
|
|
||||||
minerAddress={txData.miner}
|
|
||||||
/>
|
|
||||||
</AddressHighlighter>
|
|
||||||
<Copy value={txData.from} />
|
|
||||||
</div>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Interacted With (To)">
|
|
||||||
<div className="flex items-baseline space-x-2 -ml-1">
|
|
||||||
<AddressHighlighter address={txData.to}>
|
|
||||||
<AddressOrENSName
|
|
||||||
address={txData.to}
|
|
||||||
minerAddress={txData.miner}
|
|
||||||
/>
|
|
||||||
</AddressHighlighter>
|
|
||||||
<Copy value={txData.to} />
|
|
||||||
</div>
|
|
||||||
{transfers && (
|
|
||||||
<div className="mt-2 space-y-1">
|
|
||||||
{transfers.map((t, i) => (
|
|
||||||
<InternalTransfer
|
|
||||||
key={i}
|
|
||||||
txData={txData}
|
txData={txData}
|
||||||
transfer={t}
|
transfers={transfers}
|
||||||
|
sendsEthToMiner={sendsEthToMiner}
|
||||||
/>
|
/>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Transaction Action">
|
|
||||||
<MethodName data={txData.data} />
|
|
||||||
</InfoRow>
|
|
||||||
{txData.tokenTransfers.length > 0 && (
|
|
||||||
<InfoRow
|
|
||||||
title={`Tokens Transferred (${txData.tokenTransfers.length})`}
|
|
||||||
>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{txData.tokenTransfers.map((t, i) => (
|
|
||||||
<TokenTransferItem
|
|
||||||
key={i}
|
|
||||||
t={t}
|
|
||||||
tokenMetas={txData.tokenMetas}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</InfoRow>
|
|
||||||
)}
|
|
||||||
<InfoRow title="Value">
|
|
||||||
<span className="rounded bg-gray-100 px-2 py-1 text-xs">
|
|
||||||
{ethers.utils.formatEther(txData.value)} Ether
|
|
||||||
</span>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Transaction Fee">
|
|
||||||
<FormattedBalance value={txData.fee} /> Ether
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Gas Price">
|
|
||||||
<div className="flex items-baseline space-x-1">
|
|
||||||
<span>
|
|
||||||
<FormattedBalance value={txData.gasPrice} /> Ether (
|
|
||||||
<FormattedBalance
|
|
||||||
value={txData.gasPrice}
|
|
||||||
decimals={9}
|
|
||||||
/>{" "}
|
|
||||||
Gwei)
|
|
||||||
</span>
|
|
||||||
{sendsEthToMiner && (
|
|
||||||
<span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
|
|
||||||
Flashbots
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Ether Price">N/A</InfoRow>
|
|
||||||
<InfoRow title="Gas Limit">
|
|
||||||
<GasValue value={txData.gasLimit} />
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Gas Used by Transaction">
|
|
||||||
<GasValue value={txData.gasUsed} /> (
|
|
||||||
{(txData.gasUsedPerc * 100).toFixed(2)}%)
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Nonce">{txData.nonce}</InfoRow>
|
|
||||||
<InfoRow title="Position in Block">
|
|
||||||
<span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
|
|
||||||
{txData.transactionIndex}
|
|
||||||
</span>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Input Data">
|
|
||||||
<textarea
|
|
||||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
|
||||||
value={txData.data}
|
|
||||||
readOnly
|
|
||||||
/>
|
|
||||||
</InfoRow>
|
|
||||||
</ContentFrame>
|
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/tx/:txhash/logs/" exact>
|
<Route path="/tx/:txhash/logs/" exact>
|
||||||
<ContentFrame tabs>
|
<Logs txData={txData} />
|
||||||
<div className="text-sm py-4">
|
|
||||||
Transaction Receipt Event Logs
|
|
||||||
</div>
|
|
||||||
{txData &&
|
|
||||||
txData.logs.map((l, i) => (
|
|
||||||
<div className="flex space-x-10 py-5" key={i}>
|
|
||||||
<div>
|
|
||||||
<span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
|
|
||||||
{l.logIndex}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full space-y-2">
|
|
||||||
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
|
|
||||||
<div className="font-bold text-right">Address</div>
|
|
||||||
<div className="col-span-11">
|
|
||||||
<AddressLink address={l.address} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{l.topics.map((t, i) => (
|
|
||||||
<div
|
|
||||||
className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
|
|
||||||
key={i}
|
|
||||||
>
|
|
||||||
<div className="text-right">
|
|
||||||
{i === 0 && "Topics"}
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-2 items-center col-span-11 font-mono">
|
|
||||||
<span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
|
|
||||||
{i}
|
|
||||||
</span>
|
|
||||||
<span>{t}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
|
|
||||||
<div className="text-right pt-2">Data</div>
|
|
||||||
<div className="col-span-11">
|
|
||||||
<textarea
|
|
||||||
className="w-full h-20 bg-gray-50 font-mono focus:outline-none border rounded p-2"
|
|
||||||
value={l.data}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</ContentFrame>
|
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
</SelectionContext.Provider>
|
</SelectionContext.Provider>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
import React from "react";
|
||||||
|
import { ethers } from "ethers";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import {
|
||||||
|
faCheckCircle,
|
||||||
|
faTimesCircle,
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import ContentFrame from "../ContentFrame";
|
||||||
|
import InfoRow from "../components/InfoRow";
|
||||||
|
import BlockLink from "../components/BlockLink";
|
||||||
|
import AddressHighlighter from "../components/AddressHighlighter";
|
||||||
|
import AddressOrENSName from "../components/AddressOrENSName";
|
||||||
|
import Copy from "../components/Copy";
|
||||||
|
import Timestamp from "../components/Timestamp";
|
||||||
|
import InternalTransfer from "../components/InternalTransfer";
|
||||||
|
import MethodName from "../components/MethodName";
|
||||||
|
import GasValue from "../components/GasValue";
|
||||||
|
import FormattedBalance from "../components/FormattedBalance";
|
||||||
|
import TokenTransferItem from "../TokenTransferItem";
|
||||||
|
import { TransactionData, Transfer } from "../types";
|
||||||
|
|
||||||
|
type DetailsProps = {
|
||||||
|
txData: TransactionData;
|
||||||
|
transfers?: Transfer[];
|
||||||
|
sendsEthToMiner: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Details: React.FC<DetailsProps> = ({
|
||||||
|
txData,
|
||||||
|
transfers,
|
||||||
|
sendsEthToMiner,
|
||||||
|
}) => (
|
||||||
|
<ContentFrame tabs>
|
||||||
|
<InfoRow title="Transaction Hash">
|
||||||
|
<div className="flex items-baseline space-x-2">
|
||||||
|
<span className="font-hash">{txData.transactionHash}</span>
|
||||||
|
<Copy value={txData.transactionHash} />
|
||||||
|
</div>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Status">
|
||||||
|
{txData.status ? (
|
||||||
|
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
|
||||||
|
<FontAwesomeIcon icon={faCheckCircle} size="1x" />
|
||||||
|
<span>Success</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
|
||||||
|
<FontAwesomeIcon icon={faTimesCircle} size="1x" />
|
||||||
|
<span>Fail</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Block">
|
||||||
|
<div className="flex items-baseline space-x-2">
|
||||||
|
<BlockLink blockTag={txData.blockNumber} />
|
||||||
|
<span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
|
||||||
|
{txData.confirmations} Block Confirmations
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Timestamp">
|
||||||
|
<Timestamp value={txData.timestamp} />
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="From">
|
||||||
|
<div className="flex items-baseline space-x-2 -ml-1">
|
||||||
|
<AddressHighlighter address={txData.from}>
|
||||||
|
<AddressOrENSName address={txData.from} minerAddress={txData.miner} />
|
||||||
|
</AddressHighlighter>
|
||||||
|
<Copy value={txData.from} />
|
||||||
|
</div>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Interacted With (To)">
|
||||||
|
<div className="flex items-baseline space-x-2 -ml-1">
|
||||||
|
<AddressHighlighter address={txData.to}>
|
||||||
|
<AddressOrENSName address={txData.to} minerAddress={txData.miner} />
|
||||||
|
</AddressHighlighter>
|
||||||
|
<Copy value={txData.to} />
|
||||||
|
</div>
|
||||||
|
{transfers && (
|
||||||
|
<div className="mt-2 space-y-1">
|
||||||
|
{transfers.map((t, i) => (
|
||||||
|
<InternalTransfer key={i} txData={txData} transfer={t} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Transaction Action">
|
||||||
|
<MethodName data={txData.data} />
|
||||||
|
</InfoRow>
|
||||||
|
{txData.tokenTransfers.length > 0 && (
|
||||||
|
<InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{txData.tokenTransfers.map((t, i) => (
|
||||||
|
<TokenTransferItem key={i} t={t} tokenMetas={txData.tokenMetas} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</InfoRow>
|
||||||
|
)}
|
||||||
|
<InfoRow title="Value">
|
||||||
|
<span className="rounded bg-gray-100 px-2 py-1 text-xs">
|
||||||
|
{ethers.utils.formatEther(txData.value)} Ether
|
||||||
|
</span>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Transaction Fee">
|
||||||
|
<FormattedBalance value={txData.fee} /> Ether
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Gas Price">
|
||||||
|
<div className="flex items-baseline space-x-1">
|
||||||
|
<span>
|
||||||
|
<FormattedBalance value={txData.gasPrice} /> Ether (
|
||||||
|
<FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
|
||||||
|
</span>
|
||||||
|
{sendsEthToMiner && (
|
||||||
|
<span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
|
||||||
|
Flashbots
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Ether Price">N/A</InfoRow>
|
||||||
|
<InfoRow title="Gas Limit">
|
||||||
|
<GasValue value={txData.gasLimit} />
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Gas Used by Transaction">
|
||||||
|
<GasValue value={txData.gasUsed} /> (
|
||||||
|
{(txData.gasUsedPerc * 100).toFixed(2)}%)
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Nonce">{txData.nonce}</InfoRow>
|
||||||
|
<InfoRow title="Position in Block">
|
||||||
|
<span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
|
||||||
|
{txData.transactionIndex}
|
||||||
|
</span>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow title="Input Data">
|
||||||
|
<textarea
|
||||||
|
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||||
|
value={txData.data}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</InfoRow>
|
||||||
|
</ContentFrame>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default React.memo(Details);
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import React from "react";
|
||||||
|
import ContentFrame from "../ContentFrame";
|
||||||
|
import AddressLink from "../components/AddressLink";
|
||||||
|
import { TransactionData } from "../types";
|
||||||
|
|
||||||
|
type LogsProps = {
|
||||||
|
txData: TransactionData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Logs: React.FC<LogsProps> = ({ txData }) => (
|
||||||
|
<ContentFrame tabs>
|
||||||
|
<div className="text-sm py-4">Transaction Receipt Event Logs</div>
|
||||||
|
{txData &&
|
||||||
|
txData.logs.map((l, i) => (
|
||||||
|
<div className="flex space-x-10 py-5" key={i}>
|
||||||
|
<div>
|
||||||
|
<span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
|
||||||
|
{l.logIndex}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full space-y-2">
|
||||||
|
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
|
||||||
|
<div className="font-bold text-right">Address</div>
|
||||||
|
<div className="col-span-11">
|
||||||
|
<AddressLink address={l.address} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{l.topics.map((t, i) => (
|
||||||
|
<div
|
||||||
|
className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
|
||||||
|
key={i}
|
||||||
|
>
|
||||||
|
<div className="text-right">{i === 0 && "Topics"}</div>
|
||||||
|
<div className="flex space-x-2 items-center col-span-11 font-mono">
|
||||||
|
<span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
|
||||||
|
{i}
|
||||||
|
</span>
|
||||||
|
<span>{t}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
|
||||||
|
<div className="text-right pt-2">Data</div>
|
||||||
|
<div className="col-span-11">
|
||||||
|
<textarea
|
||||||
|
className="w-full h-20 bg-gray-50 font-mono focus:outline-none border rounded p-2"
|
||||||
|
value={l.data}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</ContentFrame>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default React.memo(Logs);
|
||||||
Loading…
Reference in New Issue