chore: release 0.7.0 (#189 )

* chore: release 0.7.0 * chore: update the changelog Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
chore(deps): update to bee-js 1.2.1 (#197 )
2021-08-31 14:12:36 +02:00 · 2021-08-31 12:44:18 +02:00 · 2021-08-31 11:27:38 +02:00 · 2021-08-30 17:43:49 +02:00 · 2021-08-30 11:17:46 +02:00 · 2021-08-26 12:57:44 +02:00
31 changed files with 11714 additions and 7744 deletions
@@ -1,4 +1,9 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
@@ -42,10 +42,10 @@ jobs:
      - name: Commit linting
        uses: wagoid/commitlint-github-action@v2

-      # - name: Code linting
-      #   run: npm run lint:check
-      #   env:
-      #     CI: true
+      - name: Code linting
+        run: npm run lint:check
+        env:
+          CI: true

      - name: Build
        run: npm run build
@@ -1,5 +1,18 @@
 # Changelog

+## [0.7.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.6.0...v0.7.0) (2021-08-31)
+
+
+### Features
+
+* removed dark theme and theme switching ([#190](https://www.github.com/ethersphere/bee-dashboard/issues/190)) ([d1720e2](https://www.github.com/ethersphere/bee-dashboard/commit/d1720e243c4415d75763a229250fa20e3664290e))
+* separate info and status page ([#183](https://www.github.com/ethersphere/bee-dashboard/issues/183)) ([02a7bff](https://www.github.com/ethersphere/bee-dashboard/commit/02a7bff733b7fac70c6a36f94e6ba1425854a0af))
+* styling of the sidebar ([#194](https://github.com/ethersphere/bee-dashboard/pull/194))
+
+
+### Bug Fixes
+* bee 1.1.0 version reporting workaround ([#197](https://github.com/ethersphere/bee-dashboard/issues/197))
+
 ## [0.6.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.5.0...v0.6.0) (2021-08-24)


@@ -10,6 +10,8 @@

 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**

+This project is intended to be used with **Bee version 1.1.0**. Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+
 ![Status page](/ui_samples/status.png)

 | Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.6.0",
+  "version": "0.7.0",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -24,52 +24,52 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^1.2.0",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@types/react-router": "^5.1.13",
-    "@types/react-router-dom": "^5.1.7",
-    "axios": "^0.21.1",
-    "bignumber.js": "^9.0.1",
-    "feather-icons": "^4.28.0",
-    "formik": "^2.2.8",
-    "formik-material-ui": "^3.0.1",
-    "material-ui-dropzone": "^3.5.0",
-    "notistack": "^1.0.9",
-    "opener": "^1.5.2",
-    "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.2",
-    "react-feather": "^2.0.9",
-    "react-identicons": "^1.2.5",
-    "react-router-dom": "^5.2.0",
-    "react-syntax-highlighter": "^15.4.3",
-    "semver": "^7.3.2",
-    "serve-handler": "^6.1.3"
+    "@ethersphere/bee-js": "1.2.1",
+    "@material-ui/core": "4.12.3",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@types/react-router": "5.1.13",
+    "@types/react-router-dom": "5.1.7",
+    "axios": "0.21.1",
+    "bignumber.js": "9.0.1",
+    "feather-icons": "4.28.0",
+    "formik": "2.2.8",
+    "formik-material-ui": "3.0.1",
+    "material-ui-dropzone": "3.5.0",
+    "notistack": "1.0.9",
+    "opener": "1.5.2",
+    "qrcode.react": "1.0.1",
+    "react": "17.0.2",
+    "react-copy-to-clipboard": "5.0.3",
+    "react-dom": "17.0.2",
+    "react-feather": "2.0.9",
+    "react-identicons": "1.2.5",
+    "react-router-dom": "5.2.0",
+    "react-syntax-highlighter": "15.4.3",
+    "semver": "7.3.2",
+    "serve-handler": "6.1.3"
  },
  "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.5",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.41",
-    "@types/qrcode.react": "^1.0.1",
-    "@types/react": "^17.0.3",
-    "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/semver": "^7.3.6",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "prettier": "^2.2.1",
+    "@testing-library/jest-dom": "5.12.0",
+    "@testing-library/react": "11.2.6",
+    "@testing-library/user-event": "13.1.5",
+    "@types/jest": "26.0.22",
+    "@types/node": "14.14.41",
+    "@types/qrcode.react": "1.0.1",
+    "@types/react": "17.0.3",
+    "@types/react-copy-to-clipboard": "5.0.0",
+    "@types/react-dom": "17.0.3",
+    "@types/react-syntax-highlighter": "13.5.0",
+    "@types/semver": "7.3.6",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-jest": "24.4.0",
+    "eslint-plugin-prettier": "3.4.1",
+    "eslint-plugin-react": "7.24.0",
+    "prettier": "2.3.2",
    "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
+    "typescript": "4.2.4",
+    "web-vitals": "1.1.1"
  },
  "scripts": {
    "prepare": "npm run build",
@@ -10,6 +10,6 @@ declare module 'react-identicons' {
    getColor?: () => string
  }

-  const Identicon = (props: Props): JSXElementConstructor => ReactNode
+  const Identicon = (props: Props): JSXElementConstructor => ReactNode //eslint-disable-line @typescript-eslint/no-unused-vars
  export default Identicon
 }
@@ -1,54 +1,35 @@
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement } from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import './App.css'

-import { ThemeProvider } from '@material-ui/styles'
+import { ThemeProvider } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { SnackbarProvider } from 'notistack'

-import BaseRouter from './routes/routes'
-import { lightTheme, darkTheme } from './theme'
+import BaseRouter from './routes'
+import Dashboard from './layout/Dashboard'
+import { theme } from './theme'
 import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as BeeProvider } from './providers/Bee'
 import { Provider as SettingsProvider } from './providers/Settings'

-const App = (): ReactElement => {
-  const [themeMode, toggleThemeMode] = useState('light')
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
-
-  return (
+const App = (): ReactElement => (
  <div className="App">
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
+    <ThemeProvider theme={theme}>
      <SettingsProvider>
        <BeeProvider>
          <StampsProvider>
            <PlatformProvider>
              <SnackbarProvider>
+                <Router>
                  <>
                    <CssBaseline />
-                    <Router>
+                    <Dashboard>
                      <BaseRouter />
-                    </Router>
+                    </Dashboard>
                  </>
+                </Router>
              </SnackbarProvider>
            </PlatformProvider>
          </StampsProvider>
@@ -56,7 +37,6 @@ const App = (): ReactElement => {
      </SettingsProvider>
    </ThemeProvider>
  </div>
-  )
-}
+)

 export default App
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="172" height="30" viewBox="0 0 172 30">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <path d="M0 0H172V30H0z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+                <path fill="#F9F9F9" fill-rule="nonzero" d="M94.26 21.338c1.242 0 2.168-.427 2.779-1.28.61-.853.916-2.118.916-3.796 0-1.677-.306-2.942-.916-3.795-.611-.854-1.537-1.28-2.778-1.28h-2.836v10.15h2.836zm-.057-1.062h-1.556V12.25h1.556c.814 0 1.427.28 1.84.843.411.562.617 1.357.617 2.385v1.57c0 1.028-.206 1.823-.618 2.386-.412.562-1.025.843-1.84.843zm6.767 1.062l.858-2.894h3.563l.858 2.894h1.294l-3.112-10.151h-1.614l-3.112 10.15h1.265zm4.13-3.956h-2.981l1.425-4.9h.131l1.425 4.9zm7.698 4.13c1.135 0 2.01-.266 2.625-.8.616-.533.924-1.27.924-2.21 0-.33-.044-.645-.131-.945-.087-.3-.235-.572-.444-.815-.208-.242-.482-.45-.821-.625-.34-.175-.757-.305-1.251-.393l-1.09-.189c-.718-.126-1.215-.332-1.491-.618-.277-.286-.415-.657-.415-1.112 0-.582.184-1.018.553-1.31.368-.29.897-.436 1.585-.436.63 0 1.144.117 1.541.35.398.232.737.533 1.018.901l.858-.742c-.339-.494-.787-.877-1.345-1.148-.557-.272-1.243-.408-2.058-.408-1.037 0-1.861.238-2.472.713-.61.475-.916 1.178-.916 2.109 0 .32.044.627.13.923.088.296.234.567.437.815.204.247.473.458.807.632.335.175.75.306 1.244.393l1.134.189c.698.116 1.188.313 1.469.589.281.276.422.662.422 1.156 0 .61-.194 1.086-.582 1.425-.388.34-.95.51-1.687.51-.61 0-1.137-.122-1.578-.364-.441-.243-.86-.611-1.258-1.106l-.887.728c.378.523.858.952 1.44 1.287.581.334 1.328.501 2.24.501zm7.262-.174v-4.61h3.956v4.61h1.221V11.187h-1.221v4.48h-3.956v-4.48h-1.222v10.15h1.222zm11.988 0c.388 0 .75-.075 1.084-.226.334-.15.625-.356.872-.618.248-.261.439-.572.575-.93.135-.36.203-.742.203-1.15 0-.707-.184-1.248-.552-1.62-.369-.374-.839-.629-1.411-.764v-.044c.465-.145.846-.393 1.142-.742.295-.349.443-.829.443-1.44 0-.794-.247-1.43-.741-1.904-.495-.476-1.178-.713-2.051-.713h-3.447v10.15h3.883zm-.567-5.745h-2.094V12.25h2.094c.514 0 .916.116 1.207.349.291.232.436.581.436 1.047v.567c0 .465-.145.812-.436 1.04-.29.227-.693.341-1.207.341zm.204 4.683h-2.298v-3.68h2.298c.562 0 1.003.13 1.323.386.32.257.48.643.48 1.156v.597c0 .523-.16.911-.48 1.163-.32.252-.761.378-1.323.378zm8.774 1.236c.62 0 1.154-.118 1.6-.356.446-.237.814-.58 1.105-1.025.29-.446.504-.994.64-1.644.136-.65.203-1.39.203-2.225 0-.824-.067-1.563-.203-2.217-.136-.655-.35-1.205-.64-1.651-.29-.446-.66-.788-1.105-1.025-.446-.238-.98-.357-1.6-.357-.62 0-1.154.12-1.6.357-.446.237-.814.579-1.105 1.025-.29.446-.504.996-.64 1.65-.136.655-.204 1.394-.204 2.218 0 .834.068 1.576.204 2.225.136.65.35 1.198.64 1.644.29.446.66.788 1.105 1.025.446.238.98.356 1.6.356zm0-1.061c-.407 0-.751-.08-1.033-.24-.28-.16-.513-.386-.698-.676-.184-.291-.317-.643-.4-1.055-.082-.412-.123-.875-.123-1.389v-1.658c0-.504.041-.964.123-1.381.083-.417.216-.77.4-1.062.185-.29.417-.516.698-.676.282-.16.626-.24 1.033-.24.407 0 .751.08 1.032.24.282.16.514.385.699.676.184.291.317.645.4 1.062.082.417.123.877.123 1.381v1.658c0 .514-.041.977-.124 1.39-.082.411-.215.763-.4 1.054-.184.29-.416.516-.698.676-.28.16-.625.24-1.032.24zm6.564.887l.858-2.894h3.563l.858 2.894h1.294l-3.112-10.151h-1.614l-3.113 10.15h1.266zm4.13-3.956h-2.981l1.425-4.9h.13l1.426 4.9zm5.895 3.956v-4.334h1.614l2.472 4.334h1.367l-2.588-4.392c.814-.078 1.434-.364 1.861-.858.427-.495.64-1.154.64-1.978 0-.921-.247-1.638-.742-2.152-.494-.514-1.212-.771-2.152-.771h-3.694v10.15h1.222zm2.443-5.366h-2.443v-3.723h2.443c.514 0 .914.128 1.2.385.286.257.429.623.429 1.098v.756c0 .475-.143.841-.43 1.098-.285.257-.685.386-1.2.386zm8.454 5.366c1.241 0 2.167-.427 2.778-1.28.61-.853.916-2.118.916-3.796 0-1.677-.305-2.942-.916-3.795-.611-.854-1.537-1.28-2.778-1.28h-2.836v10.15h2.836zm-.058-1.062h-1.556V12.25h1.556c.814 0 1.428.28 1.84.843.412.562.618 1.357.618 2.385v1.57c0 1.028-.206 1.823-.618 2.386-.412.562-1.026.843-1.84.843z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+                <path fill="#F9F9F9" d="M5.064 14.685l4.822 2.709v5.4L5.064 25.5l-4.82-2.706v-5.4l4.82-2.71zm11.034 0l4.822 2.709v5.4L16.098 25.5l-4.82-2.706v-5.4l4.82-2.71zm42.17-3.332v7.644l1.655 1.432.017-.014-1.187 1.327h-.019l-2.097-1.815-2.505 1.465c-.41.237-.876.362-1.35.357-.709-.005-1.392-.277-1.91-.762-.539-.503-.838-1.213-.824-1.95-.002-.974.52-1.874 1.367-2.356l5.05-2.895v-.644H50.55v-1.79h7.719zm-29.357.085c.802-.392 1.705-.529 2.588-.392.845.17 1.627.57 2.258 1.159.166.145.443.417.632.606l.122.121.08.08-1.178 1.336c.014-.017-.801-.773-.883-.841-.389-.367-.863-.627-1.383-.754-.539-.12-1.104-.022-1.573.27-.323.195-.508.552-.484.928.006.372.213.71.54.885.547.291 1.136.49 1.747.586.387.075.766.172 1.102.261.335.088.662.21.974.359.314.11.602.285.844.515.233.194.416.438.537.715.152.298.232.626.236.96.034.957-.403 1.87-1.17 2.444-.81.602-1.8.911-2.809.876-.379.002-.76-.036-1.131-.114-1.007-.247-1.925-.768-2.652-1.506-.05-.043-.608-.566-.608-.566l1.145-1.378c.246.23.486.462.741.677.313.303.655.574 1.02.813.913.518 2.035.518 2.948 0 .375-.227.596-.638.58-1.074.008-.364-.223-.687-.569-.799-.634-.27-1.298-.47-1.979-.59-.864-.152-1.684-.485-2.408-.978-.602-.433-.895-1.095-.895-2.025-.018-.85.365-1.657 1.03-2.183.186-.152.386-.282.598-.39zm17.705-.135c0-.022.006.006.006.006h1.922l-1.606 10.212h-3.152l-1.15-8.808h-.024l-1.164 8.804H38.3l-1.573-10.214h1.926l1.267 8.822h.024l1.114-8.822h3.157l1.109 8.822h.025zm33.488-.29c.703-.039 1.386.244 1.858.765.435.557.655 1.252.618 1.958v7.76h-1.89V14.08c-.014-.314-.113-.621-.288-.886-.212-.26-.54-.396-.873-.359-.362-.011-.708.145-.936.427-.272.41-.4.9-.357 1.391v6.854h-1.88v-7.337c.018-.353-.097-.7-.317-.976-.206-.241-.508-.373-.824-.359-.376-.022-.74.145-.966.448-.253.366-.379.808-.358 1.252v6.978h-1.876v-10.21h1.876v.946c.153-.354.401-.657.715-.877.38-.245.821-.37 1.272-.358.465-.02.923.124 1.296.404.304.244.535.57.664.937.424-.855 1.312-1.381 2.266-1.341zm-13.503-.011c.899-.011 1.763.349 2.387.996.66.62 1.031 1.488 1.023 2.393v.588h-1.764v-.588c0-.05-.003-.099-.008-.146-.08-.877-.859-1.519-1.735-1.436-.832.111-1.449.829-1.431 1.668v5.205h2.574v1.764H61.56v-1.764h1.687v-5.62l-1.697-1.538 1.178-1.315 1.195 1.096c.626-.846 1.625-1.332 2.677-1.303zm-10.136 4.89L52.32 18.27c-.288.158-.465.46-.46.789.01.496.41.894.905.905.166-.003.328-.052.468-.143h-.022l3.254-1.89v-2.04zM10.544 5.254l1.847 1.102v3.181l.634.354 2.347 1.318v2.15l-4.82 2.707-4.82-2.706v-5.4l4.812-2.706zm5.638-.755l2.568 1.44v2.886l-2.548 1.428-.02-.011-2.553-1.43V5.951l.005-.021L16.182 4.5z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -1,101 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 230.07104 58.680001"
-   version="1.1"
-   id="svg28566"
-   sodipodi:docname="swarm-logo.svg"
-   inkscape:version="1.0.1 (3bc2e81, 2020-09-07)"
-   width="230.07104"
-   height="58.68">
-  <metadata
-     id="metadata28570">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     id="namedview28568"
-     showgrid="false"
-     inkscape:zoom="3.1325"
-     inkscape:cx="123.33"
-     inkscape:cy="35.939998"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_2"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <defs
-     id="defs28540">
-    <style
-       id="style28538">.cls-1{fill:#fafafa;}.cls-2{fill:#242424;}</style>
-  </defs>
-  <title
-     id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
-  <g
-     id="Layer_2"
-     data-name="Layer 2"
-     transform="translate(-76.67,-71.05)">
-    <path
-       class="cls-2"
-       d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z"
-       id="path28546" />
-    <path
-       class="cls-2"
-       d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z"
-       id="path28548" />
-    <path
-       class="cls-2"
-       d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z"
-       id="path28550" />
-    <path
-       class="cls-2"
-       d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z"
-       id="path28552" />
-    <path
-       class="cls-2"
-       d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z"
-       id="path28554" />
-    <polygon
-       class="cls-2"
-       points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 "
-       id="polygon28556" />
-    <polygon
-       class="cls-2"
-       points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 "
-       id="polygon28558" />
-    <polygon
-       class="cls-2"
-       points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 "
-       id="polygon28560" />
-    <polygon
-       class="cls-2"
-       points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 "
-       id="polygon28562" />
-  </g>
-</svg>
@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 468 142" xml:space="preserve"><style>.st1,.st2,.st3,.st4{opacity:.45;enable-background:new}.st2,.st3,.st4{opacity:.6}.st3,.st4{opacity:.3}.st4{opacity:.8}</style><g id="XMLID_41_"><g id="XMLID_1_"><g id="Swarm_typeface"><g id="XMLID_42_" opacity=".8"><path id="XMLID_31_" d="M193.7 90c0 9.1-9.5 13.4-17.4 13.4-8.5 0-17.8-3.3-17.8-13.2 0-1.7.1-3 2.2-3 1 0 1.4 1.3 1.4 2.1 0 8.5 6.8 10.6 14.2 10.6 5.8 0 13.8-2.8 13.8-9.8 0-13-31-5.3-31-20.3 0-8.6 9.6-10.8 16.5-10.8 8.1 0 17.1 3 17.1 12.6 0 1-1 1.7-1.9 1.7-1.1 0-1.7-1-1.7-1.9-.3-2.1-.6-3.5-2.1-5.2-2.6-3-7.7-3.6-11.5-3.6-4.5 0-12.9 1-12.9 7.1.1 10.9 31.1 3.5 31.1 20.3z"/><path id="XMLID_30_" d="M264.4 60.9c0 .8-13.2 37.6-14.5 40.9-.3 1-1 1.1-1.9 1.1-.9 0-1.6-.1-1.9-1.1l-12.9-36-12.9 36c-.3 1-1 1.1-1.9 1.1-.9 0-1.7-.1-1.9-1.1-1.3-3.3-14.5-40.1-14.5-40.9 0-1 .8-1.8 1.8-1.8.8 0 1.4.4 1.7 1.1l13 36.4 13-36.4c.3-.9 1-1.1 1.8-1.1.9 0 1.6.3 1.9 1.1l12.9 36.4 13-36.4c.3-.8.9-1.1 1.7-1.1.8 0 1.6.8 1.6 1.8z"/><path id="XMLID_45_" d="M315.3 60.9v39.2c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-8.2c-3.6 6.6-10.3 11.2-18 11.2-12.1 0-20.7-10.8-20.7-22.4s8.6-22.4 20.7-22.4c7.7 0 14.4 4.6 18 11.2v-8.6c0-.9.8-1.8 1.8-1.8s1.8.9 1.8 1.8zm-4.5 19.8c0-9.6-6.9-18.8-17.1-18.8-10 0-17.1 9.1-17.1 18.8s7.1 18.8 17.1 18.8c10.2 0 17.1-9.2 17.1-18.8z"/><path id="XMLID_27_" d="M352.4 61.3c0 1.1-.6 1.8-1.7 1.9-10.5 1.6-15.3 10.2-15.3 20.2v17.2c0 1-.8 1.8-1.8 1.8-1.1 0-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8 1.1 0 1.8.8 1.8 1.8v8c3-5 8.9-9.8 15.1-9.8.8 0 1.9.6 1.9 1.7z"/><path id="XMLID_2_" d="M430.6 77.7v23c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15 11.6-15 20.6v17.8c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15.4 8.6-15.1 20.1 0 .3.1.8 0 .9v17.4c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8V68c3.1-5.5 8.6-9.1 15.1-9.1 7.3 0 13 4.6 15.3 11.5 3-6.7 8.8-11.5 16.2-11.5 10.6-.1 16.7 9.1 16.7 18.8z"/></g></g></g><g id="Swarm_Icon"><path id="XMLID_26_" class="st1" d="M121.3 27v12.4l-11.1-6.2V20.7z"/><path id="XMLID_25_" class="st2" d="M110.2 33.2v12.4l11.1-6.2V27z"/><path id="XMLID_24_" class="st3" d="M37.4 102.7l22.1 12.4 22.1-12.4-22.1-12.5z"/><path id="XMLID_23_" class="st1" d="M59.5 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_22_" class="st1" d="M81.6 77.8v24.9L59.5 90.2V65.4z"/><path id="XMLID_21_" class="st2" d="M59.5 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_20_" class="st2" d="M37.4 77.8v24.9l22.1-12.5V65.4z"/><path id="XMLID_19_" class="st4" d="M84 48.4l11 6.2 11.1-6.2L95 42.2z"/><path id="XMLID_18_" class="st4" d="M37.4 77.8l22.1 12.4 22.1-12.4-22.1-12.4z"/><path id="XMLID_17_" class="st3" d="M86.9 102.7l22.1 12.4 22.1-12.4L109 90.2z"/><path id="XMLID_16_" class="st1" d="M109 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_15_" class="st1" d="M131.1 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_14_" class="st2" d="M109 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_13_" class="st2" d="M86.9 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_12_" class="st4" d="M86.9 77.8L109 90.2l22.1-12.4L109 65.4z"/><path id="XMLID_11_" class="st2" d="M84 35.9v12.5l11-6.2V29.7z"/><path id="XMLID_10_" class="st3" d="M61.9 60.8L84 73.2l22.1-12.4L84 48.4z"/><path id="XMLID_9_" class="st1" d="M84 48.4v24.8L61.9 60.8V35.9z"/><path id="XMLID_8_" class="st2" d="M61.9 35.9v24.9L84 48.4V23.5z"/><path id="XMLID_7_" class="st2" d="M95 54.6V42.2l-11 6.2v24.8L95 67l11.1-6.2V48.4z"/><g id="XMLID_5_"><path id="XMLID_6_" class="st1" d="M95 29.7l-11-6.2v24.9l22.1 12.4V48.4L95 42.2z"/></g><path id="XMLID_4_" class="st4" d="M84 23.5l11 6.2-11 6.2v12.5L61.9 35.9z"/><path id="XMLID_3_" class="st4" d="M99.2 27l11 6.2 11.1-6.2-11.1-6.3z"/></g></g></svg>
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 230.07104 58.680001" version="1.1" id="svg28566" sodipodi:docname="swarm-logo.svg" inkscape:version="1.0.1 (3bc2e81, 2020-09-07)" width="230.07104" height="58.68">
-  <metadata id="metadata28570">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1016" id="namedview28568" showgrid="false" inkscape:zoom="3.1325" inkscape:cx="123.33" inkscape:cy="35.939998" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="Layer_2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
-  <defs id="defs28540">
-    <style id="style28538">
-      .cls-1 {
-        fill: #fafafa;
-      }
-      .cls-2 {
-        fill: #dd7200;
-      }
-    </style>
-  </defs>
-  <title id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
-  <g id="Layer_2" data-name="Layer 2" transform="translate(-76.67,-71.05)">
-    <path class="cls-2" d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z" id="path28546"/>
-    <path class="cls-2" d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z" id="path28548"/>
-    <path class="cls-2" d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z" id="path28550"/>
-    <path class="cls-2" d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z" id="path28552"/>
-    <path class="cls-2" d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z" id="path28554"/>
-    <polygon class="cls-2" points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 " id="polygon28556"/>
-    <polygon class="cls-2" points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 " id="polygon28558"/>
-    <polygon class="cls-2" points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 " id="polygon28560"/>
-    <polygon class="cls-2" points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 " id="polygon28562"/>
-  </g>
-</svg>
@@ -1,55 +0,0 @@
-import { useState, ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Toolbar, IconButton } from '@material-ui/core/'
-
-import { Sun, Moon } from 'react-feather'
-
-const drawerWidth = 240
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-    },
-  }),
-)
-interface Props {
-  themeMode: string
-}
-
-export default function SideBar(props: Props): ReactElement {
-  const [darkMode, toggleDarkMode] = useState(false)
-
-  const switchTheme = () => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light')
-    } else {
-      localStorage.setItem('theme', darkMode ? 'dark' : 'light')
-    }
-
-    toggleDarkMode(!darkMode)
-    window.location.reload()
-  }
-
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div style={{ display: 'fixed' }} className={classes.appBar}>
-        <Toolbar style={{ display: 'flex' }}>
-          <div style={{ width: '100%' }}>
-            <div style={{ float: 'right' }}>
-              <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
-                {props.themeMode === 'dark' ? <Moon /> : <Sun />}
-              </IconButton>
-            </div>
-          </div>
-        </Toolbar>
-      </div>
-    </div>
-  )
-}
@@ -1,51 +1,45 @@
-import { ReactElement } from 'react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import type { ReactElement } from 'react'
+import { Link } from 'react-router-dom'

 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Activity, FileText, DollarSign, Share2, Settings, Layers } from 'react-feather'
+import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
+import { Home, FileText, DollarSign, Share2, Settings, Layers, BookOpen } from 'react-feather'
+import { ROUTES } from '../routes'
+import SideBarItem from './SideBarItem'
+import SideBarStatus from './SideBarStatus'

-import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
-import { Health } from '@ethersphere/bee-js'
-
-const drawerWidth = 240
+import Logo from '../assets/logo.svg'

 const navBarItems = [
  {
-    label: 'Status',
-    id: 'status',
-    path: '/',
-    icon: Activity,
+    label: 'Info',
+    path: ROUTES.INFO,
+    icon: Home,
  },
  {
    label: 'Files',
-    id: 'files',
-    path: '/files/',
+    path: ROUTES.FILES,
    icon: FileText,
  },
  {
    label: 'Stamps',
-    id: 'stamps',
-    path: '/stamps/',
+    path: ROUTES.STAMPS,
    icon: Layers,
  },
  {
    label: 'Accounting',
-    id: 'accounting',
-    path: '/accounting/',
+    path: ROUTES.ACCOUNTING,
    icon: DollarSign,
  },
  {
    label: 'Peers',
-    id: 'peers',
-    path: '/peers/',
+    path: ROUTES.PEERS,
    icon: Share2,
  },
  {
    label: 'Settings',
-    id: 'settings',
-    path: '/settings/',
+    path: ROUTES.SETTINGS,
    icon: Settings,
  },
 ]
@@ -53,122 +47,82 @@ const navBarItems = [
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
-      display: 'flex',
-    },
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
+      flexWrap: 'nowrap',
+      minHeight: '100vh',
+      paddingTop: theme.spacing(8),
+      paddingBottom: theme.spacing(8),
    },
    logo: {
-      padding: 1,
-      marginTop: 20,
+      marginLeft: theme.spacing(8),
+      marginRight: theme.spacing(8),
    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
+    icon: {
+      height: theme.spacing(4),
    },
-    drawerPaper: {
-      width: drawerWidth,
+    iconSmall: {
+      height: theme.spacing(2),
+    },
+    divider: {
+      backgroundColor: '#2c2c2c',
+      marginLeft: theme.spacing(4),
+      marginRight: theme.spacing(4),
+    },
+    link: {
+      color: '#9f9f9f',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
        },
-    activeSideBar: {
-      color: '#dd7700',
      },
-    activeSideBarItem: {
-      borderLeft: '4px solid #dd7700',
-      backgroundColor: 'inherit !important',
    },
-    toolbar: theme.mixins.toolbar,
  }),
 )

-interface Props extends RouteComponentProps {
-  themeMode: string
-  health: boolean
-  nodeHealth: Health | null
-}
-
-export default function SideBar(props: Props): ReactElement {
+export default function SideBar(): ReactElement {
  const classes = useStyles()

  return (
-    <div className={classes.root}>
-      <Drawer
-        className={classes.drawer}
-        variant="permanent"
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-        anchor="left"
-      >
-        <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
-          <Link to="/">
-            <img
-              alt="swarm"
-              className={classes.logo}
-              src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange}
-              style={{ maxHeight: '30px', alignItems: 'center' }}
-            />
+    <Drawer variant="permanent">
+      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
+        <Grid className={classes.logo}>
+          <Link to={ROUTES.INFO}>
+            <img alt="swarm" src={Logo} />
          </Link>
-        </div>
+        </Grid>
+        <Grid>
          <List>
-          {navBarItems.map(item => (
-            <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
-              <ListItem
-                button
-                selected={props.location.pathname === item.path}
-                className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
-              >
-                <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
-                  <item.icon style={{ height: '20px' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary={item.label}
-                  className={props.location.pathname === item.path ? classes.activeSideBar : ''}
+            {navBarItems.map(p => (
+              <Link to={p.path} key={p.path} className={classes.link}>
+                <SideBarItem
+                  key={p.path}
+                  iconStart={<p.icon className={classes.icon} />}
+                  path={p.path}
+                  label={p.label}
                />
-              </ListItem>
              </Link>
            ))}
          </List>
-        <Divider />
+          <Divider className={classes.divider} />
          <List>
-          <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{ textDecoration: 'none' }}>
-            <ListItem button>
-              <ListItemText primary={'Docs'} />
-              <OpenInNewSharp fontSize="small" />
-            </ListItem>
+            <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" className={classes.link}>
+              <SideBarItem
+                iconStart={<BookOpen className={classes.icon} />}
+                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                label={<span>Docs</span>}
+              />
            </MUILink>
          </List>
-        <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
-          <ListItem>
-            <div style={{ marginRight: '30px' }}>
-              <div
-                style={{
-                  backgroundColor: props.health ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
-              />
-              <span>API</span>
-            </div>
-            <div>
-              <div
-                style={{
-                  backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
-              />
-              <span>Debug API</span>
-            </div>
-          </ListItem>
-        </div>
+        </Grid>
+        <Grid>
+          <Link to={ROUTES.STATUS} className={classes.link}>
+            <SideBarStatus path={ROUTES.STATUS} />
+          </Link>
+        </Grid>
+      </Grid>
    </Drawer>
-    </div>
  )
 }
@@ -0,0 +1,62 @@
+import type { ReactElement, ReactNode } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+
+import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
+import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
+
+const StyledListItem = withStyles((theme: Theme) => ({
+  root: {
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
+    borderLeft: '4px solid rgba(0,0,0,0)',
+    '&.Mui-selected, &.Mui-selected:hover': {
+      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      backgroundColor: '#2c2c2c',
+      color: '#f9f9f9',
+    },
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: '#2c2c2c',
+      color: '#f9f9f9',
+
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
+        backgroundColor: '#2c2c2c',
+        color: '#f9f9f9',
+      },
+    },
+  },
+}))(ListItem)
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      color: 'inherit',
+    },
+    activeIcon: {
+      color: theme.palette.primary.main,
+    },
+  }),
+)
+
+interface Props {
+  iconStart?: ReactNode
+  iconEnd?: ReactNode
+  path?: string
+  label: ReactNode
+}
+
+export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+
+  return (
+    <StyledListItem button selected={isSelected} disableRipple>
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
+      <ListItemText primary={label} />
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
+    </StyledListItem>
+  )
+}
@@ -0,0 +1,85 @@
+import { ReactElement, useContext } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+import { ArrowRight } from 'react-feather'
+
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
+import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { Context } from '../providers/Bee'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      color: 'inherit',
+    },
+    iconSmall: {
+      height: theme.spacing(2),
+    },
+
+    root: {
+      height: theme.spacing(4),
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(4),
+      color: '#f9f9f9',
+      borderLeft: '0px solid rgba(0,0,0,0)',
+      '&.Mui-selected, &.Mui-selected:hover': {
+        borderLeft: `0px solid ${theme.palette.primary.main}`,
+        backgroundColor: '#2c2c2c',
+      },
+    },
+    rootError: {
+      backgroundColor: 'rgba(255, 58, 82, 0.25)',
+    },
+    button: {
+      '&:hover': {
+        backgroundColor: '#2c2c2c',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#2c2c2c',
+        },
+      },
+    },
+    smallerText: {
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+interface Props {
+  path?: string
+}
+
+export default function SideBarItem({ path }: Props): ReactElement {
+  const { status } = useContext(Context)
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+
+  return (
+    <ListItem
+      button
+      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
+      selected={isSelected}
+      disableRipple
+    >
+      <ListItemIcon>
+        <span
+          style={{
+            backgroundColor: status.all ? '#1de600' : '#ff3a52',
+            height: '14px',
+            width: '14px',
+            borderRadius: '50%',
+            display: 'inline-block',
+            marginLeft: 30,
+          }}
+        />
+      </ListItemIcon>
+      <ListItemText
+        primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
+      />
+      <ListItemIcon className={classes.icon}>
+        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
+      </ListItemIcon>
+    </ListItem>
+  )
+}
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'

 import { makeStyles } from '@material-ui/core/styles'
 import { Card, CardContent, Typography } from '@material-ui/core/'
+import { ROUTES } from '../routes'

 const useStyles = makeStyles({
  root: {
@@ -26,7 +27,7 @@ export default function TroubleshootConnectionCard(): ReactElement {
        </Typography>
        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
          <strong>
-            <Link to="/">Click to run status checks</Link> on your nodes connection or check out the{' '}
+            <Link to={ROUTES.STATUS}>Click to run status checks</Link> on your nodes connection or check out the{' '}
            <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
              Swarm Bee Docs
            </a>
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, ReactElement } from 'react'
+import { useContext, ReactElement } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
 import AlertVersion from '../components/AlertVersion'
 import { Container, CircularProgress } from '@material-ui/core'
@@ -6,16 +6,13 @@ import { Container, CircularProgress } from '@material-ui/core'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'

 import SideBar from '../components/SideBar'
-import NavBar from '../components/NavBar'

 import { Context } from '../providers/Bee'

-import { RouteComponentProps } from 'react-router'
-
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    content: {
-      marginLeft: '240px',
+      marginLeft: 300,
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
@@ -24,40 +21,18 @@ const useStyles = makeStyles((theme: Theme) =>
  }),
 )

-interface Props extends RouteComponentProps {
+interface Props {
  children?: ReactElement
 }

 const Dashboard = (props: Props): ReactElement => {
  const classes = useStyles()

-  const [themeMode, toggleThemeMode] = useState('light')
-
-  const { isLoading, apiHealth, debugApiHealth } = useContext(Context)
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
+  const { isLoading } = useContext(Context)

  return (
    <div>
-      <SideBar {...props} themeMode={themeMode} health={apiHealth} nodeHealth={debugApiHealth} />
-      <NavBar themeMode={themeMode} />
+      <SideBar />
      <ErrorBoundary>
        <main className={classes.content}>
          <AlertVersion />
@@ -22,9 +22,8 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function Accounting(): ReactElement {
  const classes = useStyles()

-  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } = useContext(
-    BeeContext,
-  )
+  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
+    useContext(BeeContext)
  const { beeDebugApi } = useContext(SettingsContext)

  const { accounting, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
@@ -0,0 +1,113 @@
+import { ReactElement, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
+import { ArrowRight, ArrowDropUp } from '@material-ui/icons/'
+import { NodeAddresses, Topology } from '@ethersphere/bee-js'
+import { ROUTES } from '../../routes'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flex: '1 1 auto',
+      flexDirection: 'column',
+    },
+    status: {
+      color: '#2145a0',
+      backgroundColor: '#e1effe',
+    },
+  }),
+)
+
+interface Props {
+  nodeAddresses: NodeAddresses | null
+  nodeTopology: Topology | null
+  userBeeVersion?: string
+  isLatestBeeVersion: boolean
+  isOk: boolean
+  latestUrl: string
+}
+
+function StatusCard({
+  userBeeVersion,
+  nodeAddresses,
+  nodeTopology,
+  isLatestBeeVersion,
+  latestUrl,
+}: Props): ReactElement | null {
+  const classes = useStyles()
+
+  const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
+
+  return (
+    <Card>
+      <CardContent className={classes.root}>
+        <>
+          <div style={{ marginBottom: '20px' }}>
+            <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
+            <span style={{ marginRight: '20px' }}>
+              <span>Connected Peers: </span>
+              <Link to={ROUTES.PEERS}>{nodeTopology?.connected}</Link>
+            </span>
+          </div>
+          <div>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>AGENT: </span>
+              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+                Bee
+              </a>{' '}
+              <span>{userBeeVersion || '-'}</span>
+              {isLatestBeeVersion ? (
+                <Chip
+                  style={{ marginLeft: '7px', color: '#2145a0' }}
+                  size="small"
+                  label="latest"
+                  className={classes.status}
+                />
+              ) : (
+                <Button size="small" variant="outlined" href={latestUrl}>
+                  update
+                </Button>
+              )}
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>PUBLIC KEY: </span>
+              <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>PSS PUBLIC KEY: </span>
+              <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>OVERLAY ADDRESS (PEER ID): </span>
+              <span>{nodeAddresses?.overlay ? nodeAddresses.overlay : '-'}</span>
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
+                <Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
+                  {underlayAddressesVisible ? (
+                    <ArrowDropUp style={{ fontSize: '12px' }} />
+                  ) : (
+                    <ArrowRight style={{ fontSize: '12px' }} />
+                  )}
+                  <span>Underlay Addresses</span>
+                </Button>
+              </Typography>
+              {underlayAddressesVisible && (
+                <div>
+                  {nodeAddresses?.underlay.map(item => (
+                    <li key={item}>{item}</li>
+                  ))}
+                </div>
+              )}
+            </Typography>
+          </div>
+        </>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default StatusCard
@@ -0,0 +1,49 @@
+import { ReactElement, useContext } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+
+import StatusCard from './StatusCard'
+import EthereumAddressCard from '../../components/EthereumAddressCard'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      display: 'grid',
+      rowGap: theme.spacing(3),
+    },
+  }),
+)
+
+export default function Status(): ReactElement {
+  const classes = useStyles()
+
+  const {
+    status,
+    latestUserVersion,
+    isLatestBeeVersion,
+    latestBeeVersionUrl,
+    topology,
+    nodeAddresses,
+    chequebookAddress,
+  } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div className={classes.root}>
+      <StatusCard
+        userBeeVersion={latestUserVersion}
+        isLatestBeeVersion={isLatestBeeVersion}
+        isOk={status.all}
+        nodeTopology={topology}
+        latestUrl={latestBeeVersionUrl}
+        nodeAddresses={nodeAddresses}
+      />
+      {nodeAddresses && chequebookAddress && (
+        <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
+      )}
+    </div>
+  )
+}
@@ -1,170 +0,0 @@
-import { ReactElement, useEffect, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography, Paper, Button, Step, StepLabel, StepContent, Stepper, StepButton } from '@material-ui/core/'
-import { CheckCircle, Error, ExpandLessSharp, ExpandMoreSharp, Autorenew } from '@material-ui/icons/'
-
-import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
-import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
-import VersionCheck from './SetupSteps/VersionCheck'
-import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
-import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
-import PeerConnection from './SetupSteps/PeerConnection'
-import { Context } from '../../providers/Bee'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      padding: theme.spacing(2),
-      width: '100%',
-    },
-    button: {
-      marginTop: theme.spacing(1),
-      marginRight: theme.spacing(1),
-    },
-    actionsContainer: {
-      margin: theme.spacing(2),
-    },
-  }),
-)
-
-interface Step {
-  label: string
-  isOk: boolean
-  component: ReactElement
-}
-
-export default function NodeSetupWorkflow(): ReactElement {
-  const classes = useStyles()
-  const [activeStep, setActiveStep] = useState(-1)
-
-  const {
-    status,
-    isLoading,
-    latestUserVersion,
-    latestPublishedVersion,
-    isLatestBeeVersion,
-    latestBeeVersionUrl,
-    topology,
-    nodeAddresses,
-    chequebookAddress,
-  } = useContext(Context)
-
-  const steps: Step[] = [
-    {
-      label: 'Connected to Node DebugAPI',
-      isOk: status.debugApiConnection,
-      component: <DebugConnectionCheck isOk={status.debugApiConnection} />,
-    },
-    {
-      label: 'Running latest Bee version',
-      isOk: status.version,
-      component: (
-        <VersionCheck
-          isOk={status.version}
-          isLatestBeeVersion={isLatestBeeVersion}
-          userVersion={latestUserVersion}
-          latestVersion={latestPublishedVersion}
-          latestUrl={latestBeeVersionUrl}
-        />
-      ),
-    },
-    {
-      label: 'Connected to xDai Blockchain',
-      isOk: status.blockchainConnection,
-      component: <EthereumConnectionCheck isOk={status.blockchainConnection} nodeAddresses={nodeAddresses} />,
-    },
-    {
-      label: 'Deployed and Funded Chequebook',
-      isOk: status.chequebook,
-      component: (
-        <ChequebookDeployFund chequebookAddress={chequebookAddress?.chequebookAddress} isOk={status.chequebook} />
-      ),
-    },
-    {
-      label: 'Connected to Node API',
-      isOk: status.apiConnection,
-      component: <NodeConnectionCheck isOk={status.apiConnection} />,
-    },
-    {
-      label: 'Connected to Peers',
-      isOk: status.topology,
-      component: <PeerConnection isOk={status.topology} topology={topology} />,
-    },
-  ]
-
-  useEffect(() => {
-    // If the user already changed the active step we don't want to overwrite it
-    if (activeStep >= 0 && activeStep < steps.length) return
-
-    // If any step is not fully loaded yet return
-    if (!isLoading) return
-
-    // Select first step that is not OK
-    // This is deliberately a for loop (and not forEach) so that we can terminate the useEffect from within the cycle
-    for (let i = 0; i < steps.length; ++i) {
-      if (!steps[i].isOk) {
-        setActiveStep(i)
-
-        return
-      }
-    }
-  }, [steps])
-
-  const handleNext = () => {
-    setActiveStep(prevActiveStep => prevActiveStep + 1)
-  }
-
-  const handleBack = () => {
-    setActiveStep(prevActiveStep => prevActiveStep - 1)
-  }
-
-  return (
-    <Paper className={classes.root}>
-      <Typography variant="h5" gutterBottom>
-        Node Setup
-      </Typography>
-      <Stepper nonLinear activeStep={activeStep} orientation="vertical">
-        {steps.map(({ label, isOk, component }, index) => (
-          <Step key={label}>
-            <StepLabel
-              onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
-              StepIconComponent={() => {
-                if (isLoading) return <Autorenew style={{ height: '25px', cursor: 'pointer' }} />
-
-                if (isOk) return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
-
-                return <Error style={{ color: '#c9201f', height: '25px', cursor: 'pointer' }} />
-              }}
-            >
-              <StepButton
-                disabled={isLoading}
-                onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
-                style={{ justifyContent: 'space-between' }}
-              >
-                <div style={{ display: 'flex' }}>
-                  <div style={{ marginTop: '5px' }}>{label}</div>
-                  <div style={{ marginLeft: '12px' }}>
-                    {index === activeStep ? <ExpandLessSharp /> : <ExpandMoreSharp />}
-                  </div>
-                </div>
-              </StepButton>
-            </StepLabel>
-            <StepContent>
-              <Typography component="div">{component}</Typography>
-              <div className={classes.actionsContainer}>
-                <div>
-                  <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
-                    Back
-                  </Button>
-                  <Button variant="contained" color="primary" onClick={handleNext} className={classes.button}>
-                    {index < steps.length - 1 ? 'Next' : 'Finish'}
-                  </Button>
-                </div>
-              </div>
-            </StepContent>
-          </Step>
-        ))}
-      </Stepper>
-    </Paper>
-  )
-}
@@ -1,129 +0,0 @@
-import { ReactElement, useState } from 'react'
-import { Link } from 'react-router-dom'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
-import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/'
-import { NodeAddresses, Topology } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flex: '1 1 auto',
-      flexDirection: 'column',
-    },
-    status: {
-      color: '#2145a0',
-      backgroundColor: '#e1effe',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  nodeTopology: Topology | null
-  userBeeVersion?: string
-  isLatestBeeVersion: boolean
-  isOk: boolean
-  latestUrl: string
-}
-
-function StatusCard({
-  userBeeVersion,
-  nodeAddresses,
-  nodeTopology,
-  isOk,
-  isLatestBeeVersion,
-  latestUrl,
-}: Props): ReactElement | null {
-  const classes = useStyles()
-
-  const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
-
-  return (
-    <Card>
-      <CardContent className={classes.root}>
-        <Typography component="h5" variant="h5" style={{ display: 'flex', justifyContent: 'space-between' }}>
-          {isOk && (
-            <div>
-              <CheckCircle style={{ color: '#32c48d', marginRight: '7px' }} />
-              <span>Your Bee node is running as expected</span>
-            </div>
-          )}
-          {!isOk && (
-            <div>
-              <Error style={{ color: '#c9201f', marginRight: '7px' }} />
-              <span>Could not connect to Bee Node</span>
-            </div>
-          )}
-        </Typography>
-        {isOk && (
-          <>
-            <div style={{ marginBottom: '20px' }}>
-              <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
-              <span style={{ marginRight: '20px' }}>
-                <span>Connected Peers: </span>
-                <Link to="/peers/">{nodeTopology?.connected}</Link>
-              </span>
-            </div>
-            <div>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>AGENT: </span>
-                <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-                  Bee
-                </a>{' '}
-                <span>{userBeeVersion || '-'}</span>
-                {isLatestBeeVersion ? (
-                  <Chip
-                    style={{ marginLeft: '7px', color: '#2145a0' }}
-                    size="small"
-                    label="latest"
-                    className={classes.status}
-                  />
-                ) : (
-                  <Button size="small" variant="outlined" href={latestUrl}>
-                    update
-                  </Button>
-                )}
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>PUBLIC KEY: </span>
-                <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>PSS PUBLIC KEY: </span>
-                <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <span>OVERLAY ADDRESS (PEER ID): </span>
-                <span>{nodeAddresses?.overlay ? nodeAddresses.overlay : '-'}</span>
-              </Typography>
-              <Typography component="div" variant="subtitle2" gutterBottom>
-                <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
-                  <Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
-                    {underlayAddressesVisible ? (
-                      <ArrowDropUp style={{ fontSize: '12px' }} />
-                    ) : (
-                      <ArrowRight style={{ fontSize: '12px' }} />
-                    )}
-                    <span>Underlay Addresses</span>
-                  </Button>
-                </Typography>
-                {underlayAddressesVisible && (
-                  <div>
-                    {nodeAddresses?.underlay.map(item => (
-                      <li key={item}>{item}</li>
-                    ))}
-                  </div>
-                )}
-              </Typography>
-            </div>
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default StatusCard
@@ -1,48 +1,152 @@
-import { ReactElement, useContext } from 'react'
+import { ReactElement, useState, useContext } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography, Paper, Button, Step, StepLabel, StepContent, Stepper, StepButton } from '@material-ui/core/'
+import { CheckCircle, Error, ExpandLessSharp, ExpandMoreSharp, Autorenew } from '@material-ui/icons/'

-import NodeSetupWorkflow from './NodeSetupWorkflow'
-import StatusCard from './StatusCard'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
+import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
+import VersionCheck from './SetupSteps/VersionCheck'
+import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
+import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
+import PeerConnection from './SetupSteps/PeerConnection'
+import { Context } from '../../providers/Bee'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
+      padding: theme.spacing(2),
      width: '100%',
-      display: 'grid',
-      rowGap: theme.spacing(3),
+    },
+    button: {
+      marginTop: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    },
+    actionsContainer: {
+      margin: theme.spacing(2),
    },
  }),
 )

-export default function Status(): ReactElement {
+interface Step {
+  label: string
+  isOk: boolean
+  component: ReactElement
+}
+
+export default function NodeSetupWorkflow(): ReactElement {
  const classes = useStyles()
+  const [activeStep, setActiveStep] = useState(-1)

  const {
    status,
+    isLoading,
    latestUserVersion,
+    latestPublishedVersion,
    isLatestBeeVersion,
    latestBeeVersionUrl,
    topology,
    nodeAddresses,
    chequebookAddress,
-  } = useContext(BeeContext)
+  } = useContext(Context)
+
+  const steps: Step[] = [
+    {
+      label: 'Connected to Node DebugAPI',
+      isOk: status.debugApiConnection,
+      component: <DebugConnectionCheck isOk={status.debugApiConnection} />,
+    },
+    {
+      label: 'Running latest Bee version',
+      isOk: status.version,
+      component: (
+        <VersionCheck
+          isOk={status.version}
+          isLatestBeeVersion={isLatestBeeVersion}
+          userVersion={latestUserVersion}
+          latestVersion={latestPublishedVersion}
+          latestUrl={latestBeeVersionUrl}
+        />
+      ),
+    },
+    {
+      label: 'Connected to xDai Blockchain',
+      isOk: status.blockchainConnection,
+      component: <EthereumConnectionCheck isOk={status.blockchainConnection} nodeAddresses={nodeAddresses} />,
+    },
+    {
+      label: 'Deployed and Funded Chequebook',
+      isOk: status.chequebook,
+      component: (
+        <ChequebookDeployFund chequebookAddress={chequebookAddress?.chequebookAddress} isOk={status.chequebook} />
+      ),
+    },
+    {
+      label: 'Connected to Node API',
+      isOk: status.apiConnection,
+      component: <NodeConnectionCheck isOk={status.apiConnection} />,
+    },
+    {
+      label: 'Connected to Peers',
+      isOk: status.topology,
+      component: <PeerConnection isOk={status.topology} topology={topology} />,
+    },
+  ]
+
+  const handleNext = () => {
+    setActiveStep(prevActiveStep => prevActiveStep + 1)
+  }
+
+  const handleBack = () => {
+    setActiveStep(prevActiveStep => prevActiveStep - 1)
+  }

  return (
-    <div className={classes.root}>
-      <StatusCard
-        userBeeVersion={latestUserVersion}
-        isLatestBeeVersion={isLatestBeeVersion}
-        isOk={status.all}
-        nodeTopology={topology}
-        latestUrl={latestBeeVersionUrl}
-        nodeAddresses={nodeAddresses}
-      />
-      {nodeAddresses && chequebookAddress && (
-        <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
-      )}
-      <NodeSetupWorkflow />
+    <Paper className={classes.root}>
+      <Typography variant="h5" gutterBottom>
+        Node Setup
+      </Typography>
+      <Stepper nonLinear activeStep={activeStep} orientation="vertical">
+        {steps.map(({ label, isOk, component }, index) => (
+          <Step key={label}>
+            <StepLabel
+              onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
+              StepIconComponent={() => {
+                if (isLoading) return <Autorenew style={{ height: '25px', cursor: 'pointer' }} />
+
+                if (isOk) return <CheckCircle style={{ color: '#32c48d', height: '25px', cursor: 'pointer' }} />
+
+                return <Error style={{ color: '#c9201f', height: '25px', cursor: 'pointer' }} />
+              }}
+            >
+              <StepButton
+                disabled={isLoading}
+                onClick={() => setActiveStep(index === activeStep ? steps.length : index)}
+                style={{ justifyContent: 'space-between' }}
+              >
+                <div style={{ display: 'flex' }}>
+                  <div style={{ marginTop: '5px' }}>{label}</div>
+                  <div style={{ marginLeft: '12px' }}>
+                    {index === activeStep ? <ExpandLessSharp /> : <ExpandMoreSharp />}
                  </div>
+                </div>
+              </StepButton>
+            </StepLabel>
+            <StepContent>
+              <Typography component="div">{component}</Typography>
+              <div className={classes.actionsContainer}>
+                <div>
+                  <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
+                    Back
+                  </Button>
+                  <Button variant="contained" color="primary" onClick={handleNext} className={classes.button}>
+                    {index < steps.length - 1 ? 'Next' : 'Finish'}
+                  </Button>
+                </div>
+              </div>
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    </Paper>
  )
 }
@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react'
+import { Switch } from 'react-router-dom'
+
+import { Route } from 'react-router-dom'
+
+import Info from './pages/info'
+import Status from './pages/status'
+import Files from './pages/files'
+import Peers from './pages/peers'
+import Accounting from './pages/accounting'
+import Settings from './pages/settings'
+import Stamps from './pages/stamps'
+
+export enum ROUTES {
+  INFO = '/',
+  FILES = '/files',
+  PEERS = '/peers',
+  ACCOUNTING = '/accounting',
+  SETTINGS = '/settings',
+  STAMPS = '/stamps',
+  STATUS = '/status',
+}
+
+const BaseRouter = (): ReactElement => (
+  <Switch>
+    <Route exact path={ROUTES.INFO} component={Info} />
+    <Route exact path={ROUTES.FILES} component={Files} />
+    <Route exact path={ROUTES.PEERS} component={Peers} />
+    <Route exact path={ROUTES.ACCOUNTING} component={Accounting} />
+    <Route exact path={ROUTES.SETTINGS} component={Settings} />
+    <Route exact path={ROUTES.STAMPS} component={Stamps} />
+    <Route exact path={ROUTES.STATUS} component={Status} />
+  </Switch>
+)
+
+export default BaseRouter
@@ -1,23 +0,0 @@
-import type { JSXElementConstructor, ReactElement } from 'react'
-import { Route, RouteComponentProps } from 'react-router-dom'
-
-interface Props {
-  component: JSXElementConstructor<RouteComponentProps>
-  layout: JSXElementConstructor<RouteComponentProps>
-  exact?: boolean
-  path: string
-}
-
-const AppRoute = ({ component: Component, layout: Layout, exact, path }: Props): ReactElement => (
-  <Route
-    exact={exact}
-    path={path}
-    render={props => (
-      <Layout {...props}>
-        <Component {...props} />
-      </Layout>
-    )}
-  />
-)
-
-export default AppRoute
@@ -1,28 +0,0 @@
-import type { ReactElement } from 'react'
-import { Switch } from 'react-router-dom'
-
-import AppRoute from './AppRoute'
-
-// layouts
-import Dashboard from '../layout/Dashboard'
-
-// pages
-import Status from '../pages/status'
-import Files from '../pages/files'
-import Peers from '../pages/peers'
-import Accounting from '../pages/accounting'
-import Settings from '../pages/settings'
-import Stamps from '../pages/stamps'
-
-const BaseRouter = (): ReactElement => (
-  <Switch>
-    <AppRoute exact path="/" layout={Dashboard} component={Status} />
-    <AppRoute exact path="/files/" layout={Dashboard} component={Files} />
-    <AppRoute exact path="/peers/" layout={Dashboard} component={Peers} />
-    <AppRoute exact path="/accounting/" layout={Dashboard} component={Accounting} />
-    <AppRoute exact path="/settings/" layout={Dashboard} component={Settings} />
-    <AppRoute exact path="/stamps/" layout={Dashboard} component={Stamps} />
-  </Switch>
-)
-
-export default BaseRouter
@@ -9,6 +9,12 @@ declare module '@material-ui/core/styles/createPalette' {

 // Overwriting default components styles
 const componentsOverrides = (theme: Theme) => ({
+  MuiDrawer: {
+    paper: {
+      width: 300,
+      backgroundColor: '#212121',
+    },
+  },
  MuiTab: {
    root: {
      backgroundColor: 'transparent',
@@ -55,7 +61,7 @@ const propsOverrides = {
  },
 }

-export const lightTheme = createMuiTheme({
+export const theme = createMuiTheme({
  palette: {
    type: 'light',
    background: {
@@ -75,28 +81,5 @@ export const lightTheme = createMuiTheme({
  },
 })

-export const darkTheme = createMuiTheme({
-  palette: {
-    type: 'dark',
-    background: {
-      default: '#0d1117',
-      paper: '#161b22',
-    },
-    primary: {
-      light: orange.A200,
-      main: '#dd7700',
-      dark: orange[800],
-    },
-    secondary: {
-      main: '#1f2937',
-    },
-  },
-  typography: {
-    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
-  },
-})
-
-darkTheme.overrides = componentsOverrides(darkTheme)
-darkTheme.props = propsOverrides
-lightTheme.overrides = componentsOverrides(lightTheme)
-lightTheme.props = propsOverrides
+theme.overrides = componentsOverrides(theme)
+theme.props = propsOverrides
@@ -53,7 +53,7 @@ describe('utils', () => {
    wrongValues.forEach(v => {
      test(`testing ${v}`, () => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        expect(() => makeBigNumber((v as unknown) as any)).toThrow()
+        expect(() => makeBigNumber(v as unknown as any)).toThrow()
      })
    })
  })
Author	SHA1	Message	Date
bee-worker	cda1d4bbb1	chore: release 0.7.0 (#189 ) * chore: release 0.7.0 * chore: update the changelog Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2021-08-31 14:12:36 +02:00
Vojtech Simetka	e8e707a9c4	chore(deps): update to bee-js 1.2.1 (#197 )	2021-08-31 12:44:18 +02:00
Vojtech Simetka	28bbdfb2f6	style: sidebar styling (#194 ) * style: sidebar styling * style: hover and selected colors * chore: split the sidebar items into separate component * style: pretty much finished except for status button * feat: sidebar status button as a separate component * chore: spacing definition * style: size of the status text * fix: hiden navigation on small height screens	2021-08-31 11:27:38 +02:00
Cafe137	630791cd75	docs: add intended version section (#195 )	2021-08-30 17:43:49 +02:00
Vojtech Simetka	f316a5caf4	chore(deps): fix dependencies version (#192 ) * chore(deps): fix dependencies version * chore: use styles through core	2021-08-30 11:17:46 +02:00
Vojtech Simetka	929f44f206	refactor: routes as constants (#191 )	2021-08-26 12:57:44 +02:00
Vojtech Simetka	d1720e243c	feat: removed dark theme and theme switching (#190 )	2021-08-26 09:40:13 +02:00
Vojtech Simetka	3ce83d987d	refactor: move the router and layout directly to app.tsx (#188 )	2021-08-26 07:25:04 +02:00
Vojtech Simetka	02a7bff733	feat: separate info and status page (#183 ) * feat: separate info and status page * chore: remove the detection of step to expand	2021-08-25 17:41:17 +02:00
Vojtech Simetka	766fe96d1c	ci: enable code lint check (#186 ) * ci: enable code lint check * chore(deps): update and fix eslint & prettier versions	2021-08-25 16:14:09 +02:00
				`@@ -1 +0,0 @@`
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 468 142" xml:space="preserve"><style>.st1,.st2,.st3,.st4{opacity:.45;enable-background:new}.st2,.st3,.st4{opacity:.6}.st3,.st4{opacity:.3}.st4{opacity:.8}</style><g id="XMLID_41_"><g id="XMLID_1_"><g id="Swarm_typeface"><g id="XMLID_42_" opacity=".8"><path id="XMLID_31_" d="M193.7 90c0 9.1-9.5 13.4-17.4 13.4-8.5 0-17.8-3.3-17.8-13.2 0-1.7.1-3 2.2-3 1 0 1.4 1.3 1.4 2.1 0 8.5 6.8 10.6 14.2 10.6 5.8 0 13.8-2.8 13.8-9.8 0-13-31-5.3-31-20.3 0-8.6 9.6-10.8 16.5-10.8 8.1 0 17.1 3 17.1 12.6 0 1-1 1.7-1.9 1.7-1.1 0-1.7-1-1.7-1.9-.3-2.1-.6-3.5-2.1-5.2-2.6-3-7.7-3.6-11.5-3.6-4.5 0-12.9 1-12.9 7.1.1 10.9 31.1 3.5 31.1 20.3z"/><path id="XMLID_30_" d="M264.4 60.9c0 .8-13.2 37.6-14.5 40.9-.3 1-1 1.1-1.9 1.1-.9 0-1.6-.1-1.9-1.1l-12.9-36-12.9 36c-.3 1-1 1.1-1.9 1.1-.9 0-1.7-.1-1.9-1.1-1.3-3.3-14.5-40.1-14.5-40.9 0-1 .8-1.8 1.8-1.8.8 0 1.4.4 1.7 1.1l13 36.4 13-36.4c.3-.9 1-1.1 1.8-1.1.9 0 1.6.3 1.9 1.1l12.9 36.4 13-36.4c.3-.8.9-1.1 1.7-1.1.8 0 1.6.8 1.6 1.8z"/><path id="XMLID_45_" d="M315.3 60.9v39.2c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-8.2c-3.6 6.6-10.3 11.2-18 11.2-12.1 0-20.7-10.8-20.7-22.4s8.6-22.4 20.7-22.4c7.7 0 14.4 4.6 18 11.2v-8.6c0-.9.8-1.8 1.8-1.8s1.8.9 1.8 1.8zm-4.5 19.8c0-9.6-6.9-18.8-17.1-18.8-10 0-17.1 9.1-17.1 18.8s7.1 18.8 17.1 18.8c10.2 0 17.1-9.2 17.1-18.8z"/><path id="XMLID_27_" d="M352.4 61.3c0 1.1-.6 1.8-1.7 1.9-10.5 1.6-15.3 10.2-15.3 20.2v17.2c0 1-.8 1.8-1.8 1.8-1.1 0-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8 1.1 0 1.8.8 1.8 1.8v8c3-5 8.9-9.8 15.1-9.8.8 0 1.9.6 1.9 1.7z"/><path id="XMLID_2_" d="M430.6 77.7v23c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15 11.6-15 20.6v17.8c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15.4 8.6-15.1 20.1 0 .3.1.8 0 .9v17.4c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8V68c3.1-5.5 8.6-9.1 15.1-9.1 7.3 0 13 4.6 15.3 11.5 3-6.7 8.8-11.5 16.2-11.5 10.6-.1 16.7 9.1 16.7 18.8z"/></g></g></g><g id="Swarm_Icon"><path id="XMLID_26_" class="st1" d="M121.3 27v12.4l-11.1-6.2V20.7z"/><path id="XMLID_25_" class="st2" d="M110.2 33.2v12.4l11.1-6.2V27z"/><path id="XMLID_24_" class="st3" d="M37.4 102.7l22.1 12.4 22.1-12.4-22.1-12.5z"/><path id="XMLID_23_" class="st1" d="M59.5 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_22_" class="st1" d="M81.6 77.8v24.9L59.5 90.2V65.4z"/><path id="XMLID_21_" class="st2" d="M59.5 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_20_" class="st2" d="M37.4 77.8v24.9l22.1-12.5V65.4z"/><path id="XMLID_19_" class="st4" d="M84 48.4l11 6.2 11.1-6.2L95 42.2z"/><path id="XMLID_18_" class="st4" d="M37.4 77.8l22.1 12.4 22.1-12.4-22.1-12.4z"/><path id="XMLID_17_" class="st3" d="M86.9 102.7l22.1 12.4 22.1-12.4L109 90.2z"/><path id="XMLID_16_" class="st1" d="M109 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_15_" class="st1" d="M131.1 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_14_" class="st2" d="M109 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_13_" class="st2" d="M86.9 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_12_" class="st4" d="M86.9 77.8L109 90.2l22.1-12.4L109 65.4z"/><path id="XMLID_11_" class="st2" d="M84 35.9v12.5l11-6.2V29.7z"/><path id="XMLID_10_" class="st3" d="M61.9 60.8L84 73.2l22.1-12.4L84 48.4z"/><path id="XMLID_9_" class="st1" d="M84 48.4v24.8L61.9 60.8V35.9z"/><path id="XMLID_8_" class="st2" d="M61.9 35.9v24.9L84 48.4V23.5z"/><path id="XMLID_7_" class="st2" d="M95 54.6V42.2l-11 6.2v24.8L95 67l11.1-6.2V48.4z"/><g id="XMLID_5_"><path id="XMLID_6_" class="st1" d="M95 29.7l-11-6.2v24.9l22.1 12.4V48.4L95 42.2z"/></g><path id="XMLID_4_" class="st4" d="M84 23.5l11 6.2-11 6.2v12.5L61.9 35.9z"/><path id="XMLID_3_" class="st4" d="M99.2 27l11 6.2 11.1-6.2-11.1-6.3z"/></g></g></svg>