chore(master): release 0.17.0 (#387 )

fix: map size in safari (#404 )
feat: update logo (#401 )
2022-06-20 12:09:57 +02:00 · 2022-06-20 12:06:14 +02:00 · 2022-06-20 12:06:08 +02:00 · 2022-06-20 11:44:31 +02:00 · 2022-06-20 11:39:22 +02:00 · 2022-06-20 11:16:00 +02:00
179 changed files with 32222 additions and 25225 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,19 @@
+{
+  "ignores": [
+    "@testing-library/react",
+    "@types/*",
+    "@commitlint/config-conventional",
+    "@babel/*",
+    "babel*",
+    "eslint*",
+    "file-loader",
+    "ts-node",
+    "webpack-cli",
+    "assert",
+    "buffer",
+    "crypto*",
+    "stream*",
+    "env-paths",
+    "open"
+  ]
+}
@@ -8,7 +8,9 @@
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "react-app",
+    "react-app/jest"
  ],
  "env": {
    "browser": true,
@@ -21,7 +23,6 @@
    "sourceType": "module",
    "ecmaVersion": 2018
  },
-  "plugins": ["jest"],
  "rules": {
    "array-bracket-newline": ["error", "consistent"],
    "strict": ["error", "safe"],
@@ -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,14 @@ 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/
+      REACT_APP_DEV_MODE: 1
+      REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
+      REACT_APP_SENTRY_ENVIRONMENT: 'preview'

    steps:
      - uses: actions/checkout@v2
@@ -47,5 +54,40 @@ jobs:
        env:
          CI: true

+      - name: Dependency check
+        run: npm run depcheck
+
+      - name: Types check
+        run: npm run check:types
+
+      - name: Types build
+        run: npm run compile: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,9 +12,19 @@ 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 run compile:types
+      - run: npm run build:component
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+      - name: Create Sentry release
+        uses: getsentry/action-release@v1
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+        with:
+          sourcemaps: ./build/static/js
@@ -0,0 +1,28 @@
+# 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
+        env:
+          REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
+          REACT_APP_SENTRY_ENVIRONMENT: 'pages'
+      - 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,138 @@
 # Changelog

+## [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!
@@ -3,8 +3,9 @@
 [![](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, upload and download files or
 > manage your postage stamps.
@@ -12,9 +13,10 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**

-This project is intended to be used with the latest released version of Bee. Using it with older Bee versions is not
-recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by
-keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.6.0-6ceadd35<!-- 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).

 ![Status page](/ui_samples/info.png)

@@ -58,6 +60,15 @@ 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:
@@ -83,6 +94,18 @@ npm start

 The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)

+> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
+
+#### Bee Desktop development
+
+If you want to develop Bee Dashboard in the Bee Desktop mode, then spin up `bee-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
+
+```sh
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
+npm start
+npm run desktop # This will inject the API key to the Dashboard 
+```
+
 ## Contribute

 There are some ways you can make this module better:
@@ -102,3 +125,6 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 ## 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('bee-desktop')
+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.8.0",
+  "version": "0.17.0",
  "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,72 +26,121 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "2.1.0",
+    "@ethersphere/bee-js": "^4.1.1",
+    "@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",
-    "@types/react-router": "5.1.13",
-    "@types/react-router-dom": "5.1.7",
-    "axios": "0.21.1",
+    "@sentry/react": "^7.1.1",
+    "@sentry/tracing": "^7.1.1",
+    "assert": "^2.0.0",
+    "axios": "0.24.0",
    "bignumber.js": "9.0.1",
-    "feather-icons": "4.28.0",
-    "formik": "2.2.8",
+    "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.9",
+    "notistack": "1.0.10",
    "opener": "1.5.2",
    "qrcode.react": "1.0.1",
-    "react": "17.0.2",
-    "react-copy-to-clipboard": "5.0.3",
-    "react-dom": "17.0.2",
+    "react": ">= 17.0.2",
+    "react-copy-to-clipboard": "5.0.4",
+    "react-dom": ">= 17.0.2",
    "react-feather": "2.0.9",
    "react-identicons": "1.2.5",
-    "react-router-dom": "5.2.0",
-    "react-syntax-highlighter": "15.4.3",
-    "semver": "7.3.2",
-    "serve-handler": "6.1.3"
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
+    "react-syntax-highlighter": "15.4.4",
+    "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",
-    "@types/semver": "7.3.6",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-jest": "24.4.0",
-    "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.24.0",
-    "prettier": "2.3.2",
-    "react-scripts": "4.0.3",
-    "typescript": "4.2.4",
-    "web-vitals": "1.1.1"
+    "@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",
+    "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",
+    "react-scripts": "^5.0.1",
+    "ts-node": "^10.8.1",
+    "typescript": "4.7.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",
    "start": "react-scripts start",
+    "desktop": "node ./desktop.mjs",
    "build": "react-scripts build",
+    "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
+    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
    "test": "react-scripts test",
    "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%",
@@ -104,7 +155,7 @@
  },
  "engines": {
    "node": ">=12.0.0",
-    "npm": ">=6.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
@@ -1,34 +1,35 @@
 #!/usr/bin/env node

 const path = require('path')
-const handler = require('serve-handler');
-const http = require('http');
+const handler = require('serve-handler')
+const http = require('http')
 const opener = require('opener')

+const port = process.env.PORT || 8080
+
 const serverConfig = {
  public: path.join(__dirname, 'build'),
  trailingSlash: false,
-  rewrites: [
-    { source: "**", destination: "/index.html" },
-  ],
+  rewrites: [{ source: '**', destination: '/index.html' }],
  headers: [
-      {
-        source: "*",
-        headers: [{
-          key: "Cache-Control",
-          value: "max-age=3600"
-        }]
-      }
-  ]
+    {
+      source: '*',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'max-age=3600',
+        },
+      ],
+    },
+  ],
 }

 const server = http.createServer((request, response) => {
-
-  return handler(request, response, serverConfig);
+  return handler(request, response, serverConfig)
 })

-server.listen(8080, () => {
-  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}`)
 })
@@ -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,42 +1,80 @@
-import { ReactElement } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
-import './App.css'
-
-import { ThemeProvider } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
-
-import BaseRouter from './routes'
+import React, { ReactElement } from 'react'
+import { HashRouter as Router } from 'react-router-dom'
+import * as Sentry from '@sentry/react'
+import './App.css'
 import Dashboard from './layout/Dashboard'
-import { theme } from './theme'
-import { Provider as StampsProvider } from './providers/Stamps'
-import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as BeeProvider } from './providers/Bee'
+import { Provider as 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 BaseRouter from './routes'
+import { theme } from './theme'
+import { config } from './config'
+import ItsBroken from './layout/ItsBroken'
+import { initSentry } from './utils/sentry'

-const App = (): ReactElement => (
-  <div className="App">
-    <ThemeProvider theme={theme}>
-      <SettingsProvider>
-        <BeeProvider>
-          <StampsProvider>
-            <PlatformProvider>
-              <SnackbarProvider>
-                <Router>
-                  <>
-                    <CssBaseline />
-                    <Dashboard>
-                      <BaseRouter />
-                    </Dashboard>
-                  </>
-                </Router>
-              </SnackbarProvider>
-            </PlatformProvider>
-          </StampsProvider>
-        </BeeProvider>
-      </SettingsProvider>
-    </ThemeProvider>
-  </div>
-)
+interface Props {
+  beeApiUrl?: string
+  beeDebugApiUrl?: string
+  lockedApiSettings?: boolean
+}
+
+if (config.SENTRY_KEY) {
+  // eslint-disable-next-line no-console
+  initSentry().catch(e => console.error(e))
+}
+
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
+  const mainApp = (
+    <div className="App">
+      <ThemeProvider theme={theme}>
+        <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
+          <TopUpProvider>
+            <BeeProvider>
+              <StampsProvider>
+                <FileProvider>
+                  <FeedsProvider>
+                    <PlatformProvider>
+                      <SnackbarProvider>
+                        <Router>
+                          <>
+                            <CssBaseline />
+                            <Dashboard>
+                              <BaseRouter />
+                            </Dashboard>
+                          </>
+                        </Router>
+                      </SnackbarProvider>
+                    </PlatformProvider>
+                  </FeedsProvider>
+                </FileProvider>
+              </StampsProvider>
+            </BeeProvider>
+          </TopUpProvider>
+        </SettingsProvider>
+      </ThemeProvider>
+    </div>
+  )
+
+  // Displays Report Dialog when some component crashes
+  if (config.SENTRY_KEY) {
+    return (
+      <Sentry.ErrorBoundary
+        showDialog
+        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
+      >
+        {mainApp}
+      </Sentry.ErrorBoundary>
+    )
+  }
+
+  return mainApp
+}

 export default App
@@ -3,10 +3,10 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Alert, AlertTitle } from '@material-ui/lab'
 import { ReactElement } from 'react'

-const LIMIT = 100_000_000 // 100 megabytes
+const LIMIT = 100000000 // 100 megabytes

 interface Props {
-  file: File
+  files: File[]
 }

 const useStyles = makeStyles((theme: Theme) =>
@@ -22,14 +22,16 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function UploadSizeAlert(props: Props): ReactElement | null {
  const classes = useStyles()

-  const aboveLimit = props.file.size >= LIMIT
+  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 file you are trying to upload is above the recommended size. The chunks may not be synchronised properly
+          The files you are trying to upload are above the recommended size. The chunks may not be synchronised properly
          over the network.
        </Alert>
      </div>
@@ -1,54 +0,0 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
-import Collapse from '@material-ui/core/Collapse'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
-import { Context } from '../providers/Bee'
-import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-  }),
-)
-
-export default function VersionAlert(): ReactElement | null {
-  const classes = useStyles()
-  const { isLoading, latestUserVersionExact } = useContext(Context)
-  const [open, setOpen] = useState<boolean>(true)
-
-  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === latestUserVersionExact
-
-  if (isLoading || !latestUserVersionExact) return null
-
-  return (
-    <Collapse in={!isExactlySupportedBeeVersion && open}>
-      <div className={classes.root}>
-        <Alert
-          severity="warning"
-          action={
-            <IconButton
-              aria-label="close"
-              color="inherit"
-              size="small"
-              onClick={() => {
-                setOpen(false)
-              }}
-            >
-              <CloseIcon fontSize="inherit" />
-            </IconButton>
-          }
-        >
-          <AlertTitle>Warning</AlertTitle>
-          Your Bee node version (<code>{latestUserVersionExact}</code>) does not exactly match the Bee version we tested
-          the Bee Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality
-          may not work properly.
-        </Alert>
-      </div>
-    </Collapse>
-  )
-}
@@ -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,77 @@
+import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { AlertCircle, Check } from 'react-feather'
+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" stroke="#09ca6c" />
+          ) : (
+            <AlertCircle size="13" fill="#f44336" stroke="white" />
+          )}
+        </div>
+        <Typography variant="h2" style={{ marginBottom: '8px' }}>
+          {title}
+        </Typography>
+        <Typography variant="caption">{subtitle}</Typography>
+      </div>
+      <SwarmButton className={[classes.button, className].join(' ')} {...rest} />
+    </div>
+  )
+}
@@ -6,7 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState, useContext } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
@@ -61,7 +61,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
  return (
    <div>
      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cash out peer {peerId.substr(0, 8)}[…]
+        Cash out peer {peerId.slice(0, 8)}[…]
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
@@ -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>
+  )
+}
@@ -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>
+}
@@ -1,4 +1,5 @@
 import { Component, ErrorInfo, ReactElement } from 'react'
+import ItsBroken from '../layout/ItsBroken'

 interface Props {
  children: ReactElement
@@ -26,8 +27,7 @@ export default class ErrorBoundary extends Component<Props, State> {

  render(): ReactElement {
    if (this.state.error) {
-      // You can render any custom fallback UI
-      return <h1>Something went wrong. Error: {this.state.error.message}</h1>
+      return <ItsBroken message={this.state.error.message} />
    }

    return this.props.children
@@ -1,9 +1,9 @@
 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 { config } from '../config'
+import ClipboardCopy from './ClipboardCopy'
+import QRCodeModal from './QRCodeModal'

 interface Props {
  address: string | undefined
@@ -36,9 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement {
                    }
                  : { marginRight: '7px' }
              }
-              href={`${process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${
-                props.address
-              }`}
+              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
              target="_blank"
              rel="noreferrer"
            >
@@ -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>
+  )
+}
@@ -1,11 +1,15 @@
-import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 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: {
-      marginTop: theme.spacing(0.75),
      marginBottom: theme.spacing(1),
      marginRight: theme.spacing(1),
    },
@@ -21,13 +25,16 @@ export default function ExpandableListItemActions({ children }: Props): ReactEle

  if (Array.isArray(children)) {
    return (
-      <Grid container direction="row">
-        {children.map((a, i) => (
-          <Grid key={i} className={classes.action}>
-            {a}
-          </Grid>
-        ))}
-      </Grid>
+      <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>
    )
  }

@@ -1,11 +1,11 @@
-import { ReactElement, ChangeEvent, useState } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
-import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
-import { Edit, Minus, RotateCcw, Check } from 'react-feather'
-
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ChangeEvent, ReactElement, useState } from 'react'
+import { Edit, Minus, Search, X } from 'react-feather'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
+import { SwarmButton } from './SwarmButton'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -53,8 +53,11 @@ interface Props {
  expandedOnly?: boolean
  confirmLabel?: string
  confirmLabelDisabled?: boolean
+  loading?: boolean
  onChange?: (value: string) => void
-  onConfirm: (value: string) => void
+  onConfirm?: (value: string) => void
+  mapperFn?: (value: string) => string
+  locked?: boolean
 }

 export default function ExpandableListItemKey({
@@ -67,12 +70,19 @@ export default function ExpandableListItemKey({
  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)
@@ -91,7 +101,7 @@ export default function ExpandableListItemKey({
            <Typography variant="body2">
              <div>
                {!open && value}
-                {!expandedOnly && (
+                {!expandedOnly && !locked && (
                  <IconButton size="small" className={classes.copyValue}>
                    {open ? (
                      <Minus onClick={toggleOpen} strokeWidth={1} />
@@ -111,6 +121,7 @@ export default function ExpandableListItemKey({
              fullWidth
              className={classes.content}
              autoFocus
+              hidden={locked}
            />
          </Collapse>
        </Grid>
@@ -118,26 +129,29 @@ export default function ExpandableListItemKey({
      <Collapse in={open} timeout="auto" unmountOnExit>
        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
        <ExpandableListItemActions>
-          <Button
-            variant="contained"
+          <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
            }
-            startIcon={<Check size="1rem" />}
-            onClick={() => onConfirm(inputValue)}
+            loading={loading}
+            iconType={Search}
+            onClick={() => {
+              if (onConfirm) onConfirm(inputValue)
+            }}
          >
            {confirmLabel || 'Save'}
-          </Button>
-          <Button
-            variant="contained"
-            disabled={inputValue === value || inputValue === ''}
-            startIcon={<RotateCcw size="1rem" />}
+          </SwarmButton>
+          <SwarmButton
+            disabled={loading || inputValue === value || inputValue === ''}
+            iconType={X}
            onClick={() => setInputValue(value || '')}
+            cancel
          >
            Cancel
-          </Button>
+          </SwarmButton>
        </ExpandableListItemActions>
      </Collapse>
    </>
@@ -1,9 +1,9 @@
-import { ReactElement, useState } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
-import { ListItem, Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Eye, Minus } from 'react-feather'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { Eye, Minus } from 'react-feather'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface Props {
  label: string
  value: string
+  expanded?: boolean
 }

 const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
@@ -54,9 +55,9 @@ const split = (s: string): string[] => {
  return s.match(/(0x|.{1,8})/gi) || []
 }

-export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
  const classes = useStyles()
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(expanded || false)
  const [copied, setCopied] = useState(false)
  const toggleOpen = () => setOpen(!open)

@@ -65,6 +66,9 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle

  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 : ''}`}>
@@ -77,9 +81,7 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
                <span className={classes.copyValue}>
                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
                    <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{`${
-                        hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]
-                      }[…]${splitValues[splitValues.length - 1]}`}</span>
+                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
                    </CopyToClipboard>
                  </Tooltip>
                </span>
@@ -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,95 @@
+import { ReactElement, useEffect, useState } from 'react'
+import * as Sentry from '@sentry/react'
+import { Link } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { MessageSquare } from 'react-feather'
+
+import config from '../config'
+import SideBarItem from './SideBarItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#9f9f9f',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+
+    icon: {
+      height: theme.spacing(4),
+    },
+  }),
+)
+
+/**
+ * Parses Sentry DNS so it could be transformed into API call
+ * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
+ */
+const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
+
+async function isSentryReachable(): Promise<boolean> {
+  const key = config.SENTRY_KEY
+
+  if (!key) {
+    return false
+  }
+
+  const match = SENTRY_PARSING_REGEX.exec(key)
+
+  if (!match) {
+    return false
+  }
+
+  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
+
+  try {
+    await fetch(url, { method: 'POST' })
+
+    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
+    return true
+  } catch (e) {
+    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
+    return false
+  }
+}
+
+function showFeedbackForm(): void {
+  const eventId = Sentry.captureMessage('User feedback')
+  Sentry.showReportDialog({
+    eventId,
+    title: 'Provide us feedback!',
+    subtitle: 'Share with us what you like and/or dislike.',
+    subtitle2: 'We will be very happy.',
+    labelComments: 'What is your impression about this app?',
+    labelSubmit: 'Send Feedback',
+  })
+}
+
+export default function Feedback(): ReactElement {
+  const [sentryEnabled, setSentryEnabled] = useState(false)
+  const classes = useStyles()
+
+  // Run this only on component mount to verify once that Sentry is reachable
+  useEffect(() => {
+    isSentryReachable().then(result => {
+      setSentryEnabled(result)
+    })
+  }, [])
+
+  if (sentryEnabled) {
+    return (
+      <Link onClick={showFeedbackForm} className={classes.link}>
+        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
+      </Link>
+    )
+  }
+
+  return <></>
+}
@@ -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,86 @@
+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
+}
+
+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) })
+addPins(mapPrecomputed, deduplicatedRecords, '#303030')
+
+const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
+
+export default function Card({ style }: Props): ReactElement {
+  const { peers } = useContext(Context)
+  const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
+
+  useEffect(() => {
+    if (!peers) return
+
+    const points = findIntersection(fullMapDb, peers)
+    const mapNew = Object.create(mapPrecomputed)
+    addPins(mapNew, points, '#09CA6C')
+    setMap(mapNew.getSVG(mapSvgOptions))
+  }, [peers])
+
+  return (
+    <div
+      style={Object.assign({}, style, {
+        width: '100%',
+        height: '380px',
+        backgroundColor: '#f3f3f3',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <img
+        alt="world map"
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
+      />
+    </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,15 +1,19 @@
-import type { ReactElement } from 'react'
-import { Link } from 'react-router-dom'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
+import { BeeModes } from '@ethersphere/bee-js'
+import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
-import { Home, FileText, DollarSign, Settings, Layers, BookOpen } from 'react-feather'
+import { ReactElement, useContext } from 'react'
+import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
+import { Link } from 'react-router-dom'
+import DashboardLogo from '../assets/dashboard-logo.svg'
+import DesktopLogo from '../assets/desktop-logo.svg'
+import { config } from '../config'
+import { useIsBeeDesktop } from '../hooks/apiHooks'
+import { Context } from '../providers/Bee'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-
-import Logo from '../assets/logo.svg'
+import Feedback from './Feedback'

 const navBarItems = [
  {
@@ -19,18 +23,21 @@ const navBarItems = [
  },
  {
    label: 'Files',
-    path: ROUTES.FILES,
+    path: ROUTES.UPLOAD,
    icon: FileText,
+    pathMatcherSubstring: '/files/',
  },
  {
-    label: 'Stamps',
-    path: ROUTES.STAMPS,
-    icon: Layers,
+    label: 'Account',
+    path: ROUTES.ACCOUNT_WALLET,
+    icon: Briefcase,
+    pathMatcherSubstring: '/account/',
  },
  {
-    label: 'Accounting',
-    path: ROUTES.ACCOUNTING,
+    label: 'Top Up',
+    path: ROUTES.WALLET,
    icon: DollarSign,
+    requiresMode: BeeModes.ULTRA_LIGHT,
  },
  {
    label: 'Settings',
@@ -56,6 +63,7 @@ const useStyles = makeStyles((theme: Theme) =>
    drawerPaper: {
      width: drawerWidth,
      backgroundColor: '#212121',
+      zIndex: 988,
    },
    logo: {
      marginLeft: theme.spacing(8),
@@ -89,31 +97,36 @@ const useStyles = makeStyles((theme: Theme) =>

 export default function SideBar(): ReactElement {
  const classes = useStyles()
+  const { nodeInfo } = useContext(Context)
+  const { isBeeDesktop } = useIsBeeDesktop()

  return (
    <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={Logo} />
+            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
        </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}
-                  label={p.label}
-                />
-              </Link>
-            ))}
+            {navBarItems
+              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
+              .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}
+                  />
+                </Link>
+              ))}
          </List>
          <Divider className={classes.divider} />
          <List>
-            <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" className={classes.link}>
+            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
              <SideBarItem
                iconStart={<BookOpen className={classes.icon} />}
                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
@@ -123,9 +136,12 @@ export default function SideBar(): ReactElement {
          </List>
        </Grid>
        <Grid>
-          <Link to={ROUTES.STATUS} className={classes.link}>
-            <SideBarStatus path={ROUTES.STATUS} />
-          </Link>
+          <List>
+            <Link to={ROUTES.STATUS} className={classes.link}>
+              <SideBarStatus path={ROUTES.STATUS} />
+            </Link>
+            <Feedback />
+          </List>
        </Grid>
      </Grid>
    </Drawer>
@@ -1,8 +1,7 @@
+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 { useLocation, matchPath } from 'react-router-dom'
-
-import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
+import { matchPath, useLocation } from 'react-router-dom'

 const StyledListItem = withStyles((theme: Theme) => ({
  root: {
@@ -45,12 +44,15 @@ interface Props {
  iconEnd?: ReactNode
  path?: string
  label: ReactNode
+  pathMatcherSubstring?: string
 }

-export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
  const classes = useStyles()
  const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = pathMatcherSubstring
+    ? location.pathname.startsWith(pathMatcherSubstring)
+    : Boolean(path && matchPath(location.pathname, path))

  return (
    <StyledListItem button selected={isSelected} disableRipple>
@@ -56,7 +56,7 @@ export default function SideBarItem({ path }: Props): ReactElement {
  const { status, isLoading } = useContext(Context)
  const classes = useStyles()
  const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <ListItem
@@ -66,11 +66,9 @@ export default function SideBarItem({ path }: Props): ReactElement {
      disableRipple
    >
      <ListItemIcon style={{ marginLeft: '30px' }}>
-        <StatusIcon isOk={status.all} isLoading={isLoading} />
+        <StatusIcon checkState={status.all} isLoading={isLoading} />
      </ListItemIcon>
-      <ListItemText
-        primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
-      />
+      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
      <ListItemIcon className={classes.icon}>
        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
      </ListItemIcon>
@@ -1,23 +1,40 @@
 import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import { CheckState } from '../providers/Bee'

 interface Props {
-  isOk: boolean
+  checkState: CheckState
  isLoading?: boolean
  size?: number | string
  className?: string
 }

-export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+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: isOk ? '#1de600' : '#ff3a52',
+        backgroundColor,
        height: s,
        width: s,
        borderRadius: '50%',
@@ -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 { IconProps } from 'react-feather'
+
+export interface SwarmButtonProps extends ButtonProps {
+  iconType: React.ComponentType<IconProps>
+  loading?: boolean
+  cancel?: boolean
+  variant?: 'text' | 'contained' | 'outlined'
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    button: {
+      height: '42px',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      color: '#242424',
+      '&:hover, &:focus': {
+        '& svg': {
+          stroke: '#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,77 @@
+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
+  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,
+}: 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 }}
+      />
+    )
+  }
+
+  return (
+    <SimpleTextField
+      type={password ? 'password' : undefined}
+      required
+      label={label}
+      fullWidth
+      variant="filled"
+      className={classes.field}
+      defaultValue={defaultValue || ''}
+      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
+    />
+  )
+}
@@ -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,10 +1,10 @@
-import type { ReactElement } from 'react'
-import { Link } from 'react-router-dom'
-
+import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
-import { ROUTES } from '../routes'
+import type { ReactElement } from 'react'
 import { Activity } from 'react-feather'
+import { Link } from 'react-router-dom'
+import { config } from '../config'
+import { ROUTES } from '../routes'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
      <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={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
            Swarm Bee Docs
          </MuiLink>{' '}
          or ask for support on the{' '}
-          <MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
            Ethereum Swarm Discord
          </MuiLink>
          .
@@ -55,7 +55,7 @@ export default function WithdrawDepositModal({
      setOpen(false)
      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
    } catch (e) {
-      enqueueSnackbar(`${errorMessage} Error: ${e.message}`, { variant: 'error' })
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
    }
  }

@@ -71,7 +71,7 @@ export default function WithdrawDepositModal({

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

@@ -0,0 +1,29 @@
+class Config {
+  public readonly BEE_API_HOST: string
+  public readonly BEE_DEBUG_API_HOST: string
+  public readonly BLOCKCHAIN_EXPLORER_URL: string
+  public readonly BEE_DOCS_HOST: string
+  public readonly BEE_DISCORD_HOST: string
+  public readonly GITHUB_REPO_URL: string
+  public readonly BEE_DESKTOP_URL: string
+  public readonly SENTRY_KEY: string | undefined
+  public readonly SENTRY_ENVIRONMENT: string | undefined
+
+  constructor() {
+    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
+    this.SENTRY_KEY = process.env.REACT_APP_SENTRY_KEY
+    this.SENTRY_ENVIRONMENT = process.env.REACT_APP_SENTRY_ENVIRONMENT
+    this.BEE_DEBUG_API_HOST =
+      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
+    this.BLOCKCHAIN_EXPLORER_URL =
+      process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet'
+    this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/'
+    this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
+    this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
+    this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin
+  }
+}
+
+export const config = new Config()
+
+export default config
@@ -0,0 +1,4 @@
+export const META_FILE_NAME = '.swarmgatewaymeta.json'
+export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
+export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
+export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'
@@ -1,16 +1,15 @@
+import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import { Upload } from 'react-feather'
-import { Context as SettingsContext } from '../providers/Settings'
-
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
-import { BigNumber } from 'bignumber.js'
+import { Context as SettingsContext } from '../providers/Settings'

 export default function WithdrawModal(): ReactElement {
  const { beeDebugApi } = useContext(SettingsContext)

  return (
    <WithdrawDepositModal
-      successMessage="Successful withdrawl."
+      successMessage="Successful withdrawal."
      errorMessage="Error with withdrawing."
      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
      label="Withdraw"
@@ -100,7 +100,7 @@ export const useAccounting = (
      setUncashedAmounts(results.fulfilled)
      setIsloadingUncashed(false)
    })
-  }, [settlements, isLoadingUncashed, uncashedAmounts])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])

  const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)

@@ -0,0 +1,73 @@
+import { renderHook } from '@testing-library/react-hooks'
+import express from 'express'
+import cors from 'cors'
+import type { Server } from 'http'
+import { useIsBeeDesktop } from './apiHooks'
+
+interface AddressInfo {
+  address: string
+  family: string
+  port: number
+}
+
+export function mockServer(data: Record<string | number | symbol, string>): Promise<Server> {
+  const app = express()
+  app.use(cors())
+
+  app.get('/info', (req, res) => {
+    res.send(data)
+  })
+
+  return new Promise(resolve => {
+    const server = app.listen(() => {
+      resolve(server)
+    })
+  })
+}
+
+let serverCorrect: Server
+let serverWrong: Server
+
+let serverCorrectURL: string
+let serverWrongURL: string
+
+beforeAll(async () => {
+  serverCorrect = await mockServer({ name: 'bee-desktop' })
+  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
+  serverCorrectURL = `http://localhost:${portServerCorrect}`
+
+  serverWrong = await mockServer({ foo: 'bar' })
+  const portServerWrong = (serverWrong.address() as AddressInfo).port
+  serverWrongURL = `http://localhost:${portServerWrong}`
+})
+
+afterAll(async () => {
+  await new Promise(resolve => serverCorrect.close(resolve))
+  await new Promise(resolve => serverWrong.close(resolve))
+})
+
+describe('useIsBeeDesktop', () => {
+  it('should fail when connected to wrong server', async () => {
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverWrongURL }))
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isBeeDesktop).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.isBeeDesktop).toBe(false)
+  })
+
+  it('should return isBeeDesktop true when connected to bee-desktop', async () => {
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL }))
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isBeeDesktop).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.isBeeDesktop).toBe(true)
+  })
+})
@@ -1,5 +1,7 @@
-import { useState, useEffect } from 'react'
 import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { config } from '../config'
+import { getJson } from '../utils/net'

 export interface LatestBeeReleaseHook {
  latestBeeRelease: LatestBeeRelease | null
@@ -7,6 +9,90 @@ export interface LatestBeeReleaseHook {
  error: Error | null
 }

+export interface IsBeeDesktopHook {
+  isBeeDesktop: boolean
+  isLoading: boolean
+}
+
+interface Config {
+  BEE_DESKTOP_URL: string
+}
+
+/**
+ * Detect if the dashboard is run within bee-desktop
+ *
+ * @returns isBeeDesktop true if this is run within bee-desktop
+ */
+export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
+  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+  const [isLoading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    axios
+      .get(`${conf.BEE_DESKTOP_URL}/info`)
+      .then(res => {
+        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        else setIsBeeDesktop(false)
+      })
+      .catch(() => {
+        setIsBeeDesktop(false)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { isBeeDesktop, isLoading }
+}
+
+export interface BeeConfig {
+  'api-addr': string
+  'debug-api-addr': string
+  'debug-api-enable': boolean
+  password: string
+  'swap-enable': boolean
+  'swap-initial-deposit': bigint
+  mainnet: boolean
+  'full-node': boolean
+  'chain-enable': boolean
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  transaction: string
+  'block-hash': string
+  'swap-endpoint'?: string
+}
+
+export interface GetBeeConfig {
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+  const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
+  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    getJson<BeeConfig>(`${conf.BEE_DESKTOP_URL}/config`)
+      .then(beeConf => {
+        setBeeConfig(beeConf)
+        setError(null)
+      })
+      .catch((err: Error) => {
+        setError(err)
+        setBeeConfig(null)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { config: beeConfig, isLoading, error }
+}
+
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
  const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
  const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)
@@ -14,7 +100,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {

  useEffect(() => {
    axios
-      .get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
+      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
      .then(res => {
        setLatestBeeRelease(res.data)
      })
@@ -2,9 +2,8 @@ body {
  height: 100vh;
  min-height: 100vh;
  margin: 0;
-  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    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;
 }
@@ -16,6 +15,12 @@ body {
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.sentry-error-embed * {
+  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
@@ -1,13 +1,12 @@
-import { useContext, ReactElement } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import React, { ReactElement, useContext } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
-import AlertVersion from '../components/AlertVersion'
-import { Container, CircularProgress } from '@material-ui/core'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-
 import SideBar from '../components/SideBar'
-
 import { Context } from '../providers/Bee'
+import config from '../config'
+import * as Sentry from '@sentry/react'
+import ItsBroken from './ItsBroken'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -26,24 +25,37 @@ const Dashboard = (props: Props): ReactElement => {
  const classes = useStyles()

  const { isLoading } = useContext(Context)
+  const content = (
+    <>
+      {isLoading ? (
+        <div style={{ textAlign: 'center', width: '100%' }}>
+          <CircularProgress />
+        </div>
+      ) : (
+        props.children
+      )}
+    </>
+  )
+
+  let errorBoundaryWithContent
+
+  if (config.SENTRY_KEY) {
+    errorBoundaryWithContent = (
+      <Sentry.ErrorBoundary
+        showDialog
+        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
+      >
+        {content}
+      </Sentry.ErrorBoundary>
+    )
+  } else {
+    errorBoundaryWithContent = <ErrorBoundary>{content}</ErrorBoundary>
+  }

  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
-      <Container className={classes.content}>
-        <ErrorBoundary>
-          <>
-            <AlertVersion />
-            {isLoading ? (
-              <div style={{ textAlign: 'center', width: '100%' }}>
-                <CircularProgress />
-              </div>
-            ) : (
-              props.children
-            )}
-          </>
-        </ErrorBoundary>
-      </Container>
+      <Container className={classes.content}>{errorBoundaryWithContent}</Container>
    </div>
  )
 }
@@ -0,0 +1,36 @@
+import { Container } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    content: {
+      backgroundColor: theme.palette.background.default,
+      minHeight: '100vh',
+      textAlign: 'center',
+    },
+    errorMsg: {
+      marginTop: '30px',
+    },
+  }),
+)
+
+interface Props {
+  message: string
+}
+
+// TODO: Provide some nicer design
+const ItsBroken = ({ message }: Props): ReactElement => {
+  const classes = useStyles()
+
+  return (
+    <div>
+      <Container className={classes.content}>
+        <h1>Ups, there was a problem 😅</h1>
+        <h3 className={classes.errorMsg}>Error: {message}</h3>
+      </Container>
+    </div>
+  )
+}
+
+export default ItsBroken
@@ -0,0 +1,8 @@
+import { BigNumber } from 'bignumber.js'
+import { Token } from './Token'
+
+export class BzzToken extends Token {
+  constructor(amount: BigNumber | string | bigint) {
+    super(amount, 16)
+  }
+}
@@ -0,0 +1,8 @@
+import { BigNumber } from 'bignumber.js'
+import { Token } from './Token'
+
+export class DaiToken extends Token {
+  constructor(amount: BigNumber | string | bigint) {
+    super(amount, 18)
+  }
+}
@@ -10,10 +10,12 @@ export class Token {
  private amount: BigNumber // Represented in the base units, so it is always an integer value
  private readonly decimals: digits

-  constructor(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS) {
+  constructor(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS) {
    const a = makeBigNumber(amount)

-    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) throw new TypeError('Not a valid token values')
+    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
+      throw new TypeError(`Not a valid token values: ${amount} ${decimals}`)
+    }

    this.amount = a
    this.decimals = decimals
@@ -29,7 +31,7 @@ export class Token {
   *
   * @returns new Token
   */
-  static fromDecimal(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS): Token | never {
+  static fromDecimal(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS): Token | never {
    const a = makeBigNumber(amount)

    // No need to do any validation here, it is done when the new token is created
@@ -38,7 +40,7 @@ export class Token {
    return new Token(t, decimals)
  }

-  get toBigInt(): BigInt {
+  get toBigInt(): bigint {
    return BigInt(this.amount.toFixed(0))
  }

@@ -57,4 +59,32 @@ export class Token {
  toFixedDecimal(digits = 7): string {
    return this.toDecimal.toFixed(digits)
  }
+
+  toSignificantDigits(digits = 4): string {
+    const asString = this.toDecimal.toFixed(this.decimals)
+
+    let indexOfSignificantDigit = -1
+    let reachedDecimalPoint = false
+
+    for (let i = 0; i < asString.length; i++) {
+      const char = asString[i]
+
+      if (char === '.') {
+        reachedDecimalPoint = true
+        indexOfSignificantDigit = i + 1
+      } else if (reachedDecimalPoint && char !== '0') {
+        indexOfSignificantDigit = i
+        break
+      }
+    }
+
+    return asString.slice(0, indexOfSignificantDigit + digits)
+  }
+
+  minusBaseUnits(amount: string): Token {
+    return new Token(
+      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+      this.decimals,
+    )
+  }
 }
@@ -0,0 +1,55 @@
+import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ACCOUNT_TABS } from '../../routes'
+
+const tabMap = {
+  WALLET: 0,
+  CHEQUEBOOK: 1,
+  STAMPS: 2,
+  FEEDS: 3,
+}
+
+interface Props {
+  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      marginBottom: theme.spacing(4),
+      textTransform: 'none',
+    },
+    leftTab: {
+      marginRight: theme.spacing(0.125),
+    },
+    centerTab: {
+      marginLeft: theme.spacing(0.125),
+      marginRight: theme.spacing(0.125),
+    },
+    rightTab: {
+      marginLeft: theme.spacing(0.125),
+    },
+  }),
+)
+
+export function AccountNavigation({ active }: Props): ReactElement {
+  const classes = useStyles()
+  const navigate = useNavigate()
+
+  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
+    navigate(ACCOUNT_TABS[newValue])
+  }
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
+        <Tab className={classes.leftTab} key="WALLET" label="Wallet" />
+        <Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
+        <Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
+        <Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
+      </Tabs>
+    </div>
+  )
+}
@@ -0,0 +1,10 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Header(): ReactElement {
+  return (
+    <Box mb={4}>
+      <Typography variant="h1">Account</Typography>
+    </Box>
+  )
+}
@@ -0,0 +1,60 @@
+import { ReactElement, useContext } from 'react'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import DepositModal from '../../../containers/DepositModal'
+import WithdrawModal from '../../../containers/WithdrawModal'
+import { useAccounting } from '../../../hooks/accounting'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
+import PeerBalances from '../../accounting/PeerBalances'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountChequebook(): ReactElement {
+  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
+    useContext(BeeContext)
+  const { beeDebugApi } = useContext(SettingsContext)
+
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="CHEQUEBOOK" />
+      <div>
+        <ExpandableList label="Chequebook" defaultOpen>
+          <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Available Uncommitted Balance"
+            value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem
+            label="Total Cheques Amount Sent"
+            value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem
+            label="Total Cheques Amount Received"
+            value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItemActions>
+            <WithdrawModal />
+            <DepositModal />
+          </ExpandableListItemActions>
+        </ExpandableList>
+        <ExpandableList label="Blockchain" defaultOpen>
+          <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+          <ExpandableListItemKey
+            label="Chequebook contract address"
+            value={chequebookAddress?.chequebookAddress || ''}
+          />
+        </ExpandableList>
+        <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,112 @@
+import { Box } from '@material-ui/core'
+import { ReactElement, useContext, useState } from 'react'
+import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import { SwarmButton } from '../../../components/SwarmButton'
+import { Context as IdentityContext, Identity } from '../../../providers/Feeds'
+import { ROUTES } from '../../../routes'
+import { formatEnum } from '../../../utils'
+import { persistIdentitiesWithoutUpdate } from '../../../utils/identity'
+import { DeleteFeedDialog } from '../../feeds/DeleteFeedDialog'
+import { ExportFeedDialog } from '../../feeds/ExportFeedDialog'
+import { ImportFeedDialog } from '../../feeds/ImportFeedDialog'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountFeeds(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+
+  const navigate = useNavigate()
+
+  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
+  const [showImport, setShowImport] = useState(false)
+  const [showExport, setShowExport] = useState(false)
+  const [showDelete, setShowDelete] = useState(false)
+
+  function createNewFeed() {
+    return navigate(ROUTES.ACCOUNT_FEEDS_NEW)
+  }
+
+  function viewFeed(uuid: string) {
+    navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uuid))
+  }
+
+  function onDialogClose() {
+    setShowDelete(false)
+    setShowExport(false)
+    setShowImport(false)
+    setSelectedIdentity(null)
+  }
+
+  function onDelete(identity: Identity) {
+    onDialogClose()
+    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
+    setIdentities(updatedFeeds)
+    persistIdentitiesWithoutUpdate(updatedFeeds)
+  }
+
+  function onShowExport(identity: Identity) {
+    setSelectedIdentity(identity)
+    setShowExport(true)
+  }
+
+  function onShowDelete(identity: Identity) {
+    setSelectedIdentity(identity)
+    setShowDelete(true)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="FEEDS" />
+      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
+      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
+      {showDelete && selectedIdentity && (
+        <DeleteFeedDialog
+          identity={selectedIdentity}
+          onClose={onDialogClose}
+          onConfirm={(identity: Identity) => onDelete(identity)}
+        />
+      )}
+      <Box mb={4}>
+        <ExpandableListItemActions>
+          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
+            Create New Feed
+          </SwarmButton>
+          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
+            Import Feed
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Box>
+      {identities.map((x, i) => (
+        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
+          <Box mb={0.5}>
+            <ExpandableList label={x.name} level={1}>
+              <ExpandableListItemKey label="Identity address" value={x.address} />
+              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
+            </ExpandableList>
+          </Box>
+          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
+          <Box mt={0.75}>
+            <ExpandableListItemActions>
+              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
+                View Feed Page
+              </SwarmButton>
+              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
+                Export...
+              </SwarmButton>
+              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
+                Delete...
+              </SwarmButton>
+            </ExpandableListItemActions>
+          </Box>
+        </ExpandableList>
+      ))}
+    </>
+  )
+}
@@ -0,0 +1,75 @@
+import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement, useContext, useEffect } from 'react'
+import { PlusSquare } from 'react-feather'
+import { useNavigate } from 'react-router'
+import { SwarmButton } from '../../../components/SwarmButton'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as StampsContext } from '../../../providers/Stamps'
+import { ROUTES } from '../../../routes'
+import StampsTable from '../../stamps/StampsTable'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      width: '100%',
+      display: 'grid',
+    },
+    actions: {
+      display: 'flex',
+      width: '100%',
+      flex: '0 1 auto',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+    },
+  }),
+)
+
+export function AccountStamps(): ReactElement {
+  const classes = useStyles()
+
+  const navigate = useNavigate()
+
+  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
+  const { status } = useContext(BeeContext)
+
+  useEffect(() => {
+    if (!status.all) return
+    start()
+
+    return () => stop()
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  function navigateToNewStamp() {
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="STAMPS" />
+      <div className={classes.root}>
+        {error && (
+          <Container style={{ textAlign: 'center', padding: '50px' }}>
+            Error loading postage stamps details: {error.message}
+          </Container>
+        )}
+        {!error && (
+          <>
+            <div className={classes.actions}>
+              <SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
+                Buy New Postage Stamp
+              </SwarmButton>
+              <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
+            </div>
+            <StampsTable postageStamps={stamps} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,67 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { Download, Gift, Link } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import { Loading } from '../../../components/Loading'
+import { SwarmButton } from '../../../components/SwarmButton'
+import { Context } from '../../../providers/Bee'
+import { ROUTES } from '../../../routes'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountWallet(): ReactElement {
+  const { balance, nodeAddresses } = useContext(Context)
+
+  const navigate = useNavigate()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  function onCheckTransactions() {
+    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
+  }
+
+  function onInvite() {
+    navigate(ROUTES.ACCOUNT_INVITATIONS)
+  }
+
+  function onDeposit() {
+    navigate(ROUTES.WALLET)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="WALLET" />
+      <Box mb={4}>
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          <Typography variant="h2">Wallet balance</Typography>
+          <SwarmButton onClick={onDeposit} iconType={Download}>
+            Deposit
+          </SwarmButton>
+        </Grid>
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
+          Check transactions on Blockscout
+        </SwarmButton>
+        <SwarmButton onClick={onInvite} iconType={Gift}>
+          Invite to Swarm...
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}
@@ -1,11 +1,9 @@
 import type { ReactElement } from 'react'
-
+import CashoutModal from '../../components/CashoutModal'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-
-import CashoutModal from '../../components/CashoutModal'
 import { Accounting } from '../../hooks/accounting'
 import type { Token } from '../../models/Token'

@@ -25,7 +23,7 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
        <ExpandableList
          key={peer}
-          label={`Peer ${peer.substr(0, 8)}[…]`}
+          label={`Peer ${peer.slice(0, 8)}[…]`}
          level={1}
          info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
        >
@@ -1,52 +0,0 @@
-import { ReactElement, useContext } from 'react'
-
-import PeerBalances from './PeerBalances'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
-import { Context as SettingsContext } from '../../providers/Settings'
-import { useAccounting } from '../../hooks/accounting'
-import ExpandableList from '../../components/ExpandableList'
-import ExpandableListItem from '../../components/ExpandableListItem'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-import WithdrawModal from '../../containers/WithdrawModal'
-import DepositModal from '../../containers/DepositModal'
-
-export default function Accounting(): ReactElement {
-  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
-    useContext(BeeContext)
-  const { beeDebugApi } = useContext(SettingsContext)
-
-  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
-
-  if (!status.all) return <TroubleshootConnectionCard />
-
-  return (
-    <div>
-      <ExpandableList label="Chequebook" defaultOpen>
-        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-        <ExpandableListItem
-          label="Available Uncommitted Balance"
-          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-        />
-        <ExpandableListItem
-          label="Total Cheques Amount Sent"
-          value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
-        />
-        <ExpandableListItem
-          label="Total Cheques Amount Received"
-          value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
-        />
-        <ExpandableListItemActions>
-          <WithdrawModal />
-          <DepositModal />
-        </ExpandableListItemActions>
-      </ExpandableList>
-      <ExpandableList label="Blockchain" defaultOpen>
-        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
-        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
-      </ExpandableList>
-      <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
-    </div>
-  )
-}
@@ -0,0 +1,133 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { Form, Formik } from 'formik'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Check, X } from 'react-feather'
+import { useNavigate } from 'react-router'
+import { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as FeedsContext, IdentityType } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { convertWalletToIdentity, generateWallet, persistIdentity } from '../../utils/identity'
+
+interface FormValues {
+  identityName?: string
+  type?: IdentityType
+  password?: string
+}
+
+const initialValues: FormValues = {
+  identityName: '',
+  type: 'PRIVATE_KEY',
+  password: '',
+}
+
+export default function CreateNewFeed(): ReactElement {
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { identities, setIdentities } = useContext(FeedsContext)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+
+  const navigate = useNavigate()
+
+  async function onSubmit(values: FormValues) {
+    setLoading(true)
+
+    if (!beeApi) {
+      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+    const wallet = generateWallet()
+    const stamps = await beeDebugApi?.getAllPostageBatch()
+
+    if (!stamps || !stamps.length) {
+      enqueueSnackbar(<span>No stamp available</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    if (!values.identityName || !values.type) {
+      enqueueSnackbar(<span>Form is unfinished</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    navigate(ROUTES.ACCOUNT_FEEDS)
+    setLoading(false)
+  }
+
+  function cancel() {
+    navigate(-1)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Create new feed</HistoryHeader>
+      <Box mb={4}>
+        <DocumentationText>
+          To create a feed you will need to create an identity. Please refer to the{' '}
+          <a
+            href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
+            target="_blank"
+            rel="noreferrer"
+          >
+            official Bee documentation
+          </a>{' '}
+          to understand how feeds work.
+        </DocumentationText>
+      </Box>
+      <Formik initialValues={initialValues} onSubmit={onSubmit}>
+        {({ submitForm, values }) => (
+          <Form>
+            <Box mb={0.25}>
+              <SwarmTextInput name="identityName" label="Identity name" formik />
+            </Box>
+            <Box mb={0.25}>
+              <SwarmSelect
+                formik
+                name="type"
+                options={[
+                  { label: 'Keypair Only', value: 'PRIVATE_KEY' },
+                  { label: 'Password Protected', value: 'V3' },
+                ]}
+              />
+            </Box>
+            {values.type === 'V3' && <SwarmTextInput name="password" label="Password" password formik />}
+            <Box mt={2}>
+              <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+            </Box>
+            <Box mt={2} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+              <Grid container justifyContent="space-between">
+                <Typography>Feeds name</Typography>
+                <Typography>{values.identityName} Website</Typography>
+              </Grid>
+            </Box>
+            <Box mt={1.25}>
+              <ExpandableListItemActions>
+                <SwarmButton onClick={submitForm} iconType={Check} disabled={loading} loading={loading}>
+                  Create Feed
+                </SwarmButton>
+                <SwarmButton onClick={cancel} iconType={X} disabled={loading} cancel>
+                  Cancel
+                </SwarmButton>
+              </ExpandableListItemActions>
+            </Box>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}
@@ -0,0 +1,35 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Trash, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Identity } from '../../providers/Feeds'
+
+interface Props {
+  identity: Identity
+  onConfirm: (identity: Identity) => void
+  onClose: () => void
+}
+
+export function DeleteFeedDialog({ identity, onConfirm, onClose }: Props): ReactElement {
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Delete</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography align="center">{`You are about to delete feed ${identity.name} Website. It is strongly advised to export this feed first.`}</Typography>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Trash} onClick={() => onConfirm(identity)}>
+          Delete
+        </SwarmButton>
+        <SwarmButton iconType={X} onClick={onClose} cancel>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}
--- a/Show More
+++ b/Show More