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

src/Transaction.tsx

@@ -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";
+import { useInternalOperations, useTxData } from "./useErigonHooks";
-
-const TRANSFER_TOPIC =
-  "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
 
 type TransactionParams = {
   txhash: string;
@@ -24,89 +18,7 @@ const Transaction: React.FC = () => {
   const params = useParams<TransactionParams>();
   const { txhash } = params;
 
-  const [txData, setTxData] = useState<TransactionData>();
+  const txData = useTxData(provider, txhash);
-  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 internalOps = useInternalOperations(provider, txData);
   const sendsEthToMiner = useMemo(() => {

src/components/Nonce.tsx

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

src/components/PercentagePosition.tsx

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

src/components/RelativePosition.tsx

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

src/transaction/Details.tsx

@@ -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,17 +64,34 @@ const Details: React.FC<DetailsProps> = ({
           </span>
         )}
       </InfoRow>
-      <InfoRow title="Block">
+      <InfoRow title="Block / Position">
-        <div className="flex items-baseline space-x-2">
+        <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">
+      <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">
+          <div className="flex items-baseline space-x-2 -ml-1 mr-3">
             <AddressHighlighter address={txData.from}>
               <DecoratedAddressLink
                 address={txData.from}
@@ -80,6 +101,10 @@ const Details: React.FC<DetailsProps> = ({
             </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"}>
         {txData.to ? (
@@ -192,8 +217,10 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title="Gas Used / Limit">
         <div className="flex space-x-3 items-baseline">
           <div>
-            <GasValue value={txData.gasUsed} /> /{" "}
+            <RelativePosition
-            <GasValue value={txData.gasLimit} />
+              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"

src/types.ts

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

src/useErigonHooks.ts

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