Add tx gas limit and usage; Refactor main screen columns (#180)

src/api/client.ts

@@ -55,7 +55,7 @@ export function getTransactionByField(params: any[]) {
   return transport(
     "getTransactionByField",
     params
-  ) as Promise<RPCStakingTransactionHarmony>;
+  ) as Promise<RPCTransactionHarmony>;
 }
 
 export function getStakingTransactionByField(params: [number, "hash", string]) {

src/components/transaction/TransactionDetails.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useState } from "react";
-import { IHexSignature, Log, RPCStakingTransactionHarmony } from "src/types";
+import { IHexSignature, Log, RPCStakingTransactionHarmony, RPCTransactionHarmony } from "src/types";
 import {tokenTransfersERC20} from './tokenTransfer/tokenTransfersERC20'
 // import {tokenTransfersERC721} from './tokenTransfer/tokenTransfersERC721'
 import {TokenTransfersERC1155} from './tokenTransfer/tokenTransfersERC1155'
@@ -13,8 +13,8 @@ import {
 import {
   Address,
   CalculateFee,
-  CalculateTransactionFee,
-  TipContent,
+  CalculateTransactionFee, formatNumber,
+  TipContent
 } from "src/components/ui";
 import { Anchor, Box, DataTable, Text, Tip } from "grommet";
 import { TransactionSubType } from "src/components/transaction/helpers";
@@ -61,7 +61,7 @@ const getColumns = ({ type = "" }) => [
 
 type TransactionDetailsProps = {
   internalTxs?: any[];
-  transaction: RPCStakingTransactionHarmony;
+  transaction: RPCTransactionHarmony | RPCStakingTransactionHarmony;
   inputSignature?: IHexSignature;
   type?: TransactionSubType;
   stakingData?: boolean;
@@ -86,6 +86,21 @@ const tokenTransfers = (logs: Log[]) => {
   )
 }
 
+const GasUsed = (props: { tx: RPCTransactionHarmony | RPCStakingTransactionHarmony }) => {
+  const { tx: { gas, gasLimit } } = props
+  if (gas && gasLimit) {
+    const percent = ((+gas / +gasLimit) * 100).toFixed(2)
+    return <Box direction={'row'} gap={'12px'}>
+      <Text size={'small'}>{formatNumber(+gasLimit)}</Text>
+      <Text size={'small'} color={'grey'}>|</Text>
+      <Text size={'small'}>{formatNumber(+gas)} ({percent}%)</Text>
+    </Box>
+  }
+  return <>
+    {gas}
+  </>
+}
+
 
 export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
   transaction,
@@ -116,7 +131,9 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
       <Box justify="center">{CalculateTransactionFee(transaction)}</Box>
     ),
     gasUsed: (
-      <Box justify="center">{transaction.gas}</Box>
+      <Box justify="center">
+        <GasUsed tx={transaction} />
+      </Box>
     ),
     gasPrice: <Box justify="center">{CalculateFee(transaction)}</Box>,
   };

src/components/transaction/helpers.tsx

@@ -34,7 +34,7 @@ export const transactionPropertyDisplayNames: Record<string, string> = {
   blockNumber: "Block Number",
   from: "From",
   txnFee: "Txn fee",
-  gasUsed: "Gas Used",
+  gasUsed: "Gas Limit & Usage by Txn",
   gasPrice: "Gas Price",
   transactionFee: "Transaction Fee",
   input: "Input",

src/components/ui/ShardDropdown.tsx

@@ -26,7 +26,7 @@ props.allShardsAvailable ? { value: "All Shards" } : undefined,
         ].filter((_) => _) as { value: string }[]
       }
       renderValue={(dataItem) => (
-        <Box justify={"center"} style={{ paddingTop: "2px" }}>
+        <Box justify={"center"} style={{ paddingTop: "2px", paddingLeft: '4px' }}>
           {dataItem.value === "All Shards"
             ? dataItem.value
             : `Shard ${dataItem.value}`}
@@ -37,7 +37,7 @@ props.allShardsAvailable ? { value: "All Shards" } : undefined,
           direction={"row"}
           align={"baseline"}
           style={{ 
-            paddingLeft: "7px",
+            paddingLeft: "8px",
             marginBottom: "5px",
             marginTop: dataItem.value === "All Shards" ? "5px" : "0px",
           }}

src/pages/MainPage/index.tsx

@@ -23,6 +23,17 @@ const filter = {
   filters: [],
 };
 
+const ColumnHeader = (props: { children: JSX.Element }) => {
+  return <Box
+    height={'62px'}
+    justify={"center"}
+    pad={'16px'}
+    border={{ size: "xsmall", side: "bottom" }}
+  >
+    {props.children}
+  </Box>
+}
+
 export function MainPage() {
   const focus = useWindowFocused();
 
@@ -104,55 +115,44 @@ export function MainPage() {
     <BaseContainer pad="0">
       <Metrics latency={blockLatency} latencyPerBlock={blockLatencyMap} />
       <Box direction={isLessDesktop ? "column" : "row"} gap="medium">
-        <BasePage style={{ flex: "1 1 100%" }}>
-          <Box
-            border={{ size: "xsmall", side: "bottom" }}
-            margin={{ bottom: "small" }}
-            direction={"row"}
-            align={"baseline"}
-            justify={"between"}
-            style={{ marginTop: "-7px" }}
-          >
-            <Text size="large" weight="bold">
-              Latest Blocks
-            </Text>
-            <Box
-              style={{ maxWidth: "120px", minWidth: "120px" }}
-              align={"start"}
-            >
-              <ShardDropdown
-                allShardsAvailable={true}
-                selected={selectedShard}
-                onClick={(shardNumber) => setSelectedShard(shardNumber)}
-              />
+        <BasePage style={{ flex: "1 1 100%" }} pad={'0'}>
+          <ColumnHeader>
+            <Box direction={"row"} align={"center"} justify={"between"}>
+              <Text size="medium" weight="bold">Latest Blocks</Text>
+              <Box style={{ maxWidth: "120px", minWidth: "120px" }} align={"start"}>
+                <ShardDropdown
+                  allShardsAvailable={true}
+                  selected={selectedShard}
+                  onClick={(shardNumber) => setSelectedShard(shardNumber)}
+                />
+              </Box>
             </Box>
+          </ColumnHeader>
+          <Box pad={'medium'}>
+            <LatestBlocksTable blocks={blocks} />
+            <Button
+              margin={{ top: "medium" }}
+              onClick={() => history.push("/blocks")}
+            >
+              VIEW ALL BLOCKS
+            </Button>
           </Box>
-
-          <LatestBlocksTable blocks={blocks} />
-          <Button
-            margin={{ top: "medium" }}
-            onClick={() => history.push("/blocks")}
-          >
-            VIEW ALL BLOCKS
-          </Button>
         </BasePage>
-        <BasePage style={{ flex: "1 1 100%" }}>
-          <Box
-            border={{ size: "xsmall", side: "bottom" }}
-            pad={{ bottom: "small" }}
-            margin={{ bottom: "small" }}
-          >
-            <Text size="large" weight="bold">
-              Latest Transactions
-            </Text>
+        <BasePage style={{ flex: "1 1 100%" }} pad={'0'}>
+          <ColumnHeader>
+            <Box>
+              <Text size="medium" weight="bold">Latest Transactions</Text>
+            </Box>
+          </ColumnHeader>
+          <Box pad={'small'}>
+            <LatestTransactionsTable />
+            <Button
+              margin={{ top: "medium" }}
+              onClick={() => history.push("/transactions")}
+            >
+              VIEW ALL TRANSACTIONS
+            </Button>
           </Box>
-          <LatestTransactionsTable />
-          <Button
-            margin={{ top: "medium" }}
-            onClick={() => history.push("/transactions")}
-          >
-            VIEW ALL TRANSACTIONS
-          </Button>
         </BasePage>
       </Box>
     </BaseContainer>

src/pages/StackingTransactionPage/index.tsx

@@ -41,13 +41,19 @@ export const StakingTransactionPage = () => {
           tx = await getStakingTransactionByField([3, "hash", id]);
         }
 
-        if (tx.type === "CollectRewards" && tx.amount === null) {
-          try {
-            tx.amount = await (
-              await hmyv2_getTransactionReceipt([id], shardNumber)
-            ).result.logs[0].data;
-          } catch {}
-        }
+        try {
+          const txnReceipt = await hmyv2_getTransactionReceipt([id], shardNumber)
+          if (txnReceipt && txnReceipt.result) {
+            if (tx.type === "CollectRewards" && tx.amount === null) {
+              tx.amount = txnReceipt.result.logs[0].data
+            }
+
+            if (txnReceipt.result.gasUsed) {
+              tx.gasLimit = tx.gas
+              tx.gas = parseInt(txnReceipt.result.gasUsed).toString();
+            }
+          }
+        } catch {}
       }
       setTx(tx as RPCStakingTransactionHarmony);
     };

src/pages/TransactionPage/index.tsx

@@ -1,7 +1,7 @@
 import { TransactionDetails } from "src/components/transaction/TransactionDetails";
 import { InternalTransactionList } from "src/components/transaction/InternalTransactionList";
 import { TransactionLogs } from "src/components/transaction/TransactionLogs";
-import { IHexSignature, InternalTransaction, RPCStakingTransactionHarmony } from "src/types";
+import { IHexSignature, InternalTransaction, RPCTransactionHarmony } from "src/types";
 import { BaseContainer, BasePage } from "src/components/ui";
 
 import { useHistory, useParams } from "react-router-dom";
@@ -35,9 +35,7 @@ export const TransactionPage = () => {
   const activeTab = query.get('activeTab') || '0';
 
   // hash or number
-  const [tx, setTx] = useState<RPCStakingTransactionHarmony>(
-    {} as RPCStakingTransactionHarmony
-  );
+  const [tx, setTx] = useState<RPCTransactionHarmony>({} as RPCTransactionHarmony);
   const [trxs, setTrxs] = useState<InternalTransaction[]>([]);
   const [logs, setLogs] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -50,7 +48,7 @@ export const TransactionPage = () => {
     .map((t) => +t);
 
   useEffect(() => {
-    const getTxInputSignature = async (trx: RPCStakingTransactionHarmony) => {
+    const getTxInputSignature = async (trx: RPCTransactionHarmony) => {
       let signature
       try {
         const signatures = await getByteCodeSignatureByHash([trx.input.slice(0, 10)])
@@ -89,6 +87,7 @@ export const TransactionPage = () => {
       if (trx) {
         const txnReceipt = await hmyv2_getTransactionReceipt([id], shard);
         if (txnReceipt && txnReceipt.result && txnReceipt.result.gasUsed) {
+          trx.gasLimit = trx.gas
           trx.gas = parseInt(txnReceipt.result.gasUsed).toString();
         }
         if (trx.input && trx.input.length > 10) {
@@ -96,7 +95,7 @@ export const TransactionPage = () => {
         }
       }
       
-      setTx((trx || {}) as RPCStakingTransactionHarmony);
+      setTx((trx || {}) as RPCTransactionHarmony);
       setInputSignature(trxInputSignature)
     };
 

src/types/blockchain.ts

@@ -118,6 +118,7 @@ export type RPCTransactionHarmony = {
   to: AddressHarmony;
   gas: string;
   gasPrice: string;
+  gasLimit: string;
   hash: TransactionHarmonyHash;
   ethHash: TransactionHash;
   input: ByteCode;