Fixed transaction information service on frontend

Also fixed request body on `/txinfo/ethereum_blockchain`.

backend/moonstream/data.py

@@ -88,10 +88,10 @@ class ContractABI(BaseModel):
 
 class EthereumTransaction(BaseModel):
     gas: int
-    gasPrice: int
+    gas_price: int
     value: int
-    from_address: str
-    to_address: Optional[str]
+    from_address: str = Field(alias="from")
+    to_address: Optional[str] = Field(alias="to")
     hash: Optional[str] = None
     block_hash: Optional[str] = Field(default=None, alias="blockHash")
     block_number: Optional[int] = Field(default=None, alias="blockNumber")

frontend/pages/stream/index.js

@@ -17,15 +17,15 @@ const Entry = () => {
 
   useEffect(() => {
     if (typeof window !== "undefined") {
-      if (ui.currentTransaction) {
+      if (ui?.currentTransaction) {
         document.title = `Stream details: ${ui.currentTransaction.hash}`;
       } else {
         document.title = `Stream`;
       }
     }
-  }, [ui.currentTransaction]);
+  }, [ui?.currentTransaction]);
 
-  if (ui.currentTransaction) {
+  if (ui?.currentTransaction) {
     return <StreamEntryDetails />;
   } else
     return (

frontend/src/core/hooks/useTxInfo.js

@@ -3,19 +3,46 @@ import { TxInfoService } from "../services";
 import { queryCacheProps } from "./hookCommon";
 import { useToast } from ".";
 
-const useTxInfo = (transaction) => {
+const useTxInfo = (wrappedEvent) => {
   const toast = useToast();
+
+  let event = {};
+  if (wrappedEvent?.tx) {
+    event = wrappedEvent.tx;
+  }
+
+  console.log("TXINFO: wrappedEvent:", wrappedEvent);
+  console.log("TXINFO: event:", event);
+
+  let transaction = null;
+  if (event.event_type === "ethereum_blockchain") {
+    transaction = event.event_data;
+  } else if (event.event_type === "ethereum_txpool") {
+    transaction = {
+      from: event.event_data.from,
+      nonce: event.event_data.nonce,
+      ...event.event_data.transaction,
+    };
+  }
+
+  console.log("TXINFO: transaction:", transaction);
+
   const getTxInfo = async () => {
-    const response = await TxInfoService.getTxInfo(transaction);
+    const response = await TxInfoService.getTxInfo({ tx: { ...transaction } });
+    console.log("TXINFO: response:", response);
     return response.data;
   };
   const { data, isLoading, isFetchedAfterMount, refetch, isError, error } =
-    useQuery(["txinfo", transaction.tx && transaction.tx.hash], getTxInfo, {
-      ...queryCacheProps,
-      enabled: !!transaction.tx,
-      onError: (error) => toast(error, "error"),
-    });
-  const isFetching = !!transaction.tx;
+    useQuery(
+      ["txinfo", transaction ? transaction.hash : "unknown"],
+      getTxInfo,
+      {
+        ...queryCacheProps,
+        enabled: !!transaction,
+        onError: (error) => toast(error, "error"),
+      }
+    );
+  const isFetching = !!transaction;
   return {
     data,
     isFetchedAfterMount,