Merge pull request #89 from bugout-dev/improving-txinfo

Improving txinfo

frontend/pages/stream/[entryId].js

@@ -49,11 +49,11 @@ const Entry = () => {
     data: entry,
     isFetchedAfterMount,
     isLoading,
+    isFetching, //If transaction.tx is undefined, will not fetch
     isError,
     error,
   } = useTxInfo({ tx: ui.currentTransaction });
-
-  if (isError) {
+  if (!isFetching) {
     return callReroute();
   }
   if (isError && error.response.status === 404) return <FourOFour />;
@@ -88,7 +88,7 @@ const Entry = () => {
             fontSize="1.5rem"
             textAlign="left"
           >
-            {entry && entry.hash}
+            {entry && entry.tx.hash}
           </Heading>
         </HStack>
       </Skeleton>

frontend/src/components/TxInfo.js

@@ -10,7 +10,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";
-
+const toEth = (wei) => { return wei / Math.pow(10, 18) }
 const TxABI = (props) => {
   const byteCode = props.byteCode;
   const abi = props.abi;
@@ -58,17 +58,18 @@ const TxInfo = (props) => {
       <StatGroup>
         <Stat>
           <StatLabel>Value</StatLabel>
-          <StatNumber>{transaction.tx.value}</StatNumber>
-          <StatHelpText>amount of ETH to transfer in WEI</StatHelpText>
+          <StatNumber>{toEth(transaction.tx.value)} eth</StatNumber>
+          <StatHelpText>amount of ETH to transfer</StatHelpText>
         </Stat>
         <Stat>
-          <StatLabel>Gas</StatLabel>
+          <StatLabel>Gas limit</StatLabel>
           <StatNumber>{transaction.tx.gas}</StatNumber>
-          <StatHelpText>gas limit for transaction</StatHelpText>
+          <StatHelpText>Maximum amount of gas </StatHelpText>
+          <StatHelpText>provided for the transaction</StatHelpText>
         </Stat>
         <Stat>
           <StatLabel>Gas price</StatLabel>
-          <StatNumber>{transaction.tx.gasPrice}</StatNumber>
+          <StatNumber>{toEth(transaction.tx.gasPrice)} eth</StatNumber>
           <StatHelpText>the fee the sender pays per unit of gas</StatHelpText>
         </Stat>
       </StatGroup>

frontend/src/core/hooks/useTxInfo.js

@@ -10,13 +10,13 @@ const useTxInfo = (transaction) => {
     return response.data;
   };
   const { data, isLoading, isFetchedAfterMount, refetch, isError, error } =
-    useQuery(["txinfo", transaction.tx.hash], getTxInfo, {
+    useQuery(["txinfo", (transaction.tx && transaction.tx.hash)], getTxInfo, {
       ...queryCacheProps,
       enabled: !!transaction.tx,
       onError: (error) => toast(error, "error"),
     });
-
-  return { data, isFetchedAfterMount, isLoading, refetch, isError, error };
+  const isFetching = !!transaction.tx;
+  return { data, isFetchedAfterMount, isLoading, refetch, isFetching, isError, error };
 };
 
 export default useTxInfo;