Merge branch 'feature/tx-data-improvements' into develop
This commit is contained in:
commit
ad29cbdc5d
|
@ -1,19 +1,13 @@
|
|||
import React, { useState, useEffect, useMemo, useContext } from "react";
|
||||
import React, { useMemo, useContext } from "react";
|
||||
import { Route, Switch, useParams } from "react-router-dom";
|
||||
import { BigNumber, ethers } from "ethers";
|
||||
import StandardFrame from "./StandardFrame";
|
||||
import StandardSubtitle from "./StandardSubtitle";
|
||||
import Tab from "./components/Tab";
|
||||
import Details from "./transaction/Details";
|
||||
import Logs from "./transaction/Logs";
|
||||
import erc20 from "./erc20.json";
|
||||
import { TokenMetas, TokenTransfer, TransactionData } from "./types";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { SelectionContext, useSelection } from "./useSelection";
|
||||
import { useInternalOperations } from "./useErigonHooks";
|
||||
|
||||
const TRANSFER_TOPIC =
|
||||
"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
|
||||
import { useInternalOperations, useTxData } from "./useErigonHooks";
|
||||
|
||||
type TransactionParams = {
|
||||
txhash: string;
|
||||
|
@ -24,89 +18,7 @@ const Transaction: React.FC = () => {
|
|||
const params = useParams<TransactionParams>();
|
||||
const { txhash } = params;
|
||||
|
||||
const [txData, setTxData] = useState<TransactionData>();
|
||||
useEffect(() => {
|
||||
if (!provider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const readBlock = async () => {
|
||||
const [_response, _receipt] = await Promise.all([
|
||||
provider.getTransaction(txhash),
|
||||
provider.getTransactionReceipt(txhash),
|
||||
]);
|
||||
const _block = await provider.getBlock(_receipt.blockNumber);
|
||||
document.title = `Transaction ${_response.hash} | Otterscan`;
|
||||
|
||||
// Extract token transfers
|
||||
const tokenTransfers: TokenTransfer[] = [];
|
||||
for (const l of _receipt.logs) {
|
||||
if (l.topics.length !== 3) {
|
||||
continue;
|
||||
}
|
||||
if (l.topics[0] !== TRANSFER_TOPIC) {
|
||||
continue;
|
||||
}
|
||||
tokenTransfers.push({
|
||||
token: l.address,
|
||||
from: ethers.utils.getAddress(
|
||||
ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[1]), 12)
|
||||
),
|
||||
to: ethers.utils.getAddress(
|
||||
ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[2]), 12)
|
||||
),
|
||||
value: BigNumber.from(l.data),
|
||||
});
|
||||
}
|
||||
|
||||
// Extract token meta
|
||||
const tokenMetas: TokenMetas = {};
|
||||
for (const t of tokenTransfers) {
|
||||
if (tokenMetas[t.token]) {
|
||||
continue;
|
||||
}
|
||||
const erc20Contract = new ethers.Contract(t.token, erc20, provider);
|
||||
const [name, symbol, decimals] = await Promise.all([
|
||||
erc20Contract.name(),
|
||||
erc20Contract.symbol(),
|
||||
erc20Contract.decimals(),
|
||||
]);
|
||||
tokenMetas[t.token] = {
|
||||
name,
|
||||
symbol,
|
||||
decimals,
|
||||
};
|
||||
}
|
||||
|
||||
setTxData({
|
||||
transactionHash: _receipt.transactionHash,
|
||||
status: _receipt.status === 1,
|
||||
blockNumber: _receipt.blockNumber,
|
||||
transactionIndex: _receipt.transactionIndex,
|
||||
confirmations: _receipt.confirmations,
|
||||
timestamp: _block.timestamp,
|
||||
miner: _block.miner,
|
||||
from: _receipt.from,
|
||||
to: _receipt.to,
|
||||
createdContractAddress: _receipt.contractAddress,
|
||||
value: _response.value,
|
||||
tokenTransfers,
|
||||
tokenMetas,
|
||||
type: _response.type ?? 0,
|
||||
fee: _response.gasPrice!.mul(_receipt.gasUsed),
|
||||
blockBaseFeePerGas: _block.baseFeePerGas,
|
||||
maxFeePerGas: _response.maxFeePerGas,
|
||||
maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
|
||||
gasPrice: _response.gasPrice!,
|
||||
gasUsed: _receipt.gasUsed,
|
||||
gasLimit: _response.gasLimit,
|
||||
nonce: _response.nonce,
|
||||
data: _response.data,
|
||||
logs: _receipt.logs,
|
||||
});
|
||||
};
|
||||
readBlock();
|
||||
}, [provider, txhash]);
|
||||
const txData = useTxData(provider, txhash);
|
||||
|
||||
const internalOps = useInternalOperations(provider, txData);
|
||||
const sendsEthToMiner = useMemo(() => {
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faArrowUp } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
type NonceProps = {
|
||||
value: number;
|
||||
};
|
||||
|
||||
const Nonce: React.FC<NonceProps> = ({ value }) => (
|
||||
<span
|
||||
className="flex items-baseline space-x-2 rounded-lg px-2 py-1 bg-green-50 text-xs"
|
||||
title="Nonce"
|
||||
>
|
||||
<span className="text-green-400">
|
||||
<FontAwesomeIcon icon={faArrowUp} size="1x" />
|
||||
</span>
|
||||
<span className="text-green-600">{value}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
export default React.memo(Nonce);
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
|
||||
type PercentagePositionProps = {
|
||||
perc: number;
|
||||
};
|
||||
|
||||
const PercentagePosition: React.FC<PercentagePositionProps> = ({ perc }) => (
|
||||
<div className="self-center w-40">
|
||||
<div className="w-full h-5 relative rounded border border-orange-200">
|
||||
<div className="absolute w-full h-1/2 border-b"></div>
|
||||
<div className="absolute top-1/4 w-full h-1/2 border-l-2 border-r-2 border-gray-300"></div>
|
||||
<div className="absolute top-1/4 w-1/2 h-1/2 border-r-2 border-gray-300"></div>
|
||||
<div className="absolute top-1/4 w-1/4 h-1/2 border-r-2 border-gray-300"></div>
|
||||
<div className="absolute top-1/4 w-3/4 h-1/2 border-r-2 border-gray-300"></div>
|
||||
<div
|
||||
className="absolute h-full border-r-4 border-black"
|
||||
style={{ width: `${perc * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default React.memo(PercentagePosition);
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
|
||||
type RelativePositionProps = {
|
||||
pos: React.ReactNode;
|
||||
total: React.ReactNode;
|
||||
};
|
||||
|
||||
const RelativePosition: React.FC<RelativePositionProps> = ({ pos, total }) => (
|
||||
<span className="text-xs">
|
||||
{pos}
|
||||
<span className="text-gray-600 text-sm"> / {total}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
export default React.memo(RelativePosition);
|
|
@ -3,6 +3,7 @@ import { ethers } from "ethers";
|
|||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faCheckCircle,
|
||||
faCube,
|
||||
faTimesCircle,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
|
@ -12,6 +13,7 @@ import BlockConfirmations from "../components/BlockConfirmations";
|
|||
import AddressHighlighter from "../components/AddressHighlighter";
|
||||
import DecoratedAddressLink from "../components/DecoratedAddressLink";
|
||||
import Copy from "../components/Copy";
|
||||
import Nonce from "../components/Nonce";
|
||||
import Timestamp from "../components/Timestamp";
|
||||
import InternalTransactionOperation from "../components/InternalTransactionOperation";
|
||||
import MethodName from "../components/MethodName";
|
||||
|
@ -23,6 +25,8 @@ import TokenTransferItem from "../TokenTransferItem";
|
|||
import { TransactionData, InternalOperation } from "../types";
|
||||
import PercentageBar from "../components/PercentageBar";
|
||||
import ExternalLink from "../components/ExternalLink";
|
||||
import RelativePosition from "../components/RelativePosition";
|
||||
import PercentagePosition from "../components/PercentagePosition";
|
||||
|
||||
type DetailsProps = {
|
||||
txData: TransactionData;
|
||||
|
@ -60,25 +64,46 @@ const Details: React.FC<DetailsProps> = ({
|
|||
</span>
|
||||
)}
|
||||
</InfoRow>
|
||||
<InfoRow title="Block">
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<BlockLink blockTag={txData.blockNumber} />
|
||||
<BlockConfirmations confirmations={txData.confirmations} />
|
||||
<InfoRow title="Block / Position">
|
||||
<div className="flex items-baseline divide-x-2 divide-dotted divide-gray-300">
|
||||
<div className="flex space-x-1 items-baseline mr-3">
|
||||
<span className="text-orange-500">
|
||||
<FontAwesomeIcon icon={faCube} />
|
||||
</span>
|
||||
<BlockLink blockTag={txData.blockNumber} />
|
||||
<BlockConfirmations confirmations={txData.confirmations} />
|
||||
</div>
|
||||
<div className="flex space-x-2 items-baseline pl-3">
|
||||
<RelativePosition
|
||||
pos={txData.transactionIndex}
|
||||
total={txData.blockTransactionCount - 1}
|
||||
/>
|
||||
<PercentagePosition
|
||||
perc={
|
||||
txData.transactionIndex / (txData.blockTransactionCount - 1)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</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}>
|
||||
<DecoratedAddressLink
|
||||
address={txData.from}
|
||||
miner={txData.from === txData.miner}
|
||||
txFrom
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
<Copy value={txData.from} />
|
||||
<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">
|
||||
<AddressHighlighter address={txData.from}>
|
||||
<DecoratedAddressLink
|
||||
address={txData.from}
|
||||
miner={txData.from === txData.miner}
|
||||
txFrom
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
<Copy value={txData.from} />
|
||||
</div>
|
||||
<div className="flex items-baseline pl-3">
|
||||
<Nonce value={txData.nonce} />
|
||||
</div>
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
|
||||
|
@ -189,11 +214,13 @@ const Details: React.FC<DetailsProps> = ({
|
|||
)}
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Gas Used/Limit">
|
||||
<InfoRow title="Gas Used / Limit">
|
||||
<div className="flex space-x-3 items-baseline">
|
||||
<div>
|
||||
<GasValue value={txData.gasUsed} /> /{" "}
|
||||
<GasValue value={txData.gasLimit} />
|
||||
<RelativePosition
|
||||
pos={<GasValue value={txData.gasUsed} />}
|
||||
total={<GasValue value={txData.gasLimit} />}
|
||||
/>
|
||||
</div>
|
||||
<PercentageBar
|
||||
perc={
|
||||
|
@ -226,12 +253,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Ether Price">N/A</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"
|
||||
|
|
|
@ -40,6 +40,7 @@ export type TransactionData = {
|
|||
status: boolean;
|
||||
blockNumber: number;
|
||||
transactionIndex: number;
|
||||
blockTransactionCount: number;
|
||||
confirmations: number;
|
||||
timestamp: number;
|
||||
miner?: string;
|
||||
|
|
|
@ -1,7 +1,16 @@
|
|||
import { ethers, BigNumber } from "ethers";
|
||||
import { useState, useEffect } from "react";
|
||||
import { ethers, BigNumber } from "ethers";
|
||||
import { getInternalOperations } from "./nodeFunctions";
|
||||
import { TransactionData, InternalOperation } from "./types";
|
||||
import {
|
||||
TokenMetas,
|
||||
TokenTransfer,
|
||||
TransactionData,
|
||||
InternalOperation,
|
||||
} from "./types";
|
||||
import erc20 from "./erc20.json";
|
||||
|
||||
const TRANSFER_TOPIC =
|
||||
"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
|
||||
|
||||
export interface ExtendedBlock extends ethers.providers.Block {
|
||||
blockReward: BigNumber;
|
||||
|
@ -76,6 +85,99 @@ export const useBlockData = (
|
|||
return block;
|
||||
};
|
||||
|
||||
export const useTxData = (
|
||||
provider: ethers.providers.JsonRpcProvider | undefined,
|
||||
txhash: string
|
||||
): TransactionData | undefined => {
|
||||
const [txData, setTxData] = useState<TransactionData>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!provider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const readBlock = async () => {
|
||||
const [_response, _receipt] = await Promise.all([
|
||||
provider.getTransaction(txhash),
|
||||
provider.getTransactionReceipt(txhash),
|
||||
]);
|
||||
const _block = await provider.getBlock(_receipt.blockNumber);
|
||||
document.title = `Transaction ${_response.hash} | Otterscan`;
|
||||
|
||||
// Extract token transfers
|
||||
const tokenTransfers: TokenTransfer[] = [];
|
||||
for (const l of _receipt.logs) {
|
||||
if (l.topics.length !== 3) {
|
||||
continue;
|
||||
}
|
||||
if (l.topics[0] !== TRANSFER_TOPIC) {
|
||||
continue;
|
||||
}
|
||||
tokenTransfers.push({
|
||||
token: l.address,
|
||||
from: ethers.utils.getAddress(
|
||||
ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[1]), 12)
|
||||
),
|
||||
to: ethers.utils.getAddress(
|
||||
ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[2]), 12)
|
||||
),
|
||||
value: BigNumber.from(l.data),
|
||||
});
|
||||
}
|
||||
|
||||
// Extract token meta
|
||||
const tokenMetas: TokenMetas = {};
|
||||
for (const t of tokenTransfers) {
|
||||
if (tokenMetas[t.token]) {
|
||||
continue;
|
||||
}
|
||||
const erc20Contract = new ethers.Contract(t.token, erc20, provider);
|
||||
const [name, symbol, decimals] = await Promise.all([
|
||||
erc20Contract.name(),
|
||||
erc20Contract.symbol(),
|
||||
erc20Contract.decimals(),
|
||||
]);
|
||||
tokenMetas[t.token] = {
|
||||
name,
|
||||
symbol,
|
||||
decimals,
|
||||
};
|
||||
}
|
||||
|
||||
setTxData({
|
||||
transactionHash: _receipt.transactionHash,
|
||||
status: _receipt.status === 1,
|
||||
blockNumber: _receipt.blockNumber,
|
||||
transactionIndex: _receipt.transactionIndex,
|
||||
blockTransactionCount: _block.transactions.length,
|
||||
confirmations: _receipt.confirmations,
|
||||
timestamp: _block.timestamp,
|
||||
miner: _block.miner,
|
||||
from: _receipt.from,
|
||||
to: _receipt.to,
|
||||
createdContractAddress: _receipt.contractAddress,
|
||||
value: _response.value,
|
||||
tokenTransfers,
|
||||
tokenMetas,
|
||||
type: _response.type ?? 0,
|
||||
fee: _response.gasPrice!.mul(_receipt.gasUsed),
|
||||
blockBaseFeePerGas: _block.baseFeePerGas,
|
||||
maxFeePerGas: _response.maxFeePerGas,
|
||||
maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
|
||||
gasPrice: _response.gasPrice!,
|
||||
gasUsed: _receipt.gasUsed,
|
||||
gasLimit: _response.gasLimit,
|
||||
nonce: _response.nonce,
|
||||
data: _response.data,
|
||||
logs: _receipt.logs,
|
||||
});
|
||||
};
|
||||
readBlock();
|
||||
}, [provider, txhash]);
|
||||
|
||||
return txData;
|
||||
};
|
||||
|
||||
export const useInternalOperations = (
|
||||
provider: ethers.providers.JsonRpcProvider | undefined,
|
||||
txData: TransactionData | undefined
|
||||
|
|
Loading…
Reference in New Issue