Merge pull request #139 from etclabscore/feat/view-raw

feat: add view raw for blocks and transactions

package.json

@@ -26,6 +26,7 @@
     "@material-ui/core": "^4.5.2",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/styles": "^4.5.2",
+    "@monaco-editor/react": "^2.1.1",
     "@qiwi/semantic-release-gh-pages-plugin": "^1.14.1",
     "@semantic-release/changelog": "^3.0.5",
     "@semantic-release/commit-analyzer": "^6.3.2",

src/App.tsx

@@ -31,6 +31,8 @@ import { createBrowserHistory } from "history";
 import NetworkDropdown from "./components/NetworkDropdown/NetworkDropdown";
 import { StringParam, QueryParamProvider, useQueryParams } from "use-query-params";
 import { createPreserveQueryHistory } from "./helpers/createPreserveHistory";
+import BlockRawContainer from "./containers/BlockRawContainer";
+import TransactionRawContainer from "./containers/TransactionRawContainer";
 
 const history = createPreserveQueryHistory(createBrowserHistory, ["network", "rpcUrl"])();
 
@@ -260,8 +262,10 @@ function App(props: any) {
             <CssBaseline />
             <Switch>
               <Route path={"/"} component={Dashboard} exact={true} />
+              <Route path={"/block/:hash/raw"} component={BlockRawContainer} />
               <Route path={"/block/:hash"} component={Block} />
               <Route path={"/blocks/:number"} component={NodeView} />
+              <Route path={"/tx/:hash/raw"} component={TransactionRawContainer} />
               <Route path={"/tx/:hash"} component={Transaction} />
               <Route path={"/address/:address"} component={Address} />
             </Switch>

src/components/BlockRaw/BlockRaw.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { Button } from "@material-ui/core";
+import Editor from "@monaco-editor/react";
+import useDarkMode from "use-dark-mode";
+
+interface IProps {
+  block: any;
+}
+
+const BlockRaw: React.FC<IProps> = (props) => {
+  const history = useHistory();
+  const darkMode = useDarkMode();
+  const { block } = props;
+
+  return (
+    <div style={{ margin: "0px -25px 0px -25px" }}>
+      <Button
+        onClick={() => {
+          history.push(`/block/${block.hash}`);
+        }}
+        style={{ position: "absolute", right: "10px", top: "75px", zIndex: 1 }}
+      >View Block</Button>
+      <Editor
+        options={{
+          minimap: {
+            enabled: false,
+          },
+          wordWrap: "on",
+          lineNumbers: "off",
+          wrappingIndent: "deepIndent",
+          readOnly: true,
+          showFoldingControls: "always",
+        }}
+        theme={darkMode.value ? "dark" : "light"}
+        width="100vw"
+        height="93vh"
+        language="json"
+        value={JSON.stringify(block, null, 4)}
+      />
+    </div>
+  );
+};
+
+export default BlockRaw;

src/components/BlockRaw/index.ts

@@ -0,0 +1,2 @@
+import BlockRaw from "./BlockRaw";
+export default BlockRaw;

src/components/BlockView/BlockView.tsx

@@ -4,11 +4,13 @@ import Link from "@material-ui/core/Link";
 import TxList from "../TxList";
 import { hexToDate, hexToString, hexToNumber } from "@etclabscore/eserialize";
 import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
 
-import { Table, TableBody, TableCell, TableRow } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableRow, Button } from "@material-ui/core";
 
 function BlockView(props: any) {
   const { block } = props;
+  const history = useHistory();
   const { t } = useTranslation();
 
   if (!block) {
@@ -22,6 +24,12 @@ function BlockView(props: any) {
 
   return (
     <div>
+      <Button
+        onClick={() => {
+          history.push(`/block/${block.hash}/raw`);
+        }}
+        style={{ position: "absolute", right: "10px", top: "75px" }}
+      >View Raw</Button>
       <Table>
         <TableBody>
           <TableRow>
@@ -31,7 +39,7 @@ function BlockView(props: any) {
 
           <TableRow>
             <TableCell>{t("Timestamp")}</TableCell>
-            <TableCell>{t("Timestamp Date", { date: hexToDate(timestamp)})}</TableCell>
+            <TableCell>{t("Timestamp Date", { date: hexToDate(timestamp) })}</TableCell>
           </TableRow>
 
           <TableRow>
@@ -100,7 +108,7 @@ function BlockView(props: any) {
       </Table>
 
       <TxList transactions={transactions} />
-    </div>
+    </ div >
   );
 }
 

src/components/TxRaw/TxRaw.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { Button, Typography } from "@material-ui/core";
+import Editor from "@monaco-editor/react";
+import useDarkMode from "use-dark-mode";
+import { ObjectUAh7GW7V as ITransaction} from "@etclabscore/ethereum-json-rpc";
+
+interface IProps {
+  tx: ITransaction;
+  receipt: any;
+}
+
+const TxRaw: React.FC<IProps> = (props) => {
+  const history = useHistory();
+  const darkMode = useDarkMode();
+  const { tx, receipt } = props;
+
+  return (
+    <div style={{ margin: "0px -25px 0px -25px" }}>
+      <Button
+        onClick={() => {
+          history.push(`/tx/${tx.hash}`);
+        }}
+        style={{ position: "absolute", right: "10px", top: "75px", zIndex: 1 }}
+      >View Transaction</Button>
+      <br />
+      <Typography variant="h5" gutterBottom style={{marginLeft: "10px"}}>Transaction</Typography>
+      <br />
+      <Editor
+        options={{
+          minimap: {
+            enabled: false,
+          },
+          lineNumbers: "off",
+          wordWrap: "on",
+          wrappingIndent: "deepIndent",
+          readOnly: true,
+          showFoldingControls: "always",
+        }}
+        theme={darkMode.value ? "dark" : "light"}
+        width="100vw"
+        height="35vh"
+        language="json"
+        value={JSON.stringify(tx, null, 4)}
+      />
+      <br />
+      <Typography variant="h6" gutterBottom style={{marginLeft: "10px"}}>Receipt</Typography>
+      <br />
+      <Editor
+        options={{
+          minimap: {
+            enabled: false,
+          },
+          lineNumbers: "off",
+          wordWrap: "on",
+          wrappingIndent: "deepIndent",
+          readOnly: true,
+          showFoldingControls: "always",
+        }}
+        theme={darkMode.value ? "dark" : "light"}
+        width="100vw"
+        height="35vh"
+        language="json"
+        value={JSON.stringify(receipt, null, 4)}
+      />
+    </div>
+  );
+};
+
+export default TxRaw;

src/components/TxView/TxView.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@material-ui/core/Link";
-import { Table, TableBody, TableCell, TableRow } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableRow, Typography, Button } from "@material-ui/core";
 import { hexToNumber } from "@etclabscore/eserialize";
 import { useTranslation } from "react-i18next";
-import i18next from "i18next";
+import { useHistory } from "react-router-dom";
 
 const unit = require("ethjs-unit"); //tslint:disable-line
 
@@ -13,10 +13,23 @@ export interface ITxViewProps {
   receipt: any | null;
 }
 
-function renderTxTable(tx: any, receipt: any | null, t: i18next.TFunction) {
+function TxView(props: ITxViewProps) {
+  const { tx, receipt } = props;
+  const { t } = useTranslation();
+  const history = useHistory();
+  if (!tx) {
+    return null;
+  }
+
   return (
     <div>
-      <div>General</div>
+      <Button
+        onClick={() => {
+          history.push(`/tx/${tx.hash}/raw`);
+        }}
+        style={{ position: "absolute", right: "10px", top: "75px" }}
+      >View Raw</Button>
+      <Typography variant="h6">Transaction</Typography>
       <Table>
         <TableBody>
           <TableRow>
@@ -121,7 +134,8 @@ function renderTxTable(tx: any, receipt: any | null, t: i18next.TFunction) {
         </TableBody>
       </Table>
 
-      <div>Receipt</div>
+      <br />
+      <Typography variant="h6">Receipt</Typography>
       {receipt &&
         <Table>
           <TableBody>
@@ -220,14 +234,4 @@ function renderTxTable(tx: any, receipt: any | null, t: i18next.TFunction) {
   );
 }
 
-function TxView(props: ITxViewProps) {
-  const { tx, receipt } = props;
-  const { t } = useTranslation();
-  if (!tx) {
-    return null;
-  }
-
-  return renderTxTable(tx, receipt, t);
-}
-
 export default TxView;

src/containers/BlockRawContainer.tsx

@@ -0,0 +1,17 @@
+import { CircularProgress } from "@material-ui/core";
+import useMultiGethStore from "../stores/useMultiGethStore";
+import * as React from "react";
+import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
+import BlockRaw from "../components/BlockRaw";
+
+export default function BlockRawContainer(props: any) {
+  const { match: { params: { hash } } } = props;
+  const [erpc]: [EthereumJSONRPC] = useMultiGethStore();
+  const [block, setBlock] = React.useState();
+  React.useEffect(() => {
+    if (!erpc) { return; }
+    erpc.eth_getBlockByHash(hash, true).then(setBlock);
+  }, [hash, erpc]);
+  if (!block) { return (<CircularProgress />); }
+  return (<BlockRaw block={block} />);
+}

src/containers/TransactionRawContainer.tsx

@@ -0,0 +1,28 @@
+import { CircularProgress } from "@material-ui/core";
+import * as React from "react";
+import useMultiGethStore from "../stores/useMultiGethStore";
+import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
+import TxRaw from "../components/TxRaw/TxRaw";
+
+export default function TransactionRawContainer(props: any) {
+  const hash = props.match.params.hash;
+  const [erpc]: [EthereumJSONRPC] = useMultiGethStore();
+  const [transaction, setTransaction] = React.useState();
+  const [receipt, setReceipt] = React.useState();
+
+  React.useEffect(() => {
+    if (!erpc) { return; }
+    erpc.eth_getTransactionByHash(hash).then(setTransaction);
+  }, [hash, erpc]);
+
+  React.useEffect(() => {
+    if (!erpc) { return; }
+    erpc.eth_getTransactionReceipt(hash).then(setReceipt);
+  }, [hash, erpc]);
+
+  if (!transaction || !receipt) {
+    return (<CircularProgress />);
+  }
+
+  return (<TxRaw tx={transaction} receipt={receipt} />);
+}