Skip to content
This repository has been archived by the owner on Feb 27, 2021. It is now read-only.

Commit

Permalink
Merge pull request #139 from etclabscore/feat/view-raw
Browse files Browse the repository at this point in the history
feat: add view raw for blocks and transactions
  • Loading branch information
shanejonas authored Nov 1, 2019
2 parents f7c872f + 04d09c9 commit c64ec50
Show file tree
Hide file tree
Showing 10 changed files with 1,082 additions and 456 deletions.
1,323 changes: 885 additions & 438 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"])();

Expand Down Expand Up @@ -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>
Expand Down
45 changes: 45 additions & 0 deletions src/components/BlockRaw/BlockRaw.tsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions src/components/BlockRaw/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import BlockRaw from "./BlockRaw";
export default BlockRaw;
14 changes: 11 additions & 3 deletions src/components/BlockView/BlockView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -100,7 +108,7 @@ function BlockView(props: any) {
</Table>

<TxList transactions={transactions} />
</div>
</ div >
);
}

Expand Down
70 changes: 70 additions & 0 deletions src/components/TxRaw/TxRaw.tsx
Original file line number Diff line number Diff line change
@@ -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;
34 changes: 19 additions & 15 deletions src/components/TxView/TxView.tsx
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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;
17 changes: 17 additions & 0 deletions src/containers/BlockRawContainer.tsx
Original file line number Diff line number Diff line change
@@ -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} />);
}
28 changes: 28 additions & 0 deletions src/containers/TransactionRawContainer.tsx
Original file line number Diff line number Diff line change
@@ -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} />);
}

0 comments on commit c64ec50

Please sign in to comment.