chore(master): release 0.20.2 (#552 )

fix: stamp purchasing (#551 )
chore(master): release 0.20.1 (#549 )
2022-09-15 17:05:48 +02:00 · 2022-09-15 17:02:11 +02:00 · 2022-09-15 05:46:11 -07:00 · 2022-09-15 14:42:53 +02:00 · 2022-09-15 14:29:19 +02:00 · 2022-09-14 12:44:55 +02:00
258 changed files with 40255 additions and 26291 deletions
@@ -0,0 +1,50 @@
+'use strict'
+
+module.exports = function (api) {
+  const targets = '>1% and not ie 11 and not dead'
+  api.cache(true)
+  api.cacheDirectory = true
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          targets,
+          modules: false,
+        }
+      ],
+      ['@babel/preset-react', {runtime: 'automatic' }]
+    ],
+    plugins: [
+      [
+        "babel-plugin-tsconfig-paths",
+        {
+          "relative": true,
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".ts",
+            ".tsx",
+            ".es",
+            ".es6",
+            ".mjs"
+          ],
+          "rootDir": ".",
+          "tsconfig": "tsconfig.lib.json",
+        }
+      ],
+      "@babel/plugin-proposal-numeric-separator",
+      "syntax-dynamic-import",
+      '@babel/plugin-proposal-class-properties',
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ]
+    ]
+  }
+}
@@ -0,0 +1,20 @@
+{
+  "ignores": [
+    "@testing-library/react",
+    "@types/*",
+    "@commitlint/config-conventional",
+    "@babel/*",
+    "babel*",
+    "eslint*",
+    "file-loader",
+    "ts-node",
+    "webpack-cli",
+    "assert",
+    "buffer",
+    "crypto*",
+    "stream*",
+    "env-paths",
+    "open",
+    "base64-inline-loader"
+  ]
+}
@@ -1,7 +1 @@
-PORT=3001
-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_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+PORT=3002
@@ -1,4 +0,0 @@
-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_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
@@ -1,9 +1,16 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "react-app",
+    "react-app/jest"
  ],
  "env": {
    "browser": true,
@@ -16,7 +23,6 @@
    "sourceType": "module",
    "ecmaVersion": 2018
  },
-  "plugins": ["jest"],
  "rules": {
    "array-bracket-newline": ["error", "consistent"],
    "strict": ["error", "safe"],
@@ -0,0 +1,4 @@
+* text=auto eol=lf 
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
@@ -0,0 +1,13 @@
+# See config in https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Enable version updates for npm
+  - package-ecosystem: 'npm'
+    # Look for `package.json` and `lock` files in the `root` directory
+    directory: '/'
+    # Check the npm registry for updates every day (weekdays)
+    schedule:
+      interval: 'weekly'
+    # Always increase the version in package.json as well (for patch versions by default only package-lock.json i updated)
+    versioning-strategy: increase
@@ -0,0 +1,2 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: true
@@ -14,7 +14,11 @@ jobs:

    strategy:
      matrix:
-        node-version: [14.x]
+        node-version: [18.x]
+
+    env:
+      REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
+      REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/

    steps:
      - uses: actions/checkout@v2
@@ -42,10 +46,42 @@ jobs:
      - name: Commit linting
        uses: wagoid/commitlint-github-action@v2

-      # - name: Code linting
-      #   run: npm run lint:check
-      #   env:
-      #     CI: true
+      - name: Code linting
+        run: npm run lint:check
+        env:
+          CI: true
+
+      - name: Dependency check
+        run: npm run depcheck
+
+      - name: Types check
+        run: npm run check:types
+
+      - name: Update supported Bee action
+        uses: ethersphere/update-supported-bee-action@v1
+        if: github.ref == 'refs/heads/master'
+        with:
+          token: ${{ secrets.GHA_PAT_BASIC }}

      - name: Build
        run: npm run build
+
+      - name: Build Component
+        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/swarm-actions/pr-preview@v0
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          token: ${{ secrets.GHA_PAT_BASIC }}
+          error-document: index.html
+          headers: "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"
+
+      - name: Upload to testnet
+        uses: ethersphere/swarm-actions/upload-dir@v0
+        continue-on-error: true
+        with:
+          index-document: index.html
+          error-document: index.html
+          dir: ./build
+          bee-url: https://api.gateway.testnet.ethswarm.org
@@ -12,7 +12,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
-          node-version: 14
+          node-version: 18
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
      - run: npm publish --access public
@@ -0,0 +1,25 @@
+# After new release is published on github, publish it to npmjs
+name: Publish the project to Github Pages
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: echo "dashboard.ethswarm.org" > ./build/CNAME
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
@@ -11,10 +11,10 @@ jobs:
  release-please:
    runs-on: ubuntu-latest
    steps:
-      - uses: GoogleCloudPlatform/release-please-action@v2
+      - uses: GoogleCloudPlatform/release-please-action@v3
        id: release
        with:
-          token: ${{ secrets.REPO_GHA_PAT }}
+          token: ${{ secrets.GHA_PAT_BASIC }}
          release-type: node
          package-name: bee-dashboard
          bump-minor-pre-major: true
@@ -14,7 +14,7 @@ jobs:

    strategy:
      matrix:
-        node-version: [14.x]
+        node-version: [18.x]

    steps:
      - uses: actions/checkout@v2
@@ -10,6 +10,7 @@

 # production
 /build
+/lib

 # misc
 .DS_Store
@@ -1,5 +1,379 @@
 # Changelog

+## [0.20.2](https://github.com/ethersphere/bee-dashboard/compare/v0.20.1...v0.20.2) (2022-09-15)
+
+
+### Bug Fixes
+
+* stamp purchasing ([#551](https://github.com/ethersphere/bee-dashboard/issues/551)) ([c0456a3](https://github.com/ethersphere/bee-dashboard/commit/c0456a3bf6d541457b706670b1a757d2b1d70f10))
+
+## [0.20.1](https://github.com/ethersphere/bee-dashboard/compare/v0.20.0...v0.20.1) (2022-09-15)
+
+
+### Bug Fixes
+
+* revert bee env. variable names and add default rpc var ([#545](https://github.com/ethersphere/bee-dashboard/issues/545)) ([5295bd5](https://github.com/ethersphere/bee-dashboard/commit/5295bd5b012962846aa15ff12ca4234f0c8b37f7))
+* rpc endpoint setting ultra-light mode logic ([#547](https://github.com/ethersphere/bee-dashboard/issues/547)) ([e2dd077](https://github.com/ethersphere/bee-dashboard/commit/e2dd077118faf3b6071fc8327e37e317e0174975))
+
+## [0.20.0](https://github.com/ethersphere/bee-dashboard/compare/v0.19.3...v0.20.0) (2022-09-14)
+
+
+### Features
+
+* error reporting callback ([#530](https://github.com/ethersphere/bee-dashboard/issues/530)) ([0c74dae](https://github.com/ethersphere/bee-dashboard/commit/0c74dae4e88916cf54c3c0500b37203b865e48a7))
+
+
+### Bug Fixes
+
+* show update notifications only on non-auto-updating Swarm Desktops ([#543](https://github.com/ethersphere/bee-dashboard/issues/543)) ([528a810](https://github.com/ethersphere/bee-dashboard/commit/528a8106907ef176bcdb68b3386c2f3f9ea98a47))
+
+## [0.19.3](https://github.com/ethersphere/bee-dashboard/compare/v0.19.2...v0.19.3) (2022-08-24)
+
+
+### Bug Fixes
+
+* pass isBeeDesktop from provider to hook ([#525](https://github.com/ethersphere/bee-dashboard/issues/525)) ([677b6de](https://github.com/ethersphere/bee-dashboard/commit/677b6de0f82b02e1487420e3c08fbd19a949f97b))
+
+## [0.19.2](https://github.com/ethersphere/bee-dashboard/compare/v0.19.1...v0.19.2) (2022-08-08)
+
+
+### Bug Fixes
+
+* remove sentry ([#520](https://github.com/ethersphere/bee-dashboard/issues/520)) ([0260df6](https://github.com/ethersphere/bee-dashboard/commit/0260df61de0619202a819b79820cfbef6e3757ae))
+
+## [0.19.1](https://github.com/ethersphere/bee-dashboard/compare/v0.19.0...v0.19.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* compile types when building the library ([#516](https://github.com/ethersphere/bee-dashboard/issues/516)) ([df925b0](https://github.com/ethersphere/bee-dashboard/commit/df925b013bb02a16d308a86050ec8e0e0e361ff7))
+
+## [0.19.0](https://github.com/ethersphere/bee-dashboard/compare/v0.18.2...v0.19.0) (2022-08-03)
+
+
+### Features
+
+* add loading state to wallet balance ([#508](https://github.com/ethersphere/bee-dashboard/issues/508)) ([b9c008f](https://github.com/ethersphere/bee-dashboard/commit/b9c008f019f5bfe005d11f0208e90ca21b274e97))
+* add wallet endpoint and display blockchain name ([#492](https://github.com/ethersphere/bee-dashboard/issues/492)) ([fd11f01](https://github.com/ethersphere/bee-dashboard/commit/fd11f0166d77a89a2b350f16f9254af91441089d))
+* check whether the app runs within bee-desktop is now an environment variable ([#490](https://github.com/ethersphere/bee-dashboard/issues/490)) ([f01477e](https://github.com/ethersphere/bee-dashboard/commit/f01477ea70e6c343461cce6c1bcee3d738c076de))
+* don't display duplicate notifications with snackbar ([#488](https://github.com/ethersphere/bee-dashboard/issues/488)) ([feeca00](https://github.com/ethersphere/bee-dashboard/commit/feeca008acd523f16e7efdde2fa92ec98fde8bc9))
+* log errors to console when showing error notification  ([#489](https://github.com/ethersphere/bee-dashboard/issues/489)) ([6bfe97b](https://github.com/ethersphere/bee-dashboard/commit/6bfe97be5d69adeb13dafad2016d1c76a9d2e67c))
+* make blockchain JSON RPC configurable from settings ([#494](https://github.com/ethersphere/bee-dashboard/issues/494)) ([408b565](https://github.com/ethersphere/bee-dashboard/commit/408b565935a59759af6d3e252ceae6981fb60eb6))
+* pass isBeeDesktop as Bee Dashboard component property ([#510](https://github.com/ethersphere/bee-dashboard/issues/510)) ([4c48657](https://github.com/ethersphere/bee-dashboard/commit/4c48657fca0c22d5d4aaf220ffb278ac67001e1f))
+* reintroduce new bee version notification ([#500](https://github.com/ethersphere/bee-dashboard/issues/500)) ([f53e966](https://github.com/ethersphere/bee-dashboard/commit/f53e9664da8f4d1b6803de09f45a92493957d79d))
+* set default rpc endpoint ([#485](https://github.com/ethersphere/bee-dashboard/issues/485)) ([cba21bb](https://github.com/ethersphere/bee-dashboard/commit/cba21bb2e0e70e0ada01402d44e9ee61a55173cf))
+
+
+### Bug Fixes
+
+* correct website upload path ([#483](https://github.com/ethersphere/bee-dashboard/issues/483)) ([186d035](https://github.com/ethersphere/bee-dashboard/commit/186d0352cfda0408cf7add535d9247a85ce3796d))
+* disable swarm invitation outside of Swarm Desktop ([#497](https://github.com/ethersphere/bee-dashboard/issues/497)) ([f8390d7](https://github.com/ethersphere/bee-dashboard/commit/f8390d7eacc082a7b0a4551a3bc1572e3ce3463e))
+* handle unicode filename and website uploads ([#491](https://github.com/ethersphere/bee-dashboard/issues/491)) ([f82444f](https://github.com/ethersphere/bee-dashboard/commit/f82444f2124cad8bccead01a33cbc9f51d126acf))
+* if the node has error, disable pages that can never load ([#502](https://github.com/ethersphere/bee-dashboard/issues/502)) ([896f6e4](https://github.com/ethersphere/bee-dashboard/commit/896f6e48d988bbc0fe82a63a44bc82b035f30073))
+* new bee version notification is only shown if user bee version is detected ([#512](https://github.com/ethersphere/bee-dashboard/issues/512)) ([1be5cbd](https://github.com/ethersphere/bee-dashboard/commit/1be5cbda6de073f1e569ab92f178d815548a461b))
+
+## [0.18.2](https://github.com/ethersphere/bee-dashboard/compare/v0.18.1...v0.18.2) (2022-07-06)
+
+
+### Bug Fixes
+
+* don't link to latest release ([#477](https://github.com/ethersphere/bee-dashboard/issues/477)) ([498294e](https://github.com/ethersphere/bee-dashboard/commit/498294e227baa52c59adecf9c4cfd205061ddf75))
+* enable desktop update notifications on all platforms ([#476](https://github.com/ethersphere/bee-dashboard/issues/476)) ([33fff93](https://github.com/ethersphere/bee-dashboard/commit/33fff93cac31ec54b02f9c7d0c90c13c8d3763c7))
+
+## [0.18.1](https://github.com/ethersphere/bee-dashboard/compare/v0.18.0...v0.18.1) (2022-07-05)
+
+
+### Bug Fixes
+
+* refresh balance after dai tx ([#470](https://github.com/ethersphere/bee-dashboard/issues/470)) ([477c238](https://github.com/ethersphere/bee-dashboard/commit/477c2385b1d06da499facebf630338eb90ad22e7))
+* refresh dai after spending gas ([#468](https://github.com/ethersphere/bee-dashboard/issues/468)) ([56457eb](https://github.com/ethersphere/bee-dashboard/commit/56457eb9b989ed00c3b87555a43da7024654667d))
+* refresh gift wallet after swap ([#465](https://github.com/ethersphere/bee-dashboard/issues/465)) ([afb8c31](https://github.com/ethersphere/bee-dashboard/commit/afb8c31d9a022033cee14ff9a951f87cb992636f))
+* status checks have timeout ([#471](https://github.com/ethersphere/bee-dashboard/issues/471)) ([acee8c9](https://github.com/ethersphere/bee-dashboard/commit/acee8c9802318deb64d2bd8e701fae15c10d5fcf))
+
+## [0.18.0](https://github.com/ethersphere/bee-dashboard/compare/v0.17.0...v0.18.0) (2022-07-04)
+
+
+### Features
+
+* add postage stamp guide ([#455](https://github.com/ethersphere/bee-dashboard/issues/455)) ([fb8775d](https://github.com/ethersphere/bee-dashboard/commit/fb8775d0a7a2bb3525467cec98584009c167700f))
+* add real price calculation to swap page ([#459](https://github.com/ethersphere/bee-dashboard/issues/459)) ([a9a5d76](https://github.com/ethersphere/bee-dashboard/commit/a9a5d76e45d3a31f05f814fe6cd2c823317f1e2d))
+* add updated sidebar icons ([#407](https://github.com/ethersphere/bee-dashboard/issues/407)) ([8b3ea52](https://github.com/ethersphere/bee-dashboard/commit/8b3ea5249ee48e7a2403e00339fd51977b93fb56))
+* add upgrade guide link from medium ([#434](https://github.com/ethersphere/bee-dashboard/issues/434)) ([cfcc859](https://github.com/ethersphere/bee-dashboard/commit/cfcc859303f4fb931e07f9037a7ba0972f8fb8ba))
+* reduce the minimal dai amount for the topup ([#444](https://github.com/ethersphere/bee-dashboard/issues/444)) ([2a5c598](https://github.com/ethersphere/bee-dashboard/commit/2a5c598ece3ba5f88c53c87db52b10422a37aae7))
+* refresh frequency changes if the bee is in error state ([#409](https://github.com/ethersphere/bee-dashboard/issues/409)) ([ce44ef7](https://github.com/ethersphere/bee-dashboard/commit/ce44ef78f4d322a458c1e8dd1f5a0b87d3a45b85))
+* set title to swarm ([#413](https://github.com/ethersphere/bee-dashboard/issues/413)) ([d664400](https://github.com/ethersphere/bee-dashboard/commit/d664400a7e3427fd30c47b59ef9c0dccda061720))
+* transfer everything out of the gift wallet ([#456](https://github.com/ethersphere/bee-dashboard/issues/456)) ([7225c5c](https://github.com/ethersphere/bee-dashboard/commit/7225c5ca11a62e40f06e7b08d558b390e326bcaf))
+* ultra-light mode block not supported features that are not available in this mode ([#438](https://github.com/ethersphere/bee-dashboard/issues/438)) ([83aab3b](https://github.com/ethersphere/bee-dashboard/commit/83aab3be62d73b5a539aab8f9c2bbfad56c86bbf))
+* version check and info ([#425](https://github.com/ethersphere/bee-dashboard/issues/425)) ([8f4a4eb](https://github.com/ethersphere/bee-dashboard/commit/8f4a4ebaa951fdbbe9f697e2cb4dc34838ed5df7))
+
+
+### Bug Fixes
+
+* add guide link to bank card top up ([#439](https://github.com/ethersphere/bee-dashboard/issues/439)) ([2221d0e](https://github.com/ethersphere/bee-dashboard/commit/2221d0e7c89a9631e3d95dd71cde3eacb964f3b5))
+* add troubleshooting checks ([#435](https://github.com/ethersphere/bee-dashboard/issues/435)) ([a756eed](https://github.com/ethersphere/bee-dashboard/commit/a756eedc4995cad6c5cafd302f7d7d7d44656f6d))
+* bee data auto-refresh ([#436](https://github.com/ethersphere/bee-dashboard/issues/436)) ([4cd580c](https://github.com/ethersphere/bee-dashboard/commit/4cd580ca7f497104eb97ae5676f3d5334384f4dc))
+* change topup button ordering ([#453](https://github.com/ethersphere/bee-dashboard/issues/453)) ([56f207d](https://github.com/ethersphere/bee-dashboard/commit/56f207d6a63ee0a486a4e00770fd8342fa92a7b5))
+* change wording from deposit to top up wallet ([#440](https://github.com/ethersphere/bee-dashboard/issues/440)) ([21df01c](https://github.com/ethersphere/bee-dashboard/commit/21df01c9241bcdfd072b0f080a46823beb1a751a))
+* check desktop version only once ([#441](https://github.com/ethersphere/bee-dashboard/issues/441)) ([3986320](https://github.com/ethersphere/bee-dashboard/commit/398632001a589a20cecb4416dfd261be21e18959))
+* disable bee update button in desktop mode ([#452](https://github.com/ethersphere/bee-dashboard/issues/452)) ([c54170b](https://github.com/ethersphere/bee-dashboard/commit/c54170b18538f7d15181a87a556f7fb2954ed49d))
+* display account wallet partially while loading ([#420](https://github.com/ethersphere/bee-dashboard/issues/420)) ([f43de77](https://github.com/ethersphere/bee-dashboard/commit/f43de77294e86df4bb023cd19afe6327ace5e83c))
+* don't display buy new stamp button when already in process of buying one ([#422](https://github.com/ethersphere/bee-dashboard/issues/422)) ([807af12](https://github.com/ethersphere/bee-dashboard/commit/807af122f7743fc9d13120eef81cd3f55b51eb5a))
+* generate gift wallet is disabled if there is not enough funds ([#451](https://github.com/ethersphere/bee-dashboard/issues/451)) ([f2824b7](https://github.com/ethersphere/bee-dashboard/commit/f2824b749b950e5b401af1de2973f13ad95d0a2f))
+* info page card and map error states ([#412](https://github.com/ethersphere/bee-dashboard/issues/412)) ([b969d8c](https://github.com/ethersphere/bee-dashboard/commit/b969d8caeef8d0e6f6eb664b380228bccb498795))
+* make deposit go to top up selector page ([#419](https://github.com/ethersphere/bee-dashboard/issues/419)) ([aa99e01](https://github.com/ethersphere/bee-dashboard/commit/aa99e0153e20524c5b047e90803543cbb13bb625))
+* provider is by default null and account page redirect to provider setup ([#437](https://github.com/ethersphere/bee-dashboard/issues/437)) ([2e0eeb7](https://github.com/ethersphere/bee-dashboard/commit/2e0eeb7a1b86be091fbd4bc266aa2fcbfc271ca3))
+* remove expired stamps ([#463](https://github.com/ethersphere/bee-dashboard/issues/463)) ([eb51dbb](https://github.com/ethersphere/bee-dashboard/commit/eb51dbb090a22d398c13e355de26c229c79d4a6f))
+* replace feather icons with remix icons on swarm button ([#414](https://github.com/ethersphere/bee-dashboard/issues/414)) ([f238c43](https://github.com/ethersphere/bee-dashboard/commit/f238c433078b09ac034c4bc66a434f8a91422827))
+* sensible deposit and swap ([#448](https://github.com/ethersphere/bee-dashboard/issues/448)) ([26ce0ef](https://github.com/ethersphere/bee-dashboard/commit/26ce0efc0b5e441863d8991af6121f105f8c7981))
+* sentry trace only Bee Desktop API ([#421](https://github.com/ethersphere/bee-dashboard/issues/421)) ([7c39e27](https://github.com/ethersphere/bee-dashboard/commit/7c39e2741c87b1ca75fcb1a72a5d7c12b826e950))
+* show update notifications only on non-auto-updating Swarm Desktops ([#460](https://github.com/ethersphere/bee-dashboard/issues/460)) ([d12f86b](https://github.com/ethersphere/bee-dashboard/commit/d12f86b9fac047f7c62edaca4fa818dbac27e894))
+* text in the info page cards ([#411](https://github.com/ethersphere/bee-dashboard/issues/411)) ([5e31c21](https://github.com/ethersphere/bee-dashboard/commit/5e31c21f49e6418b3cf36a75076eff2234ab2e8c))
+* the topup urls are now under `/account` which fixes highlighting ([#424](https://github.com/ethersphere/bee-dashboard/issues/424)) ([d345059](https://github.com/ethersphere/bee-dashboard/commit/d345059048efdf7226b7bc26e6514792a0a4cbff))
+* use xDAI and xBZZ on Gnosis chain ([#454](https://github.com/ethersphere/bee-dashboard/issues/454)) ([a3c02db](https://github.com/ethersphere/bee-dashboard/commit/a3c02dbf8a063fd69f4b4c1b4ff058a35710d0bc))
+* users can now upgrade to light node if they have enough funds ([#458](https://github.com/ethersphere/bee-dashboard/issues/458)) ([8c182ca](https://github.com/ethersphere/bee-dashboard/commit/8c182cafd537e508384efcf9c52febcd47f14a67))
+
+## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)
+
+
+### Features
+
+* add account tabs ([#378](https://github.com/ethersphere/bee-dashboard/issues/378)) ([41432bc](https://github.com/ethersphere/bee-dashboard/commit/41432bc346b1b89f87489a0b38a5383b834edd62))
+* add map with peers to info page ([#398](https://github.com/ethersphere/bee-dashboard/issues/398)) ([2be9735](https://github.com/ethersphere/bee-dashboard/commit/2be9735e0c98f066afbd8c1fda27c8365b80f489))
+* gh pages deployment ([#389](https://github.com/ethersphere/bee-dashboard/issues/389)) ([2b58b30](https://github.com/ethersphere/bee-dashboard/commit/2b58b301225dba5809f0afb3849f97007123c61a))
+* improve stamp selector ([#400](https://github.com/ethersphere/bee-dashboard/issues/400)) ([0f0d72e](https://github.com/ethersphere/bee-dashboard/commit/0f0d72e7c5848559962b3020575d1b5f2d18a60e))
+* info page redesign ([#390](https://github.com/ethersphere/bee-dashboard/issues/390)) ([caea5ae](https://github.com/ethersphere/bee-dashboard/commit/caea5ae309028fef12c5cd036dcd1d264dd451e6))
+* sentry feedback form ([#388](https://github.com/ethersphere/bee-dashboard/issues/388)) ([b3028d7](https://github.com/ethersphere/bee-dashboard/commit/b3028d7893790010e417ccf091b7eb4981ed21d6))
+* sentry integration ([#385](https://github.com/ethersphere/bee-dashboard/issues/385)) ([109e07b](https://github.com/ethersphere/bee-dashboard/commit/109e07b0972309b9260db2e26a643be8562a9386))
+* sentry proxy ([#399](https://github.com/ethersphere/bee-dashboard/issues/399)) ([e966663](https://github.com/ethersphere/bee-dashboard/commit/e9666639b2df3b1586121df61a7eda24bc57766d))
+* update logo ([#401](https://github.com/ethersphere/bee-dashboard/issues/401)) ([36fc4bf](https://github.com/ethersphere/bee-dashboard/commit/36fc4bfe982b03589478acb36e5bb6ec5aff9b44))
+
+
+### Bug Fixes
+
+* all wallet flows to use ethers ([#395](https://github.com/ethersphere/bee-dashboard/issues/395)) ([80d684c](https://github.com/ethersphere/bee-dashboard/commit/80d684c1e5c74b3bdae6eca974ed3a0b7408be93))
+* change color of pins and show population instead of depth ([#402](https://github.com/ethersphere/bee-dashboard/issues/402)) ([127d44f](https://github.com/ethersphere/bee-dashboard/commit/127d44fd7ac763fd78d1eab99f10f952ba6bb1b6))
+* download preview ([#397](https://github.com/ethersphere/bee-dashboard/issues/397)) ([f38e8e1](https://github.com/ethersphere/bee-dashboard/commit/f38e8e11d6814e5246b0a7a25e32a009581a76a9))
+* map size in safari ([#404](https://github.com/ethersphere/bee-dashboard/issues/404)) ([ee864bd](https://github.com/ethersphere/bee-dashboard/commit/ee864bdbe9029184cc905f36af08fdea9431b4a8))
+
+## [0.16.0](https://github.com/ethersphere/bee-dashboard/compare/v0.15.0...v0.16.0) (2022-06-02)
+
+
+### Features
+
+* add light node upgrade top up methods ([#372](https://github.com/ethersphere/bee-dashboard/issues/372)) ([a768b4e](https://github.com/ethersphere/bee-dashboard/commit/a768b4ea0675596f6fe49771ef9d0755af00db56))
+* allow for the port to be configured ([#370](https://github.com/ethersphere/bee-dashboard/issues/370)) ([b6f138b](https://github.com/ethersphere/bee-dashboard/commit/b6f138b423cbe18b078fd38ea64b4c7a839d4e6e))
+* recognize ens domains ([#351](https://github.com/ethersphere/bee-dashboard/issues/351)) ([5917a13](https://github.com/ethersphere/bee-dashboard/commit/5917a133172c9e2fc0a81fb2fa19ea29ff976d03))
+
+## [0.15.0](https://github.com/ethersphere/bee-dashboard/compare/v0.14.0...v0.15.0) (2022-05-16)
+
+
+### Features
+
+* add aditional information to the stamps overview ([#349](https://github.com/ethersphere/bee-dashboard/issues/349)) ([23dea07](https://github.com/ethersphere/bee-dashboard/commit/23dea07f6e53da91f87078749f07bd95c9e65983))
+* add bee desktop toolkit ([#311](https://github.com/ethersphere/bee-dashboard/issues/311)) ([ecaf205](https://github.com/ethersphere/bee-dashboard/commit/ecaf2054fc5aaa5fa4f1d0b3fb2753af9d9b233e))
+* add bee-desktop settings capabilities ([#323](https://github.com/ethersphere/bee-dashboard/issues/323)) ([87b0b71](https://github.com/ethersphere/bee-dashboard/commit/87b0b71cc63098a5d886ff47d52715c250d1b659))
+* support for bzz.link cids when downloading files ([#350](https://github.com/ethersphere/bee-dashboard/issues/350)) ([3784b29](https://github.com/ethersphere/bee-dashboard/commit/3784b29f148b706d5bc40b69b5ae898efa2c1990))
+* wait for postage stamp to be usable when bying it ([#352](https://github.com/ethersphere/bee-dashboard/issues/352)) ([1e2face](https://github.com/ethersphere/bee-dashboard/commit/1e2face10e93818f281526d8245f84834e5ecb86))
+
+
+### Bug Fixes
+
+* app crash caused by inputing non-number characters ([#347](https://github.com/ethersphere/bee-dashboard/issues/347)) ([a67be7a](https://github.com/ethersphere/bee-dashboard/commit/a67be7a31ec88e9ce9c7764ec4523496c157d08a))
+* connection health indicator values to reflect the current network conditions ([#353](https://github.com/ethersphere/bee-dashboard/issues/353)) ([07561aa](https://github.com/ethersphere/bee-dashboard/commit/07561aaed2ce7f7ffd7ecfd8ae8b5190cc9893bc))
+* nested directory upload preserves the directory structure ([#365](https://github.com/ethersphere/bee-dashboard/issues/365)) ([86978b7](https://github.com/ethersphere/bee-dashboard/commit/86978b7e999584173b082eef86074af698523752))
+* remove restrictions on postage stamp label ([#354](https://github.com/ethersphere/bee-dashboard/issues/354)) ([b6b9914](https://github.com/ethersphere/bee-dashboard/commit/b6b9914548a0ac00ed293ea35490ce38e9d6adaa))
+* show current postage stamp price per block ([#348](https://github.com/ethersphere/bee-dashboard/issues/348)) ([906a457](https://github.com/ethersphere/bee-dashboard/commit/906a457ae5a8683f82d218759fd66dc1b7c9a220))
+
+## [0.14.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.13.0...v0.14.0) (2022-04-14)
+
+
+### Features
+
+* add hook that detects if the bee-dashboard is run within bee-desktop ([#334](https://www.github.com/ethersphere/bee-dashboard/issues/334)) ([eb9e309](https://www.github.com/ethersphere/bee-dashboard/commit/eb9e309c8bc0327d137f190d6873618cb215fece))
+* detect bee mode and enable/disable status checks accordingly ([#318](https://www.github.com/ethersphere/bee-dashboard/issues/318)) ([8baecb7](https://www.github.com/ethersphere/bee-dashboard/commit/8baecb783f1574af1cd1f17738efae4b0ac9f0c8))
+* optional status checks (e.g. connected peers > 0 or funded chequebook) ([#331](https://www.github.com/ethersphere/bee-dashboard/issues/331)) ([5d0fbf7](https://www.github.com/ethersphere/bee-dashboard/commit/5d0fbf705dfed6738980c751a9654199d60a3787))
+
+
+### Bug Fixes
+
+* postage stamp price and TTL calculation ([#305](https://www.github.com/ethersphere/bee-dashboard/issues/305)) ([d0b3f1a](https://www.github.com/ethersphere/bee-dashboard/commit/d0b3f1abee7ea017bdd05954d5fadafb67365efd))
+
+## [0.13.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.12.0...v0.13.0) (2022-01-28)
+
+
+### Features
+
+* add hash based routing ([#287](https://www.github.com/ethersphere/bee-dashboard/issues/287)) ([9ee1c91](https://www.github.com/ethersphere/bee-dashboard/commit/9ee1c9107bb08d1838044f39e4d0dd5817c8f283))
+* add metadata and preview ([#292](https://www.github.com/ethersphere/bee-dashboard/issues/292)) ([f401314](https://www.github.com/ethersphere/bee-dashboard/commit/f4013142afdb407e699eff9587921e23c971f1db))
+
+
+### Bug Fixes
+
+* clean up spinner and disabled state on download page ([#294](https://www.github.com/ethersphere/bee-dashboard/issues/294)) ([a406e0f](https://www.github.com/ethersphere/bee-dashboard/commit/a406e0fc014991fcbaca230f27f41cd071d8a863))
+* correct folder name when uploading multiple files or mix of files & directories ([#291](https://www.github.com/ethersphere/bee-dashboard/issues/291)) ([d878747](https://www.github.com/ethersphere/bee-dashboard/commit/d8787476acf068be6609a77b1fadb2f61d0fd502))
+* disable feeds page when disconnected ([#293](https://www.github.com/ethersphere/bee-dashboard/issues/293)) ([1310deb](https://www.github.com/ethersphere/bee-dashboard/commit/1310deb17aec91f368f99974aaa245abb0a3e201))
+* do not print size and name when meta is unknown ([#297](https://www.github.com/ethersphere/bee-dashboard/issues/297)) ([7880c80](https://www.github.com/ethersphere/bee-dashboard/commit/7880c802aea6b0830ca52b47b88540b8df5888cc))
+* get current price from chain state ([#286](https://www.github.com/ethersphere/bee-dashboard/issues/286)) ([bc82e67](https://www.github.com/ethersphere/bee-dashboard/commit/bc82e6756154b33d01796a6e66e51dcfa1495338))
+
+## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)
+
+
+### Features
+
+* add identity and feed management ([#272](https://www.github.com/ethersphere/bee-dashboard/issues/272)) ([25b65c3](https://www.github.com/ethersphere/bee-dashboard/commit/25b65c3fb770b09c685fe66596e372dfbb616625))
+
+### [0.11.2](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.1...v0.11.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* **ci:** add lib folder to the package.json files prop ([#270](https://www.github.com/ethersphere/bee-dashboard/issues/270)) ([5ac0f01](https://www.github.com/ethersphere/bee-dashboard/commit/5ac0f01bf50ee23b474ab9c8d61c6af418544083))
+
+### [0.11.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.0...v0.11.1) (2021-12-14)
+
+
+### Bug Fixes
+
+* typo in publish script ([#268](https://www.github.com/ethersphere/bee-dashboard/issues/268)) ([c1e77bf](https://www.github.com/ethersphere/bee-dashboard/commit/c1e77bfc0d3ac442d6bacec7402f576a6422927e))
+
+## [0.11.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.10.0...v0.11.0) (2021-12-14)
+
+
+### Features
+
+* modularisation ([#244](https://www.github.com/ethersphere/bee-dashboard/issues/244)) ([2a13da1](https://www.github.com/ethersphere/bee-dashboard/commit/2a13da1a6c5925946d22666a84f975cec87df115))
+
+
+### Bug Fixes
+
+* **build:** bee-dashboard component building ([#267](https://www.github.com/ethersphere/bee-dashboard/issues/267)) ([153b007](https://www.github.com/ethersphere/bee-dashboard/commit/153b007387618e34e1d5dc7fd82d49722783e757))
+
+## [0.10.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.9.0...v0.10.0) (2021-12-07)
+
+
+### Features
+
+* add website and folder upload and download ([#260](https://www.github.com/ethersphere/bee-dashboard/issues/260)) ([3ef1ad9](https://www.github.com/ethersphere/bee-dashboard/commit/3ef1ad9574c9193f83d8a1447fddb79266c1a4f4))
+
+## [0.9.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.8.0...v0.9.0) (2021-11-25)
+
+
+### Features
+
+* add dev mode flag ([#246](https://www.github.com/ethersphere/bee-dashboard/issues/246)) ([49350b0](https://www.github.com/ethersphere/bee-dashboard/commit/49350b05709053ecfbc4fc98f8b1df1aa0345e95))
+* enable setting devMode from queryParams ([#254](https://www.github.com/ethersphere/bee-dashboard/issues/254)) ([844383b](https://www.github.com/ethersphere/bee-dashboard/commit/844383bea7b2118232a74ac23c9e9a38fc47d3fd))
+* improve upload flow ([#240](https://www.github.com/ethersphere/bee-dashboard/issues/240)) ([635621b](https://www.github.com/ethersphere/bee-dashboard/commit/635621b04aea7124a99d00f9e31a86983063f5ce))
+* move postage stamp operations to bee debug api ([#256](https://www.github.com/ethersphere/bee-dashboard/issues/256)) ([3bb0077](https://www.github.com/ethersphere/bee-dashboard/commit/3bb00771d684ad93fd7acd921b648574013aec5c))
+
+## [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
@@ -1 +1 @@
-* nugaon vojtechsimetka
+* @Cafe137 @vojtechsimetka
@@ -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"]
@@ -3,47 +3,119 @@
 [![](https://img.shields.io/badge/made%20by-Swarm-blue.svg?style=flat-square)](https://swarm.ethereum.org/)
 [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
-![](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)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
+![](https://img.shields.io/badge/npm-%3E%3D6.9.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/Node.js-%3E%3D14.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 **Bee version <!-- SUPPORTED_BEE_START -->1.7.0-bbf13011<!-- SUPPORTED_BEE_END -->**.
+Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
+[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
+[releases tab](https://github.com/ethersphere/bee-dashboard/releases).

-| Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
-|-------|---------|-------|----------|------|
-| ![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) |
+![Status page](/ui_samples/info.png)

+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                           |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Settings](/ui_samples/settings.png) |

 ## Table of Contents

 - [Install](#install)
 - [Usage](#usage)
+  - [Terminal](#terminal)
+  - [Docker](#docker)
 - [Contribute](#contribute)
+- [Development](#development)
+- [Maintainers](#maintainers)
 - [License](#license)

 ## Install

-```
-$ npm install -g @ethersphere/bee-dashboard
-$ bee-dashboard
+Install globally with npm. We require Node.js's version of at least 12.x and npm v6.x (or yarn v2.x).
+
+```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)
+
+You can also define your own port with the `PORT` environment variable. E.g.
+
+```sh
+export PORT=3005
+bee-dashboard
+```
+
+Will start the bee-dashboard on [`http://localhost:3005`](http://localhost:3005)
+
+### 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 run build
-npm run serve
+npm i
+
+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/)
+
+#### Environmental variables
+
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. 
+We support following variables:
+
+ - `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
+ - `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same origin under which the Dashboard is served.
+ - `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
+ - `REACT_APP_BEE_DEBUG_HOST` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+ - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
+
+#### Swarm Desktop development
+
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
+
+```sh
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000
+REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
+
+npm start
+npm run desktop # This will inject the API key to the Dashboard 
+```

 ## Contribute

@@ -51,13 +123,19 @@ 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

 [BSD-3-Clause](./LICENSE)
+
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [0, 'always', Infinity], // disable commit body length restriction
+  },
+}
@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+import envPaths from 'env-paths'
+import open  from 'open'
+
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const paths = envPaths('Swarm Desktop', { suffix: '' })
+const apiKey = await readFile(join(paths.data, 'api-key.txt'), {encoding: 'utf-8'})
+const url = `http://localhost:3001/?v=${apiKey}#/`
+
+console.log('Opening: ' + url)
+await open(url)
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.2.0",
+  "version": "0.20.2",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -15,6 +15,8 @@
  "bin": {
    "bee-dashboard": "./serve.js"
  },
+  "main": "lib/App.js",
+  "types": "lib/src/App.d.ts",
  "bugs": {
    "url": "https://github.com/ethersphere/bee-dashboard/issues/"
  },
@@ -24,66 +26,123 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^0.9.0",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@types/react-router": "^5.1.13",
-    "@types/react-router-dom": "^5.1.7",
-    "axios": "^0.21.1",
-    "bignumber.js": "^9.0.1",
-    "feather-icons": "^4.28.0",
-    "http-serve": "^1.0.1",
-    "material-ui-dropzone": "^3.5.0",
-    "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.2",
-    "react-feather": "^2.0.9",
-    "react-identicons": "^1.2.5",
-    "react-router-dom": "^5.2.0",
-    "react-syntax-highlighter": "^15.4.3"
+    "@ethersphere/bee-js": "^5.0.0",
+    "@ethersphere/manifest-js": "1.2.1",
+    "@ethersphere/swarm-cid": "^0.1.0",
+    "@material-ui/core": "4.12.3",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "assert": "^2.0.0",
+    "axios": "0.24.0",
+    "bignumber.js": "9.0.1",
+    "buffer": "^6.0.3",
+    "crypto": "npm:crypto-browserify",
+    "crypto-browserify": "^3.12.0",
+    "dotted-map": "^2.2.3",
+    "ethers": "^5.6.4",
+    "file-saver": "^2.0.5",
+    "formik": "2.2.9",
+    "formik-material-ui": "3.0.1",
+    "jszip": "^3.7.1",
+    "material-ui-dropzone": "3.5.0",
+    "notistack": "1.0.10",
+    "opener": "1.5.2",
+    "qrcode.react": "1.0.1",
+    "react": ">=17.0.0 || >=18.0.0",
+    "react-copy-to-clipboard": "5.0.4",
+    "react-dom": ">=17.0.0 || >=18.0.0",
+    "react-identicons": "1.2.5",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
+    "react-syntax-highlighter": "15.4.4",
+    "remixicon-react": "^1.0.0",
+    "semver": "7.3.5",
+    "serve-handler": "6.1.3",
+    "stream": "npm:stream-browserify",
+    "stream-browserify": "^3.0.0"
  },
  "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.5",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.41",
-    "@types/qrcode.react": "^1.0.1",
-    "@types/react": "^17.0.3",
-    "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "prettier": "^2.2.1",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
+    "@babel/core": "7.16.0",
+    "@babel/plugin-proposal-class-properties": "7.16.0",
+    "@babel/plugin-transform-runtime": "7.16.4",
+    "@babel/preset-env": "7.16.4",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.0",
+    "@commitlint/config-conventional": "14.1.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/cors": "^2.8.12",
+    "@types/express": "^4.17.13",
+    "@types/file-saver": "2.0.4",
+    "@types/jest": "27.0.2",
+    "@types/qrcode.react": "1.0.2",
+    "@types/react": "17.0.34",
+    "@types/react-copy-to-clipboard": "5.0.2",
+    "@types/react-dom": "17.0.11",
+    "@types/react-router": "5.1.18",
+    "@types/react-router-dom": "5.3.2",
+    "@types/react-syntax-highlighter": "13.5.2",
+    "@types/semver": "7.3.9",
+    "@typescript-eslint/eslint-plugin": "5.28.0",
+    "@typescript-eslint/parser": "5.28.0",
+    "babel-eslint": "10.1.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
+    "babel-plugin-tsconfig-paths": "1.0.2",
+    "base64-inline-loader": "^2.0.1",
+    "cors": "^2.8.5",
+    "depcheck": "^1.4.3",
+    "env-paths": "^3.0.0",
+    "eslint": "8.17.0 ",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "26.5.3",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.30.0",
+    "eslint-plugin-react-hooks": "4.5.0",
+    "eslint-plugin-testing-library": "5.5.1",
+    "express": "^4.17.3",
+    "file-loader": "6.2.0",
+    "open": "^8.4.0",
+    "prettier": "2.4.1",
+    "puppeteer": "^15.4.0",
+    "react-scripts": "^5.0.1",
+    "rimraf": "^3.0.2",
+    "ts-node": "^10.8.1",
+    "typescript": "4.8.3",
+    "web-vitals": "2.1.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
  },
  "scripts": {
-    "prepare": "npm run build",
+    "prepare": "npm run build && npm run build:component",
    "start": "react-scripts start",
+    "desktop": "node ./desktop.mjs",
    "build": "react-scripts build",
+    "build:component": "rimraf ./lib && webpack --mode=production && npm run compile:types",
+    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
    "test": "react-scripts test",
-    "serve": "http-serve ./build -o",
+    "test:ui": "node ui-test/index.js",
+    "serve": "node ./serve.js",
+    "depcheck": "depcheck .",
    "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\""
+    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "check:types": "tsc --project tsconfig.lib.json",
+    "update-map-data": "node ./utils/update-map-data.js"
  },
  "files": [
+    "lib",
    "build",
    "serve.js"
  ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
  "browserslist": {
    "production": [
      ">0.2%",
@@ -95,5 +154,10 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.9.0",
+    "bee": ">=0.6.0"
  }
 }
@@ -6,13 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
-    
-    <meta
-      name="description"
-      content="Bee Dashboard"
-    />
+    <meta name="description" content="Bee Dashboard" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -29,7 +23,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Bee Dashboard</title>
+    <title>Swarm</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -0,0 +1,12 @@
+{
+    "trailingSlash": false,
+    "headers": [
+        {
+          "source" : "*",
+          "headers" : [{
+            "key" : "Cache-Control",
+            "value" : "max-age=3600"
+          }]
+        }
+    ]    
+}
@@ -1,16 +1,35 @@
 #!/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({
-  root: path.join(__dirname, 'build')
+const port = process.env.PORT || 8080

+const serverConfig = {
+  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 () {
-  console.log('Starting up Bee Dashboard on address http://localhost:8080')
+server.listen(port, () => {
+  console.log(`Starting up Bee Dashboard on address http://localhost:${port}`)
  console.log('Hit CTRL-C to stop the server')
-  opener('http://localhost:8080')
+  opener(`http://localhost:${port}`)
 })
@@ -10,6 +10,6 @@ declare module 'react-identicons' {
    getColor?: () => string
  }

-  const Identicon = (props: Props): JSXElementConstructor => ReactNode
+  const Identicon = (props: Props): JSXElementConstructor => ReactNode //eslint-disable-line @typescript-eslint/no-unused-vars
  export default Identicon
 }
@@ -1,34 +1,28 @@
@font-face {
-  font-family: "IBMPlexMono500";
-  src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
-  font-weight: 500;
-}
-@font-face {
-  font-family: "IBMPlexMono600";
-  src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
-  font-weight: 600;
-}
-@font-face {
-  font-family: "IBMPlexMonoregular";
-  src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
+  font-family: 'iAWriterQuattroV';
+  font-style: normal;
  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/iAWriterQuattroV.ttf) format('truetype');
 }
+
@font-face {
-  font-family: "WorkSans-Italic-VariableFont_wght";
-  src: url(assets/fonts/WorkSans-Italic-VariableFont_wght.ttf) format('truetype');
-  font-weight: 700;
-}
-@font-face {
-  font-family: "WorkSans-VariableFont_wght";
-  src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
-  font-weight: 400;
+  font-family: 'iAWriterMonoV';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/iAWriterMonoV.ttf) format('truetype');
 }

 .App {
-  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

-a, button {  
-  font-family: "IBMPlexMono500" !important;
+a,
+button {
+  font-family: 'iAWriterMonoV' !important;
  color: #dd7700;
-}
+}
@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-import App from './App'
-
-// Mocks methods that are not implemented in JSDOM
-// see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-})
-
-// TODO: this is not a good test and should be removed. Keeping it in to make sure the whole app renders (to be used in CI)
-test('should render the app', () => {
-  render(<App />)
-})
@@ -1,45 +1,81 @@
-import { ReactElement, useEffect, useState } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
-import './App.css'
-
-import { ThemeProvider } from '@material-ui/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider } from '@material-ui/core/styles'
+import { SnackbarProvider } from 'notistack'
+import React, { ReactElement } from 'react'
+import { HashRouter as Router } from 'react-router-dom'
+import './App.css'
+import Dashboard from './layout/Dashboard'
+import { Provider as BeeProvider } from './providers/Bee'
+import { Provider as FeedsProvider } from './providers/Feeds'
+import { Provider as FileProvider } from './providers/File'
+import { Provider as PlatformProvider } from './providers/Platform'
+import { Provider as SettingsProvider } from './providers/Settings'
+import { Provider as StampsProvider } from './providers/Stamps'
+import { Provider as TopUpProvider } from './providers/TopUp'
+import { Provider as BalanceProvider } from './providers/WalletBalance'
+import BaseRouter from './routes'
+import { theme } from './theme'

-import BaseRouter from './routes/routes'
-import { lightTheme, darkTheme } from './theme'
+interface Props {
+  beeApiUrl?: string
+  beeDebugApiUrl?: string
+  defaultRpcUrl?: string
+  lockedApiSettings?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  errorReporting?: (err: Error) => void
+}

-const App = (): ReactElement => {
-  const [themeMode, toggleThemeMode] = useState('light')
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
-
-  return (
+const App = ({
+  beeApiUrl,
+  beeDebugApiUrl,
+  defaultRpcUrl,
+  lockedApiSettings,
+  isDesktop,
+  desktopUrl,
+  errorReporting,
+}: Props): ReactElement => {
+  const mainApp = (
    <div className="App">
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
-        <CssBaseline />
-        <Router>
-          <BaseRouter />
-        </Router>
+      <ThemeProvider theme={theme}>
+        <SettingsProvider
+          beeApiUrl={beeApiUrl}
+          beeDebugApiUrl={beeDebugApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
+          lockedApiSettings={lockedApiSettings}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
+        >
+          <TopUpProvider>
+            <BeeProvider>
+              <BalanceProvider>
+                <StampsProvider>
+                  <FileProvider>
+                    <FeedsProvider>
+                      <PlatformProvider>
+                        <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+                          <Router>
+                            <>
+                              <CssBaseline />
+                              <Dashboard errorReporting={errorReporting}>
+                                <BaseRouter />
+                              </Dashboard>
+                            </>
+                          </Router>
+                        </SnackbarProvider>
+                      </PlatformProvider>
+                    </FeedsProvider>
+                  </FileProvider>
+                </StampsProvider>
+              </BalanceProvider>
+            </BeeProvider>
+          </TopUpProvider>
+        </SettingsProvider>
      </ThemeProvider>
    </div>
  )
+
+  return mainApp
 }

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

  const handleClickOpen = () => {
    setOpen(true)
@@ -31,43 +31,39 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
  }

  const handleCashout = () => {
+    if (!beeDebugApi) return
+
    if (peerId) {
      setLoadingCashout(true)
-      beeDebugApi.chequebook
-        .peerCashout(peerId)
+      beeDebugApi
+        .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(() => {
-          // FIXME: handle errors more gracefully
-          handleToast(<span>Error with cashout</span>)
+        .catch((e: Error) => {
+          console.error(e) // eslint-disable-line
+          enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
        })
        .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' }}>
-        Cashout
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
+        Cash out peer {peerId.slice(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>
@@ -84,7 +80,7 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
            )}
            {!loadingCashout && (
              <span>
-                Are you sure you want to cashout <strong>{uncashedAmount} BZZ</strong> from Peer{' '}
+                Are you sure you want to cashout <strong>{uncashedAmount} xBZZ</strong> from Peer{' '}
                <strong>{peerId}</strong>?
              </span>
            )}
@@ -1,25 +1,21 @@
-import { ReactElement, useState } from 'react'
-import { IconButton, Snackbar } from '@material-ui/core'
+import type { ReactElement } from 'react'
+import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Clipboard } from 'react-feather'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
+import { useSnackbar } from 'notistack'

 interface Props {
  value: string
 }

-export default function ClipboardCopy(props: Props): ReactElement {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = () => {
-    setCopied(true)
-    setTimeout(() => setCopied(false), 3000)
-  }
+export default function ClipboardCopy({ value }: Props): ReactElement {
+  const { enqueueSnackbar } = useSnackbar()
+  const handleCopy = () => enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })

  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>
@@ -0,0 +1,26 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { Close } from '@material-ui/icons'
+import { ReactElement } from 'react'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      padding: theme.spacing(1),
+      cursor: 'pointer',
+    },
+  }),
+)
+
+export function CloseButton({ onClose }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.wrapper} onClick={onClose}>
+      <Close />
+    </div>
+  )
+}
@@ -0,0 +1,38 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: string
+  prettify?: boolean
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      overflow: 'scroll',
+      background: '#ffffff',
+    },
+    pre: {
+      maxHeight: '6em',
+      padding: theme.spacing(2),
+    },
+  }),
+)
+
+function prettifyString(string: string): string {
+  try {
+    return JSON.stringify(JSON.parse(string), null, 4)
+  } catch {
+    return string
+  }
+}
+
+export function Code({ children, prettify }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.wrapper}>
+      <pre className={classes.pre}>{prettify ? prettifyString(children) : children}</pre>
+    </div>
+  )
+}
@@ -1,13 +1,7 @@
-import React, { ReactElement, useEffect } from 'react'
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Tabs, Tab, Box, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import TabsContainer from './TabsContainer'
 import CodeBlock from './CodeBlock'
-
-interface TabPanelProps {
-  children?: React.ReactNode
-  index: number
-  value: number
-}
+import { Context } from '../providers/Platform'

 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 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
-        role="tabpanel"
-        hidden={value !== index}
-        id={`simple-tabpanel-${index}`}
-        aria-labelledby={`simple-tab-${index}`}
-        {...other}
-      >
-        {value === index && (
-          <Box style={{ marginTop: '-12px' }}>
-            <Typography component="div">{children}</Typography>
-          </Box>
-        )}
-      </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} />)
+  const { platform, setPlatform } = useContext(Context)

  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>
+    <TabsContainer
+      index={platform}
+      indexChanged={setPlatform}
+      values={[
+        {
+          label: 'Linux',
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />,
+        },
+        {
+          label: 'macOS',
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />,
+        },
+      ]}
+    />
  )
 }
@@ -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>
-  )
-}
@@ -0,0 +1,21 @@
+import { createStyles, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: (string | ReactElement)[] | (string | ReactElement)
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    text: {
+      color: '#606060',
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+export function DocumentationText({ children }: Props): ReactElement {
+  const classes = useStyles()
+
+  return <Typography className={classes.text}>{children}</Typography>
+}
@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactElement } from 'react'

 interface Props {
  children: ReactElement
+  errorReporting?: (err: Error) => void
 }

 interface State {
@@ -9,8 +10,11 @@ interface State {
 }

 export default class ErrorBoundary extends Component<Props, State> {
+  private errorReporting?: (err: Error) => void
+
  constructor(props: Props) {
    super(props)
+    this.errorReporting = props.errorReporting
    this.state = { error: null }
  }

@@ -20,7 +24,10 @@ export default class ErrorBoundary extends Component<Props, State> {
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // You can also log the error to an error reporting service
+    if (this.errorReporting) {
+      this.errorReporting(error)
+    }
+
    console.error({ error, errorInfo }) // eslint-disable-line
  }

@@ -1,13 +1,12 @@
 import { Typography } from '@material-ui/core/'
-import QRCodeModal from './QRCodeModal'
-import ClipboardCopy from './ClipboardCopy'
-
-import Identicon from 'react-identicons'
 import { ReactElement } from 'react'
+import Identicon from 'react-identicons'
+import ClipboardCopy from './ClipboardCopy'
+import QRCodeModal from './QRCodeModal'
+import { BLOCKCHAIN_EXPLORER_URL } from '../constants'

 interface Props {
  address: string | undefined
-  network?: string
  hideBlockie?: boolean
  transaction?: boolean
  truncate?: boolean
@@ -37,9 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement {
                    }
                  : { marginRight: '7px' }
              }
-              href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${
-                props.transaction ? 'tx' : 'address'
-              }/${props.address}`}
+              href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
              target="_blank"
              rel="noreferrer"
            >
@@ -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
@@ -0,0 +1,59 @@
+import { Collapse, ListItem } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ReactElement, ReactNode, useState } from 'react'
+
+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
+  expandable: ReactNode
+  defaultOpen?: boolean
+}
+
+export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <div className={`${classes.root} ${classes.rootLevel2}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        {children}
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={classes.contentLevel12}>{expandable}</div>
+      </Collapse>
+    </div>
+  )
+}
@@ -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>
+  )
+}
@@ -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 'remixicon-react/InformationLineIcon'
+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>
+  )
+}
@@ -0,0 +1,46 @@
+import { Grid } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+    action: {
+      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 (
+      <div className={classes.wrapper}>
+        {children
+          // Exclude falsy values to allow conditional rendering
+          .filter(x => x)
+          .map((a, i) => (
+            <div key={i} className={classes.action}>
+              {a}
+            </div>
+          ))}
+      </div>
+    )
+  }
+
+  return (
+    <Grid container direction="row">
+      <Grid className={classes.action}>{children}</Grid>
+    </Grid>
+  )
+}
@@ -0,0 +1,165 @@
+import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ChangeEvent, ReactElement, useState } from 'react'
+import Check from 'remixicon-react/CheckLineIcon'
+import Edit from 'remixicon-react/PencilLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
+import ExpandableListItemActions from './ExpandableListItemActions'
+import ExpandableListItemNote from './ExpandableListItemNote'
+import { SwarmButton } from './SwarmButton'
+import type { RemixiconReactIconProps } from 'remixicon-react'
+
+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
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
+  loading?: boolean
+  onChange?: (value: string) => void
+  onConfirm?: (value: string) => void
+  mapperFn?: (value: string) => string
+  locked?: boolean
+}
+
+export default function ExpandableListItemKey({
+  label,
+  value,
+  onConfirm,
+  onChange,
+  confirmLabel,
+  confirmLabelDisabled,
+  confirmIcon,
+  expandedOnly,
+  helperText,
+  placeholder,
+  loading,
+  mapperFn,
+  locked,
+}: 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>) => {
+    if (mapperFn) {
+      e.target.value = mapperFn(e.target.value)
+    }
+
+    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 && !locked && (
+                  <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
+              hidden={locked}
+            />
+          </Collapse>
+        </Grid>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+        <ExpandableListItemActions>
+          <SwarmButton
+            disabled={
+              loading ||
+              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
+            }
+            loading={loading}
+            iconType={confirmIcon ?? Check}
+            onClick={() => {
+              if (onConfirm) onConfirm(inputValue)
+            }}
+          >
+            {confirmLabel || 'Save'}
+          </SwarmButton>
+          <SwarmButton
+            disabled={loading || inputValue === value || inputValue === ''}
+            iconType={X}
+            onClick={() => setInputValue(value || '')}
+            cancel
+          >
+            Cancel
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Collapse>
+    </>
+  )
+}
@@ -0,0 +1,117 @@
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, useState } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import Eye from 'remixicon-react/EyeLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+
+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
+  expanded?: boolean
+}
+
+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, expanded }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(expanded || 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)
+  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
+    splitValues[splitValues.length - 1]
+  }`
+
+  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}>{value ? spanText : ''}</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>
+  )
+}
@@ -0,0 +1,106 @@
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
+import { ReactElement, useState } from 'react'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { useNavigate } from 'react-router'
+
+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}`,
+    },
+    openLinkIcon: {
+      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),
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+  link?: string
+  navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'
+  allowClipboard?: boolean
+}
+
+export default function ExpandableListItemLink({
+  label,
+  value,
+  link,
+  navigationType = 'NEW_WINDOW',
+  allowClipboard = true,
+}: Props): ReactElement | null {
+  const classes = useStyles()
+  const [copied, setCopied] = useState(false)
+  const navigate = useNavigate()
+
+  const tooltipClickHandler = () => setCopied(true)
+  const tooltipCloseHandler = () => setCopied(false)
+
+  const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
+
+  function onNavigation() {
+    if (navigationType === 'NEW_WINDOW') {
+      window.open(link || value)
+    } else {
+      navigate(link || value)
+    }
+  }
+
+  return (
+    <ListItem className={classes.header}>
+      <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>
+              {allowClipboard && (
+                <span className={classes.copyValue}>
+                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                    <CopyToClipboard text={value}>
+                      <span onClick={tooltipClickHandler}>{displayValue}</span>
+                    </CopyToClipboard>
+                  </Tooltip>
+                </span>
+              )}
+              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+              <IconButton size="small" className={classes.openLinkIcon}>
+                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
+                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
+              </IconButton>
+            </div>
+          </Typography>
+        </Grid>
+      </Grid>
+    </ListItem>
+  )
+}
@@ -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>
+  )
+}
@@ -0,0 +1,30 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+    },
+  }),
+)
+
+interface Props {
+  alt: string
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitImage(props: Props): ReactElement {
+  const classes = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
+  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+
+  return <img className={classes.image} alt={props.alt} src={props.src} style={inlineStyles} />
+}
@@ -0,0 +1,37 @@
+import { ReactElement, useEffect, useState } from 'react'
+import { getPrettyDateString } from '../utils/date'
+import { getHistorySafe, HistoryItem, HISTORY_KEYS } from '../utils/local-storage'
+import ExpandableList from './ExpandableList'
+import ExpandableListItemLink from './ExpandableListItemLink'
+
+interface Props {
+  title: string
+  localStorageKey: HISTORY_KEYS
+}
+
+export function History({ title, localStorageKey }: Props): ReactElement | null {
+  const [items, setItems] = useState<HistoryItem[]>([])
+
+  useEffect(() => {
+    setItems(getHistorySafe(localStorageKey))
+  }, [localStorageKey])
+
+  if (!items.length) {
+    return null
+  }
+
+  return (
+    <ExpandableList label={title} defaultOpen>
+      {items.map((x, i) => (
+        <ExpandableListItemLink
+          label={getPrettyDateString(new Date(x.createdAt))}
+          value={x.name}
+          link={'/files/hash/' + x.hash}
+          key={i}
+          navigationType="HISTORY_PUSH"
+          allowClipboard={false}
+        />
+      ))}
+    </ExpandableList>
+  )
+}
@@ -0,0 +1,41 @@
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ArrowBack } from '@material-ui/icons'
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface Props {
+  children: string
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    pressable: {
+      cursor: 'pointer',
+    },
+    icon: {
+      color: '#242424',
+    },
+  }),
+)
+
+export function HistoryHeader({ children }: Props): ReactElement {
+  const classes = useStyles()
+  const navigate = useNavigate()
+
+  function goBack() {
+    navigate(-1)
+  }
+
+  return (
+    <Box mb={4}>
+      <Grid container direction="row">
+        <Box mr={2}>
+          <div className={classes.pressable} onClick={goBack}>
+            <ArrowBack className={classes.icon} />
+          </div>
+        </Box>
+        <Typography variant="h1">{children}</Typography>
+      </Grid>
+    </Box>
+  )
+}
@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Loading(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress />
+    </Grid>
+  )
+}
@@ -0,0 +1,110 @@
+import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
+import type { Peer } from '@ethersphere/bee-js'
+import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
+import nodesDb from '../assets/data/nodes-db.json'
+import { Context } from '../providers/Bee'
+import mapData from '../assets/data/map-data.json'
+
+interface Props {
+  style?: CSSProperties
+  error?: boolean
+}
+
+interface MapRecord {
+  lat: number
+  lng: number
+}
+
+type MapDB = Record<string, MapRecord>
+
+const fullMapDb = nodesDb as unknown as MapDB
+const deduplicatedRecords = deduplicate(fullMapDb)
+
+function deduplicate(db: MapDB): MapRecord[] {
+  const noDuplicates: Record<string, MapRecord> = {}
+
+  Object.entries(fullMapDb).forEach(([key, record]) => {
+    noDuplicates[`${record.lat} ${record.lng}`] = record
+  })
+
+  return Object.values(noDuplicates)
+}
+
+function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
+  const noDuplicates: Record<string, MapRecord> = {}
+  peers.forEach(({ address }) => {
+    const record = db[address]
+
+    if (record) noDuplicates[`${record.lat} ${record.lng}`] = record
+  })
+
+  return Object.values(noDuplicates)
+}
+
+function addPins(map: DottedMap, pins: MapRecord[], color: string) {
+  pins.forEach(({ lat, lng }) => {
+    map.addPin({ lat, lng, svgOptions: { color } })
+  })
+}
+
+const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
+const mapNoPins = new DottedMap({ map: JSON.parse(mapData) })
+addPins(mapPrecomputed, deduplicatedRecords, '#303030')
+
+const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
+
+export default function Card({ style, error }: Props): ReactElement {
+  const { peers } = useContext(Context)
+  const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
+
+  useEffect(() => {
+    // Display error map
+    if (error) setMap(mapNoPins.getSVG({ ...mapSvgOptions, color: '#eaeaea' }))
+
+    // Display just the base map without any connections
+    if (!peers) return
+
+    const points = findIntersection(fullMapDb, peers)
+    const mapNew = Object.create(mapPrecomputed)
+    addPins(mapNew, points, '#09CA6C')
+    setMap(mapNew.getSVG(mapSvgOptions))
+  }, [peers, error])
+
+  return (
+    <div
+      style={Object.assign({}, style, {
+        width: '100%',
+        height: '380px',
+        backgroundColor: '#f3f3f3',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      })}
+    >
+      <img
+        alt="world map"
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
+      />
+      {error && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="60"
+          height="60"
+          viewBox="0 0 24 24"
+          fill="#f44336"
+          strokeWidth="0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.25 }}
+        >
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="9" x2="12" y2="13"></line>
+          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="17" x2="12.01" y2="17"></line>
+        </svg>
+      )}
+    </div>
+  )
+}
@@ -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>
-  )
-}
@@ -0,0 +1,55 @@
+import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  steps: string[]
+  index: number
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      height: '52px',
+      display: 'flex',
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    todo: {
+      background: '#f7f7f7',
+      color: '#c9c9c9',
+    },
+    inProgress: {
+      background: '#ffffff',
+      color: '#242424',
+      height: '52px',
+    },
+    done: {
+      background: '#f7f7f7',
+      color: '#606060',
+      height: '52px',
+    },
+  }),
+)
+
+export function ProgressIndicator({ steps, index }: Props): ReactElement {
+  const classes = useStyles()
+
+  function pickClass(i: number): string {
+    if (i === index) {
+      return classes.inProgress
+    }
+
+    return i < index ? classes.done : classes.todo
+  }
+
+  return (
+    <Grid container justifyContent="space-between">
+      {steps.map((x, i) => (
+        <div key={i} className={`${classes.wrapper} ${pickClass(i)}`}>
+          <Typography>{x}</Typography>
+        </div>
+      ))}
+    </Grid>
+  )
+}
@@ -1,61 +1,32 @@
-import { ReactElement } from 'react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, useContext } from 'react'
+import { Link } from 'react-router-dom'
+import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
+import DocsIcon from 'remixicon-react/BookOpenLineIcon'
+import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import HomeIcon from 'remixicon-react/Home3LineIcon'
+import SettingsIcon from 'remixicon-react/Settings2LineIcon'
+import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
+import DashboardLogo from '../assets/dashboard-logo.svg'
+import DesktopLogo from '../assets/desktop-logo.svg'
+import { ROUTES } from '../routes'
+import SideBarItem from './SideBarItem'
+import SideBarStatus from './SideBarStatus'
+import { BeeModes } from '@ethersphere/bee-js'
+import { BEE_DOCS_HOST } from '../constants'

-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 SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
-import { Health } from '@ethersphere/bee-js'
-
-const drawerWidth = 240
-
-const navBarItems = [
-  {
-    label: 'Status',
-    id: 'status',
-    path: '/',
-    icon: Activity,
-  },
-  {
-    label: 'Files',
-    id: 'files',
-    path: '/files/',
-    icon: FileText,
-  },
-  {
-    label: 'Accounting',
-    id: 'accounting',
-    path: '/accounting/',
-    icon: DollarSign,
-  },
-  {
-    label: 'Peers',
-    id: 'peers',
-    path: '/peers/',
-    icon: Share2,
-  },
-  {
-    label: 'Settings',
-    id: 'settings',
-    path: '/settings/',
-    icon: Settings,
-  },
-]
+const drawerWidth = 300

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
-      display: 'flex',
-    },
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-    },
-    logo: {
-      padding: 1,
-      marginTop: 20,
+      flexWrap: 'nowrap',
+      minHeight: '100vh',
+      paddingTop: theme.spacing(8),
+      paddingBottom: theme.spacing(8),
    },
    drawer: {
      width: drawerWidth,
@@ -63,106 +34,107 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    drawerPaper: {
      width: drawerWidth,
+      backgroundColor: '#212121',
+      zIndex: 988,
    },
-    activeSideBar: {
-      color: '#dd7700',
+    logo: {
+      marginLeft: theme.spacing(8),
+      marginRight: theme.spacing(8),
    },
-    activeSideBarItem: {
-      borderLeft: '4px solid #dd7700',
-      backgroundColor: 'inherit !important',
+    icon: {
+      height: theme.spacing(4),
+    },
+    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',
+        },
+      },
    },
-    toolbar: theme.mixins.toolbar,
  }),
 )

-interface Props extends RouteComponentProps {
-  themeMode: string
-  health: boolean
-  nodeHealth: Health | null
-}
-
-export default function SideBar(props: Props): ReactElement {
+export default function SideBar(): ReactElement {
  const classes = useStyles()
+  const { isDesktop } = useContext(SettingsContext)
+  const { nodeInfo } = useContext(BeeContext)
+
+  const navBarItems = [
+    {
+      label: 'Info',
+      path: ROUTES.INFO,
+      icon: HomeIcon,
+    },
+    {
+      label: 'Files',
+      path: nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT ? ROUTES.DOWNLOAD : ROUTES.UPLOAD,
+      icon: FilesIcon,
+      pathMatcherSubstring: '/files/',
+    },
+    {
+      label: 'Account',
+      path: ROUTES.ACCOUNT_WALLET,
+      icon: AccountIcon,
+      pathMatcherSubstring: '/account/',
+    },
+    {
+      label: 'Settings',
+      path: ROUTES.SETTINGS,
+      icon: SettingsIcon,
+    },
+  ]

  return (
-    <div className={classes.root}>
-      <Drawer
-        className={classes.drawer}
-        variant="permanent"
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-        anchor="left"
-      >
-        <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
-          <Link to="/">
-            <img
-              alt="swarm"
-              className={classes.logo}
-              src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange}
-              style={{ maxHeight: '30px', alignItems: 'center' }}
-            />
+    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
+      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
+        <Grid className={classes.logo}>
+          <Link to={ROUTES.INFO}>
+            <img alt="swarm" src={isDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
-        </div>
-        <List>
-          {navBarItems.map(item => (
-            <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
-              <ListItem
-                button
-                selected={props.location.pathname === item.path}
-                className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
-              >
-                <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
-                  <item.icon style={{ height: '20px' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary={item.label}
-                  className={props.location.pathname === item.path ? classes.activeSideBar : ''}
+        </Grid>
+        <Grid>
+          <List>
+            {navBarItems.map(p => (
+              <Link to={p.path} key={p.path} className={classes.link}>
+                <SideBarItem
+                  key={p.path}
+                  iconStart={<p.icon className={classes.icon} />}
+                  path={p.path}
+                  pathMatcherSubstring={p.pathMatcherSubstring}
+                  label={p.label}
                />
-              </ListItem>
+              </Link>
+            ))}
+          </List>
+          <Divider className={classes.divider} />
+          <List>
+            <MUILink href={BEE_DOCS_HOST} target="_blank" className={classes.link}>
+              <SideBarItem
+                iconStart={<DocsIcon className={classes.icon} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
+                label={<span>Docs</span>}
+              />
+            </MUILink>
+          </List>
+        </Grid>
+        <Grid>
+          <List>
+            <Link to={ROUTES.STATUS} className={classes.link}>
+              <SideBarStatus path={ROUTES.STATUS} />
            </Link>
-          ))}
-        </List>
-        <Divider />
-        <List>
-          <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{ textDecoration: 'none' }}>
-            <ListItem button>
-              <ListItemText primary={'Docs'} />
-              <OpenInNewSharp fontSize="small" />
-            </ListItem>
-          </MUILink>
-        </List>
-        <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
-          <ListItem>
-            <div style={{ marginRight: '30px' }}>
-              <div
-                style={{
-                  backgroundColor: props.health ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
-              />
-              <span>API</span>
-            </div>
-            <div>
-              <div
-                style={{
-                  backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
-              />
-              <span>Debug API</span>
-            </div>
-          </ListItem>
-        </div>
-      </Drawer>
-    </div>
+          </List>
+        </Grid>
+      </Grid>
+    </Drawer>
  )
 }
@@ -0,0 +1,64 @@
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
+import type { ReactElement, ReactNode } from 'react'
+import { matchPath, useLocation } from 'react-router-dom'
+
+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
+  pathMatcherSubstring?: string
+}
+
+export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = pathMatcherSubstring
+    ? location.pathname.startsWith(pathMatcherSubstring)
+    : Boolean(path && matchPath(location.pathname, path))
+
+  return (
+    <StyledListItem button selected={isSelected} disableRipple>
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
+      <ListItemText primary={label} />
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
+    </StyledListItem>
+  )
+}
@@ -0,0 +1,77 @@
+import { ReactElement, useContext } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
+
+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(path && matchPath(location.pathname, path))
+
+  return (
+    <ListItem
+      button
+      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
+      selected={isSelected}
+      disableRipple
+    >
+      <ListItemIcon style={{ marginLeft: '30px' }}>
+        <StatusIcon checkState={status.all} isLoading={isLoading} />
+      </ListItemIcon>
+      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
+      <ListItemIcon className={classes.icon}>
+        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
+      </ListItemIcon>
+    </ListItem>
+  )
+}
@@ -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>
-  )
-}
@@ -0,0 +1,45 @@
+import type { ReactElement } from 'react'
+import { CircularProgress } from '@material-ui/core'
+import { CheckState } from '../providers/Bee'
+
+interface Props {
+  checkState: CheckState
+  isLoading?: boolean
+  size?: number | string
+  className?: string
+}
+
+export default function StatusIcon({ checkState, size, className, isLoading }: Props): ReactElement {
+  const s = size || '1rem'
+
+  if (isLoading) return <CircularProgress size={s} className={className} />
+
+  let backgroundColor: string
+  switch (checkState) {
+    case CheckState.OK:
+      backgroundColor = '#1de600'
+      break
+    case CheckState.WARNING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.ERROR:
+      backgroundColor = '#ff3a52'
+      break
+    default:
+      // Default is error
+      backgroundColor = '#ff3a52'
+  }
+
+  return (
+    <span
+      className={className}
+      style={{
+        backgroundColor,
+        height: s,
+        width: s,
+        borderRadius: '50%',
+        display: 'inline-block',
+      }}
+    />
+  )
+}
@@ -0,0 +1,31 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement | ReactElement[]
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '175px',
+      height: '175px',
+      background: `repeating-linear-gradient(
+                        45deg,
+                        #efefef,
+                        #efefef 4px,
+                        #ffffff 4px,
+                        #ffffff 8px
+                    )`,
+    },
+  }),
+)
+
+export function StripedWrapper({ children }: Props): ReactElement {
+  const classes = useStyles()
+
+  return <div className={classes.wrapper}>{children}</div>
+}
@@ -0,0 +1,95 @@
+import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import React, { ReactElement } from 'react'
+import type { RemixiconReactIconProps } from 'remixicon-react'
+
+export interface SwarmButtonProps extends ButtonProps {
+  iconType: React.ComponentType<RemixiconReactIconProps>
+  loading?: boolean
+  cancel?: boolean
+  variant?: 'text' | 'contained' | 'outlined'
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    button: {
+      height: '42px',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      color: '#242424',
+      '&:hover, &:focus': {
+        '& svg': {
+          fill: '#fff',
+          transition: '0.1s',
+        },
+      },
+    },
+    cancelButton: {
+      background: '#f7f7f7',
+      color: '#606060',
+    },
+    spinnerWrapper: {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      width: '40px',
+      height: '40px',
+      transform: 'translate(-50%, -50%)',
+    },
+  }),
+)
+
+export function SwarmButton({
+  children,
+  onClick,
+  iconType,
+  className,
+  disabled,
+  loading,
+  cancel,
+  variant = 'contained',
+  style,
+  ...other
+}: SwarmButtonProps): ReactElement {
+  const classes = useStyles()
+
+  function getIconColor() {
+    if (loading || disabled) {
+      return 'rgba(0, 0, 0, 0.26)'
+    }
+
+    return cancel ? '#606060' : '#dd7700'
+  }
+
+  function getButtonClassName() {
+    return [className, classes.button, cancel && classes.cancelButton].filter(x => x).join(' ')
+  }
+
+  const icon = React.createElement(iconType, {
+    size: '1.25rem',
+    color: getIconColor(),
+  })
+
+  return (
+    <Button
+      style={style}
+      className={getButtonClassName()}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClick) {
+          onClick(event)
+          event.currentTarget.blur()
+        }
+      }}
+      variant={variant}
+      startIcon={icon}
+      disabled={disabled}
+      {...other}
+    >
+      {children}
+      {loading && (
+        <div className={classes.spinnerWrapper}>
+          <CircularProgress />
+        </div>
+      )}
+    </Button>
+  )
+}
@@ -0,0 +1,23 @@
+import { Box, Dialog, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement | ReactElement[]
+}
+
+export function SwarmDialog({ children }: Props): ReactElement {
+  return (
+    <Dialog
+      open={true}
+      PaperProps={{
+        style: { borderRadius: 0, background: '#efefef' },
+      }}
+    >
+      <Box p={4} sx={{ maxWidth: '100%', width: '650px' }}>
+        <Grid container direction="column">
+          {children}
+        </Grid>
+      </Box>
+    </Dialog>
+  )
+}
@@ -0,0 +1,17 @@
+import { Box, Divider } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  my?: number
+  mt?: number
+  mb?: number
+  color?: string
+}
+
+export function SwarmDivider({ my, mt, mb, color = '#cbcbcb' }: Props): ReactElement {
+  return (
+    <Box my={my} mt={mt} mb={mb}>
+      <Divider style={{ borderColor: color }} />
+    </Box>
+  )
+}
@@ -0,0 +1,115 @@
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { Select } from 'formik-material-ui'
+import { ReactElement, ReactNode } from 'react'
+
+export type SelectEvent = React.ChangeEvent<{
+  name?: string | undefined
+  value: unknown
+}>
+
+function renderValue(value: unknown): ReactNode {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  const label = Reflect.get(value as object, 'label')
+
+  if (label) {
+    return label
+  }
+
+  return value as ReactNode
+}
+
+interface Props {
+  label?: string
+  name?: string
+  options: { value: string; label: string }[]
+  onChange?: (event: SelectEvent) => void
+  formik?: boolean
+  defaultValue?: string
+  placeholder?: string
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    select: {
+      borderRadius: 0,
+      background: theme.palette.background.paper,
+      '& fieldset': {
+        border: 0,
+      },
+      '& .MuiSelect-select': {
+        '&:focus': {
+          background: theme.palette.background.paper,
+        },
+      },
+    },
+    option: {
+      height: '52px',
+    },
+  }),
+)
+
+export function SwarmSelect({
+  defaultValue,
+  formik,
+  name,
+  options,
+  onChange,
+  label,
+  placeholder,
+}: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <>
+        {label && <FormHelperText>{label}</FormHelperText>}
+        <Field
+          required
+          component={Select}
+          name={name}
+          fullWidth
+          variant="outlined"
+          defaultValue={defaultValue}
+          className={classes.select}
+          displayEmpty
+          renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
+          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
+        >
+          {options.map((x, i) => (
+            <MenuItem key={i} value={x.value} className={classes.option}>
+              {x.label}
+            </MenuItem>
+          ))}
+        </Field>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {label && <FormHelperText>{label}</FormHelperText>}
+      <MuiSelect
+        required
+        name={name}
+        fullWidth
+        variant="outlined"
+        className={classes.select}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        displayEmpty
+        renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
+        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
+      >
+        {options.map((x, i) => (
+          <MenuItem key={i} value={x.value} className={classes.option}>
+            {x.label}
+          </MenuItem>
+        ))}
+      </MuiSelect>
+    </>
+  )
+}
@@ -0,0 +1,81 @@
+import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { TextField } from 'formik-material-ui'
+import { ChangeEvent, ReactElement } from 'react'
+
+interface Props {
+  name: string
+  label: string
+  password?: boolean
+  formik?: boolean
+  optional?: boolean
+  defaultValue?: string
+  placeholder?: string
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    field: {
+      background: theme.palette.background.paper,
+      '& fieldset': {
+        border: 0,
+      },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
+    },
+  }),
+)
+
+export function SwarmTextInput({
+  name,
+  label,
+  password,
+  optional,
+  formik,
+  onChange,
+  defaultValue,
+  placeholder,
+}: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <Field
+        component={TextField}
+        type={password ? 'password' : undefined}
+        required={!optional}
+        name={name}
+        label={label}
+        fullWidth
+        variant="filled"
+        className={classes.field}
+        defaultValue={defaultValue || ''}
+        InputProps={{ disableUnderline: true }}
+        placeholder={placeholder}
+      />
+    )
+  }
+
+  return (
+    <SimpleTextField
+      type={password ? 'password' : undefined}
+      required
+      label={label}
+      fullWidth
+      variant="filled"
+      className={classes.field}
+      defaultValue={defaultValue || ''}
+      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
+      placeholder={placeholder}
+    />
+  )
+}
@@ -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>
+  )
+}
@@ -0,0 +1,31 @@
+import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { CloseButton } from './CloseButton'
+
+interface Props {
+  children: string
+  onClose: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    text: {
+      color: '#606060',
+      fontWeight: 'bold',
+    },
+  }),
+)
+
+export function TitleWithClose({ children, onClose }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <Grid container justifyContent="space-between" alignItems="center">
+      <span>&nbsp;</span>
+      <Typography className={classes.text} align="center">
+        {children}
+      </Typography>
+      <CloseButton onClose={onClose} />
+    </Grid>
+  )
+}
@@ -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 => (
-  <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
-    <Grid container spacing={3}>
-      <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Connected Peers" statistic={topology?.connected.toString()} loading={isLoading} />
-      </Grid>
-      <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Population" statistic={topology?.population.toString()} loading={isLoading} />
-      </Grid>
-      <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Depth" statistic={topology?.depth.toString()} loading={isLoading} />
-      </Grid>
-    </Grid>
-  </Grid>
-)
+const TopologyStats = (props: Props): ReactElement => {
+  const thresholds: ThresholdValues = {
+    connectedPeers: pickThreshold('connectedPeers', props.topology?.connected || 0),
+    population: pickThreshold('population', props.topology?.population || 0),
+    depth: pickThreshold('depth', props.topology?.depth || 0),
+  }
+
+  const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
+  const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
+  const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
+
+  return (
+    <>
+      <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
@@ -1,47 +1,64 @@
+import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
+import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
+import { ROUTES } from '../routes'
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'

-import { makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-
-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-    marginTop: '20px',
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: 26,
-  },
-})
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: '100%',
+    },
+    content: {
+      maxWidth: 500,
+      marginBottom: theme.spacing(4),
+      '&:last-child': {
+        marginBottom: 0,
+      },
+    },
+    icon: {
+      height: '1rem',
+    },
+  }),
+)

 export default function TroubleshootConnectionCard(): ReactElement {
  const classes = useStyles()

  return (
-    <Card className={classes.root}>
-      <CardContent>
-        <Typography className={classes.title} gutterBottom>
-          Looks like your node is not connected
+    <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
+      <Grid item className={classes.content}>
+        <Typography variant="h1" align="center">
+          Uh oh, it looks like your node is not connected.
        </Typography>
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
-          <strong>
-            <Link to="/">Click to run status checks</Link> on your nodes connection or check out the{' '}
-            <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
-              Swarm Bee Docs
-            </a>
-          </strong>
-        </div>
-
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
-          <p style={{ marginTop: '50px' }}>
-            Still not working? Drop us a message on the Ethereum Swarm{' '}
-            <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
-              Discord
-            </a>
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+      </Grid>
+      <Grid item className={classes.content}>
+        <Typography align="center">
+          Please check your node status to fix the problem. You can also check out the{' '}
+          <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+            Swarm Bee Docs
+          </MuiLink>{' '}
+          or ask for support on the{' '}
+          <MuiLink href={BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+            Ethereum Swarm Discord
+          </MuiLink>
+          .
+        </Typography>
+      </Grid>
+      <Grid item className={classes.content}>
+        <Typography align="center">
+          <Button
+            component={Link}
+            variant="contained"
+            startIcon={<Activity className={classes.icon} />}
+            to={ROUTES.STATUS}
+          >
+            Check node status
+          </Button>
+        </Typography>
+      </Grid>
+    </Grid>
  )
 }
@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Waiting(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress size={240} style={{ color: '#ffffff' }} />
+    </Grid>
+  )
+}
@@ -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 [toastContent, setToastContent] = useState('')
+  const { enqueueSnackbar } = useSnackbar()

-  const handleClickOpen = () => {
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(true)
+    e.stopPropagation()
  }

  const handleClose = () => {
@@ -48,20 +51,15 @@ 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}`)
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).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)
@@ -74,16 +72,15 @@ export default function WithdrawModal({

      if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
    } catch (e) {
-      setAmountError(e)
+      setAmountError(e as Error)
    }
  }

  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>
@@ -100,7 +97,7 @@ export default function WithdrawModal({
          />
          {amountError && (
            <FormHelperText error>
-              Please provide valid BZZ amount (max 16 decimals). Error: {amountError.message}
+              Please provide valid xBZZ amount (max 16 decimals). Error: {amountError.message}
            </FormHelperText>
          )}
        </DialogContent>
--- a/Show More
+++ b/Show More
				`@@ -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>