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

Merge branch 'feature/flash-tx-ui-tweaks' into develop

This commit is contained in:
Willian Mitsuda 2021-07-05 21:15:02 -03:00
parent 646d345215 b6c176fb0e
commit e80953edfc
6 changed files with 148 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Block.tsx
View File

@ -14,7 +14,7 @@ import NavButton from "./components/NavButton";
import Timestamp from "./components/Timestamp";
import GasValue from "./components/GasValue";
import BlockLink from "./components/BlockLink";
import AddressLink from "./components/AddressLink";
import AddressOrENSName from "./components/AddressOrENSName";
import TransactionValue from "./components/TransactionValue";
import HexValue from "./components/HexValue";
import { useLatestBlockNumber } from "./useLatestBlock";
@ -154,9 +154,10 @@ const Block: React.FC = () => {
in this block
</InfoRow>
<InfoRow title="Mined by">
<div className="flex">
<AddressLink address={block.miner} />
</div>
<AddressOrENSName
address={block.miner}
minerAddress={block.miner}
/>
</InfoRow>
<InfoRow title="Block Reward">
<TransactionValue value={block.blockReward.add(block.feeReward)} />

12
src/BlockTransactions.tsx
View File

@ -69,6 +69,7 @@ const BlockTransactions: React.FC = () => {
};
})
.reverse();
setTxs(responses);
const internalChecks = await Promise.all(
responses.map(async (res) => {
@ -87,13 +88,10 @@ const BlockTransactions: React.FC = () => {
return false;
})
);
for (let i = 0; i < responses.length; i++) {
if (internalChecks[i]) {
responses[i].internalMinerInteraction = true;
}
}
setTxs(responses);
const processedResponses = responses.map((r, i): ProcessedTransaction => {
return { ...r, internalMinerInteraction: internalChecks[i] };
});
setTxs(processedResponses);
};
readBlock();
}, [blockNumber]);

52
src/TokenTransferItem.tsx Normal file
View File

@ -0,0 +1,52 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
import AddressLink from "./components/AddressLink";
import AddressOrENSName from "./components/AddressOrENSName";
import TokenLogo from "./components/TokenLogo";
import FormattedBalance from "./components/FormattedBalance";
import { TokenMetas, TokenTransfer } from "./types";
type TokenTransferItemProps = {
t: TokenTransfer;
tokenMetas: TokenMetas;
};
const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
t,
tokenMetas,
}) => (
<div className="flex items-baseline space-x-2 truncate">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<span className="font-bold">From</span>
<AddressOrENSName address={t.from} />
<span className="font-bold">To</span>
<AddressOrENSName address={t.to} />
<span className="font-bold">For</span>
<span>
<FormattedBalance
value={t.value}
decimals={tokenMetas[t.token].decimals}
/>
</span>
<span className="flex space-x-1 items-baseline truncate">
{tokenMetas[t.token] ? (
<>
<div className="self-center">
<TokenLogo address={t.token} name={tokenMetas[t.token].name} />
</div>
<AddressLink
address={t.token}
text={`${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`}
/>
</>
) : (
<AddressOrENSName address={t.token} />
)}
</span>
</div>
);
export default React.memo(TokenTransferItem);

143
src/Transaction.tsx
View File

@ -1,11 +1,10 @@
import React, { useState, useEffect, useCallback } from "react";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Route, Switch, useParams } from "react-router-dom";
import { BigNumber, ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCheckCircle,
faTimesCircle,
faCaretRight,
} from "@fortawesome/free-solid-svg-icons";
import { provider } from "./ethersconfig";
import StandardFrame from "./StandardFrame";
@ -13,23 +12,16 @@ import StandardSubtitle from "./StandardSubtitle";
import Tab from "./components/Tab";
import ContentFrame from "./ContentFrame";
import BlockLink from "./components/BlockLink";
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 TokenLogo from "./components/TokenLogo";
import GasValue from "./components/GasValue";
import FormattedBalance from "./components/FormattedBalance";
import TokenTransferItem from "./TokenTransferItem";
import erc20 from "./erc20.json";
import {
From,
TokenMetas,
TokenTransfer,
TransactionData,
Transfer,
} from "./types";
const USE_OTS = true;
import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
const TRANSFER_TOPIC =
"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@ -120,49 +112,18 @@ const Transaction: React.FC = () => {
}, [txhash]);
const [transfers, setTransfers] = useState<Transfer[]>();
const traceTransfersUsingDebugTrace = async () => {
const r = await provider.send("debug_traceTransaction", [
txData?.transactionHash,
{ disableStorage: true, disableMemory: true },
]);
const fromStack: From[] = [
{
current: txData!.to,
depth: 0,
},
];
const _transfers: Transfer[] = [];
for (const l of r.structLogs) {
if (l.op !== "CALL") {
if (parseInt(l.depth) === fromStack[fromStack.length - 1].depth) {
fromStack.pop();
}
continue;
const sendsEthToMiner = useMemo(() => {
if (!txData || !transfers) {
return false;
}
const { stack } = l;
const addr = stack[stack.length - 2].slice(24);
const value = BigNumber.from("0x" + stack[stack.length - 3]);
if (!value.isZero()) {
const t: Transfer = {
from: ethers.utils.getAddress(
fromStack[fromStack.length - 1].current
),
to: ethers.utils.getAddress(addr),
value,
};
_transfers.push(t);
for (const t of transfers) {
if (t.to === txData.miner) {
return true;
}
fromStack.push({
current: addr,
depth: parseInt(l.depth),
});
}
setTransfers(_transfers);
};
return false;
}, [txData, transfers]);
const traceTransfersUsingOtsTrace = useCallback(async () => {
if (!txData) {
@ -184,9 +145,7 @@ const Transaction: React.FC = () => {
setTransfers(_transfers);
}, [txData]);
useEffect(() => {
if (USE_OTS) {
traceTransfersUsingOtsTrace();
}
}, [traceTransfersUsingOtsTrace]);
return (
@ -235,16 +194,22 @@ const Transaction: React.FC = () => {
</InfoRow>
<InfoRow title="From">
<div className="flex items-baseline space-x-2">
<AddressLink address={txData.from} />
<AddressOrENSName
address={txData.from}
minerAddress={txData.miner}
/>
<Copy value={txData.from} />
</div>
</InfoRow>
<InfoRow title="Interacted With (To)">
<div className="flex items-baseline space-x-2">
<AddressLink address={txData.to} />
<AddressOrENSName
address={txData.to}
minerAddress={txData.miner}
/>
<Copy value={txData.to} />
</div>
{transfers ? (
{transfers && (
<div className="mt-2 space-y-1">
{transfers.map((t, i) => (
<InternalTransfer
@ -254,15 +219,6 @@ const Transaction: React.FC = () => {
/>
))}
</div>
) : (
!USE_OTS && (
<button
className="rounded focus:outline-none bg-gray-100 mt-2 px-3 py-2"
onClick={traceTransfersUsingDebugTrace}
>
Trace transfers
</button>
)
)}
</InfoRow>
<InfoRow title="Transaction Action"></InfoRow>
@ -271,47 +227,12 @@ const Transaction: React.FC = () => {
title={`Tokens Transferred (${txData.tokenTransfers.length})`}
>
<div className="space-y-2">
{txData.tokenTransfers &&
txData.tokenTransfers.map((t, i) => (
<div
className="flex items-baseline space-x-2 truncate"
{txData.tokenTransfers.map((t, i) => (
<TokenTransferItem
key={i}
>
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<span className="font-bold">From</span>
<AddressLink address={t.from} />
<span className="font-bold">To</span>
<AddressLink address={t.to} />
<span className="font-bold">For</span>
<span>
<FormattedBalance
value={t.value}
decimals={txData.tokenMetas[t.token].decimals}
t={t}
tokenMetas={txData.tokenMetas}
/>
</span>
<span className="flex space-x-1 items-baseline truncate">
{txData.tokenMetas[t.token] ? (
<>
<div className="self-center">
<TokenLogo
address={t.token}
name={txData.tokenMetas[t.token].name}
/>
</div>
<AddressLink
address={t.token}
text={`${
txData.tokenMetas[t.token].name
} (${txData.tokenMetas[t.token].symbol})`}
/>
</>
) : (
<AddressLink address={t.token} />
)}
</span>
</div>
))}
</div>
</InfoRow>
@ -325,9 +246,21 @@ const Transaction: React.FC = () => {
<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} />{" "}
<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">

19
src/components/AddressOrENSName.tsx
View File

@ -1,4 +1,6 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoins } from "@fortawesome/free-solid-svg-icons";
import Address from "./Address";
import AddressLink from "./AddressLink";
import ENSName from "./ENSName";
@ -8,14 +10,22 @@ type AddressOrENSNameProps = {
address: string;
ensName?: string;
selectedAddress?: string;
minerAddress?: string;
};
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
address,
ensName,
selectedAddress,
}) => {
return address === selectedAddress ? (
minerAddress,
}) => (
<div className="flex items-baseline space-x-1 truncate">
{minerAddress !== undefined && minerAddress === address && (
<span className="text-yellow-400" title="Miner address">
<FontAwesomeIcon icon={faCoins} size="1x" />
</span>
)}
{address === selectedAddress ? (
<>
{ensName ? (
<ENSName name={ensName} address={address} />
@ -31,7 +41,8 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
<AddressLink address={address} />
)}
</>
);
};
)}
</div>
);
export default React.memo(AddressOrENSName);

18
src/search/TransactionItem.tsx
View File

@ -1,9 +1,6 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faExclamationCircle,
faCoins,
} from "@fortawesome/free-solid-svg-icons";
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
import MethodName from "../components/MethodName";
import BlockLink from "../components/BlockLink";
import TransactionLink from "../components/TransactionLink";
@ -50,8 +47,8 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
return (
<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" : ""
className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
flash ? "bg-yellow-100 hover:bg-yellow-200" : "hover:bg-gray-100"
} px-2 py-3`}
>
<div className="col-span-2 flex space-x-1 items-baseline">
@ -72,18 +69,12 @@ 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 && (
<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}
minerAddress={tx.miner}
/>
</div>
)}
</span>
<span>
@ -99,6 +90,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
address={tx.to}
ensName={ensTo}
selectedAddress={selectedAddress}
minerAddress={tx.miner}
/>
)}
</span>