chore: release 0.14.0 (#319)

* feat: add hook that detects if the bee-dashboard is run withing bee-desktop

* chore: make the URL configurable

* feat: remove error and instead return false

* test: add testing with mockserver

.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,40 @@ jobs:
         env:
           CI: true
 
+      - name: Dependency check
+        run: npm run depcheck
+
+      - name: Types check
+        run: npm run check:types
+
+      - name: Types build
+        run: npm run compile:types
+
+      - name: Update supported Bee action
+        uses: ethersphere/update-supported-bee-action@v1
+        if: github.ref == 'refs/heads/master'
+        with:
+          token: ${{ secrets.GHA_PAT_BASIC }}
+
       - name: Build
         run: npm run build
+
+      - name: Build Component
+        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/swarm-actions/pr-preview@v0
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          token: ${{ secrets.GHA_PAT_BASIC }}
+          error-document: index.html
+          headers: "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"
+
+      - name: Upload to testnet
+        uses: ethersphere/swarm-actions/upload-dir@v0
+        continue-on-error: true
+        with:
+          index-document: index.html
+          error-document: index.html
+          dir: ./build
+          bee-url: https://api.gateway.testnet.ethswarm.org

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

.github/workflows/release_github.yaml

@@ -14,7 +14,7 @@ jobs:
       - uses: GoogleCloudPlatform/release-please-action@v2
         id: release
         with:
-          token: ${{ secrets.REPO_GHA_PAT }}
+          token: ${{ secrets.GHA_PAT_BASIC }}
           release-type: node
           package-name: bee-dashboard
           bump-minor-pre-major: true

.gitignore

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

CHANGELOG.md

@@ -1,5 +1,86 @@
 # Changelog
 
+## [0.14.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.13.0...v0.14.0) (2022-04-14)
+
+
+### Features
+
+* add hook that detects if the bee-dashboard is run within bee-desktop ([#334](https://www.github.com/ethersphere/bee-dashboard/issues/334)) ([eb9e309](https://www.github.com/ethersphere/bee-dashboard/commit/eb9e309c8bc0327d137f190d6873618cb215fece))
+* detect bee mode and enable/disable status checks accordingly ([#318](https://www.github.com/ethersphere/bee-dashboard/issues/318)) ([8baecb7](https://www.github.com/ethersphere/bee-dashboard/commit/8baecb783f1574af1cd1f17738efae4b0ac9f0c8))
+* optional status checks (e.g. connected peers > 0 or funded chequebook) ([#331](https://www.github.com/ethersphere/bee-dashboard/issues/331)) ([5d0fbf7](https://www.github.com/ethersphere/bee-dashboard/commit/5d0fbf705dfed6738980c751a9654199d60a3787))
+
+
+### Bug Fixes
+
+* postage stamp price and TTL calculation ([#305](https://www.github.com/ethersphere/bee-dashboard/issues/305)) ([d0b3f1a](https://www.github.com/ethersphere/bee-dashboard/commit/d0b3f1abee7ea017bdd05954d5fadafb67365efd))
+
+## [0.13.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.12.0...v0.13.0) (2022-01-28)
+
+
+### Features
+
+* add hash based routing ([#287](https://www.github.com/ethersphere/bee-dashboard/issues/287)) ([9ee1c91](https://www.github.com/ethersphere/bee-dashboard/commit/9ee1c9107bb08d1838044f39e4d0dd5817c8f283))
+* add metadata and preview ([#292](https://www.github.com/ethersphere/bee-dashboard/issues/292)) ([f401314](https://www.github.com/ethersphere/bee-dashboard/commit/f4013142afdb407e699eff9587921e23c971f1db))
+
+
+### Bug Fixes
+
+* clean up spinner and disabled state on download page ([#294](https://www.github.com/ethersphere/bee-dashboard/issues/294)) ([a406e0f](https://www.github.com/ethersphere/bee-dashboard/commit/a406e0fc014991fcbaca230f27f41cd071d8a863))
+* correct folder name when uploading multiple files or mix of files & directories ([#291](https://www.github.com/ethersphere/bee-dashboard/issues/291)) ([d878747](https://www.github.com/ethersphere/bee-dashboard/commit/d8787476acf068be6609a77b1fadb2f61d0fd502))
+* disable feeds page when disconnected ([#293](https://www.github.com/ethersphere/bee-dashboard/issues/293)) ([1310deb](https://www.github.com/ethersphere/bee-dashboard/commit/1310deb17aec91f368f99974aaa245abb0a3e201))
+* do not print size and name when meta is unknown ([#297](https://www.github.com/ethersphere/bee-dashboard/issues/297)) ([7880c80](https://www.github.com/ethersphere/bee-dashboard/commit/7880c802aea6b0830ca52b47b88540b8df5888cc))
+* get current price from chain state ([#286](https://www.github.com/ethersphere/bee-dashboard/issues/286)) ([bc82e67](https://www.github.com/ethersphere/bee-dashboard/commit/bc82e6756154b33d01796a6e66e51dcfa1495338))
+
+## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)
+
+
+### Features
+
+* add identity and feed management ([#272](https://www.github.com/ethersphere/bee-dashboard/issues/272)) ([25b65c3](https://www.github.com/ethersphere/bee-dashboard/commit/25b65c3fb770b09c685fe66596e372dfbb616625))
+
+### [0.11.2](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.1...v0.11.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* **ci:** add lib folder to the package.json files prop ([#270](https://www.github.com/ethersphere/bee-dashboard/issues/270)) ([5ac0f01](https://www.github.com/ethersphere/bee-dashboard/commit/5ac0f01bf50ee23b474ab9c8d61c6af418544083))
+
+### [0.11.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.0...v0.11.1) (2021-12-14)
+
+
+### Bug Fixes
+
+* typo in publish script ([#268](https://www.github.com/ethersphere/bee-dashboard/issues/268)) ([c1e77bf](https://www.github.com/ethersphere/bee-dashboard/commit/c1e77bfc0d3ac442d6bacec7402f576a6422927e))
+
+## [0.11.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.10.0...v0.11.0) (2021-12-14)
+
+
+### Features
+
+* modularisation ([#244](https://www.github.com/ethersphere/bee-dashboard/issues/244)) ([2a13da1](https://www.github.com/ethersphere/bee-dashboard/commit/2a13da1a6c5925946d22666a84f975cec87df115))
+
+
+### Bug Fixes
+
+* **build:** bee-dashboard component building ([#267](https://www.github.com/ethersphere/bee-dashboard/issues/267)) ([153b007](https://www.github.com/ethersphere/bee-dashboard/commit/153b007387618e34e1d5dc7fd82d49722783e757))
+
+## [0.10.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.9.0...v0.10.0) (2021-12-07)
+
+
+### Features
+
+* add website and folder upload and download ([#260](https://www.github.com/ethersphere/bee-dashboard/issues/260)) ([3ef1ad9](https://www.github.com/ethersphere/bee-dashboard/commit/3ef1ad9574c9193f83d8a1447fddb79266c1a4f4))
+
+## [0.9.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.8.0...v0.9.0) (2021-11-25)
+
+
+### Features
+
+* add dev mode flag ([#246](https://www.github.com/ethersphere/bee-dashboard/issues/246)) ([49350b0](https://www.github.com/ethersphere/bee-dashboard/commit/49350b05709053ecfbc4fc98f8b1df1aa0345e95))
+* enable setting devMode from queryParams ([#254](https://www.github.com/ethersphere/bee-dashboard/issues/254)) ([844383b](https://www.github.com/ethersphere/bee-dashboard/commit/844383bea7b2118232a74ac23c9e9a38fc47d3fd))
+* improve upload flow ([#240](https://www.github.com/ethersphere/bee-dashboard/issues/240)) ([635621b](https://www.github.com/ethersphere/bee-dashboard/commit/635621b04aea7124a99d00f9e31a86983063f5ce))
+* move postage stamp operations to bee debug api ([#256](https://www.github.com/ethersphere/bee-dashboard/issues/256)) ([3bb0077](https://www.github.com/ethersphere/bee-dashboard/commit/3bb00771d684ad93fd7acd921b648574013aec5c))
+
 ## [0.8.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.7.0...v0.8.0) (2021-10-20)
 
 In this version we are adding support for the bee release 1.2.0. The app also went through a graphical redesign. More to come soon!

README.md

@@ -3,6 +3,7 @@
 [![](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)
 
@@ -12,9 +13,10 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with the latest released version of Bee. Using it with older Bee versions is not
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.5.1-d0a77598<!-- SUPPORTED_BEE_END -->**.
-recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by
+Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
-keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
+[releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 
 ![Status page](/ui_samples/info.png)
 
@@ -83,6 +85,8 @@ 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:
@@ -102,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.8.0",
+  "version": "0.14.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,108 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "2.1.0",
+    "@ethersphere/bee-js": "^3.3.4",
+    "@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",
+    "@testing-library/react-hooks": "^8.0.0",
-    "@types/semver": "7.3.6",
+    "@types/cors": "^2.8.12",
-    "eslint": "7.32.0",
+    "@types/express": "^4.17.13",
-    "eslint-config-prettier": "8.3.0",
+    "@types/file-saver": "2.0.4",
-    "eslint-plugin-jest": "24.4.0",
+    "@types/jest": "27.0.2",
-    "eslint-plugin-prettier": "3.4.1",
+    "@types/qrcode.react": "1.0.2",
-    "eslint-plugin-react": "7.24.0",
+    "@types/react": "17.0.34",
-    "prettier": "2.3.2",
+    "@types/react-copy-to-clipboard": "5.0.2",
+    "@types/react-dom": "17.0.11",
+    "@types/react-router": "5.1.17",
+    "@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",
+    "cors": "^2.8.5",
+    "depcheck": "^1.4.3",
+    "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",
+    "express": "^4.17.3",
+    "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,25 +1,33 @@
-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>
+            <FileProvider>
+              <FeedsProvider>
                 <PlatformProvider>
                   <SnackbarProvider>
                     <Router>
@@ -32,6 +40,8 @@ const App = (): ReactElement => (
                     </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/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/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/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/ExpandableListItemActions.tsx

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

src/components/ExpandableListItemInput.tsx

@@ -1,11 +1,11 @@
-import { ReactElement, ChangeEvent, useState } from 'react'
+import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import Collapse from '@material-ui/core/Collapse'
-import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Edit, Minus, RotateCcw, Check } from 'react-feather'
+import { ChangeEvent, ReactElement, useState } from 'react'
-
+import { Edit, Minus, Search, X } from 'react-feather'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
+import { SwarmButton } from './SwarmButton'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -53,8 +53,11 @@ interface Props {
   expandedOnly?: boolean
   confirmLabel?: string
   confirmLabelDisabled?: boolean
+  loading?: boolean
   onChange?: (value: string) => void
   onConfirm: (value: string) => void
+  mapperFn?: (value: string) => string
+  locked?: boolean
 }
 
 export default function ExpandableListItemKey({
@@ -67,12 +70,19 @@ export default function ExpandableListItemKey({
   expandedOnly,
   helperText,
   placeholder,
+  loading,
+  mapperFn,
+  locked,
 }: Props): ReactElement | null {
   const classes = useStyles()
   const [open, setOpen] = useState(Boolean(expandedOnly))
   const [inputValue, setInputValue] = useState<string>(value || '')
   const toggleOpen = () => setOpen(!open)
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (mapperFn) {
+      e.target.value = mapperFn(e.target.value)
+    }
+
     setInputValue(e.target.value)
 
     if (onChange) onChange(e.target.value)
@@ -91,7 +101,7 @@ export default function ExpandableListItemKey({
             <Typography variant="body2">
               <div>
                 {!open && value}
-                {!expandedOnly && (
+                {!expandedOnly && !locked && (
                   <IconButton size="small" className={classes.copyValue}>
                     {open ? (
                       <Minus onClick={toggleOpen} strokeWidth={1} />
@@ -111,6 +121,7 @@ export default function ExpandableListItemKey({
               fullWidth
               className={classes.content}
               autoFocus
+              hidden={locked}
             />
           </Collapse>
         </Grid>
@@ -118,26 +129,27 @@ export default function ExpandableListItemKey({
       <Collapse in={open} timeout="auto" unmountOnExit>
         {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
         <ExpandableListItemActions>
-          <Button
+          <SwarmButton
-            variant="contained"
             disabled={
+              loading ||
               inputValue === value ||
               Boolean(confirmLabelDisabled) || // Disable if external validation is provided
               (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
             }
-            startIcon={<Check size="1rem" />}
+            loading={loading}
+            iconType={Search}
             onClick={() => onConfirm(inputValue)}
           >
             {confirmLabel || 'Save'}
-          </Button>
+          </SwarmButton>
-          <Button
+          <SwarmButton
-            variant="contained"
+            disabled={loading || inputValue === value || inputValue === ''}
-            disabled={inputValue === value || inputValue === ''}
+            iconType={X}
-            startIcon={<RotateCcw size="1rem" />}
             onClick={() => setInputValue(value || '')}
+            cancel
           >
             Cancel
-          </Button>
+          </SwarmButton>
         </ExpandableListItemActions>
       </Collapse>
     </>

src/components/ExpandableListItemKey.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, useState } from 'react'
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import Collapse from '@material-ui/core/Collapse'
-import { ListItem, Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Eye, Minus } from 'react-feather'
+import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { Eye, Minus } from 'react-feather'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -65,6 +65,9 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
 
   const splitValues = split(value)
   const hasPrefix = isPrefixedHexString(value)
+  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
+    splitValues[splitValues.length - 1]
+  }`
 
   return (
     <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
@@ -77,9 +80,7 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
                 <span className={classes.copyValue}>
                   <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
                     <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{`${
+                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                        hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]
-                      }[…]${splitValues[splitValues.length - 1]}`}</span>
                     </CopyToClipboard>
                   </Tooltip>
                 </span>

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

@@ -56,7 +56,7 @@ export default function SideBarItem({ path }: Props): ReactElement {
   const { status, isLoading } = useContext(Context)
   const classes = useStyles()
   const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = Boolean(path && matchPath(location.pathname, path))
 
   return (
     <ListItem
@@ -66,11 +66,9 @@ export default function SideBarItem({ path }: Props): ReactElement {
       disableRipple
     >
       <ListItemIcon style={{ marginLeft: '30px' }}>
-        <StatusIcon isOk={status.all} isLoading={isLoading} />
+        <StatusIcon checkState={status.all} isLoading={isLoading} />
       </ListItemIcon>
-      <ListItemText
+      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
-        primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
-      />
       <ListItemIcon className={classes.icon}>
         {status.all ? null : <ArrowRight className={classes.iconSmall} />}
       </ListItemIcon>

src/components/StatusIcon.tsx

@@ -1,23 +1,40 @@
 import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import { CheckState } from '../providers/Bee'
 
 interface Props {
-  isOk: boolean
+  checkState: CheckState
   isLoading?: boolean
   size?: number | string
   className?: string
 }
 
-export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+export default function StatusIcon({ checkState, size, className, isLoading }: Props): ReactElement {
   const s = size || '1rem'
 
   if (isLoading) return <CircularProgress size={s} className={className} />
 
+  let backgroundColor: string
+  switch (checkState) {
+    case CheckState.OK:
+      backgroundColor = '#1de600'
+      break
+    case CheckState.WARNING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.ERROR:
+      backgroundColor = '#ff3a52'
+      break
+    default:
+      // Default is error
+      backgroundColor = '#ff3a52'
+  }
+
   return (
     <span
       className={className}
       style={{
-        backgroundColor: isOk ? '#1de600' : '#ff3a52',
+        backgroundColor,
         height: s,
         width: s,
         borderRadius: '50%',

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,93 @@
+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
+  variant?: 'text' | 'contained' | 'outlined'
+}
+
+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,
+  variant = 'contained',
+}: 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={variant}
+      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,77 @@
+import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { TextField } from 'formik-material-ui'
+import { ChangeEvent, ReactElement } from 'react'
+
+interface Props {
+  name: string
+  label: string
+  password?: boolean
+  formik?: boolean
+  optional?: boolean
+  defaultValue?: string
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    field: {
+      background: theme.palette.background.paper,
+      '& fieldset': {
+        border: 0,
+      },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
+    },
+  }),
+)
+
+export function SwarmTextInput({
+  name,
+  label,
+  password,
+  optional,
+  formik,
+  onChange,
+  defaultValue,
+}: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <Field
+        component={TextField}
+        type={password ? 'password' : undefined}
+        required={!optional}
+        name={name}
+        label={label}
+        fullWidth
+        variant="filled"
+        className={classes.field}
+        defaultValue={defaultValue || ''}
+        InputProps={{ disableUnderline: true }}
+      />
+    )
+  }
+
+  return (
+    <SimpleTextField
+      type={password ? 'password' : undefined}
+      required
+      label={label}
+      fullWidth
+      variant="filled"
+      className={classes.field}
+      defaultValue={defaultValue || ''}
+      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
+    />
+  )
+}

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/TroubleshootConnectionCard.tsx

@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react'
+import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
-import { Link } from 'react-router-dom'
-
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
+import type { ReactElement } from 'react'
-import { ROUTES } from '../routes'
 import { Activity } from 'react-feather'
+import { Link } from 'react-router-dom'
+import { config } from '../config'
+import { ROUTES } from '../routes'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
       <Grid item className={classes.content}>
         <Typography align="center">
           Please check your node status to fix the problem. You can also check out the{' '}
-          <MuiLink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
             Swarm Bee Docs
           </MuiLink>{' '}
           or ask for support on the{' '}
-          <MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
             Ethereum Swarm Discord
           </MuiLink>
           .

src/components/WithdrawDepositModal.tsx

@@ -55,7 +55,7 @@ export default function WithdrawDepositModal({
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      enqueueSnackbar(`${errorMessage} Error: ${e.message}`, { variant: 'error' })
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
     }
   }
 
@@ -71,7 +71,7 @@ export default function WithdrawDepositModal({
 
       if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
     } catch (e) {
-      setAmountError(e)
+      setAmountError(e as Error)
     }
   }
 

src/config.ts

@@ -0,0 +1,31 @@
+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
+  public readonly BEE_DESKTOP_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'
+    this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
+  }
+}
+
+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/WithdrawModal.tsx

@@ -1,16 +1,15 @@
+import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import { Upload } from 'react-feather'
-import { Context as SettingsContext } from '../providers/Settings'
-
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
-import { BigNumber } from 'bignumber.js'
+import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
   const { beeDebugApi } = useContext(SettingsContext)
 
   return (
     <WithdrawDepositModal
-      successMessage="Successful withdrawl."
+      successMessage="Successful withdrawal."
       errorMessage="Error with withdrawing."
       dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
       label="Withdraw"

src/hooks/accounting.ts

@@ -100,7 +100,7 @@ export const useAccounting = (
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 

src/hooks/apiHooks.test.ts

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

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
@@ -7,6 +8,42 @@ export interface LatestBeeReleaseHook {
   error: Error | null
 }
 
+export interface IsBeeDesktopHook {
+  isBeeDesktop: boolean
+  isLoading: boolean
+}
+
+interface Config {
+  BEE_DESKTOP_URL: string
+}
+
+/**
+ * Detect if the dashboard is run within bee-desktop
+ *
+ * @returns isBeeDesktop true if this is run within bee-desktop
+ */
+export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
+  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+  const [isLoading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    axios
+      .get(`${conf.BEE_DESKTOP_URL}/info`)
+      .then(res => {
+        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        else setIsBeeDesktop(false)
+      })
+      .catch(() => {
+        setIsBeeDesktop(false)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { isBeeDesktop, isLoading }
+}
+
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
   const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
   const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)
@@ -14,7 +51,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/models/Token.ts

@@ -57,4 +57,25 @@ export class Token {
   toFixedDecimal(digits = 7): string {
     return this.toDecimal.toFixed(digits)
   }
+
+  toSignificantDigits(digits = 4): string {
+    const asString = this.toDecimal.toFixed(16)
+
+    let indexOfSignificantDigit = -1
+    let reachedDecimalPoint = false
+
+    for (let i = 0; i < asString.length; i++) {
+      const char = asString[i]
+
+      if (char === '.') {
+        reachedDecimalPoint = true
+        indexOfSignificantDigit = i + 1
+      } else if (reachedDecimalPoint && char !== '0') {
+        indexOfSignificantDigit = i
+        break
+      }
+    }
+
+    return asString.slice(0, indexOfSignificantDigit + digits)
+  }
 }

src/pages/accounting/index.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useContext } from 'react'
 
 import PeerBalances from './PeerBalances'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { useAccounting } from '../../hooks/accounting'
 import ExpandableList from '../../components/ExpandableList'
@@ -19,7 +19,7 @@ export default function Accounting(): ReactElement {
 
   const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <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 { CheckState, 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 === CheckState.ERROR) 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,28 +1,106 @@
-import { ReactElement, useState, useContext } from 'react'
-import { Context as SettingsContext } from '../../providers/Settings'
-import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 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'
 
-export default function Files(): ReactElement {
+export function Download(): ReactElement {
-  const { apiUrl } = useContext(SettingsContext)
+  const [loading, setLoading] = useState(false)
-
+  const { beeApi } = useContext(SettingsContext)
   const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
 
+  const { setUploadOrigin } = useContext(Context)
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
   const validateChange = (value: string) => {
-    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
+    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
-    else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+      setReferenceError(undefined)
+    } else {
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+    }
+  }
+
+  async function onSwarmIdentifier(identifier: string) {
+    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 (
+    <>
+      <FileNavigation active="DOWNLOAD" />
       <ExpandableListItemInput
         label="Swarm Hash"
-      onConfirm={value => window.open(`${apiUrl}/bzz/${value}`, '_blank')}
+        onConfirm={value => onSwarmIdentifier(value)}
         onChange={validateChange}
         helperText={referenceError}
-      confirmLabel={'Download'}
+        confirmLabel={'Find'}
-      confirmLabelDisabled={Boolean(referenceError)}
+        confirmLabelDisabled={Boolean(referenceError) || loading}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
+        mapperFn={value => recognizeSwarmHash(value)}
+        loading={loading}
       />
+      <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
+    </>
   )
 }

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/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,163 +1,212 @@
-import { Button, CircularProgress, Container, Avatar, Chip, Typography } from '@material-ui/core'
+import { Box } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
-import { RotateCcw, Check } from 'react-feather'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import UploadSizeAlert from '../../components/AlertUploadSize'
+import { useNavigate } from 'react-router-dom'
-import ClipboardCopy from '../../components/ClipboardCopy'
+import { DocumentationText } from '../../components/DocumentationText'
-import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { CheckState, 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 ExpandableListItem from '../../components/ExpandableListItem'
+import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { persistIdentity, updateFeed } from '../../utils/identity'
-import ExpandableListItemNote from '../../components/ExpandableListItemNote'
+import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+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 useStyles = makeStyles((theme: Theme) =>
+export function Upload(): ReactElement {
-  createStyles({
+  const [step, setStep] = useState(0)
-    content: { marginTop: theme.spacing(2) },
+  const [stampMode, setStampMode] = useState<'SELECT' | 'BUY'>('SELECT')
-    loadingProgress: { textAlign: 'center', padding: '50px' },
+  const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
-  }),
+  const [isUploading, setUploading] = useState(false)
-)
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
-const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
+  const { refresh } = useContext(StampsContext)
-
-export default function Files(): ReactElement {
-  const classes = useStyles()
-  const [dropzoneKey, setDropzoneKey] = useState(0)
-  const [file, setFile] = useState<File | null>(null)
-  const [uploadReference, setUploadReference] = useState('')
-  const [isUploadingFile, setIsUploadingFile] = useState(false)
-
-  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
-
-  const { isLoading, error, stamps, refresh } = useContext(Context)
   const { beeApi } = useContext(SettingsContext)
+  const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
+
   const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
 
   useEffect(() => {
     refresh()
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Choose a postage stamp that has the lowest usage
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
-  useEffect(() => {
-    if (!selectedStamp && stamps && stamps.length > 0) {
-      const stamp = stamps.reduce((prev, curr) => {
-        if (curr.usage < prev.usage) return curr
 
-        return prev
+  if (!files.length) {
-      }, stamps[0])
+    setFiles([])
+    navigate(ROUTES.UPLOAD, { replace: true })
 
-      setSelectedStamp(stamp)
+    return <></>
   }
-  }, [isLoading, error, stamps, selectedStamp])
 
-  const uploadFile = () => {
+  const identity = uploadOrigin.uuid ? identities.find(x => x.uuid === uploadOrigin.uuid) : null
-    if (file === null || selectedStamp === null) return
 
-    if (!beeApi) return
+  const onUpload = () => {
+    if (uploadOrigin.origin === 'UPLOAD') {
+      uploadFiles()
+    } else {
+      if ((identity as Identity).type === 'PRIVATE_KEY') {
+        uploadFiles()
+      } else {
+        setShowPasswordPrompt(true)
+      }
+    }
+  }
+
+  const uploadFiles = (password?: string) => {
+    if (!beeApi || !files.length || !stamp || !metadata) {
+      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
+
+    if (files.length === 1) indexDocument = files[0].name
+    else if (files.length > 1) {
+      const idx = detectIndexHtml(files)
+
+      // This is a website
+      if (idx) {
+        // The website is in some directory, remove it
+        if (idx.commonPrefix) {
+          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,
+      })
+      fls.push(packageFile(previewFile))
+    }
+
+    setUploading(true)
 
-    setIsUploadingFile(true)
     beeApi
-      .uploadFile(selectedStamp.batchID, file)
+      .uploadFiles(stamp.batchID, fls, { indexDocument })
-      .then(hash => setUploadReference(hash.reference))
+      .then(hash => {
-      .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
+        putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
-      .finally(() => setIsUploadingFile(false))
+
+        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 uploadNew = () => {
+  const reset = () => {
-    setTimeout(() => {
+    setStep(0)
-      setFile(null)
+    setFiles([])
-      setDropzoneKey(dropzoneKey + 1)
+    setStamp(null)
-      setUploadReference('')
+    setUploading(false)
-    }, 0)
   }
 
-  const handleChange = (files?: File[]) => {
+  const onFeedPasswordGiven = (password: string) => {
-    setUploadReference('')
+    uploadFiles(password)
-
-    if (files) {
-      setFile(files[0])
-    }
   }
 
   return (
     <>
-      <DropzoneArea
+      {showPasswordPrompt && (
-        key={'dropzone-' + dropzoneKey}
+        <FeedPasswordDialog
-        onChange={handleChange}
+          loading={isUploading}
-        filesLimit={1}
+          feedName={(identity as Identity).name}
-        maxFileSize={MAX_FILE_SIZE}
+          onCancel={() => setShowPasswordPrompt(false)}
-      />
+          onProceed={onFeedPasswordGiven}
-      <div className={classes.content}>
-        {/* We have file and can upload display stamp selection */}
-        {file && !isUploadingFile && !uploadReference && (
-          <>
-            <ExpandableListItemNote>
-              To upload this file to your node, you need a postage stamp. You can buy a new one or you can use an
-              existing stamp (providing it’s sufficient for this file).
-            </ExpandableListItemNote>
-            {selectedStamp && (
-              <ExpandableListItem
-                label={
-                  <>
-                    Upload with Postage Stamp{' '}
-                    <Chip
-                      avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
-                      label={<Typography variant="body2">{selectedStamp.batchID.substr(0, 8)}[…]</Typography>}
-                      deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
-                      onDelete={() => {} /* eslint-disable-line*/}
-                      variant="outlined"
-                    />
-                  </>
-                }
-                value={<SelectStamp stamps={stamps} selectedStamp={selectedStamp} setSelected={setSelectedStamp} />}
         />
       )}
-            {!selectedStamp && (
+      {identity && <HistoryHeader>{`Update "${identity.name}"`}</HistoryHeader>}
-              <ExpandableListItemActions>
+      {!identity && <HistoryHeader>Upload</HistoryHeader>}
-                <CreatePostageStamp />
+      <Box mb={4}>
-              </ExpandableListItemActions>
+        <ProgressIndicator steps={['Preview', 'Add postage stamp', 'Upload to node']} index={step} />
-            )}
+      </Box>
-          </>
+      {(step === 0 || step === 2) && <AssetPreview metadata={metadata} previewUri={previewUri} />}
-        )}
+      {step === 1 && (
-
-        {/* We have file and can upload display upload button */}
-        {file && !uploadReference && (
         <>
-            <ExpandableListItemActions>
+          <Box mb={2}>
-              <Button
+            {stampMode === 'SELECT' ? (
-                variant="contained"
+              <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
-                disabled={!file && isUploadingFile && !selectedStamp}
+            ) : (
-                onClick={() => uploadFile()}
+              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
-                startIcon={<Check size="1rem" />}
+            )}
+          </Box>
+          <Box mb={4}>
+            <DocumentationText>
+              Please refer to the{' '}
+              <a
+                href="https://docs.ethswarm.org/debug-api/#tag/Postage-Stamps/paths/~1stamps~1{amount}~1{depth}/post"
+                target="_blank"
+                rel="noreferrer"
               >
-                Upload
+                official Bee documentation
-              </Button>
+              </a>{' '}
-              {isUploadingFile && (
+              to understand these values.
-                <Container className={classes.loadingProgress}>
+            </DocumentationText>
-                  <CircularProgress />
+          </Box>
-                </Container>
-              )}
-            </ExpandableListItemActions>
-            <UploadSizeAlert file={file} />
         </>
       )}
-
+      {step === 2 && stamp && <StampPreview stamp={stamp} />}
-        {/* File has already been uploaded */}
+      <UploadActionBar
-        {uploadReference && (
+        step={step}
-          <>
+        onCancel={reset}
-            <ExpandableListItemKey label="Swarm Reference" value={uploadReference} />
+        onGoBack={() => setStep(step => step - 1)}
-            <ExpandableListItemActions>
+        onProceed={() => setStep(step => step + 1)}
-              <Button variant="contained" onClick={uploadNew} startIcon={<RotateCcw size="1rem" />}>
+        onUpload={onUpload}
-                Upload New File
+        isUploading={isUploading}
-              </Button>
+        hasStamp={Boolean(stamp)}
-            </ExpandableListItemActions>
+        uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
-          </>
+        stampMode={stampMode}
-        )}
+        setStampMode={setStampMode}
-      </div>
+      />
     </>
   )
 }

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,28 +0,0 @@
-import { ReactElement, useContext } from 'react'
-
-import Download from './Download'
-import Upload from './Upload'
-import TabsContainer from '../../components/TabsContainer'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
-
-export default function Files(): ReactElement {
-  const { status } = useContext(BeeContext)
-
-  if (!status.all) return <TroubleshootConnectionCard />
-
-  return (
-    <TabsContainer
-      values={[
-        {
-          label: 'download',
-          component: <Download />,
-        },
-        {
-          label: 'upload',
-          component: <Upload />,
-        },
-      ]}
-    />
-  )
-}

src/pages/info/index.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
 
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -17,13 +17,15 @@ export default function Status(): ReactElement {
     topology,
     nodeAddresses,
     chequebookAddress,
+    nodeInfo,
   } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <div>
       <ExpandableList label="Bee Node" defaultOpen>
+        <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
         <ExpandableListItem
           label="Agent"
           value={

src/pages/settings/index.tsx

@@ -1,15 +1,20 @@
 import { ReactElement, useContext } from 'react'
-import { Context as SettingsContext } from '../../providers/Settings'
 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)
 
   return (
     <ExpandableList label="API Settings" defaultOpen>
-      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
+      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} locked={lockedApiSettings} />
-      <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
+      <ExpandableListItemInput
+        label="Bee Debug API"
+        value={apiDebugUrl}
+        onConfirm={setDebugApiUrl}
+        locked={lockedApiSettings}
+      />
     </ExpandableList>
   )
 }

src/pages/stamps/CreatePostageStampModal.tsx

@@ -1,161 +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="contained" onClick={handleClickOpen}>
-            {label || 'Buy Postage Stamp'}
-            {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
-          </Button>
-          <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
-            <DialogTitle id="form-dialog-title">Purchase new postage stamp</DialogTitle>
-            <DialogContent>
-              <DialogContentText>
-                Provide the depth, amount and optionally the label of the postage stamp. Please refer to the{' '}
-                <a href="https://docs.ethswarm.org/docs/access-the-swarm/keep-your-data-alive" target="blank">
-                  official bee docs
-                </a>{' '}
-                to understand these values.
-              </DialogContentText>
-              <Field
-                component={TextField}
-                required
-                name="depth"
-                autoFocus
-                label="Depth"
-                fullWidth
-                className={classes.field}
-              />
-              <Field component={TextField} required name="amount" label="Amount" fullWidth className={classes.field} />
-              <Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={handleClose} variant="contained">
-                Cancel
-              </Button>
-              <div className={classes.wrapper}>
-                <Button
-                  disabled={isSubmitting || !isValid || !values.amount || !values.depth}
-                  type="submit"
-                  variant="contained"
-                  onClick={submitForm}
-                >
-                  Create
-                  {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
-                </Button>
-              </div>
-            </DialogActions>
-          </Dialog>
-        </Form>
-      )}
-    </Formik>
-  )
-}

src/pages/stamps/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,161 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import BigNumber from 'bignumber.js'
+import { Form, Formik, FormikHelpers } from 'formik'
+import { useSnackbar } from 'notistack'
+import { 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, 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 {
+    const isCurrentPriceAvailable = chainState && chainState.currentPrice
+
+    if (amount <= 0 || !isCurrentPriceAvailable) {
+      return '-'
+    }
+
+    const pricePerBlock = Number.parseInt(chainState.currentPrice, 10)
+
+    return `${secondsToTimeString(convertAmountToSeconds(amount, pricePerBlock))} (with price of 0 per block)`
+  }
+
+  function getPrice(depth: number, amount: bigint): string {
+    const hasInvalidInput = amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
+
+    if (hasInvalidInput) {
+      return '-'
+    }
+
+    const price = calculateStampPrice(depth, amount)
+
+    return `${price.toSignificantDigits()} 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(Number.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), BigInt(values.amount || '0'))}</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}
+    />
+  )
+}

src/pages/stamps/SelectPostageStampModal.tsx

@@ -0,0 +1,85 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import { Check, Clear } from '@material-ui/icons'
+import React, { ReactElement, useState } from 'react'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+
+interface Props {
+  stamps: EnrichedPostageBatch[]
+  onSelect: (stamp: EnrichedPostageBatch) => void
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    dialog: {
+      background: theme.palette.background.default,
+      borderRadius: 0,
+      width: '100%',
+      maxWidth: '890px',
+    },
+    title: {
+      color: '#606060',
+      textAlign: 'center',
+    },
+    hint: {
+      marginBottom: '16px',
+    },
+  }),
+)
+
+export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): ReactElement {
+  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
+
+  const classes = useStyles()
+
+  function onChange(stampId: string) {
+    const stamp = stamps.find(x => x.batchID === stampId)
+
+    if (stamp) {
+      setSelectedStamp(stamp)
+    }
+  }
+
+  function onFinish() {
+    if (selectedStamp) {
+      onSelect(selectedStamp)
+      onClose()
+    }
+  }
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      aria-labelledby="form-dialog-title"
+      fullWidth
+      PaperProps={{ className: classes.dialog }}
+    >
+      <DialogTitle id="form-dialog-title" className={classes.title}>
+        Select postage stamp
+      </DialogTitle>
+      <DialogContent>
+        <SwarmSelect
+          options={stamps.map(x => ({ label: x.batchID, value: x.batchID }))}
+          onChange={event => onChange(event.target.value as string)}
+        />
+      </DialogContent>
+      <DialogContent>
+        <ExpandableListItemActions>
+          <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
+            Select
+          </Button>
+          <Button onClick={onClose} variant="contained" startIcon={<Clear />}>
+            Cancel
+          </Button>
+        </ExpandableListItemActions>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/pages/stamps/StampsTable.tsx

@@ -1,8 +1,11 @@
 import type { ReactElement } from 'react'
-import { EnrichedPostageBatch } from '../../providers/Stamps'
+import ExpandableElement from '../../components/ExpandableElement'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
+import { getHumanReadableFileSize } from '../../utils/file'
+import { PostageStamp } from './PostageStamp'
 
 interface Props {
   postageStamps: EnrichedPostageBatch[] | null
@@ -13,11 +16,25 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
 
   return (
     <ExpandableList label="Postage Stamps" defaultOpen>
-      {postageStamps.map(({ batchID, usageText }) => (
+      {postageStamps.map(stamp => (
-        <ExpandableList key={batchID} label={`${batchID.substr(0, 8)}[…]`} level={1} info={`${usageText} used`}>
+        <ExpandableElement
-          <ExpandableListItemKey label="Batch ID" value={batchID} />
+          key={stamp.batchID}
-          <ExpandableListItem label="Usage" value={usageText} />
+          expandable={
-        </ExpandableList>
+            <>
+              <ExpandableListItemKey label="Batch ID" value={stamp.batchID} />
+              <ExpandableListItem label="Depth" value={String(stamp.depth)} />
+              <ExpandableListItem
+                label="Capacity"
+                value={`${getHumanReadableFileSize(2 ** stamp.depth * 4096 * stamp.usage)} / ${getHumanReadableFileSize(
+                  2 ** stamp.depth * 4096,
+                )}`}
+              />
+              <ExpandableListItem label="Amount" value={parseInt(stamp.amount, 10).toLocaleString()} />
+            </>
+          }
+        >
+          <PostageStamp stamp={stamp} shorten={true} />
+        </ExpandableElement>
       ))}
     </ExpandableList>
   )

src/pages/stamps/index.tsx

@@ -1,13 +1,14 @@
-import { ReactElement, useContext, useEffect } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Container, CircularProgress } from '@material-ui/core'
+import { ReactElement, useContext, useEffect } from 'react'
-
+import { PlusSquare } from 'react-feather'
-import StampsTable from './StampsTable'
+import { useNavigate } from 'react-router'
-import CreatePostageStampModal from './CreatePostageStampModal'
+import { SwarmButton } from '../../components/SwarmButton'
-
-import { Context as StampsContext } from '../../providers/Stamps'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as StampsContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import StampsTable from './StampsTable'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -25,18 +26,26 @@ const useStyles = makeStyles(() =>
   }),
 )
 
-export default function Accounting(): ReactElement {
+export default function Stamp(): ReactElement {
   const classes = useStyles()
+
+  const navigate = useNavigate()
+
   const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
   const { status } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
-
   useEffect(() => {
+    if (!status.all) return
     start()
 
     return () => stop()
-  }, [])
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  function navigateToNewStamp() {
+    navigate(ROUTES.STAMPS_NEW)
+  }
 
   return (
     <div className={classes.root}>
@@ -48,7 +57,9 @@ export default function Accounting(): ReactElement {
       {!error && (
         <>
           <div className={classes.actions}>
-            <CreatePostageStampModal />
+            <SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
+              Buy New Postage Stamp
+            </SwarmButton>
             <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
           </div>
           <StampsTable postageStamps={stamps} />

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,39 +1,59 @@
 import { useContext } from 'react'
 import DepositModal from '../../../containers/DepositModal'
-import type { ReactElement } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 const ChequebookDeployFund = (): ReactElement | null => {
   const { status, isLoading, chequebookAddress } = useContext(Context)
-  const isOk = status.chequebook
+  const { checkState, isEnabled } = status.chequebook
 
-  return (
+  if (!isEnabled) return null
-    <ExpandableList
+
-      label={
+  let text: ReactNode
+
+  switch (checkState) {
+    case CheckState.OK:
+      text = 'Your chequebook is deployed and funded'
+      break
+    case CheckState.WARNING:
+      text = (
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Chequebook Deployment & Funding
+          Your chequebook is not funded. Please deposit some xBZZ to your chequebook address. You may need to aquire BZZ
+          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the xDai network through the{' '}
+          <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
+          xDAI token. You can purchase DAI on the network and bridge it to xDai network through the{' '}
+          <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
         </>
-      }
+      )
-    >
+      break
-      <ExpandableListItemNote>
+    default:
-        {isOk ? (
+      text = (
-          'Your chequebook is deployed and funded'
-        ) : (
         <>
-            Your chequebook is either not deployed or funded. To run the node you will need xDAI and xBZZ on the xDai
+          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the xDai
           network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
           the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
           transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
           network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
           <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
         </>
-        )}
+      )
-      </ExpandableListItemNote>
+  }
+
+  return (
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Chequebook Deployment & Funding
+        </>
+      }
+    >
+      <ExpandableListItemNote>{text}</ExpandableListItemNote>
       {chequebookAddress && (
         <>
           <ExpandableListItemKey label="Chequebook Address" value={chequebookAddress.chequebookAddress} />

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -1,36 +1,37 @@
-import { ReactElement, useContext } from 'react'
 import MuiAlert from '@material-ui/lab/Alert'
-
+import { ReactElement, useContext } from 'react'
 import CodeBlockTabs from '../../../components/CodeBlockTabs'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
+import { CheckState, Context } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
-import { Context } from '../../../providers/Bee'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { status, isLoading } = useContext(Context)
   const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
-  const isOk = status.debugApiConnection
+  const { checkState, isEnabled } = status.debugApiConnection
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee Debug API
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Bee Debug API
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk
+        {checkState === CheckState.OK
-          ? 'The connection to the Bee nodes deug API has been successful'
+          ? 'The connection to the Bee nodes debug API has been successful'
           : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
 
-      {!isOk && (
+      {checkState === CheckState.ERROR && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -3,22 +3,24 @@ import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function EthereumConnectionCheck(): ReactElement | null {
   const { status, isLoading, nodeAddresses } = useContext(Context)
-  const isOk = status.blockchainConnection
+  const { checkState, isEnabled } = status.blockchainConnection
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Blockchain
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Blockchain
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk ? (
+        {checkState === CheckState.OK ? (
           'Your node is connected to the xDai blockchain'
         ) : (
           <>

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -7,28 +7,30 @@ import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { setApiUrl, apiUrl } = useContext(SettingsContext)
   const { status, isLoading } = useContext(Context)
-  const isOk = status.apiConnection
+  const { isEnabled, checkState } = status.apiConnection
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Bee API
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Bee API
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk
+        {checkState === CheckState.OK
           ? 'The connection to the Bee nodes API has been successful'
           : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
-      {!isOk && (
+      {checkState === CheckState.ERROR && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -1,27 +1,37 @@
-import { ReactElement, useContext } from 'react'
+import { ReactElement, ReactNode, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import TopologyStats from '../../../components/TopologyStats'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function PeerConnection(): ReactElement | null {
   const { status, isLoading, topology } = useContext(Context)
-  const isOk = status.topology
+  const { isEnabled, checkState } = status.topology
+
+  if (!isEnabled) return null
+
+  let text: ReactNode
+  switch (checkState) {
+    case CheckState.OK:
+      text = 'You are connected to other Bee nodes'
+      break
+
+    // Both error state and warning state
+    default:
+      text =
+        'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'
+  }
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Peers
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Peers
         </>
       }
     >
-      <ExpandableListItemNote>
+      <ExpandableListItemNote>{text}</ExpandableListItemNote>
-        {isOk
-          ? 'You are connected to other Bee nodes'
-          : 'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'}
-      </ExpandableListItemNote>
 
       <TopologyStats topology={topology} />
     </ExpandableList>

src/pages/status/SetupSteps/VersionCheck.tsx

@@ -4,22 +4,24 @@ import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 
 export default function VersionCheck(): ReactElement | null {
   const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
-  const isOk = status.version
+  const { isEnabled, checkState } = status.version
+
+  if (!isEnabled) return null
 
   return (
     <ExpandableList
       label={
         <>
-          <StatusIcon isOk={isOk} isLoading={isLoading} /> Bee Version
+          <StatusIcon checkState={checkState} isLoading={isLoading} /> Bee Version
         </>
       }
     >
       <ExpandableListItemNote>
-        {isOk ? (
+        {checkState === CheckState.OK ? (
           'You are running the latest version of Bee.'
         ) : (
           <>

src/providers/Bee.tsx

@@ -1,28 +1,41 @@
-import type { ChequebookBalance, Balance, Settlements } from '../types'
+import {
-import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
+  ChainState,
-import { Token } from '../models/Token'
-import semver from 'semver'
-import { engines } from '../../package.json'
-import { Context as SettingsContext } from './Settings'
-
-import type {
-  NodeAddresses,
   ChequebookAddressResponse,
-  LastChequesResponse,
   Health,
+  LastChequesResponse,
+  NodeAddresses,
+  NodeInfo,
   Peer,
   Topology,
+  BeeModes,
 } from '@ethersphere/bee-js'
+import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import semver from 'semver'
+import { engines } from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { Token } from '../models/Token'
+import type { Balance, ChequebookBalance, Settlements } from '../types'
+import { Context as SettingsContext } from './Settings'
+
+export enum CheckState {
+  OK = 'OK',
+  WARNING = 'Warning',
+  ERROR = 'Error',
+}
+
+interface StatusItem {
+  isEnabled: boolean
+  checkState: CheckState
+}
 
 interface Status {
-  all: boolean
+  all: CheckState
-  version: boolean
+  version: StatusItem
-  blockchainConnection: boolean
+  blockchainConnection: StatusItem
-  debugApiConnection: boolean
+  debugApiConnection: StatusItem
-  apiConnection: boolean
+  apiConnection: StatusItem
-  topology: boolean
+  topology: StatusItem
-  chequebook: boolean
+  chequebook: StatusItem
 }
 
 interface ContextInterface {
@@ -36,6 +49,7 @@ interface ContextInterface {
   apiHealth: boolean
   debugApiHealth: Health | null
   nodeAddresses: NodeAddresses | null
+  nodeInfo: NodeInfo | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
@@ -43,6 +57,7 @@ interface ContextInterface {
   peerBalances: Balance[] | null
   peerCheques: LastChequesResponse | null
   settlements: Settlements | null
+  chainState: ChainState | null
   latestBeeRelease: LatestBeeRelease | null
   isLoading: boolean
   isRefreshing: boolean
@@ -54,13 +69,13 @@ interface ContextInterface {
 
 const initialValues: ContextInterface = {
   status: {
-    all: false,
+    all: CheckState.ERROR,
-    version: false,
+    version: { isEnabled: false, checkState: CheckState.ERROR },
-    blockchainConnection: false,
+    blockchainConnection: { isEnabled: false, checkState: CheckState.ERROR },
-    debugApiConnection: false,
+    debugApiConnection: { isEnabled: false, checkState: CheckState.ERROR },
-    apiConnection: false,
+    apiConnection: { isEnabled: false, checkState: CheckState.ERROR },
-    topology: false,
+    topology: { isEnabled: false, checkState: CheckState.ERROR },
-    chequebook: false,
+    chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
   latestPublishedVersion: undefined,
   latestUserVersion: undefined,
@@ -71,6 +86,7 @@ const initialValues: ContextInterface = {
   apiHealth: false,
   debugApiHealth: null,
   nodeAddresses: null,
+  nodeInfo: null,
   topology: null,
   chequebookAddress: null,
   peers: null,
@@ -78,6 +94,7 @@ const initialValues: ContextInterface = {
   peerBalances: null,
   peerCheques: null,
   settlements: null,
+  chainState: null,
   latestBeeRelease: null,
   isLoading: true,
   isRefreshing: false,
@@ -97,30 +114,69 @@ interface Props {
 function getStatus(
   debugApiHealth: Health | null,
   nodeAddresses: NodeAddresses | null,
+  nodeInfo: NodeInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
   chequebookAddress: ChequebookAddressResponse | null,
   chequebookBalance: ChequebookBalance | null,
   error: Error | null,
 ): Status {
-  const status = {
+  const status: Status = { ...initialValues.status }
-    version: Boolean(
+
+  // Version check
+  status.version.isEnabled = true
+  status.version.checkState =
     debugApiHealth &&
     semver.satisfies(debugApiHealth.version, engines.bee, {
       includePrerelease: true,
-        }),
+    })
-    ),
+      ? CheckState.OK
-    blockchainConnection: Boolean(nodeAddresses?.ethereum),
+      : CheckState.ERROR
-    debugApiConnection: Boolean(debugApiHealth?.status === 'ok'),
+
-    apiConnection: apiHealth,
+  // Blockchain connection check
-    topology: Boolean(topology?.connected && topology?.connected > 0),
+  status.blockchainConnection.isEnabled = true
-    chequebook:
+  status.blockchainConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
-      Boolean(chequebookAddress?.chequebookAddress) &&
+
-      chequebookBalance !== null &&
+  // Debug API connection check
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
+  status.debugApiConnection.isEnabled = true
+  status.debugApiConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
+
+  // API connection check
+  status.apiConnection.isEnabled = true
+  status.apiConnection.checkState = apiHealth ? CheckState.OK : CheckState.ERROR
+
+  // Topology check
+  if (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT, BeeModes.ULTRA_LIGHT].includes(nodeInfo.beeMode)) {
+    status.topology.isEnabled = true
+    status.topology.checkState = topology?.connected && topology?.connected > 0 ? CheckState.OK : CheckState.WARNING
   }
 
-  return { ...status, all: !error && Object.values(status).every(v => v) }
+  // Chequebook check
+  if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
+    status.chequebook.isEnabled = true
+
+    if (
+      chequebookAddress?.chequebookAddress &&
+      chequebookBalance !== null &&
+      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)
+    ) {
+      status.chequebook.checkState = CheckState.OK
+    } else if (chequebookAddress?.chequebookAddress) status.chequebook.checkState = CheckState.WARNING
+    else status.chequebook.checkState = CheckState.OK
+  }
+
+  // Determine overall status
+  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
+    status.all = CheckState.ERROR
+  } else if (
+    Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
+  ) {
+    status.all = CheckState.WARNING
+  } else {
+    status.all = CheckState.OK
+  }
+
+  return status
 }
 
 export function Provider({ children }: Props): ReactElement {
@@ -128,6 +184,7 @@ export function Provider({ children }: Props): ReactElement {
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
+  const [nodeInfo, setNodeInfo] = useState<NodeInfo | null>(null)
   const [topology, setNodeTopology] = useState<Topology | null>(null)
   const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
   const [peers, setPeers] = useState<Peer[] | null>(null)
@@ -135,6 +192,8 @@ export function Provider({ children }: Props): ReactElement {
   const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
   const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
   const [settlements, setSettlements] = useState<Settlements | null>(null)
+  const [chainState, setChainState] = useState<ChainState | null>(null)
+
   const { latestBeeRelease } = useLatestBeeRelease()
 
   const [error, setError] = useState<Error | null>(initialValues.error)
@@ -153,7 +212,7 @@ export function Provider({ children }: Props): ReactElement {
     setApiHealth(false)
 
     refresh()
-  }, [beeApi])
+  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     setIsLoading(true)
@@ -161,15 +220,17 @@ export function Provider({ children }: Props): ReactElement {
     setDebugApiHealth(null)
     setNodeAddresses(null)
     setNodeTopology(null)
+    setNodeInfo(null)
     setPeers(null)
     setChequebookAddress(null)
     setChequebookBalance(null)
     setPeerBalances(null)
     setPeerCheques(null)
     setSettlements(null)
+    setChainState(null)
 
     refresh()
-  }, [beeDebugApi])
+  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
@@ -237,6 +298,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setNodeAddresses)
           .catch(() => setNodeAddresses(null)),
 
+        // NodeInfo
+        beeDebugApi
+          .getNodeInfo()
+          .then(setNodeInfo)
+          .catch(() => setNodeInfo(null)),
+
         // Network Topology
         beeDebugApi
           .getTopology()
@@ -261,6 +328,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setPeerCheques)
           .catch(() => setPeerCheques(null)),
 
+        // Chain state
+        beeDebugApi
+          .getChainState()
+          .then(setChainState)
+          .catch(() => setChainState(null)),
+
         // Chequebook balance
         chequeBalanceWrapper()
           .then(setChequebookBalance)
@@ -279,7 +352,7 @@ export function Provider({ children }: Props): ReactElement {
 
       await Promise.allSettled(promises)
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
       setIsRefreshing(false)
@@ -300,7 +373,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency, beeDebugApi, beeApi])
+  }, [frequency, beeDebugApi, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider
@@ -308,6 +381,7 @@ export function Provider({ children }: Props): ReactElement {
         status: getStatus(
           debugApiHealth,
           nodeAddresses,
+          nodeInfo,
           apiHealth,
           topology,
           chequebookAddress,
@@ -329,6 +403,7 @@ export function Provider({ children }: Props): ReactElement {
         apiHealth,
         debugApiHealth,
         nodeAddresses,
+        nodeInfo,
         topology,
         chequebookAddress,
         peers,
@@ -336,6 +411,7 @@ export function Provider({ children }: Props): ReactElement {
         peerBalances,
         peerCheques,
         settlements,
+        chainState,
         latestBeeRelease,
         isLoading,
         isRefreshing,

src/providers/Feeds.tsx

@@ -0,0 +1,43 @@
+import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+
+export type IdentityType = 'V3' | 'PRIVATE_KEY'
+
+export interface Identity {
+  uuid: string
+  name: string
+  feedHash?: string
+  identity: string
+  address: string
+  type: IdentityType
+}
+
+interface ContextInterface {
+  identities: Identity[]
+  setIdentities: (identities: Identity[]) => void
+}
+
+const initialValues: ContextInterface = {
+  identities: [],
+  setIdentities: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [identities, setIdentities] = useState<Identity[]>(initialValues.identities)
+
+  useEffect(() => {
+    try {
+      setIdentities(JSON.parse(localStorage.getItem('feeds') || '[]'))
+    } catch {
+      setIdentities([])
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <Context.Provider value={{ identities, setIdentities }}>{children}</Context.Provider>
+}

src/providers/File.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
+import { getMetadata } from '../utils/file'
+import { resize } from '../utils/image'
+import { PREVIEW_DIMENSIONS } from '../constants'
+
+export type UploadOrigin = { origin: 'UPLOAD' | 'FEED'; uuid?: string }
+
+export const defaultUploadOrigin: UploadOrigin = { origin: 'UPLOAD' }
+
+interface ContextInterface {
+  files: FilePath[]
+  setFiles: (files: FilePath[]) => void
+  uploadOrigin: UploadOrigin
+  setUploadOrigin: (uploadOrigin: UploadOrigin) => void
+  metadata?: Metadata
+  previewUri?: string
+  previewBlob?: Blob
+}
+
+const initialValues: ContextInterface = {
+  files: [],
+  setFiles: () => {},
+  uploadOrigin: defaultUploadOrigin,
+  setUploadOrigin: () => {},
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [files, setFiles] = useState<FilePath[]>(initialValues.files)
+  const [uploadOrigin, setUploadOrigin] = useState<UploadOrigin>(initialValues.uploadOrigin)
+  const [metadata, setMetadata] = useState<Metadata | undefined>(undefined)
+  const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
+  const [previewBlob, setPreviewBlob] = useState<Blob | undefined>(undefined)
+
+  useEffect(() => {
+    setMetadata(getMetadata(files))
+
+    if (previewUri) {
+      URL.revokeObjectURL(previewUri) // Clear the preview from memory
+      setPreviewUri(undefined)
+      setPreviewBlob(undefined)
+    }
+
+    if (files.length !== 1 || !files[0].type.startsWith('image')) return
+
+    resize(files[0], PREVIEW_DIMENSIONS.maxWidth, PREVIEW_DIMENSIONS.maxHeight).then(blob => {
+      setPreviewUri(URL.createObjectURL(blob)) // NOTE: Until it is cleared with URL.revokeObjectURL, the file stays allocated in memory
+      setPreviewBlob(blob)
+    })
+
+    return () => {
+      if (previewUri) {
+        URL.revokeObjectURL(previewUri)
+      }
+    }
+  }, [files]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin, metadata, previewUri, previewBlob }}>
+      {children}
+    </Context.Provider>
+  )
+}

src/providers/Settings.tsx

@@ -1,5 +1,6 @@
-import { createContext, ReactChild, ReactElement, useState, useEffect } from 'react'
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
+import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+import { config } from '../config'
 
 interface ContextInterface {
   apiUrl: string
@@ -8,16 +9,17 @@ interface ContextInterface {
   beeDebugApi: BeeDebug | null
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
+  lockedApiSettings: boolean
 }
 
 const initialValues: ContextInterface = {
-  apiUrl: sessionStorage.getItem('api_host') || process.env.REACT_APP_BEE_HOST || 'http://localhost:1633',
+  apiUrl: config.BEE_API_HOST,
-  apiDebugUrl:
+  apiDebugUrl: config.BEE_DEBUG_API_HOST,
-    sessionStorage.getItem('debug_api_host') || process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635',
   beeApi: null,
   beeDebugApi: null,
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
+  lockedApiSettings: false,
 }
 
 export const Context = createContext<ContextInterface>(initialValues)
@@ -25,34 +27,56 @@ export const Consumer = Context.Consumer
 
 interface Props {
   children: ReactChild
+  beeApiUrl?: string
+  beeDebugApiUrl?: string
+  lockedApiSettings?: boolean
 }
 
-export function Provider({ children }: Props): ReactElement {
+export function Provider({
+  children,
+  beeApiUrl,
+  beeDebugApiUrl,
+  lockedApiSettings: extLockedApiSettings,
+}: Props): ReactElement {
   const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
+  const [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))
+
+  const url = beeApiUrl || apiUrl
+  const debugUrl = beeDebugApiUrl || apiDebugUrl
 
   useEffect(() => {
     try {
-      setBeeApi(new Bee(apiUrl))
+      setBeeApi(new Bee(url))
-      sessionStorage.setItem('api_host', apiUrl)
+      sessionStorage.setItem('api_host', url)
     } catch (e) {
       setBeeApi(null)
     }
-  }, [apiUrl])
+  }, [url])
 
   useEffect(() => {
     try {
-      setBeeDebugApi(new BeeDebug(apiDebugUrl))
+      setBeeDebugApi(new BeeDebug(debugUrl))
-      sessionStorage.setItem('debug_api_host', apiDebugUrl)
+      sessionStorage.setItem('debug_api_host', debugUrl)
     } catch (e) {
       setBeeDebugApi(null)
     }
-  }, [apiDebugUrl])
+  }, [debugUrl])
 
   return (
-    <Context.Provider value={{ apiUrl, apiDebugUrl, beeApi, beeDebugApi, setApiUrl, setDebugApiUrl }}>
+    <Context.Provider
+      value={{
+        apiUrl: url,
+        apiDebugUrl: debugUrl,
+        beeApi,
+        beeDebugApi,
+        setApiUrl,
+        setDebugApiUrl,
+        lockedApiSettings,
+      }}
+    >
       {children}
     </Context.Provider>
   )

src/providers/Stamps.tsx

@@ -1,5 +1,5 @@
 import { PostageBatch } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useEffect, useState, useContext } from 'react'
+import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
 import { Context as SettingsContext } from './Settings'
 
 export interface EnrichedPostageBatch extends PostageBatch {
@@ -48,7 +48,7 @@ function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const { beeApi } = useContext(SettingsContext)
+  const { beeDebugApi } = useContext(SettingsContext)
   const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
@@ -59,16 +59,16 @@ export function Provider({ children }: Props): ReactElement {
     // Don't want to refresh when already refreshing
     if (isLoading) return
 
-    if (!beeApi) return
+    if (!beeDebugApi) return
 
     try {
       setIsLoading(true)
-      const stamps = await beeApi.getAllPostageBatch()
+      const stamps = await beeDebugApi.getAllPostageBatch()
 
       setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
     }
@@ -87,7 +87,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency])
+  }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider value={{ stamps, error, isLoading, lastUpdate, start, stop, refresh }}>

src/react-app-env.d.ts

@@ -5,19 +5,17 @@ interface LatestBeeRelease {
   html_url: string
 }
 
-interface StatusHookCommon {
+interface SwarmMetadata {
-  isOk: boolean
+  size: number
+  name: string
+  type?: string
 }
 
-interface StatusNodeVersionHook extends StatusHookCommon {
+interface Metadata extends SwarmMetadata {
-  userVersion?: string
+  type: string
-  latestVersion?: string
+  isWebsite: boolean
-  latestUrl: string
+  count?: number
-  isLatestBeeVersion: boolean
+  hash?: string
-}
-interface StatusEthereumConnectionHook extends StatusHookCommon {
-  nodeAddresses: NodeAddresses | null
-}
-interface StatusTopologyHook extends StatusHookCommon {
-  topology: Topology | null
 }
+
+type FilePath = File & { path?: string; fullPath?: string }

src/routes.tsx

@@ -1,33 +1,55 @@
 import type { ReactElement } from 'react'
-import { Switch } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
-
-import { Route } from 'react-router-dom'
-
-import Info from './pages/info'
-import Status from './pages/status'
-import Files from './pages/files'
 import Accounting from './pages/accounting'
+import Feeds from './pages/feeds'
+import CreateNewFeed from './pages/feeds/CreateNewFeed'
+import { FeedSubpage } from './pages/feeds/FeedSubpage'
+import UpdateFeed from './pages/feeds/UpdateFeed'
+import { Download } from './pages/files/Download'
+import { Share } from './pages/files/Share'
+import { Upload } from './pages/files/Upload'
+import { UploadLander } from './pages/files/UploadLander'
+import Info from './pages/info'
 import Settings from './pages/settings'
 import Stamps from './pages/stamps'
+import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
+import Status from './pages/status'
 
 export enum ROUTES {
   INFO = '/',
   FILES = '/files',
+  UPLOAD = '/files/upload',
+  UPLOAD_IN_PROGRESS = '/files/upload/workflow',
+  DOWNLOAD = '/files/download',
+  HASH = '/files/hash/:hash',
   ACCOUNTING = '/accounting',
   SETTINGS = '/settings',
   STAMPS = '/stamps',
+  STAMPS_NEW = '/stamps/new',
   STATUS = '/status',
+  FEEDS = '/feeds',
+  FEEDS_NEW = '/feeds/new',
+  FEEDS_UPDATE = '/feeds/update/:hash',
+  FEEDS_PAGE = '/feeds/:uuid',
 }
 
 const BaseRouter = (): ReactElement => (
-  <Switch>
+  <Routes>
-    <Route exact path={ROUTES.FILES} component={Files} />
+    <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
-    <Route exact path={ROUTES.ACCOUNTING} component={Accounting} />
+    <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
-    <Route exact path={ROUTES.SETTINGS} component={Settings} />
+    <Route path={ROUTES.DOWNLOAD} element={<Download />} />
-    <Route exact path={ROUTES.STAMPS} component={Stamps} />
+    <Route path={ROUTES.HASH} element={<Share />} />
-    <Route exact path={ROUTES.STATUS} component={Status} />
+    <Route path={ROUTES.ACCOUNTING} element={<Accounting />} />
-    <Route path={ROUTES.INFO} component={Info} />
+    <Route path={ROUTES.SETTINGS} element={<Settings />} />
-  </Switch>
+    <Route path={ROUTES.STAMPS} element={<Stamps />} />
+    <Route path={ROUTES.STAMPS_NEW} element={<CreatePostageStampPage />} />
+    <Route path={ROUTES.STATUS} element={<Status />} />
+    <Route path={ROUTES.FEEDS} element={<Feeds />} />
+    <Route path={ROUTES.FEEDS_NEW} element={<CreateNewFeed />} />
+    <Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
+    <Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
+    <Route path={ROUTES.INFO} element={<Info />} />
+  </Routes>
 )
 
 export default BaseRouter

src/theme.tsx

@@ -1,4 +1,4 @@
-import { createMuiTheme, Theme } from '@material-ui/core/styles'
+import { createTheme, Theme } from '@material-ui/core/styles'
 import { orange } from '@material-ui/core/colors'
 
 declare module '@material-ui/core/styles/createPalette' {
@@ -170,7 +170,7 @@ const propsOverrides = {
   },
 }
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     type: 'light',
     background: {