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": "^16.13.1",
-    "react-bootstrap": "^1.0.0-beta.17",
+    "react-bootstrap": "^1.0.0",
-    "react-dom": "^16.13.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

@@ -15,7 +15,7 @@ body {
   display: inline-block;
   position: absolute;
   border-bottom: 10px solid transparent;
-    border-right: 10px solid #45378E;
+  border-right: 10px solid #45378e;
   border-top: 10px solid transparent;
   height: 0;
   width: 0;

debug-web-ui/src/App.js

@@ -1,12 +1,12 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
-import {Col, Container, Nav, Row} from 'react-bootstrap';
+import { Col, Container, Nav, Row } from 'react-bootstrap';
-import API from './utils/API.js'
+import API from './utils/API.js';
-import ErrorCatcher from './components/ErrorCatcher.js'
+import ErrorCatcher from './components/ErrorCatcher.js';
-import {BrowserRouter as Router, Link, NavLink, Redirect, Route, Switch} from 'react-router-dom';
+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';
@@ -30,11 +30,11 @@ function App() {
   const [host, setHost] = useState('localhost');
   const [port, setPort] = useState('8080');
   const onApiChange = (data) => {
-        setHost(data.host)
+    setHost(data.host);
-        setPort(data.port)
+    setPort(data.port);
-    }
+  };
 
-    const api = new API('http://' + host + ':' + port)
+  const api = new API('http://' + host + ':' + port);
 
   return (
     <ErrorCatcher>
@@ -45,31 +45,31 @@ function App() {
               <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"/>
+                    <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) =>
+                {sidebar.map((el, i) => (
-                                    <NavLink key={i} to={el.url}
+                  <NavLink key={i} to={el.url} className="pl-2 mb-2 font-weight-light">
-                                             className="pl-2 mb-2 font-weight-light">{el.label}
+                    {el.label}
-                                        <div className="active-pointer"/>
+                    <div className="active-pointer" />
                   </NavLink>
-                                )}
+                ))}
-                                <div className="mt-5 border-secondary border-top"/>
+                <div className="mt-5 border-secondary border-top" />
-                                <RemoteSidebar api={api} restHost={host} restPort={port} onApiChange={onApiChange}/>
+                <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"/>
+                <Redirect exact strict from="/" to="/accounts" />
                 <Route exact path="/accounts">
-                                    <AccountsPage api={api}/>
+                  <AccountsPage api={api} />
                 </Route>
                 <Route path="/storage">
-                                    <StoragePage api={api}/>
+                  <StoragePage api={api} />
                 </Route>
                 <Route path="/storage-tombstones">
-                                    <StorageTombstonesPage api={api}/>
+                  <StorageTombstonesPage api={api} />
                 </Route>
               </Switch>
             </Col>

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

@@ -1,12 +1,12 @@
-import React from 'react'
+import React from 'react';
 
-import Modal from 'react-bootstrap/Modal'
+import Modal from 'react-bootstrap/Modal';
-import Button from 'react-bootstrap/Button'
+import Button from 'react-bootstrap/Button';
 
 export default class ErrorCatcher extends React.Component {
   constructor(props) {
     super(props);
-        this.state = {error: undefined, errorInfo: undefined}
+    this.state = { error: undefined, errorInfo: undefined };
 
     this.handleClose = this.handleClose.bind(this);
     this.handleReload = this.handleReload.bind(this);
@@ -14,15 +14,15 @@ export default class ErrorCatcher extends React.Component {
 
   static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
-        return {error: error};
+    return { error: error };
   }
 
   componentDidCatch(error, errorInfo) {
-        this.setState({error: error, errorInfo: errorInfo})
+    this.setState({ error: error, errorInfo: errorInfo });
   }
 
   handleClose(event) {
-        this.setState({error: undefined});
+    this.setState({ error: undefined });
   }
 
   handleReload(event) {
@@ -36,7 +36,8 @@ export default class ErrorCatcher extends React.Component {
     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}>
@@ -46,17 +47,20 @@ export default class ErrorCatcher extends React.Component {
             <Modal.Title>Unexpected Error</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-                        <code>Server Error: {serverErrors.join("<br/>")}</code>
+            <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="secondary" onClick={this.handleClose}>
-                        <Button variant="primary" onClick={this.handleReload}>Reload</Button>
+              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}) => {
+const ErrorForm = ({ message }) => {
-    return (
+  return <code>{message}</code>;
-        <code>{message}</code>
+};
-    );
-}
 
 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,43 +7,46 @@ 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 LookupAccountForm = ({ api }) => {
-    const [state, setState] = useState({account: undefined, error: undefined, loading: false});
+  const [state, setState] = useState({ account: undefined, error: undefined, loading: false });
 
-    const lookupSuccess = (response) => setState({account: response.data, error: undefined});
+  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})
+      setState({ account: undefined, error: error });
     } else {
-            setState(() => { throw error })
+      setState(() => {
-        }
+        throw error;
+      });
     }
+  };
 
   return (
     <div>
-            <SearchField placeholder="lookup by id or hash"
+      <SearchField
-                         onClick={(id) => loadAccount(id, api)
+        placeholder="lookup by id or hash"
-                                            .then(lookupSuccess)
+        onClick={(id) => loadAccount(id, api).then(lookupSuccess).catch(lookupFail)}
-                                            .catch(lookupFail)} />
+      />
       <hr />
       {state.account && <DetailsForm account={state.account} />}
-            {state.error && <ErrorForm message={"Account not found"} />}
+      {state.error && <ErrorForm message={'Account not found'} />}
     </div>
   );
-}
+};
 
-const DetailsForm = ({account}) => (
+const DetailsForm = ({ account }) => (
   <Row>
     <Col>
       <Table size="sm">
         <thead>
           <tr>
-                        <th><strong>Account</strong></th>
+            <th>
+              <strong>Account</strong>
+            </th>
             <th></th>
           </tr>
         </thead>
@@ -59,10 +62,12 @@ const DetailsForm = ({account}) => (
   </Row>
 );
 
-const TableRow = ({name, value}) => (
+const TableRow = ({ name, value }) => (
   <tr>
     <td>{name}</td>
-        <td><code>{value}</code></td>
+    <td>
+      <code>{value}</code>
+    </td>
   </tr>
 );
 

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

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

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

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

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

@@ -1,60 +1,61 @@
-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}) => {
+const RemoteSidebar = ({ api, restHost, restPort, onApiChange }) => {
   return (
     <React.Fragment>
-            <RestApiForm host={restHost} port={restPort} onApiChange={onApiChange}/>
+      <RestApiForm host={restHost} port={restPort} onApiChange={onApiChange} />
-            <RemoteDBForm api={api}/>
+      <RemoteDBForm api={api} />
     </React.Fragment>
-    )
+  );
-}
+};
 
-const RestApiForm = ({host, port, onApiChange}) => {
+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});
+    onApiChange({ host: form.elements.host.value, port: form.elements.port.value });
-    }
+  };
 
   const handleClick = (e) => {
     e.preventDefault();
-        setShow(true)
+    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/>
+        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="Host" defaultValue={host} />
-                    <Input label="Port" defaultValue={port}/>
+          <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
+      throw error;
-        })
+    });
-    }
+  };
   return api.getRemoteDB().then(lookupSuccess).catch(lookupFail);
-}
+};
 
 const set = (host, port, api, setHost, setPort) => {
   const lookupSuccess = () => {
@@ -63,13 +64,13 @@ const set = (host, port, api, setHost, setPort) => {
   };
   const lookupFail = (error) => {
     setHost(() => {
-            throw error
+      throw error;
-        })
+    });
-    }
+  };
   return api.setRemoteDB(host, port).then(lookupSuccess).catch(lookupFail);
-}
+};
 
-const RemoteDBForm = ({api}) => {
+const RemoteDBForm = ({ api }) => {
   const [host, setHost] = useState('');
   const [port, setPort] = useState('');
   const [show, setShow] = useState(false);
@@ -78,55 +79,54 @@ const RemoteDBForm = ({api}) => {
     e.preventDefault();
     e.stopPropagation();
     const form = e.target;
-        set(form.elements.host.value, form.elements.port.value, api, setHost, setPort)
+    set(form.elements.host.value, form.elements.port.value, api, setHost, setPort);
-        setShow(false)
+    setShow(false);
-    }
+  };
 
   const handleClick = (e) => {
     e.preventDefault();
-        setShow(true)
+    setShow(true);
-        get(api, setHost, setPort)
+    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/>
+        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="Host" defaultValue={host} />
-                    <Input label="Port" defaultValue={port}/>
+          <Input label="Port" defaultValue={port} />
           <Button type="submit">Submit</Button>
         </Form>
       </ModalWindow>
     </div>
   );
-}
+};
 
-const Input = ({label, ...props}) => (
+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()}
+      aria-describedby={'addon' + label.toLowerCase()}
       name={label.toLowerCase()}
       {...props}
     />
   </Form.Group>
-)
+);
 
-const ModalWindow = ({children, title, ...props}) => (
+const ModalWindow = ({ children, title, ...props }) => (
   <Modal {...props}>
     <Modal.Header>
       <Modal.Title>{title}</Modal.Title>
     </Modal.Header>
-        <Modal.Body>
+    <Modal.Body>{children}</Modal.Body>
-            {children}
-        </Modal.Body>
   </Modal>
-)
+);
 
 export default RemoteSidebar;

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,10 @@
 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>
@@ -14,13 +13,13 @@ const StorageTombstonesPage = ({api}) => (
     </Row>
     <Row>
       <Col xs={10}>
-                <LookupStorageTombstonesForm api={api}/>
+        <LookupStorageTombstonesForm api={api} />
       </Col>
       <Col xs={2}>
-                <StorageTombstonesIntegrityChecks api={api}/>
+        <StorageTombstonesIntegrityChecks api={api} />
       </Col>
     </Row>
   </Container>
-)
+);
 
 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(
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
-      /^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 (
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
-        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(
+      console.log('No internet connection found. App is running in offline mode.');
-        '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

@@ -2,18 +2,18 @@ const axios = require('axios');
 
 export default class API {
   constructor(baseURL) {
-        this.baseURL = baseURL
+    this.baseURL = baseURL;
   }
 
   endpoint(name) {
-        return this.baseURL + name
+    return this.baseURL + name;
   }
 
   getRemoteDB() {
     return axios({
       url: this.endpoint('/api/v1/remote-db/'),
       method: 'get',
-        })
+    });
   }
 
   setRemoteDB(host, port) {
@@ -21,17 +21,17 @@ export default class API {
       url: this.endpoint('/api/v1/remote-db/'),
       method: 'post',
       params: {
-                'host': host,
+        host: host,
-                'port': port,
+        port: port,
-            }
+      },
-        })
+    });
   }
 
   lookupAccount(id) {
     return axios({
       url: this.endpoint('/api/v1/accounts/' + id),
       method: 'get',
-        })
+    });
   }
 
   lookupStorage(prefix) {
@@ -39,9 +39,9 @@ export default class API {
       url: this.endpoint('/api/v1/storage/'),
       method: 'get',
       params: {
-                'prefix': prefix,
+        prefix: prefix,
-            }
+      },
-        })
+    });
   }
 
   lookupStorageTombstones(prefix) {
@@ -49,15 +49,15 @@ export default class API {
       url: this.endpoint('/api/v1/storage-tombstones/'),
       method: 'get',
       params: {
-                'prefix': prefix,
+        prefix: prefix,
-            }
+      },
-        })
+    });
   }
 
   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>