Merge branch 'master' of github.com:harmony-one/explorer-v2-frontend

src/api/rpc.ts

@@ -28,7 +28,7 @@ export const hmyv2_getTransactionReceipt = (
   params: [string],
   shardNumber: number
 ) => {
-  return rpcAdapter<TRPCResponse<{ logs: [{ data: string }] }>>(
+  return rpcAdapter<TRPCResponse<{ logs: [{ data: string }], gasUsed: string }>>(
     process.env[`REACT_APP_RPC_URL_SHARD${shardNumber}`] as string,
     {
       method: "POST",

src/components/transaction/TransactionDetails.tsx

@@ -113,6 +113,9 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
     transactionFee: (
       <Box justify="center">{CalculateTransactionFee(transaction)}</Box>
     ),
+    gasUsed: (
+      <Box justify="center">{transaction.gas}</Box>
+    ),
     gasPrice: <Box justify="center">{CalculateFee(transaction)}</Box>,
   }; 
 

src/components/transaction/helpers.tsx

@@ -45,6 +45,7 @@ export const transactionPropertyDisplayNames: Record<string, string> = {
   blockNumber: "Block Number",
   from: "From",
   txnFee: "Txn fee",
+  gasUsed: "Gas Used",
   gasPrice: "Gas Price",
   transactionFee: "Transaction Fee",
   input: "Input",
@@ -91,6 +92,7 @@ export const transactionPropertySort: Record<string, number> = {
   to: 650,
   txnFee: 560,
   transactionFee: 550,
+  gasUsed: 540,
   gasPrice: 500,
   input: 300,
   nonce: 350,
@@ -112,6 +114,7 @@ export const transactionPropertyDescriptions: Record<string, string> = {
   to: "The receiving party of the transaction (could be a contract address).",
   value: "The value being transacted in ONE and fiat value.",
   txnFee: "Transaction fee",
+  transactionFee: "Transaction fee",
   // gas: "The exact units of gas that was used for the transaction.",
   transactionIndex: "Transaction's number in the block",
   gasUsed: "The exact units of gas that was used for the transaction.",
@@ -172,7 +175,8 @@ export const transactionPropertyDisplayValues: any = {
   timestamp: (value: any) => <RelativeTimer date={value} />,
   gasUsed: (value: any, tx: RPCTransactionHarmony) => (
     <span>
-      {value} ({+value / +tx.gas}%){" "}
+      {value}
+      {/* {value} ({+value / +tx.gas}%){" "} */}
     </span>
   ),
   shardID: (value: any, tx: RPCTransactionHarmony) => (

src/pages/TransactionPage/index.tsx

@@ -15,6 +15,7 @@ import {
 } from "src/api/client";
 import { AllBlocksTable } from "../AllBlocksPage/AllBlocksTable";
 import { revertErrorMessage } from "src/web3/parseByteCode";
+import { hmyv2_getTransactionReceipt } from "src/api/rpc";
 
 const extractError = (err: any) => {
   const errorMessages = err!.split(":");
@@ -58,22 +59,33 @@ export const TransactionPage = () => {
   useEffect(() => {
     const getTx = async () => {
       let trx;
+      let shard = 0;
       if (id.length === 66) {
         trx = await getTransactionByField([0, "hash", id]);
       }
 
       if (!trx && availableShards.find((i) => i === 1)) {
         trx = await getTransactionByField([1, "hash", id]);
+        shard = 1;
       }
 
       if (!trx && availableShards.find((i) => i === 2)) {
         trx = await getTransactionByField([2, "hash", id]);
+        shard = 2;
       }
 
       if (!trx && availableShards.find((i) => i === 3)) {
         trx = await getTransactionByField([3, "hash", id]);
+        shard = 3;
       }
 
+      if (trx) {
+        const txnReceipt = await hmyv2_getTransactionReceipt([id], shard);
+        if (txnReceipt && txnReceipt.result && txnReceipt.result.gasUsed) {
+          trx.gas = parseInt(txnReceipt.result.gasUsed, 16).toString();
+        }
+      }
+      
       setTx((trx || {}) as RPCStakingTransactionHarmony);
     };