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

Collapse nonce field into from

This commit is contained in:
Willian Mitsuda 2021-08-01 19:01:58 -03:00
parent 62b22496cb
commit 669e4a9c5c
2 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

27
src/transaction/Details.tsx
View File

@ -13,6 +13,7 @@ import BlockConfirmations from "../components/BlockConfirmations";
import AddressHighlighter from "../components/AddressHighlighter"; import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink"; import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy"; import Copy from "../components/Copy";
import Nonce from "../components/Nonce";
import Timestamp from "../components/Timestamp"; import Timestamp from "../components/Timestamp";
import InternalTransactionOperation from "../components/InternalTransactionOperation"; import InternalTransactionOperation from "../components/InternalTransactionOperation";
import MethodName from "../components/MethodName"; import MethodName from "../components/MethodName";
@ -88,16 +89,21 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Timestamp"> <InfoRow title="Timestamp">
<Timestamp value={txData.timestamp} /> <Timestamp value={txData.timestamp} />
</InfoRow> </InfoRow>
<InfoRow title="From"> <InfoRow title="From (nonce)">
<div className="flex items-baseline space-x-2 -ml-1"> <div className="flex divide-x-2 divide-dotted divide-gray-300">
<AddressHighlighter address={txData.from}> <div className="flex items-baseline space-x-2 -ml-1 mr-3">
<DecoratedAddressLink <AddressHighlighter address={txData.from}>
address={txData.from} <DecoratedAddressLink
miner={txData.from === txData.miner} address={txData.from}
txFrom miner={txData.from === txData.miner}
/> txFrom
</AddressHighlighter> />
<Copy value={txData.from} /> </AddressHighlighter>
<Copy value={txData.from} />
</div>
<div className="flex items-baseline pl-3">
<Nonce value={txData.nonce} />
</div>
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}> <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
@ -247,7 +253,6 @@ const Details: React.FC<DetailsProps> = ({
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Ether Price">N/A</InfoRow> <InfoRow title="Ether Price">N/A</InfoRow>
<InfoRow title="Nonce">{txData.nonce}</InfoRow>
<InfoRow title="Input Data"> <InfoRow title="Input Data">
<textarea <textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2" className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"