chore: release 0.8.0 (#205)

* chore: release 0.8.0

* chore: update changelog

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

.env.development

@@ -3,5 +3,5 @@ REACT_APP_BEE_HOST=http://localhost:1633
 REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
 REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
 REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_ETHERSCAN_HOST=etherscan.io
+REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
 REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

.env.production

@@ -1,4 +1,6 @@
 REACT_APP_BEE_HOST=http://localhost:1633
 REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
 REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
+REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
+REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
 REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

.eslintrc

@@ -1,4 +1,9 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "prettier",

.gitattributes

@@ -0,0 +1,4 @@
+* text=auto eol=lf 
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary

.github/workflows/check.yaml

@@ -42,10 +42,10 @@ jobs:
       - name: Commit linting
         uses: wagoid/commitlint-github-action@v2
 
-      # - name: Code linting
+      - name: Code linting
-      #   run: npm run lint:check
+        run: npm run lint:check
-      #   env:
+        env:
-      #     CI: true
+          CI: true
 
       - name: Build
         run: npm run build

CHANGELOG.md

@@ -1,5 +1,114 @@
 # Changelog
 
+## [0.8.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.7.0...v0.8.0) (2021-10-20)
+
+In this version we are adding support for the bee release 1.2.0. The app also went through a graphical redesign. More to come soon!
+
+
+### Features
+* support for bee 1.2.0
+* update files page design ([#218](https://www.github.com/ethersphere/bee-dashboard/issues/218)) ([93af7f3](https://www.github.com/ethersphere/bee-dashboard/commit/93af7f35a371d54864c068be6e1d8a70092afe28))
+* update info page design ([#207](https://www.github.com/ethersphere/bee-dashboard/issues/207)) ([57f5a73](https://www.github.com/ethersphere/bee-dashboard/commit/57f5a73f3a8d957bf967c51612dc09c802bb68dc))
+* update status page design ([#214](https://www.github.com/ethersphere/bee-dashboard/issues/214)) ([b666cd2](https://www.github.com/ethersphere/bee-dashboard/commit/b666cd2657cf1003651c44b6b4fa5bdcf11e895f))
+* update troubleshooting component design ([#204](https://www.github.com/ethersphere/bee-dashboard/issues/204)) ([c4c1573](https://www.github.com/ethersphere/bee-dashboard/commit/c4c1573263868b6dc8a863124e4aee824dceadbb))
+* update accounting page design ([#209](https://www.github.com/ethersphere/bee-dashboard/issues/209)) ([ecbc116](https://www.github.com/ethersphere/bee-dashboard/commit/ecbc1164756de912d14ce44aa9b2c155dded6dac))
+* update postage stamps page design ([#217](https://www.github.com/ethersphere/bee-dashboard/issues/217)) ([f241b2f](https://www.github.com/ethersphere/bee-dashboard/commit/f241b2fc5f6ec0741e275498ebef5a18ce710b81))
+* update settings page design ([#215](https://www.github.com/ethersphere/bee-dashboard/issues/215)) ([32e5ea9](https://www.github.com/ethersphere/bee-dashboard/commit/32e5ea9e56fdf957b758ec714bb6a4fe1903082a))
+
+
+### Bug Fixes
+
+* hover state style of ListItems which are clickable to be in line with other buttons ([#223](https://www.github.com/ethersphere/bee-dashboard/issues/223)) ([6c3f6c1](https://www.github.com/ethersphere/bee-dashboard/commit/6c3f6c1019801267aa5e51002f6e21f769edc210))
+* size of the troubleshoot component button ([#226](https://www.github.com/ethersphere/bee-dashboard/issues/226)) ([b4c9d9e](https://www.github.com/ethersphere/bee-dashboard/commit/b4c9d9e0182c4bee5ebb2d4e43e0aaad2aeb616b))
+* style of the update bee version button ([#222](https://www.github.com/ethersphere/bee-dashboard/issues/222)) ([83c6d13](https://www.github.com/ethersphere/bee-dashboard/commit/83c6d1341790d664c7986dd2a816fe6a3b069e5c))
+* typo in population text ([#228](https://www.github.com/ethersphere/bee-dashboard/issues/228)) ([cc5e778](https://www.github.com/ethersphere/bee-dashboard/commit/cc5e778f892b73b0b7ff5e0fa00c4816f3298ac7))
+* unknown routes should point to info page ([#227](https://www.github.com/ethersphere/bee-dashboard/issues/227)) ([f11bbd5](https://www.github.com/ethersphere/bee-dashboard/commit/f11bbd5008a78ef7d5c73fc2758ee4e2dafae01e))
+* used label in postage stamp list ([#220](https://www.github.com/ethersphere/bee-dashboard/issues/220)) ([0326568](https://www.github.com/ethersphere/bee-dashboard/commit/03265687ad630b0100da3134518b680327af1636))
+* wording in chequebook setup ([#211](https://www.github.com/ethersphere/bee-dashboard/issues/211)) ([e7188f4](https://www.github.com/ethersphere/bee-dashboard/commit/e7188f4a35c85204eef6a01ae6f1e679d076180c))
+
+
+## [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)
+
+
+### Features
+
+* add retry to accounting ([#166](https://www.github.com/ethersphere/bee-dashboard/issues/166)) ([a62243f](https://www.github.com/ethersphere/bee-dashboard/commit/a62243fe5c45b7dd9be6e92f82ebdf0b64bd8f0d))
+* add tooltips and health indicator to peers ([#169](https://www.github.com/ethersphere/bee-dashboard/issues/169)) ([480f6dc](https://www.github.com/ethersphere/bee-dashboard/commit/480f6dc7f9c58a4aae87e0dea7082a4bd3dc900b))
+* bee provider caching the state of the app and refreshing periodically ([#172](https://www.github.com/ethersphere/bee-dashboard/issues/172)) ([2624cf0](https://www.github.com/ethersphere/bee-dashboard/commit/2624cf04c939e87f025c1f4ff417808073742dab))
+* changing API urls does not need the app refresh ([#173](https://www.github.com/ethersphere/bee-dashboard/issues/173)) ([d6d03bf](https://www.github.com/ethersphere/bee-dashboard/commit/d6d03bf7c6d2705de22f43825b85b32c2f0181fb))
+* remove the last update component ([#179](https://www.github.com/ethersphere/bee-dashboard/issues/179)) ([56df3a2](https://www.github.com/ethersphere/bee-dashboard/commit/56df3a2561c3c00237b5d107eb054403af3012f8))
+* synchronized platform tabs ([#165](https://www.github.com/ethersphere/bee-dashboard/issues/165)) ([ec42eaf](https://www.github.com/ethersphere/bee-dashboard/commit/ec42eafc2b768ba06649f628c733e8d3440fdcaf))
+
+
+### Bug Fixes
+
+* enum index for supported platforms ([#170](https://www.github.com/ethersphere/bee-dashboard/issues/170)) ([dcec6e0](https://www.github.com/ethersphere/bee-dashboard/commit/dcec6e01887465c74a68feede52b476791bbefa7))
+* remove nested ternary operator and simplify ping peer functionality ([#181](https://www.github.com/ethersphere/bee-dashboard/issues/181)) ([2b120e4](https://www.github.com/ethersphere/bee-dashboard/commit/2b120e44ca5e01451cc43e362195c04587836a03))
+
+## [0.5.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.4.0...v0.5.0) (2021-08-09)
+
+
+### Features
+
+* updated troubleshooting instructions and links for mainnet ([#161](https://www.github.com/ethersphere/bee-dashboard/issues/161)) ([960ffb8](https://www.github.com/ethersphere/bee-dashboard/commit/960ffb8fdd6cbfe4928b758da6cac9ba94050c00))
+
+
+### Bug Fixes
+
+* amend readme ([#155](https://www.github.com/ethersphere/bee-dashboard/issues/155)) ([be8b885](https://www.github.com/ethersphere/bee-dashboard/commit/be8b88516b00d79a623798588d3d4dac3340e8b2))
+
+## [0.4.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.1...v0.4.0) (2021-06-29)
+
+
+### Features
+
+* display postage batch usage percentage ([#149](https://www.github.com/ethersphere/bee-dashboard/issues/149)) ([6f645dc](https://www.github.com/ethersphere/bee-dashboard/commit/6f645dc6c357cb9d86cec15e454b361bc871bec6))
+
+
+### Bug Fixes
+
+* clear dropzone state after upload ([#150](https://www.github.com/ethersphere/bee-dashboard/issues/150)) ([b190cac](https://www.github.com/ethersphere/bee-dashboard/commit/b190cac7064ad3dffb770c5a83d3db4a14d39607))
+
+### [0.3.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.0...v0.3.1) (2021-06-03)
+
+
+### Bug Fixes
+
+* don't display version alert when unable to retrieve version from bee node ([#138](https://www.github.com/ethersphere/bee-dashboard/issues/138)) ([5ace762](https://www.github.com/ethersphere/bee-dashboard/commit/5ace7629f2479499fe975dec8be4187ece6221ed))
+* typeerror in the postage stamps form ([#137](https://www.github.com/ethersphere/bee-dashboard/issues/137)) ([465df17](https://www.github.com/ethersphere/bee-dashboard/commit/465df177413afba5376682bd23a712066bd0385c))
+
+## [0.3.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.2.0...v0.3.0) (2021-06-02)
+
+
+### Features
+
+* added Dockerfile ([#75](https://www.github.com/ethersphere/bee-dashboard/issues/75)) ([aab0462](https://www.github.com/ethersphere/bee-dashboard/commit/aab0462047a3fcd87ba258b5486aede922865b1e))
+* added tolerance to version check and warning if not exact to what we tested ([#133](https://www.github.com/ethersphere/bee-dashboard/issues/133)) ([353db10](https://www.github.com/ethersphere/bee-dashboard/commit/353db10080b85b0e12e13991665297ec262d2806))
+* postage stamps support ([#115](https://www.github.com/ethersphere/bee-dashboard/issues/115)) ([4074a9d](https://www.github.com/ethersphere/bee-dashboard/commit/4074a9de5dae4aaa1654f7dfdd3e3343eaf2bf9b))
+* unified notification with notistack ([#127](https://www.github.com/ethersphere/bee-dashboard/issues/127)) ([bec8405](https://www.github.com/ethersphere/bee-dashboard/commit/bec84051a9582bf62a23f2080a6587a9f458b969))
+* upload files with postage stamps ([#126](https://www.github.com/ethersphere/bee-dashboard/issues/126)) ([92c727e](https://www.github.com/ethersphere/bee-dashboard/commit/92c727e5f5772f612fe04b750ef5373780ccba5c))
+
+
+### Bug Fixes
+
+* add git attributes ([#123](https://www.github.com/ethersphere/bee-dashboard/issues/123)) ([07f987e](https://www.github.com/ethersphere/bee-dashboard/commit/07f987e069cda2f28bc5ebf8958b9b0aa9d875dc))
+* add prod env variables ([#121](https://www.github.com/ethersphere/bee-dashboard/issues/121)) ([a603a86](https://www.github.com/ethersphere/bee-dashboard/commit/a603a86c1adcfb0dcc9995c95c4ee4411c41c25a))
+* replace http-serve with serve-handler ([#122](https://www.github.com/ethersphere/bee-dashboard/issues/122)) ([ba9b498](https://www.github.com/ethersphere/bee-dashboard/commit/ba9b498488dca989bbbda6110d0d22753b33ae8c))
+* troubleshooting on a mac and clearer CORS setup guide ([#131](https://www.github.com/ethersphere/bee-dashboard/issues/131)) ([9fee1aa](https://www.github.com/ethersphere/bee-dashboard/commit/9fee1aa68ac6dbc53615332bc0142a06f3e5f03f))
+
 ## [0.2.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.1.0...v0.2.0) (2021-05-20)
 
 This release supports the [Bee's 0.6.0 release](https://github.com/ethersphere/bee/releases/tag/v0.6.0) and is fully

CODEOWNERS

@@ -1 +1 @@
-* nugaon vojtechsimetka
+* @Cafe137 @vojtechsimetka

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:15.14-alpine AS build
+WORKDIR /src
+COPY . .
+RUN npm ci
+RUN npm run build
+
+FROM node:15.14-alpine AS final
+RUN npm i -g serve
+WORKDIR /app
+COPY --from=build /src/build .
+EXPOSE 8080
+ENTRYPOINT ["serve", "-l", "8080"]

README.md

@@ -6,44 +6,82 @@
 ![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
 ![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
 
-> An app which helps users to setup their Bee node and do actions like cash out cheques.
+> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
+> manage your postage stamps.
 
-**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.**
+**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.**
 
-![Status page](/ui_samples/status.png)
+This project is intended to be used with the latest released version of Bee. Using it with older 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).
 
-| Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
+![Status page](/ui_samples/info.png)
-|-------|---------|-------|----------|------|
-| ![Setup](/ui_samples/node_setup.png) | ![Files](/ui_samples/file_upload.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/peers.png) | ![Settings](/ui_samples/settings.png) |
 
+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/postage_stamps.png) |
 
 ## Table of Contents
 
 - [Install](#install)
 - [Usage](#usage)
+  - [Terminal](#terminal)
+  - [Docker](#docker)
 - [Contribute](#contribute)
+- [Development](#development)
+- [Maintainers](#maintainers)
 - [License](#license)
 
 ## Install
 
-```
+Install globally with npm. We require Node.js's version of at least 12.x and npm v6.x (or yarn v2.x).
-$ npm install -g @ethersphere/bee-dashboard
+
-$ bee-dashboard
+```sh
+npm install -g @ethersphere/bee-dashboard
 ```
 
-## Development
+## Usage
+
+:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
+setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
+To see where the config file is, consult the
+[official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
+
+### Terminal
+
+To start use:
+
+```sh
+bee-dashboard
+```
+
+This should open the webpage on [`http://localhost:8080`](http://localhost:8080)
+
+### Docker
+
+To build Docker image and run it, execute the following from inside project directory:
+
+```sh
+docker build . -t bee-dashboard
+docker run --rm -p 127.0.0.1:8080:8080 bee-dashboard
+```
+
+Bee dashboard is now available on [`http://localhost:8080`](http://localhost:8080)
+
+### Development
 
 ```sh
 git clone git@github.com:ethersphere/bee-dashboard.git
 
 cd  bee-dashboard
 
-npm ci
+npm i
-npm run build
+
-npm run serve
+npm start
 ```
 
-You can now access Bee Dashboard on [http://localhost:8080/](http://localhost:8080/)
+The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
 
 ## Contribute
 
@@ -51,12 +89,15 @@ There are some ways you can make this module better:
 
 - Consult our [open issues](https://github.com/ethersphere/bee-dashboard/issues) and take on one of them
 - Help our tests reach 100% coverage!
-- Join us in our [Mattermost chat](https://beehive.ethswarm.org/swarm/channels/swarm-javascript) if you have questions or want to give feedback
+- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or
+  want to give feedback
 
 ## Maintainers
 
-- [nugaon](https://github.com/nugaon)
 - [vojtechsimetka](https://github.com/vojtechsimetka)
+- [Cafe137](https://github.com/Cafe137)
+
+See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintainer).
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.2.0",
+  "version": "0.8.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -24,53 +24,59 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.9.0",
+    "@ethersphere/bee-js": "2.1.0",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "4.12.3",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/lab": "4.0.0-alpha.57",
-    "@types/react-router": "^5.1.13",
+    "@types/react-router": "5.1.13",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react-router-dom": "5.1.7",
-    "axios": "^0.21.1",
+    "axios": "0.21.1",
-    "bignumber.js": "^9.0.1",
+    "bignumber.js": "9.0.1",
-    "feather-icons": "^4.28.0",
+    "feather-icons": "4.28.0",
-    "http-serve": "^1.0.1",
+    "formik": "2.2.8",
-    "material-ui-dropzone": "^3.5.0",
+    "formik-material-ui": "3.0.1",
-    "qrcode.react": "^1.0.1",
+    "material-ui-dropzone": "3.5.0",
-    "react": "^17.0.2",
+    "notistack": "1.0.9",
-    "react-copy-to-clipboard": "^5.0.3",
+    "opener": "1.5.2",
-    "react-dom": "^17.0.2",
+    "qrcode.react": "1.0.1",
-    "react-feather": "^2.0.9",
+    "react": "17.0.2",
-    "react-identicons": "^1.2.5",
+    "react-copy-to-clipboard": "5.0.3",
-    "react-router-dom": "^5.2.0",
+    "react-dom": "17.0.2",
-    "react-syntax-highlighter": "^15.4.3"
+    "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/jest-dom": "5.12.0",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "11.2.6",
-    "@testing-library/user-event": "^13.1.5",
+    "@testing-library/user-event": "13.1.5",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "26.0.22",
-    "@types/node": "^14.14.41",
+    "@types/node": "14.14.41",
-    "@types/qrcode.react": "^1.0.1",
+    "@types/qrcode.react": "1.0.1",
-    "@types/react": "^17.0.3",
+    "@types/react": "17.0.3",
-    "@types/react-copy-to-clipboard": "^5.0.0",
+    "@types/react-copy-to-clipboard": "5.0.0",
-    "@types/react-dom": "^17.0.3",
+    "@types/react-dom": "17.0.3",
-    "@types/react-syntax-highlighter": "^13.5.0",
+    "@types/react-syntax-highlighter": "13.5.0",
-    "eslint": "^7.24.0",
+    "@types/semver": "7.3.6",
-    "eslint-config-prettier": "^8.2.0",
+    "eslint": "7.32.0",
-    "eslint-plugin-jest": "^24.3.5",
+    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-jest": "24.4.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-prettier": "3.4.1",
-    "prettier": "^2.2.1",
+    "eslint-plugin-react": "7.24.0",
+    "prettier": "2.3.2",
     "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
+    "typescript": "4.2.4",
-    "web-vitals": "^1.1.1"
+    "web-vitals": "1.1.1"
   },
   "scripts": {
     "prepare": "npm run build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "serve": "http-serve ./build -o",
+    "serve": "node ./serve.js",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\""
   },
@@ -95,5 +101,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=6.0.0",
+    "bee": ">=0.6.0"
   }
 }

public/serve.json

@@ -0,0 +1,12 @@
+{
+    "trailingSlash": false,
+    "headers": [
+        {
+          "source" : "*",
+          "headers" : [{
+            "key" : "Cache-Control",
+            "value" : "max-age=3600"
+          }]
+        }
+    ]    
+}

serve.js

@@ -1,15 +1,33 @@
 #!/usr/bin/env node
 
 const path = require('path')
-const serve = require('http-serve')
+const handler = require('serve-handler');
+const http = require('http');
 const opener = require('opener')
 
-const server = serve.createServer({
+const serverConfig = {
-  root: path.join(__dirname, 'build')
+  public: path.join(__dirname, 'build'),
+  trailingSlash: false,
+  rewrites: [
+    { source: "**", destination: "/index.html" },
+  ],
+  headers: [
+      {
+        source: "*",
+        headers: [{
+          key: "Cache-Control",
+          value: "max-age=3600"
+        }]
+      }
+  ]
+}
 
+const server = http.createServer((request, response) => {
+
+  return handler(request, response, serverConfig);
 })
  
-server.listen(8080, '127.0.0.1', function () {
+server.listen(8080, () => {
   console.log('Starting up Bee Dashboard on address http://localhost:8080')
   console.log('Hit CTRL-C to stop the server')
   opener('http://localhost:8080')

src/@types/react-identicons/index.d.ts

@@ -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
 }

src/App.tsx

@@ -1,45 +1,42 @@
-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 BaseRouter from './routes'
-import { lightTheme, darkTheme } from './theme'
+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 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 (
   <div className="App">
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
+    <ThemeProvider theme={theme}>
-        <CssBaseline />
+      <SettingsProvider>
+        <BeeProvider>
+          <StampsProvider>
+            <PlatformProvider>
+              <SnackbarProvider>
                 <Router>
+                  <>
+                    <CssBaseline />
+                    <Dashboard>
                       <BaseRouter />
+                    </Dashboard>
+                  </>
                 </Router>
+              </SnackbarProvider>
+            </PlatformProvider>
+          </StampsProvider>
+        </BeeProvider>
+      </SettingsProvider>
     </ThemeProvider>
   </div>
 )
-}
 
 export default App

src/assets/logo.svg

@@ -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>

src/assets/swarm-logo-1.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>

src/assets/swarm-logo-2.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>

src/assets/swarm-logo-orange.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>

src/components/AlertUploadSize.tsx

@@ -0,0 +1,38 @@
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import { ReactElement } from 'react'
+
+const LIMIT = 100_000_000 // 100 megabytes
+
+interface Props {
+  file: File
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+  }),
+)
+
+export default function UploadSizeAlert(props: Props): ReactElement | null {
+  const classes = useStyles()
+
+  const aboveLimit = props.file.size >= LIMIT
+
+  return (
+    <Collapse in={aboveLimit}>
+      <div className={classes.root}>
+        <Alert severity="warning">
+          <AlertTitle>Warning</AlertTitle>
+          The file you are trying to upload is above the recommended size. The chunks may not be synchronised properly
+          over the network.
+        </Alert>
+      </div>
+    </Collapse>
+  )
+}

src/components/AlertVersion.tsx

@@ -0,0 +1,54 @@
+import { ReactElement, useState, useContext } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import Collapse from '@material-ui/core/Collapse'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import { Context } from '../providers/Bee'
+import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginBottom: theme.spacing(2),
+    },
+  }),
+)
+
+export default function VersionAlert(): ReactElement | null {
+  const classes = useStyles()
+  const { isLoading, latestUserVersionExact } = useContext(Context)
+  const [open, setOpen] = useState<boolean>(true)
+
+  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === latestUserVersionExact
+
+  if (isLoading || !latestUserVersionExact) return null
+
+  return (
+    <Collapse in={!isExactlySupportedBeeVersion && open}>
+      <div className={classes.root}>
+        <Alert
+          severity="warning"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={() => {
+                setOpen(false)
+              }}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+        >
+          <AlertTitle>Warning</AlertTitle>
+          Your Bee node version (<code>{latestUserVersionExact}</code>) does not exactly match the Bee version we tested
+          the Bee Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality
+          may not work properly.
+        </Alert>
+      </div>
+    </Collapse>
+  )
+}

src/components/CashoutModal.tsx

@@ -1,14 +1,14 @@
-import { ReactElement, useState } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
-import { Snackbar, Container, CircularProgress } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
-
+import { ReactElement, useState, useContext } from 'react'
-import { beeDebugApi } from '../services/bee'
+import { Zap } from 'react-feather'
-
+import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 
 interface Props {
@@ -16,11 +16,11 @@ interface Props {
   uncashedAmount: string
 }
 
-export default function DepositModal({ peerId, uncashedAmount }: Props): ReactElement {
+export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactElement {
   const [open, setOpen] = useState<boolean>(false)
   const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
-  const [showToast, setToastVisibility] = useState<boolean>(false)
+  const { enqueueSnackbar } = useSnackbar()
-  const [toastContent, setToastContent] = useState<JSX.Element | null>(null)
+  const { beeDebugApi } = useContext(SettingsContext)
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -31,43 +31,38 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
   }
 
   const handleCashout = () => {
+    if (!beeDebugApi) return
+
     if (peerId) {
       setLoadingCashout(true)
-      beeDebugApi.chequebook
+      beeDebugApi
-        .peerCashout(peerId)
+        .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)
-          handleToast(
+          enqueueSnackbar(
             <span>
               Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res.transactionHash} network={'goerli'} />
+              <EthereumAddress hideBlockie transaction address={res} />
             </span>,
+            { variant: 'success' },
           )
         })
-        .catch(() => {
+        .catch((e: Error) => {
-          // FIXME: handle errors more gracefully
+          enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
-          handleToast(<span>Error with cashout</span>)
         })
         .finally(() => {
           setLoadingCashout(false)
         })
     } else {
-      handleToast(<span>Peer Id invalid</span>)
+      enqueueSnackbar(<span>Peer Id invalid</span>, { variant: 'error' })
     }
   }
 
-  const handleToast = (text: JSX.Element) => {
-    setToastContent(text)
-    setToastVisibility(true)
-    setTimeout(() => setToastVisibility(false), 7000)
-  }
-
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cashout
+        Cash out peer {peerId.substr(0, 8)}[…]
       </Button>
-      <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={showToast} message={toastContent} />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
         <DialogContent>

src/components/ClipboardCopy.tsx

@@ -1,25 +1,21 @@
-import { ReactElement, useState } from 'react'
+import type { ReactElement } from 'react'
-import { IconButton, Snackbar } from '@material-ui/core'
+import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Clipboard } from 'react-feather'
+import { useSnackbar } from 'notistack'
 
 interface Props {
   value: string
 }
 
-export default function ClipboardCopy(props: Props): ReactElement {
+export default function ClipboardCopy({ value }: Props): ReactElement {
-  const [copied, setCopied] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
-
+  const handleCopy = () => enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })
-  const handleCopy = () => {
-    setCopied(true)
-    setTimeout(() => setCopied(false), 3000)
-  }
 
   return (
     <div style={{ marginRight: '3px', marginLeft: '3px' }}>
-      <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={copied} message="Copied" />
       <IconButton color="primary" size="small" onClick={handleCopy}>
-        <CopyToClipboard text={props.value}>
+        <CopyToClipboard text={value}>
           <Clipboard style={{ height: '20px' }} />
         </CopyToClipboard>
       </IconButton>

src/components/CodeBlockTabs.tsx

@@ -1,13 +1,7 @@
-import React, { ReactElement, useEffect } from 'react'
+import { ReactElement, useContext } from 'react'
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles'
+import TabsContainer from './TabsContainer'
-import { Tabs, Tab, Box, Typography } from '@material-ui/core'
 import CodeBlock from './CodeBlock'
-
+import { Context } from '../providers/Platform'
-interface TabPanelProps {
-  children?: React.ReactNode
-  index: number
-  value: number
-}
 
 interface Props {
   linux: string
@@ -15,133 +9,23 @@ interface Props {
   showLineNumbers?: boolean
 }
 
-function a11yProps(index: number) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  }
-}
-
-function getOS() {
-  const userAgent = window.navigator.userAgent
-  const platform = window.navigator.platform
-  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
-  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
-  const iosPlatforms = ['iPhone', 'iPad', 'iPod']
-
-  if (macosPlatforms.includes(platform)) return 'macOS'
-
-  if (iosPlatforms.includes(platform)) return 'iOS'
-
-  if (windowsPlatforms.includes(platform)) return 'windows'
-
-  if (/Android/.test(userAgent)) return 'android'
-
-  if (/Linux/.test(platform)) return 'linux'
-
-  return null
-}
-
 export default function CodeBlockTabs(props: Props): ReactElement {
-  const [value, setValue] = React.useState(0)
+  const { platform, setPlatform } = useContext(Context)
-
-  const handleChange = (event: React.ChangeEvent<unknown>, newValue: number) => {
-    setValue(newValue)
-  }
-
-  useEffect(() => {
-    const os = getOS()
-
-    if (os === 'windows') {
-      setValue(0)
-    } else if (os === 'linux') {
-      setValue(0)
-    } else if (os === 'macOS') {
-      setValue(1)
-    }
-  }, [])
-
-  function TabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props
 
   return (
-      <div
+    <TabsContainer
-        role="tabpanel"
+      index={platform}
-        hidden={value !== index}
+      indexChanged={setPlatform}
-        id={`simple-tabpanel-${index}`}
+      values={[
-        aria-labelledby={`simple-tab-${index}`}
+        {
-        {...other}
+          label: 'Linux',
-      >
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />,
-        {value === index && (
+        },
-          <Box style={{ marginTop: '-12px' }}>
+        {
-            <Typography component="div">{children}</Typography>
+          label: 'macOS',
-          </Box>
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />,
-        )}
+        },
-      </div>
+      ]}
-    )
+    />
-  }
-
-  const AntTabs = withStyles({
-    root: {
-      borderBottom: '1px solid #e8e8e8',
-    },
-    indicator: {
-      backgroundColor: '#3f51b5',
-    },
-  })(Tabs)
-
-  interface StyledTabProps {
-    label: string
-  }
-
-  const AntTab = withStyles((theme: Theme) =>
-    createStyles({
-      root: {
-        textTransform: 'none',
-        minWidth: 72,
-        backgroundColor: 'transparent',
-        fontWeight: theme.typography.fontWeightRegular,
-        marginRight: theme.spacing(4),
-        fontFamily: [
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"',
-        ].join(','),
-        '&:hover': {
-          color: '#3f51b5',
-          opacity: 1,
-        },
-        '&$selected': {
-          color: '#3f51b5',
-          fontWeight: theme.typography.fontWeightMedium,
-        },
-        '&:focus': {
-          color: '#3f51b5',
-        },
-      },
-      selected: {},
-    }),
-  )((props: StyledTabProps) => <Tab disableRipple {...props} />)
-
-  return (
-    <div>
-      <AntTabs style={{ marginTop: '12px' }} value={value} onChange={handleChange} aria-label="ant example">
-        <AntTab label="Linux" {...a11yProps(0)} />
-        <AntTab label="MacOS" {...a11yProps(1)} />
-      </AntTabs>
-      <TabPanel value={value} index={0}>
-        <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />
-      </TabPanel>
-    </div>
   )
 }

src/components/ConnectToHost.tsx

@@ -1,62 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import { TextField, Button, CircularProgress, Container } from '@material-ui/core'
-
-interface Props {
-  defaultHost?: string
-  hostName: string
-}
-
-export default function ConnectToHost(props: Props): ReactElement {
-  const [hostInputVisible, toggleHostInputVisibility] = useState(false)
-  const [connectingToHost, setConnectingToHost] = useState(false)
-  const [host, setHost] = useState('')
-
-  const handleNewHostConnection = () => {
-    if (host) {
-      setConnectingToHost(true)
-      sessionStorage.setItem(props.hostName, host)
-      toggleHostInputVisibility(!hostInputVisible)
-      window.location.reload()
-    }
-  }
-
-  return (
-    <div>
-      {
-        // FIXME: this should be broken up
-        /* eslint-disable no-nested-ternary */
-        hostInputVisible ? (
-          <div style={{ display: 'flex' }}>
-            <TextField
-              defaultValue={props.defaultHost}
-              label="Enter host"
-              variant="outlined"
-              size="small"
-              onChange={e => setHost(e.target.value)}
-              style={{ marginRight: '15px', minWidth: '300px' }}
-            />
-            <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
-              Connect
-            </Button>
-            <Button
-              style={{ marginLeft: '7px' }}
-              onClick={() => toggleHostInputVisibility(!hostInputVisible)}
-              size="small"
-            >
-              Cancel
-            </Button>
-          </div>
-        ) : connectingToHost ? (
-          <Container style={{ textAlign: 'center', padding: '0px' }}>
-            <CircularProgress size={20} />
-          </Container>
-        ) : (
-          <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
-            Change host
-          </Button>
-        )
-        /* eslint-enable no-nested-ternary */
-      }
-    </div>
-  )
-}

src/components/EthereumAddress.tsx

@@ -7,7 +7,6 @@ import { ReactElement } from 'react'
 
 interface Props {
   address: string | undefined
-  network?: string
   hideBlockie?: boolean
   transaction?: boolean
   truncate?: boolean
@@ -37,9 +36,9 @@ export default function EthereumAddress(props: Props): ReactElement {
                     }
                   : { marginRight: '7px' }
               }
-              href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${
+              href={`${process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${
-                props.transaction ? 'tx' : 'address'
+                props.address
-              }/${props.address}`}
+              }`}
               target="_blank"
               rel="noreferrer"
             >

src/components/EthereumAddressCard.tsx

@@ -1,75 +0,0 @@
-import React, { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-
-import EthereumAddress from '../components/EthereumAddress'
-import { Skeleton } from '@material-ui/lab'
-
-import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-around',
-      flexWrap: 'wrap',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      flex: '1 0 auto',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  isLoadingNodeAddresses: boolean
-  chequebookAddress: ChequebookAddressResponse | null
-  isLoadingChequebookAddress: boolean
-}
-
-function EthereumAddressCard(props: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      {props.isLoadingNodeAddresses ? (
-        <div style={{ padding: '16px' }}>
-          <Skeleton width={300} height={30} animation="wave" />
-          <Skeleton width={300} height={50} animation="wave" />
-        </div>
-      ) : (
-        <div className={classes.details}>
-          <CardContent className={classes.content}>
-            <Typography variant="subtitle1" gutterBottom>
-              Ethereum Address
-            </Typography>
-            <EthereumAddress address={props.nodeAddresses?.ethereum} network={'goerli'} />
-          </CardContent>
-        </div>
-      )}
-      {props.isLoadingChequebookAddress ? (
-        <div style={{ padding: '16px' }}>
-          <Skeleton width={300} height={30} animation="wave" />
-          <Skeleton width={300} height={50} animation="wave" />
-        </div>
-      ) : (
-        <div className={classes.details}>
-          <CardContent className={classes.content}>
-            <Typography variant="subtitle1" gutterBottom>
-              Chequebook Contract Address
-            </Typography>
-            <EthereumAddress address={props.chequebookAddress?.chequebookAddress} network={'goerli'} />
-          </CardContent>
-        </div>
-      )}
-    </Card>
-  )
-}
-
-export default EthereumAddressCard

src/components/ExpandableList.tsx

@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      padding: 0,
+      margin: 0,
+      marginTop: theme.spacing(4),
+      '&:first-child': {
+        marginTop: 0,
+      },
+    },
+    rootLevel1: { marginTop: theme.spacing(1) },
+    rootLevel2: { marginTop: theme.spacing(0.5) },
+    header: {
+      backgroundColor: theme.palette.background.paper,
+    },
+    contentLevel0: {
+      marginTop: theme.spacing(1),
+    },
+    contentLevel12: {
+      marginTop: theme.spacing(0.25),
+    },
+    infoText: {
+      color: '#c9c9c9',
+    },
+  }),
+)
+
+interface Props {
+  children?: ReactNode
+  label: ReactNode
+  info?: ReactNode
+  level?: 0 | 1 | 2
+  defaultOpen?: boolean
+}
+
+export default function ExpandableList({ children, label, level, defaultOpen, info }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  let rootLevelClass = ''
+  let typographyVariant: 'h1' | 'h2' | 'h3' = 'h1'
+  let contentLevelClass = classes.contentLevel0
+
+  if (level === 1) {
+    rootLevelClass = classes.rootLevel1
+    typographyVariant = 'h2'
+    contentLevelClass = classes.contentLevel12
+  } else if (level === 2) {
+    rootLevelClass = classes.rootLevel2
+    typographyVariant = 'h3'
+    contentLevelClass = classes.contentLevel12
+  }
+
+  return (
+    <div className={`${classes.root} ${rootLevelClass}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
+        <div style={{ display: 'flex' }}>
+          {!open && (
+            <Typography variant="body2" className={classes.infoText}>
+              {info}
+            </Typography>
+          )}
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </div>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={contentLevelClass}>{children}</div>
+      </Collapse>
+    </div>
+  )
+}

src/components/ExpandableListItem.tsx

@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { Info } from 'react-feather'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      wordBreak: 'break-word',
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+  }),
+)
+
+interface Props {
+  label?: ReactNode
+  value?: ReactNode
+  tooltip?: string
+}
+
+export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  return (
+    <ListItem className={classes.header}>
+      <Grid container direction="row" justifyContent="space-between" alignItems="center">
+        {label && <Typography variant="body1">{label}</Typography>}
+        {value && (
+          <Typography variant="body2">
+            {value}
+            {tooltip && (
+              <Tooltip title={tooltip} placement="top" arrow>
+                <IconButton size="small" className={classes.copyValue}>
+                  <Info strokeWidth={1} />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Typography>
+        )}
+      </Grid>
+    </ListItem>
+  )
+}

src/components/ExpandableListItemActions.tsx

@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Grid } from '@material-ui/core'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    action: {
+      marginTop: theme.spacing(0.75),
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  children: ReactNode | ReactNode[]
+}
+
+export default function ExpandableListItemActions({ children }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  if (Array.isArray(children)) {
+    return (
+      <Grid container direction="row">
+        {children.map((a, i) => (
+          <Grid key={i} className={classes.action}>
+            {a}
+          </Grid>
+        ))}
+      </Grid>
+    )
+  }
+
+  return (
+    <Grid container direction="row">
+      <Grid className={classes.action}>{children}</Grid>
+    </Grid>
+  )
+}

src/components/ExpandableListItemInput.tsx

@@ -0,0 +1,145 @@
+import { ReactElement, ChangeEvent, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
+import { Edit, Minus, RotateCcw, Check } from 'react-feather'
+
+import ExpandableListItemActions from './ExpandableListItemActions'
+import ExpandableListItemNote from './ExpandableListItemNote'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+    unselectableLabel: {
+      cursor: 'default',
+      userSelect: 'none',
+      // Many browsers don't support yet the general user-select css property
+      WebkitUserSelect: 'none',
+      MozUserSelect: 'none',
+      msUserSelect: 'none',
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value?: string
+  placeholder?: string
+  helperText?: string
+  expandedOnly?: boolean
+  confirmLabel?: string
+  confirmLabelDisabled?: boolean
+  onChange?: (value: string) => void
+  onConfirm: (value: string) => void
+}
+
+export default function ExpandableListItemKey({
+  label,
+  value,
+  onConfirm,
+  onChange,
+  confirmLabel,
+  confirmLabelDisabled,
+  expandedOnly,
+  helperText,
+  placeholder,
+}: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(Boolean(expandedOnly))
+  const [inputValue, setInputValue] = useState<string>(value || '')
+  const toggleOpen = () => setOpen(!open)
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value)
+
+    if (onChange) onChange(e.target.value)
+  }
+
+  return (
+    <>
+      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+            {label && (
+              <Typography variant="body1" className={classes.unselectableLabel}>
+                {label}
+              </Typography>
+            )}
+            <Typography variant="body2">
+              <div>
+                {!open && value}
+                {!expandedOnly && (
+                  <IconButton size="small" className={classes.copyValue}>
+                    {open ? (
+                      <Minus onClick={toggleOpen} strokeWidth={1} />
+                    ) : (
+                      <Edit onClick={toggleOpen} strokeWidth={1} />
+                    )}
+                  </IconButton>
+                )}
+              </div>
+            </Typography>
+          </Grid>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <InputBase
+              value={inputValue}
+              placeholder={placeholder}
+              onChange={handleChange}
+              fullWidth
+              className={classes.content}
+              autoFocus
+            />
+          </Collapse>
+        </Grid>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+        <ExpandableListItemActions>
+          <Button
+            variant="contained"
+            disabled={
+              inputValue === value ||
+              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
+            }
+            startIcon={<Check size="1rem" />}
+            onClick={() => onConfirm(inputValue)}
+          >
+            {confirmLabel || 'Save'}
+          </Button>
+          <Button
+            variant="contained"
+            disabled={inputValue === value || inputValue === ''}
+            startIcon={<RotateCcw size="1rem" />}
+            onClick={() => setInputValue(value || '')}
+          >
+            Cancel
+          </Button>
+        </ExpandableListItemActions>
+      </Collapse>
+    </>
+  )
+}

src/components/ExpandableListItemKey.tsx

@@ -0,0 +1,114 @@
+import { ReactElement, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import { ListItem, Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { Eye, Minus } from 'react-feather'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+}
+
+const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
+
+function isPrefixedHexString(s: unknown): boolean {
+  return typeof s === 'string' && /^0x[0-9a-f]+$/i.test(s)
+}
+
+const split = (s: string): string[] => {
+  const nonPrefixLength = lengthWithoutPrefix(s)
+
+  if (nonPrefixLength % 6 === 0) return s.match(/(0x|.{6})/gi) || []
+
+  return s.match(/(0x|.{1,8})/gi) || []
+}
+
+export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const toggleOpen = () => setOpen(!open)
+
+  const tooltipClickHandler = () => setCopied(true)
+  const tooltipCloseHandler = () => setCopied(false)
+
+  const splitValues = split(value)
+  const hasPrefix = isPrefixedHexString(value)
+
+  return (
+    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          {label && <Typography variant="body1">{label}</Typography>}
+          <Typography variant="body2">
+            <div>
+              {!open && (
+                <span className={classes.copyValue}>
+                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                    <CopyToClipboard text={value}>
+                      <span onClick={tooltipClickHandler}>{`${
+                        hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]
+                      }[…]${splitValues[splitValues.length - 1]}`}</span>
+                    </CopyToClipboard>
+                  </Tooltip>
+                </span>
+              )}
+              <IconButton size="small" className={classes.copyValue}>
+                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
+              </IconButton>
+            </div>
+          </Typography>
+        </Grid>
+        <Collapse in={open} timeout="auto" unmountOnExit>
+          <div className={classes.content}>
+            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+              <CopyToClipboard text={value}>
+                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
+                <span onClick={tooltipClickHandler}>
+                  <span className={classes.copyValue}>
+                    {splitValues.map((s, i) => (
+                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
+                        {s}
+                      </Typography>
+                    ))}
+                  </span>
+                </span>
+              </CopyToClipboard>
+            </Tooltip>
+          </div>
+        </Collapse>
+      </Grid>
+    </ListItem>
+  )
+}

src/components/ExpandableListItemNote.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: '#F7F7F7',
+      marginBottom: theme.spacing(0.25),
+    },
+    typography: {
+      color: '#242424',
+    },
+  }),
+)
+
+interface Props {
+  children?: ReactNode | ReactNode[]
+}
+
+export default function ExpandableListItemNote({ children }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  return (
+    <ListItem className={classes.header}>
+      <Typography variant="body1" className={classes.typography}>
+        {children}
+      </Typography>
+    </ListItem>
+  )
+}

src/components/NavBar.tsx

@@ -1,61 +0,0 @@
-import { useState, ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Toolbar, Chip, 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,
-    },
-    network: {},
-  }),
-)
-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' }}>
-          <Chip style={{ marginLeft: '7px' }} size="small" label="Goerli" className={classes.network} />
-          <div style={{ width: '100%' }}>
-            <div style={{ float: 'right' }}>
-              <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
-                {props.themeMode === 'dark' ? <Moon /> : <Sun />}
-              </IconButton>
-              {/* <Chip 
-              label="Connect Wallet"
-              color="primary"
-              /> */}
-            </div>
-          </div>
-        </Toolbar>
-      </div>
-    </div>
-  )
-}

src/components/SideBar.tsx

@@ -1,61 +1,53 @@
-import { ReactElement } from 'react'
+import type { ReactElement } from 'react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+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 } from 'react-feather'
+import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
+import { Home, FileText, DollarSign, 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 Logo from '../assets/logo.svg'
-import { Health } from '@ethersphere/bee-js'
-
-const drawerWidth = 240
 
 const navBarItems = [
   {
-    label: 'Status',
+    label: 'Info',
-    id: 'status',
+    path: ROUTES.INFO,
-    path: '/',
+    icon: Home,
-    icon: Activity,
   },
   {
     label: 'Files',
-    id: 'files',
+    path: ROUTES.FILES,
-    path: '/files/',
     icon: FileText,
   },
+  {
+    label: 'Stamps',
+    path: ROUTES.STAMPS,
+    icon: Layers,
+  },
   {
     label: 'Accounting',
-    id: 'accounting',
+    path: ROUTES.ACCOUNTING,
-    path: '/accounting/',
     icon: DollarSign,
   },
-  {
-    label: 'Peers',
-    id: 'peers',
-    path: '/peers/',
-    icon: Share2,
-  },
   {
     label: 'Settings',
-    id: 'settings',
+    path: ROUTES.SETTINGS,
-    path: '/settings/',
     icon: Settings,
   },
 ]
 
+const drawerWidth = 300
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      display: 'flex',
+      flexWrap: 'nowrap',
-    },
+      minHeight: '100vh',
-    appBar: {
+      paddingTop: theme.spacing(8),
-      width: `calc(100% - ${drawerWidth}px)`,
+      paddingBottom: theme.spacing(8),
-      marginLeft: drawerWidth,
-    },
-    logo: {
-      padding: 1,
-      marginTop: 20,
     },
     drawer: {
       width: drawerWidth,
@@ -63,106 +55,79 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      backgroundColor: '#212121',
+    },
+    logo: {
+      marginLeft: theme.spacing(8),
+      marginRight: theme.spacing(8),
+    },
+    icon: {
+      height: theme.spacing(4),
+    },
+    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 {
+export default function SideBar(): ReactElement {
-  themeMode: string
-  health: boolean
-  nodeHealth: Health | null
-}
-
-export default function SideBar(props: Props): ReactElement {
   const classes = useStyles()
 
   return (
-    <div className={classes.root}>
+    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
-      <Drawer
+      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
-        className={classes.drawer}
+        <Grid className={classes.logo}>
-        variant="permanent"
+          <Link to={ROUTES.INFO}>
-        classes={{
+            <img alt="swarm" src={Logo} />
-          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' }}
-            />
           </Link>
-        </div>
+        </Grid>
+        <Grid>
           <List>
-          {navBarItems.map(item => (
+            {navBarItems.map(p => (
-            <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
+              <Link to={p.path} key={p.path} className={classes.link}>
-              <ListItem
+                <SideBarItem
-                button
+                  key={p.path}
-                selected={props.location.pathname === item.path}
+                  iconStart={<p.icon className={classes.icon} />}
-                className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
+                  path={p.path}
-              >
+                  label={p.label}
-                <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 : ''}
                 />
-              </ListItem>
               </Link>
             ))}
           </List>
-        <Divider />
+          <Divider className={classes.divider} />
           <List>
-          <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{ textDecoration: 'none' }}>
+            <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" className={classes.link}>
-            <ListItem button>
+              <SideBarItem
-              <ListItemText primary={'Docs'} />
+                iconStart={<BookOpen className={classes.icon} />}
-              <OpenInNewSharp fontSize="small" />
+                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
-            </ListItem>
+                label={<span>Docs</span>}
+              />
             </MUILink>
           </List>
-        <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
+        </Grid>
-          <ListItem>
+        <Grid>
-            <div style={{ marginRight: '30px' }}>
+          <Link to={ROUTES.STATUS} className={classes.link}>
-              <div
+            <SideBarStatus path={ROUTES.STATUS} />
-                style={{
+          </Link>
-                  backgroundColor: props.health ? '#32c48d' : '#c9201f',
+        </Grid>
-                  marginRight: '7px',
+      </Grid>
-                  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>
     </Drawer>
-    </div>
   )
 }

src/components/SideBarItem.tsx

@@ -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>
+  )
+}

src/components/SideBarStatus.tsx

@@ -0,0 +1,79 @@
+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'
+import StatusIcon from './StatusIcon'
+
+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',
+        color: 'white',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#2c2c2c',
+          color: 'white',
+        },
+      },
+    },
+    smallerText: {
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+interface Props {
+  path?: string
+}
+
+export default function SideBarItem({ path }: Props): ReactElement {
+  const { status, isLoading } = 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 style={{ marginLeft: '30px' }}>
+        <StatusIcon isOk={status.all} isLoading={isLoading} />
+      </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>
+  )
+}

src/components/StatCard.tsx

@@ -1,50 +0,0 @@
-import type { ReactElement } from 'react'
-
-import { makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-import { Skeleton } from '@material-ui/lab'
-
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  title: {
-    fontSize: 16,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-})
-
-interface Props {
-  label: string
-  statistic?: string
-  loading?: boolean
-}
-
-export default function StatCard({ loading, label, statistic }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <CardContent>
-        {loading && (
-          <>
-            <Skeleton width={180} height={25} animation="wave" />
-            <Skeleton width={180} height={35} animation="wave" />
-          </>
-        )}
-        {!loading && (
-          <>
-            <Typography className={classes.title} color="textSecondary" gutterBottom>
-              {label}
-            </Typography>
-            <Typography variant="h5" component="h2">
-              {statistic}
-            </Typography>
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}

src/components/StatusIcon.tsx

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react'
+import { CircularProgress } from '@material-ui/core'
+
+interface Props {
+  isOk: boolean
+  isLoading?: boolean
+  size?: number | string
+  className?: string
+}
+
+export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+  const s = size || '1rem'
+
+  if (isLoading) return <CircularProgress size={s} className={className} />
+
+  return (
+    <span
+      className={className}
+      style={{
+        backgroundColor: isOk ? '#1de600' : '#ff3a52',
+        height: s,
+        width: s,
+        borderRadius: '50%',
+        display: 'inline-block',
+      }}
+    />
+  )
+}

src/components/TabsContainer.tsx

@@ -0,0 +1,70 @@
+import React, { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Tab, Tabs } from '@material-ui/core'
+
+interface TabPanelProps {
+  children?: ReactNode
+  index: number
+  value: number
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && children}
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    content: {
+      marginTop: theme.spacing(2),
+    },
+  }),
+)
+
+interface TabsValues {
+  component: ReactNode
+  label: ReactNode
+}
+
+interface Props {
+  values: TabsValues[]
+  index?: number
+  indexChanged?: (index: number) => void
+}
+
+export default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {
+  const classes = useStyles()
+  const [value, setValue] = React.useState<number>(index || 0)
+
+  const handleChange = (event: React.ChangeEvent<Record<string, never>>, newValue: number) => {
+    if (indexChanged) indexChanged(newValue)
+    else setValue(newValue)
+  }
+
+  const v = index !== undefined ? index : value
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={v} onChange={handleChange} variant="fullWidth">
+        {values.map(({ label }, idx) => (
+          <Tab key={idx} label={label} />
+        ))}
+      </Tabs>
+      <div className={classes.content}>
+        {values.map(({ component }, idx) => (
+          <TabPanel key={idx} value={v} index={idx}>
+            {component}
+          </TabPanel>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/TopologyStats.tsx

@@ -1,28 +1,43 @@
 import type { Topology } from '@ethersphere/bee-js'
-import { Grid } from '@material-ui/core/'
 import type { ReactElement } from 'react'
-import StatCard from './StatCard'
+import { pickThreshold, ThresholdValues } from '../utils/threshold'
+import ExpandableListItem from './ExpandableListItem'
 
 interface Props {
-  isLoading: boolean
   topology: Topology | null
-  error: Error | null // FIXME: should display error
 }
 
-const TopologyStats = ({ isLoading, topology }: Props): ReactElement => (
+const TopologyStats = (props: Props): ReactElement => {
-  <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
+  const thresholds: ThresholdValues = {
-    <Grid container spacing={3}>
+    connectedPeers: pickThreshold('connectedPeers', props.topology?.connected || 0),
-      <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
+    population: pickThreshold('population', props.topology?.population || 0),
-        <StatCard label="Connected Peers" statistic={topology?.connected.toString()} loading={isLoading} />
+    depth: pickThreshold('depth', props.topology?.depth || 0),
-      </Grid>
+  }
-      <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
+
-        <StatCard label="Population" statistic={topology?.population.toString()} loading={isLoading} />
+  const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
-      </Grid>
+  const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
-      <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
+  const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
-        <StatCard label="Depth" statistic={topology?.depth.toString()} loading={isLoading} />
+
-      </Grid>
+  return (
-    </Grid>
+    <>
-  </Grid>
+      <ExpandableListItem label="Overall Health Indicator" value={percentageText} />
+      <ExpandableListItem
+        label="Connected Peers"
+        value={props.topology?.connected.toString()}
+        tooltip={thresholds.connectedPeers.explanation}
+      />
+      <ExpandableListItem
+        label="Population"
+        value={props.topology?.population.toString()}
+        tooltip={thresholds.population.explanation}
+      />
+      <ExpandableListItem
+        label="Depth"
+        value={props.topology?.depth.toString()}
+        tooltip={thresholds.depth.explanation}
+      />
+    </>
   )
+}
 
 export default TopologyStats

src/components/TroubleshootConnectionCard.tsx

@@ -1,47 +1,64 @@
 import type { ReactElement } from 'react'
 import { Link } from 'react-router-dom'
 
-import { makeStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
+import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
+import { ROUTES } from '../routes'
+import { Activity } from 'react-feather'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
     root: {
-    flexGrow: 1,
+      height: '100%',
-    marginTop: '20px',
     },
-  title: {
+    content: {
-    textAlign: 'center',
+      maxWidth: 500,
-    fontSize: 26,
+      marginBottom: theme.spacing(4),
+      '&:last-child': {
+        marginBottom: 0,
       },
-})
+    },
+    icon: {
+      height: '1rem',
+    },
+  }),
+)
 
 export default function TroubleshootConnectionCard(): ReactElement {
   const classes = useStyles()
 
   return (
-    <Card className={classes.root}>
+    <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
-      <CardContent>
+      <Grid item className={classes.content}>
-        <Typography className={classes.title} gutterBottom>
+        <Typography variant="h1" align="center">
-          Looks like your node is not connected
+          Uh oh, it looks like your node is not connected.
         </Typography>
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+      </Grid>
-          <strong>
+      <Grid item className={classes.content}>
-            <Link to="/">Click to run status checks</Link> on your nodes connection or check out the{' '}
+        <Typography align="center">
-            <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          Please check your node status to fix the problem. You can also check out the{' '}
+          <MuiLink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
             Swarm Bee Docs
-            </a>
+          </MuiLink>{' '}
-          </strong>
+          or ask for support on the{' '}
-        </div>
+          <MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
-
+            Ethereum Swarm Discord
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+          </MuiLink>
-          <p style={{ marginTop: '50px' }}>
+          .
-            Still not working? Drop us a message on the Ethereum Swarm{' '}
+        </Typography>
-            <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+      </Grid>
-              Discord
+      <Grid item className={classes.content}>
-            </a>
+        <Typography align="center">
-          </p>
+          <Button
-        </div>
+            component={Link}
-      </CardContent>
+            variant="contained"
-    </Card>
+            startIcon={<Activity className={classes.icon} />}
+            to={ROUTES.STATUS}
+          >
+            Check node status
+          </Button>
+        </Typography>
+      </Grid>
+    </Grid>
   )
 }

src/components/WithdrawDepositModal.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
@@ -6,9 +6,10 @@ import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
-import { FormHelperText, Snackbar } from '@material-ui/core'
+import FormHelperText from '@material-ui/core/FormHelperText'
 import { Token } from '../models/Token'
 import type { BigNumber } from 'bignumber.js'
+import { useSnackbar } from 'notistack'
 
 interface Props {
   successMessage: string
@@ -17,10 +18,11 @@ interface Props {
   label: string
   max?: BigNumber
   min?: BigNumber
-  action: (amount: bigint) => Promise<{ transactionHash: string }>
+  action: (amount: bigint) => Promise<string>
+  icon?: ReactNode
 }
 
-export default function WithdrawModal({
+export default function WithdrawDepositModal({
   successMessage,
   errorMessage,
   dialogMessage,
@@ -28,16 +30,17 @@ export default function WithdrawModal({
   max,
   label,
   action,
+  icon,
 }: Props): ReactElement {
   const [open, setOpen] = useState(false)
   const [amount, setAmount] = useState('')
   const [amountToken, setAmountToken] = useState<Token | null>(null)
   const [amountError, setAmountError] = useState<Error | null>(null)
-  const [showToast, setToastVisibility] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
-  const [toastContent, setToastContent] = useState('')
 
-  const handleClickOpen = () => {
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     setOpen(true)
+    e.stopPropagation()
   }
 
   const handleClose = () => {
@@ -48,20 +51,14 @@ export default function WithdrawModal({
     if (amountToken === null) return
 
     try {
-      const { transactionHash } = await action(amountToken.toBigInt as bigint)
+      const transactionHash = await action(amountToken.toBigInt as bigint)
       setOpen(false)
-      handleToast(`${successMessage} Transaction ${transactionHash}`)
+      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      handleToast(`${errorMessage} Error: ${e.message}`)
+      enqueueSnackbar(`${errorMessage} Error: ${e.message}`, { variant: 'error' })
     }
   }
 
-  const handleToast = (text: string) => {
-    setToastContent(text)
-    setToastVisibility(true)
-    setTimeout(() => setToastVisibility(false), 7000)
-  }
-
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
     const value = e.target.value
     setAmount(value)
@@ -80,10 +77,9 @@ export default function WithdrawModal({
 
   return (
     <div>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
         {label}
       </Button>
-      <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={showToast} message={toastContent} />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">{label}</DialogTitle>
         <DialogContent>

src/constants.ts

@@ -1,4 +0,0 @@
-// These values can for now be constants because their change in the app reloads the page
-export const apiHost = sessionStorage.getItem('api_host') || process.env.REACT_APP_BEE_HOST || 'http://localhost:1633'
-export const debugApiHost =
-  sessionStorage.getItem('debug_api_host') || process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635'

src/containers/DepositModal.tsx

@@ -1,18 +1,26 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { beeDebugApi } from '../services/bee'
+import { Download } from 'react-feather'
+import { Context as SettingsContext } from '../providers/Settings'
 
-import WDModal from '../components/WDModal'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { BigNumber } from 'bignumber.js'
 
 export default function DepositModal(): ReactElement {
+  const { beeDebugApi } = useContext(SettingsContext)
+
   return (
-    <WDModal
+    <WithdrawDepositModal
       successMessage="Successful deposit."
       errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
       label="Deposit"
+      icon={<Download size="1rem" />}
       min={new BigNumber(0)}
-      action={beeDebugApi.chequebook.deposit}
+      action={(amount: bigint) => {
+        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+
+        return beeDebugApi.depositTokens(amount.toString())
+      }}
     />
   )
 }

src/containers/WithdrawModal.tsx

@@ -1,18 +1,26 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { beeDebugApi } from '../services/bee'
+import { Upload } from 'react-feather'
+import { Context as SettingsContext } from '../providers/Settings'
 
-import WDModal from '../components/WDModal'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { BigNumber } from 'bignumber.js'
 
 export default function WithdrawModal(): ReactElement {
+  const { beeDebugApi } = useContext(SettingsContext)
+
   return (
-    <WDModal
+    <WithdrawDepositModal
       successMessage="Successful withdrawl."
       errorMessage="Error with withdrawing."
       dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
       label="Withdraw"
+      icon={<Upload size="1rem" />}
       min={new BigNumber(0)}
-      action={beeDebugApi.chequebook.withdraw}
+      action={(amount: bigint) => {
+        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+
+        return beeDebugApi.withdrawTokens(amount.toString())
+      }}
     />
   )
 }

src/hooks/accounting.ts

@@ -1,15 +1,12 @@
-import { LastCashoutActionResponse } from '@ethersphere/bee-js'
+import { LastCashoutActionResponse, BeeDebug } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
 import { Token } from '../models/Token'
-import { beeDebugApi } from '../services/bee'
+import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
-import { Balance, Settlement, useApiPeerBalances, useApiSettlements } from './apiHooks'
+import { Balance, Settlements, Settlement } from '../types'
 
 interface UseAccountingHook {
-  isLoading: boolean
   isLoadingUncashed: boolean
-  error: Error | null
+  totalUncashed: Token
-  totalsent: Token
-  totalreceived: Token
   accounting: Accounting[] | null
 }
 
@@ -64,51 +61,57 @@ function mergeAccounting(
       }),
   )
 
-  // If there are no cheques (and hence last cashout actions), we don't need to sort and can return values right away
+  // If there are no cheques (and hence last cashout actions)
-  if (!uncashedAmounts) return Object.values(accounting)
+  if (!uncashedAmounts) return Object.values(accounting).sort((a, b) => (a.peer < b.peer ? -1 : 1))
 
   uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
     accounting[peer].uncashedAmount = new Token(uncashedAmount)
   })
 
-  return Object.values(accounting).sort((a, b) =>
+  // Return sorted by the uncashed amount first and then by the peer id
-    b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber(),
+  return Object.values(accounting).sort((a, b) => {
-  )
+    const diff = b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber()
+
+    if (diff !== 0) return diff
+
+    return a.peer < b.peer ? -1 : 1
+  })
 }
 
-export const useAccounting = (): UseAccountingHook => {
+export const useAccounting = (
-  const settlements = useApiSettlements()
+  beeDebugApi: BeeDebug | null,
-  const balances = useApiPeerBalances()
+  settlements: Settlements | null,
-
+  balances: Balance[] | null,
-  const [err, setErr] = useState<Error | null>(null)
+): UseAccountingHook => {
   const [isLoadingUncashed, setIsloadingUncashed] = useState<boolean>(false)
   const [uncashedAmounts, setUncashedAmounts] = useState<LastCashoutActionResponse[] | undefined>(undefined)
 
-  const error = balances.error || settlements.error || err
-
   useEffect(() => {
     // We don't have any settlements loaded yet or we are already loading/have loaded the uncashed amounts
-    if (isLoadingUncashed || !settlements.settlements || uncashedAmounts || error) return
+    if (isLoadingUncashed || !beeDebugApi || !settlements || uncashedAmounts) return
 
     setIsloadingUncashed(true)
-    const promises = settlements.settlements.settlements
+    const promises = settlements.settlements
       .filter(({ received }) => received.toBigNumber.gt('0'))
-      .map(({ peer }) => beeDebugApi.chequebook.getPeerLastCashout(peer))
+      .map(({ peer }) => makeRetriablePromise(() => beeDebugApi.getLastCashoutAction(peer)))
 
-    Promise.all(promises)
+    Promise.allSettled(promises).then(settlements => {
-      .then(setUncashedAmounts)
+      const results = unwrapPromiseSettlements(settlements)
-      .catch(setErr)
+      setUncashedAmounts(results.fulfilled)
-      .finally(() => setIsloadingUncashed(false))
+      setIsloadingUncashed(false)
-  }, [settlements, isLoadingUncashed, uncashedAmounts, error])
+    })
+  }, [settlements, isLoadingUncashed, uncashedAmounts])
 
-  const accounting = mergeAccounting(balances.peerBalances, settlements.settlements?.settlements, uncashedAmounts)
+  const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
+
+  let totalUncashed: Token = new Token('0')
+  accounting?.forEach(
+    ({ uncashedAmount }) => (totalUncashed = new Token(totalUncashed.toBigNumber.plus(uncashedAmount.toBigNumber))),
+  )
 
   return {
-    isLoading: settlements.isLoadingSettlements || balances.isLoadingPeerBalances,
     isLoadingUncashed,
-    error,
+    totalUncashed,
     accounting,
-    totalsent: settlements.settlements?.totalSent || new Token('0'),
-    totalreceived: settlements.settlements?.totalReceived || new Token('0'),
   }
 }

src/hooks/apiHooks.tsx

@@ -1,406 +1,5 @@
 import { useState, useEffect } from 'react'
-
-import {
-  NodeAddresses,
-  ChequebookAddressResponse,
-  LastChequesResponse,
-  Health,
-  Peer,
-  Topology,
-  LastChequesForPeerResponse,
-} from '@ethersphere/bee-js'
-
-import { beeDebugApi, beeApi } from '../services/bee'
 import axios from 'axios'
-import { Token } from '../models/Token'
-
-export interface HealthHook {
-  health: boolean
-  isLoadingHealth: boolean
-  error: Error | null
-}
-export const useApiHealth = (): HealthHook => {
-  const [health, setHealth] = useState<boolean>(false)
-  const [isLoadingHealth, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeApi.status
-      .health()
-      .then(res => {
-        setHealth(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { health, isLoadingHealth, error }
-}
-
-export interface DebugHealthHook {
-  nodeHealth: Health | null
-  isLoadingNodeHealth: boolean
-  error: Error | null
-}
-
-export const useDebugApiHealth = (): DebugHealthHook => {
-  const [nodeHealth, setNodeHealth] = useState<Health | null>(null)
-  const [isLoadingNodeHealth, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.status
-      .nodeHealth()
-      .then(res => {
-        setNodeHealth(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { nodeHealth, isLoadingNodeHealth, error }
-}
-
-export interface NodeAddressesHook {
-  nodeAddresses: NodeAddresses | null
-  isLoadingNodeAddresses: boolean
-  error: Error | null
-}
-
-export const useApiNodeAddresses = (): NodeAddressesHook => {
-  const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
-  const [isLoadingNodeAddresses, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.connectivity
-      .addresses()
-      .then(res => {
-        setNodeAddresses(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { nodeAddresses, isLoadingNodeAddresses, error }
-}
-
-export interface NodeTopologyHook {
-  topology: Topology | null
-  isLoading: boolean
-  error: Error | null
-}
-
-export const useApiNodeTopology = (): NodeTopologyHook => {
-  const [topology, setNodeTopology] = useState<Topology | null>(null)
-  const [isLoading, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.connectivity
-      .topology()
-      .then(res => {
-        setNodeTopology(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { topology, isLoading, error }
-}
-export interface ChequebookAddressHook {
-  chequebookAddress: ChequebookAddressResponse | null
-  isLoadingChequebookAddress: boolean
-  error: Error | null
-}
-
-export const useApiChequebookAddress = (): ChequebookAddressHook => {
-  const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
-  const [isLoadingChequebookAddress, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .address()
-      .then(res => {
-        setChequebookAddress(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { chequebookAddress, isLoadingChequebookAddress, error }
-}
-
-export interface NodePeersHook {
-  peers: Peer[] | null
-  isLoading: boolean
-  error: Error | null
-}
-
-export const useApiNodePeers = (): NodePeersHook => {
-  const [peers, setPeers] = useState<Peer[] | null>(null)
-  const [isLoading, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.connectivity
-      .listPeers()
-      .then(res => {
-        setPeers(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { peers, isLoading, error }
-}
-
-export interface ChequebookBalance {
-  totalBalance: Token
-  availableBalance: Token
-}
-
-export interface ChequebookBalanceHook {
-  chequebookBalance: ChequebookBalance | null
-  isLoadingChequebookBalance: boolean
-  error: Error | null
-}
-
-export const useApiChequebookBalance = (): ChequebookBalanceHook => {
-  const [chequebookBalance, setChequebookBalance] = useState<ChequebookBalance | null>(null)
-  const [isLoadingChequebookBalance, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .balance()
-      .then(({ totalBalance, availableBalance }) => {
-        const balance = {
-          totalBalance: new Token(totalBalance),
-          availableBalance: new Token(availableBalance),
-        }
-        setChequebookBalance(balance)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { chequebookBalance, isLoadingChequebookBalance, error }
-}
-
-export interface Balance {
-  peer: string
-  balance: Token
-}
-
-export interface PeerBalanceHook {
-  peerBalances: Balance[] | null
-  isLoadingPeerBalances: boolean
-  error: Error | null
-}
-
-export const useApiPeerBalances = (): PeerBalanceHook => {
-  const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
-  const [isLoadingPeerBalances, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.balance
-      .balances()
-      .then(res => {
-        // for some reason sometimes these are numbers and not BigInts
-        const balances = res.balances.map(({ peer, balance }) => ({ peer, balance: new Token(balance) }))
-        setPeerBalances(balances)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { peerBalances, isLoadingPeerBalances, error }
-}
-
-export interface PeerChequesHook {
-  peerCheques: LastChequesResponse | null
-  isLoadingPeerCheques: boolean
-  error: Error | null
-}
-
-export const useApiPeerCheques = (): PeerChequesHook => {
-  const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
-  const [isLoadingPeerCheques, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .getLastCheques()
-      .then(res => {
-        setPeerCheques(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { peerCheques, isLoadingPeerCheques, error }
-}
-
-export interface PeerLastChequesHook {
-  peerCheque: LastChequesForPeerResponse | null
-  isLoadingPeerCheque: boolean
-  error: Error | null
-}
-
-export const useApiPeerLastCheque = (peerId: string): PeerLastChequesHook => {
-  const [peerCheque, setPeerCheque] = useState<LastChequesForPeerResponse | null>(null)
-  const [isLoadingPeerCheque, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .getPeerLastCheques(peerId)
-      .then(res => {
-        setPeerCheque(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [peerId])
-
-  return { peerCheque, isLoadingPeerCheque, error }
-}
-
-export interface Settlement {
-  peer: string
-  received: Token
-  sent: Token
-}
-
-export interface Settlements {
-  totalReceived: Token
-  totalSent: Token
-  settlements: Settlement[]
-}
-
-export interface SettlementsHook {
-  settlements: Settlements | null
-  isLoadingSettlements: boolean
-  error: Error | null
-}
-
-export const useApiSettlements = (): SettlementsHook => {
-  const [settlements, setSettlements] = useState<Settlements | null>(null)
-  const [isLoadingSettlements, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.settlements
-      .getSettlements()
-      .then(({ totalReceived, settlements, totalSent }) => {
-        const set = {
-          totalReceived: new Token(totalReceived),
-          totalSent: new Token(totalSent),
-          settlements: settlements.map(({ peer, received, sent }) => ({
-            peer,
-            received: new Token(received),
-            sent: new Token(sent),
-          })),
-        }
-        setSettlements(set)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { settlements, isLoadingSettlements, error }
-}
-
-export interface LastCashout {
-  peer: string
-  uncashedAmount: Token
-}
-
-export interface PeerLastCashoutHook {
-  peerCashout: LastCashout | null
-  isLoadingPeerCashout: boolean
-  error: Error | null
-}
-
-export const useApiPeerLastCashout = (peerId: string): PeerLastCashoutHook => {
-  const [peerCashout, setPeerCashout] = useState<LastCashout | null>(null)
-  const [isLoadingPeerCashout, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .getPeerLastCashout(peerId)
-      .then(({ peer, uncashedAmount }) => {
-        setPeerCashout({ peer, uncashedAmount: new Token(uncashedAmount.toString()) })
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [peerId])
-
-  return { peerCashout, isLoadingPeerCashout, error }
-}
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null

src/hooks/status.ts

@@ -1,82 +0,0 @@
-import { ChequebookAddressResponse } from '@ethersphere/bee-js'
-import {
-  ChequebookBalance,
-  useApiChequebookAddress,
-  useApiChequebookBalance,
-  useApiHealth,
-  useApiNodeAddresses,
-  useApiNodeTopology,
-  useDebugApiHealth,
-  useLatestBeeRelease,
-} from './apiHooks'
-
-export interface StatusChequebookHook extends StatusHookCommon {
-  chequebookBalance: ChequebookBalance | null
-  chequebookAddress: ChequebookAddressResponse | null
-}
-
-export const useStatusNodeVersion = (): StatusNodeVersionHook => {
-  const { latestBeeRelease, isLoadingLatestBeeRelease } = useLatestBeeRelease()
-  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
-
-  return {
-    isLoading: isLoadingNodeHealth || isLoadingLatestBeeRelease,
-    isOk: Boolean(latestBeeRelease && latestBeeRelease.name === `v${nodeHealth?.version?.split('-')[0]}`),
-    userVersion: nodeHealth?.version?.split('-')[0] || '-',
-    latestVersion: latestBeeRelease?.name.substring(1) || '-',
-    latestUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
-  }
-}
-
-export const useStatusEthereumConnection = (): StatusEthereumConnectionHook => {
-  const { isLoadingNodeAddresses, nodeAddresses } = useApiNodeAddresses()
-
-  return {
-    isLoading: isLoadingNodeAddresses,
-    isOk: Boolean(nodeAddresses?.ethereum),
-    nodeAddresses,
-  }
-}
-
-export const useStatusDebugConnection = (): StatusHookCommon => {
-  const { isLoadingNodeHealth, nodeHealth } = useDebugApiHealth()
-
-  return {
-    isLoading: isLoadingNodeHealth,
-    isOk: Boolean(nodeHealth?.status === 'ok'),
-  }
-}
-
-export const useStatusConnection = (): StatusHookCommon => {
-  const { isLoadingHealth, health } = useApiHealth()
-
-  return {
-    isLoading: isLoadingHealth,
-    isOk: health,
-  }
-}
-
-export const useStatusTopology = (): StatusTopologyHook => {
-  const { topology, isLoading } = useApiNodeTopology()
-
-  return {
-    isLoading,
-    isOk: Boolean(topology?.connected && topology?.connected > 0),
-    topology,
-  }
-}
-
-export const useStatusChequebook = (): StatusChequebookHook => {
-  const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
-  const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
-
-  return {
-    isLoading: isLoadingChequebookAddress || isLoadingChequebookBalance,
-    isOk:
-      Boolean(chequebookAddress?.chequebookAddress) &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
-    chequebookBalance,
-    chequebookAddress,
-  }
-}

src/layout/Dashboard.tsx

@@ -1,80 +1,49 @@
-import { useState, useEffect, 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'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 
 import SideBar from '../components/SideBar'
-import NavBar from '../components/NavBar'
 
-import { useApiHealth, useDebugApiHealth } from '../hooks/apiHooks'
+import { Context } from '../providers/Bee'
-import { RouteComponentProps } from 'react-router'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    toolbar: theme.mixins.toolbar,
     content: {
-      marginLeft: '240px',
-      flexGrow: 1,
       backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
+      minHeight: '100vh',
-      paddingBottom: '65px',
-    },
-    footer: {
-      marginLeft: '240px',
-      backgroundColor: theme.palette.background.default,
-      position: 'fixed',
-      bottom: 0,
-      flexGrow: 1,
-      width: '-webkit-fill-available',
-      padding: theme.spacing(2),
-      textAlign: 'center',
-    },
-    logo: {
-      height: '20px',
-      marginRight: '7px',
     },
   }),
 )
 
-interface Props extends RouteComponentProps {
+interface Props {
   children?: ReactElement
 }
 
 const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
-  const [themeMode, toggleThemeMode] = useState('light')
+  const { isLoading } = useContext(Context)
-
-  // FIXME: handle errrors and loading
-  const { health } = useApiHealth()
-  const { nodeHealth } = useDebugApiHealth()
-
-  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 (
-    <div>
+    <div style={{ display: 'flex' }}>
-      <SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
+      <SideBar />
-      <NavBar themeMode={themeMode} />
+      <Container className={classes.content}>
         <ErrorBoundary>
-        <main className={classes.content}>{props.children}</main>
+          <>
+            <AlertVersion />
+            {isLoading ? (
+              <div style={{ textAlign: 'center', width: '100%' }}>
+                <CircularProgress />
+              </div>
+            ) : (
+              props.children
+            )}
+          </>
         </ErrorBoundary>
+      </Container>
     </div>
   )
 }

src/pages/accounting/AccountCard.tsx

@@ -1,105 +0,0 @@
-import { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Theme } from '@material-ui/core/'
-import { Skeleton } from '@material-ui/lab'
-import WithdrawModal from '../../containers/WithdrawModal'
-import DepositModal from '../../containers/DepositModal'
-
-import type { ChequebookAddressResponse } from '@ethersphere/bee-js'
-import { Token } from '../../models/Token'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    buttons: {
-      display: 'flex',
-      columnGap: theme.spacing(1),
-    },
-    gridContainer: {
-      display: 'flex',
-      width: '100%',
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      columnGap: theme.spacing(1),
-      rowGap: theme.spacing(1),
-      flex: '0 1 auto',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-    },
-    chequebookActions: {
-      justifyContent: 'space-between',
-      display: 'flex',
-      marginBottom: theme.spacing(1),
-    },
-  }),
-)
-
-interface ChequebookBalance {
-  totalBalance: Token
-  availableBalance: Token
-}
-
-interface Props {
-  chequebookAddress: ChequebookAddressResponse | null
-  chequebookBalance: ChequebookBalance | null
-  totalsent: Token
-  totalreceived: Token
-  isLoading: boolean
-}
-
-function AccountCard({ totalreceived, totalsent, chequebookBalance, isLoading }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div className={classes.chequebookActions}>
-        <Typography component="h2" variant="h6">
-          Chequebook
-        </Typography>
-        <div className={classes.buttons}>
-          <WithdrawModal />
-          <DepositModal />
-        </div>
-      </div>
-
-      <Card className={classes.root}>
-        {!isLoading && (
-          <CardContent className={classes.gridContainer}>
-            <div>
-              <Typography component="h2" variant="h6" color="primary" gutterBottom>
-                Total Balance
-              </Typography>
-              <Typography variant="h5">{chequebookBalance?.totalBalance.toFixedDecimal()} BZZ</Typography>
-            </div>
-            <div>
-              <Typography component="h2" variant="h6" color="primary" gutterBottom>
-                Available Uncommitted Balance
-              </Typography>
-              <Typography variant="h5">{chequebookBalance?.availableBalance.toFixedDecimal()} BZZ</Typography>
-            </div>
-            <div>
-              <Typography component="h2" variant="h6" color="primary" gutterBottom>
-                Total Sent / Received
-              </Typography>
-              <Typography variant="h5">
-                {totalsent.toFixedDecimal()} / {totalreceived.toFixedDecimal()} BZZ
-              </Typography>
-            </div>
-          </CardContent>
-        )}
-        {isLoading && (
-          <div className={classes.gridContainer}>
-            <Skeleton width={180} height={110} animation="wave" />
-            <Skeleton width={180} height={110} animation="wave" />
-            <Skeleton width={180} height={110} animation="wave" />
-          </div>
-        )}
-      </Card>
-    </div>
-  )
-}
-
-export default AccountCard

src/pages/accounting/BalancesTable.tsx

@@ -1,94 +0,0 @@
-import type { ReactElement } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
-
-import ClipboardCopy from '../../components/ClipboardCopy'
-import CashoutModal from '../../components/CashoutModal'
-import PeerDetailDrawer from './PeerDetail'
-import { Accounting } from '../../hooks/accounting'
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  values: {
-    textAlign: 'right',
-    fontFamily: 'monospace, monospace',
-  },
-})
-interface Props {
-  isLoadingUncashed: boolean
-  accounting: Accounting[] | null
-}
-
-function BalancesTable({ accounting, isLoadingUncashed }: Props): ReactElement | null {
-  if (accounting === null) return null
-  const classes = useStyles()
-
-  return (
-    <TableContainer component={Paper}>
-      <Table className={classes.table} size="small" aria-label="Balances Table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Peer</TableCell>
-            <TableCell align="right">Outstanding Balance</TableCell>
-            <TableCell align="right">Settlements Sent / Received</TableCell>
-            <TableCell align="right">Total</TableCell>
-            <TableCell align="right">Uncashed Amount</TableCell>
-            <TableCell />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {accounting.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
-            <TableRow key={peer}>
-              <TableCell>
-                <div style={{ display: 'flex' }}>
-                  <small>
-                    <PeerDetailDrawer peerId={peer} />
-                  </small>
-                  <ClipboardCopy value={peer} />
-                </div>
-              </TableCell>
-              <TableCell className={classes.values}>
-                <span
-                  style={{
-                    color: balance.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
-                  }}
-                >
-                  {balance.toFixedDecimal()}
-                </span>{' '}
-                BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                -{sent.toFixedDecimal()} / {received.toFixedDecimal()} BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                <span
-                  style={{
-                    color: total.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
-                  }}
-                >
-                  {total.toFixedDecimal()}
-                </span>{' '}
-                BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                {isLoadingUncashed && 'loading...'}
-                {!isLoadingUncashed && (
-                  <>{uncashedAmount.toBigNumber.isGreaterThan('0') ? uncashedAmount.toFixedDecimal() : '0'} BZZ</>
-                )}
-              </TableCell>
-              <TableCell className={classes.values}>
-                {uncashedAmount.toBigNumber.isGreaterThan('0') && (
-                  <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export default BalancesTable

src/pages/accounting/PeerBalances.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react'
+
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+
+import CashoutModal from '../../components/CashoutModal'
+import { Accounting } from '../../hooks/accounting'
+import type { Token } from '../../models/Token'
+
+interface Props {
+  isLoadingUncashed: boolean
+  totalUncashed: Token
+  accounting: Accounting[] | null
+}
+
+export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
+  return (
+    <ExpandableList
+      label={`Peers (${accounting?.length || 0})`}
+      info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
+    >
+      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
+      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
+        <ExpandableList
+          key={peer}
+          label={`Peer ${peer.substr(0, 8)}[…]`}
+          level={1}
+          info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
+        >
+          <ExpandableListItemKey label="Peer ID" value={peer} />
+          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Settlements Sent / Received"
+            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Uncashed Amount"
+            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} BZZ`}
+          />
+          {uncashedAmount.toBigNumber.isGreaterThan('0') && (
+            <ExpandableListItemActions>
+              <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
+            </ExpandableListItemActions>
+          )}
+        </ExpandableList>
+      ))}
+    </ExpandableList>
+  )
+}

src/pages/accounting/PeerDetail.tsx

@@ -1,23 +0,0 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@material-ui/core'
-
-function truncStringPortion(str: string, firstCharCount = 10, endCharCount = 10) {
-  return `${str.substring(0, firstCharCount)}...${str.substring(str.length - endCharCount, str.length)}`
-}
-
-interface Props {
-  peerId: string
-}
-
-export default function PeerDetail(props: Props): ReactElement {
-  return (
-    <Typography
-      variant="button"
-      style={{
-        fontFamily: 'monospace, monospace',
-      }}
-    >
-      {truncStringPortion(props.peerId)}
-    </Typography>
-  )
-}

src/pages/accounting/index.tsx

@@ -1,72 +1,52 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
-import { Container, CircularProgress } from '@material-ui/core'
 
-import AccountCard from '../accounting/AccountCard'
+import PeerBalances from './PeerBalances'
-import BalancesTable from './BalancesTable'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-
+import { Context as BeeContext } from '../../providers/Bee'
-import {
+import { Context as SettingsContext } from '../../providers/Settings'
-  useApiNodeAddresses,
-  useApiChequebookAddress,
-  useApiChequebookBalance,
-  useApiHealth,
-  useDebugApiHealth,
-} from '../../hooks/apiHooks'
 import { useAccounting } from '../../hooks/accounting'
-
+import ExpandableList from '../../components/ExpandableList'
-const useStyles = makeStyles((theme: Theme) =>
+import ExpandableListItem from '../../components/ExpandableListItem'
-  createStyles({
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-    root: {
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-      width: '100%',
+import WithdrawModal from '../../containers/WithdrawModal'
-      display: 'grid',
+import DepositModal from '../../containers/DepositModal'
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
 
 export default function Accounting(): ReactElement {
-  const classes = useStyles()
+  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
+    useContext(BeeContext)
+  const { beeDebugApi } = useContext(SettingsContext)
 
-  const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
-  const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
-  const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
-  const { health, isLoadingHealth } = useApiHealth()
-  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
-  const { isLoading, totalsent, totalreceived, accounting, isLoadingUncashed, error } = useAccounting()
 
-  if (isLoadingHealth || isLoadingNodeHealth) {
+  if (!status.all) return <TroubleshootConnectionCard />
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (nodeHealth?.status !== 'ok' || !health) return <TroubleshootConnectionCard />
 
   return (
-    <div className={classes.root}>
+    <div>
-      <AccountCard
+      <ExpandableList label="Chequebook" defaultOpen>
-        chequebookAddress={chequebookAddress}
+        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-        isLoading={isLoadingChequebookAddress || isLoading || isLoadingChequebookBalance}
+        <ExpandableListItem
-        chequebookBalance={chequebookBalance}
+          label="Available Uncommitted Balance"
-        totalsent={totalsent}
+          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-        totalreceived={totalreceived}
         />
-      <EthereumAddressCard
+        <ExpandableListItem
-        nodeAddresses={nodeAddresses}
+          label="Total Cheques Amount Sent"
-        isLoadingNodeAddresses={isLoadingNodeAddresses}
+          value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
-        chequebookAddress={chequebookAddress}
-        isLoadingChequebookAddress={isLoadingChequebookAddress}
         />
-      {error && (
+        <ExpandableListItem
-        <Container style={{ textAlign: 'center', padding: '50px' }}>
+          label="Total Cheques Amount Received"
-          Error loading accounting details: {error.message}
+          value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
-        </Container>
+        />
-      )}
+        <ExpandableListItemActions>
-      {!error && <BalancesTable accounting={accounting} isLoadingUncashed={isLoadingUncashed} />}
+          <WithdrawModal />
+          <DepositModal />
+        </ExpandableListItemActions>
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
     </div>
   )
 }

src/pages/files/Download.tsx

@@ -0,0 +1,28 @@
+import { ReactElement, useState, useContext } from 'react'
+import { Context as SettingsContext } from '../../providers/Settings'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { Utils } from '@ethersphere/bee-js'
+
+export default function Files(): ReactElement {
+  const { apiUrl } = useContext(SettingsContext)
+
+  const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
+
+  const validateChange = (value: string) => {
+    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
+    else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+  }
+
+  return (
+    <ExpandableListItemInput
+      label="Swarm Hash"
+      onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
+      onChange={validateChange}
+      helperText={referenceError}
+      confirmLabel={'Download'}
+      confirmLabelDisabled={Boolean(referenceError)}
+      placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
+      expandedOnly
+    />
+  )
+}

src/pages/files/SelectStamp.tsx

@@ -0,0 +1,44 @@
+import React, { ReactElement } from 'react'
+import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  stamps: EnrichedPostageBatch[] | null
+  selectedStamp: EnrichedPostageBatch | null
+  setSelected: (stamp: EnrichedPostageBatch) => void
+}
+
+export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props): ReactElement | null {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+
+  if (!stamps) return null
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => setAnchorEl(null)
+
+  return (
+    <div>
+      <Button variant="contained" aria-haspopup="true" onClick={handleClick}>
+        Change
+      </Button>
+      <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+        {stamps.map(stamp => (
+          <MenuItem
+            key={stamp.batchID}
+            onClick={() => {
+              setSelected(stamp)
+              handleClose()
+            }}
+            selected={stamp.batchID === selectedStamp?.batchID}
+          >
+            <ListItemIcon>{stamp.usageText}</ListItemIcon>
+            <Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}

src/pages/files/Upload.tsx

@@ -0,0 +1,163 @@
+import { Button, CircularProgress, Container, Avatar, Chip, Typography } from '@material-ui/core'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { DropzoneArea } from 'material-ui-dropzone'
+import { useSnackbar } from 'notistack'
+import { RotateCcw, Check } from 'react-feather'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import UploadSizeAlert from '../../components/AlertUploadSize'
+import ClipboardCopy from '../../components/ClipboardCopy'
+import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+import { Context as SettingsContext } from '../../providers/Settings'
+import CreatePostageStamp from '../stamps/CreatePostageStampModal'
+import SelectStamp from './SelectStamp'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemNote from '../../components/ExpandableListItemNote'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    content: { marginTop: theme.spacing(2) },
+    loadingProgress: { textAlign: 'center', padding: '50px' },
+  }),
+)
+
+const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+
+export default function Files(): ReactElement {
+  const classes = useStyles()
+  const [dropzoneKey, setDropzoneKey] = useState(0)
+  const [file, setFile] = useState<File | null>(null)
+  const [uploadReference, setUploadReference] = useState('')
+  const [isUploadingFile, setIsUploadingFile] = useState(false)
+
+  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
+
+  const { isLoading, error, stamps, refresh } = useContext(Context)
+  const { beeApi } = useContext(SettingsContext)
+  const { enqueueSnackbar } = useSnackbar()
+
+  useEffect(() => {
+    refresh()
+  }, [])
+
+  // Choose a postage stamp that has the lowest usage
+  useEffect(() => {
+    if (!selectedStamp && stamps && stamps.length > 0) {
+      const stamp = stamps.reduce((prev, curr) => {
+        if (curr.usage < prev.usage) return curr
+
+        return prev
+      }, stamps[0])
+
+      setSelectedStamp(stamp)
+    }
+  }, [isLoading, error, stamps, selectedStamp])
+
+  const uploadFile = () => {
+    if (file === null || selectedStamp === null) return
+
+    if (!beeApi) return
+
+    setIsUploadingFile(true)
+    beeApi
+      .uploadFile(selectedStamp.batchID, file)
+      .then(hash => setUploadReference(hash.reference))
+      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
+      .finally(() => setIsUploadingFile(false))
+  }
+
+  const uploadNew = () => {
+    setTimeout(() => {
+      setFile(null)
+      setDropzoneKey(dropzoneKey + 1)
+      setUploadReference('')
+    }, 0)
+  }
+
+  const handleChange = (files?: File[]) => {
+    setUploadReference('')
+
+    if (files) {
+      setFile(files[0])
+    }
+  }
+
+  return (
+    <>
+      <DropzoneArea
+        key={'dropzone-' + dropzoneKey}
+        onChange={handleChange}
+        filesLimit={1}
+        maxFileSize={MAX_FILE_SIZE}
+      />
+      <div className={classes.content}>
+        {/* We have file and can upload display stamp selection */}
+        {file && !isUploadingFile && !uploadReference && (
+          <>
+            <ExpandableListItemNote>
+              To upload this file to your node, you need a postage stamp. You can buy a new one or you can use an
+              existing stamp (providing it’s sufficient for this file).
+            </ExpandableListItemNote>
+            {selectedStamp && (
+              <ExpandableListItem
+                label={
+                  <>
+                    Upload with Postage Stamp{' '}
+                    <Chip
+                      avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
+                      label={<Typography variant="body2">{selectedStamp.batchID.substr(0, 8)}[…]</Typography>}
+                      deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
+                      onDelete={() => {} /* eslint-disable-line*/}
+                      variant="outlined"
+                    />
+                  </>
+                }
+                value={<SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />}
+              />
+            )}
+            {!selectedStamp && (
+              <ExpandableListItemActions>
+                <CreatePostageStamp />
+              </ExpandableListItemActions>
+            )}
+          </>
+        )}
+
+        {/* We have file and can upload display upload button */}
+        {file && !uploadReference && (
+          <>
+            <ExpandableListItemActions>
+              <Button
+                variant="contained"
+                disabled={!file && isUploadingFile && !selectedStamp}
+                onClick={() => uploadFile()}
+                startIcon={<Check size="1rem" />}
+              >
+                Upload
+              </Button>
+              {isUploadingFile && (
+                <Container className={classes.loadingProgress}>
+                  <CircularProgress />
+                </Container>
+              )}
+            </ExpandableListItemActions>
+            <UploadSizeAlert file={file} />
+          </>
+        )}
+
+        {/* File has already been uploaded */}
+        {uploadReference && (
+          <>
+            <ExpandableListItemKey label="Swarm Reference" value={uploadReference} />
+            <ExpandableListItemActions>
+              <Button variant="contained" onClick={uploadNew} startIcon={<RotateCcw size="1rem" />}>
+                Upload New File
+              </Button>
+            </ExpandableListItemActions>
+          </>
+        )}
+      </div>
+    </>
+  )
+}

src/pages/files/index.tsx

@@ -1,94 +1,28 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, useContext } from 'react'
-
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import {
-  Paper,
-  InputBase,
-  IconButton,
-  Typography,
-  Container,
-  CircularProgress,
-  FormHelperText,
-} from '@material-ui/core'
-import { Search } from '@material-ui/icons'
 
+import Download from './Download'
+import Upload from './Upload'
+import TabsContainer from '../../components/TabsContainer'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { useApiHealth, useDebugApiHealth } from '../../hooks/apiHooks'
+import { Context as BeeContext } from '../../providers/Bee'
-import { apiHost } from '../../constants'
-import { Utils } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      padding: '2px 4px',
-      display: 'flex',
-      alignItems: 'center',
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1,
-    },
-    iconButton: {
-      padding: 10,
-    },
-    divider: {
-      height: 28,
-      margin: 4,
-    },
-  }),
-)
 
 export default function Files(): ReactElement {
-  const classes = useStyles()
+  const { status } = useContext(BeeContext)
 
-  const [referenceInput, setReferenceInput] = useState('')
+  if (!status.all) return <TroubleshootConnectionCard />
-  const [referenceError, setReferenceError] = useState<Error | null>(null)
-  const { health, isLoadingHealth } = useApiHealth()
-  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
-
-  const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setReferenceInput(e.target.value)
-
-    if (Utils.Hex.isHexString(e.target.value, 64)) setReferenceError(null)
-    else setReferenceError(new Error('Incorrect format of swarm hash'))
-  }
-
-  if (isLoadingHealth || isLoadingNodeHealth) {
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (!health || nodeHealth?.status !== 'ok') return <TroubleshootConnectionCard />
 
   return (
-    <Container maxWidth="sm">
+    <TabsContainer
-      <div style={{ marginBottom: '7px' }}>
+      values={[
-        <Typography variant="button" color="primary" style={{ marginRight: '7px' }}>
+        {
-          Download
+          label: 'download',
-        </Typography>
+          component: <Download />,
-      </div>
+        },
-      <Paper className={classes.root}>
+        {
-        <InputBase
+          label: 'upload',
-          className={classes.input}
+          component: <Upload />,
-          placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
+        },
-          inputProps={{ 'aria-label': 'retrieve file from swarm' }}
+      ]}
-          value={referenceInput}
-          onChange={handleReferenceChange}
     />
-        <IconButton
-          href={`${apiHost}/files/${referenceInput}`}
-          target="_blank"
-          disabled={referenceError !== null || !referenceInput}
-          className={classes.iconButton}
-          aria-label="download"
-        >
-          <Search />
-        </IconButton>
-      </Paper>
-      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
-    </Container>
   )
 }

src/pages/info/index.tsx

@@ -0,0 +1,60 @@
+import { ReactElement, useContext } from 'react'
+import { Button } from '@material-ui/core'
+
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import TopologyStats from '../../components/TopologyStats'
+
+export default function Status(): ReactElement {
+  const {
+    status,
+    latestUserVersion,
+    isLatestBeeVersion,
+    latestBeeVersionUrl,
+    topology,
+    nodeAddresses,
+    chequebookAddress,
+  } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      <ExpandableList label="Bee Node" defaultOpen>
+        <ExpandableListItem
+          label="Agent"
+          value={
+            <div>
+              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+                Bee
+              </a>
+              {` ${latestUserVersion || '-'} `}
+              <Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
+                {isLatestBeeVersion ? 'latest' : 'update'}
+              </Button>
+            </div>
+          }
+        />
+        <ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
+        <ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
+        <ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
+
+        <ExpandableList level={1} label="Underlay addresses">
+          {nodeAddresses?.underlay.map(addr => (
+            <ExpandableListItem key={addr} value={addr} />
+          ))}
+        </ExpandableList>
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <ExpandableList label="Connectivity" defaultOpen>
+        <TopologyStats topology={topology} />
+      </ExpandableList>
+    </div>
+  )
+}

src/pages/peers/PeerTable.tsx

@@ -1,113 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  TableHead,
-  Button,
-  Paper,
-  Tooltip,
-  Container,
-  CircularProgress,
-} from '@material-ui/core'
-import { Autorenew } from '@material-ui/icons'
-
-import { beeDebugApi } from '../../services/bee'
-import type { Peer } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-})
-
-interface Props {
-  peers: Peer[] | null
-  isLoading: boolean
-  error: Error | null
-}
-
-function PeerTable(props: Props): ReactElement {
-  const classes = useStyles()
-
-  const [peerLatency, setPeerLatency] = useState([{ peerId: '', rtt: '', loading: false }])
-
-  const PingPeer = (peerId: string) => {
-    setPeerLatency([...peerLatency, { peerId: peerId, rtt: '', loading: true }])
-    beeDebugApi.connectivity
-      .ping(peerId)
-      .then(res => {
-        setPeerLatency([...peerLatency, { peerId: peerId, rtt: res.rtt, loading: false }])
-      })
-      .catch(() => {
-        setPeerLatency([...peerLatency, { peerId: peerId, rtt: 'error', loading: false }])
-      })
-  }
-
-  if (props.isLoading) {
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (props.error || props.peers === null) {
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <p>Failed to load peers</p>
-      </Container>
-    )
-  }
-
-  return (
-    <div>
-      <TableContainer component={Paper}>
-        <Table className={classes.table} aria-label="simple table">
-          <TableHead>
-            <TableRow>
-              <TableCell>Index</TableCell>
-              <TableCell>Peer Id</TableCell>
-              <TableCell align="right">Actions</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.peers.map((peer: Peer, idx: number) => (
-              <TableRow key={peer.address}>
-                <TableCell component="th" scope="row">
-                  {idx + 1}
-                </TableCell>
-                <TableCell>{peer.address}</TableCell>
-                <TableCell align="right">
-                  <Tooltip title="Ping node">
-                    <Button color="primary" onClick={() => PingPeer(peer.address)}>
-                      {
-                        // FIXME: this should be broken up
-                        /* eslint-disable no-nested-ternary */
-                        peerLatency.find(item => item.peerId === peer.address) ? (
-                          peerLatency.filter(item => item.peerId === peer.address)[0].loading ? (
-                            <CircularProgress size={20} />
-                          ) : (
-                            peerLatency.filter(item => item.peerId === peer.address)[0].rtt
-                          )
-                        ) : (
-                          <Autorenew />
-                        )
-                        /* eslint-enable no-nested-ternary */
-                      }
-                    </Button>
-                  </Tooltip>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  )
-}
-
-export default PeerTable

src/pages/peers/index.tsx

@@ -1,32 +0,0 @@
-import { Container, CircularProgress } from '@material-ui/core/'
-import PeerTable from './PeerTable'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-
-import { useApiNodeTopology, useApiNodePeers, useDebugApiHealth } from '../../hooks/apiHooks'
-import TopologyStats from '../../components/TopologyStats'
-import { ReactElement } from 'react'
-
-export default function Peers(): ReactElement {
-  const topology = useApiNodeTopology()
-  const debugHealth = useDebugApiHealth()
-  const peers = useApiNodePeers()
-
-  if (debugHealth.isLoadingNodeHealth) {
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (debugHealth.error) {
-    return <TroubleshootConnectionCard />
-  }
-
-  return (
-    <>
-      <TopologyStats {...topology} />
-      <PeerTable {...peers} />
-    </>
-  )
-}

src/pages/settings/index.tsx

@@ -1,84 +1,15 @@
-import React, { ReactElement, useState } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Paper, Container, TextField, Typography, Button } from '@material-ui/core'
+import { Context as SettingsContext } from '../../providers/Settings'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 
 export default function Settings(): ReactElement {
-  const [refreshVisibility, toggleRefreshVisibility] = useState(false)
+  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl } = useContext(SettingsContext)
-  const [host, setHost] = useState('')
-  const [debugHost, setDebugHost] = useState('')
-
-  const handleNewHostConnection = () => {
-    if (host) {
-      sessionStorage.setItem('api_host', host)
-    }
-
-    if (debugHost) {
-      sessionStorage.setItem('debug_api_host', debugHost)
-    }
-
-    if (host || debugHost) {
-      toggleRefreshVisibility(!refreshVisibility)
-      window.location.reload()
-    }
-  }
 
   return (
-    <div>
+    <ExpandableList label="API Settings" defaultOpen>
-      <Container>
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
-        <Typography variant="h4" gutterBottom>
+      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
-          Settings
+    </ExpandableList>
-        </Typography>
-        <Paper>
-          <TextField
-            label="API Endpoint"
-            style={{ margin: 0 }}
-            placeholder="ex: 127.0.0.0.1:1633"
-            helperText="Enter node host override / port"
-            fullWidth
-            defaultValue={
-              sessionStorage.getItem('api_host') ? sessionStorage.getItem('api_host') : process.env.REACT_APP_BEE_HOST
-            }
-            margin="normal"
-            InputLabelProps={{
-              shrink: true,
-            }}
-            onChange={e => {
-              setHost(e.target.value)
-              toggleRefreshVisibility(true)
-            }}
-            variant="filled"
-          />
-        </Paper>
-        <Paper style={{ marginTop: '20px' }}>
-          <TextField
-            label="Debug API Endpoint"
-            style={{ margin: 0 }}
-            placeholder="ex: 127.0.0.0.1:1635"
-            helperText="Enter node debug host override / port"
-            fullWidth
-            defaultValue={
-              sessionStorage.getItem('debug_api_host')
-                ? sessionStorage.getItem('debug_api_host')
-                : process.env.REACT_APP_BEE_DEBUG_HOST
-            }
-            onChange={e => {
-              setDebugHost(e.target.value)
-              toggleRefreshVisibility(true)
-            }}
-            margin="normal"
-            InputLabelProps={{
-              shrink: true,
-            }}
-            variant="filled"
-          />
-        </Paper>
-        {refreshVisibility ? (
-          <div style={{ marginTop: '20px' }}>
-            <Button variant="outlined" color="primary" onClick={() => handleNewHostConnection()}>
-              Save
-            </Button>
-          </div>
-        ) : null}
-      </Container>
-    </div>
   )
 }

src/pages/stamps/CreatePostageStampModal.tsx

@@ -0,0 +1,161 @@
+import React, { ReactElement, useContext } from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import BigNumber from 'bignumber.js'
+import { FormikHelpers, Form, Field, Formik } from 'formik'
+import { TextField } from 'formik-material-ui'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context } from '../../providers/Stamps'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { useSnackbar } from 'notistack'
+
+interface FormValues {
+  depth?: string
+  amount?: string
+  label?: string
+}
+type FormErrors = Partial<FormValues>
+const initialFormValues: FormValues = {
+  depth: '',
+  amount: '',
+  label: '',
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      margin: theme.spacing(1),
+      position: 'relative',
+    },
+    field: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    buttonProgress: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: -12,
+      marginBottom: -12,
+    },
+  }),
+)
+
+interface Props {
+  label?: string
+}
+
+export default function FormDialog({ label }: Props): ReactElement {
+  const classes = useStyles()
+  const [open, setOpen] = React.useState(false)
+  const { refresh } = useContext(Context)
+  const { beeApi } = useContext(SettingsContext)
+  const handleClickOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+  const { enqueueSnackbar } = useSnackbar()
+
+  return (
+    <Formik
+      initialValues={initialFormValues}
+      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
+        try {
+          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+          if (!values.depth || !values.amount) return
+
+          if (!beeApi) return
+
+          const amount = BigInt(values.amount)
+          const depth = Number.parseInt(values.depth)
+          const options = values.label ? { label: values.label } : undefined
+          await beeApi.createPostageBatch(amount.toString(), depth, options)
+          actions.resetForm()
+          await refresh()
+          handleClose()
+        } catch (e) {
+          enqueueSnackbar(`Error: ${e.message}`, { variant: 'error' })
+          actions.setSubmitting(false)
+        }
+      }}
+      validate={(values: FormValues) => {
+        const errors: FormErrors = {}
+
+        // Depth
+        if (!values.depth) errors.depth = 'Required field'
+        else {
+          const depth = new BigNumber(values.depth)
+
+          if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
+          else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
+          else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
+        }
+
+        // Amount
+        if (!values.amount) errors.amount = 'Required field'
+        else {
+          const amount = new BigNumber(values.amount)
+
+          if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
+          else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
+        }
+
+        // Label
+        if (values.label && !/^[0-9a-z]*$/i.test(values.label)) errors.label = 'Label must be an alphanumeric string'
+
+        return errors
+      }}
+    >
+      {({ submitForm, isValid, isSubmitting, values }) => (
+        <Form>
+          <Button variant="contained" onClick={handleClickOpen}>
+            {label || 'Buy Postage Stamp'}
+            {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
+          </Button>
+          <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+            <DialogTitle id="form-dialog-title">Purchase new postage stamp</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                Provide the depth, amount and optionally the label of the postage stamp. Please refer to the{' '}
+                <a href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive" target="blank">
+                  official bee docs
+                </a>{' '}
+                to understand these values.
+              </DialogContentText>
+              <Field
+                component={TextField}
+                required
+                name="depth"
+                autoFocus
+                label="Depth"
+                fullWidth
+                className={classes.field}
+              />
+              <Field component={TextField} required name="amount" label="Amount" fullWidth className={classes.field} />
+              <Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={handleClose} variant="contained">
+                Cancel
+              </Button>
+              <div className={classes.wrapper}>
+                <Button
+                  disabled={isSubmitting || !isValid || !values.amount || !values.depth}
+                  type="submit"
+                  variant="contained"
+                  onClick={submitForm}
+                >
+                  Create
+                  {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
+                </Button>
+              </div>
+            </DialogActions>
+          </Dialog>
+        </Form>
+      )}
+    </Formik>
+  )
+}

src/pages/stamps/StampsTable.tsx

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+
+interface Props {
+  postageStamps: EnrichedPostageBatch[] | null
+}
+
+function StampsTable({ postageStamps }: Props): ReactElement | null {
+  if (postageStamps === null) return null
+
+  return (
+    <ExpandableList label="Postage Stamps" defaultOpen>
+      {postageStamps.map(({ batchID, usageText }) => (
+        <ExpandableList key={batchID} label={`${batchID.substr(0, 8)}[…]`} level={1} info={`${usageText} used`}>
+          <ExpandableListItemKey label="Batch ID" value={batchID} />
+          <ExpandableListItem label="Usage" value={usageText} />
+        </ExpandableList>
+      ))}
+    </ExpandableList>
+  )
+}
+
+export default StampsTable

src/pages/stamps/index.tsx

@@ -0,0 +1,59 @@
+import { ReactElement, useContext, useEffect } from 'react'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import { Container, CircularProgress } from '@material-ui/core'
+
+import StampsTable from './StampsTable'
+import CreatePostageStampModal from './CreatePostageStampModal'
+
+import { Context as StampsContext } from '../../providers/Stamps'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      width: '100%',
+      display: 'grid',
+    },
+    actions: {
+      display: 'flex',
+      width: '100%',
+      flex: '0 1 auto',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+    },
+  }),
+)
+
+export default function Accounting(): ReactElement {
+  const classes = useStyles()
+  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
+  const { status } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  useEffect(() => {
+    start()
+
+    return () => stop()
+  }, [])
+
+  return (
+    <div className={classes.root}>
+      {error && (
+        <Container style={{ textAlign: 'center', padding: '50px' }}>
+          Error loading postage stamps details: {error.message}
+        </Container>
+      )}
+      {!error && (
+        <>
+          <div className={classes.actions}>
+            <CreatePostageStampModal />
+            <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
+          </div>
+          <StampsTable postageStamps={stamps} />
+        </>
+      )}
+    </div>
+  )
+}

src/pages/status/NodeSetupWorkflow.tsx

@@ -1,178 +0,0 @@
-import { ReactElement, useEffect, useState } 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, Sync, 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 { StatusChequebookHook } from '../../hooks/status'
-
-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
-  isLoading: boolean
-  component: ReactElement
-}
-
-interface Props {
-  nodeVersion: StatusNodeVersionHook
-  ethereumConnection: StatusEthereumConnectionHook
-  debugApiConnection: StatusHookCommon
-  apiConnection: StatusHookCommon
-  topology: StatusTopologyHook
-  chequebook: StatusChequebookHook
-}
-
-export default function NodeSetupWorkflow({
-  nodeVersion,
-  ethereumConnection,
-  debugApiConnection,
-  apiConnection,
-  topology,
-  chequebook,
-}: Props): ReactElement {
-  const classes = useStyles()
-  const [activeStep, setActiveStep] = useState(-1)
-
-  const steps: Step[] = [
-    {
-      label: 'Connected to Node DebugAPI',
-      isOk: debugApiConnection.isOk,
-      isLoading: debugApiConnection.isLoading,
-      component: <DebugConnectionCheck {...debugApiConnection} />,
-    },
-    {
-      label: 'Running latest Bee version',
-      isOk: nodeVersion.isOk,
-      isLoading: nodeVersion.isLoading,
-      component: <VersionCheck {...nodeVersion} />,
-    },
-    {
-      label: 'Connected to Ethereum Blockchain',
-      isOk: ethereumConnection.isOk,
-      isLoading: ethereumConnection.isLoading,
-      component: <EthereumConnectionCheck {...ethereumConnection} />,
-    },
-    {
-      label: 'Deployed and Funded Chequebook',
-      isOk: chequebook.isOk,
-      isLoading: chequebook.isLoading,
-      component: <ChequebookDeployFund ethereumAddress={ethereumConnection.nodeAddresses?.ethereum} {...chequebook} />,
-    },
-    {
-      label: 'Connected to Node API',
-      isOk: apiConnection.isOk,
-      isLoading: apiConnection.isLoading,
-      component: <NodeConnectionCheck {...apiConnection} />,
-    },
-    {
-      label: 'Connected to Peers',
-      isOk: topology.isOk,
-      isLoading: topology.isLoading,
-      component: <PeerConnection {...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 (!steps.every(step => !step.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
-        <span style={{ marginLeft: '25px' }}>
-          <Button variant="outlined" size="small" onClick={() => window.location.reload()}>
-            <Sync />
-            <span style={{ marginLeft: '7px' }}>Refresh Checks</span>
-          </Button>
-        </span>
-      </Typography>
-      <Stepper nonLinear activeStep={activeStep} orientation="vertical">
-        {steps.map(({ label, isOk, component, isLoading }, index) => (
-          <Step key={label}>
-            <StepLabel
-              disabled={isLoading}
-              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>
-  )
-}

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,43 +1,48 @@
-import { Typography } from '@material-ui/core/'
+import { useContext } from 'react'
-import EthereumAddress from '../../../components/EthereumAddress'
 import DepositModal from '../../../containers/DepositModal'
 import type { ReactElement } from 'react'
-import type { StatusChequebookHook } from '../../../hooks/status'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-interface Props extends StatusChequebookHook {
+const ChequebookDeployFund = (): ReactElement | null => {
-  ethereumAddress?: string
+  const { status, isLoading, chequebookAddress } = useContext(Context)
-}
+  const isOk = status.chequebook
-
-const ChequebookDeployFund = ({
-  isLoading,
-  chequebookAddress,
-  chequebookBalance,
-  ethereumAddress,
-}: Props): ReactElement | null => {
-  if (isLoading) return null
 
   return (
-    <div>
+    <ExpandableList
-      <p style={{ marginBottom: '20px', display: 'flex' }}>
+      label={
-        {chequebookAddress?.chequebookAddress && <DepositModal />}
+        <>
-      </p>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Chequebook Deployment & Funding
-      <div style={{ marginBottom: '10px' }}>
+        </>
-        {!(chequebookAddress?.chequebookAddress && chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) && (
+      }
-          <div>
+    >
-            <span>
+      <ExpandableListItemNote>
-              Your chequebook is either not deployed or funded. Join{' '}
+        {isOk ? (
-              <a href="https://discord.gg/ykCupZMuww">our discord channel</a>, get verified and send a message{' '}
+          'Your chequebook is deployed and funded'
-              <pre>sprinkle {ethereumAddress || '<YOUR BEE NODE ETH ADDRESS>'}</pre> in the <pre>#faucet-request</pre>{' '}
+        ) : (
-              channel to get Goerli ETH and Goerli BZZ token.
+          <>
-            </span>
+            Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
-          </div>
+            network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
+            the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
+            transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
+            network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+            <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          </>
         )}
-      </div>
+      </ExpandableListItemNote>
-      <Typography variant="subtitle1" gutterBottom>
+      {chequebookAddress && (
-        Chequebook Address
+        <>
-      </Typography>
+          <ExpandableListItemKey label="Chequebook Address" value={chequebookAddress.chequebookAddress} />
-      <EthereumAddress address={chequebookAddress?.chequebookAddress} network={'goerli'} />
+          <ExpandableListItemActions>
-    </div>
+            <DepositModal />
+          </ExpandableListItemActions>
+        </>
+      )}
+    </ExpandableList>
   )
 }
 

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -1,55 +1,46 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
 import MuiAlert from '@material-ui/lab/Alert'
-import { ExpandMoreSharp } from '@material-ui/icons/'
 
-import ConnectToHost from '../../../components/ConnectToHost'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import { debugApiHost } from '../../../constants'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context as SettingsContext } from '../../../providers/Settings'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusHookCommon
+export default function NodeConnectionCheck(): ReactElement | null {
-
+  const { status, isLoading } = useContext(Context)
-export default function NodeConnectionCheck({ isLoading, isOk }: Props): ReactElement | null {
+  const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
-  if (isLoading) return null
+  const isOk = status.debugApiConnection
-
-  const changeDebugApiUrl = (
-    <div style={{ display: 'flex', marginTop: '25px', marginBottom: '25px' }}>
-      <span style={{ marginRight: '15px' }}>
-        Debug API (<Typography variant="button">{debugApiHost}</Typography>)
-      </span>
-      <ConnectToHost hostName={'debug_api_host'} defaultHost={debugApiHost} />
-    </div>
-  )
-
-  if (isOk) {
-    return changeDebugApiUrl
-  }
 
   return (
-    <div>
+    <ExpandableList
-      {changeDebugApiUrl}
+      label={
+        <>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee Debug API
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk
+          ? 'The connection to the Bee nodes deug API has been successful'
+          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+      </ExpandableListItemNote>
+      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
 
-      <div>
+      {!isOk && (
-        <Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
+        <ExpandableList level={1} label="Troubleshoot">
-          We cannot connect to your nodes debug API at <Typography variant="button">{debugApiHost}</Typography>. Please
+          <ExpandableListItem
-          check the following to troubleshoot your issue.
+            label={
-          <Accordion style={{ marginTop: '20px' }}>
-            <AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
-              <Typography>Troubleshoot</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Typography component="div">
               <ol>
                 <li>Check the status of your node by running the below command to see if your node is running.</li>
-                  <CodeBlockTabs
+                <CodeBlockTabs showLineNumbers linux={`sudo systemctl status bee`} mac={`brew services list`} />
-                    showLineNumbers
-                    linux={`sudo systemctl status bee`}
-                    mac={`brew services status swarm-bee`}
-                  />
                 <li>
                   If your node is running, check your firewall settings to make sure that port 1635 (or your custom
-                    specified port) is bound to localhost. If your node is not running try executing the below command
+                  specified port) is bound to localhost. If your node is not running try executing the below command to
-                    to start your bee node
+                  start your bee node
                 </li>
                 <MuiAlert
                   style={{ marginTop: '10px', marginBottom: '10px' }}
@@ -57,10 +48,10 @@ export default function NodeConnectionCheck({ isLoading, isOk }: Props): ReactEl
                   variant="filled"
                   severity="error"
                 >
-                    Your debug node API should never be completely open to the internet. If you want to connect
+                  Your debug node API should never be completely open to the internet. If you want to connect remotely,
-                    remotely, make sure your firewall settings are set to only allow specific trusted IP addresses and
+                  make sure your firewall settings are set to only allow specific trusted IP addresses and block all
-                    block all other ports. A simple google search for &quot;what is my ip&quot; will show you your
+                  other ports. A simple google search for &quot;what is my ip&quot; will show you your computers public
-                    computers public IP address to allow.
+                  IP address to allow.
                 </MuiAlert>
                 <CodeBlockTabs
                   showLineNumbers
@@ -71,26 +62,26 @@ export default function NodeConnectionCheck({ isLoading, isOk }: Props): ReactEl
                 <CodeBlockTabs
                   showLineNumbers
                   linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
-                    mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
+                  mac={`brew services list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
                 />
                 <li>
                   Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross
                   Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
                   <strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
-                    <strong>cors-allowed-origins</strong> must be set to your host domain or IP. If edits are made to
+                  <strong>cors-allowed-origins</strong> must be set to your host domain or IP (you can also use the
-                    the configuration run the restart command below for changes to take effect.
+                  wildcard <code>{"cors-allowed-origins: ['*']"}</code>). If edits are made to the configuration run the
+                  restart command below for changes to take effect.
                 </li>
                 <CodeBlockTabs
                   showLineNumbers
                   linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
-                    mac={`sudo vi /etc/bee/bee.yaml \nbrew services restart swarm-bee`}
+                  mac={`sudo vi /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
                 />
               </ol>
-              </Typography>
+            }
-            </AccordionDetails>
+          />
-          </Accordion>
+        </ExpandableList>
-        </Typography>
+      )}
-      </div>
+    </ExpandableList>
-    </div>
   )
 }

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -1,40 +1,42 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Typography } from '@material-ui/core/'
+import ExpandableList from '../../../components/ExpandableList'
-import EthereumAddress from '../../../components/EthereumAddress'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusEthereumConnectionHook
+export default function EthereumConnectionCheck(): ReactElement | null {
+  const { status, isLoading, nodeAddresses } = useContext(Context)
+  const isOk = status.blockchainConnection
 
-export default function EthereumConnectionCheck({ isLoading, isOk, nodeAddresses }: Props): ReactElement | null {
-  if (isLoading) return null
-
-  if (isOk) {
   return (
-      <div>
+    <ExpandableList
-        <Typography variant="subtitle1" gutterBottom>
+      label={
-          Node Address
+        <>
-        </Typography>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Blockchain
-        <EthereumAddress address={nodeAddresses?.ethereum} network={'goerli'} />
+        </>
-      </div>
-    )
       }
-
+    >
-  return (
+      <ExpandableListItemNote>
-    <p>
+        {isOk ? (
-      Your Bee node must have access to the Ethereum blockchain, so that it can interact and deploy your chequebook
+          'Your node is connected to the xDai blockchain'
+        ) : (
+          <>
+            Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
             contract. You can run{' '}
-      <a href="https://github.com/goerli/testnet" rel="noreferrer" target="_blank">
+            <a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
-        your own Goerli node
+              your own xDai node
             </a>
-      , or use a provider such as{' '}
+            , or use a provider instead - we recommend{' '}
-      <a href="https://rpc.slock.it/goerli" rel="noreferrer" target="_blank">
+            <a href="https://getblock.io/" rel="noreferrer" target="_blank">
-        rpc.slock.it/goerli
+              Getblock
-      </a>{' '}
-      or{' '}
-      <a href="https://infura.io/" rel="noreferrer" target="_blank">
-        Infura
             </a>
-      . By default, Bee expects a local Goerli node at http://localhost:8545. To use a provider instead, simply change
+            . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change
-      your <strong>--swap-endpoint</strong> in your configuration file.
+            the <strong>swap-endpoint</strong> in your configuration file.
-    </p>
+          </>
+        )}
+      </ExpandableListItemNote>
+      {nodeAddresses?.ethereum && <ExpandableListItemKey label="Ethereum Address" value={nodeAddresses?.ethereum} />}
+    </ExpandableList>
   )
 }

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -1,42 +1,40 @@
-import React, { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
-import { ExpandMoreSharp } from '@material-ui/icons/'
 
-import ConnectToHost from '../../../components/ConnectToHost'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import { apiHost } from '../../../constants'
+import { Context as SettingsContext } from '../../../providers/Settings'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusHookCommon
+export default function NodeConnectionCheck(): ReactElement | null {
-
+  const { setApiUrl, apiUrl } = useContext(SettingsContext)
-export default function NodeConnectionCheck({ isLoading, isOk }: Props): ReactElement | null {
+  const { status, isLoading } = useContext(Context)
-  if (isLoading) return null
+  const isOk = status.apiConnection
 
   return (
-    <div>
+    <ExpandableList
-      <div style={{ display: 'flex', marginBottom: '25px' }}>
+      label={
-        <span style={{ marginRight: '15px' }}>
+        <>
-          Node API (<Typography variant="button">{apiHost}</Typography>)
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee API
-        </span>
+        </>
-        <ConnectToHost hostName="api_host" defaultHost={apiHost} />
+      }
-      </div>
+    >
-      <div>
+      <ExpandableListItemNote>
+        {isOk
+          ? 'The connection to the Bee nodes API has been successful'
+          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+      </ExpandableListItemNote>
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
       {!isOk && (
-          <Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
+        <ExpandableList level={1} label="Troubleshoot">
-            We cannot connect to your nodes API at <Typography variant="button">{apiHost}</Typography>. Please check the
+          <ExpandableListItem
-            following to troubleshoot your issue.
+            label={
-            <Accordion style={{ marginTop: '20px' }}>
-              <AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
-                <Typography>Troubleshoot</Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Typography component="div">
               <ol>
                 <li>Check the status of your node by running the below command to see if your node is running.</li>
-                    <CodeBlockTabs
+                <CodeBlockTabs showLineNumbers linux={`sudo systemctl status bee`} mac={`brew services list`} />
-                      showLineNumbers
-                      linux={`sudo systemctl status bee`}
-                      mac={`brew services status swarm-bee`}
-                    />
                 <li>
                   If your node is running, check your firewall settings to make sure that port 1633 (or your custom
                   specified port) is exposed to the internet. If your node is not running try executing the below
@@ -51,15 +49,13 @@ export default function NodeConnectionCheck({ isLoading, isOk }: Props): ReactEl
                 <CodeBlockTabs
                   showLineNumbers
                   linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
-                      mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
+                  mac={`brew services list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
                 />
               </ol>
-                </Typography>
+            }
-              </AccordionDetails>
+          />
-            </Accordion>
+        </ExpandableList>
-          </Typography>
       )}
-      </div>
+    </ExpandableList>
-    </div>
   )
 }

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -1,45 +1,29 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Typography } from '@material-ui/core/'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import TopologyStats from '../../../components/TopologyStats'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusTopologyHook
+export default function PeerConnection(): ReactElement | null {
-
+  const { status, isLoading, topology } = useContext(Context)
-export default function PeerConnection({ isLoading, isOk, topology }: Props): ReactElement | null {
+  const isOk = status.topology
-  if (isLoading) return null
-
-  const peers = (
-    <div style={{ display: 'flex', marginTop: '15px' }}>
-      <div style={{ marginRight: '30px' }}>
-        <Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
-          <span>Connected Peers</span>
-        </Typography>
-        <Typography component="h2" variant="h5">
-          {topology?.connected ? topology.connected : '-'}
-        </Typography>
-      </div>
-      <div>
-        <Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
-          <span>Discovered Nodes</span>
-        </Typography>
-        <Typography component="h2" variant="h5">
-          {topology?.population ? topology.population : '-'}
-        </Typography>
-      </div>
-    </div>
-  )
-
-  if (isOk) {
-    return (
-      <>
-        <span>You are connected to peers!</span>
-        {peers}
-      </>
-    )
-  }
 
   return (
+    <ExpandableList
+      label={
         <>
-      <span>Your node is not connected to any peers</span>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Peers
-      {peers}
         </>
+      }
+    >
+      <ExpandableListItemNote>
+        {isOk
+          ? 'You are connected to other Bee nodes'
+          : 'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'}
+      </ExpandableListItemNote>
+
+      <TopologyStats topology={topology} />
+    </ExpandableList>
   )
 }

src/pages/status/SetupSteps/VersionCheck.tsx

@@ -1,68 +1,47 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Typography } from '@material-ui/core/'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { Context } from '../../../providers/Bee'
 
-type Props = StatusNodeVersionHook
+export default function VersionCheck(): ReactElement | null {
+  const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
+  const isOk = status.version
 
-export default function VersionCheck({
-  isLoading,
-  isOk,
-  userVersion,
-  latestVersion,
-  latestUrl,
-}: Props): ReactElement | null {
-  if (isLoading) return null
-
-  const version = (
-    <div style={{ display: 'flex' }}>
-      <div style={{ marginRight: '30px' }}>
-        <p>
-          <span>User Version</span>
-        </p>
-        <Typography component="h5" variant="h5">
-          <span>{userVersion}</span>
-        </Typography>
-      </div>
-      <div>
-        <p>
-          <span>Latest Version</span>
-        </p>
-        <Typography component="h5" variant="h5">
-          <span>{latestVersion}</span>
-        </Typography>
-      </div>
-    </div>
-  )
-
-  // Running latest bee version
-  if (isOk) {
   return (
+    <ExpandableList
+      label={
         <>
-        <span>You are running the latest version of Bee</span>
+          <StatusIcon isOk={isOk} isLoading={isLoading} /> Bee Version
-        {version}
         </>
-    )
       }
-
+    >
-  // Old version or not connected to bee debug API
+      <ExpandableListItemNote>
-  return (
+        {isOk ? (
+          'You are running the latest version of Bee.'
+        ) : (
           <>
-      <span>
             Your Bee version is out of date. Please update to the{' '}
-        <a href={latestUrl} rel="noreferrer" target="_blank">
+            <a href={latestBeeVersionUrl} rel="noreferrer" target="_blank">
               latest
             </a>{' '}
-        before continuing. Rerun the installation script below to upgrade. Reference the docs for help with updating.{' '}
+            before continuing. Rerun the installation script below to upgrade. For more information please see the{' '}
             <a href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee" rel="noreferrer" target="_blank">
               Docs
             </a>
-      </span>
+            .
             <CodeBlockTabs
               showLineNumbers
-        linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestVersion}/bee_${latestVersion}_amd64.deb\nsudo dpkg -i bee_${latestVersion}_amd64.deb`}
+              linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestPublishedVersion}/bee_${latestPublishedVersion}_amd64.deb\nsudo dpkg -i bee_${latestPublishedVersion}_amd64.deb`}
               mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
             />
-      {version}
           </>
+        )}
+      </ExpandableListItemNote>
+      <ExpandableListItem label="Your Version" value={latestUserVersion || '-'} />
+      <ExpandableListItem label="Latest Version" value={latestPublishedVersion || '-'} />
+    </ExpandableList>
   )
 }

src/pages/status/StatusCard.tsx

@@ -1,125 +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 | null
-  latestBeeVersion: string | null
-  isOk: boolean
-}
-
-function StatusCard({
-  userBeeVersion,
-  nodeAddresses,
-  nodeTopology,
-  latestBeeVersion,
-  isOk,
-}: 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>
-                {userBeeVersion && latestBeeVersion && userBeeVersion === latestBeeVersion ? (
-                  <Chip
-                    style={{ marginLeft: '7px', color: '#2145a0' }}
-                    size="small"
-                    label="latest"
-                    className={classes.status}
-                  />
-                ) : (
-                  <Typography variant="button">update</Typography>
-                )}
-              </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

src/pages/status/index.tsx

@@ -1,75 +1,21 @@
-import { ReactElement } from 'react'
+import type { ReactElement } from 'react'
-import { Container, CircularProgress } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 
-import NodeSetupWorkflow from './NodeSetupWorkflow'
+import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
-import StatusCard from './StatusCard'
+import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
+import VersionCheck from './SetupSteps/VersionCheck'
-import {
+import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
-  useStatusEthereumConnection,
+import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
-  useStatusNodeVersion,
+import PeerConnection from './SetupSteps/PeerConnection'
-  useStatusDebugConnection,
-  useStatusConnection,
-  useStatusTopology,
-  useStatusChequebook,
-} from '../../hooks/status'
 
-const useStyles = makeStyles((theme: Theme) =>
+export default function NodeSetupWorkflow(): ReactElement {
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'grid',
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
-
-export default function Status(): ReactElement {
-  const classes = useStyles()
-
-  const nodeVersion = useStatusNodeVersion()
-  const ethereumConnection = useStatusEthereumConnection()
-  const debugApiConnection = useStatusDebugConnection()
-  const apiConnection = useStatusConnection()
-  const topology = useStatusTopology()
-  const chequebook = useStatusChequebook()
-
-  const checks = [nodeVersion, ethereumConnection, debugApiConnection, apiConnection, topology, chequebook]
-
-  // If any check data are still loading
-  if (!checks.every(c => !c.isLoading)) {
   return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
+    <div>
-        <CircularProgress />
+      <DebugConnectionCheck />
-      </Container>
+      <VersionCheck />
-    )
+      <EthereumConnectionCheck />
-  }
+      <ChequebookDeployFund />
-
+      <NodeConnectionCheck />
-  return (
+      <PeerConnection />
-    <div className={classes.root}>
-      <StatusCard
-        userBeeVersion={nodeVersion.userVersion}
-        latestBeeVersion={nodeVersion.latestVersion}
-        isOk={checks.every(c => c.isOk)}
-        nodeTopology={topology.topology}
-        nodeAddresses={ethereumConnection.nodeAddresses}
-      />
-      {ethereumConnection.nodeAddresses && chequebook.chequebookAddress && (
-        <EthereumAddressCard
-          nodeAddresses={ethereumConnection.nodeAddresses}
-          isLoadingNodeAddresses={ethereumConnection.isLoading}
-          chequebookAddress={chequebook.chequebookAddress}
-          isLoadingChequebookAddress={chequebook.isLoading}
-        />
-      )}
-      <NodeSetupWorkflow
-        nodeVersion={nodeVersion}
-        ethereumConnection={ethereumConnection}
-        debugApiConnection={debugApiConnection}
-        apiConnection={apiConnection}
-        topology={topology}
-        chequebook={chequebook}
-      />
     </div>
   )
 }

src/providers/Bee.tsx

@@ -0,0 +1,351 @@
+import type { ChequebookBalance, Balance, Settlements } from '../types'
+import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
+import { Token } from '../models/Token'
+import semver from 'semver'
+import { engines } from '../../package.json'
+import { Context as SettingsContext } from './Settings'
+
+import type {
+  NodeAddresses,
+  ChequebookAddressResponse,
+  LastChequesResponse,
+  Health,
+  Peer,
+  Topology,
+} from '@ethersphere/bee-js'
+import { useLatestBeeRelease } from '../hooks/apiHooks'
+
+interface Status {
+  all: boolean
+  version: boolean
+  blockchainConnection: boolean
+  debugApiConnection: boolean
+  apiConnection: boolean
+  topology: boolean
+  chequebook: boolean
+}
+
+interface ContextInterface {
+  status: Status
+  latestPublishedVersion?: string
+  latestUserVersion?: string
+  latestUserVersionExact?: string
+  isLatestBeeVersion: boolean
+  latestBeeVersionUrl: string
+  error: Error | null
+  apiHealth: boolean
+  debugApiHealth: Health | null
+  nodeAddresses: NodeAddresses | null
+  topology: Topology | null
+  chequebookAddress: ChequebookAddressResponse | null
+  peers: Peer[] | null
+  chequebookBalance: ChequebookBalance | null
+  peerBalances: Balance[] | null
+  peerCheques: LastChequesResponse | null
+  settlements: Settlements | null
+  latestBeeRelease: LatestBeeRelease | null
+  isLoading: boolean
+  isRefreshing: boolean
+  lastUpdate: number | null
+  start: (frequency?: number) => void
+  stop: () => void
+  refresh: () => Promise<void>
+}
+
+const initialValues: ContextInterface = {
+  status: {
+    all: false,
+    version: false,
+    blockchainConnection: false,
+    debugApiConnection: false,
+    apiConnection: false,
+    topology: false,
+    chequebook: false,
+  },
+  latestPublishedVersion: undefined,
+  latestUserVersion: undefined,
+  latestUserVersionExact: undefined,
+  isLatestBeeVersion: false,
+  latestBeeVersionUrl: 'https://github.com/ethersphere/bee/releases/latest',
+  error: null,
+  apiHealth: false,
+  debugApiHealth: null,
+  nodeAddresses: null,
+  topology: null,
+  chequebookAddress: null,
+  peers: null,
+  chequebookBalance: null,
+  peerBalances: null,
+  peerCheques: null,
+  settlements: null,
+  latestBeeRelease: null,
+  isLoading: true,
+  isRefreshing: false,
+  lastUpdate: null,
+  start: () => {}, // eslint-disable-line
+  stop: () => {}, // eslint-disable-line
+  refresh: () => Promise.reject(),
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+function getStatus(
+  debugApiHealth: Health | null,
+  nodeAddresses: NodeAddresses | null,
+  apiHealth: boolean,
+  topology: Topology | null,
+  chequebookAddress: ChequebookAddressResponse | null,
+  chequebookBalance: ChequebookBalance | null,
+  error: Error | null,
+): Status {
+  const status = {
+    version: Boolean(
+      debugApiHealth &&
+        semver.satisfies(debugApiHealth.version, engines.bee, {
+          includePrerelease: true,
+        }),
+    ),
+    blockchainConnection: Boolean(nodeAddresses?.ethereum),
+    debugApiConnection: Boolean(debugApiHealth?.status === 'ok'),
+    apiConnection: apiHealth,
+    topology: Boolean(topology?.connected && topology?.connected > 0),
+    chequebook:
+      Boolean(chequebookAddress?.chequebookAddress) &&
+      chequebookBalance !== null &&
+      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
+  }
+
+  return { ...status, all: !error && Object.values(status).every(v => v) }
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const [apiHealth, setApiHealth] = useState<boolean>(false)
+  const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
+  const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
+  const [topology, setNodeTopology] = useState<Topology | null>(null)
+  const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
+  const [peers, setPeers] = useState<Peer[] | null>(null)
+  const [chequebookBalance, setChequebookBalance] = useState<ChequebookBalance | null>(null)
+  const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
+  const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
+  const [settlements, setSettlements] = useState<Settlements | null>(null)
+  const { latestBeeRelease } = useLatestBeeRelease()
+
+  const [error, setError] = useState<Error | null>(initialValues.error)
+  const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(initialValues.isRefreshing)
+  const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
+  const [frequency, setFrequency] = useState<number | null>(30000)
+
+  const latestPublishedVersion = semver.coerce(latestBeeRelease?.name)?.version
+  const latestUserVersion = semver.coerce(debugApiHealth?.version)?.version
+  const latestUserVersionExact = debugApiHealth?.version
+
+  useEffect(() => {
+    setIsLoading(true)
+
+    setApiHealth(false)
+
+    refresh()
+  }, [beeApi])
+
+  useEffect(() => {
+    setIsLoading(true)
+
+    setDebugApiHealth(null)
+    setNodeAddresses(null)
+    setNodeTopology(null)
+    setPeers(null)
+    setChequebookAddress(null)
+    setChequebookBalance(null)
+    setPeerBalances(null)
+    setPeerCheques(null)
+    setSettlements(null)
+
+    refresh()
+  }, [beeDebugApi])
+
+  const refresh = async () => {
+    // Don't want to refresh when already refreshing
+    if (isRefreshing) return
+
+    // Not a valid bee api
+    if (!beeApi || !beeDebugApi) {
+      setIsLoading(false)
+
+      return
+    }
+
+    try {
+      setIsRefreshing(true)
+      setError(null)
+
+      // Wrap the chequebook balance call to return BZZ values as Token object
+      const chequeBalanceWrapper = async () => {
+        const { totalBalance, availableBalance } = await beeDebugApi.getChequebookBalance()
+
+        return {
+          totalBalance: new Token(totalBalance),
+          availableBalance: new Token(availableBalance),
+        }
+      }
+
+      // Wrap the balances call to return BZZ values as Token object
+      const peerBalanceWrapper = async () => {
+        const { balances } = await beeDebugApi.getAllBalances()
+
+        return balances.map(({ peer, balance }) => ({ peer, balance: new Token(balance) }))
+      }
+
+      // Wrap the settlements call to return BZZ values as Token object
+      const settlementsWrapper = async () => {
+        const { totalReceived, settlements, totalSent } = await beeDebugApi.getAllSettlements()
+
+        return {
+          totalReceived: new Token(totalReceived),
+          totalSent: new Token(totalSent),
+          settlements: settlements.map(({ peer, received, sent }) => ({
+            peer,
+            received: new Token(received),
+            sent: new Token(sent),
+          })),
+        }
+      }
+
+      const promises = [
+        // API health
+        beeApi
+          .isConnected()
+          .then(setApiHealth)
+          .catch(() => setApiHealth(false)),
+
+        // Debug API health
+        beeDebugApi
+          .getHealth()
+          .then(setDebugApiHealth)
+          .catch(() => setDebugApiHealth(null)),
+
+        // Node Addresses
+        beeDebugApi
+          .getNodeAddresses()
+          .then(setNodeAddresses)
+          .catch(() => setNodeAddresses(null)),
+
+        // Network Topology
+        beeDebugApi
+          .getTopology()
+          .then(setNodeTopology)
+          .catch(() => setNodeTopology(null)),
+
+        // Peers
+        beeDebugApi
+          .getPeers()
+          .then(setPeers)
+          .catch(() => setPeers(null)),
+
+        // Chequebook address
+        beeDebugApi
+          .getChequebookAddress()
+          .then(setChequebookAddress)
+          .catch(() => setChequebookAddress(null)),
+
+        // Cheques
+        beeDebugApi
+          .getLastCheques()
+          .then(setPeerCheques)
+          .catch(() => setPeerCheques(null)),
+
+        // Chequebook balance
+        chequeBalanceWrapper()
+          .then(setChequebookBalance)
+          .catch(() => setChequebookBalance(null)),
+
+        // Peer balances
+        peerBalanceWrapper()
+          .then(setPeerBalances)
+          .catch(() => setPeerBalances(null)),
+
+        // Settlements
+        settlementsWrapper()
+          .then(setSettlements)
+          .catch(() => setSettlements(null)),
+      ]
+
+      await Promise.allSettled(promises)
+    } catch (e) {
+      setError(e)
+    } finally {
+      setIsLoading(false)
+      setIsRefreshing(false)
+      setLastUpdate(Date.now())
+    }
+  }
+
+  const start = (freq = 30000) => setFrequency(freq)
+  const stop = () => setFrequency(null)
+
+  // Start the update loop
+  useEffect(() => {
+    refresh()
+
+    // Start autorefresh only if the frequency is set
+    if (frequency) {
+      const interval = setInterval(refresh, frequency)
+
+      return () => clearInterval(interval)
+    }
+  }, [frequency, beeDebugApi, beeApi])
+
+  return (
+    <Context.Provider
+      value={{
+        status: getStatus(
+          debugApiHealth,
+          nodeAddresses,
+          apiHealth,
+          topology,
+          chequebookAddress,
+          chequebookBalance,
+          error,
+        ),
+        latestUserVersion,
+        latestUserVersionExact,
+        latestPublishedVersion,
+        isLatestBeeVersion: Boolean(
+          latestPublishedVersion &&
+            latestUserVersion &&
+            semver.satisfies(latestPublishedVersion, latestUserVersion, {
+              includePrerelease: true,
+            }),
+        ),
+        latestBeeVersionUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
+        error,
+        apiHealth,
+        debugApiHealth,
+        nodeAddresses,
+        topology,
+        chequebookAddress,
+        peers,
+        chequebookBalance,
+        peerBalances,
+        peerCheques,
+        settlements,
+        latestBeeRelease,
+        isLoading,
+        isRefreshing,
+        lastUpdate,
+        start,
+        stop,
+        refresh,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}

src/providers/Platform.tsx

@@ -0,0 +1,69 @@
+import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
+
+// These need to be numeric values as they are used as indexes in the TabsContainer
+export enum Platforms {
+  macOS = 0,
+  Linux,
+  Windows,
+  iOS,
+  Android,
+}
+
+export enum SupportedPlatforms {
+  macOS = Platforms.macOS,
+  Linux = Platforms.Linux,
+}
+
+interface ContextInterface {
+  platform: SupportedPlatforms
+  setPlatform: (platform: SupportedPlatforms) => void
+}
+
+const initialValues: ContextInterface = {
+  platform: SupportedPlatforms.macOS,
+  setPlatform: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+function isSupportedPlatform(platform: unknown): platform is SupportedPlatforms {
+  return Object.keys(SupportedPlatforms).includes(platform as string)
+}
+
+function getOS(): Platforms | null {
+  const userAgent = window.navigator.userAgent
+  const platform = window.navigator.platform
+  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
+  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
+  const iosPlatforms = ['iPhone', 'iPad', 'iPod']
+
+  if (macosPlatforms.includes(platform)) return Platforms.macOS
+
+  if (iosPlatforms.includes(platform)) return Platforms.iOS
+
+  if (windowsPlatforms.includes(platform)) return Platforms.Windows
+
+  if (/Android/.test(userAgent)) return Platforms.Android
+
+  if (/Linux/.test(platform)) return Platforms.Linux
+
+  return null
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [platform, setPlatform] = useState<SupportedPlatforms>(SupportedPlatforms.Linux)
+
+  // This is in useEffect as it really just needs to run once and not on each re-render
+  useEffect(() => {
+    const os = getOS()
+
+    setPlatform(isSupportedPlatform(os) ? os : SupportedPlatforms.Linux)
+  }, [])
+
+  return <Context.Provider value={{ platform, setPlatform }}>{children}</Context.Provider>
+}

src/providers/Settings.tsx

@@ -0,0 +1,59 @@
+import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
+import { Bee, BeeDebug } from '@ethersphere/bee-js'
+
+interface ContextInterface {
+  apiUrl: string
+  apiDebugUrl: string
+  beeApi: Bee | null
+  beeDebugApi: BeeDebug | null
+  setApiUrl: (url: string) => void
+  setDebugApiUrl: (url: string) => void
+}
+
+const initialValues: ContextInterface = {
+  apiUrl: sessionStorage.getItem('api_host') || process.env.REACT_APP_BEE_HOST || 'http://localhost:1633',
+  apiDebugUrl:
+    sessionStorage.getItem('debug_api_host') || process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635',
+  beeApi: null,
+  beeDebugApi: null,
+  setApiUrl: () => {}, // eslint-disable-line
+  setDebugApiUrl: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
+  const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
+  const [beeApi, setBeeApi] = useState<Bee | null>(null)
+  const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
+
+  useEffect(() => {
+    try {
+      setBeeApi(new Bee(apiUrl))
+      sessionStorage.setItem('api_host', apiUrl)
+    } catch (e) {
+      setBeeApi(null)
+    }
+  }, [apiUrl])
+
+  useEffect(() => {
+    try {
+      setBeeDebugApi(new BeeDebug(apiDebugUrl))
+      sessionStorage.setItem('debug_api_host', apiDebugUrl)
+    } catch (e) {
+      setBeeDebugApi(null)
+    }
+  }, [apiDebugUrl])
+
+  return (
+    <Context.Provider value={{ apiUrl, apiDebugUrl, beeApi, beeDebugApi, setApiUrl, setDebugApiUrl }}>
+      {children}
+    </Context.Provider>
+  )
+}

src/providers/Stamps.tsx

@@ -0,0 +1,97 @@
+import { PostageBatch } from '@ethersphere/bee-js'
+import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
+import { Context as SettingsContext } from './Settings'
+
+export interface EnrichedPostageBatch extends PostageBatch {
+  usage: number
+  usageText: string
+}
+
+interface ContextInterface {
+  stamps: EnrichedPostageBatch[] | null
+  error: Error | null
+  isLoading: boolean
+  lastUpdate: number | null
+  start: (frequency?: number) => void
+  stop: () => void
+  refresh: () => Promise<void>
+}
+
+const initialValues: ContextInterface = {
+  stamps: null,
+  error: null,
+  isLoading: false,
+  lastUpdate: null,
+  start: () => {}, // eslint-disable-line
+  stop: () => {}, // eslint-disable-line
+  refresh: () => Promise.reject(),
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
+  const { depth, bucketDepth, utilization } = postageBatch
+
+  const usage = utilization / Math.pow(2, depth - bucketDepth)
+  const usageText = `${Math.ceil(usage * 100)}%`
+
+  return {
+    ...postageBatch,
+    usage,
+    usageText,
+  }
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const { beeApi } = useContext(SettingsContext)
+  const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
+  const [error, setError] = useState<Error | null>(initialValues.error)
+  const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
+  const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
+  const [frequency, setFrequency] = useState<number | null>(null)
+
+  const refresh = async () => {
+    // Don't want to refresh when already refreshing
+    if (isLoading) return
+
+    if (!beeApi) return
+
+    try {
+      setIsLoading(true)
+      const stamps = await beeApi.getAllPostageBatch()
+
+      setStamps(stamps.map(enrichStamp))
+      setLastUpdate(Date.now())
+    } catch (e) {
+      setError(e)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const start = (freq = 30000) => setFrequency(freq)
+  const stop = () => setFrequency(null)
+
+  // Start the update loop
+  useEffect(() => {
+    refresh()
+
+    // Start autorefresh only if the frequency is set
+    if (frequency) {
+      const interval = setInterval(refresh, frequency)
+
+      return () => clearInterval(interval)
+    }
+  }, [frequency])
+
+  return (
+    <Context.Provider value={{ stamps, error, isLoading, lastUpdate, start, stop, refresh }}>
+      {children}
+    </Context.Provider>
+  )
+}

src/react-app-env.d.ts

@@ -6,14 +6,14 @@ interface LatestBeeRelease {
 }
 
 interface StatusHookCommon {
-  isLoading: boolean
   isOk: boolean
 }
 
 interface StatusNodeVersionHook extends StatusHookCommon {
-  userVersion: string
+  userVersion?: string
-  latestVersion: string
+  latestVersion?: string
   latestUrl: string
+  isLatestBeeVersion: boolean
 }
 interface StatusEthereumConnectionHook extends StatusHookCommon {
   nodeAddresses: NodeAddresses | null

src/routes.tsx

@@ -0,0 +1,33 @@
+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 Accounting from './pages/accounting'
+import Settings from './pages/settings'
+import Stamps from './pages/stamps'
+
+export enum ROUTES {
+  INFO = '/',
+  FILES = '/files',
+  ACCOUNTING = '/accounting',
+  SETTINGS = '/settings',
+  STAMPS = '/stamps',
+  STATUS = '/status',
+}
+
+const BaseRouter = (): ReactElement => (
+  <Switch>
+    <Route exact path={ROUTES.FILES} component={Files} />
+    <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} />
+    <Route path={ROUTES.INFO} component={Info} />
+  </Switch>
+)
+
+export default BaseRouter

src/routes/AppRoute.tsx

@@ -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

src/routes/routes.tsx

@@ -1,26 +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/index'
-import Files from '../pages/files/index'
-import Peers from '../pages/peers/index'
-import Accounting from '../pages/accounting/index'
-import Settings from '../pages/settings/index'
-
-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} />
-  </Switch>
-)
-
-export default BaseRouter

src/services/bee.tsx

@@ -1,102 +0,0 @@
-import {
-  Address,
-  AllSettlements,
-  BalanceResponse,
-  Bee,
-  BeeDebug,
-  CashoutResponse,
-  ChequebookAddressResponse,
-  ChequebookBalanceResponse,
-  Data,
-  DepositTokensResponse,
-  FileData,
-  Health,
-  LastCashoutActionResponse,
-  LastChequesForPeerResponse,
-  LastChequesResponse,
-  NodeAddresses,
-  Peer,
-  PingResponse,
-  Reference,
-  Topology,
-  WithdrawTokensResponse,
-} from '@ethersphere/bee-js'
-import { apiHost, debugApiHost } from '../constants'
-
-const beeJSClient = () => new Bee(apiHost)
-
-const beeJSDebugClient = () => new BeeDebug(debugApiHost)
-
-export const beeApi = {
-  status: {
-    health(): Promise<boolean> {
-      return beeJSClient().isConnected()
-    },
-  },
-  files: {
-    uploadFile(postageBatchId: Address, file: File): Promise<Reference> {
-      return beeJSClient().uploadFile(postageBatchId, file)
-    },
-    downloadFile(hash: string | Reference): Promise<FileData<Data>> {
-      return beeJSClient().downloadFile(hash)
-    },
-  },
-}
-
-export const beeDebugApi = {
-  status: {
-    nodeHealth(): Promise<Health> {
-      return beeJSDebugClient().getHealth()
-    },
-  },
-  connectivity: {
-    addresses(): Promise<NodeAddresses> {
-      return beeJSDebugClient().getNodeAddresses()
-    },
-    listPeers(): Promise<Peer[]> {
-      return beeJSDebugClient().getPeers()
-    },
-    topology(): Promise<Topology> {
-      return beeJSDebugClient().getTopology()
-    },
-    ping(peerId: string): Promise<PingResponse> {
-      return beeJSDebugClient().pingPeer(peerId)
-    },
-  },
-  balance: {
-    balances(): Promise<BalanceResponse> {
-      return beeJSDebugClient().getAllBalances()
-    },
-  },
-  chequebook: {
-    address(): Promise<ChequebookAddressResponse> {
-      return beeJSDebugClient().getChequebookAddress()
-    },
-    balance(): Promise<ChequebookBalanceResponse> {
-      return beeJSDebugClient().getChequebookBalance()
-    },
-    getLastCheques(): Promise<LastChequesResponse> {
-      return beeJSDebugClient().getLastCheques()
-    },
-    peerCashout(peerId: string): Promise<CashoutResponse> {
-      return beeJSDebugClient().cashoutLastCheque(peerId)
-    },
-    getPeerLastCashout(peerId: string): Promise<LastCashoutActionResponse> {
-      return beeJSDebugClient().getLastCashoutAction(peerId)
-    },
-    getPeerLastCheques(peerId: string): Promise<LastChequesForPeerResponse> {
-      return beeJSDebugClient().getLastChequesForPeer(peerId)
-    },
-    withdraw(amount: bigint): Promise<WithdrawTokensResponse> {
-      return beeJSDebugClient().withdrawTokens(amount)
-    },
-    deposit(amount: bigint): Promise<DepositTokensResponse> {
-      return beeJSDebugClient().depositTokens(amount)
-    },
-  },
-  settlements: {
-    getSettlements(): Promise<AllSettlements> {
-      return beeJSDebugClient().getAllSettlements()
-    },
-  },
-}

src/theme.tsx

@@ -1,4 +1,5 @@
-import { createMuiTheme } from '@material-ui/core/styles'
+import { createMuiTheme, Theme } from '@material-ui/core/styles'
+import { orange } from '@material-ui/core/colors'
 
 declare module '@material-ui/core/styles/createPalette' {
   interface TypeBackground {
@@ -6,14 +7,179 @@ declare module '@material-ui/core/styles/createPalette' {
   }
 }
 
-export const lightTheme = createMuiTheme({
+// Overwriting default components styles
+const componentsOverrides = (theme: Theme) => ({
+  MuiListItem: {
+    button: {
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#fcf2e8',
+          color: theme.palette.primary.main,
+        },
+      },
+    },
+  },
+  MuiContainer: {
+    root: { padding: theme.spacing(8) },
+    maxWidthXs: { padding: theme.spacing(8) },
+    maxWidthSm: { padding: theme.spacing(8) },
+    maxWidthMd: { padding: theme.spacing(8) },
+    maxWidthLg: { padding: theme.spacing(8) },
+    maxWidthXl: { padding: theme.spacing(8) },
+  },
+  MuiButton: {
+    startIcon: { marginLeft: theme.spacing(1) },
+    endIcon: { marginRight: theme.spacing(1) },
+    outlined: {
+      border: 'none',
+      borderRadius: theme.spacing(10),
+      color: theme.palette.primary.main,
+      backgroundColor: '#fcf2e8',
+    },
+    outlinedSizeSmall: {
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    outlinedSizeLarge: {
+      padding: theme.spacing(4),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    containedSizeLarge: {
+      padding: theme.spacing(4),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    containedSizeSmall: {
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      borderRadius: 0,
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    contained: {
+      padding: theme.spacing(2),
+      backgroundColor: 'white',
+      boxShadow: 'none',
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+      '&:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      '&:active': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      '&:disabled': {
+        backgroundColor: 'white',
+      },
+    },
+  },
+  MuiTab: {
+    root: {
+      backgroundColor: theme.palette.background.paper,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+        opacity: 1,
+      },
+      '&$selected': {
+        fontWeight: theme.typography.fontWeightMedium,
+      },
+    },
+    textColorInherit: {
+      opacity: 0.5,
+    },
+  },
+  MuiTabs: {
+    root: {
+      borderBottom: 'none',
+    },
+    indicator: {
+      backgroundColor: 'transparent',
+    },
+  },
+})
+
+const propsOverrides = {
+  MuiTab: {
+    disableRipple: true,
+  },
+  MuiButtonBase: {
+    disableRipple: true,
+  },
+}
+
+export const theme = createMuiTheme({
   palette: {
     type: 'light',
     background: {
-      default: '#fafafa',
+      default: '#efefef',
     },
     primary: {
-      main: '#6a6a6a',
+      light: '#fcf2e8',
+      main: '#dd7700',
+      dark: orange[800],
     },
     secondary: {
       main: '#333333',
@@ -21,24 +187,25 @@ export const lightTheme = createMuiTheme({
   },
   typography: {
     fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
+    h1: {
+      fontSize: '1.3rem',
+      fontWeight: 500,
+    },
+    h2: {
+      fontSize: '1rem',
+      fontWeight: 500,
+    },
+    h3: {
+      fontSize: '0.8rem',
+      fontWeight: 500,
+    },
+    body2: {
+      fontFamily: '"IBM Plex Mono", monospace',
+      fontWeight: 500,
+      fontSize: '1rem',
+    },
   },
 })
 
-export const darkTheme = createMuiTheme({
+theme.overrides = componentsOverrides(theme)
-  palette: {
+theme.props = propsOverrides
-    type: 'dark',
-    background: {
-      default: '#0d1117',
-      paper: '#161b22',
-    },
-    primary: {
-      main: '#dd7700',
-    },
-    secondary: {
-      main: '#1f2937',
-    },
-  },
-  typography: {
-    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
-  },
-})

src/types.ts

@@ -0,0 +1,23 @@
+import type { Token } from './models/Token'
+
+export interface ChequebookBalance {
+  totalBalance: Token
+  availableBalance: Token
+}
+
+export interface Balance {
+  peer: string
+  balance: Token
+}
+
+export interface Settlement {
+  peer: string
+  received: Token
+  sent: Token
+}
+
+export interface Settlements {
+  totalReceived: Token
+  totalSent: Token
+  settlements: Settlement[]
+}

src/utils/index.test.ts

@@ -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()
       })
     })
   })

src/utils/index.ts

@@ -32,3 +32,77 @@ export function makeBigNumber(value: BigNumber | BigInt | number | string): BigN
 
   throw new TypeError(`Not a BigNumber or BigNumber convertible value. Type: ${typeof value} value: ${value}`)
 }
+
+export type PromiseSettlements<T> = {
+  fulfilled: PromiseFulfilledResult<T>[]
+  rejected: PromiseRejectedResult[]
+}
+
+export type UnwrappedPromiseSettlements<T> = {
+  fulfilled: T[]
+  rejected: string[]
+}
+
+export async function sleepMs(ms: number): Promise<void> {
+  await new Promise<void>(resolve =>
+    setTimeout(() => {
+      resolve()
+    }, ms),
+  )
+}
+
+/**
+ * Maps the returned results of `Promise.allSettled` to an object
+ * with `fulfilled` and `rejected` arrays for easy access.
+ *
+ * The results still need to be unwrapped to get the fulfilled values or rejection reasons.
+ */
+export function mapPromiseSettlements<T>(promises: PromiseSettledResult<T>[]): PromiseSettlements<T> {
+  const fulfilled = promises.filter(promise => promise.status === 'fulfilled') as PromiseFulfilledResult<T>[]
+  const rejected = promises.filter(promise => promise.status === 'rejected') as PromiseRejectedResult[]
+
+  return { fulfilled, rejected }
+}
+
+/**
+ * Maps the returned values of `Promise.allSettled` to an object
+ * with `fulfilled` and `rejected` arrays for easy access.
+ *
+ * For rejected promises, the value is the stringified `reason`,
+ * or `'Unknown error'` string when it is unavailable.
+ */
+export function unwrapPromiseSettlements<T>(
+  promiseSettledResults: PromiseSettledResult<T>[],
+): UnwrappedPromiseSettlements<T> {
+  const values = mapPromiseSettlements(promiseSettledResults)
+  const fulfilled = values.fulfilled.map(x => x.value)
+  const rejected = values.rejected.map(x => (x.reason ? String(x.reason) : 'Unknown error'))
+
+  return { fulfilled, rejected }
+}
+
+/**
+ * Wraps a `Promise<T>` or async function inside a new `Promise<T>`,
+ * which retries the original function up to `maxRetries` times,
+ * waiting `delayMs` milliseconds between failed attempts.
+ *
+ * If all attempts fail, then this `Promise<T>` also rejects.
+ */
+export function makeRetriablePromise<T>(fn: () => Promise<T>, maxRetries = 3, delayMs = 1000): Promise<T> {
+  return new Promise(async (resolve, reject) => {
+    for (let tries = 0; tries < maxRetries; tries++) {
+      try {
+        const results = await fn()
+        resolve(results)
+
+        return
+      } catch (error) {
+        if (tries < maxRetries - 1) {
+          await sleepMs(delayMs)
+        } else {
+          reject(error)
+        }
+      }
+    }
+  })
+}

src/utils/threshold.ts

@@ -0,0 +1,105 @@
+const OPTIMAL_CONNECTED_PEERS = 200
+const OPTIMAL_POPULATION = 100_000
+const OPTIMAL_DEPTH = 12
+
+interface Threshold {
+  minimumValue: number
+  explanation: string
+  score: number
+}
+
+type Thresholds = {
+  connectedPeers: Threshold[]
+  population: Threshold[]
+  depth: Threshold[]
+}
+
+type ThresholdValue = {
+  score: number
+  maximumScore: number
+  explanation: string
+}
+
+export type ThresholdValues = {
+  connectedPeers: ThresholdValue
+  population: ThresholdValue
+  depth: ThresholdValue
+}
+
+const GENERIC_ERROR = 'There may be issues with your Bee node or connection.'
+
+const THRESHOLDS: Thresholds = {
+  connectedPeers: [
+    {
+      minimumValue: OPTIMAL_CONNECTED_PEERS,
+      explanation: `Perfect! ${OPTIMAL_CONNECTED_PEERS} or more connected peers indicate a healthy topology.`,
+      score: 2,
+    },
+    {
+      minimumValue: 1,
+      explanation: `Your Bee node is connected to peers, but this number should ideally be above ${OPTIMAL_CONNECTED_PEERS}. If you have only started your Bee node, this number may increase quickly.`,
+      score: 1,
+    },
+    {
+      minimumValue: 0,
+      explanation: 'Your Bee node has not connected to any peers. ' + GENERIC_ERROR,
+      score: 0,
+    },
+  ],
+  population: [
+    {
+      minimumValue: OPTIMAL_POPULATION,
+      explanation:
+        'Perfect! Your Bee node seems to have a realistic value for the network size, which means everything is working well on your end.',
+      score: 2,
+    },
+    {
+      minimumValue: 1,
+      explanation: `Population is usually above ${OPTIMAL_POPULATION.toLocaleString()}. If the number does not increase within a few hours, there may be issues with your Bee node.`,
+      score: 1,
+    },
+    {
+      minimumValue: 0,
+      explanation: 'Your Bee node has no information on the network population. ' + GENERIC_ERROR,
+      score: 0,
+    },
+  ],
+  depth: [
+    {
+      minimumValue: OPTIMAL_DEPTH,
+      explanation: 'Perfect! Your Bee node has the highest available depth.',
+      score: 2,
+    },
+    {
+      minimumValue: 1,
+      explanation: `Your Bee node is supposed to reach a depth of ${OPTIMAL_DEPTH} eventually. Stagnation or decrease in this number may indicate problems with your Bee node.`,
+      score: 1,
+    },
+    {
+      minimumValue: 0,
+      explanation: 'Your Bee node has not started building its topology yet. ' + GENERIC_ERROR,
+      score: 0,
+    },
+  ],
+}
+
+export function pickThreshold(key: keyof Thresholds, value: number): ThresholdValue {
+  const thresholds = THRESHOLDS[key]
+  const maximumScore = thresholds[0].score
+  for (const item of thresholds) {
+    if (value >= item.minimumValue) {
+      return {
+        score: item.score,
+        maximumScore,
+        explanation: item.explanation,
+      }
+    }
+  }
+  const last = thresholds[thresholds.length - 1]
+
+  return {
+    score: last.score,
+    maximumScore,
+    explanation: last.explanation,
+  }
+}