Merge pull request #49 from bugout-dev/fixing-txinfo

Fixing txinfo
2021-08-03 09:16:34 -07:00 · 2021-08-03 09:16:34 -07:00 · bf9524cd16
commit bf9524cd16
--- a/backend/moonstream/data.py
+++ b/backend/moonstream/data.py
@ -96,8 +96,8 @@ class EthereumTransaction(BaseModel):
    gas: int
    gasPrice: int
    value: int
-    from_address: str = Field(alias="from")
-    to_address: Optional[str] = Field(default=None, alias="to")
+    from_address: str
+    to_address: Optional[str]
    hash: Optional[str] = None
    block_hash: Optional[str] = Field(default=None, alias="blockHash")
    block_number: Optional[int] = Field(default=None, alias="blockNumber")
--- a/frontend/pages/stream/[entryId].js
+++ b/frontend/pages/stream/[entryId].js
@ -1,114 +1,58 @@
-import React from "react";
-import { Flex, HStack, Skeleton, Heading } from "@chakra-ui/react";
-//import { useTxInfo, useRouter } from "../../src/core/hooks";
-import { useRouter } from "../../src/core/hooks";
-// import FourOFour from "../../src/components/FourOFour";
-// import FourOThree from "../../src/components/FourOThree";
+import React, {useContext} from "react";
+import { Flex, HStack, Skeleton, Box, Heading, Center, Spinner } from "@chakra-ui/react";
+import { useTxInfo, useTxCashe, useRouter } from "../../src/core/hooks";
+import FourOFour from "../../src/components/FourOFour";
+import FourOThree from "../../src/components/FourOThree";
 import Tags from "../../src/components/Tags";
-import Scrollable from "../../src/components/Scrollable";
-import TxInfo from "../../src/components/TxInfo";
 import { getLayout } from "../../src/layouts/EntriesLayout";
+import Scrollable from "../../src/components/Scrollable";
+import TxInfo from "../../src/components/TxInfo"
+import UIContext from "../../src/core/providers/UIProvider/context";

 const Entry = () => {
+  const ui = useContext(UIContext);
  const router = useRouter();
  const { entryId } = router.params;
-  /*  const {
+  const txCache = useTxCashe;
+
+  const callReroute = () => {
+    ui.setEntriesViewMode("list");
+    router.push({
+      pathname: `/stream`,
+      query: router.query,
+    });
+    const LoadingSpinner = () => (
+      <Box px="12%" my={12} width="100%">
+        <Center>
+          <Spinner
+            hidden={false}
+            my={0}
+            size="lg"
+            color="primary.500"
+            thickness="4px"
+            speed="1.5s"
+          />
+        </Center>
+      </Box>
+    );
+    return (
+      <LoadingSpinner/>
+    )
+  } 
+
+  const transaction = txCache.getCurrentTransaction()
+  
+  const {
    data: entry,
    isFetchedAfterMount,
    isLoading,
    isError,
    error,
-  } = useJournalEntry(journalId, entryId, "personal");
-*/
-  const raw_transaction = {
-    tx: {
-      blockHash:
-        "0x2f1cb4055fa3ba8af199aeba564917999b3e661d582082e5928721c3f4ef04ca",
-      blockNumber: 12882164,
-      from: "0x52f200565581ae950c765b67f574cfc99f662657",
-      gas: 400000,
-      gasPrice: 12500000000,
-      hash: "0xee3d2c14cacc0e5b8085c0b1a0cbacb6ed79762220dcee0a9c19a5a25e59a331",
-      input:
-        "0x6102a8610026600b82828239805160001a60731461001957fe5b30600052607381538281f3fe73000000000000000000000000000000000000000030146080604052600436106100355760003560e01c80636e8af2721461003a575b600080fd5b6100576004803603602081101561005057600080fd5b50356100b2565b6040518083815260200180602001828103825283818151815260200191508051906020019060200280838360005b8381101561009d578181015183820152602001610085565b50505050905001935050505060405180910390f35b60048101546000906060908067ffffffffffffffff811180156100d457600080fd5b506040519080825280602002602001820160405280156100fe578160200160208202803683370190505b50915060005b8181101561017757600061014f670de0b6b3a764000061014688600401858154811061012c57fe5b6000918252602090912001546001600160a01b031661017e565b600f0b906101ff565b905080850194508084838151811061016357fe5b602090810291909101015250600101610104565b5050915091565b6000816001600160a01b031663ac969a73306040518263ffffffff1660e01b815260040180826001600160a01b0316815260200191505060206040518083038186803b1580156101cd57600080fd5b505afa1580156101e1573d6000803e3d6000fd5b505050506040513d60208110156101f757600080fd5b505192915050565b60008161020e5750600061026c565b600083600f0b121561021f57600080fd5b600f83900b6fffffffffffffffffffffffffffffffff8316810260401c90608084901c026001600160c01b0381111561025757600080fd5b60401b811981111561026857600080fd5b0190505b9291505056fea2646970667358221220bf54788224a5a22890835d5e41e3e9622b1a055984390a38ae02a95c53dccfd864736f6c63430007030033",
-      nonce: 184,
-      r: "0xe7e8e58deccd5f277928d25f7fc66548be1a84af811db8927dd86fbd08c5acd6",
-      s: "0x2214b48d9ce2b80c11586ddaff5214429c99e09188f75c04b7b0d0b7536ec94c",
-      to: null,
-      transactionIndex: 76,
-      type: "0x0",
-      v: "0x25",
-      value: 0,
-    },
-  };
-
-  let isFetchedAfterMount = false;
-  let isLoading = false;
-  let isError = false;
-
-  const ETHER_TX = {
-    tx: {
-      gas: 400000,
-      gasPrice: 12500000000,
-      value: 0,
-      from: "0x52f200565581ae950c765b67f574cfc99f662657",
-      to: null,
-      hash: "0xee3d2c14cacc0e5b8085c0b1a0cbacb6ed79762220dcee0a9c19a5a25e59a331",
-      blockHash:
-        "0x2f1cb4055fa3ba8af199aeba564917999b3e661d582082e5928721c3f4ef04ca",
-      blockNumber: 12882164,
-      input:
-        "0x6102a8610026600b82828239805160001a60731461001957fe5b30600052607381538281f3fe73000000000000000000000000000000000000000030146080604052600436106100355760003560e01c80636e8af2721461003a575b600080fd5b6100576004803603602081101561005057600080fd5b50356100b2565b6040518083815260200180602001828103825283818151815260200191508051906020019060200280838360005b8381101561009d578181015183820152602001610085565b50505050905001935050505060405180910390f35b60048101546000906060908067ffffffffffffffff811180156100d457600080fd5b506040519080825280602002602001820160405280156100fe578160200160208202803683370190505b50915060005b8181101561017757600061014f670de0b6b3a764000061014688600401858154811061012c57fe5b6000918252602090912001546001600160a01b031661017e565b600f0b906101ff565b905080850194508084838151811061016357fe5b602090810291909101015250600101610104565b5050915091565b6000816001600160a01b031663ac969a73306040518263ffffffff1660e01b815260040180826001600160a01b0316815260200191505060206040518083038186803b1580156101cd57600080fd5b505afa1580156101e1573d6000803e3d6000fd5b505050506040513d60208110156101f757600080fd5b505192915050565b60008161020e5750600061026c565b600083600f0b121561021f57600080fd5b600f83900b6fffffffffffffffffffffffffffffffff8316810260401c90608084901c026001600160c01b0381111561025757600080fd5b60401b811981111561026857600080fd5b0190505b9291505056fea2646970667358221220bf54788224a5a22890835d5e41e3e9622b1a055984390a38ae02a95c53dccfd864736f6c63430007030033",
-      nonce: 184,
-      r: "0xe7e8e58deccd5f277928d25f7fc66548be1a84af811db8927dd86fbd08c5acd6",
-      s: "0x2214b48d9ce2b80c11586ddaff5214429c99e09188f75c04b7b0d0b7536ec94c",
-      v: "0x25",
-      transactionIndex: 76,
-      type: "0x0",
-    },
-    is_smart_contract_deployment: true,
-    is_smart_contract_call: false,
-    smart_contract_address: "0x2f7E36b386F40d01A867BaffF3F321bC01882F7f",
-    abi: {
-      functions: [
-        {
-          hex_signature: "0x6e8af272",
-          text_signature_candidates: [],
-          type: "function",
-        },
-        {
-          hex_signature: "0xac969a73",
-          text_signature_candidates: ["viewNumeraireBalance(address)"],
-          type: "function",
-        },
-        {
-          hex_signature: "0xffffffff",
-          text_signature_candidates: ["test266151307()", "lololo()"],
-          type: "function",
-        },
-      ],
-      events: [
-        {
-          hex_signature: "0x123456",
-          text_signature_candidates: ["viewNumeraireBalance(address)"],
-          type: "event",
-        },
-        {
-          hex_signature: "0x123436",
-          text_signature_candidates: [],
-          type: "event",
-        },
-      ],
-    },
-    errors: [],
-  };
-  let entry = {
-    title: ETHER_TX.tx.hash,
-    content: "```json\n" + JSON.stringify(ETHER_TX) + "```",
-  };
-
-  // if (isError && error.response.status === 404) return <FourOFour />;
-  // if (isError && error.response.status === 403) return <FourOThree />;
+  } = useTxInfo({tx:transaction})
+  
+  if (isError) {return callReroute()}
+  if (isError && error.response.status === 404) return <FourOFour />;
+  if (isError && error.response.status === 403) return <FourOThree />;
  // if (!entry || isLoading) return "";

  return (
@ -139,7 +83,7 @@ const Entry = () => {
            fontSize="1.5rem"
            textAlign="left"
          >
-            {entry?.title}
+            {entry && entry.hash}
          </Heading>
        </HStack>
      </Skeleton>
@ -162,7 +106,7 @@ const Entry = () => {
        isLoaded={isFetchedAfterMount || entry}
      >
        <Scrollable>
-          <TxInfo transaction={ETHER_TX}></TxInfo>
+        {!isLoading && (<TxInfo transaction = {entry}></TxInfo> )}
        </Scrollable>
      </Skeleton>
    </Flex>
--- a/frontend/src/components/StreamEntry.js
+++ b/frontend/src/components/StreamEntry.js
@ -14,7 +14,7 @@ import moment from "moment";
 import { ArrowRightIcon } from "@chakra-ui/icons";
 import { useRouter } from "../core/hooks";
 import UIContext from "../core/providers/UIProvider/context";
-import { useToast } from "../core/hooks";
+import { useToast, useTxCashe } from "../core/hooks";

 const StreamEntry = ({ entry, filterCallback, filterConstants }) => {
  const ui = useContext(UIContext);
@ -30,17 +30,18 @@ const StreamEntry = ({ entry, filterCallback, filterConstants }) => {
    } else if (copyString) {
      onCopy();
    }
-  }, [copyString, onCopy, hasCopied, toast]);

+  }, [copyString, onCopy, hasCopied, toast]);  
  const handleViewClicked = (entryId) => {
    ui.setEntryId(entryId);
    ui.setEntriesViewMode("entry");
+    useTxCashe.setCurrentTransaction(entry)
    router.push({
-      pathname: `/stream/${entry.id}`,
+      pathname: `/stream/${entry.hash}`,
      query: router.query,
    });
  };
-
+  
  const [showFullView] = useMediaQuery(["(min-width: 420px)"]);
  console.log(entry);

--- a/frontend/src/components/TxInfo.js
+++ b/frontend/src/components/TxInfo.js
@ -49,46 +49,49 @@ const TxABI = (props) => {
  );
 };
 const TxInfo = (props) => {
-  const transaction = props.transaction;
-  const dont_display = (key) => {
-    return !["input"].includes(key);
-  };
-  return (
-    <Box boxShadow="xs" p="6" rounded="md">
-      <StatGroup>
-        <Stat>
-          <StatLabel>Value</StatLabel>
-          <StatNumber>{transaction.tx.value}</StatNumber>
-          <StatHelpText>amount of ETH to transfer in WEI</StatHelpText>
-        </Stat>
-        <Stat>
-          <StatLabel>Gas</StatLabel>
-          <StatNumber>{transaction.tx.gas}</StatNumber>
-          <StatHelpText>gas limit for transaction</StatHelpText>
-        </Stat>
-        <Stat>
-          <StatLabel>Gas price</StatLabel>
-          <StatNumber>{transaction.tx.gasPrice}</StatNumber>
-          <StatHelpText>the fee the sender pays per unit of gas</StatHelpText>
-        </Stat>
-      </StatGroup>
-
-      <Table variant="simple">
-        <Tbody>
-          {Object.keys(transaction.tx)
-            .filter(dont_display)
-            .map((key) => (
-              <Tr key={key}>
-                <Td>{key}</Td>
-                <Td>{transaction.tx[key]}</Td>
-              </Tr>
-            ))}
-        </Tbody>
-      </Table>
-      {transaction.abi && (
-        <TxABI byteCode={transaction.tx.input} abi={transaction.abi} />
-      )}
-    </Box>
-  );
-};
+    const transaction = props.transaction;
+    const dont_display = (key) => {
+        return !["input"].includes(key)
+    }
+    return (
+        <Box boxShadow="xs" p="6" rounded="md">
+            <StatGroup>
+                <Stat>
+                    <StatLabel>Value</StatLabel>
+                    <StatNumber>{transaction.tx.value}</StatNumber>
+                    <StatHelpText>amount of ETH to transfer in WEI</StatHelpText>
+                </Stat>
+                <Stat>
+                    <StatLabel>Gas</StatLabel>
+                    <StatNumber>{transaction.tx.gas}</StatNumber>
+                    <StatHelpText>gas limit for transaction</StatHelpText>
+                </Stat>
+                <Stat>
+                    <StatLabel>Gas price</StatLabel>
+                    <StatNumber>{transaction.tx.gasPrice}</StatNumber>
+                    <StatHelpText>the fee the sender pays per unit of gas</StatHelpText>
+                </Stat>
+            </StatGroup>
+            
+            <Table variant="simple" >
+                <Tbody>
+                    {Object.keys(transaction.tx).filter(dont_display).map((key) => (
+                        (transaction.tx[key] != undefined && <Tr key = {key}>
+                            <Td>{key}</Td>
+                            <Td>{transaction.tx[key]}</Td>
+                        </Tr>)
+                    ))}
+                </Tbody>
+            </Table>
+            {transaction.tx.input && transaction.tx.input !== "0x" &&
+                <TxABI 
+                byteCode={transaction.tx.input} 
+                abi={transaction.abi}
+                />
+            }
+        </Box>
+        
+            
+    )
+}
 export default TxInfo;
--- a/frontend/src/core/hooks/index.js
+++ b/frontend/src/core/hooks/index.js
@ -20,4 +20,5 @@ export { default as useStripe } from "./useStripe";
 export { default as useSubscriptions } from "./useSubscriptions";
 export { default as useToast } from "./useToast";
 export { default as useTxInfo } from "./useTxInfo";
+export { default as useTxCashe } from "./useTxCache"
 export { default as useUser } from "./useUser";
--- a/frontend/src/core/hooks/useTxCache.js
+++ b/frontend/src/core/hooks/useTxCache.js
@ -0,0 +1,7 @@
+class TxCashe {
+    currentTransaction = undefined
+    getCurrentTransaction(){return this.currentTransaction}
+    setCurrentTransaction(transaction){ this.currentTransaction = transaction}
+}
+const useTxCashe = new TxCashe();
+export default useTxCashe;
--- a/frontend/src/core/hooks/useTxInfo.js
+++ b/frontend/src/core/hooks/useTxInfo.js
@ -4,14 +4,14 @@ import { queryCacheProps } from "./hookCommon";
 import { useToast } from ".";

 const useTxInfo = (transaction) => {
-  console.log("Use hook", transaction);
-  const toast = useToast();
-  const getTxInfo = async () => {
-    const response = await TxInfoService.getTxInfo(transaction);
-    return response.data;
-  };
-  const { data, isLoading, isFetchedAfterMount, refetch, isError, error } =
-    useQuery(["txinfo", transaction.tx.hash], getTxInfo, {
+    if (!transaction.tx) return {data: "undefined", isLoading: false, isFetchedAfterMount: true, refetch: false, isError: true, error: "undefined"}
+    const toast = useToast();
+    const getTxInfo = async () => {
+        const response = await TxInfoService.getTxInfo(transaction);
+        return response.data;
+    }
+    const { data, isLoading, isFetchedAfterMount, refetch, isError, error } =
+    useQuery(["txinfo", transaction.tx.hash ], getTxInfo, {
      ...queryCacheProps,
      onError: (error) => toast(error, "error"),
    });