chore(master): release 0.28.0 (#667)

* feat: Github repository link to ethersphere/bee-dashboard

* fix: correct the Bee version detection

.github/workflows/check.yaml

@@ -18,7 +18,6 @@ jobs:
 
     env:
       REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
-      REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
 
     steps:
       - uses: actions/checkout@v2
@@ -61,6 +60,7 @@ jobs:
         uses: ethersphere/update-supported-bee-action@v1
         if: github.ref == 'refs/heads/master'
         with:
+          updateEngine: true
           token: ${{ secrets.GHA_PAT_BASIC }}
 
       - name: Build
@@ -71,11 +71,12 @@ jobs:
 
       - name: Create preview
         uses: ethersphere/swarm-actions/pr-preview@v0
+        continue-on-error: true
         with:
           bee-url: https://unlimited.gateway.ethswarm.org
           token: ${{ secrets.GHA_PAT_BASIC }}
           error-document: index.html
-          headers: "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"
+          headers: '${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}'
 
       - name: Upload to testnet
         uses: ethersphere/swarm-actions/upload-dir@v0

CHANGELOG.md

@@ -1,5 +1,126 @@
 # Changelog
 
+## [0.28.0](https://github.com/ethersphere/bee-dashboard/compare/v0.27.0...v0.28.0) (2024-06-18)
+
+
+### Features
+
+* upgrade bee-js to 7.0.3 ([#666](https://github.com/ethersphere/bee-dashboard/issues/666)) ([e9ebe33](https://github.com/ethersphere/bee-dashboard/commit/e9ebe33d51aa525921eacfad683577605e591531))
+
+## [0.27.0](https://github.com/ethersphere/bee-dashboard/compare/v0.26.2...v0.27.0) (2024-06-11)
+
+
+### Features
+
+* add redeem shortcut to sidebar ([999399f](https://github.com/ethersphere/bee-dashboard/commit/999399fb08c1a47a671ba0ad50409624654a1082))
+
+## [0.26.2](https://github.com/ethersphere/bee-dashboard/compare/v0.26.1...v0.26.2) (2024-06-05)
+
+
+### Bug Fixes
+
+* merge version and health check ([#662](https://github.com/ethersphere/bee-dashboard/issues/662)) ([cae90c1](https://github.com/ethersphere/bee-dashboard/commit/cae90c1a82e16ee8c7908c43e2fd17f7130eb89d))
+
+## [0.26.1](https://github.com/ethersphere/bee-dashboard/compare/v0.26.0...v0.26.1) (2024-06-03)
+
+
+### Bug Fixes
+
+* add bee version ([#659](https://github.com/ethersphere/bee-dashboard/issues/659)) ([a5d4ecf](https://github.com/ethersphere/bee-dashboard/commit/a5d4ecf045f691b9059fcca925d0f30675d12db0))
+
+## [0.26.0](https://github.com/ethersphere/bee-dashboard/compare/v0.25.0...v0.26.0) (2024-06-03)
+
+
+### Features
+
+* display effective capacity ([#643](https://github.com/ethersphere/bee-dashboard/issues/643)) ([5871223](https://github.com/ethersphere/bee-dashboard/commit/58712232031e084195adf92c40cd41a98eaf16cf))
+* merge api ([#658](https://github.com/ethersphere/bee-dashboard/issues/658)) ([8cbd812](https://github.com/ethersphere/bee-dashboard/commit/8cbd812a2c04706f8f46de5355209b96783723b9))
+* show syncing info ([#647](https://github.com/ethersphere/bee-dashboard/issues/647)) ([cc91f1d](https://github.com/ethersphere/bee-dashboard/commit/cc91f1d64cd48a845fa9fa45ec4b58335eab3893))
+* wait for upload sync ([#649](https://github.com/ethersphere/bee-dashboard/issues/649)) ([79bb315](https://github.com/ethersphere/bee-dashboard/commit/79bb31540196b74f3bc0220b8c844fbd5aaaf488))
+
+
+### Bug Fixes
+
+* correct the bee version detection ([#645](https://github.com/ethersphere/bee-dashboard/issues/645)) ([b3f521c](https://github.com/ethersphere/bee-dashboard/commit/b3f521ca2055b91d7adddf96563cca6bf92e3d59))
+
+## [0.25.0](https://github.com/ethersphere/bee-dashboard/compare/v0.24.1...v0.25.0) (2023-12-04)
+
+
+### Features
+
+* improve topup and dilute ux ([0c2ac0c](https://github.com/ethersphere/bee-dashboard/commit/0c2ac0c454ad02200a2762958c5bc5abbdfe8005))
+* update postage stamp creation screen ([#641](https://github.com/ethersphere/bee-dashboard/issues/641)) ([4f9abc6](https://github.com/ethersphere/bee-dashboard/commit/4f9abc614eedd5ce3a279a4686cc832c4d1e62c7))
+
+
+### Bug Fixes
+
+* add missing stamp labels and fix inputs ([#634](https://github.com/ethersphere/bee-dashboard/issues/634)) ([7fa1cb0](https://github.com/ethersphere/bee-dashboard/commit/7fa1cb0ccf9f2a32263e84aa76732ebd2fc7fb22))
+* put stamp input error handling in state ([#640](https://github.com/ethersphere/bee-dashboard/issues/640)) ([20a051b](https://github.com/ethersphere/bee-dashboard/commit/20a051b6589c22397a7305d722a56df0604ff7a4))
+
+## [0.24.1](https://github.com/ethersphere/bee-dashboard/compare/v0.24.0...v0.24.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* update `swap-endpoint` to `blockchain-rpc-endpoint` ([#628](https://github.com/ethersphere/bee-dashboard/issues/628)) ([bce93ce](https://github.com/ethersphere/bee-dashboard/commit/bce93ce3cdc1ef4b1f50fcf274591ba00726be16))
+
+## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
+
+
+### Features
+
+* add stamp dilute and topup ([#619](https://github.com/ethersphere/bee-dashboard/issues/619)) ([055a300](https://github.com/ethersphere/bee-dashboard/commit/055a3002b303df45c7010ef4d365e14b979e9084))
+
+## [0.23.0](https://github.com/ethersphere/bee-dashboard/compare/v0.22.0...v0.23.0) (2023-02-21)
+
+
+### Features
+
+* add staking for full nodes ([#590](https://github.com/ethersphere/bee-dashboard/issues/590)) ([fac72b1](https://github.com/ethersphere/bee-dashboard/commit/fac72b1299353c104231aa038c1bab9df78c1355))
+* upgrade bee-js to 5.2.0 ([#611](https://github.com/ethersphere/bee-dashboard/issues/611)) ([e215c61](https://github.com/ethersphere/bee-dashboard/commit/e215c61ea1619fc388fe8b1904d160b04a1a5c0d))
+
+## [0.22.0](https://github.com/ethersphere/bee-dashboard/compare/v0.21.1...v0.22.0) (2023-01-19)
+
+
+### Features
+
+* add node connecting status ([#603](https://github.com/ethersphere/bee-dashboard/issues/603)) ([90f9f91](https://github.com/ethersphere/bee-dashboard/commit/90f9f91ddbefb47b40c7e567125972b800d81972))
+
+## [0.21.1](https://github.com/ethersphere/bee-dashboard/compare/v0.21.0...v0.21.1) (2022-12-21)
+
+
+### Bug Fixes
+
+* do not require chequebook funding ([#599](https://github.com/ethersphere/bee-dashboard/issues/599)) ([42b7f08](https://github.com/ethersphere/bee-dashboard/commit/42b7f080b00a94f068d2fad4779d02ddcf58e27d))
+
+## [0.21.0](https://github.com/ethersphere/bee-dashboard/compare/v0.20.2...v0.21.0) (2022-12-01)
+
+
+### Features
+
+* add prerequisite checks before swap ([#588](https://github.com/ethersphere/bee-dashboard/issues/588)) ([4e564dd](https://github.com/ethersphere/bee-dashboard/commit/4e564dd5c08b938c95f07818bc60957a7df4f5bb))
+* add starting state to sidebar indicator ([#587](https://github.com/ethersphere/bee-dashboard/issues/587)) ([848e61a](https://github.com/ethersphere/bee-dashboard/commit/848e61a7a0fc9b31cae4f603473b37d467f9e914))
+
+
+### Bug Fixes
+
+* add loading state to info page ([#584](https://github.com/ethersphere/bee-dashboard/issues/584)) ([0246904](https://github.com/ethersphere/bee-dashboard/commit/02469046b05512d6617d8b21ca93b41d6a8a6827))
+* always consider user input when performing swap ([#572](https://github.com/ethersphere/bee-dashboard/issues/572)) ([ec8fdf0](https://github.com/ethersphere/bee-dashboard/commit/ec8fdf0315ed7ee75c7612780c602cba49a2321d))
+* always set rpc to newly provided value in desktop ([#591](https://github.com/ethersphere/bee-dashboard/issues/591)) ([b798fa0](https://github.com/ethersphere/bee-dashboard/commit/b798fa0e68b367fe324ef64507b1405b642da6e0))
+* change status page depending on desktop mode ([#573](https://github.com/ethersphere/bee-dashboard/issues/573)) ([a4b8e7c](https://github.com/ethersphere/bee-dashboard/commit/a4b8e7ca2596028e7c8192c92202c0361610e307))
+* change version mismatch to a warning ([#594](https://github.com/ethersphere/bee-dashboard/issues/594)) ([dc04e26](https://github.com/ethersphere/bee-dashboard/commit/dc04e26db4fe6beb9e76fad79c732794b0b7f77d))
+* fix conditional rendering for blockchain network ([#583](https://github.com/ethersphere/bee-dashboard/issues/583)) ([1ce4a47](https://github.com/ethersphere/bee-dashboard/commit/1ce4a474954a5ba4debee53b40bb66a46fb19ffc))
+* handle auth and server error during swap ([#593](https://github.com/ethersphere/bee-dashboard/issues/593)) ([665ae06](https://github.com/ethersphere/bee-dashboard/commit/665ae063fa49bc94762ea10a9098b57e95327d9c))
+* hide swap in standalone mode ([#582](https://github.com/ethersphere/bee-dashboard/issues/582)) ([9a8520e](https://github.com/ethersphere/bee-dashboard/commit/9a8520eb6fe9f40a77c4230ab79d3731ebdd4b42))
+* refresh after chequebook withdraw deposit ([#576](https://github.com/ethersphere/bee-dashboard/issues/576)) ([6936098](https://github.com/ethersphere/bee-dashboard/commit/693609810d735d1e54691b13ea0e4db33e678a53))
+
+## [0.20.2](https://github.com/ethersphere/bee-dashboard/compare/v0.20.1...v0.20.2) (2022-09-15)
+
+
+### Bug Fixes
+
+* stamp purchasing ([#551](https://github.com/ethersphere/bee-dashboard/issues/551)) ([c0456a3](https://github.com/ethersphere/bee-dashboard/commit/c0456a3bf6d541457b706670b1a757d2b1d70f10))
+
 ## [0.20.1](https://github.com/ethersphere/bee-dashboard/compare/v0.20.0...v0.20.1) (2022-09-15)
 
 

CODEOWNERS

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

README.md

@@ -13,15 +13,17 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.7.0-bbf13011<!-- SUPPORTED_BEE_END -->**.
+This project is intended to be used with \*\*Bee version
-Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
+
-[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
+<!-- SUPPORTED_BEE_START -->1.12.0-88c1d236<!-- SUPPORTED_BEE_END -->**. Using it with older or newer Bee versions is
-[releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+
+not recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and
+by keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 
 ![Status page](/ui_samples/info.png)
 
 | Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                              |
-| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ------------------------------------- |
 | ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Settings](/ui_samples/settings.png) |
 
 ## Table of Contents
@@ -45,9 +47,9 @@ npm install -g @ethersphere/bee-dashboard
 
 ## Usage
 
-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
+:warning: To successfully connect to the Bee node, you will need to enable CORS. You can do so by setting
-setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
+`cors-allowed-origins: ['*']` in the Bee config file and then restart the Bee node. To see where the config file is,
-To see where the config file is, consult the
+consult the
 [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
 
 ### Terminal
@@ -96,21 +98,25 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
 
 #### Environmental variables
 
-The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. 
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static
-We support following variables:
+files. We support following variables:
 
 - `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
- - `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same origin under which the Dashboard is served.
+- `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same
- - `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
+  origin under which the Dashboard is served.
- - `REACT_APP_BEE_DEBUG_HOST` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+- `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the
- - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
+  `http://localhost:1633` is used.
+- `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the
+  default value. The user can override this in Settings, which is then persisted in local store and has priority over
+  the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
 
 #### Swarm Desktop development
 
-If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where Desktop
+is initialized (eq. the splash screen disappear) and:
 
 ```sh
-echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
 REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
 
 npm start
@@ -128,7 +134,6 @@ There are some ways you can make this module better:
 
 ## Maintainers
 
-- [vojtechsimetka](https://github.com/vojtechsimetka)
 - [Cafe137](https://github.com/Cafe137)
 
 See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintainer).
@@ -137,5 +142,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 
 [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-lock.json

@@ -1,16 +1,15 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.20.1",
+  "version": "0.28.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ethersphere/bee-dashboard",
-      "version": "0.20.1",
+      "version": "0.28.0",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@ethersphere/bee-js": "^5.0.0",
+        "@ethersphere/bee-js": "^7.0.3",
-        "@ethersphere/manifest-js": "1.2.1",
         "@ethersphere/swarm-cid": "^0.1.0",
         "@material-ui/core": "4.12.3",
         "@material-ui/icons": "4.11.2",
@@ -27,19 +26,19 @@
         "formik": "2.2.9",
         "formik-material-ui": "3.0.1",
         "jszip": "^3.7.1",
+        "mantaray-js": "^1.0.3",
         "material-ui-dropzone": "3.5.0",
         "notistack": "1.0.10",
         "opener": "1.5.2",
         "qrcode.react": "1.0.1",
-        "react": ">=17.0.0 || >=18.0.0",
+        "react": ">= 17.0.2",
         "react-copy-to-clipboard": "5.0.4",
-        "react-dom": ">=17.0.0 || >=18.0.0",
+        "react-dom": ">= 17.0.2",
         "react-identicons": "1.2.5",
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
         "react-syntax-highlighter": "15.4.4",
         "remixicon-react": "^1.0.0",
-        "semver": "7.3.5",
         "serve-handler": "6.1.3",
         "stream": "npm:stream-browserify",
         "stream-browserify": "^3.0.0"
@@ -69,7 +68,6 @@
         "@types/react-router": "5.1.18",
         "@types/react-router-dom": "5.3.2",
         "@types/react-syntax-highlighter": "13.5.2",
-        "@types/semver": "7.3.9",
         "@typescript-eslint/eslint-plugin": "5.28.0",
         "@typescript-eslint/parser": "5.28.0",
         "babel-eslint": "10.1.0",
@@ -105,7 +103,7 @@
         "webpack-cli": "^4.10.0"
       },
       "engines": {
-        "bee": ">=0.6.0",
+        "bee": "1.16.1-8e269c8",
         "node": ">=14.0.0",
         "npm": ">=6.9.0"
       },
@@ -2440,51 +2438,53 @@
       }
     },
     "node_modules/@ethersphere/bee-js": {
-      "version": "5.0.0",
+      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-7.0.3.tgz",
-      "integrity": "sha512-Dr5Xon0UZvi37fvbyGj46kw3/0D8fydwfDtVtFHKi2p7mNEizG0uok2mXvwLZrMvUMOS8uXkFhbQjTFBjB+pWA==",
+      "integrity": "sha512-1Z19V6AJey6BScvIg7/kb464B9oPS6/nIrvEODWEJTXsaC/DBXAdQhR76ypvhrW3ldbwT5NVDA0HEfc9QekVEw==",
       "dependencies": {
         "@ethersphere/swarm-cid": "^0.1.0",
-        "@types/readable-stream": "^2.3.13",
+        "axios": "^0.28.1",
-        "bufferutil": "^4.0.6",
+        "cafe-utility": "^21.3.1",
         "elliptic": "^6.5.4",
-        "fetch-blob": "2.1.2",
         "isomorphic-ws": "^4.0.1",
         "js-sha3": "^0.8.0",
-        "ky": "^0.25.1",
-        "ky-universal": "^0.8.2",
         "semver": "^7.3.5",
-        "tar-js": "^0.3.0",
-        "utf-8-validate": "^5.0.9",
-        "web-streams-polyfill": "^4.0.0-beta.1",
         "ws": "^8.7.0"
-      },
-      "engines": {
-        "bee": "1.7.0-bbf13011",
-        "beeApiVersion": "3.0.2",
-        "beeDebugApiVersion": "3.0.2",
-        "node": ">=14.0.0",
-        "npm": ">=6.0.0"
       }
     },
-    "node_modules/@ethersphere/bee-js/node_modules/web-streams-polyfill": {
+    "node_modules/@ethersphere/bee-js/node_modules/axios": {
-      "version": "4.0.0-beta.3",
+      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.1.tgz",
-      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
+      "integrity": "sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/@ethersphere/bee-js/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 6"
       }
     },
     "node_modules/@ethersphere/bee-js/node_modules/ws": {
-      "version": "8.8.0",
+      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -2495,22 +2495,6 @@
         }
       }
     },
-    "node_modules/@ethersphere/manifest-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@ethersphere/manifest-js/-/manifest-js-1.2.1.tgz",
-      "integrity": "sha512-HfeQ5h9KuH8xTxYY6bmSNwmpalrdDyOu4Sl6mrAN2W2iJlIjuG5DeirseSEFXElKPwEdv03PzZt2vARPna8sfw==",
-      "dependencies": {
-        "mantaray-js": "^1.0.3"
-      },
-      "engines": {
-        "bee": "1.6.0-6ceadd35",
-        "node": ">=12.0.0",
-        "npm": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "@ethersphere/bee-js": ">=4.x"
-      }
-    },
     "node_modules/@ethersphere/swarm-cid": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@ethersphere/swarm-cid/-/swarm-cid-0.1.0.tgz",
@@ -4887,7 +4871,8 @@
     "node_modules/@types/node": {
       "version": "16.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.6.tgz",
-      "integrity": "sha512-ua7PgUoeQFjmWPcoo9khiPum3Pd60k4/2ZGXt18sm2Slk0W0xZTqt5Y0Ny1NyBiN1EVQ/+FaF9NcY4Qe6rwk5w=="
+      "integrity": "sha512-ua7PgUoeQFjmWPcoo9khiPum3Pd60k4/2ZGXt18sm2Slk0W0xZTqt5Y0Ny1NyBiN1EVQ/+FaF9NcY4Qe6rwk5w==",
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -5004,15 +4989,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
-    "node_modules/@types/readable-stream": {
-      "version": "2.3.13",
-      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.13.tgz",
-      "integrity": "sha512-4JSCx8EUzaW9Idevt+9lsRAt1lcSccoQfE+AouM1gk8sFxnnytKNIO3wTl9Dy+4m6jRJ1yXhboLHHT/LXBQiEw==",
-      "dependencies": {
-        "@types/node": "*",
-        "safe-buffer": "*"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -5033,12 +5009,6 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
-    "node_modules/@types/semver": {
-      "version": "7.3.9",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.9.tgz",
-      "integrity": "sha512-L/TMpyURfBkf+o/526Zb6kd/tchUP3iBDEPjqjb+U2MAJhVRxxrmr2fwpe08E7QsV7YLcpq0tUaQ9O9x97ZIxQ==",
-      "dev": true
-    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -5656,17 +5626,6 @@
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
       "dev": true
     },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -6058,8 +6017,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "dev": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -6899,6 +6857,8 @@
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.6.tgz",
       "integrity": "sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==",
       "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -6926,6 +6886,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/cafe-utility": {
+      "version": "21.3.1",
+      "resolved": "https://registry.npmjs.org/cafe-utility/-/cafe-utility-21.3.1.tgz",
+      "integrity": "sha512-6e5dovyMdaWNbWOY+gvpb8LnIwyO7D53uf5At0abjeAbp998B3hohE5aePRSPRSY8nzbNNTsUFmExKpUQaR7Bw=="
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -7337,7 +7302,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -8211,14 +8175,6 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
-    "node_modules/data-uri-to-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
-      "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -8331,7 +8287,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -9903,14 +9858,6 @@
         "ws": "7.4.6"
       }
     },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -10225,19 +10172,6 @@
         "pend": "~1.2.0"
       }
     },
-    "node_modules/fetch-blob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-2.1.2.tgz",
-      "integrity": "sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow==",
-      "engines": {
-        "node": "^10.17.0 || >=12.3.0"
-      },
-      "peerDependenciesMeta": {
-        "domexception": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -10512,9 +10446,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.5",
+      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
       "funding": [
         {
           "type": "individual",
@@ -13693,41 +13627,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/ky": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/ky/-/ky-0.25.1.tgz",
-      "integrity": "sha512-PjpCEWlIU7VpiMVrTwssahkYXX1by6NCT0fhTUX34F3DTinARlgMpriuroolugFPcMgpPWrOW4mTb984Qm1RXA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/ky?sponsor=1"
-      }
-    },
-    "node_modules/ky-universal": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/ky-universal/-/ky-universal-0.8.2.tgz",
-      "integrity": "sha512-xe0JaOH9QeYxdyGLnzUOVGK4Z6FGvDVzcXFTdrYA1f33MZdEa45sUDaMBy98xQMcsd2XIBrTXRrRYnegcSdgVQ==",
-      "dependencies": {
-        "abort-controller": "^3.0.0",
-        "node-fetch": "3.0.0-beta.9"
-      },
-      "engines": {
-        "node": ">=10.17"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/ky-universal?sponsor=1"
-      },
-      "peerDependencies": {
-        "ky": ">=0.17.0",
-        "web-streams-polyfill": ">=2.0.0"
-      },
-      "peerDependenciesMeta": {
-        "web-streams-polyfill": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -14112,7 +14011,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -14121,7 +14019,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -14364,22 +14261,6 @@
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
-    "node_modules/node-fetch": {
-      "version": "3.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0-beta.9.tgz",
-      "integrity": "sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==",
-      "dependencies": {
-        "data-uri-to-buffer": "^3.0.1",
-        "fetch-blob": "^2.1.1"
-      },
-      "engines": {
-        "node": "^10.17 || >=12.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
-      }
-    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -14393,6 +14274,8 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
       "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
+      "optional": true,
+      "peer": true,
       "bin": {
         "node-gyp-build": "bin.js",
         "node-gyp-build-optional": "optional.js",
@@ -16560,8 +16443,7 @@
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-      "dev": true
     },
     "node_modules/psl": {
       "version": "1.8.0",
@@ -18907,14 +18789,6 @@
         "tar-stream": "^2.1.4"
       }
     },
-    "node_modules/tar-js": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tar-js/-/tar-js-0.3.0.tgz",
-      "integrity": "sha1-aUmqv7C6GLsVYq5RpDn9DzAYOhc=",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -19579,6 +19453,8 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz",
       "integrity": "sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==",
       "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -19734,16 +19610,6 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/web-vitals": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz",
@@ -22383,47 +22249,48 @@
       }
     },
     "@ethersphere/bee-js": {
-      "version": "5.0.0",
+      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersphere/bee-js/-/bee-js-7.0.3.tgz",
-      "integrity": "sha512-Dr5Xon0UZvi37fvbyGj46kw3/0D8fydwfDtVtFHKi2p7mNEizG0uok2mXvwLZrMvUMOS8uXkFhbQjTFBjB+pWA==",
+      "integrity": "sha512-1Z19V6AJey6BScvIg7/kb464B9oPS6/nIrvEODWEJTXsaC/DBXAdQhR76ypvhrW3ldbwT5NVDA0HEfc9QekVEw==",
       "requires": {
         "@ethersphere/swarm-cid": "^0.1.0",
-        "@types/readable-stream": "^2.3.13",
+        "axios": "^0.28.1",
-        "bufferutil": "^4.0.6",
+        "cafe-utility": "^21.3.1",
         "elliptic": "^6.5.4",
-        "fetch-blob": "2.1.2",
         "isomorphic-ws": "^4.0.1",
         "js-sha3": "^0.8.0",
-        "ky": "^0.25.1",
-        "ky-universal": "^0.8.2",
         "semver": "^7.3.5",
-        "tar-js": "^0.3.0",
-        "utf-8-validate": "^5.0.9",
-        "web-streams-polyfill": "^4.0.0-beta.1",
         "ws": "^8.7.0"
       },
       "dependencies": {
-        "web-streams-polyfill": {
+        "axios": {
-          "version": "4.0.0-beta.3",
+          "version": "0.28.1",
-          "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.1.tgz",
-          "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug=="
+          "integrity": "sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==",
+          "requires": {
+            "follow-redirects": "^1.15.0",
+            "form-data": "^4.0.0",
+            "proxy-from-env": "^1.1.0"
+          }
+        },
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
         },
         "ws": {
-          "version": "8.8.0",
+          "version": "8.17.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-          "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
+          "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
           "requires": {}
         }
       }
     },
-    "@ethersphere/manifest-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@ethersphere/manifest-js/-/manifest-js-1.2.1.tgz",
-      "integrity": "sha512-HfeQ5h9KuH8xTxYY6bmSNwmpalrdDyOu4Sl6mrAN2W2iJlIjuG5DeirseSEFXElKPwEdv03PzZt2vARPna8sfw==",
-      "requires": {
-        "mantaray-js": "^1.0.3"
-      }
-    },
     "@ethersphere/swarm-cid": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@ethersphere/swarm-cid/-/swarm-cid-0.1.0.tgz",
@@ -24032,7 +23899,8 @@
     "@types/node": {
       "version": "16.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.6.tgz",
-      "integrity": "sha512-ua7PgUoeQFjmWPcoo9khiPum3Pd60k4/2ZGXt18sm2Slk0W0xZTqt5Y0Ny1NyBiN1EVQ/+FaF9NcY4Qe6rwk5w=="
+      "integrity": "sha512-ua7PgUoeQFjmWPcoo9khiPum3Pd60k4/2ZGXt18sm2Slk0W0xZTqt5Y0Ny1NyBiN1EVQ/+FaF9NcY4Qe6rwk5w==",
+      "dev": true
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -24151,15 +24019,6 @@
         "@types/react": "*"
       }
     },
-    "@types/readable-stream": {
-      "version": "2.3.13",
-      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.13.tgz",
-      "integrity": "sha512-4JSCx8EUzaW9Idevt+9lsRAt1lcSccoQfE+AouM1gk8sFxnnytKNIO3wTl9Dy+4m6jRJ1yXhboLHHT/LXBQiEw==",
-      "requires": {
-        "@types/node": "*",
-        "safe-buffer": "*"
-      }
-    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -24180,12 +24039,6 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
-    "@types/semver": {
-      "version": "7.3.9",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.9.tgz",
-      "integrity": "sha512-L/TMpyURfBkf+o/526Zb6kd/tchUP3iBDEPjqjb+U2MAJhVRxxrmr2fwpe08E7QsV7YLcpq0tUaQ9O9x97ZIxQ==",
-      "dev": true
-    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -24680,14 +24533,6 @@
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
       "dev": true
     },
-    "abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "requires": {
-        "event-target-shim": "^5.0.0"
-      }
-    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -24986,8 +24831,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "dev": true
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -25626,6 +25470,8 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.6.tgz",
       "integrity": "sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==",
+      "optional": true,
+      "peer": true,
       "requires": {
         "node-gyp-build": "^4.3.0"
       }
@@ -25641,6 +25487,11 @@
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
       "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
     },
+    "cafe-utility": {
+      "version": "21.3.1",
+      "resolved": "https://registry.npmjs.org/cafe-utility/-/cafe-utility-21.3.1.tgz",
+      "integrity": "sha512-6e5dovyMdaWNbWOY+gvpb8LnIwyO7D53uf5At0abjeAbp998B3hohE5aePRSPRSY8nzbNNTsUFmExKpUQaR7Bw=="
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -25958,7 +25809,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -26624,11 +26474,6 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
-    "data-uri-to-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
-      "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
-    },
     "data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -26711,8 +26556,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
-      "dev": true
     },
     "depcheck": {
       "version": "1.4.3",
@@ -27902,11 +27746,6 @@
         }
       }
     },
-    "event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
-    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -28163,11 +28002,6 @@
         "pend": "~1.2.0"
       }
     },
-    "fetch-blob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-2.1.2.tgz",
-      "integrity": "sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow=="
-    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -28387,9 +28221,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.14.5",
+      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "for-each": {
       "version": "0.3.3",
@@ -30734,20 +30568,6 @@
       "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
       "dev": true
     },
-    "ky": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/ky/-/ky-0.25.1.tgz",
-      "integrity": "sha512-PjpCEWlIU7VpiMVrTwssahkYXX1by6NCT0fhTUX34F3DTinARlgMpriuroolugFPcMgpPWrOW4mTb984Qm1RXA=="
-    },
-    "ky-universal": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/ky-universal/-/ky-universal-0.8.2.tgz",
-      "integrity": "sha512-xe0JaOH9QeYxdyGLnzUOVGK4Z6FGvDVzcXFTdrYA1f33MZdEa45sUDaMBy98xQMcsd2XIBrTXRrRYnegcSdgVQ==",
-      "requires": {
-        "abort-controller": "^3.0.0",
-        "node-fetch": "3.0.0-beta.9"
-      }
-    },
     "language-subtag-registry": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -31063,14 +30883,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
-      "dev": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -31260,15 +31078,6 @@
         }
       }
     },
-    "node-fetch": {
-      "version": "3.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0-beta.9.tgz",
-      "integrity": "sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==",
-      "requires": {
-        "data-uri-to-buffer": "^3.0.1",
-        "fetch-blob": "^2.1.1"
-      }
-    },
     "node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -31278,7 +31087,9 @@
     "node-gyp-build": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
-      "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q=="
+      "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
+      "optional": true,
+      "peer": true
     },
     "node-int64": {
       "version": "0.4.0",
@@ -32725,8 +32536,7 @@
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-      "dev": true
     },
     "psl": {
       "version": "1.8.0",
@@ -34546,11 +34356,6 @@
         "tar-stream": "^2.1.4"
       }
     },
-    "tar-js": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tar-js/-/tar-js-0.3.0.tgz",
-      "integrity": "sha1-aUmqv7C6GLsVYq5RpDn9DzAYOhc="
-    },
     "tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -35030,6 +34835,8 @@
       "version": "5.0.9",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz",
       "integrity": "sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==",
+      "optional": true,
+      "peer": true,
       "requires": {
         "node-gyp-build": "^4.3.0"
       }
@@ -35163,13 +34970,6 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
-    "web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
-      "optional": true,
-      "peer": true
-    },
     "web-vitals": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.20.1",
+  "version": "0.28.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -26,8 +26,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^5.0.0",
+    "@ethersphere/bee-js": "^7.0.3",
-    "@ethersphere/manifest-js": "1.2.1",
     "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
@@ -44,19 +43,19 @@
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
     "jszip": "^3.7.1",
+    "mantaray-js": "^1.0.3",
     "material-ui-dropzone": "3.5.0",
     "notistack": "1.0.10",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
-    "react": ">=17.0.0 || >=18.0.0",
+    "react": ">= 17.0.2",
     "react-copy-to-clipboard": "5.0.4",
-    "react-dom": ">=17.0.0 || >=18.0.0",
+    "react-dom": ">= 17.0.2",
     "react-identicons": "1.2.5",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
     "react-syntax-highlighter": "15.4.4",
     "remixicon-react": "^1.0.0",
-    "semver": "7.3.5",
     "serve-handler": "6.1.3",
     "stream": "npm:stream-browserify",
     "stream-browserify": "^3.0.0"
@@ -83,7 +82,6 @@
     "@types/react-router": "5.1.18",
     "@types/react-router-dom": "5.3.2",
     "@types/react-syntax-highlighter": "13.5.2",
-    "@types/semver": "7.3.9",
     "@typescript-eslint/eslint-plugin": "5.28.0",
     "@typescript-eslint/parser": "5.28.0",
     "babel-eslint": "10.1.0",
@@ -136,7 +134,8 @@
     "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\"",
     "check:types": "tsc --project tsconfig.lib.json",
-    "update-map-data": "node ./utils/update-map-data.js"
+    "update-map-data": "node ./utils/update-map-data.js",
+    "bee": "npx bee-factory start"
   },
   "files": [
     "lib",
@@ -158,6 +157,6 @@
   "engines": {
     "node": ">=14.0.0",
     "npm": ">=6.9.0",
-    "bee": ">=0.6.0"
+    "bee": "1.16.1-8e269c8"
   }
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
 import './App.css'
 import Dashboard from './layout/Dashboard'
@@ -18,7 +18,6 @@ import { theme } from './theme'
 
 interface Props {
   beeApiUrl?: string
-  beeDebugApiUrl?: string
   defaultRpcUrl?: string
   lockedApiSettings?: boolean
   isDesktop?: boolean
@@ -28,7 +27,6 @@ interface Props {
 
 const App = ({
   beeApiUrl,
-  beeDebugApiUrl,
   defaultRpcUrl,
   lockedApiSettings,
   isDesktop,
@@ -40,7 +38,6 @@ const App = ({
       <ThemeProvider theme={theme}>
         <SettingsProvider
           beeApiUrl={beeApiUrl}
-          beeDebugApiUrl={beeDebugApiUrl}
           defaultRpcUrl={defaultRpcUrl}
           lockedApiSettings={lockedApiSettings}
           isDesktop={isDesktop}

src/components/Card.tsx

@@ -2,6 +2,8 @@ import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
 import Check from 'remixicon-react/CheckLineIcon'
 import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
+import Connecting from 'remixicon-react/LinksLineIcon'
+import RefreshLine from 'remixicon-react/RefreshLineIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 
 interface Props {
@@ -9,7 +11,7 @@ interface Props {
   title: string
   subtitle: string
   buttonProps: SwarmButtonProps
-  status: 'ok' | 'error'
+  status: 'ok' | 'error' | 'loading' | 'connecting'
 }
 
 const useStyles = (backgroundColor: string) =>
@@ -56,12 +58,24 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
   const { className, ...rest } = buttonProps
   const classes = useStyles(backgroundColor)()
 
+  let statusIcon = null
+
+  if (status === 'ok') {
+    statusIcon = <Check size="13" color="#09ca6c" />
+  } else if (status === 'error') {
+    statusIcon = <AlertCircle size="13" color="#f44336" />
+  } else if (status === 'loading') {
+    statusIcon = <RefreshLine size="13" color="orange" />
+  } else if (status === 'connecting') {
+    statusIcon = <Connecting size="13" color="#0074D9" />
+  }
+
   return (
     <div className={classes.root}>
       <div className={classes.wrapper}>
         <div className={classes.iconWrapper}>
           {icon}
-          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
+          {statusIcon}
         </div>
         <Typography variant="h2" style={{ marginBottom: '8px' }}>
           {title}

src/components/CashoutModal.tsx

@@ -19,8 +19,8 @@ interface Props {
 export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactElement {
   const [open, setOpen] = useState<boolean>(false)
   const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
+  const { beeApi } = useContext(SettingsContext)
   const { enqueueSnackbar } = useSnackbar()
-  const { beeDebugApi } = useContext(SettingsContext)
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -31,11 +31,9 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   }
 
   const handleCashout = () => {
-    if (!beeDebugApi) return
+    if (peerId && beeApi) {
-
-    if (peerId) {
       setLoadingCashout(true)
-      beeDebugApi
+      beeApi
         .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)

src/components/ExpandableElement.tsx

@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     contentLevel12: {
       marginTop: theme.spacing(0.25),
+      '& > li:last-of-type': {
+        marginBottom: theme.spacing(2),
+      },
     },
     infoText: {
       color: '#c9c9c9',

src/components/ExpandableListItem.tsx

@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode } from 'react'
+import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
+import Info from 'remixicon-react/InformationLineIcon'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/ExpandableListItemInput.tsx

@@ -1,4 +1,4 @@
-import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
@@ -134,6 +134,7 @@ export default function ExpandableListItemKey({
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+        <Box mt={2}>
           <ExpandableListItemActions>
             <SwarmButton
               disabled={
@@ -159,6 +160,7 @@ export default function ExpandableListItemKey({
               Cancel
             </SwarmButton>
           </ExpandableListItemActions>
+        </Box>
       </Collapse>
     </>
   )

src/components/Map.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
 import type { Peer } from '@ethersphere/bee-js'
 import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
+import { CSSProperties, ReactElement, useContext, useEffect, useState } from 'react'
+import mapData from '../assets/data/map-data.json'
 import nodesDb from '../assets/data/nodes-db.json'
 import { Context } from '../providers/Bee'
-import mapData from '../assets/data/map-data.json'
 
 interface Props {
   style?: CSSProperties

src/components/ProgressBar.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react'
+import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+interface Props {
+  linearProgressProps?: LinearProgressProps
+  value: number
+}
+
+export function LinearProgressWithLabel(props: Props): ReactElement {
+  return (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box minWidth={35}>
+        <Typography variant="body2" color="textSecondary">{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}

src/components/SideBar.tsx

@@ -1,22 +1,23 @@
-import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
+import { BeeModes } from '@ethersphere/bee-js'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext } from 'react'
 import { Link } from 'react-router-dom'
 import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
 import DocsIcon from 'remixicon-react/BookOpenLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import GithubIcon from 'remixicon-react/GithubFillIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
-import { Context as BeeContext } from '../providers/Bee'
-import { Context as SettingsContext } from '../providers/Settings'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
+import { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL } from '../constants'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-import { BeeModes } from '@ethersphere/bee-js'
-import { BEE_DOCS_HOST } from '../constants'
 
 const drawerWidth = 300
 
@@ -126,6 +127,22 @@ export default function SideBar(): ReactElement {
               />
             </MUILink>
           </List>
+          <Divider className={classes.divider} />
+          <List>
+            <MUILink href={GITHUB_BEE_DASHBOARD_URL} target="_blank" className={classes.link}>
+              <SideBarItem
+                iconStart={<GithubIcon className={classes.icon} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
+                label={<span>Github repository</span>}
+              />
+            </MUILink>
+          </List>
+          <Divider className={classes.divider} />
+          <Box mt={4}>
+            <Link to={ROUTES.TOP_UP_GIFT_CODE}>
+              <Typography align="center">Redeem gift code</Typography>
+            </Link>
+          </Box>
         </Grid>
         <Grid>
           <List>

src/components/SideBarStatus.tsx

@@ -1,9 +1,9 @@
 import { ReactElement, useContext } from 'react'
-import { useLocation, matchPath } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
+import { ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
-import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Context } from '../providers/Bee'
 import StatusIcon from './StatusIcon'
 
@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     smallerText: {
       fontSize: '0.9rem',
+      whiteSpace: 'nowrap',
     },
   }),
 )

src/components/StampExtensionModal.tsx

@@ -0,0 +1,88 @@
+import { Bee } from '@ethersphere/bee-js'
+import { Box } from '@material-ui/core'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Input from '@material-ui/core/Input'
+import { useSnackbar } from 'notistack'
+import { ReactElement, ReactNode, useState } from 'react'
+
+interface Props {
+  type: 'Topup' | 'Dilute'
+  icon: ReactNode
+  bee: Bee
+  stamp: string
+}
+
+export default function StampExtensionModal({ type, icon, bee, stamp }: Props): ReactElement {
+  const [open, setOpen] = useState(false)
+  const [amount, setAmount] = useState('')
+  const { enqueueSnackbar } = useSnackbar()
+  const label = `${type} ${stamp.substring(0, 8)}`
+
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setOpen(true)
+    e.stopPropagation()
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleAction = async () => {
+    if (type === 'Topup') {
+      try {
+        await bee.topUpBatch(stamp, amount)
+        enqueueSnackbar(`Successfully topped up stamp, your changes will appear soon`, { variant: 'success' })
+      } catch (error) {
+        enqueueSnackbar(`Failed to topup stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
+      }
+    }
+
+    if (type === 'Dilute') {
+      try {
+        await bee.diluteBatch(stamp, parseInt(amount, 10))
+        enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: 'success' })
+      } catch (error) {
+        enqueueSnackbar(`Failed to dilute stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
+      }
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    setAmount(event.target.value)
+  }
+
+  return (
+    <Box mb={2}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
+        {type}
+      </Button>
+      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">{label}</DialogTitle>
+        <DialogContent>
+          <Input
+            autoFocus
+            margin="dense"
+            id="name"
+            type="text"
+            placeholder={type === 'Topup' ? 'Amount to add' : 'New depth to dilute'}
+            fullWidth
+            value={amount}
+            onChange={handleChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button disabled={amount === ''} onClick={handleAction} color="primary">
+            {type}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}

src/components/StatusIcon.tsx

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import type { ReactElement } from 'react'
 import { CheckState } from '../providers/Bee'
 
 interface Props {
@@ -25,6 +25,12 @@ export default function StatusIcon({ checkState, size, className, isLoading }: P
     case CheckState.ERROR:
       backgroundColor = '#ff3a52'
       break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.CONNECTING:
+      backgroundColor = '#0074D9'
+      break
     default:
       // Default is error
       backgroundColor = '#ff3a52'

src/components/SwarmSelect.tsx

@@ -30,6 +30,7 @@ interface Props {
   formik?: boolean
   defaultValue?: string
   placeholder?: string
+  disabled?: boolean
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -60,6 +61,7 @@ export function SwarmSelect({
   onChange,
   label,
   placeholder,
+  disabled = false,
 }: Props): ReactElement {
   const classes = useStyles()
 
@@ -69,6 +71,7 @@ export function SwarmSelect({
         {label && <FormHelperText>{label}</FormHelperText>}
         <Field
           required
+          disabled={disabled}
           component={Select}
           name={name}
           fullWidth
@@ -94,6 +97,7 @@ export function SwarmSelect({
       {label && <FormHelperText>{label}</FormHelperText>}
       <MuiSelect
         required
+        disabled={disabled}
         name={name}
         fullWidth
         variant="outlined"

src/constants.ts

@@ -6,9 +6,9 @@ export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet'
 export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/'
 export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7'
 export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee'
+export const GITHUB_BEE_DASHBOARD_URL = 'https://github.com/ethersphere/bee-dashboard.git'
 export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
 export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
   'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
 export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
-export const DEFAULT_BEE_DEBUG_API_HOST = 'http://localhost:1635'
 export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'

src/containers/DepositModal.tsx

@@ -1,12 +1,13 @@
+import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import Download from 'remixicon-react/DownloadLineIcon'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 
-import WithdrawDepositModal from '../components/WithdrawDepositModal'
-import { BigNumber } from 'bignumber.js'
-
 export default function DepositModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
 
   return (
     <WithdrawDepositModal
@@ -16,10 +17,15 @@ export default function DepositModal(): ReactElement {
       label="Deposit"
       icon={<Download size="1rem" />}
       min={new BigNumber(0)}
-      action={(amount: bigint) => {
+      action={async (amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }
 
-        return beeDebugApi.depositTokens(amount.toString())
+        const transactionHash = await beeApi.depositTokens(amount.toString())
+        refresh()
+
+        return transactionHash
       }}
     />
   )

src/containers/StakeModal.tsx

@@ -0,0 +1,43 @@
+import { BigNumber } from 'bignumber.js'
+import { ReactElement, useContext } from 'react'
+import Download from 'remixicon-react/DownloadLineIcon'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
+
+interface Props {
+  onStarted: () => void
+  onFinished: () => void
+}
+
+export default function StakeModal({ onStarted, onFinished }: Props): ReactElement {
+  const { beeApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
+
+  return (
+    <WithdrawDepositModal
+      successMessage="Successfully deposited stake."
+      errorMessage="Error with depositing"
+      dialogMessage="Specify the amount of xBZZ you would like to stake. Your first stake must be at least 10 xBZZ. This will lock your tokens."
+      label="Stake"
+      icon={<Download size="1rem" />}
+      min={new BigNumber(0)}
+      action={async (amount: bigint) => {
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }
+
+        onStarted()
+
+        try {
+          await beeApi.depositStake(amount.toString())
+        } finally {
+          refresh()
+          onFinished()
+        }
+
+        return 'unknown'
+      }}
+    />
+  )
+}

src/containers/WithdrawModal.tsx

@@ -2,10 +2,12 @@ import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
 
   return (
     <WithdrawDepositModal
@@ -15,10 +17,15 @@ export default function WithdrawModal(): ReactElement {
       label="Withdraw"
       icon={<Upload size="1rem" />}
       min={new BigNumber(0)}
-      action={(amount: bigint) => {
+      action={async (amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }
 
-        return beeDebugApi.withdrawTokens(amount.toString())
+        const transactionHash = await beeApi.withdrawTokens(amount.toString())
+        refresh()
+
+        return transactionHash
       }}
     />
   )

src/hooks/accounting.ts

@@ -1,8 +1,8 @@
-import { LastCashoutActionResponse, BeeDebug } from '@ethersphere/bee-js'
+import { Bee, LastCashoutActionResponse } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
 import { Token } from '../models/Token'
+import { Balance, Settlement, Settlements } from '../types'
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
-import { Balance, Settlements, Settlement } from '../types'
 
 interface UseAccountingHook {
   isLoadingUncashed: boolean
@@ -79,7 +79,7 @@ function mergeAccounting(
 }
 
 export const useAccounting = (
-  beeDebugApi: BeeDebug | null,
+  beeApi: Bee | null,
   settlements: Settlements | null,
   balances: Balance[] | null,
 ): UseAccountingHook => {
@@ -88,19 +88,19 @@ export const useAccounting = (
 
   useEffect(() => {
     // We don't have any settlements loaded yet or we are already loading/have loaded the uncashed amounts
-    if (isLoadingUncashed || !beeDebugApi || !settlements || uncashedAmounts) return
+    if (isLoadingUncashed || !beeApi || !settlements || uncashedAmounts) return
 
     setIsloadingUncashed(true)
     const promises = settlements.settlements
       .filter(({ received }) => received.toBigNumber.gt('0'))
-      .map(({ peer }) => makeRetriablePromise(() => beeDebugApi.getLastCashoutAction(peer)))
+      .map(({ peer }) => makeRetriablePromise(() => beeApi.getLastCashoutAction(peer)))
 
     Promise.allSettled(promises).then(settlements => {
       const results = unwrapPromiseSettlements(settlements)
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 

src/hooks/apiHooks.tsx

@@ -1,8 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { getLatestBeeDesktopVersion } from '../utils/desktop'
-import { getJson } from '../utils/net'
 import { GITHUB_REPO_URL } from '../constants'
+import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -11,6 +10,7 @@ export interface LatestBeeReleaseHook {
 }
 
 export interface BeeDesktopHook {
+  reachable: boolean
   error: Error | null
   isLoading: boolean
   beeDesktopVersion: string
@@ -22,11 +22,34 @@ export interface NewDesktopVersionHook {
 }
 
 export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
+  const [reachable, setReachable] = useState(false)
   const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
   const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
   const [isLoading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
 
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      return
+    }
+
+    function runReachabilityCheck() {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
+        })
+        .catch(() => {
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
   useEffect(() => {
     if (!isBeeDesktop) {
       setLoading(false)
@@ -48,7 +71,7 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
     }
   }, [desktopUrl, isBeeDesktop])
 
-  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }
 
 async function checkNewVersion(desktopUrl: string): Promise<string> {
@@ -85,22 +108,6 @@ export function useNewBeeDesktopVersion(
   return { newBeeDesktopVersion }
 }
 
-export interface BeeConfig {
-  'api-addr': string
-  'debug-api-addr': string
-  'debug-api-enable': boolean
-  password: string
-  'swap-enable': boolean
-  'swap-initial-deposit': bigint
-  mainnet: boolean
-  'full-node': boolean
-  'cors-allowed-origins': string
-  'resolver-options': string
-  'use-postage-snapshot': boolean
-  'data-dir': string
-  'swap-endpoint'?: string
-}
-
 export interface GetBeeConfig {
   config: BeeConfig | null
   isLoading: boolean
@@ -113,7 +120,7 @@ export const useGetBeeConfig = (desktopUrl: string): GetBeeConfig => {
   const [error, setError] = useState<Error | null>(null)
 
   useEffect(() => {
-    getJson<BeeConfig>(`${desktopUrl}/config`)
+    getDesktopConfiguration(desktopUrl)
       .then(beeConf => {
         setBeeConfig(beeConf)
         setError(null)

src/index.tsx

@@ -1,24 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
 import App from './App'
+import './index.css'
 import reportWebVitals from './reportWebVitals'
 
 const desktopEnabled = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED)
 const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
 const beeApiUrl = process.env.REACT_APP_BEE_HOST
-const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_HOST
 const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
 
 ReactDOM.render(
   <React.StrictMode>
-    <App
+    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
-      isDesktop={desktopEnabled}
-      desktopUrl={desktopUrl}
-      beeApiUrl={beeApiUrl}
-      beeDebugApiUrl={beeDebugApiUrl}
-      defaultRpcUrl={defaultRpcUrl}
-    />
   </React.StrictMode>,
   document.getElementById('root'),
 )

src/layout/Dashboard.tsx

@@ -1,14 +1,14 @@
 import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
-import React, { ReactElement, useContext, useEffect } from 'react'
 import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useEffect } from 'react'
 import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
-import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -27,53 +27,12 @@ interface Props {
 const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
-  const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } =
+  const { isLoading } = useContext(BeeContext)
-    useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
-  // New version of Bee client notification
-  useEffect(() => {
-    if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
-      enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, {
-        variant: 'warning',
-        preventDuplicate: true,
-        key: 'beeNewVersion',
-        persist: true,
-        action: key => (
-          <React.Fragment>
-            <Button
-              onClick={() => {
-                window.open(latestBeeVersionUrl)
-                closeSnackbar(key)
-              }}
-            >
-              Download release
-            </Button>
-            <IconButton
-              onClick={() => {
-                closeSnackbar(key)
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
-          </React.Fragment>
-        ),
-      })
-    }
-  }, [
-    closeSnackbar,
-    enqueueSnackbar,
-    isLatestBeeVersion,
-    isDesktop,
-    latestBeeRelease,
-    latestBeeVersionUrl,
-    isLoading,
-    latestUserVersion,
-  ])
-
   useEffect(() => {
     // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
     if (desktopAutoUpdateEnabled) {

src/models/BzzToken.ts

@@ -1,8 +1,14 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
+export const BZZ_DECIMAL_PLACES = 16
+
 export class BzzToken extends Token {
-  constructor(amount: BigNumber | string | bigint) {
+  constructor(value: BigNumber | string | bigint) {
-    super(amount, 16)
+    super(value, BZZ_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): BzzToken {
+    return Token.fromDecimal(value, BZZ_DECIMAL_PLACES)
   }
 }

src/models/DaiToken.ts

@@ -1,8 +1,14 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
+const DAI_DECIMAL_PLACES = 18
+
 export class DaiToken extends Token {
-  constructor(amount: BigNumber | string | bigint) {
+  constructor(value: BigNumber | string | bigint) {
-    super(amount, 18)
+    super(value, DAI_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): DaiToken {
+    return Token.fromDecimal(value, DAI_DECIMAL_PLACES)
   }
 }

src/models/Token.ts

@@ -87,4 +87,11 @@ export class Token {
       this.decimals,
     )
   }
+
+  plusBaseUnits(amount: string): Token {
+    return new Token(
+      this.toBigNumber.plus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+      this.decimals,
+    )
+  }
 }

src/pages/account/AccountNavigation.tsx

@@ -1,6 +1,8 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
-import { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Context } from '../../providers/Bee'
 import { ACCOUNT_TABS } from '../../routes'
 
 const tabMap = {
@@ -8,10 +10,11 @@ const tabMap = {
   CHEQUEBOOK: 1,
   STAMPS: 2,
   FEEDS: 3,
+  STAKING: 4,
 }
 
 interface Props {
-  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
+  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS' | 'STAKING'
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -20,16 +23,12 @@ const useStyles = makeStyles((theme: Theme) =>
       flexGrow: 1,
       marginBottom: theme.spacing(4),
       textTransform: 'none',
+      marginLeft: theme.spacing(-0.25),
+      marginRight: theme.spacing(-0.25),
     },
-    leftTab: {
+    tab: {
-      marginRight: theme.spacing(0.125),
+      marginLeft: theme.spacing(0.25),
-    },
+      marginRight: theme.spacing(0.25),
-    centerTab: {
-      marginLeft: theme.spacing(0.125),
-      marginRight: theme.spacing(0.125),
-    },
-    rightTab: {
-      marginLeft: theme.spacing(0.125),
     },
   }),
 )
@@ -37,6 +36,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export function AccountNavigation({ active }: Props): ReactElement {
   const classes = useStyles()
   const navigate = useNavigate()
+  const { nodeInfo } = useContext(Context)
 
   function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
     navigate(ACCOUNT_TABS[newValue])
@@ -45,10 +45,11 @@ export function AccountNavigation({ active }: Props): ReactElement {
   return (
     <div className={classes.root}>
       <Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
-        <Tab className={classes.leftTab} key="WALLET" label="Wallet" />
+        <Tab className={classes.tab} key="WALLET" label="Wallet" />
-        <Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
+        <Tab className={classes.tab} key="CHEQUEBOOK" label="Chequebook" />
-        <Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
+        <Tab className={classes.tab} key="STAMPS" label="Stamps" />
-        <Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
+        <Tab className={classes.tab} key="FEEDS" label="Feeds" />
+        {nodeInfo?.beeMode === BeeModes.FULL ? <Tab className={classes.tab} key="STAKING" label="Staking" /> : null}
       </Tabs>
     </div>
   )

src/pages/account/chequebook/AccountChequebook.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
@@ -7,7 +8,7 @@ import TroubleshootConnectionCard from '../../../components/TroubleshootConnecti
 import DepositModal from '../../../containers/DepositModal'
 import WithdrawModal from '../../../containers/WithdrawModal'
 import { useAccounting } from '../../../hooks/accounting'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import PeerBalances from '../../accounting/PeerBalances'
 import { AccountNavigation } from '../AccountNavigation'
@@ -16,9 +17,9 @@ import { Header } from '../Header'
 export function AccountChequebook(): ReactElement {
   const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
     useContext(BeeContext)
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
 
-  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeApi, settlements, peerBalances)
 
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
@@ -43,10 +44,12 @@ export function AccountChequebook(): ReactElement {
               label="Total Cheques Amount Sent"
               value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
             />
+            <Box mb={2}>
               <ExpandableListItem
                 label="Total Cheques Amount Received"
                 value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
               />
+            </Box>
             <ExpandableListItemActions>
               <WithdrawModal />
               <DepositModal />

src/pages/account/staking/AccountStaking.tsx

@@ -0,0 +1,53 @@
+import { ReactElement, useContext, useState } from 'react'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import { Loading } from '../../../components/Loading'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import StakeModal from '../../../containers/StakeModal'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BalanceContext } from '../../../providers/WalletBalance'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountStaking(): ReactElement {
+  const [loading, setLoading] = useState(false)
+
+  const { status, stake } = useContext(BeeContext)
+  const { balance } = useContext(BalanceContext)
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  function onStarted() {
+    setLoading(true)
+  }
+
+  function onFinished() {
+    setLoading(false)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="STAKING" />
+      <div>
+        {loading || stake?.toDecimal === undefined ? (
+          <Loading />
+        ) : (
+          <ExpandableList label="Staking" defaultOpen>
+            <ExpandableListItem label="Staked BZZ" value={`${stake?.toSignificantDigits()} xBZZ`} />
+            {balance?.bzz ? (
+              <ExpandableListItem
+                label="Available xBZZ balance"
+                value={`${balance?.bzz.toSignificantDigits(4)} xBZZ`}
+              />
+            ) : null}
+            <ExpandableListItemActions>
+              <StakeModal onStarted={onStarted} onFinished={onFinished} />
+            </ExpandableListItemActions>
+          </ExpandableList>
+        )}
+      </div>
+    </>
+  )
+}

src/pages/account/stamps/AccountStamps.tsx

@@ -1,10 +1,11 @@
 import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as StampsContext } from '../../../providers/Stamps'
 import { ROUTES } from '../../../routes'
 import StampsTable from '../../stamps/StampsTable'
@@ -45,7 +46,7 @@ export function AccountStamps(): ReactElement {
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
-    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW_STANDARD)
   }
 
   return (
@@ -55,7 +56,8 @@ export function AccountStamps(): ReactElement {
       <div className={classes.root}>
         {error && (
           <Container style={{ textAlign: 'center', padding: '50px' }}>
-            Error loading postage stamps details: {error.message}
+            <Loading />
+            {error.message}
           </Container>
         )}
         {!error && (

src/pages/account/wallet/AccountWallet.tsx

@@ -11,7 +11,7 @@ import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import { Context as BalanceProvider } from '../../../providers/WalletBalance'
 import { ROUTES } from '../../../routes'
@@ -46,9 +46,11 @@ export function AccountWallet(): ReactElement {
       <Box mb={4}>
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           <Typography variant="h2">Wallet balance</Typography>
+          {isDesktop && (
             <SwarmButton onClick={onDeposit} iconType={Download}>
               Top up wallet
             </SwarmButton>
+          )}
         </Grid>
       </Box>
       {balance && nodeAddresses ? (

src/pages/accounting/PeerBalances.tsx

@@ -14,13 +14,15 @@ interface Props {
 }
 
 export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
+  const uncashedPeers = accounting?.filter(({ uncashedAmount }) => uncashedAmount.toBigNumber.isGreaterThan('0')) || []
+
   return (
     <ExpandableList
-      label={`Peers (${accounting?.length || 0})`}
+      label={`Peers (${uncashedPeers.length})`}
       info={`${totalUncashed.toFixedDecimal()} xBZZ (uncashed)`}
     >
       <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} xBZZ`} />
-      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
+      {uncashedPeers.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
         <ExpandableList
           key={peer}
           label={`Peer ${peer.slice(0, 8)}[…]`}

src/pages/feeds/CreateNewFeed.tsx

@@ -2,9 +2,9 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
+import { useNavigate } from 'react-router'
 import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
-import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -30,7 +30,7 @@ const initialValues: FormValues = {
 }
 
 export default function CreateNewFeed(): ReactElement {
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { identities, setIdentities } = useContext(FeedsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
@@ -47,7 +47,7 @@ export default function CreateNewFeed(): ReactElement {
       return
     }
     const wallet = generateWallet()
-    const stamps = await beeDebugApi?.getAllPostageBatch()
+    const stamps = await beeApi.getAllPostageBatch()
 
     if (!stamps || !stamps.length) {
       enqueueSnackbar(<span>No stamp available</span>, { variant: 'error' })

src/pages/feeds/FeedSubpage.tsx

@@ -1,12 +1,10 @@
-import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate, useParams } from 'react-router-dom'
+import X from 'remixicon-react/CloseLineIcon'
 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'
@@ -55,14 +53,8 @@ export function FeedSubpage(): ReactElement {
       <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
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
-              label="BZZ Link"
-              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
-            />
           </Box>
         </>
       ) : (

src/pages/feeds/UpdateFeed.tsx

@@ -1,16 +1,16 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import X from 'remixicon-react/CloseLineIcon'
-import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 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 { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampContext } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
@@ -19,7 +19,7 @@ import { FeedPasswordDialog } from './FeedPasswordDialog'
 
 export default function UpdateFeed(): ReactElement {
   const { identities, setIdentities } = useContext(IdentityContext)
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { stamps, refresh } = useContext(StampContext)
   const { status } = useContext(BeeContext)
   const { hash } = useParams()
@@ -66,7 +66,7 @@ export default function UpdateFeed(): ReactElement {
   async function onFeedUpdate(identity: Identity, password?: string) {
     setLoading(true)
 
-    if (!beeApi || !beeDebugApi || !selectedStamp) {
+    if (!beeApi || !selectedStamp) {
       enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
       setLoading(false)
 
@@ -74,7 +74,7 @@ export default function UpdateFeed(): ReactElement {
     }
 
     try {
-      await updateFeed(beeApi, beeDebugApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
       persistIdentity(identities, identity)
       setIdentities([...identities])
       navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', identity.uuid))

src/pages/files/AssetSummary.tsx

@@ -1,7 +1,6 @@
-import * as swarmCid from '@ethersphere/swarm-cid'
+import { Utils } from '@ethersphere/bee-js'
 import { Box } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Utils } from '@ethersphere/bee-js'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import ExpandableListItemLink from '../../components/ExpandableListItemLink'
@@ -19,16 +18,6 @@ export function AssetSummary({ isWebsite, reference }: Props): ReactElement {
       <Box mb={4}>
         {isHash && <ExpandableListItemKey label="Swarm hash" value={reference} />}
         {!isHash && <ExpandableListItemLink label="ENS" value={reference} />}
-        <ExpandableListItemLink
-          label="Share on Swarm Gateway"
-          value={`https://gateway.ethswarm.org/access/${reference}`}
-        />
-        {isWebsite && isHash && (
-          <ExpandableListItemLink
-            label="BZZ Link"
-            value={`https://${swarmCid.encodeManifestReference(reference).toString()}.bzz.link`}
-          />
-        )}
       </Box>
       <DocumentationText>
         The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided

src/pages/files/AssetSyncing.tsx

@@ -0,0 +1,85 @@
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Box } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
+import { DocumentationText } from '../../components/DocumentationText'
+import { LinearProgressWithLabel } from '../../components/ProgressBar'
+
+interface Props {
+  reference: string
+}
+
+export function AssetSyncing({ reference }: Props): ReactElement {
+  const { beeApi } = useContext(SettingsContext)
+
+  const syncTimer = useRef<NodeJS.Timer>()
+  const [isRetrieveChecking, setIsRetrieveChecking] = useState<boolean>(false)
+  const [syncProgress, setSyncProgress] = useState<number>(0)
+
+  const syncCheck = async () => {
+    if (!beeApi) {
+      return
+    }
+
+    const tags = await beeApi.getAllTags()
+    const tag = tags.find(t => t.address === reference)
+
+    if (tag) {
+      const progress = ((tag.seen + tag.synced) / tag.split) * 100
+      setSyncProgress(progress)
+    }
+  }
+
+  useEffect(() => {
+    syncTimer.current = setInterval(syncCheck, 2000)
+
+    return () => {
+      if (syncTimer.current) {
+        clearInterval(syncTimer.current)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reference])
+
+  useEffect(() => {
+    if (syncProgress === 100 && syncTimer.current) {
+      clearInterval(syncTimer.current)
+    }
+  }, [syncProgress])
+
+  useEffect(() => {
+    /*   
+          There are instances when it seems that the content isn't synchronized, despite being already available.
+          To ensure it's not due to invalid synchronization data,
+          verify availability from at least 70% using one of the stewardship endpoints.
+          
+          TODO: is 70 a good number?
+    */
+    if (beeApi && !isRetrieveChecking && syncProgress > 10 && syncProgress < 100) {
+      // It's a long running task make sure only one run occurs at a time.
+      setIsRetrieveChecking(true)
+
+      beeApi.isReferenceRetrievable(reference).then(isRetriavable => {
+        if (isRetriavable) {
+          setSyncProgress(100)
+        }
+
+        setIsRetrieveChecking(false)
+      })
+    }
+  }, [syncProgress, isRetrieveChecking, beeApi, reference])
+
+  return (
+    <>
+      <Box mb={2}>
+        <DocumentationText>
+          Files are not immediately accessible on the Swarm network. Please wait until your upload is synced to the
+          network.{' '}
+          <a href="https://docs.ethswarm.org/docs/develop/access-the-swarm/syncing">Learn more about syncing</a>.
+        </DocumentationText>
+      </Box>
+      <Box mb={4}>
+        <LinearProgressWithLabel value={syncProgress}></LinearProgressWithLabel>
+      </Box>
+    </>
+  )
+}

src/pages/files/Download.tsx

@@ -1,17 +1,17 @@
 import { BeeModes, 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 Search from 'remixicon-react/SearchLineIcon'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as FileContext, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
-import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { HISTORY_KEYS, determineHistoryName, putHistory } from '../../utils/local-storage'
+import { ManifestJs } from '../../utils/manifest'
 import { FileNavigation } from './FileNavigation'
 
 export function Download(): ReactElement {
@@ -34,9 +34,7 @@ export function Download(): ReactElement {
     ) {
       setReferenceError(undefined)
     } else {
-      setReferenceError(
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters or ENS domain.')
-        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
-      )
     }
   }
 

src/pages/files/Share.tsx

@@ -1,4 +1,3 @@
-import { ManifestJs } from '@ethersphere/manifest-js'
 import { Box, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
@@ -13,9 +12,11 @@ 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 { ManifestJs } from '../../utils/manifest'
 import { AssetPreview } from './AssetPreview'
 import { AssetSummary } from './AssetSummary'
 import { DownloadActionBar } from './DownloadActionBar'
+import { AssetSyncing } from './AssetSyncing'
 
 export function Share(): ReactElement {
   const { apiUrl, beeApi } = useContext(SettingsContext)
@@ -152,6 +153,9 @@ export function Share(): ReactElement {
       <Box mb={4}>
         <AssetSummary isWebsite={metadata?.isWebsite} reference={reference} />
       </Box>
+      <Box mb={4}>
+        <AssetSyncing reference={reference} />
+      </Box>
       <DownloadActionBar
         onOpen={onOpen}
         onCancel={onClose}

src/pages/files/Upload.tsx

@@ -7,18 +7,18 @@ import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../providers/Bee'
-import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
+import { EnrichedPostageBatch, Context as StampsContext } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
 import { waitUntilStampUsable } from '../../utils'
 import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
-import { PostageStampCreation } from '../stamps/PostageStampCreation'
+import { PostageStampAdvancedCreation } from '../stamps/PostageStampAdvancedCreation'
 import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
@@ -32,7 +32,7 @@ export function Upload(): ReactElement {
   const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
   const { stamps, refresh } = useContext(StampsContext)
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
   const { identities, setIdentities } = useContext(IdentityContext)
   const { status } = useContext(BeeContext)
@@ -125,25 +125,21 @@ export function Upload(): ReactElement {
 
     setUploading(true)
 
-    if (beeDebugApi) {
+    await waitUntilStampUsable(stamp.batchID, beeApi)
-      await waitUntilStampUsable(stamp.batchID, beeDebugApi)
-    }
 
     beeApi
-      .uploadFiles(stamp.batchID, fls, { indexDocument })
+      .uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
       .then(hash => {
         putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
 
         if (uploadOrigin.origin === 'UPLOAD') {
           navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
         } else {
-          updateFeed(beeApi, beeDebugApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(
+          updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
-            () => {
             persistIdentity(identities, identity as Identity)
             setIdentities([...identities])
             navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
-            },
+          })
-          )
         }
       })
       .catch(e => {
@@ -186,7 +182,7 @@ export function Upload(): ReactElement {
             {hasAnyStamps && stampMode === 'SELECT' ? (
               <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
             ) : (
-              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
+              <PostageStampAdvancedCreation onFinished={() => setStampMode('SELECT')} />
             )}
           </Box>
           <Box mb={4}>
@@ -204,7 +200,16 @@ export function Upload(): ReactElement {
           </Box>
         </>
       )}
-      {step === 2 && stamp && <StampPreview stamp={stamp} />}
+      {step === 2 && stamp && (
+        <>
+          <StampPreview stamp={stamp} />
+          <Box mb={4}>
+            <DocumentationText>
+              Please do not close the application until your file is uploaded to your local node!
+            </DocumentationText>
+          </Box>
+        </>
+      )}
       <UploadActionBar
         step={step}
         onCancel={reset}

src/pages/gift-code/index.tsx

@@ -1,22 +1,22 @@
 import { Box, Tooltip, Typography } from '@material-ui/core'
+import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
 import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
-import { useNavigate } from 'react-router'
-import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
+import { Token } from '../../models/Token'
-import { Context as TopUpContext } from '../../providers/TopUp'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { createGiftWallet } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
-import { Token } from '../../models/Token'
 
 const GIFT_WALLET_FUND_DAI_AMOUNT = Token.fromDecimal('0.1', 18)
 const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16)
@@ -31,6 +31,9 @@ export default function Index(): ReactElement {
 
   useEffect(() => {
     async function mapGiftWallets() {
+      if (!rpcProvider) {
+        return
+      }
       const results = []
       for (const giftWallet of giftWallets) {
         results.push(await ResolvedWallet.make(giftWallet, rpcProvider))

src/pages/info/ChequebookInfoCard.tsx

@@ -0,0 +1,48 @@
+import { useContext } from 'react'
+import { useNavigate } from 'react-router'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Card from '../../components/Card'
+import { Context as BeeContext } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export function ChequebookInfoCard() {
+  const { chequebookBalance } = useContext(BeeContext)
+  const navigate = useNavigate()
+
+  if (
+    chequebookBalance?.availableBalance !== undefined &&
+    chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0)
+  ) {
+    return (
+      <Card
+        buttonProps={{
+          iconType: ExchangeFunds,
+          children: 'View chequebook',
+          onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+        }}
+        icon={<ExchangeFunds />}
+        title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
+        subtitle="Current chequebook balance."
+        status="ok"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{
+        iconType: ExchangeFunds,
+        children: 'View chequebook',
+        onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+      }}
+      icon={<ExchangeFunds />}
+      title={
+        chequebookBalance?.availableBalance
+          ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
+          : 'No available balance.'
+      }
+      subtitle="Chequebook not setup."
+      status="error"
+    />
+  )
+}

src/pages/info/NodeInfoCard.tsx

@@ -1,17 +1,41 @@
 import { ReactElement, useContext } from 'react'
-import Search from 'remixicon-react/SearchLineIcon'
 import Globe from 'remixicon-react/GlobalLineIcon'
+import Search from 'remixicon-react/SearchLineIcon'
 import Settings from 'remixicon-react/Settings2LineIcon'
 
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
-import Card from '../../components/Card'
 import { useNavigate } from 'react-router'
+import Card from '../../components/Card'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
 export default function NodeInfoCard(): ReactElement {
   const { status } = useContext(BeeContext)
   const navigate = useNavigate()
 
+  if (status.all === CheckState.CONNECTING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Connecting..."
+        subtitle="Attempting to establish connection to your Bee node."
+        status="connecting"
+      />
+    )
+  }
+
+  if (status.all === CheckState.STARTING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Starting up..."
+        subtitle="Your Bee node is currently launching."
+        status="loading"
+      />
+    )
+  }
+
   if (status.all === CheckState.ERROR) {
     return (
       <Card

src/pages/info/WalletInfoCard.tsx

@@ -0,0 +1,53 @@
+import { useContext } from 'react'
+import { useNavigate } from 'react-router'
+import Upload from 'remixicon-react/UploadLineIcon'
+import Wallet from 'remixicon-react/Wallet3LineIcon'
+import Card from '../../components/Card'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
+import { ROUTES } from '../../routes'
+
+export function WalletInfoCard() {
+  const { nodeInfo } = useContext(BeeContext)
+  const { balance, error } = useContext(BalanceProvider)
+  const navigate = useNavigate()
+
+  let balanceText = 'Loading...'
+
+  if (error) {
+    balanceText = 'Could not load...'
+    console.error(error) // eslint-disable-line
+  } else if (balance) {
+    balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
+  }
+
+  if (nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode)) {
+    return (
+      <Card
+        buttonProps={{
+          iconType: Wallet,
+          children: 'Manage your wallet',
+          onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
+        }}
+        icon={<Wallet />}
+        title={balanceText}
+        subtitle="Current wallet balance."
+        status="ok"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{
+        iconType: Wallet,
+        children: 'Setup wallet',
+        onClick: () => navigate(ROUTES.TOP_UP),
+      }}
+      icon={<Upload />}
+      title="Your wallet is not setup."
+      subtitle="To share content on Swarm, please setup your wallet."
+      status="error"
+    />
+  )
+}

src/pages/info/index.tsx

@@ -1,112 +1,30 @@
 import { Button } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { useNavigate } from 'react-router'
-import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
-import Upload from 'remixicon-react/UploadLineIcon'
-import Wallet from 'remixicon-react/Wallet3LineIcon'
-import Card from '../../components/Card'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import Map from '../../components/Map'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
 import { useBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
-import { ROUTES } from '../../routes'
 import { chainIdToName } from '../../utils/chain'
+import { ChequebookInfoCard } from './ChequebookInfoCard'
 import NodeInfoCard from './NodeInfoCard'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
+import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
-  const {
+  const { beeVersion, status, topology, nodeInfo, chainId } = useContext(BeeContext)
-    status,
-    latestUserVersion,
-    isLatestBeeVersion,
-    latestBeeVersionUrl,
-    topology,
-    nodeInfo,
-    chequebookBalance,
-    chainId,
-  } = useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
-  const { balance, error } = useContext(BalanceProvider)
   const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
-  const navigate = useNavigate()
-
-  let balanceText = 'Loading...'
-
-  if (error) {
-    balanceText = 'Could not load...'
-    console.error(error) // eslint-disable-line
-  } else if (balance) {
-    balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
-  }
 
   return (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
         <NodeInfoCard />
         <div style={{ width: '8px' }}></div>
-        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
+        <WalletInfoCard />
-          <Card
+        <div style={{ width: '8px' }}></div>
-            buttonProps={{
+        <ChequebookInfoCard />
-              iconType: Wallet,
-              children: 'Manage your wallet',
-              onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
-            }}
-            icon={<Wallet />}
-            title={balanceText}
-            subtitle="Current wallet balance."
-            status="ok"
-          />
-        ) : (
-          <Card
-            buttonProps={{
-              iconType: Wallet,
-              children: 'Setup wallet',
-              onClick: () => navigate(ROUTES.TOP_UP),
-            }}
-            icon={<Upload />}
-            title="Your wallet is not setup."
-            subtitle="To share content on Swarm, please setup your wallet."
-            status="error"
-          />
-        )}
-        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && (
-          <>
-            <div style={{ width: '8px' }} />
-            {chequebookBalance?.availableBalance !== undefined &&
-            chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
-              <Card
-                buttonProps={{
-                  iconType: ExchangeFunds,
-                  children: 'View chequebook',
-                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
-                }}
-                icon={<ExchangeFunds />}
-                title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-                subtitle="Current chequebook balance."
-                status="ok"
-              />
-            ) : (
-              <Card
-                buttonProps={{
-                  iconType: ExchangeFunds,
-                  children: 'View chequebook',
-                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
-                }}
-                icon={<ExchangeFunds />}
-                title={
-                  chequebookBalance?.availableBalance
-                    ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
-                    : 'No available balance.'
-                }
-                subtitle="Chequebook not setup."
-                status="error"
-              />
-            )}
-          </>
-        )}
       </div>
       <div style={{ height: '16px' }} />
       <Map error={status.topology.checkState !== 'OK'} />
@@ -134,31 +52,9 @@ export default function Status(): ReactElement {
           }
         />
       )}
-      <ExpandableListItem
+      <ExpandableListItem label="Bee version" value={beeVersion} />
-        label="Bee version"
-        value={
-          <div>
-            <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-              Bee
-            </a>
-            {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && !isDesktop && (
-              <Button
-                size="small"
-                variant="outlined"
-                href={latestBeeVersionUrl}
-                disabled={isLatestBeeVersion}
-                target="_blank"
-                style={{ height: '26px' }}
-              >
-                {isLatestBeeVersion ? 'latest' : 'update'}
-              </Button>
-            )}
-          </div>
-        }
-      />
       <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
-      {chainId && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
+      {chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
     </div>
   )
 }

src/pages/restart/LightModeRestart.tsx

@@ -1,5 +1,6 @@
 import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Waiting } from '../../components/Waiting'
@@ -12,6 +13,7 @@ export default function LightModeRestart(): ReactElement {
   const [startedAt] = useState(Number.parseInt(localStorage.getItem(STARTED_UPGRADE_AT) ?? Date.now().toFixed()))
   const { apiHealth, nodeInfo } = useContext(Context)
   const navigate = useNavigate()
+  const { enqueueSnackbar } = useSnackbar()
 
   useEffect(() => {
     localStorage.setItem(STARTED_UPGRADE_AT, startedAt.toFixed())
@@ -23,10 +25,11 @@ export default function LightModeRestart(): ReactElement {
     }
 
     if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       localStorage.removeItem(STARTED_UPGRADE_AT)
       navigate(ROUTES.INFO)
     }
-  }, [startedAt, navigate, nodeInfo, apiHealth])
+  }, [startedAt, navigate, nodeInfo, apiHealth, enqueueSnackbar])
 
   return (
     <Grid container direction="column" justifyContent="center" alignItems="center">

src/pages/settings/index.tsx

@@ -1,19 +1,16 @@
 import CircularProgress from '@material-ui/core/CircularProgress'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { useSnackbar } from 'notistack'
+import { getDesktopConfiguration, restartBeeNode, setJsonRpcInDesktop } from '../../utils/desktop'
-import { restartBeeNode, setJsonRpcInDesktop } from '../../utils/desktop'
-import { BeeModes } from '@ethersphere/bee-js'
 
 export default function SettingsPage(): ReactElement {
   const {
     apiUrl,
-    apiDebugUrl,
     setApiUrl,
-    setDebugApiUrl,
     lockedApiSettings,
     cors,
     dataDir,
@@ -24,17 +21,17 @@ export default function SettingsPage(): ReactElement {
     desktopUrl,
     setAndPersistJsonRpcProvider,
   } = useContext(SettingsContext)
-  const { refresh, nodeInfo } = useContext(BeeContext)
+  const { refresh } = useContext(BeeContext)
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
   async function handleSetRpcUrl(value: string) {
     try {
       setAndPersistJsonRpcProvider(value)
 
-      // We can't set the RPC URL to the `swap-endpoint` Bee config value unless the Bee node is already in
+      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['blockchain-rpc-endpoint']
-      // light mode as setting this config value, basically upgrades the node to light mode.
+
-      if (isDesktop && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      if (shouldUpdateDesktop) {
-        await setJsonRpcInDesktop(desktopUrl, rpcProviderUrl)
+        await setJsonRpcInDesktop(desktopUrl, value)
         const snackKey = enqueueSnackbar('RPC endpoint successfully changed, restarting Bee node...', {
           variant: 'success',
         })
@@ -48,7 +45,7 @@ export default function SettingsPage(): ReactElement {
       await refresh()
     } catch (e) {
       console.error(e) //eslint-disable-line
-      enqueueSnackbar(`Failed to change RPC endpoint. Error: ${e}`, { variant: 'error' })
+      enqueueSnackbar(`Failed to change RPC endpoint. ${e}`, { variant: 'error' })
     }
   }
 
@@ -69,12 +66,6 @@ export default function SettingsPage(): ReactElement {
           onConfirm={setApiUrl}
           locked={lockedApiSettings || isDesktop}
         />
-        <ExpandableListItemInput
-          label="Bee Debug API"
-          value={apiDebugUrl}
-          onConfirm={setDebugApiUrl}
-          locked={lockedApiSettings || isDesktop}
-        />
         <ExpandableListItemInput
           label="Blockchain RPC URL"
           value={rpcProviderUrl}

src/pages/stamps/CreatePostageStampAdvancedPage.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react'
 import { useNavigate } from 'react-router'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ROUTES } from '../../routes'
-import { PostageStampCreation } from './PostageStampCreation'
+import { PostageStampAdvancedCreation } from './PostageStampAdvancedCreation'
 
 export function CreatePostageStampPage(): ReactElement {
   const navigate = useNavigate()
@@ -13,8 +13,8 @@ export function CreatePostageStampPage(): ReactElement {
 
   return (
     <div>
-      <HistoryHeader>Buy new postage stamp</HistoryHeader>
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
-      <PostageStampCreation onFinished={onFinished} />
+      <PostageStampAdvancedCreation onFinished={onFinished} />
     </div>
   )
 }

src/pages/stamps/CreatePostageStampStandardPage.tsx

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

src/pages/stamps/PostageStampAdvancedCreation.tsx

@@ -0,0 +1,295 @@
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
+import { Box, Grid, IconButton, Typography, createStyles, makeStyles } from '@material-ui/core'
+import BigNumber from 'bignumber.js'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Check from 'remixicon-react/CheckLineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmSelect } from '../../components/SwarmSelect'
+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 { ROUTES } from '../../routes'
+import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
+import { getHumanReadableFileSize } from '../../utils/file'
+
+interface Props {
+  onFinished: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+    stampVolumeWrapper: {
+      width: 'fit-content',
+      '& button': {
+        marginLeft: 4,
+        width: 24,
+        padding: 2,
+      },
+    },
+  }),
+)
+
+export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
+  const { chainState } = useContext(BeeContext)
+  const { refresh } = useContext(StampsContext)
+  const { beeApi } = useContext(SettingsContext)
+
+  const [depthInput, setDepthInput] = useState<string>('')
+  const [amountInput, setAmountInput] = useState<string>('')
+  const [labelInput, setLabelInput] = useState('')
+  const [immutable, setImmutable] = useState(false)
+  const [depthError, setDepthError] = useState<string>('')
+  const [amountError, setAmountError] = useState<string>('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  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 ${pricePerBlock.toFixed(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()} xBZZ`
+  }
+
+  async function submit() {
+    try {
+      // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+      if (!depthInput || !amountInput) {
+        return
+      }
+
+      if (!beeApi) {
+        return
+      }
+
+      setSubmitting(true)
+      const amount = BigInt(amountInput)
+      const depth = Number.parseInt(depthInput)
+      const options: PostageBatchOptions = {
+        waitForUsable: false,
+        label: labelInput || undefined,
+        immutableFlag: immutable,
+      }
+
+      const batchId = await beeApi.createPostageBatch(amount.toString(), depth, options)
+      await waitUntilStampExists(batchId, beeApi)
+      await refresh()
+      onFinished()
+    } catch (e) {
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+    }
+    setSubmitting(false)
+  }
+
+  function validateAmountInput(amountInput: string) {
+    let validAmountInput = '0'
+
+    if (!amountInput) {
+      setAmountError('Required field')
+    } else {
+      if (amountInput.indexOf('.') > -1) {
+        setAmountError('Amount must be an integer')
+      } else {
+        const amount = new BigNumber(amountInput)
+
+        if (amount.isNaN()) {
+          setAmountError('Amount must contain only digits')
+        } else if (amount.isLessThanOrEqualTo(0)) {
+          setAmountError('Amount must be greater than 0')
+        } else {
+          setAmountError('')
+          validAmountInput = amountInput
+        }
+      }
+    }
+
+    setAmountInput(validAmountInput)
+  }
+
+  function validateDepthInput(depthInput: string) {
+    let validDepthInput = '0'
+
+    if (!depthInput) {
+      setDepthError('Required field')
+    } else {
+      const depth = new BigNumber(depthInput)
+
+      if (!depth.isInteger()) {
+        setDepthError('Depth must be an integer')
+      } else if (depth.isLessThan(17)) {
+        setDepthError('Minimal depth is 17')
+      } else if (depth.isGreaterThan(255)) {
+        setDepthError('Depth has to be at most 255')
+      } else {
+        setDepthError('')
+        validDepthInput = depthInput
+      }
+    }
+
+    setDepthInput(validDepthInput)
+  }
+
+  function renderStampVolumesInfo() {
+    const depth = parseInt(depthInput, 10)
+
+    if (depthError || isNaN(depth) || depth < 17 || depth > 255) {
+      return '-'
+    }
+
+    const theoreticalMaximumVolume = getHumanReadableFileSize(Utils.getStampMaximumCapacityBytes(depth))
+    const effectiveVolume = getHumanReadableFileSize(Utils.getStampEffectiveBytes(depth))
+
+    return (
+      <Grid item container alignItems="center" className={classes.stampVolumeWrapper}>
+        <Typography>
+          Theoretical: ~{theoreticalMaximumVolume} / Effective: ~{effectiveVolume}
+        </Typography>
+        <IconButton
+          onClick={() =>
+            window.open(
+              'https://docs.ethswarm.org/docs/learn/technology/contracts/postage-stamp/#effective-utilisation-table',
+              '_blank',
+              'noopener,noreferrer',
+            )
+          }
+        >
+          <Info />
+        </IconButton>
+      </Grid>
+    )
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <Typography>
+          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
+          this, please read{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="depth" label="Depth" onChange={event => validateDepthInput(event.target.value)} />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between" alignItems="center">
+            <Typography>Corresponding file size</Typography>
+            {renderStampVolumesInfo()}
+          </Grid>
+        </Box>
+        {depthError && <Typography>{depthError}</Typography>}
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="amount" label="Amount" onChange={event => validateAmountInput(event.target.value)} />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding TTL (Time to live)</Typography>
+            <Typography>{!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
+          </Grid>
+        </Box>
+        {amountError && <Typography>{amountError}</Typography>}
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="label" label="Label" optional onChange={event => setLabelInput(event.target.value)} />
+      </Box>
+      <Box mb={2}>
+        <SwarmSelect
+          label="Immutable"
+          defaultValue="No"
+          onChange={event => setImmutable(event.target.value === 'Yes')}
+          options={[
+            { value: 'Yes', label: 'Yes' },
+            { value: 'No', label: 'No' },
+          ]}
+        />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            {immutable && (
+              <Typography>
+                Once an immutable stamp is maxed out, it disallows further content uploads, thereby safeguarding your
+                previously uploaded content from unintentional overwriting.
+              </Typography>
+            )}
+            {!immutable && (
+              <Typography>
+                When a mutable stamp reaches full capacity, it still permits new content uploads. However, this comes
+                with the caveat of overwriting previously uploaded content associated with the same stamp.
+              </Typography>
+            )}
+          </Grid>
+        </Box>
+      </Box>
+      <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+        <Grid container justifyContent="space-between">
+          <Typography>Indicative Price</Typography>
+          <Typography>
+            {!amountError && !depthError && amountInput && depthInput
+              ? getPrice(parseInt(depthInput, 10), BigInt(amountInput))
+              : '-'}
+          </Typography>
+        </Grid>
+      </Box>
+
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <SwarmButton
+            disabled={submitting || Boolean(depthError) || Boolean(amountError) || !depthInput || !amountInput}
+            onClick={submit}
+            iconType={Check}
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} className={classes.link}>
+            Standard mode
+          </Link>
+        </Grid>
+      </Grid>
+    </>
+  )
+}

src/pages/stamps/PostageStampCreation.tsx

@@ -1,193 +0,0 @@
-import { PostageBatchOptions } from '@ethersphere/bee-js'
-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 'remixicon-react/CheckLineIcon'
-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,
-  waitUntilStampExists,
-} 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 ${pricePerBlock.toFixed(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()} xBZZ`
-  }
-
-  return (
-    <>
-      <Box mb={4}>
-        <Typography>
-          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
-          this, please read{' '}
-          <a
-            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
-            target="_blank"
-            rel="noreferrer"
-          >
-            this guide
-          </a>
-          .
-        </Typography>
-      </Box>
-      <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: PostageBatchOptions = { waitForUsable: false, label: values.label || undefined }
-            const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-            await waitUntilStampExists(batchId, beeDebugApi)
-            actions.resetForm()
-            await refresh()
-            onFinished()
-          } catch (e) {
-            console.error(e) // eslint-disable-line
-            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(17)) errors.depth = 'Minimal depth is 17'
-            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'
-          }
-
-          return errors
-        }}
-      >
-        {({ submitForm, isValid, isSubmitting, values, errors }) => (
-          <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>
-                    {!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 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>
-                    {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 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>
-                  {!errors.amount && !errors.depth && values.amount && values.depth
-                    ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
-                    : '-'}
-                </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

@@ -23,7 +23,10 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
 
   return (
     <SwarmSelect
-      options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
+      options={(stamps || []).map(x => ({
+        label: x.label ? x.batchID.slice(0, 8) + ' - ' + x.label : x.batchID.slice(0, 8),
+        value: x.batchID,
+      }))}
       onChange={event => onChange(event.target.value as string)}
       defaultValue={defaultValue}
       placeholder="Please select a postage stamp..."

src/pages/stamps/PostageStampStandardCreation.tsx

@@ -0,0 +1,228 @@
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
+import { Box, Button, Grid, Slider, Typography } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Check from 'remixicon-react/CheckLineIcon'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampsContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
+
+interface Props {
+  onFinished: () => void
+}
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+    buttonSelected: {
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+    },
+  }),
+)
+
+const marks = [
+  { value: 1, label: '1 day' },
+  { value: 365, label: '365 days' },
+]
+
+export function PostageStampStandardCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
+  const { refresh } = useContext(StampsContext)
+  const { beeApi } = useContext(SettingsContext)
+
+  const [depthInput, setDepthInput] = useState<number>(Utils.getDepthForCapacity(4))
+  const [amountInput, setAmountInput] = useState<string>(Utils.getAmountForTtl(30))
+  const [labelInput, setLabelInput] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [buttonValue, setButtonValue] = useState(4)
+
+  function sliderValueChange(_: unknown, newValue: number | number[]) {
+    if (typeof newValue !== 'number') {
+      return
+    }
+    const amountValue = Utils.getAmountForTtl(newValue)
+    setAmountInput(amountValue)
+  }
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  function getTtl(amount: string): string {
+    const pricePerBlock = 24000
+
+    return `${secondsToTimeString(
+      convertAmountToSeconds(parseInt(amount, 10), pricePerBlock),
+    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+  }
+
+  function getPrice(depth: number, amount: bigint): string {
+    const price = calculateStampPrice(depth, amount)
+
+    return `${price.toSignificantDigits()} xBZZ`
+  }
+
+  async function submit() {
+    try {
+      // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+      if (!depthInput || !amountInput) {
+        return
+      }
+
+      if (!beeApi) {
+        return
+      }
+
+      setSubmitting(true)
+      const amount = BigInt(amountInput)
+      const depth = depthInput
+      const options: PostageBatchOptions = {
+        waitForUsable: false,
+        label: labelInput || undefined,
+        immutableFlag: true,
+      }
+
+      const batchId = await beeApi.createPostageBatch(amount.toString(), depth, options)
+      await waitUntilStampExists(batchId, beeApi)
+      await refresh()
+      onFinished()
+    } catch (e) {
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+    }
+    setSubmitting(false)
+  }
+
+  function handleBatchSize(gigabytes: number) {
+    setButtonValue(gigabytes)
+    const capacity = Utils.getDepthForCapacity(gigabytes)
+    setDepthInput(capacity)
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <Typography>
+          A postage stamp batch containes postage stamps that will give you the right to upload data to the Swarm
+          network. If you&apos;re not familiar with this, please read&nbsp;
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Batch name</Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="depth" label="Label" onChange={e => setLabelInput(e.target.value)} />
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Batch size</Typography>
+      </Box>
+      <Box mb={2}>
+        <Grid container justifyContent="space-between" spacing={2}>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(4)}
+              className={buttonValue === 4 ? classes.buttonSelected : ''}
+            >
+              4 GB
+            </Button>
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(32)}
+              className={buttonValue === 32 ? classes.buttonSelected : ''}
+            >
+              32 GB
+            </Button>
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(256)}
+              className={buttonValue === 256 ? classes.buttonSelected : ''}
+            >
+              256 GB
+            </Button>
+          </Grid>
+        </Grid>
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Data persistence</Typography>
+      </Box>
+      <Box mb={2}>
+        <Slider
+          aria-label="Volume"
+          min={1}
+          max={365}
+          step={1}
+          marks={marks}
+          valueLabelDisplay="auto"
+          defaultValue={30}
+          onChange={sliderValueChange}
+        />
+      </Box>
+      <Box mb={2}>
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding TTL (Time to live)</Typography>
+            <Typography>{amountInput ? getTtl(amountInput) : '-'}</Typography>
+          </Grid>
+        </Box>
+        <Box display="flex" justifyContent={'right'} mt={0.5}>
+          <Typography style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.26)' }}>
+            Current price of 24000 per block
+          </Typography>
+        </Box>
+      </Box>
+      <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+        <Grid container justifyContent="space-between">
+          <Typography>Indicative Price</Typography>
+          <Typography>{getPrice(depthInput, BigInt(amountInput))}</Typography>
+        </Grid>
+      </Box>
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <SwarmButton
+            disabled={submitting || !depthInput || !amountInput}
+            onClick={submit}
+            iconType={Check}
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_ADVANCED} className={classes.link}>
+            Advanced mode
+          </Link>
+        </Grid>
+      </Grid>
+    </>
+  )
+}

src/pages/stamps/StampsTable.tsx

@@ -1,8 +1,13 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
+import TimerFlashFill from 'remixicon-react/TimerFlashFillIcon'
+import TimerFlashLine from 'remixicon-react/TimerFlashLineIcon'
 import ExpandableElement from '../../components/ExpandableElement'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import StampExtensionModal from '../../components/StampExtensionModal'
+import { Context } from '../../providers/Settings'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 import { secondsToTimeString } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
@@ -13,7 +18,11 @@ interface Props {
 }
 
 function StampsTable({ postageStamps }: Props): ReactElement | null {
-  if (postageStamps === null) return null
+  const { beeApi } = useContext(Context)
+
+  if (!postageStamps || !beeApi) {
+    return null
+  }
 
   return (
     <ExpandableList label="Postage Stamps" defaultOpen>
@@ -38,7 +47,22 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
               <ExpandableListItem label="Label" value={stamp.label} />
               <ExpandableListItem label="Usable" value={stamp.usable ? 'yes' : 'no'} />
               <ExpandableListItem label="Exists" value={stamp.exists ? 'yes' : 'no'} />
+              <ExpandableListItem label="Immutable" value={stamp.immutableFlag ? 'yes' : 'no'} />
               <ExpandableListItem label="Purchase Block Number" value={stamp.blockNumber} />
+              <ExpandableListItemActions>
+                <StampExtensionModal
+                  type="Topup"
+                  icon={<TimerFlashFill size="1rem" />}
+                  bee={beeApi}
+                  stamp={stamp.batchID}
+                />
+                <StampExtensionModal
+                  type="Dilute"
+                  icon={<TimerFlashLine size="1rem" />}
+                  bee={beeApi}
+                  stamp={stamp.batchID}
+                />
+              </ExpandableListItemActions>
             </>
           }
         >

src/pages/stamps/index.tsx

@@ -44,7 +44,7 @@ export default function Stamp(): ReactElement {
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
-    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW_STANDARD)
   }
 
   return (

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,33 +1,32 @@
-import { useContext } from 'react'
-import DepositModal from '../../../containers/DepositModal'
 import type { ReactElement, ReactNode } from 'react'
+import { useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
+import DepositModal from '../../../containers/DepositModal'
 import { CheckState, Context } from '../../../providers/Bee'
 
 const ChequebookDeployFund = (): ReactElement | null => {
   const { status, isLoading, chequebookAddress } = useContext(Context)
   const { checkState, isEnabled } = status.chequebook
 
-  if (!isEnabled) return null
+  if (!isEnabled) {
+    return null
+  }
 
   let text: ReactNode
 
   switch (checkState) {
     case CheckState.OK:
-      text = 'Your chequebook is deployed and funded'
-      break
-    case CheckState.WARNING:
       text = (
         <>
-          Your chequebook is not funded. Please deposit some xBZZ to your chequebook address. You may need to aquire BZZ
+          Your chequebook is deployed. You may deposit some xBZZ to your chequebook to afford more traffic. You can
-          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network through the{' '}
+          acquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network
-          <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
+          through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you
-          xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain network through
+          will also need xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain
-          the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
+          network through the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
           <a href="https://www.gnosischain.com">official Gnosis Chain website</a> for more information.
         </>
       )

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -1,88 +0,0 @@
-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'
-
-export default function NodeConnectionCheck(): ReactElement | null {
-  const { status, isLoading } = useContext(Context)
-  const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
-  const { checkState, isEnabled } = status.debugApiConnection
-
-  if (!isEnabled) return null
-
-  return (
-    <ExpandableList
-      label={
-        <>
-          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Bee Debug API
-        </>
-      }
-    >
-      <ExpandableListItemNote>
-        {checkState === CheckState.OK
-          ? '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} />
-
-      {checkState === CheckState.ERROR && (
-        <ExpandableList level={1} label="Troubleshoot">
-          <ExpandableListItem
-            label={
-              <ol>
-                <li>Check the status of your node by running the below command to see if your node is running.</li>
-                <CodeBlockTabs showLineNumbers linux={`sudo systemctl status bee`} mac={`brew services list`} />
-                <li>
-                  If your node is running, check your firewall settings to make sure that port 1635 (or your custom
-                  specified port) is bound to localhost. If your node is not running try executing the below command to
-                  start your bee node
-                </li>
-                <MuiAlert
-                  style={{ marginTop: '10px', marginBottom: '10px' }}
-                  elevation={6}
-                  variant="filled"
-                  severity="error"
-                >
-                  Your debug node API should never be completely open to the internet. If you want to connect remotely,
-                  make sure your firewall settings are set to only allow specific trusted IP addresses and block all
-                  other ports. A simple google search for &quot;what is my ip&quot; will show you your computers public
-                  IP address to allow.
-                </MuiAlert>
-                <CodeBlockTabs
-                  showLineNumbers
-                  linux={`sudo systemctl start bee`}
-                  mac={`brew services start swarm-bee`}
-                />
-                <li>Run the commands to validate your node is running and see the log output.</li>
-                <CodeBlockTabs
-                  showLineNumbers
-                  linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
-                  mac={`brew services list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
-                />
-                <li>
-                  Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross
-                  Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
-                  <strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
-                  <strong>cors-allowed-origins</strong> must be set to your host domain or IP (you can also use the
-                  wildcard <code>{"cors-allowed-origins: ['*']"}</code>). If edits are made to the configuration run the
-                  restart command below for changes to take effect.
-                </li>
-                <CodeBlockTabs
-                  showLineNumbers
-                  linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
-                  mac={`sudo vi /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
-                />
-              </ol>
-            }
-          />
-        </ExpandableList>
-      )}
-    </ExpandableList>
-  )
-}

src/pages/status/SetupSteps/DesktopConnectionCheck.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, useContext } from 'react'
+
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { useBeeDesktop } from '../../../hooks/apiHooks'
+import { CheckState } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
+
+export default function DesktopConnectionCheck(): ReactElement | null {
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { reachable } = useBeeDesktop(isDesktop, desktopUrl)
+
+  return (
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon checkState={reachable ? CheckState.OK : CheckState.ERROR} isLoading={false} /> Connection to Swarm
+          Desktop
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {reachable
+          ? 'The connection to the Swarm Desktop API has been successful'
+          : 'Could not connect to the Swarm Desktop API'}
+      </ExpandableListItemNote>
+      <ExpandableListItem label="Swarm Desktop API" value={desktopUrl} />
+    </ExpandableList>
+  )
+}

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -1,44 +0,0 @@
-import { ReactElement, useContext } from 'react'
-import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
-import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
-import StatusIcon from '../../../components/StatusIcon'
-import { CheckState, Context } from '../../../providers/Bee'
-
-export default function EthereumConnectionCheck(): ReactElement | null {
-  const { status, isLoading, nodeAddresses } = useContext(Context)
-  const { checkState, isEnabled } = status.blockchainConnection
-
-  if (!isEnabled) return null
-
-  return (
-    <ExpandableList
-      label={
-        <>
-          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Blockchain
-        </>
-      }
-    >
-      <ExpandableListItemNote>
-        {checkState === CheckState.OK ? (
-          'Your node is connected to the xDai blockchain'
-        ) : (
-          <>
-            Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
-            contract. You can run{' '}
-            <a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
-              your own xDai node
-            </a>
-            , or use a provider instead - we recommend{' '}
-            <a href="https://getblock.io/" rel="noreferrer" target="_blank">
-              Getblock
-            </a>
-            . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change
-            the <strong>swap-endpoint</strong> in your configuration file.
-          </>
-        )}
-      </ExpandableListItemNote>
-      {nodeAddresses?.ethereum && <ExpandableListItemKey label="Ethereum Address" value={nodeAddresses?.ethereum} />}
-    </ExpandableList>
-  )
-}

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

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

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -1,15 +1,17 @@
 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 TopologyStats from '../../../components/TopologyStats'
 import { CheckState, Context } from '../../../providers/Bee'
 
 export default function PeerConnection(): ReactElement | null {
   const { status, isLoading, topology } = useContext(Context)
   const { isEnabled, checkState } = status.topology
 
-  if (!isEnabled) return null
+  if (!isEnabled) {
+    return null
+  }
 
   let text: ReactNode
   switch (checkState) {

src/pages/status/SetupSteps/VersionCheck.tsx

@@ -1,49 +0,0 @@
-import { ReactElement, useContext } from 'react'
-import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItem from '../../../components/ExpandableListItem'
-import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
-import StatusIcon from '../../../components/StatusIcon'
-import { CheckState, Context } from '../../../providers/Bee'
-
-export default function VersionCheck(): ReactElement | null {
-  const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
-  const { isEnabled, checkState } = status.version
-
-  if (!isEnabled) return null
-
-  return (
-    <ExpandableList
-      label={
-        <>
-          <StatusIcon checkState={checkState} isLoading={isLoading} /> Bee Version
-        </>
-      }
-    >
-      <ExpandableListItemNote>
-        {checkState === CheckState.OK ? (
-          'You are running the latest version of Bee.'
-        ) : (
-          <>
-            Your Bee version is out of date. Please update to the{' '}
-            <a href={latestBeeVersionUrl} rel="noreferrer" target="_blank">
-              latest
-            </a>{' '}
-            before continuing. Rerun the installation script below to upgrade. For more information please see the{' '}
-            <a href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee" rel="noreferrer" target="_blank">
-              Docs
-            </a>
-            .
-            <CodeBlockTabs
-              showLineNumbers
-              linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestPublishedVersion}/bee_${latestPublishedVersion}_amd64.deb\nsudo dpkg -i bee_${latestPublishedVersion}_amd64.deb`}
-              mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
-            />
-          </>
-        )}
-      </ExpandableListItemNote>
-      <ExpandableListItem label="Your Version" value={latestUserVersion || '-'} />
-      <ExpandableListItem label="Latest Version" value={latestPublishedVersion || '-'} />
-    </ExpandableList>
-  )
-}

src/pages/status/index.tsx

@@ -1,20 +1,18 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-
+import { Context } from '../../providers/Settings'
-import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
-import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
-import VersionCheck from './SetupSteps/VersionCheck'
-import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
 import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
+import DesktopConnection from './SetupSteps/DesktopConnectionCheck'
+import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
 import PeerConnection from './SetupSteps/PeerConnection'
 
 export default function NodeSetupWorkflow(): ReactElement {
+  const { isDesktop } = useContext(Context)
+
   return (
     <div>
-      <DebugConnectionCheck />
+      {isDesktop && <DesktopConnection />}
-      <VersionCheck />
-      <EthereumConnectionCheck />
-      <ChequebookDeployFund />
       <NodeConnectionCheck />
+      <ChequebookDeployFund />
       <PeerConnection />
     </div>
   )

src/pages/top-up/GiftCardFund.tsx

@@ -1,9 +1,10 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import Check from 'remixicon-react/CheckLineIcon'
-import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
 import { useNavigate, useParams } from 'react-router'
+import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
+import Check from 'remixicon-react/CheckLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -18,7 +19,6 @@ import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
-import { BeeModes } from '@ethersphere/bee-js'
 
 export function GiftCardFund(): ReactElement {
   const { nodeAddresses, nodeInfo } = useContext(BeeContext)
@@ -52,7 +52,6 @@ export function GiftCardFund(): ReactElement {
       await sleepMs(5_000)
       await upgradeToLightNode(desktopUrl, rpcProviderUrl)
       await restartBeeNode(desktopUrl)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
       console.error(error) // eslint-disable-line

src/pages/top-up/Swap.tsx

@@ -1,6 +1,5 @@
 import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Typography } from '@material-ui/core'
-import BigNumber from 'bignumber.js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -14,36 +13,42 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
-import { BzzToken } from '../../models/BzzToken'
+import { BZZ_DECIMAL_PLACES, BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
-import { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { SwapError, isSwapError, wrapWithSwapError } from '../../utils/SwapError'
+import {
+  getBzzPriceAsDai,
+  getDesktopConfiguration,
+  performSwap,
+  restartBeeNode,
+  upgradeToLightNode,
+} from '../../utils/desktop'
+import { Rpc } from '../../utils/rpc'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'
 
 const MINIMUM_XDAI = '0.1'
 const MINIMUM_XBZZ = '0.1'
 
+const GENERIC_SWAP_FAILED_ERROR_MESSAGE = 'Failed to swap. The full error is printed to the console.'
+
 interface Props {
   header: string
 }
 
-function isPositiveDecimal(value: string): boolean {
-  try {
-    return new BigNumber(value).isPositive()
-  } catch {
-    return false
-  }
-}
-
 export function Swap({ header }: Props): ReactElement {
   const [loading, setLoading] = useState(false)
   const [hasSwapped, setSwapped] = useState(false)
   const [userInputSwap, setUserInputSwap] = useState<string | null>(null)
-  const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))
+  const [price, setPrice] = useState(DaiToken.fromDecimal('0.6'))
+  const [error, setError] = useState<string | null>(null)
+  const [daiToSwap, setDaiToSwap] = useState<DaiToken | null>(null)
+  const [bzzAfterSwap, setBzzAfterSwap] = useState<BzzToken | null>(null)
+  const [daiAfterSwap, setDaiAfterSwap] = useState<DaiToken | null>(null)
 
   const { rpcProviderUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
   const { nodeAddresses, nodeInfo } = useContext(BeeContext)
@@ -52,38 +57,77 @@ export function Swap({ header }: Props): ReactElement {
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
 
+  // Fetch current price of BZZ
   useEffect(() => {
     // eslint-disable-next-line no-console
     getBzzPriceAsDai(desktopUrl).then(setPrice).catch(console.error)
   }, [desktopUrl])
 
-  if (!balance || !nodeAddresses) {
+  // Set the initial xDAI to swap
+  useEffect(() => {
+    if (!balance || userInputSwap) {
+      return
+    }
+
+    const minimumOptimalValue = DaiToken.fromDecimal('1').plusBaseUnits(MINIMUM_XDAI).toDecimal
+
+    if (balance.dai.toDecimal.isGreaterThanOrEqualTo(minimumOptimalValue)) {
+      // Balance has at least 1 + MINIMUM_XDAI xDai
+      setDaiToSwap(balance.dai.minusBaseUnits('1'))
+    } else {
+      // Balance is low, halve the amount
+      setDaiToSwap(new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2)))
+    }
+  }, [balance, userInputSwap])
+
+  // Set the xDAI to swap based on user input
+  useEffect(() => {
+    setError(null)
+    try {
+      if (userInputSwap) {
+        const dai = DaiToken.fromDecimal(userInputSwap)
+        setDaiToSwap(dai)
+
+        if (dai.toDecimal.lte(0)) {
+          setError('xDAI to swap must be a positive number')
+        }
+      }
+    } catch {
+      setError('Cannot parse xDAI amount')
+    }
+  }, [userInputSwap])
+
+  // Calculate the amount of tokens after swap
+  useEffect(() => {
+    if (!balance || !daiToSwap || error) {
+      return
+    }
+    const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
+    setDaiAfterSwap(daiAfterSwap)
+    const tokensConverted = BzzToken.fromDecimal(
+      daiToSwap.toBigNumber.dividedBy(price.toBigNumber).decimalPlaces(BZZ_DECIMAL_PLACES),
+    )
+    const bzzAfterSwap = new BzzToken(tokensConverted.toBigNumber.plus(balance.bzz.toBigNumber))
+    setBzzAfterSwap(bzzAfterSwap)
+
+    if (daiAfterSwap.toDecimal.lt(MINIMUM_XDAI)) {
+      setError(`Must keep at least ${MINIMUM_XDAI} xDAI after swap!`)
+    } else if (bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)) {
+      setError(`Must have at least ${MINIMUM_XBZZ} xBZZ after swap!`)
+    }
+  }, [error, balance, daiToSwap, price])
+
+  if (!balance || !nodeAddresses || !daiToSwap || !bzzAfterSwap || !daiAfterSwap) {
     return <Loading />
   }
 
-  const optimalSwap = balance.dai.minusBaseUnits('1')
-  const lowAmountSwap = new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2))
-
-  let daiToSwap: DaiToken
-
-  if (userInputSwap && isPositiveDecimal(userInputSwap)) {
-    daiToSwap = DaiToken.fromDecimal(userInputSwap, 18)
-  } else {
-    daiToSwap = lowAmountSwap.toBigNumber.gt(optimalSwap.toBigNumber) ? lowAmountSwap : optimalSwap
-  }
-
-  const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
-  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedBy(100).dividedToIntegerBy(price.toDecimal))
-
   const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
 
   async function restart() {
     try {
       await sleepMs(5_000)
-      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
       await restartBeeNode(desktopUrl)
 
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
       console.error(error) // eslint-disable-line
@@ -91,21 +135,71 @@ export function Swap({ header }: Props): ReactElement {
     }
   }
 
+  async function sendSwapRequest(daiToSwap: DaiToken) {
+    try {
+      await performSwap(desktopUrl, daiToSwap.toString)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      throw error
+    }
+  }
+
+  async function performSwapWithChecks(daiToSwap: DaiToken) {
+    if (!localStorage.getItem('apiKey')) {
+      throw new SwapError('API key is not set, reopen dashboard through Swarm Desktop')
+    }
+
+    let desktopConfiguration = await wrapWithSwapError(
+      getDesktopConfiguration(desktopUrl),
+      'Unable to reach Desktop API, Swarm Desktop may not be running',
+    )
+
+    if (canUpgradeToLightNode) {
+      desktopConfiguration = await wrapWithSwapError(
+        upgradeToLightNode(desktopUrl, rpcProviderUrl),
+        'Failed to update the configuration file with the new swap values using the Desktop API',
+      )
+    }
+
+    if (!desktopConfiguration['blockchain-rpc-endpoint']) {
+      throw new SwapError('Blockchain RPC endpoint is not configured in Swarm Desktop')
+    }
+    await wrapWithSwapError(
+      Rpc.getNetworkChainId(desktopConfiguration['blockchain-rpc-endpoint']),
+      `Blockchain RPC endpoint not reachable at ${desktopConfiguration['blockchain-rpc-endpoint']}`,
+    )
+    await wrapWithSwapError(sendSwapRequest(daiToSwap), GENERIC_SWAP_FAILED_ERROR_MESSAGE)
+  }
+
   async function onSwap() {
-    if (hasSwapped) {
+    if (hasSwapped || !daiToSwap) {
       return
     }
     setLoading(true)
     setSwapped(true)
 
     try {
-      await performSwap(desktopUrl, daiToSwap.toString)
+      await performSwapWithChecks(daiToSwap)
-      enqueueSnackbar('Successfully swapped', { variant: 'success' })
+      const message = canUpgradeToLightNode
+        ? 'Successfully swapped. Beginning light node upgrade...'
+        : 'Successfully swapped. Balances will refresh soon. You may now navigate away.'
+      enqueueSnackbar(message, { variant: 'success' })
 
       if (canUpgradeToLightNode) await restart()
     } catch (error) {
+      if (isSwapError(error)) {
+        // we have a custom and user friendly error message
+        enqueueSnackbar(error.snackbarMessage, { variant: 'error' })
+
+        if (error.originalError) {
+          console.error(error.originalError) // eslint-disable-line
+        }
+      } else {
+        // we have an unexpected error
+        enqueueSnackbar(`${GENERIC_SWAP_FAILED_ERROR_MESSAGE} ${error}`, { variant: 'error' })
         console.error(error) // eslint-disable-line
-      enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
+      }
     } finally {
       balance?.refresh()
       setLoading(false)
@@ -136,18 +230,13 @@ export function Swap({ header }: Props): ReactElement {
       </Box>
       <Box mb={4}>
         <SwarmTextInput
-          label="Amount to swap"
+          label="xDAI to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          defaultValue={daiToSwap.toSignificantDigits(4)}
-          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          placeholder={daiToSwap.toSignificantDigits(4)}
           name="x"
           onChange={event => setUserInputSwap(event.target.value)}
         />
-        {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? (
+        {error && <Typography>{error}</Typography>}
-          <Typography>Must keep at least {MINIMUM_XDAI} xDAI after swap!</Typography>
-        ) : null}
-        {bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ) ? (
-          <Typography>Must have at least {MINIMUM_XBZZ} xBZZ after swap!</Typography>
-        ) : null}
       </Box>
       <Box mb={4}>
         <ArrowDown size={24} color="#aaaaaa" />
@@ -171,9 +260,7 @@ export function Swap({ header }: Props): ReactElement {
         <SwarmButton
           iconType={Check}
           onClick={onSwap}
-          disabled={
+          disabled={hasSwapped || loading || error !== null}
-            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
-          }
           loading={loading}
         >
           {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}

src/pages/top-up/index.tsx

@@ -1,23 +1,23 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
+import { useNavigate } from 'react-router'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
 import Check from 'remixicon-react/CheckLineIcon'
 import Download from 'remixicon-react/DownloadLineIcon'
-import BankCard from 'remixicon-react/BankCard2LineIcon'
-import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
 import Gift from 'remixicon-react/GiftLineIcon'
-import { useNavigate } from 'react-router'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { ROUTES } from '../../routes'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as BalanceProvider } from '../../providers/WalletBalance'
-import { BeeModes } from '@ethersphere/bee-js'
+import { ROUTES } from '../../routes'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
-import { Loading } from '../../components/Loading'
-import { useSnackbar } from 'notistack'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -57,7 +57,6 @@ export default function TopUp(): ReactElement {
     try {
       await upgradeToLightNode(desktopUrl, rpcProviderUrl)
       await restartBeeNode(desktopUrl)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
       console.error(error) // eslint-disable-line

src/providers/Bee.tsx

@@ -2,29 +2,30 @@ import {
   BeeModes,
   ChainState,
   ChequebookAddressResponse,
-  Health,
   LastChequesResponse,
   NodeAddresses,
   NodeInfo,
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactChild, ReactElement, createContext, useContext, useEffect, useState } from 'react'
-import semver from 'semver'
-import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { BzzToken } from '../models/BzzToken'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
 import { Context as SettingsContext } from './Settings'
 
+const LAUNCH_GRACE_PERIOD = 15_000
 const REFRESH_WHEN_OK = 30_000
 const REFRESH_WHEN_ERROR = 5_000
 const TIMEOUT = 3_000
 
 export enum CheckState {
+  CONNECTING = 'Connecting',
   OK = 'OK',
   WARNING = 'Warning',
   ERROR = 'Error',
+  STARTING = 'Starting',
 }
 
 interface StatusItem {
@@ -34,30 +35,23 @@ interface StatusItem {
 
 interface Status {
   all: CheckState
-  version: StatusItem
-  blockchainConnection: StatusItem
-  debugApiConnection: StatusItem
   apiConnection: StatusItem
   topology: StatusItem
   chequebook: StatusItem
 }
 
 interface ContextInterface {
+  beeVersion: string | null
   status: Status
-  latestPublishedVersion?: string
-  latestUserVersion?: string
-  latestUserVersionExact?: string
-  isLatestBeeVersion: boolean
-  latestBeeVersionUrl: string
   error: Error | null
   apiHealth: boolean
-  debugApiHealth: Health | null
   nodeAddresses: NodeAddresses | null
   nodeInfo: NodeInfo | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
   chequebookBalance: ChequebookBalance | null
+  stake: BzzToken | null
   peerBalances: Balance[] | null
   peerCheques: LastChequesResponse | null
   settlements: Settlements | null
@@ -72,27 +66,20 @@ interface ContextInterface {
 }
 
 const initialValues: ContextInterface = {
+  beeVersion: null,
   status: {
     all: CheckState.ERROR,
-    version: { isEnabled: false, checkState: CheckState.ERROR },
-    blockchainConnection: { isEnabled: false, checkState: CheckState.ERROR },
-    debugApiConnection: { isEnabled: false, checkState: CheckState.ERROR },
     apiConnection: { isEnabled: false, checkState: CheckState.ERROR },
     topology: { isEnabled: false, checkState: CheckState.ERROR },
     chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
-  latestPublishedVersion: undefined,
-  latestUserVersion: undefined,
-  latestUserVersionExact: undefined,
-  isLatestBeeVersion: false,
-  latestBeeVersionUrl: 'https://github.com/ethersphere/bee/releases/latest',
   error: null,
   apiHealth: false,
-  debugApiHealth: null,
   nodeAddresses: null,
   nodeInfo: null,
   topology: null,
   chequebookAddress: null,
+  stake: null,
   peers: null,
   chequebookBalance: null,
   peerBalances: null,
@@ -116,35 +103,16 @@ 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,
+  startedAt: number,
 ): Status {
   const status: Status = { ...initialValues.status }
 
-  // Version check
-  status.version.isEnabled = true
-  status.version.checkState =
-    debugApiHealth &&
-    semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
-      includePrerelease: true,
-    })
-      ? CheckState.OK
-      : CheckState.ERROR
-
-  // Blockchain connection check
-  status.blockchainConnection.isEnabled = true
-  status.blockchainConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
-
-  // Debug API connection check
-  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
@@ -159,48 +127,60 @@ function getStatus(
   if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
     status.chequebook.isEnabled = true
 
-    if (
+    if (chequebookAddress?.chequebookAddress && chequebookBalance !== null) {
-      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
-    else status.chequebook.checkState = CheckState.OK
   }
 
-  // Determine overall status
+  status.all = determineOverallStatus(status, startedAt)
-  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
 }
 
+function determineOverallStatus(status: Status, startedAt: number): CheckState {
+  const hasErrors = Object.values(status).some(
+    ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR,
+  )
+  const hasWarnings = Object.values(status).some(
+    ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING,
+  )
+  const isInGracePeriod = Date.now() - startedAt < LAUNCH_GRACE_PERIOD
+
+  if (hasErrors && isInGracePeriod) {
+    return CheckState.CONNECTING
+  } else if (hasErrors) {
+    return CheckState.ERROR
+  } else if (hasWarnings) {
+    return CheckState.WARNING
+  } else {
+    return CheckState.OK
+  }
+}
+
 // This does not need to be exposed and works much better as variable than state variable which may trigger some unnecessary re-renders
 let isRefreshing = false
 
+interface Props {
+  children: ReactChild
+}
+
 export function Provider({ children }: Props): ReactElement {
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
+  const [beeVersion, setBeeVersion] = useState<string | null>(null)
   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)
   const [chequebookBalance, setChequebookBalance] = useState<ChequebookBalance | null>(null)
+  const [stake, setStake] = useState<BzzToken | null>(null)
   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 [chainId, setChainId] = useState<number | null>(null)
+  const [startedAt] = useState(Date.now())
 
   const { latestBeeRelease } = useLatestBeeRelease()
 
@@ -209,10 +189,6 @@ export function Provider({ children }: Props): ReactElement {
   const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
   const [frequency, setFrequency] = useState<number | null>(30000)
 
-  const latestPublishedVersion = semver.coerce(latestBeeRelease?.name)?.version
-  const latestUserVersion = semver.coerce(debugApiHealth?.version)?.version
-  const latestUserVersionExact = debugApiHealth?.version
-
   useEffect(() => {
     setIsLoading(true)
 
@@ -223,8 +199,6 @@ export function Provider({ children }: Props): ReactElement {
 
   useEffect(() => {
     setIsLoading(true)
-
-    setDebugApiHealth(null)
     setNodeAddresses(null)
     setNodeTopology(null)
     setNodeInfo(null)
@@ -236,15 +210,19 @@ export function Provider({ children }: Props): ReactElement {
     setSettlements(null)
     setChainState(null)
 
-    if (beeDebugApi !== null) refresh()
+    if (beeApi !== null) {
-  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
+      refresh()
+    }
+  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
-    if (isRefreshing) return
+    if (isRefreshing) {
+      return
+    }
 
     // Not a valid bee api
-    if (!beeApi || !beeDebugApi) {
+    if (!beeApi) {
       setIsLoading(false)
 
       return
@@ -256,7 +234,7 @@ export function Provider({ children }: Props): ReactElement {
 
       // Wrap the chequebook balance call to return BZZ values as Token object
       const chequeBalanceWrapper = async () => {
-        const { totalBalance, availableBalance } = await beeDebugApi.getChequebookBalance({ timeout: TIMEOUT })
+        const { totalBalance, availableBalance } = await beeApi.getChequebookBalance({ timeout: TIMEOUT })
 
         return {
           totalBalance: new Token(totalBalance),
@@ -266,14 +244,14 @@ export function Provider({ children }: Props): ReactElement {
 
       // Wrap the balances call to return BZZ values as Token object
       const peerBalanceWrapper = async () => {
-        const { balances } = await beeDebugApi.getAllBalances({ timeout: TIMEOUT })
+        const { balances } = await beeApi.getAllBalances({ timeout: TIMEOUT })
 
         return balances.map(({ peer, balance }) => ({ peer, balance: new Token(balance) }))
       }
 
       // Wrap the settlements call to return BZZ values as Token object
       const settlementsWrapper = async () => {
-        const { totalReceived, settlements, totalSent } = await beeDebugApi.getAllSettlements({ timeout: TIMEOUT })
+        const { totalReceived, settlements, totalSent } = await beeApi.getAllSettlements({ timeout: TIMEOUT })
 
         return {
           totalReceived: new Token(totalReceived),
@@ -289,60 +267,58 @@ export function Provider({ children }: Props): ReactElement {
       const promises = [
         // API health
         beeApi
-          .isConnected({ timeout: TIMEOUT })
-          .then(setApiHealth)
-          .catch(() => setApiHealth(false)),
-
-        // Debug API health
-        beeDebugApi
           .getHealth({ timeout: TIMEOUT })
-          .then(setDebugApiHealth)
+          .then(response => setBeeVersion(response.version))
-          .catch(() => setDebugApiHealth(null)),
+          .then(() => setApiHealth(true))
+          .catch(() => {
+            setBeeVersion(null)
+            setApiHealth(false)
+          }),
 
         // Node Addresses
-        beeDebugApi
+        beeApi
           .getNodeAddresses({ timeout: TIMEOUT })
           .then(setNodeAddresses)
           .catch(() => setNodeAddresses(null)),
 
         // NodeInfo
-        beeDebugApi
+        beeApi
           .getNodeInfo({ timeout: TIMEOUT })
           .then(setNodeInfo)
           .catch(() => setNodeInfo(null)),
 
         // Network Topology
-        beeDebugApi
+        beeApi
           .getTopology({ timeout: TIMEOUT })
           .then(setNodeTopology)
           .catch(() => setNodeTopology(null)),
 
         // Peers
-        beeDebugApi
+        beeApi
           .getPeers({ timeout: TIMEOUT })
           .then(setPeers)
           .catch(() => setPeers(null)),
 
         // Chequebook address
-        beeDebugApi
+        beeApi
           .getChequebookAddress({ timeout: TIMEOUT })
           .then(setChequebookAddress)
           .catch(() => setChequebookAddress(null)),
 
         // Cheques
-        beeDebugApi
+        beeApi
           .getLastCheques({ timeout: TIMEOUT })
           .then(setPeerCheques)
           .catch(() => setPeerCheques(null)),
 
         // Chain state
-        beeDebugApi
+        beeApi
           .getChainState({ timeout: TIMEOUT })
           .then(setChainState)
           .catch(() => setChainState(null)),
 
         // Wallet
-        beeDebugApi
+        beeApi
           .getWalletBalance({ timeout: TIMEOUT })
           .then(({ chainID }) => setChainId(chainID))
           .catch(() => setChainId(null)),
@@ -352,6 +328,11 @@ export function Provider({ children }: Props): ReactElement {
           .then(setChequebookBalance)
           .catch(() => setChequebookBalance(null)),
 
+        beeApi
+          .getStake({ timeout: TIMEOUT })
+          .then(stake => setStake(new BzzToken(stake)))
+          .catch(() => setStake(null)),
+
         // Peer balances
         peerBalanceWrapper()
           .then(setPeerBalances)
@@ -379,16 +360,7 @@ export function Provider({ children }: Props): ReactElement {
   }
   const stop = () => setFrequency(null)
 
-  const status = getStatus(
+  const status = getStatus(nodeInfo, apiHealth, topology, chequebookAddress, chequebookBalance, error, startedAt)
-    debugApiHealth,
-    nodeAddresses,
-    nodeInfo,
-    apiHealth,
-    topology,
-    chequebookAddress,
-    chequebookBalance,
-    error,
-  )
 
   useEffect(() => {
     let newFrequency = REFRESH_WHEN_OK
@@ -406,32 +378,22 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency, beeDebugApi, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [frequency, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider
       value={{
+        beeVersion,
         status,
-        latestUserVersion,
-        latestUserVersionExact,
-        latestPublishedVersion,
-        isLatestBeeVersion: Boolean(
-          latestPublishedVersion &&
-            latestUserVersion &&
-            semver.satisfies(latestPublishedVersion, latestUserVersion, {
-              includePrerelease: true,
-            }),
-        ),
-        latestBeeVersionUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
         error,
         apiHealth,
-        debugApiHealth,
         nodeAddresses,
         nodeInfo,
         topology,
         chequebookAddress,
         peers,
         chequebookBalance,
+        stake,
         peerBalances,
         peerCheques,
         settlements,

src/providers/Settings.tsx

@@ -1,8 +1,8 @@
-import { Bee, BeeDebug } from '@ethersphere/bee-js'
+import { Bee } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
-import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react'
+import { ReactElement, ReactNode, createContext, useEffect, useState } from 'react'
+import { DEFAULT_BEE_API_HOST, DEFAULT_RPC_URL } from '../constants'
 import { useGetBeeConfig } from '../hooks/apiHooks'
-import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
 
 const LocalStorageKeys = {
   providerUrl: 'json-rpc-provider',
@@ -10,20 +10,17 @@ const LocalStorageKeys = {
 
 interface ContextInterface {
   apiUrl: string
-  apiDebugUrl: string
   beeApi: Bee | null
-  beeDebugApi: BeeDebug | null
   lockedApiSettings: boolean
   desktopApiKey: string
   isDesktop: boolean
   desktopUrl: string
   rpcProviderUrl: string
-  rpcProvider: providers.JsonRpcProvider
+  rpcProvider: providers.JsonRpcProvider | null
   cors: string | null
   dataDir: string | null
   ensResolver: string | null
   setApiUrl: (url: string) => void
-  setDebugApiUrl: (url: string) => void
   setAndPersistJsonRpcProvider: (url: string) => void
   isLoading: boolean
   error: Error | null
@@ -31,18 +28,15 @@ interface ContextInterface {
 
 const initialValues: ContextInterface = {
   beeApi: null,
-  beeDebugApi: null,
   apiUrl: DEFAULT_BEE_API_HOST,
-  apiDebugUrl: DEFAULT_BEE_DEBUG_API_HOST,
   setApiUrl: () => {}, // eslint-disable-line
-  setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
   isDesktop: false,
   desktopApiKey: '',
   desktopUrl: window.location.origin,
   setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
   rpcProviderUrl: '',
-  rpcProvider: new providers.JsonRpcProvider(''),
+  rpcProvider: null,
   cors: null,
   dataDir: null,
   ensResolver: null,
@@ -55,7 +49,6 @@ export const Consumer = Context.Consumer
 
 interface InitialSettings {
   beeApiUrl?: string
-  beeDebugApiUrl?: string
   lockedApiSettings?: boolean
   isDesktop?: boolean
   desktopUrl?: string
@@ -73,9 +66,7 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
     localStorage.getItem(LocalStorageKeys.providerUrl) || propsSettings.defaultRpcUrl || DEFAULT_RPC_URL
 
   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 [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
   const [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
   const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
@@ -84,12 +75,6 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
   const url = makeHttpUrl(
     config?.['api-addr'] ?? sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? apiUrl,
   )
-  const debugUrl = makeHttpUrl(
-    config?.['debug-api-addr'] ??
-      sessionStorage.getItem('debug_api_host') ??
-      propsSettings.beeDebugApiUrl ??
-      apiDebugUrl,
-  )
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
@@ -111,24 +96,12 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
     }
   }, [url])
 
-  useEffect(() => {
-    try {
-      setBeeDebugApi(new BeeDebug(debugUrl))
-      sessionStorage.setItem('debug_api_host', debugUrl)
-    } catch (e) {
-      setBeeDebugApi(null)
-    }
-  }, [debugUrl])
-
   return (
     <Context.Provider
       value={{
         apiUrl: url,
-        apiDebugUrl: debugUrl,
         beeApi,
-        beeDebugApi,
         setApiUrl,
-        setDebugApiUrl,
         lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
         desktopApiKey,
         isDesktop,

src/providers/Stamps.tsx

@@ -48,7 +48,7 @@ export function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
@@ -56,14 +56,17 @@ export function Provider({ children }: Props): ReactElement {
   const [frequency, setFrequency] = useState<number | null>(null)
 
   const refresh = async () => {
-    // Don't want to refresh when already refreshing
+    if (isLoading) {
-    if (isLoading) return
+      return
+    }
 
-    if (!beeDebugApi) return
+    if (!beeApi) {
+      return
+    }
 
     try {
       setIsLoading(true)
-      const stamps = await beeDebugApi.getAllPostageBatch()
+      const stamps = await beeApi.getAllPostageBatch()
 
       setStamps(stamps.filter(x => x.exists).map(enrichStamp))
       setLastUpdate(Date.now())

src/routes.tsx

@@ -2,6 +2,7 @@ import { ReactElement, useContext } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { AccountChequebook } from './pages/account/chequebook/AccountChequebook'
 import { AccountFeeds } from './pages/account/feeds/AccountFeeds'
+import { AccountStaking } from './pages/account/staking/AccountStaking'
 import { AccountStamps } from './pages/account/stamps/AccountStamps'
 import { AccountWallet } from './pages/account/wallet/AccountWallet'
 import CreateNewFeed from './pages/feeds/CreateNewFeed'
@@ -14,16 +15,17 @@ import { UploadLander } from './pages/files/UploadLander'
 import GiftCards from './pages/gift-code'
 import Info from './pages/info'
 import LightModeRestart from './pages/restart/LightModeRestart'
-import TopUp from './pages/top-up'
 import Settings from './pages/settings'
-import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
+import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampAdvancedPage'
 import Status from './pages/status'
+import TopUp from './pages/top-up'
 import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
 import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
 import { GiftCardFund } from './pages/top-up/GiftCardFund'
 import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
 import { Swap } from './pages/top-up/Swap'
 import { Context as SettingsContext } from './providers/Settings'
+import { CreatePostageStampBasicPage } from './pages/stamps/CreatePostageStampStandardPage'
 
 export enum ROUTES {
   INFO = '/',
@@ -45,12 +47,14 @@ export enum ROUTES {
   ACCOUNT_WALLET = '/account/wallet',
   ACCOUNT_CHEQUEBOOK = '/account/chequebook',
   ACCOUNT_STAMPS = '/account/stamps',
-  ACCOUNT_STAMPS_NEW = '/account/stamps/new',
+  ACCOUNT_STAMPS_NEW_STANDARD = '/account/stamps/new',
+  ACCOUNT_STAMPS_NEW_ADVANCED = '/account/stamps/new/advanced',
   ACCOUNT_FEEDS = '/account/feeds',
   ACCOUNT_FEEDS_NEW = '/account/feeds/new',
   ACCOUNT_FEEDS_UPDATE = '/account/feeds/update/:hash',
   ACCOUNT_FEEDS_VIEW = '/account/feeds/:uuid',
   ACCOUNT_INVITATIONS = '/account/invitations',
+  ACCOUNT_STAKING = '/account/staking',
 }
 
 export const ACCOUNT_TABS = [
@@ -58,6 +62,7 @@ export const ACCOUNT_TABS = [
   ROUTES.ACCOUNT_CHEQUEBOOK,
   ROUTES.ACCOUNT_STAMPS,
   ROUTES.ACCOUNT_FEEDS,
+  ROUTES.ACCOUNT_STAKING,
 ]
 
 const BaseRouter = (): ReactElement => {
@@ -83,11 +88,13 @@ const BaseRouter = (): ReactElement => {
       <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
       <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
       <Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
-      <Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} element={<CreatePostageStampBasicPage />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW_ADVANCED} element={<CreatePostageStampPage />} />
       <Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_VIEW} element={<FeedSubpage />} />
+      <Route path={ROUTES.ACCOUNT_STAKING} element={<AccountStaking />} />
       {isDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
     </Routes>
   )

src/theme.tsx

@@ -159,6 +159,23 @@ const componentsOverrides = (theme: Theme) => ({
       backgroundColor: 'transparent',
     },
   },
+  MuiSlider: {
+    root: {
+      '& .MuiSlider-valueLabel': {
+        top: '-27px',
+        '& span': {
+          height: '20px',
+          borderRadius: '0px',
+          transform: 'none',
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+            transform: 'none',
+          },
+        },
+      },
+    },
+  },
 })
 
 const propsOverrides = {

src/utils/AuthError.ts

@@ -0,0 +1,10 @@
+export class AuthError extends Error {
+  constructor() {
+    super('Bad API key')
+    this.name = 'AuthError'
+  }
+}
+
+export function isAuthError(error: unknown): error is AuthError {
+  return error instanceof Error && error.name === 'AuthError'
+}

src/utils/SwapError.ts

@@ -0,0 +1,26 @@
+import { isAuthError } from './AuthError'
+
+export class SwapError extends Error {
+  snackbarMessage: string
+  originalError?: Error
+
+  constructor(snackbarMessage: string, error?: Error) {
+    super(error?.message || snackbarMessage)
+    this.name = 'SwapError'
+    this.originalError = error
+    this.snackbarMessage = snackbarMessage
+  }
+}
+
+export function isSwapError(error: unknown): error is SwapError {
+  return error instanceof Error && error.name === 'SwapError'
+}
+
+export function wrapWithSwapError<T>(promise: Promise<T>, snackbarMessage: string): Promise<T> {
+  return promise.catch((error: Error) => {
+    if (isAuthError(error)) {
+      throw new SwapError('Bad API key, reopen dashboard through Swarm Desktop', error)
+    }
+    throw new SwapError(snackbarMessage, error)
+  })
+}

src/utils/desktop.ts

@@ -1,30 +1,48 @@
 import axios from 'axios'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'
 import { DaiToken } from '../models/DaiToken'
 import { Token } from '../models/Token'
-import { postJson } from './net'
+import { getJson, postJson } from './net'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'
+
+export interface BeeConfig {
+  'api-addr': string
+  password: string
+  'swap-enable': boolean
+  'swap-initial-deposit': bigint
+  mainnet: boolean
+  'full-node': boolean
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  'blockchain-rpc-endpoint'?: string
+}
 
 export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
   const response = await axios.get(`${desktopUrl}/price`)
 
-  return DaiToken.fromDecimal(response.data, 18)
+  return DaiToken.fromDecimal(response.data)
 }
 
-export async function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<void> {
+export function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<BeeConfig> {
-  await updateDesktopConfiguration(desktopUrl, {
+  return updateDesktopConfiguration(desktopUrl, {
     'swap-enable': true,
-    'swap-endpoint': rpcProvider,
+    'blockchain-rpc-endpoint': rpcProvider,
   })
 }
 
 export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Promise<void> {
   await updateDesktopConfiguration(desktopUrl, {
-    'swap-endpoint': value,
+    'blockchain-rpc-endpoint': value,
   })
 }
 
-async function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<void> {
+export function getDesktopConfiguration(desktopUrl: string): Promise<BeeConfig> {
-  await postJson(`${desktopUrl}/config`, values)
+  return getJson(`${desktopUrl}/config`)
+}
+
+function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<BeeConfig> {
+  return postJson(`${desktopUrl}/config`, values)
 }
 
 export async function restartBeeNode(desktopUrl: string): Promise<void> {

src/utils/file.ts

@@ -114,8 +114,8 @@ export function packageFile(file: FilePath, pathOverwrite?: string): FilePath {
     size: file.size,
     type: file.type,
     stream: file.stream,
-    slice: file.slice,
+    slice: (start: number, end: number) => file.slice(start, end),
     text: file.text,
-    arrayBuffer: async () => await file.arrayBuffer(), // This is needed for successful upload and can not simply be { arrayBuffer: file.arrayBuffer }
+    arrayBuffer: async () => await file.arrayBuffer(),
   }
 }

src/utils/identity.ts

@@ -1,4 +1,4 @@
-import { BatchId, Bee, BeeDebug, Reference } from '@ethersphere/bee-js'
+import { BatchId, Bee, Reference } from '@ethersphere/bee-js'
 import { Wallet } from 'ethers'
 import { uuidV4, waitUntilStampUsable } from '.'
 import { Identity, IdentityType } from '../providers/Feeds'
@@ -79,7 +79,6 @@ async function getWallet(type: IdentityType, data: string, password?: string): P
 
 export async function updateFeed(
   beeApi: Bee,
-  beeDebugApi: BeeDebug | null,
   identity: Identity,
   hash: string,
   stamp: string,
@@ -93,8 +92,6 @@ export async function updateFeed(
 
   const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.privateKey)
 
-  if (beeDebugApi) {
+  await waitUntilStampUsable(stamp as BatchId, beeApi)
-    await waitUntilStampUsable(stamp as BatchId, beeDebugApi)
-  }
   await writer.upload(stamp, hash as Reference)
 }

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
+import { BatchId, Bee, PostageBatch } from '@ethersphere/bee-js'
 import { decodeCid } from '@ethersphere/swarm-cid'
 import { BigNumber } from 'bignumber.js'
 import { BZZ_LINK_DOMAIN } from '../constants'
@@ -203,10 +203,6 @@ export function secondsToTimeString(seconds: number): string {
   return `${unit.toFixed(1)} years`
 }
 
-export function convertDepthToBytes(depth: number): number {
-  return 2 ** depth * 4096
-}
-
 export function convertAmountToSeconds(amount: number, pricePerBlock: number): number {
   // TODO: blocktime should come directly from the blockchain as it may differ between different networks
   const blockTime = 5 // On mainnet there is 5 seconds between blocks
@@ -229,24 +225,24 @@ export function shortenText(text: string, length = 20, separator = '[…]'): str
 }
 
 const DEFAULT_POLLING_FREQUENCY = 1_000
-const DEFAULT_STAMP_USABLE_TIMEOUT = 240_000
+const DEFAULT_STAMP_USABLE_TIMEOUT = 5 * 60_000
 
 interface Options {
   pollingFrequency?: number
   timeout?: number
 }
 
-export function waitUntilStampUsable(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+export function waitUntilStampUsable(batchId: BatchId, bee: Bee, options?: Options): Promise<PostageBatch> {
-  return waitForStamp(batchId, beeDebug, 'usable', options)
+  return waitForStamp(batchId, bee, 'usable', options)
 }
 
-export function waitUntilStampExists(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+export function waitUntilStampExists(batchId: BatchId, bee: Bee, options?: Options): Promise<PostageBatch> {
-  return waitForStamp(batchId, beeDebug, 'exists', options)
+  return waitForStamp(batchId, bee, 'exists', options)
 }
 
 async function waitForStamp(
   batchId: BatchId,
-  beeDebug: BeeDebug,
+  bee: Bee,
   field: 'exists' | 'usable',
   options?: Options,
 ): Promise<PostageBatch> {
@@ -254,9 +250,14 @@ async function waitForStamp(
   const pollingFrequency = options?.pollingFrequency || DEFAULT_POLLING_FREQUENCY
 
   for (let i = 0; i < timeout; i += pollingFrequency) {
-    const stamp = await beeDebug.getPostageBatch(batchId)
+    try {
+      const stamp = await bee.getPostageBatch(batchId)
 
       if (stamp[field]) return stamp
+    } catch {
+      // ignore
+    }
+
     await sleepMs(pollingFrequency)
   }
 

src/utils/manifest.ts

@@ -0,0 +1,149 @@
+import { Bee, Utils } from '@ethersphere/bee-js'
+import { MantarayNode, MetadataMapping, Reference, loadAllNodes } from 'mantaray-js'
+
+interface ValueNode extends MantarayNode {
+  getEntry: Reference
+}
+
+/**
+ * The ASCII code of the character `/`.
+ *
+ * This prefix of the root node holds metadata such as the index document.
+ */
+const INDEX_DOCUMENT_FORK_PREFIX = '47'
+
+export class ManifestJs {
+  private bee: Bee
+
+  constructor(bee: Bee) {
+    this.bee = bee
+  }
+
+  /**
+   * Tests whether a given Swarm hash is a valid mantaray manifest
+   */
+  public async isManifest(hash: string): Promise<boolean> {
+    try {
+      const data = await this.bee.downloadData(hash)
+      const node = new MantarayNode()
+      node.deserialize(data)
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Retrieves `website-index-document` from a Swarm hash, or `null` if it is not present
+   */
+  public async getIndexDocumentPath(hash: string): Promise<string | null> {
+    const metadata = await this.getRootSlashMetadata(hash)
+
+    if (!metadata) {
+      return null
+    }
+
+    return metadata['website-index-document'] || null
+  }
+
+  /**
+   * Retrieves all paths with the associated hashes from a Swarm manifest
+   */
+  public async getHashes(hash: string): Promise<Record<string, string>> {
+    const data = await this.bee.downloadData(hash)
+    const node = new MantarayNode()
+    node.deserialize(data)
+    await loadAllNodes(this.load.bind(this), node)
+    const result = {}
+    this.extractHashes(result, node)
+
+    return result
+  }
+
+  /**
+   * Resolves an arbitrary Swarm feed manifest to its latest update reference.
+   * @returns `/bzz` root manifest hash, or `Promise<null>` if hash is not a feed manifest
+   * @throws in case of network errors or bad input
+   */
+  public async resolveFeedManifest(hash: string): Promise<string | null> {
+    const metadata = await this.getRootSlashMetadata(hash)
+
+    if (!metadata) {
+      return null
+    }
+
+    const owner = metadata['swarm-feed-owner']
+    const topic = metadata['swarm-feed-topic']
+
+    if (!owner || !topic) {
+      return null
+    }
+
+    const reader = this.bee.makeFeedReader('sequence', topic, owner)
+    const response = await reader.download()
+
+    return response.reference
+  }
+
+  private async getRootSlashMetadata(hash: string): Promise<MetadataMapping | null> {
+    const data = await this.bee.downloadData(hash)
+    const node = new MantarayNode()
+    node.deserialize(data)
+
+    if (!node.forks) {
+      return null
+    }
+    const fork = node.forks[INDEX_DOCUMENT_FORK_PREFIX]
+
+    if (!fork) {
+      return null
+    }
+    const metadataNode = fork.node
+
+    if (!metadataNode.IsWithMetadataType()) {
+      return null
+    }
+    const metadata = metadataNode.getMetadata
+
+    if (!metadata) {
+      return null
+    }
+
+    return metadata
+  }
+
+  private extractHashes(result: Record<string, string>, node: MantarayNode, prefix = ''): void {
+    if (!node.forks) {
+      return
+    }
+    for (const fork of Object.values(node.forks)) {
+      const path = prefix + this.bytesToUtf8(fork.prefix)
+      const childNode = fork.node
+
+      if (this.isValueNode(childNode, path)) {
+        result[path] = Utils.bytesToHex(childNode.getEntry)
+      }
+
+      if (childNode.isEdgeType()) {
+        this.extractHashes(result, childNode, path)
+      }
+    }
+  }
+
+  private load(reference: Uint8Array) {
+    return this.bee.downloadData(Utils.bytesToHex(reference))
+  }
+
+  private bytesToUtf8(bytes: Uint8Array): string {
+    return new TextDecoder('utf-8').decode(bytes)
+  }
+
+  private isValueNode(node: MantarayNode, path: string): node is ValueNode {
+    return !this.isRootSlash(node, path) && node.isValueType() && typeof node.getEntry !== 'undefined'
+  }
+
+  private isRootSlash(node: MantarayNode, path: string): boolean {
+    return path === '/' && node.IsWithMetadataType()
+  }
+}

src/utils/net.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import axios from 'axios'
+import { AuthError } from './AuthError'
 
 export function getJson<T extends Record<string, any>>(url: string): Promise<T> {
   return sendRequest(url, 'GET') as Promise<T>
 }
 
-export function postJson<T extends Record<string, any>>(url: string, data?: T): Promise<T> {
+export function postJson<T extends Record<string, any>>(url: string, data?: Record<string, any>): Promise<T> {
   return sendRequest(url, 'POST', data) as Promise<T>
 }
 
@@ -27,6 +28,15 @@ export async function sendRequest(
     method,
     headers,
     data,
+  }).catch(error => {
+    if (error?.response?.status === 401) {
+      throw new AuthError()
+    }
+
+    if (error?.response?.data) {
+      throw Error(`Request ${method} ${url} failed: ${JSON.stringify(error.response.data)}`)
+    }
+    throw error
   })
 
   return response.data

src/utils/rpc.ts

@@ -2,6 +2,16 @@ import { debounce } from '@material-ui/core'
 import { Contract, providers, Wallet, BigNumber as BN } from 'ethers'
 import { bzzABI, BZZ_TOKEN_ADDRESS } from './bzz-abi'
 
+const NETWORK_ID = 100
+
+async function getNetworkChainId(url: string): Promise<number> {
+  const provider = new providers.JsonRpcProvider(url, NETWORK_ID)
+  await provider.ready
+  const network = await provider.getNetwork()
+
+  return network.chainId
+}
+
 async function eth_getBalance(address: string, provider: providers.JsonRpcProvider): Promise<string> {
   if (!address.startsWith('0x')) {
     address = `0x${address}`
@@ -78,7 +88,7 @@ export async function sendBzzTransaction(
 }
 
 async function makeReadySigner(privateKey: string, jsonRpcProvider: string) {
-  const provider = new providers.JsonRpcProvider(jsonRpcProvider, 100)
+  const provider = new providers.JsonRpcProvider(jsonRpcProvider, NETWORK_ID)
   await provider.ready
   const signer = new Wallet(privateKey, provider)
 
@@ -86,6 +96,7 @@ async function makeReadySigner(privateKey: string, jsonRpcProvider: string) {
 }
 
 export const Rpc = {
+  getNetworkChainId,
   sendNativeTransaction,
   sendBzzTransaction,
   _eth_getBalance: eth_getBalance,