Merge branch 'feature/tx-data-improvements' into develop

This commit is contained in:
Willian Mitsuda 2021-08-01 19:18:32 -03:00
commit ad29cbdc5d
7 changed files with 211 additions and 116 deletions

View File

@ -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(() => {

21
src/components/Nonce.tsx Normal file
View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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"

View File

@ -40,6 +40,7 @@ export type TransactionData = {
status: boolean;
blockNumber: number;
transactionIndex: number;
blockTransactionCount: number;
confirmations: number;
timestamp: number;
miner?: string;

View File

@ -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