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,8 +1,8 @@
 import React, { useState } from 'react';
 
 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 AccountsPage from './page/Accounts';
 import StorageTombstonesPage from './page/StorageTombstonesPage';
@@ -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>
@@ -49,12 +49,12 @@ function App() {
                   </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" />
                   </NavLink>
-                                )}
+                ))}
                 <div className="mt-5 border-secondary border-top" />
                 <RemoteSidebar api={api} restHost={host} restPort={port} onApiChange={onApiChange} />
               </Nav>

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);
@@ -18,7 +18,7 @@ export default class ErrorCatcher extends React.Component {
   }
 
   componentDidCatch(error, errorInfo) {
-        this.setState({error: error, errorInfo: errorInfo})
+    this.setState({ error: error, errorInfo: errorInfo });
   }
 
   handleClose(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 }) => {
-    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,10 +7,9 @@ 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 });
@@ -18,24 +17,26 @@ const LookupAccountForm = ({api}) => {
   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 }) => (
   <Row>
@@ -43,7 +44,9 @@ const DetailsForm = ({account}) => (
       <Table size="sm">
         <thead>
           <tr>
-                        <th><strong>Account</strong></th>
+            <th>
+              <strong>Account</strong>
+            </th>
             <th></th>
           </tr>
         </thead>
@@ -62,7 +65,9 @@ const DetailsForm = ({account}) => (
 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,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';
@@ -10,14 +10,14 @@ 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: false });
 
     setState(() => {
-            throw error
+      throw error;
-        })
+    });
-    }
+  };
   return api.lookupStorage(prefix).then(lookupSuccess).catch(lookupFail);
-}
+};
 
 const LookupStorageForm = ({ api }) => {
   const [state, setState] = useState({ data: undefined, loading: false });
@@ -25,12 +25,13 @@ const LookupStorageForm = ({api}) => {
   return (
     <div>
       {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} />}
     </div>
   );
-}
+};
 
 const Details = ({ data }) => (
   <Row>
@@ -38,12 +39,18 @@ const Details = ({data}) => (
       <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>

debug-web-ui/src/components/LookupStorageTombstonesForm.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';
@@ -11,15 +11,15 @@ const search = (prefix, api, setState) => {
 
   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 [state, setState] = useState({ hashes: undefined, loading: false });
@@ -27,12 +27,13 @@ const LookupStorageTombstonesForm = ({api}) => {
   return (
     <div>
       {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} />}
     </div>
   );
-}
+};
 
 const Details = ({ hashes }) => (
   <Row>
@@ -40,12 +41,18 @@ const Details = ({hashes}) => (
       <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>
@@ -53,16 +60,12 @@ const Details = ({hashes}) => (
 );
 
 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

@@ -8,8 +8,8 @@ const RemoteSidebar = ({api, restHost, restPort, onApiChange}) => {
       <RestApiForm host={restHost} port={restPort} onApiChange={onApiChange} />
       <RemoteDBForm api={api} />
     </React.Fragment>
-    )
+  );
-}
+};
 
 const RestApiForm = ({ host, port, onApiChange }) => {
   const [show, setShow] = useState(false);
@@ -19,17 +19,18 @@ const RestApiForm = ({host, port, onApiChange}) => {
     setShow(false);
     let form = e.target;
     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)}>
@@ -41,20 +42,20 @@ const RestApiForm = ({host, port, onApiChange}) => {
       </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,11 +64,11 @@ 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 [host, setHost] = useState('');
@@ -78,20 +79,21 @@ 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)}>
@@ -103,7 +105,7 @@ const RemoteDBForm = ({api}) => {
       </ModalWindow>
     </div>
   );
-}
+};
 
 const Input = ({ label, ...props }) => (
   <Form.Group controlId={label.toLowerCase()}>
@@ -111,22 +113,20 @@ const Input = ({label, ...props}) => (
     <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 }) => (
   <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,9 +1,8 @@
 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) {
@@ -28,13 +27,17 @@ class SearchField extends React.Component {
       <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,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,16 +7,16 @@ 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})
+    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 [state, setState] = useState({ data: undefined, loading: false });
@@ -24,11 +24,15 @@ const StorageTombstonesIntegrityChecks = ({api}) => {
   return (
     <div>
       {state.loading && <Spinner animation="border" />}
-            {!state.loading && <Button size="sm" onClick={() => load(api, setState)}>Integrity Checks</Button>}
+      {!state.loading && (
+        <Button size="sm" onClick={() => load(api, setState)}>
+          Integrity Checks
+        </Button>
+      )}
       {state.data && <DetailsForm data={state.data} />}
     </div>
   );
-}
+};
 
 const DetailsForm = ({ data }) => (
   <Row>
@@ -36,12 +40,16 @@ const DetailsForm = ({data}) => (
       <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>
@@ -51,7 +59,9 @@ const DetailsForm = ({data}) => (
 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,8 +1,8 @@
 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 }) => (
   <Container fluid className="mt-1">
@@ -17,6 +17,6 @@ const AccountsPage = ({api}) => (
       </Col>
     </Row>
   </Container>
-)
+);
 
 export default AccountsPage;

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

@@ -1,7 +1,5 @@
 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 }) => (
@@ -17,6 +15,6 @@ const StoragePage = ({api}) => (
       </Col>
     </Row>
   </Container>
-)
+);
 
 export default StoragePage;

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

@@ -5,7 +5,6 @@ import LookupStorageTombstonesForm from '../components/LookupStorageTombstonesFo
 import StorageTombstonesIntegrityChecks from '../components/StorageTombstonesIntegrityChecks';
 
 const StorageTombstonesPage = ({ api }) => (
-
   <Container fluid className="mt-1">
     <Row>
       <Col>
@@ -21,6 +20,6 @@ const StorageTombstonesPage = ({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>