chore: release 0.13.0 (#289)

* ci: add swarm-cli extra flags

* ci: rename SWARM_CLI_EXTRA_FLAGS to GATEWAY_AUTHORIZATION_HEADER

* ci: change bee-url

.babelrc.js

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

.depcheckrc.json

@@ -0,0 +1,19 @@
+{
+  "ignores": [
+    "@types/jest", 
+    "@commitlint/config-conventional", 
+    "@types/react-router",
+    "@babel/core",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime",
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    "babel-loader",
+    "babel-plugin-syntax-dynamic-import",
+    "babel-plugin-tsconfig-paths",
+    "file-loader",
+    "ts-node",
+    "webpack-cli"
+  ]
+}

.eslintrc

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

.github/workflows/check.yaml

@@ -16,6 +16,11 @@ jobs:
       matrix:
         node-version: [14.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
+
     steps:
       - uses: actions/checkout@v2
         with:
@@ -47,5 +52,34 @@ jobs:
         env:
           CI: true
 
+      - 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.REPO_GHA_PAT }}
+
       - name: Build
         run: npm run build
+
+      - name: Build Component
+        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/beeload-action@v1
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          preview: 'true'
+          token: ${{ secrets.REPO_GHA_PAT }}
+          extra-params: '-H "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"'
+
+      - name: Upload to testnet
+        continue-on-error: true
+        uses: ethersphere/beeload-action@v1
+        with:
+          bee-url: https://api.gateway.testnet.ethswarm.org

.github/workflows/publish_npmjs.yaml

@@ -15,6 +15,8 @@ jobs:
           node-version: 14
           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}}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/lib
 
 # misc
 .DS_Store

CHANGELOG.md

@@ -1,5 +1,99 @@
 # Changelog
 
+## [0.13.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.12.0...v0.13.0) (2022-01-28)
+
+
+### Features
+
+* add hash based routing ([#287](https://www.github.com/ethersphere/bee-dashboard/issues/287)) ([9ee1c91](https://www.github.com/ethersphere/bee-dashboard/commit/9ee1c9107bb08d1838044f39e4d0dd5817c8f283))
+* add metadata and preview ([#292](https://www.github.com/ethersphere/bee-dashboard/issues/292)) ([f401314](https://www.github.com/ethersphere/bee-dashboard/commit/f4013142afdb407e699eff9587921e23c971f1db))
+
+
+### Bug Fixes
+
+* clean up spinner and disabled state on download page ([#294](https://www.github.com/ethersphere/bee-dashboard/issues/294)) ([a406e0f](https://www.github.com/ethersphere/bee-dashboard/commit/a406e0fc014991fcbaca230f27f41cd071d8a863))
+* correct folder name when uploading multiple files or mix of files & directories ([#291](https://www.github.com/ethersphere/bee-dashboard/issues/291)) ([d878747](https://www.github.com/ethersphere/bee-dashboard/commit/d8787476acf068be6609a77b1fadb2f61d0fd502))
+* disable feeds page when disconnected ([#293](https://www.github.com/ethersphere/bee-dashboard/issues/293)) ([1310deb](https://www.github.com/ethersphere/bee-dashboard/commit/1310deb17aec91f368f99974aaa245abb0a3e201))
+* do not print size and name when meta is unknown ([#297](https://www.github.com/ethersphere/bee-dashboard/issues/297)) ([7880c80](https://www.github.com/ethersphere/bee-dashboard/commit/7880c802aea6b0830ca52b47b88540b8df5888cc))
+* get current price from chain state ([#286](https://www.github.com/ethersphere/bee-dashboard/issues/286)) ([bc82e67](https://www.github.com/ethersphere/bee-dashboard/commit/bc82e6756154b33d01796a6e66e51dcfa1495338))
+
+## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)
+
+
+### Features
+
+* add identity and feed management ([#272](https://www.github.com/ethersphere/bee-dashboard/issues/272)) ([25b65c3](https://www.github.com/ethersphere/bee-dashboard/commit/25b65c3fb770b09c685fe66596e372dfbb616625))
+
+### [0.11.2](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.1...v0.11.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* **ci:** add lib folder to the package.json files prop ([#270](https://www.github.com/ethersphere/bee-dashboard/issues/270)) ([5ac0f01](https://www.github.com/ethersphere/bee-dashboard/commit/5ac0f01bf50ee23b474ab9c8d61c6af418544083))
+
+### [0.11.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.0...v0.11.1) (2021-12-14)
+
+
+### Bug Fixes
+
+* typo in publish script ([#268](https://www.github.com/ethersphere/bee-dashboard/issues/268)) ([c1e77bf](https://www.github.com/ethersphere/bee-dashboard/commit/c1e77bfc0d3ac442d6bacec7402f576a6422927e))
+
+## [0.11.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.10.0...v0.11.0) (2021-12-14)
+
+
+### Features
+
+* modularisation ([#244](https://www.github.com/ethersphere/bee-dashboard/issues/244)) ([2a13da1](https://www.github.com/ethersphere/bee-dashboard/commit/2a13da1a6c5925946d22666a84f975cec87df115))
+
+
+### Bug Fixes
+
+* **build:** bee-dashboard component building ([#267](https://www.github.com/ethersphere/bee-dashboard/issues/267)) ([153b007](https://www.github.com/ethersphere/bee-dashboard/commit/153b007387618e34e1d5dc7fd82d49722783e757))
+
+## [0.10.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.9.0...v0.10.0) (2021-12-07)
+
+
+### Features
+
+* add website and folder upload and download ([#260](https://www.github.com/ethersphere/bee-dashboard/issues/260)) ([3ef1ad9](https://www.github.com/ethersphere/bee-dashboard/commit/3ef1ad9574c9193f83d8a1447fddb79266c1a4f4))
+
+## [0.9.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.8.0...v0.9.0) (2021-11-25)
+
+
+### Features
+
+* add dev mode flag ([#246](https://www.github.com/ethersphere/bee-dashboard/issues/246)) ([49350b0](https://www.github.com/ethersphere/bee-dashboard/commit/49350b05709053ecfbc4fc98f8b1df1aa0345e95))
+* enable setting devMode from queryParams ([#254](https://www.github.com/ethersphere/bee-dashboard/issues/254)) ([844383b](https://www.github.com/ethersphere/bee-dashboard/commit/844383bea7b2118232a74ac23c9e9a38fc47d3fd))
+* improve upload flow ([#240](https://www.github.com/ethersphere/bee-dashboard/issues/240)) ([635621b](https://www.github.com/ethersphere/bee-dashboard/commit/635621b04aea7124a99d00f9e31a86983063f5ce))
+* move postage stamp operations to bee debug api ([#256](https://www.github.com/ethersphere/bee-dashboard/issues/256)) ([3bb0077](https://www.github.com/ethersphere/bee-dashboard/commit/3bb00771d684ad93fd7acd921b648574013aec5c))
+
+## [0.8.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.7.0...v0.8.0) (2021-10-20)
+
+In this version we are adding support for the bee release 1.2.0. The app also went through a graphical redesign. More to come soon!
+
+
+### Features
+* support for bee 1.2.0
+* update files page design ([#218](https://www.github.com/ethersphere/bee-dashboard/issues/218)) ([93af7f3](https://www.github.com/ethersphere/bee-dashboard/commit/93af7f35a371d54864c068be6e1d8a70092afe28))
+* update info page design ([#207](https://www.github.com/ethersphere/bee-dashboard/issues/207)) ([57f5a73](https://www.github.com/ethersphere/bee-dashboard/commit/57f5a73f3a8d957bf967c51612dc09c802bb68dc))
+* update status page design ([#214](https://www.github.com/ethersphere/bee-dashboard/issues/214)) ([b666cd2](https://www.github.com/ethersphere/bee-dashboard/commit/b666cd2657cf1003651c44b6b4fa5bdcf11e895f))
+* update troubleshooting component design ([#204](https://www.github.com/ethersphere/bee-dashboard/issues/204)) ([c4c1573](https://www.github.com/ethersphere/bee-dashboard/commit/c4c1573263868b6dc8a863124e4aee824dceadbb))
+* update accounting page design ([#209](https://www.github.com/ethersphere/bee-dashboard/issues/209)) ([ecbc116](https://www.github.com/ethersphere/bee-dashboard/commit/ecbc1164756de912d14ce44aa9b2c155dded6dac))
+* update postage stamps page design ([#217](https://www.github.com/ethersphere/bee-dashboard/issues/217)) ([f241b2f](https://www.github.com/ethersphere/bee-dashboard/commit/f241b2fc5f6ec0741e275498ebef5a18ce710b81))
+* update settings page design ([#215](https://www.github.com/ethersphere/bee-dashboard/issues/215)) ([32e5ea9](https://www.github.com/ethersphere/bee-dashboard/commit/32e5ea9e56fdf957b758ec714bb6a4fe1903082a))
+
+
+### Bug Fixes
+
+* hover state style of ListItems which are clickable to be in line with other buttons ([#223](https://www.github.com/ethersphere/bee-dashboard/issues/223)) ([6c3f6c1](https://www.github.com/ethersphere/bee-dashboard/commit/6c3f6c1019801267aa5e51002f6e21f769edc210))
+* size of the troubleshoot component button ([#226](https://www.github.com/ethersphere/bee-dashboard/issues/226)) ([b4c9d9e](https://www.github.com/ethersphere/bee-dashboard/commit/b4c9d9e0182c4bee5ebb2d4e43e0aaad2aeb616b))
+* style of the update bee version button ([#222](https://www.github.com/ethersphere/bee-dashboard/issues/222)) ([83c6d13](https://www.github.com/ethersphere/bee-dashboard/commit/83c6d1341790d664c7986dd2a816fe6a3b069e5c))
+* typo in population text ([#228](https://www.github.com/ethersphere/bee-dashboard/issues/228)) ([cc5e778](https://www.github.com/ethersphere/bee-dashboard/commit/cc5e778f892b73b0b7ff5e0fa00c4816f3298ac7))
+* unknown routes should point to info page ([#227](https://www.github.com/ethersphere/bee-dashboard/issues/227)) ([f11bbd5](https://www.github.com/ethersphere/bee-dashboard/commit/f11bbd5008a78ef7d5c73fc2758ee4e2dafae01e))
+* used label in postage stamp list ([#220](https://www.github.com/ethersphere/bee-dashboard/issues/220)) ([0326568](https://www.github.com/ethersphere/bee-dashboard/commit/03265687ad630b0100da3134518b680327af1636))
+* wording in chequebook setup ([#211](https://www.github.com/ethersphere/bee-dashboard/issues/211)) ([e7188f4](https://www.github.com/ethersphere/bee-dashboard/commit/e7188f4a35c85204eef6a01ae6f1e679d076180c))
+
+
 ## [0.7.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.6.0...v0.7.0) (2021-08-31)
 
 

README.md

@@ -3,28 +3,33 @@
 [![](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)
+[![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.0.0-orange.svg?style=flat-square)
 ![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
 
-> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or manage your postage stamps.
+> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
+> manage your postage stamps.
 
-**Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
+**Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
+working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with **Bee version 1.1.0**. Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.4.1-238867f1<!-- 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/status.png)
+![Status page](/ui_samples/info.png)
-
-| Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
-|-------|---------|-------|----------|------|
-| ![Setup](/ui_samples/node_setup.png) | ![Files](/ui_samples/file_upload.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/peers.png) | ![Settings](/ui_samples/settings.png) |
 
+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/postage_stamps.png) |
 
 ## Table of Contents
 
 - [Install](#install)
 - [Usage](#usage)
-    - [Terminal](#terminal)
+  - [Terminal](#terminal)
-    - [Docker](#docker)
+  - [Docker](#docker)
 - [Contribute](#contribute)
 - [Development](#development)
 - [Maintainers](#maintainers)
@@ -40,11 +45,15 @@ npm install -g @ethersphere/bee-dashboard
 
 ## Usage
 
-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node. To see where the config file is, consult the [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
+:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
+setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
+To see where the config file is, consult the
+[official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
 
 ### Terminal
 
 To start use:
+
 ```sh
 bee-dashboard
 ```
@@ -76,13 +85,16 @@ 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.
+
 ## Contribute
 
 There are some ways you can make this module better:
 
 - Consult our [open issues](https://github.com/ethersphere/bee-dashboard/issues) and take on one of them
 - Help our tests reach 100% coverage!
-- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or want to give feedback
+- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or
+  want to give feedback
 
 ## Maintainers
 
@@ -94,3 +106,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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.7.0",
+  "version": "0.13.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,103 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "1.2.1",
+    "@ethersphere/bee-js": "3.1.0",
+    "@ethersphere/manifest-js": "1.1.0",
+    "@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",
+    "axios": "0.24.0",
-    "@types/react-router-dom": "5.1.7",
-    "axios": "0.21.1",
     "bignumber.js": "9.0.1",
-    "feather-icons": "4.28.0",
+    "ethereumjs-wallet": "^1.0.2",
-    "formik": "2.2.8",
+    "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": ">= 17.0.2",
-    "react-copy-to-clipboard": "5.0.3",
+    "react-copy-to-clipboard": "5.0.4",
-    "react-dom": "17.0.2",
+    "react-dom": ">= 17.0.2",
     "react-feather": "2.0.9",
     "react-identicons": "1.2.5",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.2.1",
-    "react-syntax-highlighter": "15.4.3",
+    "react-router-dom": "6.2.1",
-    "semver": "7.3.2",
+    "react-syntax-highlighter": "15.4.4",
+    "semver": "7.3.5",
     "serve-handler": "6.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.12.0",
+    "@babel/core": "7.16.0",
-    "@testing-library/react": "11.2.6",
+    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@testing-library/user-event": "13.1.5",
+    "@babel/plugin-transform-runtime": "7.16.4",
-    "@types/jest": "26.0.22",
+    "@babel/preset-env": "7.16.4",
-    "@types/node": "14.14.41",
+    "@babel/preset-react": "7.16.0",
-    "@types/qrcode.react": "1.0.1",
+    "@babel/preset-typescript": "7.16.0",
-    "@types/react": "17.0.3",
+    "@commitlint/config-conventional": "14.1.0",
-    "@types/react-copy-to-clipboard": "5.0.0",
+    "@testing-library/jest-dom": "5.15.0",
-    "@types/react-dom": "17.0.3",
+    "@testing-library/react": "12.1.2",
-    "@types/react-syntax-highlighter": "13.5.0",
+    "@types/file-saver": "2.0.4",
-    "@types/semver": "7.3.6",
+    "@types/jest": "27.0.2",
-    "eslint": "7.32.0",
+    "@types/qrcode.react": "1.0.2",
-    "eslint-config-prettier": "8.3.0",
+    "@types/react": "17.0.34",
-    "eslint-plugin-jest": "24.4.0",
+    "@types/react-copy-to-clipboard": "5.0.2",
-    "eslint-plugin-prettier": "3.4.1",
+    "@types/react-dom": "17.0.11",
-    "eslint-plugin-react": "7.24.0",
+    "@types/react-router": "5.1.17",
-    "prettier": "2.3.2",
+    "@types/react-router-dom": "5.3.2",
+    "@types/react-syntax-highlighter": "13.5.2",
+    "@types/semver": "7.3.9",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.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",
+    "depcheck": "1.4.2",
+    "eslint": "7.24.0",
+    "eslint-config-prettier": "8.2.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-testing-library": "3.10.2",
+    "file-loader": "6.2.0",
+    "prettier": "2.4.1",
     "react-scripts": "4.0.3",
-    "typescript": "4.2.4",
+    "ts-node": "^10.4.0",
-    "web-vitals": "1.1.1"
+    "typescript": "4.4.4",
+    "web-vitals": "2.1.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
   },
   "scripts": {
     "prepare": "npm run build",
     "start": "react-scripts start",
     "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"
   },
   "files": [
+    "lib",
     "build",
     "serve.js"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

public/index.html

@@ -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">
+    <meta name="description" content="Bee Dashboard" />
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
-    
-    <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

src/App.css

@@ -1,34 +1,63 @@
 @font-face {
-  font-family: "IBMPlexMono500";
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Medium.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-SemiBold.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBMPlexMono500';
   src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
   font-weight: 500;
 }
 @font-face {
-  font-family: "IBMPlexMono600";
+  font-family: 'IBMPlexMono600';
   src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
   font-weight: 600;
 }
 @font-face {
-  font-family: "IBMPlexMonoregular";
+  font-family: 'IBMPlexMonoregular';
   src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
   font-weight: 300;
 }
 @font-face {
-  font-family: "WorkSans-Italic-VariableFont_wght";
+  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";
+  font-family: 'WorkSans-VariableFont_wght';
   src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
   font-weight: 400;
 }
 
 .App {
-  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family: 'Work Sans', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
 }
 
-a, button {  
+a,
-  font-family: "IBMPlexMono500" !important;
+button {
+  font-family: 'IBMPlexMono500' !important;
   color: #dd7700;
-}
+}

src/App.tsx

@@ -1,37 +1,47 @@
-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 React, { ReactElement } from 'react'
-import BaseRouter from './routes'
+import { HashRouter as Router } from 'react-router-dom'
+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 BaseRouter from './routes'
+import { theme } from './theme'
 
-const App = (): ReactElement => (
+interface Props {
+  beeApiUrl?: string
+  beeDebugApiUrl?: string
+  lockedApiSettings?: boolean
+}
+
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
   <div className="App">
     <ThemeProvider theme={theme}>
-      <SettingsProvider>
+      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
         <BeeProvider>
           <StampsProvider>
-            <PlatformProvider>
+            <FileProvider>
-              <SnackbarProvider>
+              <FeedsProvider>
-                <Router>
+                <PlatformProvider>
-                  <>
+                  <SnackbarProvider>
-                    <CssBaseline />
+                    <Router>
-                    <Dashboard>
+                      <>
-                      <BaseRouter />
+                        <CssBaseline />
-                    </Dashboard>
+                        <Dashboard>
-                  </>
+                          <BaseRouter />
-                </Router>
+                        </Dashboard>
-              </SnackbarProvider>
+                      </>
-            </PlatformProvider>
+                    </Router>
+                  </SnackbarProvider>
+                </PlatformProvider>
+              </FeedsProvider>
+            </FileProvider>
           </StampsProvider>
         </BeeProvider>
       </SettingsProvider>

src/components/AlertUploadSize.tsx

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

src/components/Capacity.tsx

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

src/components/CashoutModal.tsx

@@ -7,6 +7,7 @@ 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 { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 
@@ -59,8 +60,8 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
 
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cashout
+        Cash out peer {peerId.substr(0, 8)}[…]
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>

src/components/CloseButton.tsx

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

src/components/Code.tsx

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

src/components/ConnectToHost.tsx

@@ -1,50 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import { TextField, Button } from '@material-ui/core'
-
-interface Props {
-  defaultHost?: string
-  setHost: (host: string) => void
-}
-
-export default function ConnectToHost(props: Props): ReactElement {
-  const [hostInputVisible, toggleHostInputVisibility] = useState(false)
-  const [host, setHost] = useState('')
-
-  const handleNewHostConnection = () => {
-    if (host) {
-      props.setHost(host)
-      toggleHostInputVisibility(!hostInputVisible)
-    }
-  }
-
-  return (
-    <div>
-      {hostInputVisible ? (
-        <div style={{ display: 'flex' }}>
-          <TextField
-            defaultValue={props.defaultHost}
-            label="Enter host"
-            variant="outlined"
-            size="small"
-            onChange={e => setHost(e.target.value)}
-            style={{ marginRight: '15px', minWidth: '300px' }}
-          />
-          <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
-            Connect
-          </Button>
-          <Button
-            style={{ marginLeft: '7px' }}
-            onClick={() => toggleHostInputVisibility(!hostInputVisible)}
-            size="small"
-          >
-            Cancel
-          </Button>
-        </div>
-      ) : (
-        <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
-          Change host
-        </Button>
-      )}
-    </div>
-  )
-}

src/components/DocumentationText.tsx

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

src/components/EthereumAddress.tsx

@@ -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'}/${
+              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
-                props.address
-              }`}
               target="_blank"
               rel="noreferrer"
             >

src/components/EthereumAddressCard.tsx

@@ -1,59 +0,0 @@
-import { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-
-import EthereumAddress from '../components/EthereumAddress'
-
-import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-around',
-      flexWrap: 'wrap',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      flex: '1 0 auto',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  chequebookAddress: ChequebookAddressResponse | null
-}
-
-function EthereumAddressCard(props: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
-          <Typography variant="subtitle1" gutterBottom>
-            Ethereum Address
-          </Typography>
-          <EthereumAddress address={props.nodeAddresses?.ethereum} />
-        </CardContent>
-      </div>
-
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
-          <Typography variant="subtitle1" gutterBottom>
-            Chequebook Contract Address
-          </Typography>
-          <EthereumAddress address={props.chequebookAddress?.chequebookAddress} />
-        </CardContent>
-      </div>
-    </Card>
-  )
-}
-
-export default EthereumAddressCard

src/components/ExpandableElement.tsx

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

src/components/ExpandableList.tsx

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

src/components/ExpandableListItem.tsx

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

src/components/ExpandableListItemActions.tsx

@@ -0,0 +1,46 @@
+import { Grid } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+    action: {
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  children: ReactNode | ReactNode[]
+}
+
+export default function ExpandableListItemActions({ children }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  if (Array.isArray(children)) {
+    return (
+      <div className={classes.wrapper}>
+        {children
+          // Exclude falsy values to allow conditional rendering
+          .filter(x => x)
+          .map((a, i) => (
+            <div key={i} className={classes.action}>
+              {a}
+            </div>
+          ))}
+      </div>
+    )
+  }
+
+  return (
+    <Grid container direction="row">
+      <Grid className={classes.action}>{children}</Grid>
+    </Grid>
+  )
+}

src/components/ExpandableListItemInput.tsx

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

src/components/ExpandableListItemKey.tsx

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

src/components/ExpandableListItemLink.tsx

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

src/components/ExpandableListItemNote.tsx

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

src/components/FitImage.tsx

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

src/components/History.tsx

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

src/components/HistoryHeader.tsx

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

src/components/Loading.tsx

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

src/components/PeerDetail.tsx

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

src/components/ProgressIndicator.tsx

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

src/components/SideBar.tsx

@@ -1,16 +1,15 @@
-import type { ReactElement } from 'react'
+import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
-import { Link } from 'react-router-dom'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core'
+import type { ReactElement } from 'react'
-import { Home, FileText, DollarSign, Share2, Settings, Layers, BookOpen } from 'react-feather'
+import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
+import { Link } from 'react-router-dom'
+import Logo from '../assets/logo.svg'
+import { config } from '../config'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 
-import Logo from '../assets/logo.svg'
-
 const navBarItems = [
   {
     label: 'Info',
@@ -19,9 +18,14 @@ const navBarItems = [
   },
   {
     label: 'Files',
-    path: ROUTES.FILES,
+    path: ROUTES.UPLOAD,
     icon: FileText,
   },
+  {
+    label: 'Feeds',
+    path: ROUTES.FEEDS,
+    icon: Bookmark,
+  },
   {
     label: 'Stamps',
     path: ROUTES.STAMPS,
@@ -32,11 +36,6 @@ const navBarItems = [
     path: ROUTES.ACCOUNTING,
     icon: DollarSign,
   },
-  {
-    label: 'Peers',
-    path: ROUTES.PEERS,
-    icon: Share2,
-  },
   {
     label: 'Settings',
     path: ROUTES.SETTINGS,
@@ -44,6 +43,8 @@ const navBarItems = [
   },
 ]
 
+const drawerWidth = 300
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -52,6 +53,14 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingTop: theme.spacing(8),
       paddingBottom: theme.spacing(8),
     },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+    drawerPaper: {
+      width: drawerWidth,
+      backgroundColor: '#212121',
+    },
     logo: {
       marginLeft: theme.spacing(8),
       marginRight: theme.spacing(8),
@@ -86,7 +95,7 @@ export default function SideBar(): ReactElement {
   const classes = useStyles()
 
   return (
-    <Drawer variant="permanent">
+    <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}>
@@ -108,7 +117,7 @@ export default function SideBar(): ReactElement {
           </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} />}

src/components/SideBarItem.tsx

@@ -50,7 +50,7 @@ interface Props {
 export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
   const classes = useStyles()
   const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = Boolean(path && matchPath(location.pathname, path))
 
   return (
     <StyledListItem button selected={isSelected} disableRipple>

src/components/SideBarStatus.tsx

@@ -5,6 +5,7 @@ import { ArrowRight } from 'react-feather'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
 import { Context } from '../providers/Bee'
+import StatusIcon from './StatusIcon'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -32,10 +33,12 @@ const useStyles = makeStyles((theme: Theme) =>
     button: {
       '&:hover': {
         backgroundColor: '#2c2c2c',
+        color: 'white',
 
         // https://github.com/mui-org/material-ui/issues/22543
         '@media (hover: none)': {
           backgroundColor: '#2c2c2c',
+          color: 'white',
         },
       },
     },
@@ -50,10 +53,10 @@ interface Props {
 }
 
 export default function SideBarItem({ path }: Props): ReactElement {
-  const { status } = useContext(Context)
+  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
@@ -62,17 +65,8 @@ export default function SideBarItem({ path }: Props): ReactElement {
       selected={isSelected}
       disableRipple
     >
-      <ListItemIcon>
+      <ListItemIcon style={{ marginLeft: '30px' }}>
-        <span
+        <StatusIcon isOk={status.all} isLoading={isLoading} />
-          style={{
-            backgroundColor: status.all ? '#1de600' : '#ff3a52',
-            height: '14px',
-            width: '14px',
-            borderRadius: '50%',
-            display: 'inline-block',
-            marginLeft: 30,
-          }}
-        />
       </ListItemIcon>
       <ListItemText
         primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}

src/components/StatCard.tsx

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

src/components/StatusIcon.tsx

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

src/components/StripedWrapper.tsx

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

src/components/SwarmButton.tsx

@@ -0,0 +1,91 @@
+import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import React, { ReactElement } from 'react'
+import { IconProps } from 'react-feather'
+
+interface Props {
+  onClick: () => void
+  iconType: React.ComponentType<IconProps>
+  children: string
+  className?: string
+  disabled?: boolean
+  loading?: boolean
+  cancel?: boolean
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    button: {
+      height: '52px',
+      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,
+}: Props): 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
+      className={getButtonClassName()}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick()
+        event.currentTarget.blur()
+      }}
+      variant="contained"
+      startIcon={icon}
+      disabled={disabled}
+    >
+      {children}
+      {loading && (
+        <div className={classes.spinnerWrapper}>
+          <CircularProgress />
+        </div>
+      )}
+    </Button>
+  )
+}

src/components/SwarmDialog.tsx

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

src/components/SwarmSelect.tsx

@@ -0,0 +1,90 @@
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { Select } from 'formik-material-ui'
+import { ReactElement } from 'react'
+
+export type SelectEvent = React.ChangeEvent<{
+  name?: string | undefined
+  value: unknown
+}>
+
+interface Props {
+  label?: string
+  name?: string
+  options: { value: string; label: string }[]
+  onChange?: (event: SelectEvent) => void
+  formik?: boolean
+  defaultValue?: 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 }: 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}
+          placeholder={label}
+          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>}
+      <SimpleSelect
+        required
+        name={name}
+        fullWidth
+        variant="outlined"
+        className={classes.select}
+        defaultValue={defaultValue || ''}
+        onChange={onChange}
+        placeholder={label}
+        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
+      >
+        {options.map((x, i) => (
+          <MenuItem key={i} value={x.value} className={classes.option}>
+            {x.label}
+          </MenuItem>
+        ))}
+      </SimpleSelect>
+    </>
+  )
+}

src/components/SwarmTextInput.tsx

@@ -0,0 +1,68 @@
+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
+  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 }: 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=""
+        InputProps={{ disableUnderline: true }}
+      />
+    )
+  }
+
+  return (
+    <SimpleTextField
+      type={password ? 'password' : undefined}
+      required
+      label={label}
+      fullWidth
+      variant="filled"
+      className={classes.field}
+      defaultValue=""
+      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
+    />
+  )
+}

src/components/TabsContainer.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import Tabs from '@material-ui/core/Tabs'
+import { Tab, Tabs } from '@material-ui/core'
-import Tab from '@material-ui/core/Tab'
-import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
 
 interface TabPanelProps {
   children?: ReactNode
@@ -16,24 +13,25 @@ function TabPanel(props: TabPanelProps) {
 
   return (
     <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && (
+      {value === index && children}
-        <Box p={3}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
     </div>
   )
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) =>
-  root: {
+  createStyles({
-    flexGrow: 1,
+    root: {
-  },
+      flexGrow: 1,
-}))
+    },
+    content: {
+      marginTop: theme.spacing(2),
+    },
+  }),
+)
 
 interface TabsValues {
   component: ReactNode
-  label: string
+  label: ReactNode
 }
 
 interface Props {
@@ -55,16 +53,18 @@ export default function SimpleTabs({ values, index, indexChanged }: Props): Reac
 
   return (
     <div className={classes.root}>
-      <Tabs value={v} onChange={handleChange}>
+      <Tabs value={v} onChange={handleChange} variant="fullWidth">
         {values.map(({ label }, idx) => (
           <Tab key={idx} label={label} />
         ))}
       </Tabs>
-      {values.map(({ component }, idx) => (
+      <div className={classes.content}>
-        <TabPanel key={idx} value={v} index={idx}>
+        {values.map(({ component }, idx) => (
-          {component}
+          <TabPanel key={idx} value={v} index={idx}>
-        </TabPanel>
+            {component}
-      ))}
+          </TabPanel>
+        ))}
+      </div>
     </div>
   )
 }

src/components/Title.tsx

@@ -1,41 +0,0 @@
-import { Grid, Tooltip, Typography } from '@material-ui/core/'
-import { makeStyles } from '@material-ui/core/styles'
-import { Info } from '@material-ui/icons'
-import type { ReactElement } from 'react'
-
-interface TitleProps {
-  label: string
-  tooltip?: string
-}
-
-const useStyles = makeStyles({
-  title: {
-    fontSize: 16,
-  },
-})
-
-export function Title({ label, tooltip }: TitleProps): ReactElement {
-  const classes = useStyles()
-
-  if (!tooltip) {
-    return (
-      <Typography className={classes.title} color="textSecondary" gutterBottom>
-        {label}
-      </Typography>
-    )
-  }
-
-  // span is needed as Tooltip expects a non-functional element!
-  return (
-    <Tooltip title={tooltip}>
-      <span>
-        <Grid container direction="row" justify="space-between">
-          <Typography className={classes.title} color="textSecondary" gutterBottom>
-            {label}
-          </Typography>
-          <Info />
-        </Grid>
-      </span>
-    </Tooltip>
-  )
-}

src/components/TitleWithClose.tsx

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

src/components/TopologyStats.tsx

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

src/components/TroubleshootConnectionCard.tsx

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

src/components/WithdrawDepositModal.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
@@ -19,6 +19,7 @@ interface Props {
   max?: BigNumber
   min?: BigNumber
   action: (amount: bigint) => Promise<string>
+  icon?: ReactNode
 }
 
 export default function WithdrawDepositModal({
@@ -29,6 +30,7 @@ export default function WithdrawDepositModal({
   max,
   label,
   action,
+  icon,
 }: Props): ReactElement {
   const [open, setOpen] = useState(false)
   const [amount, setAmount] = useState('')
@@ -36,8 +38,9 @@ export default function WithdrawDepositModal({
   const [amountError, setAmountError] = useState<Error | null>(null)
   const { enqueueSnackbar } = useSnackbar()
 
-  const handleClickOpen = () => {
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     setOpen(true)
+    e.stopPropagation()
   }
 
   const handleClose = () => {
@@ -52,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' })
     }
   }
 
@@ -68,13 +71,13 @@ 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)
     }
   }
 
   return (
     <div>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
         {label}
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">

src/config.ts

@@ -0,0 +1,29 @@
+function getProcessEnv(key: string): string | undefined | false {
+  return typeof process === 'object' && process.env[key]
+}
+
+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
+
+  constructor() {
+    this.BEE_API_HOST =
+      sessionStorage.getItem('api_host') || getProcessEnv('REACT_APP_BEE_HOST') || 'http://localhost:1633'
+    this.BEE_DEBUG_API_HOST =
+      sessionStorage.getItem('debug_api_host') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
+    this.BLOCKCHAIN_EXPLORER_URL =
+      getProcessEnv('REACT_APP_BLOCKCHAIN_EXPLORER_URL') || 'https://blockscout.com/xdai/mainnet'
+    this.BEE_DOCS_HOST = getProcessEnv('REACT_APP_BEE_DOCS_HOST') || 'https://docs.ethswarm.org/docs/'
+    this.BEE_DISCORD_HOST = getProcessEnv('REACT_APP_BEE_DISCORD_HOST') || 'https://discord.gg/eKr9XPv7'
+    this.GITHUB_REPO_URL =
+      getProcessEnv('REACT_APP_BEE_GITHUB_REPO_URL') || 'https://api.github.com/repos/ethersphere/bee'
+  }
+}
+
+export const config = new Config()
+
+export default config

src/constants.ts

@@ -0,0 +1,3 @@
+export const META_FILE_NAME = '.swarmgatewaymeta.json'
+export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
+export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }

src/containers/DepositModal.tsx

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

src/containers/WithdrawModal.tsx

@@ -1,18 +1,19 @@
-import { ReactElement, useContext } from 'react'
-import { Context as SettingsContext } from '../providers/Settings'
-
-import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { BigNumber } from 'bignumber.js'
+import { ReactElement, useContext } from 'react'
+import { Upload } from 'react-feather'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
+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"
+      icon={<Upload size="1rem" />}
       min={new BigNumber(0)}
       action={(amount: bigint) => {
         if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')

src/hooks/accounting.ts

@@ -6,6 +6,7 @@ import { Balance, Settlements, Settlement } from '../types'
 
 interface UseAccountingHook {
   isLoadingUncashed: boolean
+  totalUncashed: Token
   accounting: Accounting[] | null
 }
 
@@ -60,16 +61,21 @@ function mergeAccounting(
       }),
   )
 
-  // If there are no cheques (and hence last cashout actions), we don't need to sort and can return values right away
+  // If there are no cheques (and hence last cashout actions)
-  if (!uncashedAmounts) return Object.values(accounting)
+  if (!uncashedAmounts) return Object.values(accounting).sort((a, b) => (a.peer < b.peer ? -1 : 1))
 
   uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
     accounting[peer].uncashedAmount = new Token(uncashedAmount)
   })
 
-  return Object.values(accounting).sort((a, b) =>
+  // Return sorted by the uncashed amount first and then by the peer id
-    b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber(),
+  return Object.values(accounting).sort((a, b) => {
-  )
+    const diff = b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber()
+
+    if (diff !== 0) return diff
+
+    return a.peer < b.peer ? -1 : 1
+  })
 }
 
 export const useAccounting = (
@@ -94,12 +100,18 @@ export const useAccounting = (
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 
+  let totalUncashed: Token = new Token('0')
+  accounting?.forEach(
+    ({ uncashedAmount }) => (totalUncashed = new Token(totalUncashed.toBigNumber.plus(uncashedAmount.toBigNumber))),
+  )
+
   return {
     isLoadingUncashed,
+    totalUncashed,
     accounting,
   }
 }

src/hooks/apiHooks.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
 import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { config } from '../config'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -14,7 +15,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)
       })

src/layout/Dashboard.tsx

@@ -12,11 +12,8 @@ import { Context } from '../providers/Bee'
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     content: {
-      marginLeft: 300,
-      flexGrow: 1,
       backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
+      minHeight: '100vh',
-      paddingBottom: '65px',
     },
   }),
 )
@@ -31,20 +28,22 @@ const Dashboard = (props: Props): ReactElement => {
   const { isLoading } = useContext(Context)
 
   return (
-    <div>
+    <div style={{ display: 'flex' }}>
       <SideBar />
-      <ErrorBoundary>
+      <Container className={classes.content}>
-        <main className={classes.content}>
+        <ErrorBoundary>
-          <AlertVersion />
+          <>
-          {isLoading ? (
+            <AlertVersion />
-            <Container style={{ textAlign: 'center', padding: '50px' }}>
+            {isLoading ? (
-              <CircularProgress />
+              <div style={{ textAlign: 'center', width: '100%' }}>
-            </Container>
+                <CircularProgress />
-          ) : (
+              </div>
-            props.children
+            ) : (
-          )}
+              props.children
-        </main>
+            )}
-      </ErrorBoundary>
+          </>
+        </ErrorBoundary>
+      </Container>
     </div>
   )
 }

src/pages/accounting/AccountCard.tsx

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

src/pages/accounting/BalancesTable.tsx

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

src/pages/accounting/PeerBalances.tsx

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

src/pages/accounting/index.tsx

@@ -1,45 +1,52 @@
 import { ReactElement, useContext } from 'react'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 
-import AccountCard from '../accounting/AccountCard'
+import PeerBalances from './PeerBalances'
-import BalancesTable from './BalancesTable'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { useAccounting } from '../../hooks/accounting'
-
+import ExpandableList from '../../components/ExpandableList'
-const useStyles = makeStyles((theme: Theme) =>
+import ExpandableListItem from '../../components/ExpandableListItem'
-  createStyles({
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-    root: {
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-      width: '100%',
+import WithdrawModal from '../../containers/WithdrawModal'
-      display: 'grid',
+import DepositModal from '../../containers/DepositModal'
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
 
 export default function Accounting(): ReactElement {
-  const classes = useStyles()
-
   const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
     useContext(BeeContext)
   const { beeDebugApi } = useContext(SettingsContext)
 
-  const { accounting, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
 
   if (!status.all) return <TroubleshootConnectionCard />
 
   return (
-    <div className={classes.root}>
+    <div>
-      <AccountCard
+      <ExpandableList label="Chequebook" defaultOpen>
-        chequebookAddress={chequebookAddress}
+        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-        chequebookBalance={chequebookBalance}
+        <ExpandableListItem
-        totalsent={settlements?.totalSent}
+          label="Available Uncommitted Balance"
-        totalreceived={settlements?.totalReceived}
+          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-      />
+        />
-      <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
+        <ExpandableListItem
-      <BalancesTable accounting={accounting} isLoadingUncashed={isLoadingUncashed} />
+          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>
   )
 }

src/pages/feeds/CreateNewFeed.tsx

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

src/pages/feeds/DeleteFeedDialog.tsx

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

src/pages/feeds/ExportFeedDialog.tsx

@@ -0,0 +1,71 @@
+import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
+import { saveAs } from 'file-saver'
+import { useSnackbar } from 'notistack'
+import { ReactElement } from 'react'
+import { Clipboard, Download } from 'react-feather'
+import { Code } from '../../components/Code'
+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
+  onClose: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      maxWidth: '100%',
+    },
+  }),
+)
+
+export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  function onDownload() {
+    saveAs(
+      new Blob([identity.identity], {
+        type: 'application/json',
+      }),
+      identity.name + '.json',
+    )
+  }
+
+  function getExportText() {
+    return identity.type === 'V3' ? 'JSON file' : 'the private key string'
+  }
+
+  function onCopy() {
+    navigator.clipboard
+      .writeText(identity.identity)
+      .then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))
+  }
+
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Export</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography align="center">{`We exported the identity associated with this feed as ${getExportText()}.`}</Typography>
+      </Box>
+      <Box mb={4} className={classes.wrapper}>
+        <Code prettify>{identity.identity}</Code>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Download} onClick={onDownload}>
+          Download JSON File
+        </SwarmButton>
+        <SwarmButton iconType={Clipboard} onClick={onCopy}>
+          Copy To Clipboard
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/FeedPasswordDialog.tsx

@@ -0,0 +1,52 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useState } from 'react'
+import { Check, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+
+interface Props {
+  feedName: string
+  onProceed: (password: string) => void
+  onCancel: () => void
+  loading: boolean
+}
+
+export function FeedPasswordDialog({ feedName, onProceed, onCancel, loading }: Props): ReactElement {
+  const [password, setPassword] = useState('')
+
+  function onProceedClick() {
+    return onProceed(password)
+  }
+
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onCancel}>Update Feed</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography>Please enter the password for “{feedName}”:</Typography>
+      </Box>
+      <Box mb={4}>
+        <SwarmTextInput
+          label="Password"
+          name="password"
+          onChange={event => {
+            setPassword(event.target.value)
+          }}
+          password
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Check} onClick={onProceedClick} disabled={loading} loading={loading}>
+          Proceed
+        </SwarmButton>
+        <SwarmButton iconType={X} onClick={onCancel} cancel disabled={loading}>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/FeedSubpage.tsx

@@ -0,0 +1,90 @@
+import * as swarmCid from '@ethersphere/swarm-cid'
+import { Box } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { X } from 'react-feather'
+import { useParams, useNavigate } from 'react-router-dom'
+import { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemLink from '../../components/ExpandableListItemLink'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { UploadArea } from '../files/UploadArea'
+
+export function FeedSubpage(): ReactElement {
+  const { identities } = useContext(IdentityContext)
+  const { uuid } = useParams()
+  const { beeApi } = useContext(SettingsContext)
+  const { status } = useContext(BeeContext)
+
+  const navigate = useNavigate()
+
+  const [available, setAvailable] = useState(false)
+
+  const identity = identities.find(x => x.uuid === uuid)
+
+  useEffect(() => {
+    if (!identity || !identity.feedHash) {
+      return
+    }
+
+    try {
+      beeApi?.downloadData(identity.feedHash).then(() => setAvailable(true))
+    } catch {
+      setAvailable(false)
+    }
+  }, [beeApi, uuid, identity])
+
+  if (!identity || !status.all) {
+    navigate(ROUTES.FEEDS, { replace: true })
+
+    return <></>
+  }
+
+  function onClose() {
+    navigate(ROUTES.FEEDS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>{`${identity.name} Website`}</HistoryHeader>
+      <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
+      {available && identity.feedHash ? (
+        <>
+          <Box mb={0.25}>
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
+          </Box>
+          <Box mb={4}>
+            <ExpandableListItemLink
+              label="BZZ Link"
+              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
+            />
+          </Box>
+        </>
+      ) : (
+        <Box mb={4}>
+          <DocumentationText>
+            This feed is curently not pointing anywhere, you can update the feed to fix this. 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>
+            .
+          </DocumentationText>
+        </Box>
+      )}
+      <ExpandableListItemActions>
+        <SwarmButton iconType={X} onClick={onClose} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </div>
+  )
+}

src/pages/feeds/ImportFeedDialog.tsx

@@ -0,0 +1,113 @@
+import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useRef, useState } from 'react'
+import { Check, Upload } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Context, Identity } from '../../providers/Feeds'
+import { importIdentity, persistIdentity } from '../../utils/identity'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    textarea: {
+      width: '100%',
+      border: 0,
+      padding: theme.spacing(1),
+    },
+    displayNone: {
+      display: 'none',
+    },
+  }),
+)
+
+export function ImportFeedDialog({ onClose }: Props): ReactElement {
+  const [textareaValue, setTextareaValue] = useState('')
+  const [name, setName] = useState('')
+  const fileInputRef = useRef(null)
+
+  const { identities, setIdentities } = useContext(Context)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  async function onImport() {
+    const feed = await importIdentity(name, textareaValue)
+
+    if (feed) {
+      onFeedReady(feed)
+    } else {
+      enqueueSnackbar('Feed is not valid', { variant: 'error' })
+    }
+  }
+
+  function onUploadIdentityFile() {
+    if (fileInputRef.current) {
+      const input = fileInputRef.current as HTMLInputElement
+      input.click()
+    }
+  }
+
+  function onIdentityFileSelected(event: React.ChangeEvent<HTMLInputElement>) {
+    const fileReader = new FileReader()
+    const file = event.target?.files?.[0]
+    fileReader.onload = async event => {
+      const string = event.target?.result
+
+      if (string) {
+        const feed = await importIdentity(name, string as string)
+
+        if (feed) {
+          onFeedReady(feed)
+        } else {
+          enqueueSnackbar('Feed is not valid', { variant: 'error' })
+        }
+      }
+    }
+
+    if (file) {
+      fileReader.readAsText(file)
+    }
+  }
+
+  function onFeedReady(identity: Identity) {
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    enqueueSnackbar('Feed imported successfully', { variant: 'success' })
+    onClose()
+  }
+
+  return (
+    <SwarmDialog>
+      <input onChange={onIdentityFileSelected} ref={fileInputRef} className={classes.displayNone} type="file" />
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Import</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput label="Identity Name" name="name" onChange={event => setName(event.target.value)} />
+      </Box>
+      <Box mb={4}>
+        <TextareaAutosize
+          className={classes.textarea}
+          minRows={5}
+          onChange={event => setTextareaValue(event.target.value)}
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Upload} onClick={onUploadIdentityFile}>
+          Upload Json File
+        </SwarmButton>
+        <SwarmButton iconType={Check} onClick={onImport}>
+          Use Pasted Text
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/UpdateFeed.tsx

@@ -0,0 +1,148 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { Bookmark, X } from 'react-feather'
+import { useParams, useNavigate } from 'react-router'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SelectEvent, SwarmSelect } from '../../components/SwarmSelect'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import { persistIdentity, updateFeed } from '../../utils/identity'
+import { FeedPasswordDialog } from './FeedPasswordDialog'
+
+export default function UpdateFeed(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { stamps, refresh } = useContext(StampContext)
+  const { status } = useContext(BeeContext)
+  const { hash } = useParams()
+
+  const [selectedStamp, setSelectedStamp] = useState<string | null>(null)
+  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
+
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    refresh()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function onFeedChange(event: SelectEvent) {
+    const uuid = event.target.value
+    setSelectedIdentity(identities.find(x => x.uuid === uuid) || null)
+  }
+
+  function onStampChange(event: SelectEvent) {
+    const batchId = event.target.value as string
+    setSelectedStamp(batchId)
+  }
+
+  function onCancel() {
+    navigate(-1)
+  }
+
+  function onBeginUpdatingFeed() {
+    if (!selectedIdentity) {
+      return
+    }
+
+    if (selectedIdentity.type === 'V3') {
+      setShowPasswordPrompt(true)
+    } else {
+      onFeedUpdate(selectedIdentity)
+    }
+  }
+
+  async function onFeedUpdate(identity: Identity, password?: string) {
+    setLoading(true)
+
+    if (!beeApi || !beeDebugApi || !selectedStamp) {
+      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    try {
+      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+      persistIdentity(identities, identity)
+      setIdentities([...identities])
+      navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
+    } catch (error: unknown) {
+      setLoading(false)
+
+      const message = (typeof error === 'object' && error !== null && Reflect.get(error, 'message')) || ''
+
+      if (message.includes('possibly wrong passphrase')) {
+        enqueueSnackbar('Wrong password, please try again', { variant: 'error' })
+      } else {
+        enqueueSnackbar('Could not update feed at this time, please try again later', { variant: 'error' })
+      }
+    }
+  }
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      {showPasswordPrompt && selectedIdentity && (
+        <FeedPasswordDialog
+          feedName={selectedIdentity.name + ' Website'}
+          onCancel={() => {
+            setShowPasswordPrompt(false)
+          }}
+          onProceed={(password: string) => {
+            onFeedUpdate(selectedIdentity, password)
+          }}
+          loading={loading}
+        />
+      )}
+      <HistoryHeader>Update feed</HistoryHeader>
+      <Box mb={2}>
+        <Grid container>
+          <SwarmSelect
+            options={identities.map(x => ({ value: x.uuid, label: `${x.name} Website` }))}
+            onChange={onFeedChange}
+            label="Feed"
+          />
+        </Grid>
+      </Box>
+
+      <Box mb={4}>
+        <Grid container>
+          {stamps ? (
+            <SwarmSelect
+              options={stamps.map(x => ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}
+              onChange={onStampChange}
+              label="Stamp"
+            />
+          ) : (
+            <Typography>You need to buy a stamp first to be able to update a feed.</Typography>
+          )}
+        </Grid>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton
+          onClick={onBeginUpdatingFeed}
+          iconType={Bookmark}
+          loading={!showPasswordPrompt && loading}
+          disabled={loading || !selectedStamp || !selectedIdentity}
+        >
+          Update Selected Feed
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </div>
+  )
+}

src/pages/feeds/index.tsx

@@ -0,0 +1,116 @@
+import { Box, Typography } 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 TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { ROUTES } from '../../routes'
+import { formatEnum } from '../../utils'
+import { persistIdentitiesWithoutUpdate } from '../../utils/identity'
+import { DeleteFeedDialog } from './DeleteFeedDialog'
+import { ExportFeedDialog } from './ExportFeedDialog'
+import { ImportFeedDialog } from './ImportFeedDialog'
+
+export default function Feeds(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
+
+  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.FEEDS_NEW)
+  }
+
+  function viewFeed(uuid: string) {
+    navigate(ROUTES.FEEDS_PAGE.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)
+  }
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      {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}>
+        <Typography variant="h1">Feeds</Typography>
+      </Box>
+      <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>
+      ))}
+    </div>
+  )
+}

src/pages/files/AssetIcon.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react'
+import { StripedWrapper } from '../../components/StripedWrapper'
+
+interface Props {
+  icon: ReactElement
+}
+
+export function AssetIcon({ icon }: Props): ReactElement {
+  return <StripedWrapper>{icon}</StripedWrapper>
+}

src/pages/files/AssetPreview.tsx

@@ -0,0 +1,61 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { Web } from '@material-ui/icons'
+import { ReactElement } from 'react'
+import { File, Folder } from 'react-feather'
+import { FitImage } from '../../components/FitImage'
+import { shortenText } from '../../utils'
+import { getHumanReadableFileSize } from '../../utils/file'
+import { shortenHash } from '../../utils/hash'
+import { AssetIcon } from './AssetIcon'
+
+interface Props {
+  previewUri?: string
+  metadata?: Metadata
+}
+
+// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
+
+export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
+  let previewComponent = <File />
+  let type = metadata?.type
+
+  if (metadata?.isWebsite) {
+    previewComponent = <Web />
+    type = 'Website'
+  } else if (metadata?.type === 'folder') {
+    previewComponent = <Folder />
+    type = 'Folder'
+  }
+
+  return (
+    <Box mb={4}>
+      <Box bgcolor="background.paper">
+        <Grid container direction="row">
+          {previewUri ? (
+            <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
+          ) : (
+            <AssetIcon icon={previewComponent} />
+          )}
+          <Box p={2}>
+            {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
+            {metadata?.name && metadata?.name !== metadata?.hash && (
+              <Typography>
+                {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {shortenText(metadata?.name)}
+              </Typography>
+            )}
+            <Typography>Kind: {type}</Typography>
+            {metadata?.size ? <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography> : null}
+          </Box>
+        </Grid>
+      </Box>
+      {metadata?.type === 'folder' && metadata.count && (
+        <Box mt={0.25} p={2} bgcolor="background.paper">
+          <Grid container justifyContent="space-between" alignItems="center" direction="row">
+            <Typography variant="subtitle2">Folder content</Typography>
+            <Typography variant="subtitle2">{metadata.count} items</Typography>
+          </Grid>
+        </Box>
+      )}
+    </Box>
+  )
+}

src/pages/files/AssetSummary.tsx

@@ -0,0 +1,33 @@
+import * as swarmCid from '@ethersphere/swarm-cid'
+import { Box } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemLink from '../../components/ExpandableListItemLink'
+
+interface Props {
+  isWebsite?: boolean
+  hash: string
+}
+
+export function AssetSummary({ isWebsite, hash }: Props): ReactElement {
+  return (
+    <>
+      <Box mb={4}>
+        <ExpandableListItemKey label="Swarm hash" value={hash} />
+        <ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
+        {isWebsite && (
+          <ExpandableListItemLink
+            label="BZZ Link"
+            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
+          />
+        )}
+      </Box>
+      <DocumentationText>
+        The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
+        for testing purposes only. Learn more at{' '}
+        <a href="https://gateway.ethswarm.org/">https://gateway.ethswarm.org/</a>.
+      </DocumentationText>
+    </>
+  )
+}

src/pages/files/Download.tsx

@@ -1,66 +1,106 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Paper, InputBase, IconButton, FormHelperText } from '@material-ui/core'
-import { Search } from '@material-ui/icons'
-import { Context as SettingsContext } from '../../providers/Settings'
 import { Utils } from '@ethersphere/bee-js'
+import { ManifestJs } from '@ethersphere/manifest-js'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { History } from '../../components/History'
+import { Context, defaultUploadOrigin } from '../../providers/File'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { extractSwarmHash } from '../../utils'
+import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { FileNavigation } from './FileNavigation'
 
-const useStyles = makeStyles((theme: Theme) =>
+export function Download(): ReactElement {
-  createStyles({
+  const [loading, setLoading] = useState(false)
-    root: {
+  const { beeApi } = useContext(SettingsContext)
-      padding: theme.spacing(0.25),
+  const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
-      display: 'flex',
-      alignItems: 'center',
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1,
-    },
-    iconButton: {
-      padding: 10,
-    },
-    divider: {
-      height: 28,
-      margin: 4,
-    },
-  }),
-)
 
-export default function Files(): ReactElement {
+  const { setUploadOrigin } = useContext(Context)
-  const classes = useStyles()
-  const { apiUrl } = useContext(SettingsContext)
 
-  const [referenceInput, setReferenceInput] = useState('')
+  const { enqueueSnackbar } = useSnackbar()
-  const [referenceError, setReferenceError] = useState<Error | null>(null)
+  const navigate = useNavigate()
 
-  const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const validateChange = (value: string) => {
-    setReferenceInput(e.target.value)
+    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
+      setReferenceError(undefined)
+    } else {
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+    }
+  }
 
-    if (Utils.Hex.isHexString(e.target.value, 64) || Utils.Hex.isHexString(e.target.value, 128)) setReferenceError(null)
+  async function onSwarmIdentifier(identifier: string) {
-    else setReferenceError(new Error('Incorrect format of swarm hash'))
+    setLoading(true)
+
+    if (!beeApi) {
+      setLoading(false)
+
+      return
+    }
+
+    try {
+      const manifestJs = new ManifestJs(beeApi)
+      const feedIdentifier = await manifestJs.resolveFeedManifest(identifier)
+
+      if (feedIdentifier) {
+        identifier = feedIdentifier
+      }
+      const isManifest = await manifestJs.isManifest(identifier)
+
+      if (!isManifest) {
+        throw Error('The specified hash does not contain valid content.')
+      }
+      const indexDocument = await manifestJs.getIndexDocumentPath(identifier)
+      putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, identifier, determineHistoryName(identifier, indexDocument))
+      setUploadOrigin(defaultUploadOrigin)
+      navigate(ROUTES.HASH.replace(':hash', identifier))
+    } catch (error: unknown) {
+      let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
+
+      if (message.includes('path address not found')) {
+        message = 'The specified hash does not have an index document set.'
+      }
+
+      if (message.includes('Not Found: Not Found')) {
+        message = 'The specified hash was not found.'
+      }
+      enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function recognizeSwarmHash(value: string) {
+    if (value.length < 64) {
+      return value
+    }
+
+    const hash = extractSwarmHash(value)
+
+    if (hash) {
+      return hash
+    }
+
+    return value
   }
 
   return (
     <>
-      <Paper className={classes.root}>
+      <FileNavigation active="DOWNLOAD" />
-        <InputBase
+      <ExpandableListItemInput
-          className={classes.input}
+        label="Swarm Hash"
-          placeholder="Enter swarm reference e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
+        onConfirm={value => onSwarmIdentifier(value)}
-          inputProps={{ 'aria-label': 'retrieve file from swarm' }}
+        onChange={validateChange}
-          value={referenceInput}
+        helperText={referenceError}
-          onChange={handleReferenceChange}
+        confirmLabel={'Find'}
-        />
+        confirmLabelDisabled={Boolean(referenceError) || loading}
-        <IconButton
+        placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
-          href={`${apiUrl}/bzz/${referenceInput}`}
+        expandedOnly
-          target="_blank"
+        mapperFn={value => recognizeSwarmHash(value)}
-          disabled={referenceError !== null || !referenceInput}
+        loading={loading}
-          className={classes.iconButton}
+      />
-          aria-label="download"
+      <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
-        >
-          <Search />
-        </IconButton>
-      </Paper>
-      {referenceError && <FormHelperText error>{referenceError.message}</FormHelperText>}
     </>
   )
 }

src/pages/files/DownloadActionBar.tsx

@@ -0,0 +1,46 @@
+import { Box, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Bookmark, Download, Link, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+
+interface Props {
+  onOpen: () => void
+  onCancel: () => void
+  onDownload: () => void
+  onUpdateFeed: () => void
+  hasIndexDocument: boolean
+  loading: boolean
+}
+
+export function DownloadActionBar({
+  onOpen,
+  onCancel,
+  onDownload,
+  onUpdateFeed,
+  hasIndexDocument,
+  loading,
+}: Props): ReactElement {
+  return (
+    <Grid container justifyContent="space-between">
+      <ExpandableListItemActions>
+        {hasIndexDocument && (
+          <SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
+            View Website
+          </SwarmButton>
+        )}
+        <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
+          Download
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+      <Box mb={1} mr={1}>
+        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark} disabled={loading}>
+          Update Feed
+        </SwarmButton>
+      </Box>
+    </Grid>
+  )
+}

src/pages/files/FileNavigation.tsx

@@ -0,0 +1,41 @@
+import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ROUTES } from '../../routes'
+
+interface Props {
+  active: 'UPLOAD' | 'DOWNLOAD'
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      marginBottom: theme.spacing(4),
+    },
+    leftTab: {
+      marginRight: theme.spacing(0.5),
+    },
+    rightTab: {
+      marginLeft: theme.spacing(0.5),
+    },
+  }),
+)
+
+export function FileNavigation({ active }: Props): ReactElement {
+  const classes = useStyles()
+  const navigate = useNavigate()
+
+  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
+    navigate(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
+  }
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={active === 'UPLOAD' ? 0 : 1} onChange={onChange} variant="fullWidth">
+        <Tab className={classes.leftTab} key="UPLOAD" label="Upload" />
+        <Tab className={classes.rightTab} key="DOWNLOAD" label="Download" />
+      </Tabs>
+    </div>
+  )
+}

src/pages/files/SelectStamp.tsx

@@ -1,9 +1,5 @@
-import Button from '@material-ui/core/Button'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
 import React, { ReactElement } from 'react'
-import PeerDetailDrawer from '../../components/PeerDetail'
+import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
@@ -25,10 +21,10 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
 
   return (
     <div>
-      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+      <Button variant="contained" aria-haspopup="true" onClick={handleClick}>
         Change
       </Button>
-      <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
         {stamps.map(stamp => (
           <MenuItem
             key={stamp.batchID}
@@ -39,7 +35,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
             selected={stamp.batchID === selectedStamp?.batchID}
           >
             <ListItemIcon>{stamp.usageText}</ListItemIcon>
-            <PeerDetailDrawer peerId={stamp.batchID} />
+            <Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
           </MenuItem>
         ))}
       </Menu>

src/pages/files/Share.tsx

@@ -0,0 +1,166 @@
+import { ManifestJs } from '@ethersphere/manifest-js'
+import { Box, Typography } from '@material-ui/core'
+import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import config from '../../config'
+import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { AssetPreview } from './AssetPreview'
+import { AssetSummary } from './AssetSummary'
+import { DownloadActionBar } from './DownloadActionBar'
+
+export function Share(): ReactElement {
+  const { apiUrl, beeApi } = useContext(SettingsContext)
+  const { status } = useContext(BeeContext)
+
+  const { hash } = useParams()
+  const reference = hash! // eslint-disable-line
+
+  const navigate = useNavigate()
+  const { enqueueSnackbar } = useSnackbar()
+
+  const [loading, setLoading] = useState(true)
+  const [downloading, setDownloading] = useState(false)
+  const [swarmEntries, setSwarmEntries] = useState<Record<string, string>>({})
+  const [indexDocument, setIndexDocument] = useState<string | null>(null)
+  const [notFound, setNotFound] = useState(false)
+  const [preview, setPreview] = useState<string | undefined>(undefined)
+  const [metadata, setMetadata] = useState<Metadata | undefined>()
+
+  async function prepare() {
+    if (!beeApi || !status.all) {
+      return
+    }
+
+    const manifestJs = new ManifestJs(beeApi)
+    const isManifest = await manifestJs.isManifest(reference)
+
+    if (!isManifest) {
+      setNotFound(true)
+      enqueueSnackbar('The specified hash does not contain valid content.', { variant: 'error' })
+
+      return
+    }
+    const entries = await manifestJs.getHashes(reference)
+    const indexDocument = await manifestJs.getIndexDocumentPath(reference)
+    setIndexDocument(indexDocument)
+
+    const previewFile = entries[PREVIEW_FILE_NAME]
+
+    delete entries[META_FILE_NAME]
+    delete entries[PREVIEW_FILE_NAME]
+    setSwarmEntries(entries)
+
+    const count = Object.keys(entries).length
+
+    let metadata: Metadata | undefined = {
+      hash,
+      size: 0,
+      type: count > 1 ? 'folder' : 'unknown',
+      name: reference,
+      isWebsite: Boolean(indexDocument) && count > 1,
+      count,
+    }
+
+    try {
+      const mtdt = await beeApi.downloadFile(reference, META_FILE_NAME)
+      const remoteMetadata = mtdt.data.text()
+      metadata = { ...metadata, ...(JSON.parse(remoteMetadata) as Metadata) }
+    } catch (e) {} // eslint-disable-line no-empty
+
+    if (previewFile) {
+      setPreview(`${config.BEE_API_HOST}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
+    }
+
+    setMetadata(metadata)
+  }
+
+  function onOpen() {
+    window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+  }
+
+  function onClose() {
+    if (navigate.length > 0) {
+      // There is at least one different route in browser history that we can return to
+      navigate(-1)
+    } else {
+      // This is the first page user opened, navigate to upload page instead of going back
+      navigate(ROUTES.UPLOAD)
+    }
+  }
+
+  function onUpdateFeed() {
+    navigate(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    prepare().finally(() => {
+      setLoading(false)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reference])
+
+  async function onDownload() {
+    if (!beeApi) {
+      return
+    }
+    putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, reference, determineHistoryName(reference, indexDocument))
+    setDownloading(true)
+
+    if (Object.keys(swarmEntries).length === 1) {
+      window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
+    } else {
+      const zip = new JSZip()
+      for (const [path, hash] of Object.entries(swarmEntries)) {
+        zip.file(path, await beeApi.downloadData(hash))
+      }
+      const content = await zip.generateAsync({ type: 'blob' })
+      saveAs(content, reference + '.zip')
+    }
+    setDownloading(false)
+  }
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  if (loading) {
+    return <Loading />
+  }
+
+  if (notFound) {
+    return (
+      <>
+        <HistoryHeader>Not Found</HistoryHeader>
+        <Typography>The specified hash is not found.</Typography>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <AssetPreview metadata={metadata} previewUri={preview} />
+      </Box>
+      <Box mb={4}>
+        <AssetSummary isWebsite={metadata?.isWebsite} hash={reference} />
+      </Box>
+      <DownloadActionBar
+        onOpen={onOpen}
+        onCancel={onClose}
+        onDownload={onDownload}
+        onUpdateFeed={onUpdateFeed}
+        hasIndexDocument={Boolean(metadata?.isWebsite)}
+        loading={downloading}
+      />
+    </>
+  )
+}

src/pages/files/StampPreview.tsx

@@ -0,0 +1,21 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+import { PostageStamp } from '../stamps/PostageStamp'
+
+interface Props {
+  stamp: EnrichedPostageBatch
+}
+
+export function StampPreview({ stamp }: Props): ReactElement {
+  return (
+    <Box mb={4}>
+      <Box mb={0.25} p={2} bgcolor="background.paper">
+        <Typography variant="subtitle2">Associated postage stamp:</Typography>
+      </Box>
+      <Box bgcolor="background.paper">
+        <PostageStamp stamp={stamp} shorten={true} />
+      </Box>
+    </Box>
+  )
+}

src/pages/files/Upload.tsx

@@ -1,114 +1,212 @@
-import { Button, CircularProgress, Container } from '@material-ui/core'
+import { Box } from '@material-ui/core'
-import Avatar from '@material-ui/core/Avatar'
-import Chip from '@material-ui/core/Chip'
-import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import UploadSizeAlert from '../../components/AlertUploadSize'
+import { useNavigate } from 'react-router-dom'
-import ClipboardCopy from '../../components/ClipboardCopy'
+import { DocumentationText } from '../../components/DocumentationText'
-import PeerDetailDrawer from '../../components/PeerDetail'
+import { HistoryHeader } from '../../components/HistoryHeader'
-import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import CreatePostageStamp from '../stamps/CreatePostageStampModal'
+import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
-import SelectStamp from './SelectStamp'
+import { ROUTES } from '../../routes'
+import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
+import { persistIdentity, updateFeed } from '../../utils/identity'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
+import { PostageStampCreation } from '../stamps/PostageStampCreation'
+import { PostageStampSelector } from '../stamps/PostageStampSelector'
+import { AssetPreview } from './AssetPreview'
+import { StampPreview } from './StampPreview'
+import { UploadActionBar } from './UploadActionBar'
+import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+export function Upload(): ReactElement {
+  const [step, setStep] = useState(0)
+  const [stampMode, setStampMode] = useState<'SELECT' | 'BUY'>('SELECT')
+  const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
+  const [isUploading, setUploading] = useState(false)
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
-export default function Files(): ReactElement {
+  const { refresh } = useContext(StampsContext)
-  const [dropzoneKey, setDropzoneKey] = useState(0)
-  const [file, setFile] = useState<File | null>(null)
-  const [uploadReference, setUploadReference] = useState('')
-  const [isUploadingFile, setIsUploadingFile] = useState(false)
-
-  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
-
-  const { isLoading, error, stamps } = useContext(Context)
   const { beeApi } = useContext(SettingsContext)
+  const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
+
   const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
 
-  // Choose a postage stamp that has the lowest usage
   useEffect(() => {
-    if (!selectedStamp && stamps && stamps.length > 0) {
+    refresh()
-      const stamp = stamps.reduce((prev, curr) => {
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-        if (curr.usage < prev.usage) return curr
 
-        return prev
+  if (!status.all) return <TroubleshootConnectionCard />
-      }, stamps[0])
 
-      setSelectedStamp(stamp)
+  if (!files.length) {
+    setFiles([])
+    navigate(ROUTES.UPLOAD, { replace: true })
+
+    return <></>
+  }
+
+  const identity = uploadOrigin.uuid ? identities.find(x => x.uuid === uploadOrigin.uuid) : null
+
+  const onUpload = () => {
+    if (uploadOrigin.origin === 'UPLOAD') {
+      uploadFiles()
+    } else {
+      if ((identity as Identity).type === 'PRIVATE_KEY') {
+        uploadFiles()
+      } else {
+        setShowPasswordPrompt(true)
+      }
     }
-  }, [isLoading, error, stamps, selectedStamp])
+  }
 
-  const uploadFile = () => {
+  const uploadFiles = (password?: string) => {
-    if (file === null || selectedStamp === null) return
+    if (!beeApi || !files.length || !stamp || !metadata) {
+      return
+    }
 
-    if (!beeApi) return
+    let fls = files.map(packageFile) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
+    let indexDocument: string | undefined = undefined // This means we assume it's folder
 
-    setIsUploadingFile(true)
+    if (files.length === 1) indexDocument = files[0].name
-    beeApi
+    else if (files.length > 1) {
-      .uploadFile(selectedStamp.batchID, file)
+      const idx = detectIndexHtml(files)
-      .then(hash => {
+
-        window.setTimeout(() => {
+      // This is a website
-          setFile(null)
+      if (idx) {
-          setUploadReference(hash)
+        // The website is in some directory, remove it
-          setDropzoneKey(dropzoneKey + 1)
+        if (idx.commonPrefix) {
-        }, 0)
+          const substrStart = idx.commonPrefix.length
+          indexDocument = idx.indexPath.substr(substrStart)
+          fls = fls.map(f => {
+            const path = (f.path as string).substr(substrStart)
+
+            return { ...f, path, webkitRelativePath: path, fullPath: path }
+          })
+        } else {
+          // The website is not packed in a directory
+          indexDocument = idx.indexPath
+        }
+      }
+    }
+    const lastModified = files[0].lastModified
+
+    // We want to store only some metadata
+    const mtd: SwarmMetadata = {
+      name: metadata.name,
+      size: metadata.size,
+    }
+
+    // Type of the file only makes sense for a single file
+    if (files.length === 1) mtd.type = metadata.type
+
+    const metafile = new File([JSON.stringify(mtd)], META_FILE_NAME, {
+      type: 'application/json',
+      lastModified,
+    })
+    fls.push(packageFile(metafile))
+
+    if (previewBlob) {
+      const previewFile = new File([previewBlob], PREVIEW_FILE_NAME, {
+        type: 'image/jpeg',
+        lastModified,
       })
-      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
+      fls.push(packageFile(previewFile))
-      .finally(() => {
+    }
-        setIsUploadingFile(false)
+
+    setUploading(true)
+
+    beeApi
+      .uploadFiles(stamp.batchID, fls, { indexDocument })
+      .then(hash => {
+        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
+
+        if (uploadOrigin.origin === 'UPLOAD') {
+          navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
+        } else {
+          updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
+            persistIdentity(identities, identity as Identity)
+            setIdentities([...identities])
+            navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
+          })
+        }
+      })
+      .catch(e => {
+        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
+        setUploading(false)
       })
   }
 
-  const handleChange = (files?: File[]) => {
+  const reset = () => {
-    if (files) {
+    setStep(0)
-      setFile(files[0])
+    setFiles([])
-    }
+    setStamp(null)
+    setUploading(false)
+  }
+
+  const onFeedPasswordGiven = (password: string) => {
+    uploadFiles(password)
   }
 
   return (
-    <div>
+    <>
-      <div>
+      {showPasswordPrompt && (
-        <DropzoneArea
+        <FeedPasswordDialog
-          key={'dropzone-' + dropzoneKey}
+          loading={isUploading}
-          onChange={handleChange}
+          feedName={(identity as Identity).name}
-          filesLimit={1}
+          onCancel={() => setShowPasswordPrompt(false)}
-          maxFileSize={MAX_FILE_SIZE}
+          onProceed={onFeedPasswordGiven}
         />
-        <div style={{ marginTop: '15px' }}>
+      )}
-          {selectedStamp && (
+      {identity && <HistoryHeader>{`Update "${identity.name}"`}</HistoryHeader>}
-            <div style={{ display: 'flex' }}>
+      {!identity && <HistoryHeader>Upload</HistoryHeader>}
-              <small>
+      <Box mb={4}>
-                with Postage Stamp{' '}
+        <ProgressIndicator steps={['Preview', 'Add postage stamp', 'Upload to node']} index={step} />
-                <Chip
+      </Box>
-                  avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
+      {(step === 0 || step === 2) && <AssetPreview metadata={metadata} previewUri={previewUri} />}
-                  label={<PeerDetailDrawer peerId={selectedStamp.batchID} characterLength={6} />}
+      {step === 1 && (
-                  deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
+        <>
-                  onDelete={() => {} /* eslint-disable-line*/}
+          <Box mb={2}>
-                  variant="outlined"
+            {stampMode === 'SELECT' ? (
-                />
+              <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
-              </small>
+            ) : (
-              <SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />
+              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
-            </div>
+            )}
-          )}
+          </Box>
-          {!selectedStamp && <CreatePostageStamp />}
+          <Box mb={4}>
-          <Button disabled={!file && isUploadingFile && !selectedStamp} onClick={() => uploadFile()}>
+            <DocumentationText>
-            Upload
+              Please refer to the{' '}
-          </Button>
+              <a
-          {file && <UploadSizeAlert file={file} />}
+                href="https://docs.ethswarm.org/debug-api/#tag/Postage-Stamps/paths/~1stamps~1{amount}~1{depth}/post"
-          {isUploadingFile && (
+                target="_blank"
-            <Container style={{ textAlign: 'center', padding: '50px' }}>
+                rel="noreferrer"
-              <CircularProgress />
+              >
-            </Container>
+                official Bee documentation
-          )}
+              </a>{' '}
-          {uploadReference && (
+              to understand these values.
-            <div style={{ marginBottom: '15px', display: 'flex' }}>
+            </DocumentationText>
-              <span>{uploadReference}</span>
+          </Box>
-              <ClipboardCopy value={uploadReference} />
+        </>
-            </div>
+      )}
-          )}
+      {step === 2 && stamp && <StampPreview stamp={stamp} />}
-        </div>
+      <UploadActionBar
-      </div>
+        step={step}
-    </div>
+        onCancel={reset}
+        onGoBack={() => setStep(step => step - 1)}
+        onProceed={() => setStep(step => step + 1)}
+        onUpload={onUpload}
+        isUploading={isUploading}
+        hasStamp={Boolean(stamp)}
+        uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
+        stampMode={stampMode}
+        setStampMode={setStampMode}
+      />
+    </>
   )
 }

src/pages/files/UploadActionBar.tsx

@@ -0,0 +1,88 @@
+import { Box, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+
+interface Props {
+  step: number
+  onUpload: () => void
+  onCancel: () => void
+  onGoBack: () => void
+  onProceed: () => void
+  isUploading: boolean
+  hasStamp: boolean
+  uploadLabel: string
+  stampMode: 'BUY' | 'SELECT'
+  setStampMode: (mode: 'BUY' | 'SELECT') => void
+}
+
+export function UploadActionBar({
+  step,
+  onUpload,
+  onCancel,
+  onGoBack,
+  onProceed,
+  isUploading,
+  hasStamp,
+  uploadLabel,
+  stampMode,
+  setStampMode,
+}: Props): ReactElement {
+  if (step === 0) {
+    return (
+      <>
+        <Box mb={1}>
+          <ExpandableListItemActions>
+            <SwarmButton onClick={onProceed} iconType={Layers}>
+              Add Postage Stamp
+            </SwarmButton>
+            <SwarmButton onClick={onCancel} iconType={X} cancel>
+              Cancel
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
+        <DocumentationText>You need a postage stamp to upload.</DocumentationText>
+      </>
+    )
+  }
+
+  if (step === 1) {
+    return (
+      <Grid container direction="row" justifyContent="space-between">
+        <ExpandableListItemActions>
+          {stampMode === 'SELECT' && (
+            <SwarmButton onClick={onProceed} iconType={Check} disabled={!hasStamp}>
+              Proceed With Selected Stamp
+            </SwarmButton>
+          )}
+          <SwarmButton onClick={onGoBack} iconType={ArrowLeft} cancel>
+            Back To Preview
+          </SwarmButton>
+        </ExpandableListItemActions>
+        <SwarmButton
+          onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
+          iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+        >
+          {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+        </SwarmButton>
+      </Grid>
+    )
+  }
+
+  if (step === 2) {
+    return (
+      <ExpandableListItemActions>
+        <SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
+          {uploadLabel}
+        </SwarmButton>
+        <SwarmButton onClick={onGoBack} iconType={ArrowLeft} disabled={isUploading} cancel>
+          Change Postage Stamp
+        </SwarmButton>
+      </ExpandableListItemActions>
+    )
+  }
+
+  return <></>
+}

src/pages/files/UploadArea.tsx

@@ -0,0 +1,153 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { DropzoneArea } from 'material-ui-dropzone'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import { useNavigate } from 'react-router-dom'
+import { DocumentationText } from '../../components/DocumentationText'
+import { SwarmButton } from '../../components/SwarmButton'
+import { Context, UploadOrigin } from '../../providers/File'
+import { ROUTES } from '../../routes'
+import { detectIndexHtml } from '../../utils/file'
+
+interface Props {
+  uploadOrigin: UploadOrigin
+  showHelp: boolean
+}
+
+const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    areaWrapper: { position: 'relative', marginBottom: theme.spacing(2) },
+    dropzone: {
+      background: theme.palette.background.default,
+      outline: 'none',
+      color: 'transparent',
+      zIndex: 1,
+      '& svg': {
+        opacity: 0,
+      },
+    },
+    buttonWrapper: {
+      top: '0',
+      left: '0',
+      position: 'absolute',
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(0.5),
+      zIndex: 2,
+    },
+  }),
+)
+
+export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
+  const { setFiles, setUploadOrigin } = useContext(Context)
+  const classes = useStyles()
+  const navigate = useNavigate()
+  const { enqueueSnackbar } = useSnackbar()
+  const [strictWebsiteMode, setStrictWebsiteMode] = useState(false)
+  const [version, setVersion] = useState(0)
+
+  const getDropzoneInputDomElement = () => document.querySelector('.MuiDropzoneArea-root input') as HTMLInputElement
+
+  const onUploadCollectionClick = () => {
+    const element = getDropzoneInputDomElement()
+
+    if (element) {
+      element.setAttribute('directory', '')
+      element.setAttribute('webkitdirectory', '')
+      element.setAttribute('mozdirectory', '')
+      element.click()
+    }
+  }
+
+  const onUploadWebsiteClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(true)
+  }
+
+  const onUploadFolderClick = () => {
+    onUploadCollectionClick()
+    setStrictWebsiteMode(false)
+  }
+
+  const onUploadFileClick = () => {
+    const element = getDropzoneInputDomElement()
+
+    if (element) {
+      element.removeAttribute('directory')
+      element.removeAttribute('webkitdirectory')
+      element.removeAttribute('mozdirectory')
+      element.click()
+    }
+  }
+
+  const resetComponentOnAddingInvalidContent = () => {
+    setTimeout(() => {
+      setVersion(x => x + 1)
+      setFiles([])
+    }, 0)
+  }
+
+  const handleChange = (files?: File[]) => {
+    if (files) {
+      const FilePaths = files as FilePath[]
+      const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(FilePaths) || undefined
+
+      if (files.length && strictWebsiteMode && !indexDocument) {
+        enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
+          variant: 'error',
+        })
+        resetComponentOnAddingInvalidContent()
+
+        return
+      }
+
+      setFiles(FilePaths)
+
+      if (files.length) {
+        setUploadOrigin(uploadOrigin)
+        navigate(ROUTES.UPLOAD_IN_PROGRESS)
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className={classes.areaWrapper}>
+        <DropzoneArea
+          key={version}
+          dropzoneClass={classes.dropzone}
+          onChange={handleChange}
+          filesLimit={1e9}
+          maxFileSize={MAX_FILE_SIZE}
+          showPreviews={false}
+        />
+        <div className={classes.buttonWrapper}>
+          <SwarmButton className={classes.button} onClick={onUploadFileClick} iconType={FilePlus}>
+            Add File
+          </SwarmButton>
+          <SwarmButton className={classes.button} onClick={onUploadFolderClick} iconType={FolderPlus}>
+            Add Folder
+          </SwarmButton>
+          <SwarmButton className={classes.button} onClick={onUploadWebsiteClick} iconType={PlusCircle}>
+            Add Website
+          </SwarmButton>
+        </div>
+      </div>
+      {showHelp && (
+        <DocumentationText>
+          You can click the buttons above or simply drag and drop to add a file or folder. To upload a website to Swarm,
+          make sure that your folder contains an “index.html” file.
+        </DocumentationText>
+      )}
+    </>
+  )
+}

src/pages/files/UploadLander.tsx

@@ -0,0 +1,22 @@
+import { ReactElement, useContext } from 'react'
+import { History } from '../../components/History'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { defaultUploadOrigin } from '../../providers/File'
+import { HISTORY_KEYS } from '../../utils/local-storage'
+import { FileNavigation } from './FileNavigation'
+import { UploadArea } from './UploadArea'
+
+export function UploadLander(): ReactElement {
+  const { status } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <>
+      <FileNavigation active="UPLOAD" />
+      <UploadArea showHelp={true} uploadOrigin={defaultUploadOrigin} />
+      <History title="Upload History" localStorageKey={HISTORY_KEYS.UPLOAD_HISTORY} />
+    </>
+  )
+}

src/pages/files/index.tsx

@@ -1,32 +0,0 @@
-import { ReactElement, useContext } from 'react'
-
-import { Container } from '@material-ui/core'
-
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context } from '../../providers/Bee'
-import Download from './Download'
-import Upload from './Upload'
-import TabsContainer from '../../components/TabsContainer'
-
-export default function Files(): ReactElement {
-  const { status } = useContext(Context)
-
-  if (!status.all) return <TroubleshootConnectionCard />
-
-  return (
-    <Container maxWidth="sm">
-      <TabsContainer
-        values={[
-          {
-            label: 'download',
-            component: <Download />,
-          },
-          {
-            label: 'upload',
-            component: <Upload />,
-          },
-        ]}
-      />
-    </Container>
-  )
-}

src/pages/info/StatusCard.tsx

@@ -1,113 +0,0 @@
-import { ReactElement, useState } from 'react'
-import { Link } from 'react-router-dom'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
-import { ArrowRight, ArrowDropUp } from '@material-ui/icons/'
-import { NodeAddresses, Topology } from '@ethersphere/bee-js'
-import { ROUTES } from '../../routes'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flex: '1 1 auto',
-      flexDirection: 'column',
-    },
-    status: {
-      color: '#2145a0',
-      backgroundColor: '#e1effe',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  nodeTopology: Topology | null
-  userBeeVersion?: string
-  isLatestBeeVersion: boolean
-  isOk: boolean
-  latestUrl: string
-}
-
-function StatusCard({
-  userBeeVersion,
-  nodeAddresses,
-  nodeTopology,
-  isLatestBeeVersion,
-  latestUrl,
-}: Props): ReactElement | null {
-  const classes = useStyles()
-
-  const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
-
-  return (
-    <Card>
-      <CardContent className={classes.root}>
-        <>
-          <div style={{ marginBottom: '20px' }}>
-            <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
-            <span style={{ marginRight: '20px' }}>
-              <span>Connected Peers: </span>
-              <Link to={ROUTES.PEERS}>{nodeTopology?.connected}</Link>
-            </span>
-          </div>
-          <div>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>AGENT: </span>
-              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-                Bee
-              </a>{' '}
-              <span>{userBeeVersion || '-'}</span>
-              {isLatestBeeVersion ? (
-                <Chip
-                  style={{ marginLeft: '7px', color: '#2145a0' }}
-                  size="small"
-                  label="latest"
-                  className={classes.status}
-                />
-              ) : (
-                <Button size="small" variant="outlined" href={latestUrl}>
-                  update
-                </Button>
-              )}
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>PUBLIC KEY: </span>
-              <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>PSS PUBLIC KEY: </span>
-              <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>OVERLAY ADDRESS (PEER ID): </span>
-              <span>{nodeAddresses?.overlay ? nodeAddresses.overlay : '-'}</span>
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
-                <Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
-                  {underlayAddressesVisible ? (
-                    <ArrowDropUp style={{ fontSize: '12px' }} />
-                  ) : (
-                    <ArrowRight style={{ fontSize: '12px' }} />
-                  )}
-                  <span>Underlay Addresses</span>
-                </Button>
-              </Typography>
-              {underlayAddressesVisible && (
-                <div>
-                  {nodeAddresses?.underlay.map(item => (
-                    <li key={item}>{item}</li>
-                  ))}
-                </div>
-              )}
-            </Typography>
-          </div>
-        </>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default StatusCard

src/pages/info/index.tsx

@@ -1,24 +1,14 @@
 import { ReactElement, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Button } from '@material-ui/core'
 
-import StatusCard from './StatusCard'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
-
+import ExpandableList from '../../components/ExpandableList'
-const useStyles = makeStyles((theme: Theme) =>
+import ExpandableListItem from '../../components/ExpandableListItem'
-  createStyles({
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-    root: {
+import TopologyStats from '../../components/TopologyStats'
-      width: '100%',
-      display: 'grid',
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
 
 export default function Status(): ReactElement {
-  const classes = useStyles()
-
   const {
     status,
     latestUserVersion,
@@ -32,18 +22,39 @@ export default function Status(): ReactElement {
   if (!status.all) return <TroubleshootConnectionCard />
 
   return (
-    <div className={classes.root}>
+    <div>
-      <StatusCard
+      <ExpandableList label="Bee Node" defaultOpen>
-        userBeeVersion={latestUserVersion}
+        <ExpandableListItem
-        isLatestBeeVersion={isLatestBeeVersion}
+          label="Agent"
-        isOk={status.all}
+          value={
-        nodeTopology={topology}
+            <div>
-        latestUrl={latestBeeVersionUrl}
+              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-        nodeAddresses={nodeAddresses}
+                Bee
-      />
+              </a>
-      {nodeAddresses && chequebookAddress && (
+              {` ${latestUserVersion || '-'} `}
-        <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
+              <Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
-      )}
+                {isLatestBeeVersion ? 'latest' : 'update'}
+              </Button>
+            </div>
+          }
+        />
+        <ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
+        <ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
+        <ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
+
+        <ExpandableList level={1} label="Underlay addresses">
+          {nodeAddresses?.underlay.map(addr => (
+            <ExpandableListItem key={addr} value={addr} />
+          ))}
+        </ExpandableList>
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <ExpandableList label="Connectivity" defaultOpen>
+        <TopologyStats topology={topology} />
+      </ExpandableList>
     </div>
   )
 }

src/pages/peers/PeerTable.tsx

@@ -1,95 +0,0 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  TableHead,
-  Button,
-  Paper,
-  Tooltip,
-  CircularProgress,
-} from '@material-ui/core'
-import { Autorenew } from '@material-ui/icons'
-
-import { Context as SettingsContext } from '../../providers/Settings'
-import type { Peer } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-})
-
-interface Props {
-  peers: Peer[] | null
-}
-
-interface PeerLatency {
-  rtt: string
-  loading: boolean
-}
-
-function getPingState(peerLatency: Record<string, PeerLatency>, peer: Peer): ReactElement {
-  if (peerLatency[peer.address]?.loading) return <CircularProgress size={20} />
-
-  if (peerLatency[peer.address]?.rtt) return <span>{peerLatency[peer.address]?.rtt}</span>
-
-  return <Autorenew />
-}
-
-function PeerTable(props: Props): ReactElement {
-  const classes = useStyles()
-  const { beeDebugApi } = useContext(SettingsContext)
-
-  const [peerLatency, setPeerLatency] = useState<Record<string, PeerLatency>>({})
-
-  const pingPeer = (peerId: string) => {
-    setPeerLatency(prevPeerLatency => ({ ...prevPeerLatency, [peerId]: { rtt: '', loading: true } }))
-    beeDebugApi
-      ?.pingPeer(peerId)
-      .then(res => {
-        setPeerLatency(prevPeerLatency => ({ ...prevPeerLatency, [peerId]: { rtt: res.rtt, loading: false } }))
-      })
-      .catch(() => {
-        setPeerLatency(prevPeerLatency => ({ ...prevPeerLatency, [peerId]: { rtt: 'error', loading: false } }))
-      })
-  }
-
-  return (
-    <div>
-      <TableContainer component={Paper}>
-        <Table className={classes.table}>
-          <TableHead>
-            <TableRow>
-              <TableCell>Index</TableCell>
-              <TableCell>Peer Id</TableCell>
-              <TableCell align="right">Actions</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.peers?.map((peer: Peer, idx: number) => (
-              <TableRow key={peer.address}>
-                <TableCell component="th" scope="row">
-                  {idx + 1}
-                </TableCell>
-                <TableCell>{peer.address}</TableCell>
-                <TableCell align="right">
-                  <Tooltip title="Ping node">
-                    <Button color="primary" onClick={() => pingPeer(peer.address)}>
-                      {getPingState(peerLatency, peer)}
-                    </Button>
-                  </Tooltip>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  )
-}
-
-export default PeerTable

src/pages/peers/index.tsx

@@ -1,21 +0,0 @@
-import PeerTable from './PeerTable'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-
-import { Context } from '../../providers/Bee'
-import TopologyStats from '../../components/TopologyStats'
-import { ReactElement, useContext } from 'react'
-
-export default function Peers(): ReactElement {
-  const { topology, peers, status } = useContext(Context)
-
-  if (!status.all) {
-    return <TroubleshootConnectionCard />
-  }
-
-  return (
-    <>
-      <TopologyStats topology={topology} />
-      <PeerTable peers={peers} />
-    </>
-  )
-}

src/pages/settings/index.tsx

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

src/pages/stamps/CreatePostageStampModal.tsx

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

src/pages/stamps/CreatePostageStampPage.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ROUTES } from '../../routes'
+import { PostageStampCreation } from './PostageStampCreation'
+
+export function CreatePostageStampPage(): ReactElement {
+  const navigate = useNavigate()
+
+  function onFinished() {
+    navigate(ROUTES.STAMPS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Buy new postage stamp</HistoryHeader>
+      <PostageStampCreation onFinished={onFinished} />
+    </div>
+  )
+}

src/pages/stamps/PostageStamp.tsx

@@ -0,0 +1,20 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Capacity } from '../../components/Capacity'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  stamp: EnrichedPostageBatch
+  shorten?: boolean
+}
+
+export function PostageStamp({ stamp, shorten }: Props): ReactElement {
+  return (
+    <Box p={2} width="100%">
+      <Grid container justifyContent="space-between" alignItems="center" direction="row">
+        <Typography variant="subtitle2">{shorten ? stamp.batchID.slice(0, 8) : stamp.batchID}</Typography>
+        <Capacity width="100px" usage={stamp.usage} />
+      </Grid>
+    </Box>
+  )
+}

src/pages/stamps/PostageStampCreation.tsx

@@ -0,0 +1,164 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import BigNumber from 'bignumber.js'
+import { Form, Formik, FormikHelpers } from 'formik'
+import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext } from 'react'
+import { Check } from 'react-feather'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampsContext } from '../../providers/Stamps'
+import {
+  calculateStampPrice,
+  convertAmountToSeconds,
+  convertDepthToBytes,
+  formatBzz,
+  secondsToTimeString,
+} from '../../utils'
+import { getHumanReadableFileSize } from '../../utils/file'
+
+interface FormValues {
+  depth?: string
+  amount?: string
+  label?: string
+}
+type FormErrors = Partial<FormValues>
+const initialFormValues: FormValues = {
+  depth: '',
+  amount: '',
+  label: '',
+}
+
+interface Props {
+  onFinished: () => void
+}
+
+export function PostageStampCreation({ onFinished }: Props): ReactElement {
+  const { chainState } = useContext(BeeContext)
+  const { refresh } = useContext(StampsContext)
+  const { beeDebugApi } = useContext(SettingsContext)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  function getFileSize(depth: number): string {
+    if (isNaN(depth) || depth < 17 || depth > 255) {
+      return '-'
+    }
+
+    return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
+  }
+
+  function getTtl(amount: number): string {
+    if (isNaN(amount) || amount <= 0) {
+      return '-'
+    }
+
+    return secondsToTimeString(convertAmountToSeconds(amount))
+  }
+
+  function getPrice(depth: number, amount: number): string {
+    const hasInvalidInput = isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
+    const isCurrentPriceAvailable = chainState && chainState.currentPrice
+
+    if (hasInvalidInput || !isCurrentPriceAvailable) {
+      return '-'
+    }
+
+    const price = calculateStampPrice(depth, amount, chainState.currentPrice)
+
+    return `${formatBzz(price)} BZZ`
+  }
+
+  return (
+    <Formik
+      initialValues={initialFormValues}
+      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
+        try {
+          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+          if (!values.depth || !values.amount) return
+
+          if (!beeDebugApi) return
+
+          const amount = BigInt(values.amount)
+          const depth = Number.parseInt(values.depth)
+          const options = values.label ? { label: values.label } : undefined
+          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+          actions.resetForm()
+          await refresh()
+          onFinished()
+        } catch (e) {
+          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+          actions.setSubmitting(false)
+        }
+      }}
+      validate={(values: FormValues) => {
+        const errors: FormErrors = {}
+
+        // Depth
+        if (!values.depth) errors.depth = 'Required field'
+        else {
+          const depth = new BigNumber(values.depth)
+
+          if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
+          else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
+          else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
+        }
+
+        // Amount
+        if (!values.amount) errors.amount = 'Required field'
+        else {
+          const amount = new BigNumber(values.amount)
+
+          if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
+          else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
+        }
+
+        // Label
+        if (values.label && !/^[0-9a-z]*$/i.test(values.label)) errors.label = 'Label must be an alphanumeric string'
+
+        return errors
+      }}
+    >
+      {({ submitForm, isValid, isSubmitting, values }) => (
+        <Form>
+          <Box mb={2}>
+            <SwarmTextInput name="depth" label="Depth" formik />
+            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+              <Grid container justifyContent="space-between">
+                <Typography>Corresponding file size</Typography>
+                <Typography>{getFileSize(parseInt(values.depth || '0', 10))}</Typography>
+              </Grid>
+            </Box>
+          </Box>
+          <Box mb={2}>
+            <SwarmTextInput name="amount" label="Amount" formik />
+            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+              <Grid container justifyContent="space-between">
+                <Typography>Corresponding TTL (Time to live)</Typography>
+                <Typography>{getTtl(parseInt(values.amount || '0', 10))}</Typography>
+              </Grid>
+            </Box>
+          </Box>
+          <Box mb={2}>
+            <SwarmTextInput name="label" label="Label" optional formik />
+          </Box>
+          <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+            <Grid container justifyContent="space-between">
+              <Typography>Indicative Price</Typography>
+              <Typography>{getPrice(parseInt(values.depth || '0', 10), parseInt(values.amount || '0', 10))}</Typography>
+            </Grid>
+          </Box>
+          <SwarmButton
+            disabled={isSubmitting || !isValid || !values.amount || !values.depth}
+            onClick={submitForm}
+            iconType={Check}
+            loading={isSubmitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Form>
+      )}
+    </Formik>
+  )
+}

src/pages/stamps/PostageStampSelector.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement, useContext } from 'react'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  onSelect: (stamp: EnrichedPostageBatch) => void
+  defaultValue?: string
+}
+
+export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactElement {
+  const { stamps } = useContext(Context)
+
+  function onChange(stampId: string) {
+    if (!stamps) {
+      return
+    }
+    const stamp = stamps.find(x => x.batchID === stampId)
+
+    if (stamp) {
+      onSelect(stamp)
+    }
+  }
+
+  return (
+    <SwarmSelect
+      options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
+      onChange={event => onChange(event.target.value as string)}
+      defaultValue={defaultValue}
+    />
+  )
+}