auto-format code by prettier (similar to gofmt) (#405)

debug-web-ui/README.md

@@ -2,9 +2,9 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Prerequisites
 
-* Node.js v13
+- Node.js v13
 
-* yarn (install with `npm install -g yarn`)
+- yarn (install with `npm install -g yarn`)
 
 ## Quickstart
 
@@ -16,6 +16,9 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 4. Run the web UI: `make run-web-ui`
 
+## Auto-Format code on save:
+
+For Webstorm: https://blog.jetbrains.com/webstorm/2020/02/webstorm-2020-1-eap-5/
 
 ## Available Scripts
 
@@ -44,16 +47,6 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

debug-web-ui/package.json

@@ -5,17 +5,17 @@
   "dependencies": {
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
-    "react": "^16.13.0",
-    "react-bootstrap": "^1.0.0-beta.17",
-    "react-dom": "^16.13.0",
+    "react": "^16.13.1",
+    "react-bootstrap": "^1.0.0",
+    "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^10.0.1",
     "@testing-library/user-event": "^10.0.0",
-    "prettier": "^1.19.1"
+    "prettier": "^2.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -26,6 +26,10 @@
   "eslintConfig": {
     "extends": "react-app"
   },
+  "prettier": {
+    "singleQuote": true,
+    "printWidth": 120
+  },
   "browserslist": {
     "production": [
       ">0.2%",

debug-web-ui/src/App.css

@@ -1,23 +1,23 @@
 body {
-    font-size: 0.8125em;
+  font-size: 0.8125em;
 }
 
 .sidebar a {
-    position: relative;
-    display: block;
+  position: relative;
+  display: block;
 }
 
 .sidebar a .active-pointer {
-    display: none;
+  display: none;
 }
 
 .sidebar a.active .active-pointer {
-    display: inline-block;
-    position: absolute;
-    border-bottom: 10px solid transparent;
-    border-right: 10px solid #45378E;
-    border-top: 10px solid transparent;
-    height: 0;
-    width: 0;
-    right: 0;
-}
+  display: inline-block;
+  position: absolute;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid #45378e;
+  border-top: 10px solid transparent;
+  height: 0;
+  width: 0;
+  right: 0;
+}

debug-web-ui/src/App.js

@@ -1,83 +1,83 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
-import {Col, Container, Nav, Row} from 'react-bootstrap';
-import API from './utils/API.js'
-import ErrorCatcher from './components/ErrorCatcher.js'
-import {BrowserRouter as Router, Link, NavLink, Redirect, Route, Switch} from 'react-router-dom';
+import { Col, Container, Nav, Row } from 'react-bootstrap';
+import API from './utils/API.js';
+import ErrorCatcher from './components/ErrorCatcher.js';
+import { BrowserRouter as Router, Link, NavLink, Redirect, Route, Switch } from 'react-router-dom';
 import AccountsPage from './page/Accounts';
 import StorageTombstonesPage from './page/StorageTombstonesPage';
-import {ReactComponent as Logo} from './logo.svg';
+import { ReactComponent as Logo } from './logo.svg';
 import './App.css';
 import StoragePage from './page/Storage';
 import RemoteSidebar from './components/RemoteSidebar';
 
 const sidebar = [
-    {
-        url: '/accounts',
-        label: 'Accounts',
-    },
-    {
-        url: '/storage',
-        label: 'Storage',
-    },
-    {
-        url: '/storage-tombstones',
-        label: 'Storage Tombs',
-    },
+  {
+    url: '/accounts',
+    label: 'Accounts',
+  },
+  {
+    url: '/storage',
+    label: 'Storage',
+  },
+  {
+    url: '/storage-tombstones',
+    label: 'Storage Tombs',
+  },
 ];
 
 function App() {
-    const [host, setHost] = useState('localhost');
-    const [port, setPort] = useState('8080');
-    const onApiChange = (data) => {
-        setHost(data.host)
-        setPort(data.port)
-    }
+  const [host, setHost] = useState('localhost');
+  const [port, setPort] = useState('8080');
+  const onApiChange = (data) => {
+    setHost(data.host);
+    setPort(data.port);
+  };
 
-    const api = new API('http://' + host + ':' + port)
+  const api = new API('http://' + host + ':' + port);
 
-    return (
-        <ErrorCatcher>
-            <Router>
-                <Container fluid>
-                    <Row>
-                        <Col className="border-right p-0 sidebar min-vh-100" xs={3} md={2} lg={1}>
-                            <Nav className="flex-column sticky-top">
-                                <div className="mb-2 pb-1 border-bottom">
-                                    <Link to="/">
-                                        <Logo alt="Logo" sidth="120" height="120" className="d-block w-100"/>
-                                    </Link>
-                                    <div className="d-flex justify-content-center h4">Scope</div>
-                                </div>
-                                {sidebar.map((el, i) =>
-                                    <NavLink key={i} to={el.url}
-                                             className="pl-2 mb-2 font-weight-light">{el.label}
-                                        <div className="active-pointer"/>
-                                    </NavLink>
-                                )}
-                                <div className="mt-5 border-secondary border-top"/>
-                                <RemoteSidebar api={api} restHost={host} restPort={port} onApiChange={onApiChange}/>
-                            </Nav>
-                        </Col>
-                        <Col xs={9} md={10} lg={11}>
-                            <Switch>
-                                <Redirect exact strict from="/" to="/accounts"/>
-                                <Route exact path="/accounts">
-                                    <AccountsPage api={api}/>
-                                </Route>
-                                <Route path="/storage">
-                                    <StoragePage api={api}/>
-                                </Route>
-                                <Route path="/storage-tombstones">
-                                    <StorageTombstonesPage api={api}/>
-                                </Route>
-                            </Switch>
-                        </Col>
-                    </Row>
-                </Container>
-            </Router>
-        </ErrorCatcher>
-    );
+  return (
+    <ErrorCatcher>
+      <Router>
+        <Container fluid>
+          <Row>
+            <Col className="border-right p-0 sidebar min-vh-100" xs={3} md={2} lg={1}>
+              <Nav className="flex-column sticky-top">
+                <div className="mb-2 pb-1 border-bottom">
+                  <Link to="/">
+                    <Logo alt="Logo" sidth="120" height="120" className="d-block w-100" />
+                  </Link>
+                  <div className="d-flex justify-content-center h4">Scope</div>
+                </div>
+                {sidebar.map((el, i) => (
+                  <NavLink key={i} to={el.url} className="pl-2 mb-2 font-weight-light">
+                    {el.label}
+                    <div className="active-pointer" />
+                  </NavLink>
+                ))}
+                <div className="mt-5 border-secondary border-top" />
+                <RemoteSidebar api={api} restHost={host} restPort={port} onApiChange={onApiChange} />
+              </Nav>
+            </Col>
+            <Col xs={9} md={10} lg={11}>
+              <Switch>
+                <Redirect exact strict from="/" to="/accounts" />
+                <Route exact path="/accounts">
+                  <AccountsPage api={api} />
+                </Route>
+                <Route path="/storage">
+                  <StoragePage api={api} />
+                </Route>
+                <Route path="/storage-tombstones">
+                  <StorageTombstonesPage api={api} />
+                </Route>
+              </Switch>
+            </Col>
+          </Row>
+        </Container>
+      </Router>
+    </ErrorCatcher>
+  );
 }
 
 export default App;

debug-web-ui/src/components/ErrorCatcher.js

@@ -1,62 +1,66 @@
-import React from 'react'
+import React from 'react';
 
-import Modal from 'react-bootstrap/Modal'
-import Button from 'react-bootstrap/Button'
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
 
 export default class ErrorCatcher extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {error: undefined, errorInfo: undefined}
+  constructor(props) {
+    super(props);
+    this.state = { error: undefined, errorInfo: undefined };
 
-        this.handleClose = this.handleClose.bind(this);
-        this.handleReload = this.handleReload.bind(this);
-    }
+    this.handleClose = this.handleClose.bind(this);
+    this.handleReload = this.handleReload.bind(this);
+  }
 
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return {error: error};
-    }
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { error: error };
+  }
 
-    componentDidCatch(error, errorInfo) {
-        this.setState({error: error, errorInfo: errorInfo})
-    }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ error: error, errorInfo: errorInfo });
+  }
 
-    handleClose(event) {
-        this.setState({error: undefined});
-    }
+  handleClose(event) {
+    this.setState({ error: undefined });
+  }
 
-    handleReload(event) {
-        // force reload
-        window.location.reload();
-    }
+  handleReload(event) {
+    // force reload
+    window.location.reload();
+  }
 
-    render() {
-        let err = this.state.error;
-        let show = err !== undefined;
-        let info = this.state.errorInfo !== undefined ? this.state.errorInfo.componentStack : '';
-        let details = process.env.NODE_ENV === 'development' ? info : '';
+  render() {
+    let err = this.state.error;
+    let show = err !== undefined;
+    let info = this.state.errorInfo !== undefined ? this.state.errorInfo.componentStack : '';
+    let details = process.env.NODE_ENV === 'development' ? info : '';
 
-        let serverErrors = err !== undefined && err.response !== undefined && Array.isArray(err.response.data) ? err.response.data : [];
+    let serverErrors =
+      err !== undefined && err.response !== undefined && Array.isArray(err.response.data) ? err.response.data : [];
 
-        return (
-            <div className={this.props.className}>
-                {this.props.children}
-                <Modal show={show} onHide={this.handleClose} size="xl">
-                    <Modal.Header>
-                        <Modal.Title>Unexpected Error</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        <code>Server Error: {serverErrors.join("<br/>")}</code>
-                        <code>{this.state.error && this.state.error.message}</code>
-                        <pre>{details}</pre>
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <Button variant="secondary" onClick={this.handleClose}>Ignore</Button>
-                        <Button variant="primary" onClick={this.handleReload}>Reload</Button>
-                    </Modal.Footer>
-                </Modal>
-            </div>
-        );
-    }
-
-}
+    return (
+      <div className={this.props.className}>
+        {this.props.children}
+        <Modal show={show} onHide={this.handleClose} size="xl">
+          <Modal.Header>
+            <Modal.Title>Unexpected Error</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <code>Server Error: {serverErrors.join('<br/>')}</code>
+            <code>{this.state.error && this.state.error.message}</code>
+            <pre>{details}</pre>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={this.handleClose}>
+              Ignore
+            </Button>
+            <Button variant="primary" onClick={this.handleReload}>
+              Reload
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}

debug-web-ui/src/components/ErrorForm.js

@@ -1,9 +1,7 @@
 import React from 'react';
 
-const ErrorForm = ({message}) => {
-    return (
-        <code>{message}</code>
-    );
-}
+const ErrorForm = ({ message }) => {
+  return <code>{message}</code>;
+};
 
-export default ErrorForm;
+export default ErrorForm;

debug-web-ui/src/components/LookupAccountForm.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -7,63 +7,68 @@ import { Table } from 'react-bootstrap';
 import ErrorForm from './ErrorForm.js';
 import SearchField from './SearchField.js';
 
-
 const loadAccount = (id, api) => {
-    return api.lookupAccount(id)
-}
+  return api.lookupAccount(id);
+};
 
-const LookupAccountForm = ({api}) => {
-    const [state, setState] = useState({account: undefined, error: undefined, loading: false});
+const LookupAccountForm = ({ api }) => {
+  const [state, setState] = useState({ account: undefined, error: undefined, loading: false });
 
-    const lookupSuccess = (response) => setState({account: response.data, error: undefined});
-    const lookupFail = (error) => {
-        if (error && error.response && error.response.status === 404) {
-            setState({account: undefined, error: error})
-        } else {
-            setState(() => { throw error })
-        }
+  const lookupSuccess = (response) => setState({ account: response.data, error: undefined });
+  const lookupFail = (error) => {
+    if (error && error.response && error.response.status === 404) {
+      setState({ account: undefined, error: error });
+    } else {
+      setState(() => {
+        throw error;
+      });
     }
+  };
 
-    return (
-        <div>
-            <SearchField placeholder="lookup by id or hash"
-                         onClick={(id) => loadAccount(id, api)
-                                            .then(lookupSuccess)
-                                            .catch(lookupFail)} />
-            <hr />
-            {state.account && <DetailsForm account={state.account} />}
-            {state.error && <ErrorForm message={"Account not found"} />}
-        </div>
-    );
-}
+  return (
+    <div>
+      <SearchField
+        placeholder="lookup by id or hash"
+        onClick={(id) => loadAccount(id, api).then(lookupSuccess).catch(lookupFail)}
+      />
+      <hr />
+      {state.account && <DetailsForm account={state.account} />}
+      {state.error && <ErrorForm message={'Account not found'} />}
+    </div>
+  );
+};
 
-const DetailsForm = ({account}) => (
-    <Row>
-        <Col>
-            <Table size="sm">
-                <thead>
-                    <tr>
-                        <th><strong>Account</strong></th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <TableRow name="balance" value={account.balance} />
-                    <TableRow name="nonce" value={account.nonce} />
-                    <TableRow name="code hash" value={account.code_hash} />
-                    <TableRow name="storage hash" value={account.root_hash} />
-                    <TableRow name="incarnation (turbo-geth)" value={account.implementation.incarnation} />
-                </tbody>
-            </Table>
-        </Col>
-    </Row>
+const DetailsForm = ({ account }) => (
+  <Row>
+    <Col>
+      <Table size="sm">
+        <thead>
+          <tr>
+            <th>
+              <strong>Account</strong>
+            </th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <TableRow name="balance" value={account.balance} />
+          <TableRow name="nonce" value={account.nonce} />
+          <TableRow name="code hash" value={account.code_hash} />
+          <TableRow name="storage hash" value={account.root_hash} />
+          <TableRow name="incarnation (turbo-geth)" value={account.implementation.incarnation} />
+        </tbody>
+      </Table>
+    </Col>
+  </Row>
 );
 
-const TableRow = ({name, value}) => (
-    <tr>
-        <td>{name}</td>
-        <td><code>{value}</code></td>
-    </tr>
+const TableRow = ({ name, value }) => (
+  <tr>
+    <td>{name}</td>
+    <td>
+      <code>{value}</code>
+    </td>
+  </tr>
 );
 
-export default LookupAccountForm;
+export default LookupAccountForm;

debug-web-ui/src/components/LookupStorageForm.js

@@ -1,60 +1,67 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react';
 
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import {Spinner, Table} from 'react-bootstrap';
+import { Spinner, Table } from 'react-bootstrap';
 
 import SearchField from './SearchField.js';
 
 const search = (prefix, api, setState) => {
-    setState({data: undefined, loading: true});
-    const lookupSuccess = (response) => setState({data: response.data, loading: false});
-    const lookupFail = (error) => {
-        setState({data: undefined, loading: false})
+  setState({ data: undefined, loading: true });
+  const lookupSuccess = (response) => setState({ data: response.data, loading: false });
+  const lookupFail = (error) => {
+    setState({ data: undefined, loading: false });
 
-        setState(() => {
-            throw error
-        })
-    }
-    return api.lookupStorage(prefix).then(lookupSuccess).catch(lookupFail);
-}
+    setState(() => {
+      throw error;
+    });
+  };
+  return api.lookupStorage(prefix).then(lookupSuccess).catch(lookupFail);
+};
 
-const LookupStorageForm = ({api}) => {
-    const [state, setState] = useState({data: undefined, loading: false});
+const LookupStorageForm = ({ api }) => {
+  const [state, setState] = useState({ data: undefined, loading: false });
 
-    return (
-        <div>
-            {state.loading && <Spinner animation="border"/>}
-            {!state.loading &&
-            <SearchField placeholder="lookup by prefix" onClick={(prefix) => search(prefix, api, setState)}/>}
-            {state.data && <Details data={state.data}/>}
-        </div>
-    );
-}
+  return (
+    <div>
+      {state.loading && <Spinner animation="border" />}
+      {!state.loading && (
+        <SearchField placeholder="lookup by prefix" onClick={(prefix) => search(prefix, api, setState)} />
+      )}
+      {state.data && <Details data={state.data} />}
+    </div>
+  );
+};
 
-const Details = ({data}) => (
-    <Row>
-        <Col>
-            <Table size="sm" borderless>
-                <thead>
-                <tr>
-                    <th><strong>Key</strong></th>
-                    <th><strong>Value</strong></th>
-                </tr>
-                </thead>
-                <tbody>
-                {data.map((item, i) => <TableRow key={i} item={item}/>)}
-                </tbody>
-            </Table>
-        </Col>
-    </Row>
+const Details = ({ data }) => (
+  <Row>
+    <Col>
+      <Table size="sm" borderless>
+        <thead>
+          <tr>
+            <th>
+              <strong>Key</strong>
+            </th>
+            <th>
+              <strong>Value</strong>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, i) => (
+            <TableRow key={i} item={item} />
+          ))}
+        </tbody>
+      </Table>
+    </Col>
+  </Row>
 );
 
-const TableRow = ({item}) => (
-    <tr>
-        <td className="text-monospace">{item.prefix}</td>
-        <td className="text-monospace">{item.value}</td>
-    </tr>
+const TableRow = ({ item }) => (
+  <tr>
+    <td className="text-monospace">{item.prefix}</td>
+    <td className="text-monospace">{item.value}</td>
+  </tr>
 );
 
-export default LookupStorageForm;
+export default LookupStorageForm;

debug-web-ui/src/components/LookupStorageTombstonesForm.js

@@ -1,70 +1,73 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react';
 
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import {Spinner, Table} from 'react-bootstrap';
+import { Spinner, Table } from 'react-bootstrap';
 
 import SearchField from './SearchField.js';
 
 const search = (prefix, api, setState) => {
-    setState({hashes: undefined, loading: true});
+  setState({ hashes: undefined, loading: true });
 
-    const lookupSuccess = (response) => setState({hashes: response.data, loading: false});
-    const lookupFail = (error) => {
-        setState({hashes: undefined, loading: false})
+  const lookupSuccess = (response) => setState({ hashes: response.data, loading: false });
+  const lookupFail = (error) => {
+    setState({ hashes: undefined, loading: false });
 
-        setState(() => {
-            throw error
-        })
-    }
-    
-    return api.lookupStorageTombstones(prefix).then(lookupSuccess).catch(lookupFail);
-}
+    setState(() => {
+      throw error;
+    });
+  };
 
-const LookupStorageTombstonesForm = ({api}) => {
-    const [state, setState] = useState({hashes: undefined, loading: false});
-
-    return (
-        <div>
-            {state.loading && <Spinner animation="border"/>}
-            {!state.loading && <SearchField placeholder="lookup by prefix"
-                                            onClick={(prefix) => search(prefix, api, setState)}/>}
-            {state.hashes && <Details hashes={state.hashes}/>}
-        </div>
-    );
-}
-
-const Details = ({hashes}) => (
-    <Row>
-        <Col>
-            <Table size="sm" borderless>
-                <thead>
-                <tr>
-                    <th><strong>Prefix</strong></th>
-                    <th><strong>Hide storage</strong></th>
-                </tr>
-                </thead>
-                <tbody>
-                {hashes.map((item, i) => <TableRow key={i} item={item}/>)}
-                </tbody>
-            </Table>
-        </Col>
-    </Row>
-);
-
-const TableRow = ({item}) => {
-    const {prefix,  hideStorage} = item
-
-    return (
-        <tr>
-            <td className="text-monospace">
-                {prefix}
-            </td>
-            <td className={hideStorage ? '' : 'bg-danger'}>
-                {hideStorage ? 'yes' : 'no'}
-            </td>
-        </tr>
-    );
+  return api.lookupStorageTombstones(prefix).then(lookupSuccess).catch(lookupFail);
 };
 
-export default LookupStorageTombstonesForm;
+const LookupStorageTombstonesForm = ({ api }) => {
+  const [state, setState] = useState({ hashes: undefined, loading: false });
+
+  return (
+    <div>
+      {state.loading && <Spinner animation="border" />}
+      {!state.loading && (
+        <SearchField placeholder="lookup by prefix" onClick={(prefix) => search(prefix, api, setState)} />
+      )}
+      {state.hashes && <Details hashes={state.hashes} />}
+    </div>
+  );
+};
+
+const Details = ({ hashes }) => (
+  <Row>
+    <Col>
+      <Table size="sm" borderless>
+        <thead>
+          <tr>
+            <th>
+              <strong>Prefix</strong>
+            </th>
+            <th>
+              <strong>Hide storage</strong>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {hashes.map((item, i) => (
+            <TableRow key={i} item={item} />
+          ))}
+        </tbody>
+      </Table>
+    </Col>
+  </Row>
+);
+
+const TableRow = ({ item }) => {
+  const { prefix, hideStorage } = item;
+
+  return (
+    <tr>
+      <td className="text-monospace">{prefix}</td>
+      <td className={hideStorage ? '' : 'bg-danger'}>{hideStorage ? 'yes' : 'no'}</td>
+    </tr>
+  );
+};
+
+export default LookupStorageTombstonesForm;

debug-web-ui/src/components/RemoteSidebar.js

@@ -1,132 +1,132 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
-import {Button, Form, Modal} from 'react-bootstrap';
+import { Button, Form, Modal } from 'react-bootstrap';
 
-const RemoteSidebar = ({api, restHost, restPort, onApiChange}) => {
-    return (
-        <React.Fragment>
-            <RestApiForm host={restHost} port={restPort} onApiChange={onApiChange}/>
-            <RemoteDBForm api={api}/>
-        </React.Fragment>
-    )
-}
+const RemoteSidebar = ({ api, restHost, restPort, onApiChange }) => {
+  return (
+    <React.Fragment>
+      <RestApiForm host={restHost} port={restPort} onApiChange={onApiChange} />
+      <RemoteDBForm api={api} />
+    </React.Fragment>
+  );
+};
 
-const RestApiForm = ({host, port, onApiChange}) => {
-    const [show, setShow] = useState(false);
+const RestApiForm = ({ host, port, onApiChange }) => {
+  const [show, setShow] = useState(false);
 
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        setShow(false);
-        let form = e.target;
-        onApiChange({host: form.elements.host.value, port: form.elements.port.value});
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setShow(false);
+    let form = e.target;
+    onApiChange({ host: form.elements.host.value, port: form.elements.port.value });
+  };
 
-    const handleClick = (e) => {
-        e.preventDefault();
-        setShow(true)
-    }
+  const handleClick = (e) => {
+    e.preventDefault();
+    setShow(true);
+  };
 
-    return (
-        <div className="mb-2 font-weight-light text-break">
-            <a href="/rest-api" className="nav-link px-2" onClick={handleClick}>
-                Rest API<br/>
-                {host && host + ':' + port}
-            </a>
-            <ModalWindow title="Rest API" show={show} onHide={() => setShow(false)}>
-                <Form onSubmit={handleSubmit}>
-                    <Input label="Host" defaultValue={host}/>
-                    <Input label="Port" defaultValue={port}/>
-                    <Button type="submit">Submit</Button>
-                </Form>
-            </ModalWindow>
-        </div>
-    );
-}
+  return (
+    <div className="mb-2 font-weight-light text-break">
+      <a href="/rest-api" className="nav-link px-2" onClick={handleClick}>
+        Rest API
+        <br />
+        {host && host + ':' + port}
+      </a>
+      <ModalWindow title="Rest API" show={show} onHide={() => setShow(false)}>
+        <Form onSubmit={handleSubmit}>
+          <Input label="Host" defaultValue={host} />
+          <Input label="Port" defaultValue={port} />
+          <Button type="submit">Submit</Button>
+        </Form>
+      </ModalWindow>
+    </div>
+  );
+};
 
 const get = (api, setHost, setPort) => {
-    const lookupSuccess = (response) => {
-        setHost(response.data.host);
-        setPort(response.data.port);
-    }
-    const lookupFail = (error) => {
-        setHost(() => {
-            throw error
-        })
-    }
-    return api.getRemoteDB().then(lookupSuccess).catch(lookupFail);
-}
+  const lookupSuccess = (response) => {
+    setHost(response.data.host);
+    setPort(response.data.port);
+  };
+  const lookupFail = (error) => {
+    setHost(() => {
+      throw error;
+    });
+  };
+  return api.getRemoteDB().then(lookupSuccess).catch(lookupFail);
+};
 
 const set = (host, port, api, setHost, setPort) => {
-    const lookupSuccess = () => {
-        setHost(host);
-        setPort(port);
-    };
-    const lookupFail = (error) => {
-        setHost(() => {
-            throw error
-        })
-    }
-    return api.setRemoteDB(host, port).then(lookupSuccess).catch(lookupFail);
-}
+  const lookupSuccess = () => {
+    setHost(host);
+    setPort(port);
+  };
+  const lookupFail = (error) => {
+    setHost(() => {
+      throw error;
+    });
+  };
+  return api.setRemoteDB(host, port).then(lookupSuccess).catch(lookupFail);
+};
 
-const RemoteDBForm = ({api}) => {
-    const [host, setHost] = useState('');
-    const [port, setPort] = useState('');
-    const [show, setShow] = useState(false);
+const RemoteDBForm = ({ api }) => {
+  const [host, setHost] = useState('');
+  const [port, setPort] = useState('');
+  const [show, setShow] = useState(false);
 
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const form = e.target;
-        set(form.elements.host.value, form.elements.port.value, api, setHost, setPort)
-        setShow(false)
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const form = e.target;
+    set(form.elements.host.value, form.elements.port.value, api, setHost, setPort);
+    setShow(false);
+  };
 
-    const handleClick = (e) => {
-        e.preventDefault();
-        setShow(true)
-        get(api, setHost, setPort)
-    }
+  const handleClick = (e) => {
+    e.preventDefault();
+    setShow(true);
+    get(api, setHost, setPort);
+  };
 
-    return (
-        <div className="pl-2 mb-2 font-weight-light text-break">
-            <a href="/remote-db" onClick={handleClick}>
-                Remote DB<br/>
-                {host && host + ':' + port}
-            </a>
-            <ModalWindow title="Remote DB" show={show} onHide={() => setShow(false)}>
-                <Form onSubmit={handleSubmit}>
-                    <Input label="Host" defaultValue={host}/>
-                    <Input label="Port" defaultValue={port}/>
-                    <Button type="submit">Submit</Button>
-                </Form>
-            </ModalWindow>
-        </div>
-    );
-}
+  return (
+    <div className="pl-2 mb-2 font-weight-light text-break">
+      <a href="/remote-db" onClick={handleClick}>
+        Remote DB
+        <br />
+        {host && host + ':' + port}
+      </a>
+      <ModalWindow title="Remote DB" show={show} onHide={() => setShow(false)}>
+        <Form onSubmit={handleSubmit}>
+          <Input label="Host" defaultValue={host} />
+          <Input label="Port" defaultValue={port} />
+          <Button type="submit">Submit</Button>
+        </Form>
+      </ModalWindow>
+    </div>
+  );
+};
 
-const Input = ({label, ...props}) => (
-    <Form.Group controlId={label.toLowerCase()}>
-        <Form.Label>{label}</Form.Label>
-        <Form.Control
-            type="text"
-            placeholder={label}
-            aria-describedby={"addon" + label.toLowerCase()}
-            name={label.toLowerCase()}
-            {...props}
-        />
-    </Form.Group>
-)
+const Input = ({ label, ...props }) => (
+  <Form.Group controlId={label.toLowerCase()}>
+    <Form.Label>{label}</Form.Label>
+    <Form.Control
+      type="text"
+      placeholder={label}
+      aria-describedby={'addon' + label.toLowerCase()}
+      name={label.toLowerCase()}
+      {...props}
+    />
+  </Form.Group>
+);
 
-const ModalWindow = ({children, title, ...props}) => (
-    <Modal {...props}>
-        <Modal.Header>
-            <Modal.Title>{title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-            {children}
-        </Modal.Body>
-    </Modal>
-)
+const ModalWindow = ({ children, title, ...props }) => (
+  <Modal {...props}>
+    <Modal.Header>
+      <Modal.Title>{title}</Modal.Title>
+    </Modal.Header>
+    <Modal.Body>{children}</Modal.Body>
+  </Modal>
+);
 
 export default RemoteSidebar;

debug-web-ui/src/components/SearchField.js

@@ -1,45 +1,48 @@
 import React from 'react';
 
 import Form from 'react-bootstrap/Form';
-import Col from 'react-bootstrap/Col'
-import Button from 'react-bootstrap/Button'
-
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
 
 class SearchField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {value: ''};
+  constructor(props) {
+    super(props);
+    this.state = { value: '' };
 
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
 
-    handleChange(event) {
-        this.setState({value: event.target.value});
-    }
+  handleChange(event) {
+    this.setState({ value: event.target.value });
+  }
 
-    handleSubmit(event) {
-        this.props.onClick(this.state.value);
-        event.preventDefault();
-    }
+  handleSubmit(event) {
+    this.props.onClick(this.state.value);
+    event.preventDefault();
+  }
 
-    render() {
-        return (
-            <Form onSubmit={this.handleSubmit}  >
-                <Form.Row>
-                    <Col>
-                        <Form.Control size="sm"
-                                    placeholder={this.props.placeholder}
-                                    value={this.state.value || ''}
-                                    onChange={this.handleChange} />
-                    </Col>
-                    <Col>
-                        <Button variant="primary" type="submit" size="sm">Find</Button>
-                    </Col>
-                </Form.Row>
-            </Form>
-        );
-    }
+  render() {
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        <Form.Row>
+          <Col>
+            <Form.Control
+              size="sm"
+              placeholder={this.props.placeholder}
+              value={this.state.value || ''}
+              onChange={this.handleChange}
+            />
+          </Col>
+          <Col>
+            <Button variant="primary" type="submit" size="sm">
+              Find
+            </Button>
+          </Col>
+        </Form.Row>
+      </Form>
+    );
+  }
 }
 
-export default SearchField;
+export default SearchField;

debug-web-ui/src/components/StorageTombstonesIntegrityChecks.js

@@ -1,58 +1,68 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react';
 
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import {Button, Spinner, Table} from 'react-bootstrap';
+import { Button, Spinner, Table } from 'react-bootstrap';
 
 const load = (api, setState) => {
-    const lookupSuccess = (response) => setState({data: response.data, loading: false});
-    const lookupFail = (error) => {
-        setState({data: undefined, loading: false})
+  const lookupSuccess = (response) => setState({ data: response.data, loading: false });
+  const lookupFail = (error) => {
+    setState({ data: undefined, loading: false });
 
-        setState(() => {
-            throw error
-        })
-    }
+    setState(() => {
+      throw error;
+    });
+  };
 
-    setState({data: undefined, loading: true})
-    return api.storageTombstonesIntegrityChecks().then(lookupSuccess).catch(lookupFail);
-}
+  setState({ data: undefined, loading: true });
+  return api.storageTombstonesIntegrityChecks().then(lookupSuccess).catch(lookupFail);
+};
 
-const StorageTombstonesIntegrityChecks = ({api}) => {
-    const [state, setState] = useState({data: undefined, loading: false});
+const StorageTombstonesIntegrityChecks = ({ api }) => {
+  const [state, setState] = useState({ data: undefined, loading: false });
 
-    return (
-        <div>
-            {state.loading && <Spinner animation="border"/>}
-            {!state.loading && <Button size="sm" onClick={() => load(api, setState)}>Integrity Checks</Button>}
-            {state.data && <DetailsForm data={state.data}/>}
-        </div>
-    );
-}
+  return (
+    <div>
+      {state.loading && <Spinner animation="border" />}
+      {!state.loading && (
+        <Button size="sm" onClick={() => load(api, setState)}>
+          Integrity Checks
+        </Button>
+      )}
+      {state.data && <DetailsForm data={state.data} />}
+    </div>
+  );
+};
 
-const DetailsForm = ({data}) => (
-    <Row>
-        <Col>
-            <Table size="sm" borderless>
-                <thead>
-                <tr>
-                    <th><strong>Check</strong></th>
-                    <th>Result</th>
-                </tr>
-                </thead>
-                <tbody>
-                {data.map((el, i) => <TableRow key={i} name={el.name} value={el.value}/>)}
-                </tbody>
-            </Table>
-        </Col>
-    </Row>
+const DetailsForm = ({ data }) => (
+  <Row>
+    <Col>
+      <Table size="sm" borderless>
+        <thead>
+          <tr>
+            <th>
+              <strong>Check</strong>
+            </th>
+            <th>Result</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((el, i) => (
+            <TableRow key={i} name={el.name} value={el.value} />
+          ))}
+        </tbody>
+      </Table>
+    </Col>
+  </Row>
 );
 
-const TableRow = ({name, value}) => (
-    <tr>
-        <td>{name}</td>
-        <td><code>{value}</code></td>
-    </tr>
+const TableRow = ({ name, value }) => (
+  <tr>
+    <td>{name}</td>
+    <td>
+      <code>{value}</code>
+    </td>
+  </tr>
 );
 
-export default StorageTombstonesIntegrityChecks;
+export default StorageTombstonesIntegrityChecks;

debug-web-ui/src/page/Accounts.js

@@ -1,22 +1,22 @@
 import React from 'react';
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
-import Container from "react-bootstrap/Container";
-import LookupAccountForm from "../components/LookupAccountForm";
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import LookupAccountForm from '../components/LookupAccountForm';
 
-const AccountsPage = ({api}) => (
-    <Container fluid className="mt-1">
-        <Row>
-            <Col>
-                <h1>Lookup Accounts</h1>
-            </Col>
-        </Row>
-        <Row>
-            <Col>
-                <LookupAccountForm api={api}/>
-            </Col>
-        </Row>
-    </Container>
-)
+const AccountsPage = ({ api }) => (
+  <Container fluid className="mt-1">
+    <Row>
+      <Col>
+        <h1>Lookup Accounts</h1>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
+        <LookupAccountForm api={api} />
+      </Col>
+    </Row>
+  </Container>
+);
 
-export default  AccountsPage;
+export default AccountsPage;

debug-web-ui/src/page/Storage.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-import Container from 'react-bootstrap/Container';
+import { Col, Container, Row } from 'react-bootstrap';
 import LookupStorageForm from '../components/LookupStorageForm';
 
-const StoragePage = ({api}) => (
-    <Container fluid className="mt-1">
-        <Row>
-            <Col>
-                <h1>Storage</h1>
-            </Col>
-        </Row>
-        <Row>
-            <Col>
-                <LookupStorageForm api={api}/>
-            </Col>
-        </Row>
-    </Container>
-)
+const StoragePage = ({ api }) => (
+  <Container fluid className="mt-1">
+    <Row>
+      <Col>
+        <h1>Storage</h1>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
+        <LookupStorageForm api={api} />
+      </Col>
+    </Row>
+  </Container>
+);
 
-export default StoragePage;
+export default StoragePage;

debug-web-ui/src/page/StorageTombstonesPage.js

@@ -1,26 +1,25 @@
 import React from 'react';
 
-import {Col, Container, Row} from 'react-bootstrap';
+import { Col, Container, Row } from 'react-bootstrap';
 import LookupStorageTombstonesForm from '../components/LookupStorageTombstonesForm';
 import StorageTombstonesIntegrityChecks from '../components/StorageTombstonesIntegrityChecks';
 
-const StorageTombstonesPage = ({api}) => (
+const StorageTombstonesPage = ({ api }) => (
+  <Container fluid className="mt-1">
+    <Row>
+      <Col>
+        <h1>Storage Tombstones</h1>
+      </Col>
+    </Row>
+    <Row>
+      <Col xs={10}>
+        <LookupStorageTombstonesForm api={api} />
+      </Col>
+      <Col xs={2}>
+        <StorageTombstonesIntegrityChecks api={api} />
+      </Col>
+    </Row>
+  </Container>
+);
 
-    <Container fluid className="mt-1">
-        <Row>
-            <Col>
-                <h1>Storage Tombstones</h1>
-            </Col>
-        </Row>
-        <Row>
-            <Col xs={10}>
-                <LookupStorageTombstonesForm api={api}/>
-            </Col>
-            <Col xs={2}>
-                <StorageTombstonesIntegrityChecks api={api}/>
-            </Col>
-        </Row>
-    </Container>
-)
-
-export default StorageTombstonesPage;
+export default StorageTombstonesPage;

debug-web-ui/src/serviceWorker.js

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
 export function register(config) {
@@ -57,7 +55,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -93,7 +91,7 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -101,17 +99,14 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -122,15 +117,13 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }

debug-web-ui/src/utils/API.js

@@ -1,63 +1,63 @@
 const axios = require('axios');
 
 export default class API {
-    constructor(baseURL) {
-        this.baseURL = baseURL
-    }
+  constructor(baseURL) {
+    this.baseURL = baseURL;
+  }
 
-    endpoint(name) {
-        return this.baseURL + name
-    }
+  endpoint(name) {
+    return this.baseURL + name;
+  }
 
-    getRemoteDB() {
-        return axios({
-            url: this.endpoint('/api/v1/remote-db/'),
-            method: 'get',
-        })
-    }
+  getRemoteDB() {
+    return axios({
+      url: this.endpoint('/api/v1/remote-db/'),
+      method: 'get',
+    });
+  }
 
-    setRemoteDB(host, port) {
-        return axios({
-            url: this.endpoint('/api/v1/remote-db/'),
-            method: 'post',
-            params: {
-                'host': host,
-                'port': port,
-            }
-        })
-    }
+  setRemoteDB(host, port) {
+    return axios({
+      url: this.endpoint('/api/v1/remote-db/'),
+      method: 'post',
+      params: {
+        host: host,
+        port: port,
+      },
+    });
+  }
 
-    lookupAccount(id) {
-        return axios({
-            url: this.endpoint('/api/v1/accounts/' + id),
-            method: 'get',
-        })
-    }
+  lookupAccount(id) {
+    return axios({
+      url: this.endpoint('/api/v1/accounts/' + id),
+      method: 'get',
+    });
+  }
 
-    lookupStorage(prefix) {
-        return axios({
-            url: this.endpoint('/api/v1/storage/'),
-            method: 'get',
-            params: {
-                'prefix': prefix,
-            }
-        })
-    }
+  lookupStorage(prefix) {
+    return axios({
+      url: this.endpoint('/api/v1/storage/'),
+      method: 'get',
+      params: {
+        prefix: prefix,
+      },
+    });
+  }
 
-    lookupStorageTombstones(prefix) {
-        return axios({
-            url: this.endpoint('/api/v1/storage-tombstones/'),
-            method: 'get',
-            params: {
-                'prefix': prefix,
-            }
-        })
-    }
+  lookupStorageTombstones(prefix) {
+    return axios({
+      url: this.endpoint('/api/v1/storage-tombstones/'),
+      method: 'get',
+      params: {
+        prefix: prefix,
+      },
+    });
+  }
 
-    storageTombstonesIntegrityChecks() {
-        return axios({
-            url: this.endpoint('/api/v1/storage-tombstones/integrity/'),
-            method: 'get',
-        })
-    }
-}
+  storageTombstonesIntegrityChecks() {
+    return axios({
+      url: this.endpoint('/api/v1/storage-tombstones/integrity/'),
+      method: 'get',
+    });
+  }
+}

design/logos/svg/Logo.svg

@@ -1 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><title>logo</title><polygon points="416 617.14 288 672 288 960 512 720 416 617.14" fill="#1ae2e1"/><polygon points="736 480 512 576 608 617.14 736 480" fill="#ffb5d6"/><polygon points="512 720 608 617.14 512 576 416 617.14 512 720" fill="#fbdb88"/><polygon points="608 617.14 736 672 736 960 512 720 608 617.14" fill="#45378e"/><polygon points="288 480 512 576 416 617.14 288 480" fill="#45378e"/><polygon points="512 64 512 320 736 416 512 64" fill="#1ae2e1"/><polygon points="512 64 512 320 288 416 512 64" fill="#ffb5d6"/><polygon points="512 512 512 320 736 416 512 512" fill="#45378e"/><polygon points="512 512 512 320 288 416 512 512" fill="#fbdb88"/><polygon points="512 896 548.95 832 475.05 832 512 896" fill="#fbdb88"/><polygon points="564.98 961 585.95 924.67 544 924.67 564.98 961" fill="#ffb5d6"/><g opacity="0.1"><polygon points="416 617.14 288 960 288 960 512 720 416 617.14"/></g><polygon points="608 617.14 736 960 736 960 512 720 608 617.14" opacity="0.1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+    <title>logo</title>
+    <polygon points="416 617.14 288 672 288 960 512 720 416 617.14" fill="#1ae2e1"/>
+    <polygon points="736 480 512 576 608 617.14 736 480" fill="#ffb5d6"/>
+    <polygon points="512 720 608 617.14 512 576 416 617.14 512 720" fill="#fbdb88"/>
+    <polygon points="608 617.14 736 672 736 960 512 720 608 617.14" fill="#45378e"/>
+    <polygon points="288 480 512 576 416 617.14 288 480" fill="#45378e"/>
+    <polygon points="512 64 512 320 736 416 512 64" fill="#1ae2e1"/>
+    <polygon points="512 64 512 320 288 416 512 64" fill="#ffb5d6"/>
+    <polygon points="512 512 512 320 736 416 512 512" fill="#45378e"/>
+    <polygon points="512 512 512 320 288 416 512 512" fill="#fbdb88"/>
+    <polygon points="512 896 548.95 832 475.05 832 512 896" fill="#fbdb88"/>
+    <polygon points="564.98 961 585.95 924.67 544 924.67 564.98 961" fill="#ffb5d6"/>
+    <g opacity="0.1">
+        <polygon points="416 617.14 288 960 288 960 512 720 416 617.14"/>
+    </g>
+    <polygon points="608 617.14 736 960 736 960 512 720 608 617.14" opacity="0.1"/>
+</svg>