chore(master): release 0.26.2 (#663 )

fix: merge version and health check (#662 )
chore(master): release 0.26.1 (#660 )
2024-06-05 06:56:12 +02:00 · 2024-06-05 06:55:40 +02:00 · 2024-06-04 01:29:02 +02:00 · 2024-06-04 01:25:28 +02:00 · 2024-06-04 00:19:43 +02:00 · 2024-06-04 00:07:01 +02:00
153 changed files with 4603 additions and 2309 deletions
@@ -14,6 +14,7 @@
    "crypto*",
    "stream*",
    "env-paths",
-    "open"
+    "open",
+    "base64-inline-loader"
  ]
 }
@@ -1,7 +1 @@
-PORT=3001
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+PORT=3002
@@ -1,6 +0,0 @@
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
@@ -18,10 +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/
-      REACT_APP_DEV_MODE: 1
-      REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
-      REACT_APP_SENTRY_ENVIRONMENT: 'preview'

    steps:
      - uses: actions/checkout@v2
@@ -60,13 +56,11 @@ jobs:
      - name: Types check
        run: npm run check:types

-      - name: Types build
-        run: npm run compile:types
-
      - name: Update supported Bee action
        uses: ethersphere/update-supported-bee-action@v1
        if: github.ref == 'refs/heads/master'
        with:
+          updateEngine: true
          token: ${{ secrets.GHA_PAT_BASIC }}

      - name: Build
@@ -77,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
@@ -15,15 +15,6 @@ jobs:
          node-version: 18
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
-      - run: npm run compile:types
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-      - name: Create Sentry release
-        uses: getsentry/action-release@v1
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-        with:
-          sourcemaps: ./build/static/js
@@ -17,9 +17,6 @@ jobs:
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
      - run: npm run build
-        env:
-          REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
-          REACT_APP_SENTRY_ENVIRONMENT: 'pages'
      - run: echo "dashboard.ethswarm.org" > ./build/CNAME
      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
@@ -1,5 +1,195 @@
 # Changelog

+## [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)
+
+
+### Bug Fixes
+
+* revert bee env. variable names and add default rpc var ([#545](https://github.com/ethersphere/bee-dashboard/issues/545)) ([5295bd5](https://github.com/ethersphere/bee-dashboard/commit/5295bd5b012962846aa15ff12ca4234f0c8b37f7))
+* rpc endpoint setting ultra-light mode logic ([#547](https://github.com/ethersphere/bee-dashboard/issues/547)) ([e2dd077](https://github.com/ethersphere/bee-dashboard/commit/e2dd077118faf3b6071fc8327e37e317e0174975))
+
+## [0.20.0](https://github.com/ethersphere/bee-dashboard/compare/v0.19.3...v0.20.0) (2022-09-14)
+
+
+### Features
+
+* error reporting callback ([#530](https://github.com/ethersphere/bee-dashboard/issues/530)) ([0c74dae](https://github.com/ethersphere/bee-dashboard/commit/0c74dae4e88916cf54c3c0500b37203b865e48a7))
+
+
+### Bug Fixes
+
+* show update notifications only on non-auto-updating Swarm Desktops ([#543](https://github.com/ethersphere/bee-dashboard/issues/543)) ([528a810](https://github.com/ethersphere/bee-dashboard/commit/528a8106907ef176bcdb68b3386c2f3f9ea98a47))
+
+## [0.19.3](https://github.com/ethersphere/bee-dashboard/compare/v0.19.2...v0.19.3) (2022-08-24)
+
+
+### Bug Fixes
+
+* pass isBeeDesktop from provider to hook ([#525](https://github.com/ethersphere/bee-dashboard/issues/525)) ([677b6de](https://github.com/ethersphere/bee-dashboard/commit/677b6de0f82b02e1487420e3c08fbd19a949f97b))
+
+## [0.19.2](https://github.com/ethersphere/bee-dashboard/compare/v0.19.1...v0.19.2) (2022-08-08)
+
+
+### Bug Fixes
+
+* remove sentry ([#520](https://github.com/ethersphere/bee-dashboard/issues/520)) ([0260df6](https://github.com/ethersphere/bee-dashboard/commit/0260df61de0619202a819b79820cfbef6e3757ae))
+
+## [0.19.1](https://github.com/ethersphere/bee-dashboard/compare/v0.19.0...v0.19.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* compile types when building the library ([#516](https://github.com/ethersphere/bee-dashboard/issues/516)) ([df925b0](https://github.com/ethersphere/bee-dashboard/commit/df925b013bb02a16d308a86050ec8e0e0e361ff7))
+
+## [0.19.0](https://github.com/ethersphere/bee-dashboard/compare/v0.18.2...v0.19.0) (2022-08-03)
+
+
+### Features
+
+* add loading state to wallet balance ([#508](https://github.com/ethersphere/bee-dashboard/issues/508)) ([b9c008f](https://github.com/ethersphere/bee-dashboard/commit/b9c008f019f5bfe005d11f0208e90ca21b274e97))
+* add wallet endpoint and display blockchain name ([#492](https://github.com/ethersphere/bee-dashboard/issues/492)) ([fd11f01](https://github.com/ethersphere/bee-dashboard/commit/fd11f0166d77a89a2b350f16f9254af91441089d))
+* check whether the app runs within bee-desktop is now an environment variable ([#490](https://github.com/ethersphere/bee-dashboard/issues/490)) ([f01477e](https://github.com/ethersphere/bee-dashboard/commit/f01477ea70e6c343461cce6c1bcee3d738c076de))
+* don't display duplicate notifications with snackbar ([#488](https://github.com/ethersphere/bee-dashboard/issues/488)) ([feeca00](https://github.com/ethersphere/bee-dashboard/commit/feeca008acd523f16e7efdde2fa92ec98fde8bc9))
+* log errors to console when showing error notification  ([#489](https://github.com/ethersphere/bee-dashboard/issues/489)) ([6bfe97b](https://github.com/ethersphere/bee-dashboard/commit/6bfe97be5d69adeb13dafad2016d1c76a9d2e67c))
+* make blockchain JSON RPC configurable from settings ([#494](https://github.com/ethersphere/bee-dashboard/issues/494)) ([408b565](https://github.com/ethersphere/bee-dashboard/commit/408b565935a59759af6d3e252ceae6981fb60eb6))
+* pass isBeeDesktop as Bee Dashboard component property ([#510](https://github.com/ethersphere/bee-dashboard/issues/510)) ([4c48657](https://github.com/ethersphere/bee-dashboard/commit/4c48657fca0c22d5d4aaf220ffb278ac67001e1f))
+* reintroduce new bee version notification ([#500](https://github.com/ethersphere/bee-dashboard/issues/500)) ([f53e966](https://github.com/ethersphere/bee-dashboard/commit/f53e9664da8f4d1b6803de09f45a92493957d79d))
+* set default rpc endpoint ([#485](https://github.com/ethersphere/bee-dashboard/issues/485)) ([cba21bb](https://github.com/ethersphere/bee-dashboard/commit/cba21bb2e0e70e0ada01402d44e9ee61a55173cf))
+
+
+### Bug Fixes
+
+* correct website upload path ([#483](https://github.com/ethersphere/bee-dashboard/issues/483)) ([186d035](https://github.com/ethersphere/bee-dashboard/commit/186d0352cfda0408cf7add535d9247a85ce3796d))
+* disable swarm invitation outside of Swarm Desktop ([#497](https://github.com/ethersphere/bee-dashboard/issues/497)) ([f8390d7](https://github.com/ethersphere/bee-dashboard/commit/f8390d7eacc082a7b0a4551a3bc1572e3ce3463e))
+* handle unicode filename and website uploads ([#491](https://github.com/ethersphere/bee-dashboard/issues/491)) ([f82444f](https://github.com/ethersphere/bee-dashboard/commit/f82444f2124cad8bccead01a33cbc9f51d126acf))
+* if the node has error, disable pages that can never load ([#502](https://github.com/ethersphere/bee-dashboard/issues/502)) ([896f6e4](https://github.com/ethersphere/bee-dashboard/commit/896f6e48d988bbc0fe82a63a44bc82b035f30073))
+* new bee version notification is only shown if user bee version is detected ([#512](https://github.com/ethersphere/bee-dashboard/issues/512)) ([1be5cbd](https://github.com/ethersphere/bee-dashboard/commit/1be5cbda6de073f1e569ab92f178d815548a461b))
+
+## [0.18.2](https://github.com/ethersphere/bee-dashboard/compare/v0.18.1...v0.18.2) (2022-07-06)
+
+
+### Bug Fixes
+
+* don't link to latest release ([#477](https://github.com/ethersphere/bee-dashboard/issues/477)) ([498294e](https://github.com/ethersphere/bee-dashboard/commit/498294e227baa52c59adecf9c4cfd205061ddf75))
+* enable desktop update notifications on all platforms ([#476](https://github.com/ethersphere/bee-dashboard/issues/476)) ([33fff93](https://github.com/ethersphere/bee-dashboard/commit/33fff93cac31ec54b02f9c7d0c90c13c8d3763c7))
+
+## [0.18.1](https://github.com/ethersphere/bee-dashboard/compare/v0.18.0...v0.18.1) (2022-07-05)
+
+
+### Bug Fixes
+
+* refresh balance after dai tx ([#470](https://github.com/ethersphere/bee-dashboard/issues/470)) ([477c238](https://github.com/ethersphere/bee-dashboard/commit/477c2385b1d06da499facebf630338eb90ad22e7))
+* refresh dai after spending gas ([#468](https://github.com/ethersphere/bee-dashboard/issues/468)) ([56457eb](https://github.com/ethersphere/bee-dashboard/commit/56457eb9b989ed00c3b87555a43da7024654667d))
+* refresh gift wallet after swap ([#465](https://github.com/ethersphere/bee-dashboard/issues/465)) ([afb8c31](https://github.com/ethersphere/bee-dashboard/commit/afb8c31d9a022033cee14ff9a951f87cb992636f))
+* status checks have timeout ([#471](https://github.com/ethersphere/bee-dashboard/issues/471)) ([acee8c9](https://github.com/ethersphere/bee-dashboard/commit/acee8c9802318deb64d2bd8e701fae15c10d5fcf))
+
 ## [0.18.0](https://github.com/ethersphere/bee-dashboard/compare/v0.17.0...v0.18.0) (2022-07-04)


@@ -1 +1 @@
-* @Cafe137 @vojtechsimetka
+* @Cafe137
@@ -13,16 +13,18 @@
 **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.6.0-6ceadd35<!-- SUPPORTED_BEE_END -->**.
-Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
-[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
-[releases tab](https://github.com/ethersphere/bee-dashboard/releases).
+This project is intended to be used with \*\*Bee version
+
+<!-- SUPPORTED_BEE_START -->1.12.0-88c1d236<!-- SUPPORTED_BEE_END -->**. Using it with older or newer Bee versions is
+
+not recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and
+by keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).

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

-| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
-| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
-| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/postage_stamps.png) |
+| 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
-setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
-To see where the config file is, consult the
+:warning: To successfully connect to the Bee node, you will need to enable CORS. You can do so by setting
+`cors-allowed-origins: ['*']` in the Bee config file and then restart the Bee node. To see where the config file is,
+consult the
 [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)

 ### Terminal
@@ -94,14 +96,29 @@ npm start

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

-> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
+#### Environmental variables

-#### Bee Desktop development
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static
+files. We support following variables:

-If you want to develop Bee Dashboard in the Bee Desktop mode, then spin up `bee-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
+- `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
+- `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same
+  origin under which the Dashboard is served.
+- `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the
+  `http://localhost:1633` is used.
+- `REACT_APP_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 Desktop
+is initialized (eq. the splash screen disappear) and:

 ```sh
-echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
+REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
+
 npm start
 npm run desktop # This will inject the API key to the Dashboard
 ```
@@ -117,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).
@@ -126,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)
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.18.0",
+  "version": "0.26.2",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -26,14 +26,11 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^4.1.1",
-    "@ethersphere/manifest-js": "1.2.1",
+    "@ethersphere/bee-js": "^7.0.0",
    "@ethersphere/swarm-cid": "^0.1.0",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
-    "@sentry/react": "^7.1.1",
-    "@sentry/tracing": "^7.1.1",
    "assert": "^2.0.0",
    "axios": "0.24.0",
    "bignumber.js": "9.0.1",
@@ -46,6 +43,7 @@
    "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",
@@ -58,7 +56,6 @@
    "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"
@@ -85,13 +82,13 @@
    "@types/react-router": "5.1.18",
    "@types/react-router-dom": "5.3.2",
    "@types/react-syntax-highlighter": "13.5.2",
-    "@types/semver": "7.3.9",
    "@typescript-eslint/eslint-plugin": "5.28.0",
    "@typescript-eslint/parser": "5.28.0",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.1.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-tsconfig-paths": "1.0.2",
+    "base64-inline-loader": "^2.0.1",
    "cors": "^2.8.5",
    "depcheck": "^1.4.3",
    "env-paths": "^3.0.0",
@@ -110,9 +107,11 @@
    "file-loader": "6.2.0",
    "open": "^8.4.0",
    "prettier": "2.4.1",
+    "puppeteer": "^15.4.0",
    "react-scripts": "^5.0.1",
+    "rimraf": "^3.0.2",
    "ts-node": "^10.8.1",
-    "typescript": "4.7.3",
+    "typescript": "4.8.3",
    "web-vitals": "2.1.2",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
@@ -126,15 +125,17 @@
    "start": "react-scripts start",
    "desktop": "node ./desktop.mjs",
    "build": "react-scripts build",
-    "build:component": "webpack --mode=production",
+    "build:component": "rimraf ./lib && webpack --mode=production && npm run compile:types",
    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
    "test": "react-scripts test",
+    "test:ui": "node ui-test/index.js",
    "serve": "node ./serve.js",
    "depcheck": "depcheck .",
    "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
    "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",
@@ -154,8 +155,8 @@
    ]
  },
  "engines": {
-    "node": ">=12.0.0",
+    "node": ">=14.0.0",
    "npm": ">=6.9.0",
-    "bee": ">=0.6.0"
+    "bee": "1.16.1-8e269c8"
  }
 }
@@ -1,9 +1,8 @@
 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 * as Sentry from '@sentry/react'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -13,39 +12,49 @@ import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
 import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as TopUpProvider } from './providers/TopUp'
+import { Provider as BalanceProvider } from './providers/WalletBalance'
 import BaseRouter from './routes'
 import { theme } from './theme'
-import { config } from './config'
-import ItsBroken from './layout/ItsBroken'
-import { initSentry } from './utils/sentry'

 interface Props {
  beeApiUrl?: string
-  beeDebugApiUrl?: string
+  defaultRpcUrl?: string
  lockedApiSettings?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  errorReporting?: (err: Error) => void
 }

-if (config.SENTRY_KEY) {
-  // eslint-disable-next-line no-console
-  initSentry().catch(e => console.error(e))
-}
-
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
+const App = ({
+  beeApiUrl,
+  defaultRpcUrl,
+  lockedApiSettings,
+  isDesktop,
+  desktopUrl,
+  errorReporting,
+}: Props): ReactElement => {
  const mainApp = (
    <div className="App">
      <ThemeProvider theme={theme}>
-        <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
+        <SettingsProvider
+          beeApiUrl={beeApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
+          lockedApiSettings={lockedApiSettings}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
+        >
          <TopUpProvider>
            <BeeProvider>
+              <BalanceProvider>
                <StampsProvider>
                  <FileProvider>
                    <FeedsProvider>
                      <PlatformProvider>
-                      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+                        <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
                          <Router>
                            <>
                              <CssBaseline />
-                            <Dashboard>
+                              <Dashboard errorReporting={errorReporting}>
                                <BaseRouter />
                              </Dashboard>
                            </>
@@ -55,6 +64,7 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
                    </FeedsProvider>
                  </FileProvider>
                </StampsProvider>
+              </BalanceProvider>
            </BeeProvider>
          </TopUpProvider>
        </SettingsProvider>
@@ -62,18 +72,6 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
    </div>
  )

-  // Displays Report Dialog when some component crashes
-  if (config.SENTRY_KEY) {
-    return (
-      <Sentry.ErrorBoundary
-        showDialog
-        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
-      >
-        {mainApp}
-      </Sentry.ErrorBoundary>
-    )
-  }
-
  return mainApp
 }

@@ -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}
@@ -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) {
+    if (peerId && beeApi) {
      setLoadingCashout(true)
-      beeDebugApi
+      beeApi
        .cashoutLastCheque(peerId)
        .then(res => {
          setOpen(false)
@@ -48,6 +46,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
          )
        })
        .catch((e: Error) => {
+          console.error(e) // eslint-disable-line
          enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
        })
        .finally(() => {
@@ -1,8 +1,8 @@
 import { Component, ErrorInfo, ReactElement } from 'react'
-import ItsBroken from '../layout/ItsBroken'

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

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

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

@@ -21,13 +24,17 @@ export default class ErrorBoundary extends Component<Props, State> {
  }

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

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

    return this.props.children
@@ -1,9 +1,9 @@
 import { Typography } from '@material-ui/core/'
 import { ReactElement } from 'react'
 import Identicon from 'react-identicons'
-import { config } from '../config'
 import ClipboardCopy from './ClipboardCopy'
 import QRCodeModal from './QRCodeModal'
+import { BLOCKCHAIN_EXPLORER_URL } from '../constants'

 interface Props {
  address: string | undefined
@@ -36,7 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement {
                    }
                  : { marginRight: '7px' }
              }
-              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
+              href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
              target="_blank"
              rel="noreferrer"
            >
@@ -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',
@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import Info from 'remixicon-react/InformationLineIcon'
+import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
 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({
@@ -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>
    </>
  )
@@ -1,95 +0,0 @@
-import { ReactElement, useEffect, useState } from 'react'
-import * as Sentry from '@sentry/react'
-import { Link } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import MessageSquare from 'remixicon-react/Message2LineIcon'
-
-import config from '../config'
-import SideBarItem from './SideBarItem'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    link: {
-      color: '#9f9f9f',
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'none',
-
-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          textDecoration: 'none',
-        },
-      },
-    },
-
-    icon: {
-      height: theme.spacing(4),
-    },
-  }),
-)
-
-/**
- * Parses Sentry DNS so it could be transformed into API call
- * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
- */
-const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
-
-async function isSentryReachable(): Promise<boolean> {
-  const key = config.SENTRY_KEY
-
-  if (!key) {
-    return false
-  }
-
-  const match = SENTRY_PARSING_REGEX.exec(key)
-
-  if (!match) {
-    return false
-  }
-
-  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
-
-  try {
-    await fetch(url, { method: 'POST' })
-
-    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
-    return true
-  } catch (e) {
-    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
-    return false
-  }
-}
-
-function showFeedbackForm(): void {
-  const eventId = Sentry.captureMessage('User feedback')
-  Sentry.showReportDialog({
-    eventId,
-    title: 'Provide us feedback!',
-    subtitle: 'Share with us what you like and/or dislike.',
-    subtitle2: 'We will be very happy.',
-    labelComments: 'What is your impression about this app?',
-    labelSubmit: 'Send Feedback',
-  })
-}
-
-export default function Feedback(): ReactElement {
-  const [sentryEnabled, setSentryEnabled] = useState(false)
-  const classes = useStyles()
-
-  // Run this only on component mount to verify once that Sentry is reachable
-  useEffect(() => {
-    isSentryReachable().then(result => {
-      setSentryEnabled(result)
-    })
-  }, [])
-
-  if (sentryEnabled) {
-    return (
-      <Link onClick={showFeedbackForm} className={classes.link}>
-        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
-      </Link>
-    )
-  }
-
-  return <></>
-}
@@ -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
@@ -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>
+  )
+}
@@ -1,24 +1,23 @@
-import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { BeeModes } from '@ethersphere/bee-js'
+import { Divider, Drawer, Grid, List, Link as MUILink } 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 TopUpContext } from '../providers/TopUp'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
-import { config } from '../config'
-import { useIsBeeDesktop } from '../hooks/apiHooks'
+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 Feedback from './Feedback'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-import { BeeModes } from '@ethersphere/bee-js'

 const drawerWidth = 300

@@ -68,8 +67,7 @@ const useStyles = makeStyles((theme: Theme) =>

 export default function SideBar(): ReactElement {
  const classes = useStyles()
-  const { isBeeDesktop } = useIsBeeDesktop()
-  const { providerUrl } = useContext(TopUpContext)
+  const { isDesktop } = useContext(SettingsContext)
  const { nodeInfo } = useContext(BeeContext)

  const navBarItems = [
@@ -86,7 +84,7 @@ export default function SideBar(): ReactElement {
    },
    {
      label: 'Account',
-      path: providerUrl === null ? ROUTES.WALLET : ROUTES.ACCOUNT_WALLET,
+      path: ROUTES.ACCOUNT_WALLET,
      icon: AccountIcon,
      pathMatcherSubstring: '/account/',
    },
@@ -102,7 +100,7 @@ export default function SideBar(): ReactElement {
      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
        <Grid className={classes.logo}>
          <Link to={ROUTES.INFO}>
-            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
+            <img alt="swarm" src={isDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
        </Grid>
        <Grid>
@@ -121,7 +119,7 @@ export default function SideBar(): ReactElement {
          </List>
          <Divider className={classes.divider} />
          <List>
-            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
+            <MUILink href={BEE_DOCS_HOST} target="_blank" className={classes.link}>
              <SideBarItem
                iconStart={<DocsIcon className={classes.icon} />}
                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
@@ -129,13 +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>
        </Grid>
        <Grid>
          <List>
            <Link to={ROUTES.STATUS} className={classes.link}>
              <SideBarStatus path={ROUTES.STATUS} />
            </Link>
-            <Feedback />
          </List>
        </Grid>
      </Grid>
@@ -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 { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { ListItem, ListItemIcon, ListItemText, 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',
    },
  }),
 )
@@ -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>
+  )
+}
@@ -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'
@@ -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"
@@ -3,8 +3,8 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
 import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
-import { config } from '../config'
 import { ROUTES } from '../routes'
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
      <Grid item className={classes.content}>
        <Typography align="center">
          Please check your node status to fix the problem. You can also check out the{' '}
-          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
            Swarm Bee Docs
          </MuiLink>{' '}
          or ask for support on the{' '}
-          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
            Ethereum Swarm Discord
          </MuiLink>
          .
@@ -55,6 +55,7 @@ export default function WithdrawDepositModal({
      setOpen(false)
      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
    } catch (e) {
+      console.error(e) // eslint-disable-line
      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
    }
  }
@@ -1,29 +0,0 @@
-class Config {
-  public readonly BEE_API_HOST: string
-  public readonly BEE_DEBUG_API_HOST: string
-  public readonly BLOCKCHAIN_EXPLORER_URL: string
-  public readonly BEE_DOCS_HOST: string
-  public readonly BEE_DISCORD_HOST: string
-  public readonly GITHUB_REPO_URL: string
-  public readonly BEE_DESKTOP_URL: string
-  public readonly SENTRY_KEY: string | undefined
-  public readonly SENTRY_ENVIRONMENT: string | undefined
-
-  constructor() {
-    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
-    this.SENTRY_KEY = process.env.REACT_APP_SENTRY_KEY
-    this.SENTRY_ENVIRONMENT = process.env.REACT_APP_SENTRY_ENVIRONMENT
-    this.BEE_DEBUG_API_HOST =
-      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
-    this.BLOCKCHAIN_EXPLORER_URL =
-      process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet'
-    this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/'
-    this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
-    this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
-    this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin
-  }
-}
-
-export const config = new Config()
-
-export default config
@@ -1,4 +1,14 @@
 export const META_FILE_NAME = '.swarmgatewaymeta.json'
 export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
-export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'
+export const BZZ_LINK_DOMAIN = 'bzz.link'
+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_RPC_URL = 'https://xdai.fairdatasociety.org'
@@ -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) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+      action={async (amount: bigint) => {
+        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
      }}
    />
  )
@@ -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'
+      }}
+    />
+  )
+}
@@ -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) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+      action={async (amount: bigint) => {
+        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
      }}
    />
  )
@@ -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)

@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react-hooks'
-import express from 'express'
 import cors from 'cors'
+import express from 'express'
 import type { Server } from 'http'
-import { useIsBeeDesktop } from './apiHooks'
+import { useBeeDesktop } from './apiHooks'

 interface AddressInfo {
  address: string
@@ -10,7 +10,7 @@ interface AddressInfo {
  port: number
 }

-export function mockServer(data: Record<string | number | symbol, string>): Promise<Server> {
+export function mockServer(data: Record<string | number | symbol, string | boolean>): Promise<Server> {
  const app = express()
  app.use(cors())

@@ -26,48 +26,28 @@ export function mockServer(data: Record<string | number | symbol, string>): Prom
 }

 let serverCorrect: Server
-let serverWrong: Server

 let serverCorrectURL: string
-let serverWrongURL: string

 beforeAll(async () => {
-  serverCorrect = await mockServer({ name: 'bee-desktop' })
+  serverCorrect = await mockServer({ autoUpdateEnabled: true, version: '0.1.0' })
  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
  serverCorrectURL = `http://localhost:${portServerCorrect}`
-
-  serverWrong = await mockServer({ foo: 'bar' })
-  const portServerWrong = (serverWrong.address() as AddressInfo).port
-  serverWrongURL = `http://localhost:${portServerWrong}`
 })

 afterAll(async () => {
  await new Promise(resolve => serverCorrect.close(resolve))
-  await new Promise(resolve => serverWrong.close(resolve))
 })

-describe('useIsBeeDesktop', () => {
-  it('should fail when connected to wrong server', async () => {
-    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverWrongURL }))
-
-    expect(result.current.isLoading).toBe(true)
-    expect(result.current.isBeeDesktop).toBe(false)
+describe('useBeeDesktop', () => {
+  it('should not have error when connected to bee-desktop', async () => {
+    const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))

    await waitFor(() => {
      expect(result.current.isLoading).toBe(false)
    })
-    expect(result.current.isBeeDesktop).toBe(false)
-  })
-
-  it('should return isBeeDesktop true when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL }))
-
-    expect(result.current.isLoading).toBe(true)
-    expect(result.current.isBeeDesktop).toBe(false)
-
-    await waitFor(() => {
-      expect(result.current.isLoading).toBe(false)
-    })
-    expect(result.current.isBeeDesktop).toBe(true)
+    expect(result.current.desktopAutoUpdateEnabled).toBe(true)
+    expect(result.current.beeDesktopVersion).toBe('0.1.0')
+    expect(result.current.error).toBe(null)
  })
 })
@@ -1,8 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { config } from '../config'
-import { getJson } from '../utils/net'
-import { getLatestBeeDesktopVersion } from '../utils/desktop'
+import { GITHUB_REPO_URL } from '../constants'
+import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'

 export interface LatestBeeReleaseHook {
  latestBeeRelease: LatestBeeRelease | null
@@ -10,8 +9,9 @@ export interface LatestBeeReleaseHook {
  error: Error | null
 }

-export interface IsBeeDesktopHook {
-  isBeeDesktop: boolean
+export interface BeeDesktopHook {
+  reachable: boolean
+  error: Error | null
  isLoading: boolean
  beeDesktopVersion: string
  desktopAutoUpdateEnabled: boolean
@@ -21,44 +21,61 @@ export interface NewDesktopVersionHook {
  newBeeDesktopVersion: string
 }

-interface Config {
-  BEE_DESKTOP_URL: string
-}
-
-/**
- * Detect if the dashboard is run within bee-desktop
- *
- * @returns isBeeDesktop true if this is run within bee-desktop
- */
-export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
-  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+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(`${conf.BEE_DESKTOP_URL}/info`)
-      .then(res => {
-        if (res.data?.name === 'bee-desktop') {
-          setIsBeeDesktop(true)
-          setBeeDesktopVersion(res.data?.version)
-          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
-        } else setIsBeeDesktop(false)
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
        })
        .catch(() => {
-        setIsBeeDesktop(false)
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+    } else {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(res => {
+          setBeeDesktopVersion(res.data?.version)
+          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+          setError(null)
+        })
+        .catch(e => {
+          setError(e)
        })
        .finally(() => {
          setLoading(false)
        })
-  }, [conf])
+    }
+  }, [desktopUrl, isBeeDesktop])

-  return { isBeeDesktop, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }

-async function checkNewVersion(conf: Config): Promise<string> {
-  const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json()
+async function checkNewVersion(desktopUrl: string): Promise<string> {
+  const resJson = await (await fetch(`${desktopUrl}/info`)).json()
  const currentVersion = resJson.version
  const latestVersion = await getLatestBeeDesktopVersion()

@@ -69,56 +86,41 @@ async function checkNewVersion(conf: Config): Promise<string> {
  return ''
 }

-export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook {
-  const [newBeeDesktopVersion, setNewNewBeeDesktopVersion] = useState<string>('')
+export function useNewBeeDesktopVersion(
+  isBeeDesktop: boolean,
+  desktopUrl: string,
+  desktopAutoUpdateEnabled: boolean,
+): NewDesktopVersionHook {
+  const [newBeeDesktopVersion, setNewBeeDesktopVersion] = useState<string>('')

  useEffect(() => {
-    if (!isBeeDesktop) {
+    if (!isBeeDesktop || desktopAutoUpdateEnabled) {
      return
    }

-    checkNewVersion(conf).then(version => {
+    checkNewVersion(desktopUrl).then(version => {
      if (version !== '') {
-        setNewNewBeeDesktopVersion(version)
+        setNewBeeDesktopVersion(version)
      }
    })
-  }, [isBeeDesktop, conf])
+  }, [isBeeDesktop, desktopUrl, desktopAutoUpdateEnabled])

  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
-  'chain-enable': boolean
-  'cors-allowed-origins': string
-  'resolver-options': string
-  'use-postage-snapshot': boolean
-  'data-dir': string
-  transaction: string
-  'block-hash': string
-  'swap-endpoint'?: string
-}
-
 export interface GetBeeConfig {
  config: BeeConfig | null
  isLoading: boolean
  error: Error | null
 }

-export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+export const useGetBeeConfig = (desktopUrl: string): GetBeeConfig => {
  const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
  const [isLoading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
-    getJson<BeeConfig>(`${conf.BEE_DESKTOP_URL}/config`)
+    getDesktopConfiguration(desktopUrl)
      .then(beeConf => {
        setBeeConfig(beeConf)
        setError(null)
@@ -130,7 +132,7 @@ export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
      .finally(() => {
        setLoading(false)
      })
-  }, [conf])
+  }, [desktopUrl])

  return { config: beeConfig, isLoading, error }
 }
@@ -142,7 +144,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {

  useEffect(() => {
    axios
-      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
+      .get(`${GITHUB_REPO_URL}/releases/latest`)
      .then(res => {
        setLatestBeeRelease(res.data)
      })
@@ -1,12 +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 defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+
 ReactDOM.render(
  <React.StrictMode>
-    <App />
+    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -1,16 +1,14 @@
 import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import React, { ReactElement, useContext, useEffect } from 'react'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 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 { Context } from '../providers/Bee'
-import config from '../config'
-import * as Sentry from '@sentry/react'
-import ItsBroken from './ItsBroken'
-import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
+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'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -23,18 +21,25 @@ const useStyles = makeStyles((theme: Theme) =>

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

 const Dashboard = (props: Props): ReactElement => {
  const classes = useStyles()

-  const { isLoading } = useContext(Context)
-  const { isBeeDesktop, desktopAutoUpdateEnabled } = useIsBeeDesktop()
-  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
+  const { isLoading } = useContext(BeeContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
  const { enqueueSnackbar, closeSnackbar } = useSnackbar()

  useEffect(() => {
-    if (!desktopAutoUpdateEnabled && newBeeDesktopVersion !== '') {
+    // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
+    if (desktopAutoUpdateEnabled) {
+      return
+    }
+
+    if (newBeeDesktopVersion !== '') {
      enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
        variant: 'warning',
        preventDuplicate: true,
@@ -75,25 +80,13 @@ const Dashboard = (props: Props): ReactElement => {
    </>
  )

-  let errorBoundaryWithContent
-
-  if (config.SENTRY_KEY) {
-    errorBoundaryWithContent = (
-      <Sentry.ErrorBoundary
-        showDialog
-        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
-      >
-        {content}
-      </Sentry.ErrorBoundary>
-    )
-  } else {
-    errorBoundaryWithContent = <ErrorBoundary>{content}</ErrorBoundary>
-  }
-
  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
-      <Container className={classes.content}>{errorBoundaryWithContent}</Container>
+      <Container className={classes.content}>
+        {' '}
+        <ErrorBoundary errorReporting={props.errorReporting}>{content}</ErrorBoundary>
+      </Container>
    </div>
  )
 }
@@ -1,36 +0,0 @@
-import { Container } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ReactElement } from 'react'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    content: {
-      backgroundColor: theme.palette.background.default,
-      minHeight: '100vh',
-      textAlign: 'center',
-    },
-    errorMsg: {
-      marginTop: '30px',
-    },
-  }),
-)
-
-interface Props {
-  message: string
-}
-
-// TODO: Provide some nicer design
-const ItsBroken = ({ message }: Props): ReactElement => {
-  const classes = useStyles()
-
-  return (
-    <div>
-      <Container className={classes.content}>
-        <h1>Ups, there was a problem 😅</h1>
-        <h3 className={classes.errorMsg}>Error: {message}</h3>
-      </Container>
-    </div>
-  )
-}
-
-export default ItsBroken
@@ -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) {
-    super(amount, 16)
+  constructor(value: BigNumber | string | bigint) {
+    super(value, BZZ_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): BzzToken {
+    return Token.fromDecimal(value, BZZ_DECIMAL_PLACES)
  }
 }
@@ -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) {
-    super(amount, 18)
+  constructor(value: BigNumber | string | bigint) {
+    super(value, DAI_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): DaiToken {
+    return Token.fromDecimal(value, DAI_DECIMAL_PLACES)
  }
 }
@@ -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,
+    )
+  }
 }
@@ -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: {
-      marginRight: theme.spacing(0.125),
-    },
-    centerTab: {
-      marginLeft: theme.spacing(0.125),
-      marginRight: theme.spacing(0.125),
-    },
-    rightTab: {
-      marginLeft: theme.spacing(0.125),
+    tab: {
+      marginLeft: theme.spacing(0.25),
+      marginRight: theme.spacing(0.25),
    },
  }),
 )
@@ -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.centerTab} key="CHEQUEBOOK" label="Chequebook" />
-        <Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
-        <Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
+        <Tab className={classes.tab} key="WALLET" label="Wallet" />
+        <Tab className={classes.tab} key="CHEQUEBOOK" label="Chequebook" />
+        <Tab className={classes.tab} key="STAMPS" label="Stamps" />
+        <Tab className={classes.tab} key="FEEDS" label="Feeds" />
+        {nodeInfo?.beeMode === BeeModes.FULL ? <Tab className={classes.tab} key="STAKING" label="Staking" /> : null}
      </Tabs>
    </div>
  )
@@ -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 />
@@ -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>
+    </>
+  )
+}
@@ -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 && (
@@ -10,13 +10,18 @@ import ExpandableListItemActions from '../../../components/ExpandableListItemAct
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
-import { Context } from '../../../providers/Bee'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+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'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'

 export function AccountWallet(): ReactElement {
-  const { balance, nodeAddresses, nodeInfo } = useContext(Context)
+  const { nodeAddresses, nodeInfo, status } = useContext(BeeContext)
+  const { isDesktop } = useContext(SettingsContext)
+  const { balance } = useContext(BalanceProvider)

  const navigate = useNavigate()

@@ -29,9 +34,11 @@ export function AccountWallet(): ReactElement {
  }

  function onDeposit() {
-    navigate(ROUTES.CONFIRMATION)
+    navigate(ROUTES.TOP_UP)
  }

+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
  return (
    <>
      <Header />
@@ -39,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 ? (
@@ -65,9 +74,11 @@ export function AccountWallet(): ReactElement {
        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
          Check transactions on Blockscout
        </SwarmButton>
+        {isDesktop && (
          <SwarmButton onClick={onInvite} iconType={Gift}>
            Invite to Swarm...
          </SwarmButton>
+        )}
      </ExpandableListItemActions>
    </>
  )
@@ -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)}[…]`}
@@ -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' })
@@ -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
-              label="BZZ Link"
-              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
-            />
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
          </Box>
        </>
      ) : (
@@ -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))
@@ -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
@@ -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>
+    </>
+  )
+}
@@ -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(
-        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
-      )
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters or ENS domain.')
    }
  }

@@ -75,6 +73,7 @@ export function Download(): ReactElement {
      if (message.includes('Not Found: Not Found')) {
        message = 'The specified hash was not found.'
      }
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
    } finally {
      setLoading(false)
@@ -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'
@@ -8,15 +7,16 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import config from '../../config'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { 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)
@@ -78,7 +78,7 @@ export function Share(): ReactElement {
    } catch (e) {} // eslint-disable-line no-empty

    if (previewFile) {
-      setPreview(`${config.BEE_API_HOST}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
+      setPreview(`${apiUrl}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
    }

    setMetadata(metadata)
@@ -153,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}
@@ -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 IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as BeeContext, CheckState } from '../../providers/Bee'
+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)
@@ -77,7 +77,7 @@ export function Upload(): ReactElement {
    let fls: FilePath[] = files.map(f => packageFile(f)) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
    let indexDocument: string | undefined = undefined // This means we assume it's folder

-    if (files.length === 1) indexDocument = files[0].name
+    if (files.length === 1) indexDocument = unescape(encodeURIComponent(files[0].name))
    else if (files.length > 1) {
      const idx = detectIndexHtml(files)

@@ -125,28 +125,25 @@ export function Upload(): ReactElement {

    setUploading(true)

-    if (beeDebugApi) {
-      await waitUntilStampUsable(stamp.batchID, beeDebugApi)
-    }
+    await waitUntilStampUsable(stamp.batchID, beeApi)

    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 => {
+        console.error(e) // eslint-disable-line
        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
        setUploading(false)
      })
@@ -185,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}>
@@ -203,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}
@@ -1,44 +1,48 @@
 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 BeeContext } from '../../providers/Bee'
+import { Token } from '../../models/Token'
+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)

 export default function Index(): ReactElement {
-  const { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
-  const { balance } = useContext(BeeContext)
+  const { giftWallets, addGiftWallet } = useContext(TopUpContext)
+  const { rpcProvider, desktopUrl } = useContext(SettingsContext)
+  const { balance } = useContext(BalanceProvider)

  const [loading, setLoading] = useState(false)
  const [balances, setBalances] = useState<ResolvedWallet[]>([])

  useEffect(() => {
    async function mapGiftWallets() {
-      if (!provider) return
+      if (!rpcProvider) {
+        return
+      }
      const results = []
      for (const giftWallet of giftWallets) {
-        results.push(await ResolvedWallet.make(giftWallet, provider))
+        results.push(await ResolvedWallet.make(giftWallet, rpcProvider))
      }
      setBalances(results)
    }

    mapGiftWallets()
-  }, [giftWallets, provider])
+  }, [giftWallets, rpcProvider])

  const { enqueueSnackbar } = useSnackbar()
  const navigate = useNavigate()
@@ -49,9 +53,10 @@ export default function Index(): ReactElement {
    try {
      const wallet = Wallet.createRandom()
      addGiftWallet(wallet)
-      await createGiftWallet(wallet.address)
+      await createGiftWallet(desktopUrl, wallet.address)
      enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
    } catch (error) {
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
    } finally {
      setLoading(false)
@@ -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"
+    />
+  )
+}
@@ -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
@@ -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"
+    />
+  )
+}
@@ -1,99 +1,30 @@
-import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
-import Wallet from 'remixicon-react/Wallet3LineIcon'
-import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
-import Upload from 'remixicon-react/UploadLineIcon'
-
-import { Context as BeeContext } from '../../providers/Bee'
-import Card from '../../components/Card'
-import Map from '../../components/Map'
+import { ReactElement, useContext } from 'react'
 import ExpandableListItem from '../../components/ExpandableListItem'
-import { useNavigate } from 'react-router'
-import { ROUTES } from '../../routes'
-import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop'
+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 { chainIdToName } from '../../utils/chain'
+import { ChequebookInfoCard } from './ChequebookInfoCard'
 import NodeInfoCard from './NodeInfoCard'
+import { WalletInfoCard } from './WalletInfoCard'

 export default function Status(): ReactElement {
-  const {
-    status,
-    latestUserVersion,
-    isLatestBeeVersion,
-    latestBeeVersionUrl,
-    topology,
-    nodeInfo,
-    balance,
-    chequebookBalance,
-  } = useContext(BeeContext)
-  const { isBeeDesktop, beeDesktopVersion } = useIsBeeDesktop()
-  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
-  const navigate = useNavigate()
+  const { beeVersion, status, topology, nodeInfo, chainId } = useContext(BeeContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)

  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) ? (
-          <Card
-            buttonProps={{
-              iconType: Wallet,
-              children: 'Manage your wallet',
-              onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
-            }}
-            icon={<Wallet />}
-            title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
-            subtitle="Current wallet balance."
-            status="ok"
-          />
-        ) : (
-          <Card
-            buttonProps={{
-              iconType: Wallet,
-              children: 'Setup wallet',
-              onClick: () => navigate(ROUTES.WALLET),
-            }}
-            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.toFixedDecimal(4)} xBZZ`
-                    : 'No available balance.'
-                }
-                subtitle="Chequebook not setup."
-                status="error"
-              />
-            )}
-          </>
-        )}
+        <WalletInfoCard />
+        <div style={{ width: '8px' }}></div>
+        <ChequebookInfoCard />
      </div>
      <div style={{ height: '16px' }} />
      <Map error={status.topology.checkState !== 'OK'} />
@@ -101,7 +32,7 @@ export default function Status(): ReactElement {
      <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
      <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
      <div style={{ height: '16px' }} />
-      {isBeeDesktop && (
+      {isDesktop && (
        <ExpandableListItem
          label="Desktop version"
          value={
@@ -112,6 +43,7 @@ export default function Status(): ReactElement {
                variant="outlined"
                href={BEE_DESKTOP_LATEST_RELEASE_PAGE}
                target="_blank"
+                disabled={newBeeDesktopVersion === ''}
                style={{ height: '26px' }}
              >
                {newBeeDesktopVersion === '' ? 'latest' : 'update'}
@@ -120,29 +52,9 @@ export default function Status(): ReactElement {
          }
        />
      )}
-      <ExpandableListItem
-        label="Bee version"
-        value={
-          <div>
-            <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-              Bee
-            </a>
-            {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && !isBeeDesktop && (
-              <Button
-                size="small"
-                variant="outlined"
-                href={latestBeeVersionUrl}
-                target="_blank"
-                style={{ height: '26px' }}
-              >
-                {isLatestBeeVersion ? 'latest' : 'update'}
-              </Button>
-            )}
-          </div>
-        }
-      />
+      <ExpandableListItem label="Bee version" value={beeVersion} />
      <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
+      {chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
    </div>
  )
 }
@@ -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">
@@ -1,120 +0,0 @@
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ReactElement, useContext, useState } from 'react'
-import Check from 'remixicon-react/CheckLineIcon'
-import BankCard from 'remixicon-react/BankCard2LineIcon'
-import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
-import Gift from 'remixicon-react/GiftLineIcon'
-import { useNavigate } from 'react-router'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-import { HistoryHeader } from '../../components/HistoryHeader'
-import { SwarmButton } from '../../components/SwarmButton'
-import { ROUTES } from '../../routes'
-import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
-import { useIsBeeDesktop } from '../../hooks/apiHooks'
-import { BeeModes } from '@ethersphere/bee-js'
-import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
-import { Loading } from '../../components/Loading'
-import { useSnackbar } from 'notistack'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    checkWrapper: {
-      background: 'rgba(0, 230, 118, 0.25)',
-      borderRadius: 99999,
-      width: '180px',
-      height: '180px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  }),
-)
-
-const MINIMUM_XDAI = '0.05'
-const MINIMUM_XBZZ = '0.1'
-
-export default function Confirmation(): ReactElement {
-  const navigate = useNavigate()
-  const styles = useStyles()
-  const { isBeeDesktop } = useIsBeeDesktop()
-  const { balance, nodeInfo } = useContext(BeeContext)
-  const { providerUrl } = useContext(TopUpContext)
-  const [loading, setLoading] = useState(false)
-  const { enqueueSnackbar } = useSnackbar()
-
-  const canUpgradeToLightNode =
-    isBeeDesktop &&
-    nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
-    balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
-    balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
-
-  async function restart() {
-    if (!providerUrl) {
-      return
-    }
-    setLoading(true)
-    try {
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
-      navigate(ROUTES.RESTART_LIGHT)
-    } catch (error) {
-      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
-    }
-    setLoading(false)
-  }
-
-  if (!balance) {
-    return <Loading />
-  }
-
-  return (
-    <>
-      <HistoryHeader>Connect to the blockchain</HistoryHeader>
-      <Grid container direction="column" alignItems="center">
-        <Box mb={6}>
-          <div className={styles.checkWrapper}>
-            <Check size={100} color="#ededed" />
-          </div>
-        </Box>
-        <Box mb={1}>
-          <Typography style={{ fontWeight: 'bold' }}>Your node&apos;s RPC endpoint is set up correctly!</Typography>
-        </Box>
-        <Box mb={4}>
-          <Typography align="center">Lastly, you will need to top-up your node wallet.</Typography>
-          <Typography align="center">
-            If you&apos;re not familiar with cryptocurrencies, you can start with a bank card.
-          </Typography>
-        </Box>
-        <ExpandableListItemActions>
-          <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
-            Use a gift code
-          </SwarmButton>
-          <SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
-            Use DAI
-          </SwarmButton>
-          <SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
-            Get started with bank card
-          </SwarmButton>
-        </ExpandableListItemActions>
-        {canUpgradeToLightNode && (
-          <>
-            <Box mt={8} mb={2}>
-              <Typography align="center">
-                It seems that you have enough balance to upgrade your bee node to light node. By upgrading you will gain
-                access to file upload and faster downloads.
-              </Typography>
-            </Box>
-            <ExpandableListItemActions>
-              <SwarmButton iconType={Check} onClick={restart} disabled={loading} loading={loading}>
-                Upgrade now
-              </SwarmButton>
-              <div />
-            </ExpandableListItemActions>
-          </>
-        )}
-      </Grid>
-    </>
-  )
-}
@@ -1,67 +0,0 @@
-import { Box, Typography } from '@material-ui/core'
-import { useSnackbar } from 'notistack'
-import { ReactElement, useContext, useState } from 'react'
-import Check from 'remixicon-react/CheckLineIcon'
-import { useNavigate } from 'react-router'
-import { providers } from 'ethers'
-import { HistoryHeader } from '../../components/HistoryHeader'
-import { SwarmButton } from '../../components/SwarmButton'
-import { SwarmTextInput } from '../../components/SwarmTextInput'
-import { Context } from '../../providers/TopUp'
-import { ROUTES } from '../../routes'
-import { Rpc } from '../../utils/rpc'
-
-export default function Index(): ReactElement {
-  const { providerUrl, setProviderUrl } = useContext(Context)
-  const [localProviderUrl, setLocalProviderUrl] = useState(providerUrl)
-
-  const { enqueueSnackbar } = useSnackbar()
-  const navigate = useNavigate()
-
-  async function onSubmit() {
-    if (!localProviderUrl) return
-
-    try {
-      await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
-      enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
-      setProviderUrl(localProviderUrl)
-      navigate(ROUTES.CONFIRMATION)
-    } catch (error) {
-      enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
-    }
-  }
-
-  return (
-    <>
-      <HistoryHeader>Connect to the blockchain</HistoryHeader>
-      <Box mb={1}>
-        <Typography style={{ fontWeight: 'bold' }}>Set up RPC endpoint</Typography>
-      </Box>
-      <Box mb={4}>
-        <Typography>
-          To connect to and retrieve data from the blockchain, you&apos;ll need to connect to a publicly-provided node
-          via the node&apos;s RPC endpoint. If you&apos;re not familiar with this, please read{' '}
-          <a
-            href="https://medium.com/ethereum-swarm/upgrading-swarm-deskotp-app-beta-from-an-ultra-light-to-a-light-node-65d52cab7f2c"
-            target="_blank"
-            rel="noreferrer"
-          >
-            this guide
-          </a>
-          .
-        </Typography>
-      </Box>
-      <Box mb={2}>
-        <SwarmTextInput
-          name="rpc-endpoint"
-          label="RPC Endpoint"
-          onChange={event => setLocalProviderUrl(event.target.value)}
-          defaultValue={providerUrl || ''}
-        />
-      </Box>
-      <SwarmButton iconType={Check} onClick={onSubmit}>
-        Connect
-      </SwarmButton>
-    </>
-  )
-}
@@ -1,12 +1,53 @@
 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 { getDesktopConfiguration, restartBeeNode, setJsonRpcInDesktop } from '../../utils/desktop'

 export default function SettingsPage(): ReactElement {
-  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings, config, isLoading } =
-    useContext(SettingsContext)
+  const {
+    apiUrl,
+    setApiUrl,
+    lockedApiSettings,
+    cors,
+    dataDir,
+    ensResolver,
+    rpcProviderUrl,
+    isLoading,
+    isDesktop,
+    desktopUrl,
+    setAndPersistJsonRpcProvider,
+  } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  async function handleSetRpcUrl(value: string) {
+    try {
+      setAndPersistJsonRpcProvider(value)
+
+      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['blockchain-rpc-endpoint']
+
+      if (shouldUpdateDesktop) {
+        await setJsonRpcInDesktop(desktopUrl, value)
+        const snackKey = enqueueSnackbar('RPC endpoint successfully changed, restarting Bee node...', {
+          variant: 'success',
+        })
+        await restartBeeNode(desktopUrl)
+        closeSnackbar(snackKey)
+        enqueueSnackbar('Bee node restarted', { variant: 'success' })
+      } else {
+        enqueueSnackbar('RPC endpoint successfully changed', { variant: 'success' })
+      }
+
+      await refresh()
+    } catch (e) {
+      console.error(e) //eslint-disable-line
+      enqueueSnackbar(`Failed to change RPC endpoint. ${e}`, { variant: 'error' })
+    }
+  }

  if (isLoading) {
    return (
@@ -16,31 +57,30 @@ export default function SettingsPage(): ReactElement {
    )
  }

-  // Run within Bee Desktop, display read only config
-  if (config) {
-    return (
-      <ExpandableList label="Bee Desktop Settings" defaultOpen>
-        <ExpandableListItemInput label="Bee API" value={config['api-addr']} locked />
-        <ExpandableListItemInput label="Bee Debug API" value={config['debug-api-addr']} locked />
-        <ExpandableListItemInput label="CORS" value={config['cors-allowed-origins']} locked />
-        <ExpandableListItemInput label="Data DIR" value={config['data-dir']} locked />
-        <ExpandableListItemInput label="ENS resolver URL" value={config['resolver-options']} locked />
-        {config['swap-endpoint'] && (
-          <ExpandableListItemInput label="SWAP endpoint" value={config['swap-endpoint']} locked />
-        )}
-      </ExpandableList>
-    )
-  }
-
  return (
+    <>
      <ExpandableList label="API Settings" defaultOpen>
-      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} locked={lockedApiSettings} />
        <ExpandableListItemInput
-        label="Bee Debug API"
-        value={apiDebugUrl}
-        onConfirm={setDebugApiUrl}
-        locked={lockedApiSettings}
+          label="Bee API"
+          value={apiUrl}
+          onConfirm={setApiUrl}
+          locked={lockedApiSettings || isDesktop}
+        />
+        <ExpandableListItemInput
+          label="Blockchain RPC URL"
+          value={rpcProviderUrl}
+          helperText="Changing the value will restart your bee node."
+          confirmLabel="Save and restart"
+          onConfirm={handleSetRpcUrl}
        />
      </ExpandableList>
+      {isDesktop && (
+        <ExpandableList label="Desktop Settings" defaultOpen>
+          <ExpandableListItemInput label="CORS" value={cors ?? '-'} locked />
+          <ExpandableListItemInput label="Data DIR" value={dataDir ?? '-'} locked />
+          <ExpandableListItemInput label="ENS resolver URL" value={ensResolver ?? '-'} locked />
+        </ExpandableList>
+      )}
+    </>
  )
 }
@@ -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>
-      <PostageStampCreation onFinished={onFinished} />
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
+      <PostageStampAdvancedCreation onFinished={onFinished} />
    </div>
  )
 }
@@ -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>
+  )
+}
@@ -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>
+    </>
+  )
+}
@@ -1,191 +0,0 @@
-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 = values.label ? { label: values.label } : undefined
-            const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-            await waitUntilStampExists(batchId, beeDebugApi)
-            actions.resetForm()
-            await refresh()
-            onFinished()
-          } catch (e) {
-            enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
-            actions.setSubmitting(false)
-          }
-        }}
-        validate={(values: FormValues) => {
-          const errors: FormErrors = {}
-
-          // Depth
-          if (!values.depth) errors.depth = 'Required field'
-          else {
-            const depth = new BigNumber(values.depth)
-
-            if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
-            else if (depth.isLessThan(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>
-    </>
-  )
-}
@@ -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..."
@@ -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>
+    </>
+  )
+}
@@ -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>
            </>
          }
        >
@@ -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 (
@@ -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
-          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network through the{' '}
-          <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
-          xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain network through
-          the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
+          Your chequebook is deployed. You may deposit some xBZZ to your chequebook to afford more traffic. You can
+          acquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network
+          through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you
+          will also need xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain
+          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.
        </>
      )
@@ -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>
-  )
-}
@@ -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>
+  )
+}
@@ -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>
-  )
-}
@@ -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'
-          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+          ? 'The connection to the Bee node API has been successful'
+          : '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={
@@ -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) {
@@ -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>
-  )
-}
@@ -1,20 +1,18 @@
-import type { ReactElement } from 'react'
-
-import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
-import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
-import VersionCheck from './SetupSteps/VersionCheck'
-import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
+import { ReactElement, useContext } from 'react'
+import { Context } from '../../providers/Settings'
 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 />
-      <VersionCheck />
-      <EthereumConnectionCheck />
-      <ChequebookDeployFund />
+      {isDesktop && <DesktopConnection />}
      <NodeConnectionCheck />
+      <ChequebookDeployFund />
      <PeerConnection />
    </div>
  )
@@ -0,0 +1,62 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { useNavigate } from 'react-router'
+import Check from 'remixicon-react/CheckLineIcon'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { Context } from '../../providers/Bee'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
+import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+
+const MINIMUM_XDAI = '0.5'
+
+interface Props {
+  header: string
+  title: string
+  p: ReactElement
+  next: string
+}
+
+export default function Index({ header, title, p, next }: Props): ReactElement {
+  const { nodeAddresses } = useContext(Context)
+  const { balance } = useContext(BalanceProvider)
+  const navigate = useNavigate()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  const disabled = balance.dai.toDecimal.lt(MINIMUM_XDAI)
+
+  return (
+    <>
+      <HistoryHeader>{header}</HistoryHeader>
+      <Box mb={4}>
+        <TopUpProgressIndicator index={0} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
+      </Box>
+      <Box mb={4}>{p}</Box>
+      <SwarmDivider mb={4} />
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
+      </Box>
+      <Grid container direction="row" justifyContent="space-between">
+        <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
+          Proceed
+        </SwarmButton>
+        {disabled ? (
+          <Typography>Please deposit at least {MINIMUM_XDAI} xDAI to the address above in order to proceed.</Typography>
+        ) : null}
+      </Grid>
+    </>
+  )
+}
@@ -1,11 +1,11 @@
 import { Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import Index from '.'
+import Balance from './Balance'
 import { ROUTES } from '../../routes'

 export function BankCardTopUpIndex(): ReactElement {
  return (
-    <Index
+    <Balance
      header={'Top-up with bank card'}
      title={'Use a bank card to buy xDAI to the funding wallet address below'}
      p={
@@ -1,11 +1,11 @@
 import { Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import Index from '.'
+import Balance from './Balance'
 import { ROUTES } from '../../routes'

 export function CryptoTopUpIndex(): ReactElement {
  return (
-    <Index
+    <Balance
      header={'Top-up with cryptocurrencies'}
      title={'Send xDAI to the funding wallet below'}
      p={
@@ -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'
@@ -12,18 +13,17 @@ import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
-import { useIsBeeDesktop } from '../../hooks/apiHooks'
-import { BeeModes } from '@ethersphere/bee-js'

 export function GiftCardFund(): ReactElement {
-  const { isBeeDesktop } = useIsBeeDesktop()
-  const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext)
-  const { provider, providerUrl } = useContext(TopUpContext)
+  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
+  const { isDesktop, desktopUrl, rpcProvider, rpcProviderUrl } = useContext(SettingsContext)
+  const { balance } = useContext(BalanceProvider)

  const [loading, setLoading] = useState(false)
  const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
@@ -34,48 +34,45 @@ export function GiftCardFund(): ReactElement {
  const navigate = useNavigate()

  useEffect(() => {
-    if (!privateKeyString || !provider) {
+    if (!privateKeyString || !rpcProvider) {
      return
    }

-    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
-  }, [privateKeyString, provider])
+    ResolvedWallet.make(privateKeyString, rpcProvider).then(setWallet)
+  }, [privateKeyString, rpcProvider])

  if (!wallet || !balance) {
    return <Loading />
  }

-  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+  const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT

  async function restart() {
-    if (!providerUrl) {
-      return
-    }
-
    try {
      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
+      await restartBeeNode(desktopUrl)
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
    }
  }

  async function onFund() {
-    if (!wallet || !nodeAddresses || !providerUrl) {
+    if (!wallet || !nodeAddresses || !rpcProviderUrl) {
      return
    }

    setLoading(true)

    try {
-      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
+      await wallet.transfer(nodeAddresses.ethereum, rpcProviderUrl)
      enqueueSnackbar('Successfully funded node', { variant: 'success' })

      if (canUpgradeToLightNode) await restart()
    } catch (error) {
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(`Failed to fund: ${error}`, { variant: 'error' })
    } finally {
      setLoading(false)
@@ -4,7 +4,7 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 import { useNavigate } from 'react-router'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -16,7 +16,7 @@ import { ROUTES } from '../../routes'
 import { Rpc } from '../../utils/rpc'

 export function GiftCardTopUpIndex(): ReactElement {
-  const { provider } = useContext(TopUpContext)
+  const { rpcProvider } = useContext(SettingsContext)
  const [loading, setLoading] = useState(false)
  const [giftCode, setGiftCode] = useState('')

@@ -24,13 +24,13 @@ export function GiftCardTopUpIndex(): ReactElement {
  const navigate = useNavigate()

  async function onProceed() {
-    if (!provider) return
+    if (!rpcProvider) return

    setLoading(true)
    try {
-      const wallet = new Wallet(giftCode, provider)
-      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
+      const wallet = new Wallet(giftCode, rpcProvider)
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, rpcProvider))
+      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, rpcProvider))

      if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
        throw Error('Gift wallet does not have enough funds')
@@ -38,6 +38,7 @@ export function GiftCardTopUpIndex(): ReactElement {
      enqueueSnackbar('Successfully verified gift wallet', { variant: 'success' })
      navigate(ROUTES.TOP_UP_GIFT_CODE_FUND.replace(':privateKeyString', giftCode))
    } catch (error) {
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(`Gift wallet could not be verified: ${error}`, { variant: 'error' })
    } finally {
      setLoading(false)
@@ -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,19 +13,29 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
-import { useIsBeeDesktop } from '../../hooks/apiHooks'
-import { BzzToken } from '../../models/BzzToken'
+import { BZZ_DECIMAL_PLACES, BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+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
 }
@@ -35,78 +44,164 @@ 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 { providerUrl } = useContext(TopUpContext)
-  const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const { isBeeDesktop } = useIsBeeDesktop()
+  const { rpcProviderUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
+  const { balance } = useContext(BalanceProvider)

  const navigate = useNavigate()
  const { enqueueSnackbar } = useSnackbar()

+  // Fetch current price of BZZ
  useEffect(() => {
    // eslint-disable-next-line no-console
-    getBzzPriceAsDai().then(setPrice).catch(console.error)
-  }, [])
+    getBzzPriceAsDai(desktopUrl).then(setPrice).catch(console.error)
+  }, [desktopUrl])

-  if (!balance || !nodeAddresses) {
-    return <Loading />
-  }
-
-  const optimalSwap = balance.dai.minusBaseUnits('1')
-  const lowAmountSwap = new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2))
-
-  let daiToSwap: DaiToken
-
-  function isPositiveDecimal(value: string): boolean {
-    try {
-      return new BigNumber(value).isPositive()
-    } catch {
-      return false
-    }
-  }
-
-  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 = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
-
-  async function restart() {
-    if (!providerUrl) {
+  // 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 canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
    try {
      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      await restartBeeNode(desktopUrl)
+
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
    }
  }

+  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 || !providerUrl) {
+    if (hasSwapped || !daiToSwap) {
      return
    }
    setLoading(true)
    setSwapped(true)
+
    try {
-      await performSwap(daiToSwap.toString)
-      enqueueSnackbar('Successfully swapped', { variant: 'success' })
+      await performSwapWithChecks(daiToSwap)
+      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) {
-      enqueueSnackbar(`Failed to swap: ${error}`, { variant: '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
+      }
    } finally {
+      balance?.refresh()
      setLoading(false)
    }
  }
@@ -135,18 +230,13 @@ export function Swap({ header }: Props): ReactElement {
      </Box>
      <Box mb={4}>
        <SwarmTextInput
-          label="Amount to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
-          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          label="xDAI to swap"
+          defaultValue={daiToSwap.toSignificantDigits(4)}
+          placeholder={daiToSwap.toSignificantDigits(4)}
          name="x"
          onChange={event => setUserInputSwap(event.target.value)}
        />
-        {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? (
-          <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}
+        {error && <Typography>{error}</Typography>}
      </Box>
      <Box mb={4}>
        <ArrowDown size={24} color="#aaaaaa" />
@@ -170,9 +260,7 @@ export function Swap({ header }: Props): ReactElement {
        <SwarmButton
          iconType={Check}
          onClick={onSwap}
-          disabled={
-            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
-          }
+          disabled={hasSwapped || loading || error !== null}
          loading={loading}
        >
          {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}
@@ -1,59 +1,121 @@
-import { Box, Grid, Typography } from '@material-ui/core'
-import { ReactElement, useContext } from 'react'
+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 ExpandableListItem from '../../components/ExpandableListItem'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
+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 { SwarmDivider } from '../../components/SwarmDivider'
-import { Context } from '../../providers/Bee'
-import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+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'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'

-const MINIMUM_XDAI = '0.5'
+const useStyles = makeStyles(() =>
+  createStyles({
+    checkWrapper: {
+      background: 'rgba(0, 230, 118, 0.25)',
+      borderRadius: 99999,
+      width: '180px',
+      height: '180px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  }),
+)

-interface Props {
-  header: string
-  title: string
-  p: ReactElement
-  next: string
-}
+const MINIMUM_XDAI = '0.05'
+const MINIMUM_XBZZ = '0.1'

-export default function Index({ header, title, p, next }: Props): ReactElement {
-  const { nodeAddresses, balance } = useContext(Context)
+export default function TopUp(): ReactElement {
  const navigate = useNavigate()
+  const styles = useStyles()
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { nodeInfo, status } = useContext(BeeContext)
+  const { balance } = useContext(BalanceProvider)
+  const { rpcProviderUrl } = useContext(SettingsContext)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()

-  if (!balance || !nodeAddresses) {
+  const canUpgradeToLightNode =
+    isDesktop &&
+    nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
+    balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
+    balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
+
+  async function restart() {
+    setLoading(true)
+    try {
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
+      await restartBeeNode(desktopUrl)
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      console.error(error) // eslint-disable-line
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+    setLoading(false)
+  }
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  if (!balance) {
    return <Loading />
  }

-  const disabled = balance.dai.toDecimal.lt(MINIMUM_XDAI)
-
  return (
    <>
-      <HistoryHeader>{header}</HistoryHeader>
-      <Box mb={4}>
-        <TopUpProgressIndicator index={0} />
+      <HistoryHeader>Account</HistoryHeader>
+      <Grid container direction="column" alignItems="center">
+        <Box mb={6}>
+          <div className={styles.checkWrapper}>
+            <Download size={100} color="#ededed" />
+          </div>
        </Box>
-      <Box mb={2}>
-        <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
-      </Box>
-      <Box mb={4}>{p}</Box>
-      <SwarmDivider mb={4} />
-      <Box mb={0.25}>
-        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
+        <Box mb={1}>
+          <Typography style={{ fontWeight: 'bold' }}>Transfer funds to your Swarm account</Typography>
        </Box>
        <Box mb={4}>
-        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
+          <Typography align="center">Top up your account with xBZZ and xDAI.</Typography>
+          <Typography align="center">
+            If you&apos;re not familiar with cryptocurrencies, you can start with a bank card.
+          </Typography>
        </Box>
-      <Grid container direction="row" justifyContent="space-between">
-        <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
-          Proceed
+        <ExpandableListItemActions>
+          <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
+            Use a gift code
          </SwarmButton>
-        {disabled ? (
-          <Typography>Please deposit at least {MINIMUM_XDAI} xDAI to the address above in order to proceed.</Typography>
-        ) : null}
+          <SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
+            Use xDAI
+          </SwarmButton>
+          <SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
+            Get started with bank card
+          </SwarmButton>
+        </ExpandableListItemActions>
+        {canUpgradeToLightNode && (
+          <>
+            <Box mt={8} mb={2}>
+              <Typography align="center">
+                It seems that you have enough balance to upgrade your bee node to light node. By upgrading you will gain
+                access to file upload and faster downloads.
+              </Typography>
+            </Box>
+            <ExpandableListItemActions>
+              <SwarmButton iconType={Check} onClick={restart} disabled={loading} loading={loading}>
+                Upgrade now
+              </SwarmButton>
+              <div />
+            </ExpandableListItemActions>
+          </>
+        )}
      </Grid>
    </>
  )
@@ -2,30 +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 semver from 'semver'
-import PackageJson from '../../package.json'
+import { ReactChild, ReactElement, createContext, useContext, useEffect, useState } from 'react'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { BzzToken } from '../models/BzzToken'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
-import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
-import { Context as TopUpContext } from './TopUp'

+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 {
@@ -35,35 +35,28 @@ 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
-  balance: WalletAddress | null
-  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
  chainState: ChainState | null
+  chainId: number | null
  latestBeeRelease: LatestBeeRelease | null
  isLoading: boolean
  lastUpdate: number | null
@@ -73,34 +66,27 @@ 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 },
  },
-  balance: null,
-  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,
  peerCheques: null,
  settlements: null,
  chainState: null,
+  chainId: null,
  latestBeeRelease: null,
  isLoading: true,
  lastUpdate: null,
@@ -117,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
@@ -160,49 +127,60 @@ function getStatus(
  if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
    status.chequebook.isEnabled = true

-    if (
-      chequebookAddress?.chequebookAddress &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)
-    ) {
+    if (chequebookAddress?.chequebookAddress && chequebookBalance !== null) {
      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
-  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
-  }
+  status.all = determineOverallStatus(status, startedAt)

  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 { provider } = useContext(TopUpContext)
+  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 [walletAddress, setWalletAddress] = useState<WalletAddress | null>(initialValues.balance)
+  const [chainId, setChainId] = useState<number | null>(null)
+  const [startedAt] = useState(Date.now())

  const { latestBeeRelease } = useLatestBeeRelease()

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

@@ -225,8 +199,6 @@ export function Provider({ children }: Props): ReactElement {

  useEffect(() => {
    setIsLoading(true)
-
-    setDebugApiHealth(null)
    setNodeAddresses(null)
    setNodeTopology(null)
    setNodeInfo(null)
@@ -238,27 +210,19 @@ export function Provider({ children }: Props): ReactElement {
    setSettlements(null)
    setChainState(null)

-    if (beeDebugApi !== null) refresh()
-  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (nodeAddresses?.ethereum && provider) {
-      WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
+    if (beeApi !== null) {
+      refresh()
    }
-  }, [nodeAddresses, provider])
-
-  useEffect(() => {
-    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), REFRESH_WHEN_OK)
-
-    return () => clearInterval(interval)
-  }, [walletAddress])
+  }, [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
@@ -270,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()
+        const { totalBalance, availableBalance } = await beeApi.getChequebookBalance({ timeout: TIMEOUT })

        return {
          totalBalance: new Token(totalBalance),
@@ -280,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()
+        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()
+        const { totalReceived, settlements, totalSent } = await beeApi.getAllSettlements({ timeout: TIMEOUT })

        return {
          totalReceived: new Token(totalReceived),
@@ -303,63 +267,72 @@ export function Provider({ children }: Props): ReactElement {
      const promises = [
        // API health
        beeApi
-          .isConnected()
-          .then(setApiHealth)
-          .catch(() => setApiHealth(false)),
-
-        // Debug API health
-        beeDebugApi
-          .getHealth()
-          .then(setDebugApiHealth)
-          .catch(() => setDebugApiHealth(null)),
+          .getHealth({ timeout: TIMEOUT })
+          .then(response => setBeeVersion(response.version))
+          .then(() => setApiHealth(true))
+          .catch(() => {
+            setBeeVersion(null)
+            setApiHealth(false)
+          }),

        // Node Addresses
-        beeDebugApi
-          .getNodeAddresses()
+        beeApi
+          .getNodeAddresses({ timeout: TIMEOUT })
          .then(setNodeAddresses)
          .catch(() => setNodeAddresses(null)),

        // NodeInfo
-        beeDebugApi
-          .getNodeInfo()
+        beeApi
+          .getNodeInfo({ timeout: TIMEOUT })
          .then(setNodeInfo)
          .catch(() => setNodeInfo(null)),

        // Network Topology
-        beeDebugApi
-          .getTopology()
+        beeApi
+          .getTopology({ timeout: TIMEOUT })
          .then(setNodeTopology)
          .catch(() => setNodeTopology(null)),

        // Peers
-        beeDebugApi
-          .getPeers()
+        beeApi
+          .getPeers({ timeout: TIMEOUT })
          .then(setPeers)
          .catch(() => setPeers(null)),

        // Chequebook address
-        beeDebugApi
-          .getChequebookAddress()
+        beeApi
+          .getChequebookAddress({ timeout: TIMEOUT })
          .then(setChequebookAddress)
          .catch(() => setChequebookAddress(null)),

        // Cheques
-        beeDebugApi
-          .getLastCheques()
+        beeApi
+          .getLastCheques({ timeout: TIMEOUT })
          .then(setPeerCheques)
          .catch(() => setPeerCheques(null)),

        // Chain state
-        beeDebugApi
-          .getChainState()
+        beeApi
+          .getChainState({ timeout: TIMEOUT })
          .then(setChainState)
          .catch(() => setChainState(null)),

+        // Wallet
+        beeApi
+          .getWalletBalance({ timeout: TIMEOUT })
+          .then(({ chainID }) => setChainId(chainID))
+          .catch(() => setChainId(null)),
+
        // Chequebook balance
        chequeBalanceWrapper()
          .then(setChequebookBalance)
          .catch(() => setChequebookBalance(null)),

+        beeApi
+          .getStake({ timeout: TIMEOUT })
+          .then(stake => setStake(new BzzToken(stake)))
+          .catch(() => setStake(null)),
+
        // Peer balances
        peerBalanceWrapper()
          .then(setPeerBalances)
@@ -387,16 +360,7 @@ export function Provider({ children }: Props): ReactElement {
  }
  const stop = () => setFrequency(null)

-  const status = getStatus(
-    debugApiHealth,
-    nodeAddresses,
-    nodeInfo,
-    apiHealth,
-    topology,
-    chequebookAddress,
-    chequebookBalance,
-    error,
-  )
+  const status = getStatus(nodeInfo, apiHealth, topology, chequebookAddress, chequebookBalance, error, startedAt)

  useEffect(() => {
    let newFrequency = REFRESH_WHEN_OK
@@ -414,37 +378,27 @@ 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,
-        balance: walletAddress,
-        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,
        chainState,
+        chainId,
        latestBeeRelease,
        isLoading,
        lastUpdate,
@@ -1,32 +1,45 @@
-import { Bee, BeeDebug } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
-import { config } from '../config'
-import { BeeConfig, useGetBeeConfig } from '../hooks/apiHooks'
+import { Bee } from '@ethersphere/bee-js'
+import { providers } from 'ethers'
+import { ReactElement, ReactNode, createContext, useEffect, useState } from 'react'
+import { DEFAULT_BEE_API_HOST, DEFAULT_RPC_URL } from '../constants'
+import { useGetBeeConfig } from '../hooks/apiHooks'
+
+const LocalStorageKeys = {
+  providerUrl: 'json-rpc-provider',
+}

 interface ContextInterface {
  apiUrl: string
-  apiDebugUrl: string
  beeApi: Bee | null
-  beeDebugApi: BeeDebug | null
-  setApiUrl: (url: string) => void
-  setDebugApiUrl: (url: string) => void
  lockedApiSettings: boolean
  desktopApiKey: string
-  config: BeeConfig | null
+  isDesktop: boolean
+  desktopUrl: string
+  rpcProviderUrl: string
+  rpcProvider: providers.JsonRpcProvider | null
+  cors: string | null
+  dataDir: string | null
+  ensResolver: string | null
+  setApiUrl: (url: string) => void
+  setAndPersistJsonRpcProvider: (url: string) => void
  isLoading: boolean
  error: Error | null
 }

 const initialValues: ContextInterface = {
-  apiUrl: config.BEE_API_HOST,
-  apiDebugUrl: config.BEE_DEBUG_API_HOST,
  beeApi: null,
-  beeDebugApi: null,
+  apiUrl: DEFAULT_BEE_API_HOST,
  setApiUrl: () => {}, // eslint-disable-line
-  setDebugApiUrl: () => {}, // eslint-disable-line
  lockedApiSettings: false,
+  isDesktop: false,
  desktopApiKey: '',
-  config: null,
+  desktopUrl: window.location.origin,
+  setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
+  rpcProviderUrl: '',
+  rpcProvider: null,
+  cors: null,
+  dataDir: null,
+  ensResolver: null,
  isLoading: true,
  error: null,
 }
@@ -34,37 +47,34 @@ const initialValues: ContextInterface = {
 export const Context = createContext<ContextInterface>(initialValues)
 export const Consumer = Context.Consumer

-interface Props {
-  children: ReactChild
+interface InitialSettings {
  beeApiUrl?: string
-  beeDebugApiUrl?: string
  lockedApiSettings?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  defaultRpcUrl?: string
 }

-export function Provider({
-  children,
-  beeApiUrl,
-  beeDebugApiUrl,
-  lockedApiSettings: extLockedApiSettings,
-}: Props): ReactElement {
+interface Props extends InitialSettings {
+  children: ReactNode
+}
+
+export function Provider({ children, ...propsSettings }: Props): ReactElement {
+  const desktopUrl = propsSettings.desktopUrl ?? initialValues.desktopUrl
+  const isDesktop = Boolean(propsSettings.isDesktop)
+  const propsProviderUrl =
+    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 [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))
  const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
-  const { config, isLoading, error } = useGetBeeConfig()
+  const [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
+  const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
+  const { config, isLoading, error } = useGetBeeConfig(desktopUrl)

-  function makeHttpUrl(string: string): string {
-    if (!string.startsWith('http')) {
-      return `http://${string}`
-    }
-
-    return string
-  }
-
-  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
-  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl)
+  const url = makeHttpUrl(
+    config?.['api-addr'] ?? sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? apiUrl,
+  )

  useEffect(() => {
    const urlSearchParams = new URLSearchParams(window.location.search)
@@ -86,27 +96,22 @@ export function Provider({
    }
  }, [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,
+        lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
        desktopApiKey,
-        config,
+        isDesktop,
+        desktopUrl,
+        rpcProvider,
+        rpcProviderUrl,
+        cors: config?.['cors-allowed-origins'] ?? null,
+        dataDir: config?.['data-dir'] ?? null,
+        ensResolver: config?.['resolver-options'] ?? null,
+        setAndPersistJsonRpcProvider: setAndPersistJsonRpcProviderClosure(setRpcProviderUrl, setRpcProvider),
        isLoading,
        error,
      }}
@@ -115,3 +120,22 @@ export function Provider({
    </Context.Provider>
  )
 }
+
+function makeHttpUrl(string: string): string {
+  if (!string.startsWith('http')) {
+    return `http://${string}`
+  }
+
+  return string
+}
+
+function setAndPersistJsonRpcProviderClosure(
+  setProviderUrl: (url: string) => void,
+  setProvider: (prov: providers.JsonRpcProvider) => void,
+) {
+  return (providerUrl: string) => {
+    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+    setProviderUrl(providerUrl)
+    setProvider(new providers.JsonRpcProvider(providerUrl))
+  }
+}
@@ -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) return
+    if (isLoading) {
+      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())
@@ -1,29 +1,20 @@
-import { providers, Wallet } from 'ethers'
-import { createContext, ReactElement, useEffect, useState } from 'react'
-import { setJsonRpcInDesktop } from '../utils/desktop'
+import { Wallet } from 'ethers'
+import { createContext, ReactElement, useContext, useEffect, useState } from 'react'
+import { Context as SettingsContext } from './Settings'

 const LocalStorageKeys = {
-  providerUrl: 'json-rpc-provider',
  depositWallet: 'deposit-wallet',
  giftWallets: 'gift-wallets',
  invitation: 'invitation',
 }

 interface ContextInterface {
-  providerUrl: string | null
-  provider: providers.JsonRpcProvider | null
  giftWallets: Wallet[]
-  setProviderUrl: (providerUrl: string) => void
  addGiftWallet: (wallet: Wallet) => void
 }

-const providerUrl = localStorage.getItem('json-rpc-provider') || null
-
 const initialValues: ContextInterface = {
-  providerUrl,
-  provider: providerUrl ? new providers.JsonRpcProvider(providerUrl) : null,
  giftWallets: [],
-  setProviderUrl: () => {}, // eslint-disable-line
  addGiftWallet: () => {}, // eslint-disable-line
 }

@@ -35,27 +26,18 @@ interface Props {
 }

 export function Provider({ children }: Props): ReactElement {
-  const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
-  const [provider, setProvider] = useState(initialValues.provider)
  const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
+  const { rpcProvider } = useContext(SettingsContext)

  useEffect(() => {
-    if (provider === null) return
+    if (rpcProvider === null) return

    const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)

    if (existingGiftWallets) {
-      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
-    }
-  }, [provider])
-
-  function setAndPersistJsonRpcProvider(providerUrl: string) {
-    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
-    setProviderUrl(providerUrl)
-    setProvider(new providers.JsonRpcProvider(providerUrl))
-    // eslint-disable-next-line no-console
-    setJsonRpcInDesktop(providerUrl).catch(console.error)
+      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, rpcProvider)))
    }
+  }, [rpcProvider])

  function addGiftWallet(wallet: Wallet) {
    const newArray = [...giftWallets, wallet]
@@ -66,10 +48,7 @@ export function Provider({ children }: Props): ReactElement {
  return (
    <Context.Provider
      value={{
-        providerUrl,
-        provider,
        giftWallets,
-        setProviderUrl: setAndPersistJsonRpcProvider,
        addGiftWallet,
      }}
    >
@@ -0,0 +1,88 @@
+import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import { Context as SettingsContext } from './Settings'
+import { Context as BeeContext } from './Bee'
+import { WalletAddress } from '../utils/wallet'
+
+interface ContextInterface {
+  balance: WalletAddress | null
+  error: Error | null
+  isLoading: boolean
+  lastUpdate: number | null
+  start: (frequency?: number) => void
+  stop: () => void
+  refresh: () => Promise<void>
+}
+
+const initialValues: ContextInterface = {
+  balance: null,
+  error: null,
+  isLoading: false,
+  lastUpdate: null,
+  start: () => {}, // eslint-disable-line
+  stop: () => {}, // eslint-disable-line
+  refresh: () => Promise.reject(),
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const { rpcProvider } = useContext(SettingsContext)
+  const { nodeAddresses } = useContext(BeeContext)
+  const [balance, setBalance] = useState<WalletAddress | null>(initialValues.balance)
+  const [error, setError] = useState<Error | null>(initialValues.error)
+  const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
+  const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
+  const [frequency, setFrequency] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (nodeAddresses?.ethereum && rpcProvider) {
+      WalletAddress.make(nodeAddresses.ethereum, rpcProvider).then(setBalance)
+    } else {
+      setBalance(null)
+    }
+  }, [nodeAddresses, rpcProvider])
+
+  const refresh = async () => {
+    // Don't want to refresh when already refreshing
+    if (isLoading) return
+
+    if (!balance) return
+
+    try {
+      setIsLoading(true)
+
+      setBalance(await balance.refresh())
+      setLastUpdate(Date.now())
+    } catch (e) {
+      setError(e as Error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const start = (freq = 30000) => setFrequency(freq)
+  const stop = () => setFrequency(null)
+
+  // Start the update loop
+  useEffect(() => {
+    refresh()
+
+    // Start autorefresh only if the frequency is set
+    if (frequency) {
+      const interval = setInterval(refresh, frequency)
+
+      return () => clearInterval(interval)
+    }
+  }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Context.Provider value={{ balance, error, isLoading, lastUpdate, start, stop, refresh }}>
+      {children}
+    </Context.Provider>
+  )
+}
@@ -1,7 +1,8 @@
-import type { ReactElement } from 'react'
+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 Wallet from './pages/rpc'
-import Confirmation from './pages/rpc/Confirmation'
 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 = '/',
@@ -34,8 +36,7 @@ export enum ROUTES {
  HASH = '/files/hash/:hash',
  SETTINGS = '/settings',
  STATUS = '/status',
-  WALLET = '/account/wallet/top-up',
-  CONFIRMATION = '/account/wallet/top-up/confirmation',
+  TOP_UP = '/account/wallet/top-up',
  TOP_UP_CRYPTO = '/account/wallet/top-up/crypto',
  TOP_UP_CRYPTO_SWAP = '/account/wallet/top-up/crypto/swap',
  TOP_UP_BANK_CARD = '/account/wallet/top-up/bank-card',
@@ -46,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 = [
@@ -59,9 +62,13 @@ export const ACCOUNT_TABS = [
  ROUTES.ACCOUNT_CHEQUEBOOK,
  ROUTES.ACCOUNT_STAMPS,
  ROUTES.ACCOUNT_FEEDS,
+  ROUTES.ACCOUNT_STAKING,
 ]

-const BaseRouter = (): ReactElement => (
+const BaseRouter = (): ReactElement => {
+  const { isDesktop } = useContext(SettingsContext)
+
+  return (
    <Routes>
      <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
      <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
@@ -70,8 +77,7 @@ const BaseRouter = (): ReactElement => (
      <Route path={ROUTES.SETTINGS} element={<Settings />} />
      <Route path={ROUTES.STATUS} element={<Status />} />
      <Route path={ROUTES.INFO} element={<Info />} />
-    <Route path={ROUTES.WALLET} element={<Wallet />} />
-    <Route path={ROUTES.CONFIRMATION} element={<Confirmation />} />
+      <Route path={ROUTES.TOP_UP} element={<TopUp />} />
      <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
      <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
      <Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />
@@ -82,13 +88,16 @@ 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_INVITATIONS} element={<GiftCards />} />
+      <Route path={ROUTES.ACCOUNT_STAKING} element={<AccountStaking />} />
+      {isDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
    </Routes>
-)
+  )
+}

 export default BaseRouter
@@ -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 = {
@@ -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'
+}
@@ -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)
+  })
+}
@@ -0,0 +1,30 @@
+const chains = [
+  {
+    name: 'Ethereum Mainnet',
+    chainId: 1,
+  },
+  {
+    name: 'Ropsten Testnet',
+    chainId: 3,
+  },
+  {
+    name: 'Rinkeby Testnet',
+    chainId: 4,
+  },
+  {
+    name: 'Görli Testnet',
+    chainId: 5,
+  },
+  {
+    name: 'Kovan Testnet',
+    chainId: 42,
+  },
+  {
+    name: 'Gnosis Chain',
+    chainId: 100,
+  },
+]
+
+export function chainIdToName(chainId: number): string {
+  return chains.find(record => record.chainId === chainId)?.name || 'Unknown'
+}
@@ -1,81 +1,64 @@
 import axios from 'axios'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'
 import { DaiToken } from '../models/DaiToken'
 import { Token } from '../models/Token'
-import { getJson, postJson, sendRequest } from './net'
+import { getJson, postJson } from './net'

-interface DesktopStatus {
-  status: 0 | 1 | 2
-  address: string | null
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  config: Record<string, any>
+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 const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
+  const response = await axios.get(`${desktopUrl}/price`)

-export async function getDesktopStatus(): Promise<DesktopStatus> {
-  const response = await getJson(`${getDesktopHost()}/status`)
-
-  return response as DesktopStatus
+  return DaiToken.fromDecimal(response.data)
 }

-export async function getBzzPriceAsDai(): Promise<Token> {
-  const response = await axios.get(`${getDesktopHost()}/price`)
-
-  return DaiToken.fromDecimal(response.data, 18)
-}
-
-export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
-  await updateDesktopConfiguration({
-    'chain-enable': true,
+export function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<BeeConfig> {
+  return updateDesktopConfiguration(desktopUrl, {
    'swap-enable': true,
-    'swap-endpoint': rpcProvider,
+    'blockchain-rpc-endpoint': rpcProvider,
  })
 }

-export async function setJsonRpcInDesktop(value: string): Promise<void> {
-  await updateDesktopConfiguration({
-    'swap-endpoint': value,
+export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Promise<void> {
+  await updateDesktopConfiguration(desktopUrl, {
+    'blockchain-rpc-endpoint': value,
  })
 }

-async function updateDesktopConfiguration(values: Record<string, unknown>): Promise<void> {
-  await postJson(`${getDesktopHost()}/config`, values)
+export function getDesktopConfiguration(desktopUrl: string): Promise<BeeConfig> {
+  return getJson(`${desktopUrl}/config`)
 }

-export async function restartBeeNode(): Promise<void> {
-  await postJson(`${getDesktopHost()}/restart`)
+function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<BeeConfig> {
+  return postJson(`${desktopUrl}/config`, values)
 }

-export async function createGiftWallet(address: string): Promise<void> {
-  await postJson(`${getDesktopHost()}/gift-wallet/${address}`)
+export async function restartBeeNode(desktopUrl: string): Promise<void> {
+  await postJson(`${desktopUrl}/restart`)
 }

-export async function performSwap(daiAmount: string): Promise<void> {
-  await postJson(`${getDesktopHost()}/swap`, { dai: daiAmount })
+export async function createGiftWallet(desktopUrl: string, address: string): Promise<void> {
+  await postJson(`${desktopUrl}/gift-wallet/${address}`)
 }

-export async function getBeeDesktopLogs(): Promise<string> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee-desktop`, 'GET')
-
-  return response as unknown as string
-}
-
-export async function getBeeLogs(): Promise<string> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee`, 'GET')
-
-  return response as unknown as string
+export async function performSwap(desktopUrl: string, daiAmount: string): Promise<void> {
+  await postJson(`${desktopUrl}/swap`, { dai: daiAmount })
 }

 export async function getLatestBeeDesktopVersion(): Promise<string> {
-  const response = await (await fetch('https://api.github.com/repos/ethersphere/bee-desktop/releases/latest')).json()
+  const response = await (await fetch(BEE_DESKTOP_LATEST_RELEASE_PAGE_API)).json()

  return response.tag_name.replace('v', '') // We get for example "v0.12.1"
 }
-
-function getDesktopHost(): string {
-  if (process.env.REACT_APP_BEE_DESKTOP_URL) {
-    return process.env.REACT_APP_BEE_DESKTOP_URL
-  }
-
-  return `http://${window.location.host}`
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bee-worker	a00ca77b3e	chore(master): release 0.26.2 (#663 )	2024-06-05 06:56:12 +02:00
Cafe137	cae90c1a82	fix: merge version and health check (#662 )	2024-06-05 06:55:40 +02:00
bee-worker	7f169bbabd	chore(master): release 0.26.1 (#660 )	2024-06-04 01:29:02 +02:00
Cafe137	a5d4ecf045	fix: add bee version (#659 )	2024-06-04 01:25:28 +02:00
bee-worker	1e67de0242	chore(master): release 0.26.0 (#652 )	2024-06-04 00:19:43 +02:00
Cafe137	8cbd812a2c	feat: merge api (#658 )	2024-06-04 00:07:01 +02:00
rolandlor	b3f521ca20	fix: correct the bee version detection (#645 ) * feat: Github repository link to ethersphere/bee-dashboard * fix: correct the Bee version detection	2024-01-10 10:57:55 +01:00
Levente Kiss	79bb315401	feat: wait for upload sync (#649 ) * feat: add basic progress bar (#605) * feat: add syncing to share page (#605) * refactor: use the documentation text comp (#605) * refactor: move sync logic to new comp (#605) * refactor: optimize sync check (#605) * chore: linting (#605) --------- Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>	2024-01-08 22:56:31 +01:00
Levente Kiss	5871223203	feat: display effective capacity (#643 ) * feat: add stamp effective volume display (#636) * refactor: make it cleaner (#636) --------- Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>	2024-01-08 22:54:32 +01:00
Ferenc Sárai	cc91f1d64c	feat: show syncing info (#647 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2024-01-08 22:53:01 +01:00
Vojtech Simetka	e287845f7c	chore: update code owners (#651 )	2024-01-08 22:51:54 +01:00
bee-worker	16ffffb0c4	chore(master): release 0.25.0 (#637 )	2023-12-04 22:32:19 +01:00
Cafe137	080d9f2c2a	refactor: clean up postage stamp screens (#642 ) * refactor: clean up postage stamp screens * fix: add immutable flag	2023-12-04 22:28:44 +01:00
rolandlor	4f9abc614e	feat: update postage stamp creation screen (#641 ) * style: UI changes for postage stamp * feat: New postage stamp standard page --------- Co-authored-by: Seres Roland <seresroland@Seres-MBP.home>	2023-12-04 22:01:51 +01:00
Cafe137	20a051b658	fix: put stamp input error handling in state (#640 )	2023-11-20 14:59:00 +01:00
Ferenc Sárai	0c2ac0c454	feat: improve topup and dilute ux Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-20 14:00:42 +01:00
Ferenc Sárai	8802d20555	style: add padding to files download (#387 ) (#639 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-20 13:59:40 +01:00
zol1981	7fa1cb0ccf	fix: add missing stamp labels and fix inputs (#634 ) * fix issue #630, #606 * fix: Stamp Labels #630, Entering * into amount #606 * #606 Entering * into amount * fix: inputs eliminating warnings --------- Co-authored-by: Zoltán Mihály <zolmac@Zoltans-MacBook-Pro.local>	2023-11-08 14:15:34 +01:00
Ferenc Sárai	bab08e1df2	style: add padding to account chequebook (#635 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-07 12:33:28 +01:00
bee-worker	d91c334cf8	chore(master): release 0.24.1 (#629 )	2023-10-18 15:48:48 +02:00
rampall	bce93ce3cd	fix: update `swap-endpoint` to `blockchain-rpc-endpoint` (#628 )	2023-10-18 15:42:06 +02:00
bee-worker	8367f2b76a	chore(master): release 0.24.0 (#621 )	2023-08-12 00:47:34 +02:00
Cafe137	055a3002b3	feat: add stamp dilute and topup (#619 ) * feat: add stamp dilute and topup * fix: remove any * chore: bump bee-js * chore: remove obsolete workaround	2023-08-12 00:41:10 +02:00
bee-worker	c9c4e7d7d1	chore(master): release 0.23.0 (#609 )	2023-02-23 01:25:09 +01:00
bee-worker	d97bc27c14	docs: update supported bee (#612 )	2023-02-21 10:30:59 +01:00
Cafe137	e215c61ea1	feat: upgrade bee-js to 5.2.0 (#611 )	2023-02-21 10:16:16 +01:00
bee-worker	8298d0bc66	docs: update supported bee (#610 )	2023-02-19 23:29:11 +01:00
Cafe137	fac72b1299	feat: add staking for full nodes (#590 ) * feat: add staking * feat: enable staking in full mode, add loading state * chore: revert constants	2023-02-19 22:58:55 +01:00
bee-worker	e780b971d9	chore(master): release 0.22.0 (#604 )	2023-01-19 12:17:25 +01:00
Cafe137	90f9f91ddb	feat: add node connecting status (#603 )	2023-01-19 12:05:24 +01:00
bee-worker	01838dccd1	chore(master): release 0.21.1 (#600 )	2022-12-21 14:49:34 +01:00
Cafe137	42b7f080b0	fix: do not require chequebook funding (#599 ) * fix: do not require chequebook funding * chore: revert import sorting	2022-12-21 14:36:24 +01:00
bee-worker	a88e78e748	chore(master): release 0.21.0 (#579 )	2022-12-02 12:39:02 +01:00
Cafe137	665ae063fa	fix: handle auth and server error during swap (#593 ) * fix: change execution order for light node upgrade * refactor: grab new configuration from post config request * fix: only print successful light node upgrade when it really happens * fix: log full desktop side swap error (#596) * refactor: try to make the auth error in swap nicer * refactor: make error instruction consistent * fix: avoid overwriting daiToSwap when it is set manually	2022-12-01 12:36:15 +01:00
Cafe137	dc04e26db4	fix: change version mismatch to a warning (#594 )	2022-11-30 12:36:34 +01:00
Cafe137	b798fa0e68	fix: always set rpc to newly provided value in desktop (#591 ) * fix: always set rpc to newly provided value in desktop * fix: always set new rpc and restart node * fix: disable version check in desktop mode * fix: only set rpc in desktop when in light mode * refactor: simplify code	2022-11-24 14:06:00 +01:00
Cafe137	4e564dd5c0	feat: add prerequisite checks before swap (#588 ) * feat: add prerequisite checks before swap * fix: add missing authentication on desktop config call * refactor(wip): introduce swap error * refactor: use wrapWithSwapError * fix: log originalError instead of error * fix: show snackbar when error is unexpected	2022-11-23 14:20:55 +01:00
Adam Uhlíř	1c53364fcd	chore: add Bee Factory support (#592 )	2022-11-22 15:55:04 +01:00
Cafe137	848e61a7a0	feat: add starting state to sidebar indicator (#587 )	2022-11-22 10:33:38 +01:00
bee-worker	c3a940c8d7	docs: update supported bee (#586 )	2022-11-15 15:23:30 +01:00
Cafe137	02469046b0	fix: add loading state to info page (#584 ) * fix: add loading state to info page * refactor: use bee-js for readiness check	2022-11-14 14:22:49 +01:00
Cafe137	1ce4a47495	fix: fix conditional rendering for blockchain network (#583 )	2022-11-14 11:16:14 +01:00
Cafe137	9a8520eb6f	fix: hide swap in standalone mode (#582 )	2022-11-14 11:15:40 +01:00
Cafe137	ec8fdf0315	fix: always consider user input when performing swap (#572 ) * fix: always consider user input when performing swap * refactor: extract decimal places constants * refactor: extract minimumOptimalValue * fix: handle bzz precision and tweak message	2022-11-09 14:21:34 +01:00
Cafe137	a4b8e7ca25	fix: change status page depending on desktop mode (#573 ) * fix: change status page depending on desktop mode * refactor: check desktop reachability periodically	2022-11-07 14:02:22 +01:00
Cafe137	693609810d	fix: refresh after chequebook withdraw deposit (#576 ) * fix: refresh after chequebook withdraw deposit * refactor: remove extra catch	2022-11-07 14:02:11 +01:00
Adam Uhlíř	73f845a73a	docs: desktop development (#539 )	2022-10-05 09:27:28 +02:00
Adam Uhlíř	b6419297f4	ci: make preview check step optional (#548 )	2022-10-05 09:26:57 +02:00
bee-worker	9d2d271c20	chore(master): release 0.20.2 (#552 )	2022-09-15 17:05:48 +02:00
Adam Uhlíř	c0456a3bf6	fix: stamp purchasing (#551 )	2022-09-15 17:02:11 +02:00
bee-worker	463622c297	chore(master): release 0.20.1 (#549 )	2022-09-15 05:46:11 -07:00
Adam Uhlíř	e2dd077118	fix: rpc endpoint setting ultra-light mode logic (#547 )	2022-09-15 14:42:53 +02:00
Adam Uhlíř	5295bd5b01	fix: revert bee env. variable names and add default rpc var (#545 )	2022-09-15 14:29:19 +02:00
dependabot[bot]	0592995564	build(deps-dev): bump typescript from 4.8.2 to 4.8.3 (#532 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-09-14 12:44:55 +02:00
bee-worker	da0ae9cd94	chore(master): release 0.20.0 (#534 )	2022-09-14 11:54:48 +02:00
Adam Uhlíř	528a810690	fix: show update notifications only on non-auto-updating Swarm Desktops (#543 )	2022-09-14 11:48:24 +02:00
Adam Uhlíř	0c74dae4e8	feat: error reporting callback (#530 )	2022-09-09 13:07:40 +02:00
dependabot[bot]	d42d440f85	build(deps-dev): bump typescript from 4.7.3 to 4.8.2 (#528 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-09-09 12:03:34 +02:00
Adam Uhlíř	0c262a4811	refactor: remove env. variables from the component (#529 )	2022-09-08 08:51:55 +02:00
bee-worker	0603018f09	chore(master): release 0.19.3 (#527 )	2022-08-24 22:23:17 +02:00
Cafe137	677b6de0f8	fix: pass isBeeDesktop from provider to hook (#525 )	2022-08-24 22:02:34 +02:00
Adam Uhlíř	27f965ef63	ci: cleanup sentry removal (#523 )	2022-08-24 21:25:17 +02:00
bee-worker	e72347d87a	chore(master): release 0.19.2 (#521 )	2022-08-11 10:53:52 +02:00
Adam Uhlíř	0260df61de	fix: remove sentry (#520 )	2022-08-08 18:19:38 +02:00
bee-worker	e986d7ca22	chore(master): release 0.19.1 (#517 )	2022-08-03 16:00:40 +02:00
Vojtech Simetka	df925b013b	fix: compile types when building the library (#516 )	2022-08-03 15:44:10 +02:00
bee-worker	d7867ff475	chore(master): release 0.19.0 (#487 ) * chore(master): release 0.19.0 * chore: fix typos Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2022-08-03 14:20:20 +02:00
Vojtech Simetka	b9c008f019	feat: add loading state to wallet balance (#508 ) * feat: add loading state to wallet balance * refactor: extract the wallet balance into a provider	2022-08-03 14:09:24 +02:00
Vojtech Simetka	a7bd94af82	build: bundle assets inline for the component library (#513 ) * build: bundle assets inline for the component library * chore(deps): allow react version 17.x.x and 18.x.x	2022-08-03 07:28:57 +02:00
Vojtech Simetka	1be5cbda6d	fix: new bee version notification is only shown if user bee version is detected (#512 ) * fix: new bee version notification is only shown if user bee version is detected * chore: add missing useEffect dependency	2022-08-02 12:44:33 +02:00
Vojtech Simetka	4c48657fca	feat: pass isBeeDesktop as Bee Dashboard component property (#510 ) * feat: pass isBeeDesktop as Bee Dashboard component property * chore: remove console log	2022-08-02 09:53:50 +02:00
Vojtech Simetka	72488fd5a3	chore: update to use bee-js 5.0.0 and support bee 1.7.0 (#503 ) * chore: update to use bee-js 5.0.0 and support bee 1.7.0 * fix: store reference to feed manifest correctly * fix: set waitForUsable to false (#507) Co-authored-by: Cafe137 <77121044+Cafe137@users.noreply.github.com>	2022-08-01 16:21:52 +02:00
Vojtech Simetka	896f6e48d9	fix: if the node has error, disable pages that can never load (#502 )	2022-07-29 10:42:14 +02:00
Vojtech Simetka	f53e9664da	feat: reintroduce new bee version notification (#500 )	2022-07-29 10:41:34 +02:00
Vojtech Simetka	ff5b832017	docs: update screenshots in README (#504 )	2022-07-29 10:41:12 +02:00
Vojtech Simetka	9f0ab1323b	chore: typo in useNewBeeDesktopVersion hook (#501 )	2022-07-28 15:47:06 +02:00
Adam Uhlíř	c9384ff23e	chore: update swarm-desktop development with the desktop env (#498 )	2022-07-27 20:16:10 +02:00
Vojtech Simetka	f8390d7eac	fix: disable swarm invitation outside of Swarm Desktop (#497 )	2022-07-27 08:45:11 +02:00
Vojtech Simetka	408b565935	feat: make blockchain JSON RPC configurable from settings (#494 ) * feat: make blockchain JSON RPC configurable from settings * chore: expose the settings directly * feat: restart bee node when blockchain RPC changes, add notification and error logging	2022-07-27 08:45:03 +02:00
Cafe137	f82444f212	fix: handle unicode filename and website uploads (#491 ) * fix: print meaningful error message for invalid filenames * fix: handle unicode dirnames and filenames * chore: revert custom error message	2022-07-26 13:13:25 +02:00
Vojtech Simetka	fd11f0166d	feat: add wallet endpoint and display blockchain name (#492 )	2022-07-26 10:18:27 +02:00
Cafe137	186d0352cf	fix: correct website upload path (#483 ) * test(wip): add ui tests * fix: correct website upload path * fix: use includes * test: rewrite ui tests * build: remove concurrently * ci: run puppeteer in headless * test: add regression tests * test: add website regression 03 test * test: add react test website * chore: revert newlines Co-authored-by: Cafe137 <aron@aronsoos.com>	2022-07-25 11:24:32 +02:00
Vojtech Simetka	f01477ea70	feat: check whether the app runs within bee-desktop is now an environment variable (#490 ) * feat: check whether the app runs within bee-desktop is now an environment variable * chore: remove console.log	2022-07-25 10:28:17 +02:00
Vojtech Simetka	6bfe97be5d	feat: log errorss to consolve when showing error notification (#489 )	2022-07-25 07:26:01 +02:00
Vojtech Simetka	feeca008ac	feat: don't display duplicate notifications with snackbar (#488 )	2022-07-25 07:25:52 +02:00
Vojtech Simetka	cba21bb2e0	feat: set default rpc endpoint (#485 ) * feat: add default RPC endpoint * feat: removed setting RPC endpoint altogherher and altered the routes accordingly	2022-07-22 10:55:19 +02:00
Adam Uhlíř	318592653c	ci: fix sentry release version (#481 )	2022-07-11 11:56:32 +02:00
bee-worker	786d624e18	chore(master): release 0.18.2 (#478 )	2022-07-06 11:34:35 +02:00
Adam Uhlíř	33fff93cac	fix: enable desktop update notifications on all platforms (#476 )	2022-07-06 11:27:48 +02:00
Adam Uhlíř	498294e227	fix: don't link to latest release (#477 )	2022-07-06 11:27:41 +02:00
bee-worker	c8efa859df	chore(master): release 0.18.1 (#469 ) * chore(master): release 0.18.1 * chore: empty commit Co-authored-by: Adam Uhlíř <adam@uhlir.dev>	2022-07-05 17:13:22 +02:00
Cafe137	afb8c31d9a	fix: refresh gift wallet after swap (#465 ) * fix: refresh gift wallet after swap * fix: also refresh wallet after transfer * chore: revert fund	2022-07-05 16:22:06 +02:00
Adam Uhlíř	e5bc658327	chore: lower timeout (#472 )	2022-07-05 16:14:21 +02:00
Adam Uhlíř	acee8c9802	fix: status checks have timeout (#471 )	2022-07-05 15:53:18 +02:00
Adam Uhlíř	f297cf803f	ci: sentry release version fix (#467 )	2022-07-05 15:52:56 +02:00
Cafe137	477c2385b1	fix: refresh balance after dai tx (#470 )	2022-07-05 15:24:18 +02:00
Cafe137	56457eb9b9	fix: refresh dai after spending gas (#468 )	2022-07-05 14:01:49 +02:00