Merge branch 'feature/flash-transactions' into develop
This commit is contained in:
commit
646d345215
|
@ -49,27 +49,51 @@ const BlockTransactions: React.FC = () => {
|
|||
]);
|
||||
document.title = `Block #${_block.number} Transactions | Otterscan`;
|
||||
|
||||
setTxs(
|
||||
_block.transactions
|
||||
.map((t, i) => {
|
||||
return {
|
||||
blockNumber: blockNumber.toNumber(),
|
||||
timestamp: _block.timestamp,
|
||||
idx: i,
|
||||
hash: t.hash,
|
||||
from: t.from,
|
||||
to: t.to,
|
||||
value: t.value,
|
||||
fee: provider.formatter
|
||||
.bigNumber(_receipts[i].gasUsed)
|
||||
.mul(t.gasPrice!),
|
||||
gasPrice: t.gasPrice!,
|
||||
data: t.data,
|
||||
status: provider.formatter.number(_receipts[i].status),
|
||||
};
|
||||
})
|
||||
.reverse()
|
||||
const responses = _block.transactions
|
||||
.map((t, i): ProcessedTransaction => {
|
||||
return {
|
||||
blockNumber: blockNumber.toNumber(),
|
||||
timestamp: _block.timestamp,
|
||||
miner: _block.miner,
|
||||
idx: i,
|
||||
hash: t.hash,
|
||||
from: t.from,
|
||||
to: t.to,
|
||||
value: t.value,
|
||||
fee: provider.formatter
|
||||
.bigNumber(_receipts[i].gasUsed)
|
||||
.mul(t.gasPrice!),
|
||||
gasPrice: t.gasPrice!,
|
||||
data: t.data,
|
||||
status: provider.formatter.number(_receipts[i].status),
|
||||
};
|
||||
})
|
||||
.reverse();
|
||||
|
||||
const internalChecks = await Promise.all(
|
||||
responses.map(async (res) => {
|
||||
const r = await provider.send("ots_getTransactionTransfers", [
|
||||
res.hash,
|
||||
]);
|
||||
for (const t of r) {
|
||||
if (
|
||||
res.miner &&
|
||||
(res.miner === ethers.utils.getAddress(t.from) ||
|
||||
res.miner === ethers.utils.getAddress(t.to))
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
})
|
||||
);
|
||||
for (let i = 0; i < responses.length; i++) {
|
||||
if (internalChecks[i]) {
|
||||
responses[i].internalMinerInteraction = true;
|
||||
}
|
||||
}
|
||||
|
||||
setTxs(responses);
|
||||
};
|
||||
readBlock();
|
||||
}, [blockNumber]);
|
||||
|
|
|
@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
import {
|
||||
faCheckCircle,
|
||||
faTimesCircle,
|
||||
faAngleRight,
|
||||
faCaretRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { provider } from "./ethersconfig";
|
||||
|
@ -17,10 +16,18 @@ import BlockLink from "./components/BlockLink";
|
|||
import AddressLink from "./components/AddressLink";
|
||||
import Copy from "./components/Copy";
|
||||
import Timestamp from "./components/Timestamp";
|
||||
import InternalTransfer from "./components/InternalTransfer";
|
||||
import TokenLogo from "./components/TokenLogo";
|
||||
import GasValue from "./components/GasValue";
|
||||
import FormattedBalance from "./components/FormattedBalance";
|
||||
import erc20 from "./erc20.json";
|
||||
import {
|
||||
From,
|
||||
TokenMetas,
|
||||
TokenTransfer,
|
||||
TransactionData,
|
||||
Transfer,
|
||||
} from "./types";
|
||||
|
||||
const USE_OTS = true;
|
||||
|
||||
|
@ -31,56 +38,6 @@ type TransactionParams = {
|
|||
txhash: string;
|
||||
};
|
||||
|
||||
type TransactionData = {
|
||||
transactionHash: string;
|
||||
status: boolean;
|
||||
blockNumber: number;
|
||||
transactionIndex: number;
|
||||
confirmations: number;
|
||||
timestamp: number;
|
||||
from: string;
|
||||
to: string;
|
||||
value: BigNumber;
|
||||
tokenTransfers: TokenTransfer[];
|
||||
tokenMetas: TokenMetas;
|
||||
fee: BigNumber;
|
||||
gasPrice: BigNumber;
|
||||
gasLimit: BigNumber;
|
||||
gasUsed: BigNumber;
|
||||
gasUsedPerc: number;
|
||||
nonce: number;
|
||||
data: string;
|
||||
logs: ethers.providers.Log[];
|
||||
};
|
||||
|
||||
type From = {
|
||||
current: string;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
type Transfer = {
|
||||
from: string;
|
||||
to: string;
|
||||
value: BigNumber;
|
||||
};
|
||||
|
||||
type TokenTransfer = {
|
||||
token: string;
|
||||
from: string;
|
||||
to: string;
|
||||
value: BigNumber;
|
||||
};
|
||||
|
||||
type TokenMeta = {
|
||||
name: string;
|
||||
symbol: string;
|
||||
decimals: number;
|
||||
};
|
||||
|
||||
type TokenMetas = {
|
||||
[tokenAddress: string]: TokenMeta;
|
||||
};
|
||||
|
||||
const Transaction: React.FC = () => {
|
||||
const params = useParams<TransactionParams>();
|
||||
const { txhash } = params;
|
||||
|
@ -142,6 +99,7 @@ const Transaction: React.FC = () => {
|
|||
transactionIndex: _receipt.transactionIndex,
|
||||
confirmations: _receipt.confirmations,
|
||||
timestamp: _block.timestamp,
|
||||
miner: _block.miner,
|
||||
from: _receipt.from,
|
||||
to: _receipt.to,
|
||||
value: _response.value,
|
||||
|
@ -289,17 +247,11 @@ const Transaction: React.FC = () => {
|
|||
{transfers ? (
|
||||
<div className="mt-2 space-y-1">
|
||||
{transfers.map((t, i) => (
|
||||
<div key={i} className="flex space-x-1 text-xs">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faAngleRight} size="1x" />{" "}
|
||||
TRANSFER
|
||||
</span>
|
||||
<span>{ethers.utils.formatEther(t.value)} Ether</span>
|
||||
<span className="text-gray-500">From</span>
|
||||
<AddressLink address={t.from} />
|
||||
<span className="text-gray-500">To</span>
|
||||
<AddressLink address={t.to} />
|
||||
</div>
|
||||
<InternalTransfer
|
||||
key={i}
|
||||
txData={txData}
|
||||
transfer={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
@ -0,0 +1,57 @@
|
|||
import React from "react";
|
||||
import { ethers } from "ethers";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
|
||||
import AddressLink from "./AddressLink";
|
||||
import { TransactionData, Transfer } from "../types";
|
||||
|
||||
type InternalTransferProps = {
|
||||
txData: TransactionData;
|
||||
transfer: Transfer;
|
||||
};
|
||||
|
||||
const InternalTransfer: React.FC<InternalTransferProps> = ({
|
||||
txData,
|
||||
transfer,
|
||||
}) => {
|
||||
const fromMiner =
|
||||
txData.miner !== undefined && transfer.from === txData.miner;
|
||||
const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
|
||||
|
||||
return (
|
||||
<div className="flex items-baseline space-x-1 text-xs">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
|
||||
</span>
|
||||
<span>{ethers.utils.formatEther(transfer.value)} Ether</span>
|
||||
<span className="text-gray-500">From</span>
|
||||
<div
|
||||
className={`flex items-baseline space-x-1 ${
|
||||
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
|
||||
}`}
|
||||
>
|
||||
{fromMiner && (
|
||||
<span className="text-yellow-400" title="Miner address">
|
||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
</span>
|
||||
)}
|
||||
<AddressLink address={transfer.from} />
|
||||
</div>
|
||||
<span className="text-gray-500">To</span>
|
||||
<div
|
||||
className={`flex items-baseline space-x-1 px-2 py-1 ${
|
||||
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
|
||||
}`}
|
||||
>
|
||||
{toMiner && (
|
||||
<span className="text-yellow-400" title="Miner address">
|
||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
</span>
|
||||
)}
|
||||
<AddressLink address={transfer.to} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(InternalTransfer);
|
|
@ -1,6 +1,9 @@
|
|||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faCoins,
|
||||
faLongArrowAltRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export enum Direction {
|
||||
IN,
|
||||
|
@ -9,12 +12,18 @@ export enum Direction {
|
|||
INTERNAL,
|
||||
}
|
||||
|
||||
export enum Flags {
|
||||
MINER,
|
||||
}
|
||||
|
||||
type TransactionDirectionProps = {
|
||||
direction?: Direction;
|
||||
flags?: Flags;
|
||||
};
|
||||
|
||||
const TransactionDirection: React.FC<TransactionDirectionProps> = ({
|
||||
direction,
|
||||
flags,
|
||||
}) => {
|
||||
let bgColor = "bg-green-50";
|
||||
let fgColor = "text-green-500";
|
||||
|
@ -32,6 +41,12 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
|
|||
msg = "SELF";
|
||||
} else if (direction === Direction.INTERNAL) {
|
||||
msg = "INT";
|
||||
bgColor = "bg-green-100"
|
||||
}
|
||||
|
||||
if (flags === Flags.MINER) {
|
||||
bgColor = "bg-yellow-50";
|
||||
fgColor = "text-yellow-400";
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -42,10 +57,14 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
|
|||
: "w-5 h-5 rounded-full flex justify-center items-center"
|
||||
} text-xs font-bold`}
|
||||
>
|
||||
{msg ?? (
|
||||
<span>
|
||||
<FontAwesomeIcon icon={faLongArrowAltRight} />
|
||||
</span>
|
||||
{flags === Flags.MINER ? (
|
||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
) : (
|
||||
msg ?? (
|
||||
<span>
|
||||
<FontAwesomeIcon icon={faLongArrowAltRight} />
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faExclamationCircle,
|
||||
faCoins,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import MethodName from "../components/MethodName";
|
||||
import BlockLink from "../components/BlockLink";
|
||||
import TransactionLink from "../components/TransactionLink";
|
||||
|
@ -8,6 +11,7 @@ import AddressOrENSName from "../components/AddressOrENSName";
|
|||
import TimestampAge from "../components/TimestampAge";
|
||||
import TransactionDirection, {
|
||||
Direction,
|
||||
Flags,
|
||||
} from "../components/TransactionDirection";
|
||||
import TransactionValue from "../components/TransactionValue";
|
||||
import { ENSReverseCache, ProcessedTransaction } from "../types";
|
||||
|
@ -42,9 +46,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
|
||||
const ensFrom = ensCache && tx.from && ensCache[tx.from];
|
||||
const ensTo = ensCache && tx.to && ensCache[tx.to];
|
||||
const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 hover:bg-gray-100 px-2 py-3">
|
||||
<div
|
||||
className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 hover:bg-gray-100 ${
|
||||
flash ? "bg-yellow-100" : ""
|
||||
} px-2 py-3`}
|
||||
>
|
||||
<div className="col-span-2 flex space-x-1 items-baseline">
|
||||
{tx.status === 0 && (
|
||||
<span className="text-red-600" title="Transaction reverted">
|
||||
|
@ -63,15 +72,25 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
<span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
|
||||
<span className="truncate" title={tx.from}>
|
||||
{tx.from && (
|
||||
<AddressOrENSName
|
||||
address={tx.from}
|
||||
ensName={ensFrom}
|
||||
selectedAddress={selectedAddress}
|
||||
/>
|
||||
<div className="flex items-baseline space-x-1">
|
||||
{tx.miner && tx.miner === tx.from && (
|
||||
<span className="text-yellow-400" title="Miner address">
|
||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
</span>
|
||||
)}
|
||||
<AddressOrENSName
|
||||
address={tx.from}
|
||||
ensName={ensFrom}
|
||||
selectedAddress={selectedAddress}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
<TransactionDirection direction={direction} />
|
||||
<TransactionDirection
|
||||
direction={direction}
|
||||
flags={tx.internalMinerInteraction ? Flags.MINER : undefined}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span className="col-span-2 truncate" title={tx.to}>
|
||||
|
|
55
src/types.ts
55
src/types.ts
|
@ -1,12 +1,14 @@
|
|||
import { BigNumber } from "ethers";
|
||||
import { ethers, BigNumber } from "ethers";
|
||||
|
||||
export type ProcessedTransaction = {
|
||||
blockNumber: number;
|
||||
timestamp: number;
|
||||
miner?: string;
|
||||
idx: number;
|
||||
hash: string;
|
||||
from?: string;
|
||||
to?: string;
|
||||
internalMinerInteraction?: boolean;
|
||||
value: BigNumber;
|
||||
fee: BigNumber;
|
||||
gasPrice: BigNumber;
|
||||
|
@ -23,3 +25,54 @@ export type TransactionChunk = {
|
|||
export type ENSReverseCache = {
|
||||
[address: string]: string;
|
||||
};
|
||||
|
||||
export type TransactionData = {
|
||||
transactionHash: string;
|
||||
status: boolean;
|
||||
blockNumber: number;
|
||||
transactionIndex: number;
|
||||
confirmations: number;
|
||||
timestamp: number;
|
||||
miner?: string;
|
||||
from: string;
|
||||
to: string;
|
||||
value: BigNumber;
|
||||
tokenTransfers: TokenTransfer[];
|
||||
tokenMetas: TokenMetas;
|
||||
fee: BigNumber;
|
||||
gasPrice: BigNumber;
|
||||
gasLimit: BigNumber;
|
||||
gasUsed: BigNumber;
|
||||
gasUsedPerc: number;
|
||||
nonce: number;
|
||||
data: string;
|
||||
logs: ethers.providers.Log[];
|
||||
};
|
||||
|
||||
export type From = {
|
||||
current: string;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
export type Transfer = {
|
||||
from: string;
|
||||
to: string;
|
||||
value: BigNumber;
|
||||
};
|
||||
|
||||
export type TokenTransfer = {
|
||||
token: string;
|
||||
from: string;
|
||||
to: string;
|
||||
value: BigNumber;
|
||||
};
|
||||
|
||||
export type TokenMeta = {
|
||||
name: string;
|
||||
symbol: string;
|
||||
decimals: number;
|
||||
};
|
||||
|
||||
export type TokenMetas = {
|
||||
[tokenAddress: string]: TokenMeta;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue