chore(master): release 0.20.1 (#549 )

fix: rpc endpoint setting ultra-light mode logic (#547 )
fix: revert bee env. variable names and add default rpc var (#545 )
2022-09-15 05:46:11 -07:00 · 2022-09-15 14:42:53 +02:00 · 2022-09-15 14:29:19 +02:00 · 2022-09-14 12:44:55 +02:00 · 2022-09-14 11:54:48 +02:00 · 2022-09-14 11:48:24 +02:00
141 changed files with 3552 additions and 1515 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
@@ -19,9 +19,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,9 +57,6 @@ 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'
@@ -15,16 +15,6 @@ jobs:
          node-version: 18
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
-      - run: npm run compile:types
-      - run: npm run build:component
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-      - name: Create Sentry release
-        uses: getsentry/action-release@v1
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-        with:
-          sourcemaps: ./build/static/js
@@ -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,130 @@
 # Changelog

+## [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)
+
+
+### Features
+
+* add postage stamp guide ([#455](https://github.com/ethersphere/bee-dashboard/issues/455)) ([fb8775d](https://github.com/ethersphere/bee-dashboard/commit/fb8775d0a7a2bb3525467cec98584009c167700f))
+* add real price calculation to swap page ([#459](https://github.com/ethersphere/bee-dashboard/issues/459)) ([a9a5d76](https://github.com/ethersphere/bee-dashboard/commit/a9a5d76e45d3a31f05f814fe6cd2c823317f1e2d))
+* add updated sidebar icons ([#407](https://github.com/ethersphere/bee-dashboard/issues/407)) ([8b3ea52](https://github.com/ethersphere/bee-dashboard/commit/8b3ea5249ee48e7a2403e00339fd51977b93fb56))
+* add upgrade guide link from medium ([#434](https://github.com/ethersphere/bee-dashboard/issues/434)) ([cfcc859](https://github.com/ethersphere/bee-dashboard/commit/cfcc859303f4fb931e07f9037a7ba0972f8fb8ba))
+* reduce the minimal dai amount for the topup ([#444](https://github.com/ethersphere/bee-dashboard/issues/444)) ([2a5c598](https://github.com/ethersphere/bee-dashboard/commit/2a5c598ece3ba5f88c53c87db52b10422a37aae7))
+* refresh frequency changes if the bee is in error state ([#409](https://github.com/ethersphere/bee-dashboard/issues/409)) ([ce44ef7](https://github.com/ethersphere/bee-dashboard/commit/ce44ef78f4d322a458c1e8dd1f5a0b87d3a45b85))
+* set title to swarm ([#413](https://github.com/ethersphere/bee-dashboard/issues/413)) ([d664400](https://github.com/ethersphere/bee-dashboard/commit/d664400a7e3427fd30c47b59ef9c0dccda061720))
+* transfer everything out of the gift wallet ([#456](https://github.com/ethersphere/bee-dashboard/issues/456)) ([7225c5c](https://github.com/ethersphere/bee-dashboard/commit/7225c5ca11a62e40f06e7b08d558b390e326bcaf))
+* ultra-light mode block not supported features that are not available in this mode ([#438](https://github.com/ethersphere/bee-dashboard/issues/438)) ([83aab3b](https://github.com/ethersphere/bee-dashboard/commit/83aab3be62d73b5a539aab8f9c2bbfad56c86bbf))
+* version check and info ([#425](https://github.com/ethersphere/bee-dashboard/issues/425)) ([8f4a4eb](https://github.com/ethersphere/bee-dashboard/commit/8f4a4ebaa951fdbbe9f697e2cb4dc34838ed5df7))
+
+
+### Bug Fixes
+
+* add guide link to bank card top up ([#439](https://github.com/ethersphere/bee-dashboard/issues/439)) ([2221d0e](https://github.com/ethersphere/bee-dashboard/commit/2221d0e7c89a9631e3d95dd71cde3eacb964f3b5))
+* add troubleshooting checks ([#435](https://github.com/ethersphere/bee-dashboard/issues/435)) ([a756eed](https://github.com/ethersphere/bee-dashboard/commit/a756eedc4995cad6c5cafd302f7d7d7d44656f6d))
+* bee data auto-refresh ([#436](https://github.com/ethersphere/bee-dashboard/issues/436)) ([4cd580c](https://github.com/ethersphere/bee-dashboard/commit/4cd580ca7f497104eb97ae5676f3d5334384f4dc))
+* change topup button ordering ([#453](https://github.com/ethersphere/bee-dashboard/issues/453)) ([56f207d](https://github.com/ethersphere/bee-dashboard/commit/56f207d6a63ee0a486a4e00770fd8342fa92a7b5))
+* change wording from deposit to top up wallet ([#440](https://github.com/ethersphere/bee-dashboard/issues/440)) ([21df01c](https://github.com/ethersphere/bee-dashboard/commit/21df01c9241bcdfd072b0f080a46823beb1a751a))
+* check desktop version only once ([#441](https://github.com/ethersphere/bee-dashboard/issues/441)) ([3986320](https://github.com/ethersphere/bee-dashboard/commit/398632001a589a20cecb4416dfd261be21e18959))
+* disable bee update button in desktop mode ([#452](https://github.com/ethersphere/bee-dashboard/issues/452)) ([c54170b](https://github.com/ethersphere/bee-dashboard/commit/c54170b18538f7d15181a87a556f7fb2954ed49d))
+* display account wallet partially while loading ([#420](https://github.com/ethersphere/bee-dashboard/issues/420)) ([f43de77](https://github.com/ethersphere/bee-dashboard/commit/f43de77294e86df4bb023cd19afe6327ace5e83c))
+* don't display buy new stamp button when already in process of buying one ([#422](https://github.com/ethersphere/bee-dashboard/issues/422)) ([807af12](https://github.com/ethersphere/bee-dashboard/commit/807af122f7743fc9d13120eef81cd3f55b51eb5a))
+* generate gift wallet is disabled if there is not enough funds ([#451](https://github.com/ethersphere/bee-dashboard/issues/451)) ([f2824b7](https://github.com/ethersphere/bee-dashboard/commit/f2824b749b950e5b401af1de2973f13ad95d0a2f))
+* info page card and map error states ([#412](https://github.com/ethersphere/bee-dashboard/issues/412)) ([b969d8c](https://github.com/ethersphere/bee-dashboard/commit/b969d8caeef8d0e6f6eb664b380228bccb498795))
+* make deposit go to top up selector page ([#419](https://github.com/ethersphere/bee-dashboard/issues/419)) ([aa99e01](https://github.com/ethersphere/bee-dashboard/commit/aa99e0153e20524c5b047e90803543cbb13bb625))
+* provider is by default null and account page redirect to provider setup ([#437](https://github.com/ethersphere/bee-dashboard/issues/437)) ([2e0eeb7](https://github.com/ethersphere/bee-dashboard/commit/2e0eeb7a1b86be091fbd4bc266aa2fcbfc271ca3))
+* remove expired stamps ([#463](https://github.com/ethersphere/bee-dashboard/issues/463)) ([eb51dbb](https://github.com/ethersphere/bee-dashboard/commit/eb51dbb090a22d398c13e355de26c229c79d4a6f))
+* replace feather icons with remix icons on swarm button ([#414](https://github.com/ethersphere/bee-dashboard/issues/414)) ([f238c43](https://github.com/ethersphere/bee-dashboard/commit/f238c433078b09ac034c4bc66a434f8a91422827))
+* sensible deposit and swap ([#448](https://github.com/ethersphere/bee-dashboard/issues/448)) ([26ce0ef](https://github.com/ethersphere/bee-dashboard/commit/26ce0efc0b5e441863d8991af6121f105f8c7981))
+* sentry trace only Bee Desktop API ([#421](https://github.com/ethersphere/bee-dashboard/issues/421)) ([7c39e27](https://github.com/ethersphere/bee-dashboard/commit/7c39e2741c87b1ca75fcb1a72a5d7c12b826e950))
+* show update notifications only on non-auto-updating Swarm Desktops ([#460](https://github.com/ethersphere/bee-dashboard/issues/460)) ([d12f86b](https://github.com/ethersphere/bee-dashboard/commit/d12f86b9fac047f7c62edaca4fa818dbac27e894))
+* text in the info page cards ([#411](https://github.com/ethersphere/bee-dashboard/issues/411)) ([5e31c21](https://github.com/ethersphere/bee-dashboard/commit/5e31c21f49e6418b3cf36a75076eff2234ab2e8c))
+* the topup urls are now under `/account` which fixes highlighting ([#424](https://github.com/ethersphere/bee-dashboard/issues/424)) ([d345059](https://github.com/ethersphere/bee-dashboard/commit/d345059048efdf7226b7bc26e6514792a0a4cbff))
+* use xDAI and xBZZ on Gnosis chain ([#454](https://github.com/ethersphere/bee-dashboard/issues/454)) ([a3c02db](https://github.com/ethersphere/bee-dashboard/commit/a3c02dbf8a063fd69f4b4c1b4ff058a35710d0bc))
+* users can now upgrade to light node if they have enough funds ([#458](https://github.com/ethersphere/bee-dashboard/issues/458)) ([8c182ca](https://github.com/ethersphere/bee-dashboard/commit/8c182cafd537e508384efcf9c52febcd47f14a67))
+
 ## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)


@@ -13,16 +13,16 @@
 **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 -->**.
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.7.0-bbf13011<!-- 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                           |
+| 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) | ![Peers](/ui_samples/postage_stamps.png) |
+| ![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

@@ -94,14 +94,25 @@ 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_BEE_DEBUG_HOST` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+ - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
+
+#### Swarm Desktop development
+
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:

 ```sh
-echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000
+REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
+
 npm start
 npm run desktop # This will inject the API key to the Dashboard 
 ```
@@ -6,7 +6,7 @@ import open  from 'open'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'

-const paths = envPaths('bee-desktop')
+const paths = envPaths('Swarm Desktop', { suffix: '' })
 const apiKey = await readFile(join(paths.data, 'api-key.txt'), {encoding: 'utf-8'})
 const url = `http://localhost:3001/?v=${apiKey}#/`

@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.17.0",
+  "version": "0.20.1",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -26,14 +26,12 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^4.1.1",
+    "@ethersphere/bee-js": "^5.0.0",
    "@ethersphere/manifest-js": "1.2.1",
    "@ethersphere/swarm-cid": "^0.1.0",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
-    "@sentry/react": "^7.1.1",
-    "@sentry/tracing": "^7.1.1",
    "assert": "^2.0.0",
    "axios": "0.24.0",
    "bignumber.js": "9.0.1",
@@ -50,14 +48,14 @@
    "notistack": "1.0.10",
    "opener": "1.5.2",
    "qrcode.react": "1.0.1",
-    "react": ">= 17.0.2",
+    "react": ">=17.0.0 || >=18.0.0",
    "react-copy-to-clipboard": "5.0.4",
-    "react-dom": ">= 17.0.2",
-    "react-feather": "2.0.9",
+    "react-dom": ">=17.0.0 || >=18.0.0",
    "react-identicons": "1.2.5",
    "react-router": "6.2.1",
    "react-router-dom": "6.2.1",
    "react-syntax-highlighter": "15.4.4",
+    "remixicon-react": "^1.0.0",
    "semver": "7.3.5",
    "serve-handler": "6.1.3",
    "stream": "npm:stream-browserify",
@@ -92,6 +90,7 @@
    "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 +109,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"
@@ -122,13 +123,14 @@
    "react-dom": ">= 17.0.2"
  },
  "scripts": {
-    "prepare": "npm run build",
+    "prepare": "npm run build && npm run build:component",
    "start": "react-scripts start",
    "desktop": "node ./desktop.mjs",
    "build": "react-scripts build",
-    "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' 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\"",
@@ -154,7 +156,7 @@
    ]
  },
  "engines": {
-    "node": ">=12.0.0",
+    "node": ">=14.0.0",
    "npm": ">=6.9.0",
    "bee": ">=0.6.0"
  }
@@ -23,7 +23,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Bee Dashboard</title>
+    <title>Swarm</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -3,7 +3,6 @@ import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
 import React, { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
-import * as Sentry from '@sentry/react'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -13,48 +12,62 @@ 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,
+  beeDebugApiUrl,
+  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}
+          beeDebugApiUrl={beeDebugApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
+          lockedApiSettings={lockedApiSettings}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
+        >
          <TopUpProvider>
            <BeeProvider>
-              <StampsProvider>
-                <FileProvider>
-                  <FeedsProvider>
-                    <PlatformProvider>
-                      <SnackbarProvider>
-                        <Router>
-                          <>
-                            <CssBaseline />
-                            <Dashboard>
-                              <BaseRouter />
-                            </Dashboard>
-                          </>
-                        </Router>
-                      </SnackbarProvider>
-                    </PlatformProvider>
-                  </FeedsProvider>
-                </FileProvider>
-              </StampsProvider>
+              <BalanceProvider>
+                <StampsProvider>
+                  <FileProvider>
+                    <FeedsProvider>
+                      <PlatformProvider>
+                        <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+                          <Router>
+                            <>
+                              <CssBaseline />
+                              <Dashboard errorReporting={errorReporting}>
+                                <BaseRouter />
+                              </Dashboard>
+                            </>
+                          </Router>
+                        </SnackbarProvider>
+                      </PlatformProvider>
+                    </FeedsProvider>
+                  </FileProvider>
+                </StampsProvider>
+              </BalanceProvider>
            </BeeProvider>
          </TopUpProvider>
        </SettingsProvider>
@@ -62,18 +75,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
 }

@@ -1,6 +1,7 @@
 import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { AlertCircle, Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'

 interface Props {
@@ -60,11 +61,7 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
      <div className={classes.wrapper}>
        <div className={classes.iconWrapper}>
          {icon}
-          {status === 'ok' ? (
-            <Check size="13" stroke="#09ca6c" />
-          ) : (
-            <AlertCircle size="13" fill="#f44336" stroke="white" />
-          )}
+          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
        </div>
        <Typography variant="h2" style={{ marginBottom: '8px' }}>
          {title}
@@ -7,7 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Zap } from 'react-feather'
+import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'

@@ -48,6 +48,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(() => {
@@ -79,7 +80,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
            )}
            {!loadingCashout && (
              <span>
-                Are you sure you want to cashout <strong>{uncashedAmount} BZZ</strong> from Peer{' '}
+                Are you sure you want to cashout <strong>{uncashedAmount} xBZZ</strong> from Peer{' '}
                <strong>{peerId}</strong>?
              </span>
            )}
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Clipboard } from 'react-feather'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { useSnackbar } from 'notistack'

 interface Props {
@@ -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"
            >
@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Info } from 'react-feather'
+import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'

 const useStyles = makeStyles((theme: Theme) =>
@@ -2,10 +2,14 @@ import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Edit, Minus, Search, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Edit from 'remixicon-react/PencilLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
+import type { RemixiconReactIconProps } from 'remixicon-react'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -53,6 +57,7 @@ interface Props {
  expandedOnly?: boolean
  confirmLabel?: string
  confirmLabelDisabled?: boolean
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
  loading?: boolean
  onChange?: (value: string) => void
  onConfirm?: (value: string) => void
@@ -67,6 +72,7 @@ export default function ExpandableListItemKey({
  onChange,
  confirmLabel,
  confirmLabelDisabled,
+  confirmIcon,
  expandedOnly,
  helperText,
  placeholder,
@@ -137,7 +143,7 @@ export default function ExpandableListItemKey({
              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
            }
            loading={loading}
-            iconType={Search}
+            iconType={confirmIcon ?? Check}
            onClick={() => {
              if (onConfirm) onConfirm(inputValue)
            }}
@@ -3,7 +3,8 @@ import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Eye, Minus } from 'react-feather'
+import Eye from 'remixicon-react/EyeLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -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 'react-feather'
-
-import config from '../config'
-import SideBarItem from './SideBarItem'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    link: {
-      color: '#9f9f9f',
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'none',
-
-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          textDecoration: 'none',
-        },
-      },
-    },
-
-    icon: {
-      height: theme.spacing(4),
-    },
-  }),
-)
-
-/**
- * Parses Sentry DNS so it could be transformed into API call
- * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
- */
-const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
-
-async function isSentryReachable(): Promise<boolean> {
-  const key = config.SENTRY_KEY
-
-  if (!key) {
-    return false
-  }
-
-  const match = SENTRY_PARSING_REGEX.exec(key)
-
-  if (!match) {
-    return false
-  }
-
-  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
-
-  try {
-    await fetch(url, { method: 'POST' })
-
-    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
-    return true
-  } catch (e) {
-    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
-    return false
-  }
-}
-
-function showFeedbackForm(): void {
-  const eventId = Sentry.captureMessage('User feedback')
-  Sentry.showReportDialog({
-    eventId,
-    title: 'Provide us feedback!',
-    subtitle: 'Share with us what you like and/or dislike.',
-    subtitle2: 'We will be very happy.',
-    labelComments: 'What is your impression about this app?',
-    labelSubmit: 'Send Feedback',
-  })
-}
-
-export default function Feedback(): ReactElement {
-  const [sentryEnabled, setSentryEnabled] = useState(false)
-  const classes = useStyles()
-
-  // Run this only on component mount to verify once that Sentry is reachable
-  useEffect(() => {
-    isSentryReachable().then(result => {
-      setSentryEnabled(result)
-    })
-  }, [])
-
-  if (sentryEnabled) {
-    return (
-      <Link onClick={showFeedbackForm} className={classes.link}>
-        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
-      </Link>
-    )
-  }
-
-  return <></>
-}
@@ -7,6 +7,7 @@ import mapData from '../assets/data/map-data.json'

 interface Props {
  style?: CSSProperties
+  error?: boolean
 }

 interface MapRecord {
@@ -47,22 +48,27 @@ function addPins(map: DottedMap, pins: MapRecord[], color: string) {
 }

 const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
+const mapNoPins = new DottedMap({ map: JSON.parse(mapData) })
 addPins(mapPrecomputed, deduplicatedRecords, '#303030')

 const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }

-export default function Card({ style }: Props): ReactElement {
+export default function Card({ style, error }: Props): ReactElement {
  const { peers } = useContext(Context)
  const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))

  useEffect(() => {
+    // Display error map
+    if (error) setMap(mapNoPins.getSVG({ ...mapSvgOptions, color: '#eaeaea' }))
+
+    // Display just the base map without any connections
    if (!peers) return

    const points = findIntersection(fullMapDb, peers)
    const mapNew = Object.create(mapPrecomputed)
    addPins(mapNew, points, '#09CA6C')
    setMap(mapNew.getSVG(mapSvgOptions))
-  }, [peers])
+  }, [peers, error])

  return (
    <div
@@ -74,6 +80,7 @@ export default function Card({ style }: Props): ReactElement {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
+        position: 'relative',
      })}
    >
      <img
@@ -81,6 +88,23 @@ export default function Card({ style }: Props): ReactElement {
        src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
      />
+      {error && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="60"
+          height="60"
+          viewBox="0 0 24 24"
+          fill="#f44336"
+          strokeWidth="0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.25 }}
+        >
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="9" x2="12" y2="13"></line>
+          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="17" x2="12.01" y2="17"></line>
+        </svg>
+      )}
    </div>
  )
 }
@@ -1,50 +1,22 @@
-import { BeeModes } from '@ethersphere/bee-js'
 import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { OpenInNewSharp } from '@material-ui/icons'
 import { ReactElement, useContext } from 'react'
-import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
 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 HomeIcon from 'remixicon-react/Home3LineIcon'
+import SettingsIcon from 'remixicon-react/Settings2LineIcon'
+import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
-import { config } from '../config'
-import { useIsBeeDesktop } from '../hooks/apiHooks'
-import { Context } from '../providers/Bee'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-import Feedback from './Feedback'
-
-const navBarItems = [
-  {
-    label: 'Info',
-    path: ROUTES.INFO,
-    icon: Home,
-  },
-  {
-    label: 'Files',
-    path: ROUTES.UPLOAD,
-    icon: FileText,
-    pathMatcherSubstring: '/files/',
-  },
-  {
-    label: 'Account',
-    path: ROUTES.ACCOUNT_WALLET,
-    icon: Briefcase,
-    pathMatcherSubstring: '/account/',
-  },
-  {
-    label: 'Top Up',
-    path: ROUTES.WALLET,
-    icon: DollarSign,
-    requiresMode: BeeModes.ULTRA_LIGHT,
-  },
-  {
-    label: 'Settings',
-    path: ROUTES.SETTINGS,
-    icon: Settings,
-  },
-]
+import { BeeModes } from '@ethersphere/bee-js'
+import { BEE_DOCS_HOST } from '../constants'

 const drawerWidth = 300

@@ -72,9 +44,6 @@ const useStyles = makeStyles((theme: Theme) =>
    icon: {
      height: theme.spacing(4),
    },
-    iconSmall: {
-      height: theme.spacing(2),
-    },
    divider: {
      backgroundColor: '#2c2c2c',
      marginLeft: theme.spacing(4),
@@ -97,39 +66,62 @@ const useStyles = makeStyles((theme: Theme) =>

 export default function SideBar(): ReactElement {
  const classes = useStyles()
-  const { nodeInfo } = useContext(Context)
-  const { isBeeDesktop } = useIsBeeDesktop()
+  const { isDesktop } = useContext(SettingsContext)
+  const { nodeInfo } = useContext(BeeContext)
+
+  const navBarItems = [
+    {
+      label: 'Info',
+      path: ROUTES.INFO,
+      icon: HomeIcon,
+    },
+    {
+      label: 'Files',
+      path: nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT ? ROUTES.DOWNLOAD : ROUTES.UPLOAD,
+      icon: FilesIcon,
+      pathMatcherSubstring: '/files/',
+    },
+    {
+      label: 'Account',
+      path: ROUTES.ACCOUNT_WALLET,
+      icon: AccountIcon,
+      pathMatcherSubstring: '/account/',
+    },
+    {
+      label: 'Settings',
+      path: ROUTES.SETTINGS,
+      icon: SettingsIcon,
+    },
+  ]

  return (
    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
        <Grid className={classes.logo}>
          <Link to={ROUTES.INFO}>
-            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
+            <img alt="swarm" src={isDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
        </Grid>
        <Grid>
          <List>
-            {navBarItems
-              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
-              .map(p => (
-                <Link to={p.path} key={p.path} className={classes.link}>
-                  <SideBarItem
-                    key={p.path}
-                    iconStart={<p.icon className={classes.icon} />}
-                    path={p.path}
-                    pathMatcherSubstring={p.pathMatcherSubstring}
-                    label={p.label}
-                  />
-                </Link>
-              ))}
+            {navBarItems.map(p => (
+              <Link to={p.path} key={p.path} className={classes.link}>
+                <SideBarItem
+                  key={p.path}
+                  iconStart={<p.icon className={classes.icon} />}
+                  path={p.path}
+                  pathMatcherSubstring={p.pathMatcherSubstring}
+                  label={p.label}
+                />
+              </Link>
+            ))}
          </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={<BookOpen className={classes.icon} />}
-                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                iconStart={<DocsIcon className={classes.icon} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
                label={<span>Docs</span>}
              />
            </MUILink>
@@ -140,7 +132,6 @@ export default function SideBar(): ReactElement {
            <Link to={ROUTES.STATUS} className={classes.link}>
              <SideBarStatus path={ROUTES.STATUS} />
            </Link>
-            <Feedback />
          </List>
        </Grid>
      </Grid>
@@ -1,6 +1,6 @@
 import { ReactElement, useContext } from 'react'
 import { useLocation, matchPath } from 'react-router-dom'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'

 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
@@ -1,9 +1,9 @@
 import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { IconProps } from 'react-feather'
+import type { RemixiconReactIconProps } from 'remixicon-react'

 export interface SwarmButtonProps extends ButtonProps {
-  iconType: React.ComponentType<IconProps>
+  iconType: React.ComponentType<RemixiconReactIconProps>
  loading?: boolean
  cancel?: boolean
  variant?: 'text' | 'contained' | 'outlined'
@@ -18,7 +18,7 @@ const useStyles = makeStyles(() =>
      color: '#242424',
      '&:hover, &:focus': {
        '& svg': {
-          stroke: '#fff',
+          fill: '#fff',
          transition: '0.1s',
        },
      },
@@ -10,6 +10,7 @@ interface Props {
  formik?: boolean
  optional?: boolean
  defaultValue?: string
+  placeholder?: string
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }

@@ -41,6 +42,7 @@ export function SwarmTextInput({
  formik,
  onChange,
  defaultValue,
+  placeholder,
 }: Props): ReactElement {
  const classes = useStyles()

@@ -57,6 +59,7 @@ export function SwarmTextInput({
        className={classes.field}
        defaultValue={defaultValue || ''}
        InputProps={{ disableUnderline: true }}
+        placeholder={placeholder}
      />
    )
  }
@@ -72,6 +75,7 @@ export function SwarmTextInput({
      defaultValue={defaultValue || ''}
      onChange={onChange}
      InputProps={{ disableUnderline: true }}
+      placeholder={placeholder}
    />
  )
 }
@@ -1,10 +1,10 @@
 import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import { Activity } from 'react-feather'
+import 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>
          .
@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Waiting(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress size={240} style={{ color: '#ffffff' }} />
+    </Grid>
+  )
+}
@@ -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' })
    }
  }
@@ -96,7 +97,7 @@ export default function WithdrawDepositModal({
          />
          {amountError && (
            <FormHelperText error>
-              Please provide valid BZZ amount (max 16 decimals). Error: {amountError.message}
+              Please provide valid xBZZ amount (max 16 decimals). Error: {amountError.message}
            </FormHelperText>
          )}
        </DialogContent>
@@ -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 BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
+  'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
+export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
+export const DEFAULT_BEE_DEBUG_API_HOST = 'http://localhost:1635'
+export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'
@@ -1,5 +1,5 @@
 import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'

 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -12,7 +12,7 @@ export default function DepositModal(): ReactElement {
    <WithdrawDepositModal
      successMessage="Successful deposit."
      errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
+      dialogMessage="Specify the amount of xBZZ you would like to deposit to your node."
      label="Deposit"
      icon={<Download size="1rem" />}
      min={new BigNumber(0)}
@@ -1,6 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
-import { Upload } from 'react-feather'
+import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as SettingsContext } from '../providers/Settings'

@@ -11,7 +11,7 @@ export default function WithdrawModal(): ReactElement {
    <WithdrawDepositModal
      successMessage="Successful withdrawal."
      errorMessage="Error with withdrawing."
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Specify the amount of xBZZ you would like to withdraw from your node."
      label="Withdraw"
      icon={<Upload size="1rem" />}
      min={new BigNumber(0)}
@@ -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,7 +1,8 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { config } from '../config'
+import { getLatestBeeDesktopVersion } from '../utils/desktop'
 import { getJson } from '../utils/net'
+import { GITHUB_REPO_URL } from '../constants'

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

-export interface IsBeeDesktopHook {
-  isBeeDesktop: boolean
+export interface BeeDesktopHook {
+  error: Error | null
  isLoading: boolean
+  beeDesktopVersion: string
+  desktopAutoUpdateEnabled: boolean
 }

-interface Config {
-  BEE_DESKTOP_URL: string
+export interface NewDesktopVersionHook {
+  newBeeDesktopVersion: 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 [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
+  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
-    axios
-      .get(`${conf.BEE_DESKTOP_URL}/info`)
-      .then(res => {
-        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
-        else setIsBeeDesktop(false)
-      })
-      .catch(() => {
-        setIsBeeDesktop(false)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [conf])
+    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)
+        })
+    }
+  }, [desktopUrl, isBeeDesktop])

-  return { isBeeDesktop, isLoading }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+}
+
+async function checkNewVersion(desktopUrl: string): Promise<string> {
+  const resJson = await (await fetch(`${desktopUrl}/info`)).json()
+  const currentVersion = resJson.version
+  const latestVersion = await getLatestBeeDesktopVersion()
+
+  if (currentVersion !== latestVersion) {
+    return latestVersion
+  }
+
+  return ''
+}
+
+export function useNewBeeDesktopVersion(
+  isBeeDesktop: boolean,
+  desktopUrl: string,
+  desktopAutoUpdateEnabled: boolean,
+): NewDesktopVersionHook {
+  const [newBeeDesktopVersion, setNewBeeDesktopVersion] = useState<string>('')
+
+  useEffect(() => {
+    if (!isBeeDesktop || desktopAutoUpdateEnabled) {
+      return
+    }
+
+    checkNewVersion(desktopUrl).then(version => {
+      if (version !== '') {
+        setNewBeeDesktopVersion(version)
+      }
+    })
+  }, [isBeeDesktop, desktopUrl, desktopAutoUpdateEnabled])
+
+  return { newBeeDesktopVersion }
 }

 export interface BeeConfig {
@@ -54,13 +94,10 @@ export interface BeeConfig {
  '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
 }

@@ -70,13 +107,13 @@ export interface GetBeeConfig {
  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`)
+    getJson<BeeConfig>(`${desktopUrl}/config`)
      .then(beeConf => {
        setBeeConfig(beeConf)
        setError(null)
@@ -88,7 +125,7 @@ export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
      .finally(() => {
        setLoading(false)
      })
-  }, [conf])
+  }, [desktopUrl])

  return { config: beeConfig, isLoading, error }
 }
@@ -100,7 +137,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)
      })
@@ -4,9 +4,21 @@ import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'

+const desktopEnabled = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED)
+const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
+const beeApiUrl = process.env.REACT_APP_BEE_HOST
+const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_HOST
+const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+
 ReactDOM.render(
  <React.StrictMode>
-    <App />
+    <App
+      isDesktop={desktopEnabled}
+      desktopUrl={desktopUrl}
+      beeApiUrl={beeApiUrl}
+      beeDebugApiUrl={beeDebugApiUrl}
+      defaultRpcUrl={defaultRpcUrl}
+    />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -1,12 +1,14 @@
-import { CircularProgress, Container } from '@material-ui/core'
+import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import React, { ReactElement, useContext } from 'react'
+import React, { ReactElement, useContext, useEffect } from 'react'
+import { useSnackbar } from 'notistack'
+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 { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -19,12 +21,94 @@ 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 { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } =
+    useContext(BeeContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  // New version of Bee client notification
+  useEffect(() => {
+    if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
+      enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, {
+        variant: 'warning',
+        preventDuplicate: true,
+        key: 'beeNewVersion',
+        persist: true,
+        action: key => (
+          <React.Fragment>
+            <Button
+              onClick={() => {
+                window.open(latestBeeVersionUrl)
+                closeSnackbar(key)
+              }}
+            >
+              Download release
+            </Button>
+            <IconButton
+              onClick={() => {
+                closeSnackbar(key)
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        ),
+      })
+    }
+  }, [
+    closeSnackbar,
+    enqueueSnackbar,
+    isLatestBeeVersion,
+    isDesktop,
+    latestBeeRelease,
+    latestBeeVersionUrl,
+    isLoading,
+    latestUserVersion,
+  ])
+
+  useEffect(() => {
+    // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
+    if (desktopAutoUpdateEnabled) {
+      return
+    }
+
+    if (newBeeDesktopVersion !== '') {
+      enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
+        variant: 'warning',
+        preventDuplicate: true,
+        key: 'desktopNewVersion',
+        persist: true,
+        action: key => (
+          <React.Fragment>
+            <Button
+              onClick={() => {
+                window.open(BEE_DESKTOP_LATEST_RELEASE_PAGE)
+                closeSnackbar(key)
+              }}
+            >
+              Download release
+            </Button>
+            <IconButton
+              onClick={() => {
+                closeSnackbar(key)
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        ),
+      })
+    }
+  }, [enqueueSnackbar, closeSnackbar, newBeeDesktopVersion, desktopAutoUpdateEnabled])
+
  const content = (
    <>
      {isLoading ? (
@@ -37,25 +121,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
@@ -22,30 +22,37 @@ export function AccountChequebook(): ReactElement {

  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

+  const showChequebook = chequebookBalance?.totalBalance !== undefined
+
  return (
    <>
      <Header />
      <AccountNavigation active="CHEQUEBOOK" />
      <div>
-        <ExpandableList label="Chequebook" defaultOpen>
-          <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-          <ExpandableListItem
-            label="Available Uncommitted Balance"
-            value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-          />
-          <ExpandableListItem
-            label="Total Cheques Amount Sent"
-            value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
-          />
-          <ExpandableListItem
-            label="Total Cheques Amount Received"
-            value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
-          />
-          <ExpandableListItemActions>
-            <WithdrawModal />
-            <DepositModal />
-          </ExpandableListItemActions>
-        </ExpandableList>
+        {showChequebook && (
+          <ExpandableList label="Chequebook" defaultOpen>
+            <ExpandableListItem
+              label="Total Balance"
+              value={`${chequebookBalance?.totalBalance.toFixedDecimal()} xBZZ`}
+            />
+            <ExpandableListItem
+              label="Available Uncommitted Balance"
+              value={`${chequebookBalance?.availableBalance.toFixedDecimal()} xBZZ`}
+            />
+            <ExpandableListItem
+              label="Total Cheques Amount Sent"
+              value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
+            />
+            <ExpandableListItem
+              label="Total Cheques Amount Received"
+              value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
+            />
+            <ExpandableListItemActions>
+              <WithdrawModal />
+              <DepositModal />
+            </ExpandableListItemActions>
+          </ExpandableList>
+        )}
        <ExpandableList label="Blockchain" defaultOpen>
          <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
          <ExpandableListItemKey
@@ -1,6 +1,9 @@
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/Download2LineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
@@ -16,9 +19,12 @@ import { ExportFeedDialog } from '../../feeds/ExportFeedDialog'
 import { ImportFeedDialog } from '../../feeds/ImportFeedDialog'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'

 export function AccountFeeds(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)

  const navigate = useNavigate()

@@ -59,6 +65,8 @@ export function AccountFeeds(): ReactElement {
    setShowDelete(true)
  }

+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
  return (
    <>
      <Header />
@@ -1,6 +1,6 @@
 import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
@@ -1,26 +1,30 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { Download, Gift, Link } from 'react-feather'
 import { useNavigate } from 'react-router'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
-import { Context } from '../../../providers/Bee'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
+import { Context as BalanceProvider } from '../../../providers/WalletBalance'
 import { ROUTES } from '../../../routes'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'

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

  const navigate = useNavigate()

-  if (!balance || !nodeAddresses) {
-    return <Loading />
-  }
-
  function onCheckTransactions() {
    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
  }
@@ -30,37 +34,49 @@ export function AccountWallet(): ReactElement {
  }

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

+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
  return (
    <>
      <Header />
-      <AccountNavigation active="WALLET" />
+      {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <AccountNavigation active="WALLET" />}
      <Box mb={4}>
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          <Typography variant="h2">Wallet balance</Typography>
          <SwarmButton onClick={onDeposit} iconType={Download}>
-            Deposit
+            Top up wallet
          </SwarmButton>
        </Grid>
      </Box>
-      <Box mb={0.25}>
-        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
-      </Box>
-      <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
-      </Box>
-      <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
-      </Box>
+      {balance && nodeAddresses ? (
+        <>
+          <Box mb={0.25}>
+            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+          </Box>
+          <Box mb={0.25}>
+            <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
+          </Box>
+          <Box mb={2}>
+            <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
+          </Box>
+        </>
+      ) : (
+        <Box mb={8}>
+          <Loading />
+        </Box>
+      )}
      <ExpandableListItemActions>
        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
          Check transactions on Blockscout
        </SwarmButton>
-        <SwarmButton onClick={onInvite} iconType={Gift}>
-          Invite to Swarm...
-        </SwarmButton>
+        {isDesktop && (
+          <SwarmButton onClick={onInvite} iconType={Gift}>
+            Invite to Swarm...
+          </SwarmButton>
+        )}
      </ExpandableListItemActions>
    </>
  )
@@ -17,26 +17,26 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
  return (
    <ExpandableList
      label={`Peers (${accounting?.length || 0})`}
-      info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
+      info={`${totalUncashed.toFixedDecimal()} xBZZ (uncashed)`}
    >
-      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
+      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} xBZZ`} />
      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
        <ExpandableList
          key={peer}
          label={`Peer ${peer.slice(0, 8)}[…]`}
          level={1}
-          info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
+          info={`${uncashedAmount.toFixedDecimal()} xBZZ (uncashed)`}
        >
          <ExpandableListItemKey label="Peer ID" value={peer} />
-          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} xBZZ`} />
          <ExpandableListItem
            label="Settlements Sent / Received"
-            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} BZZ`}
+            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} xBZZ`}
          />
-          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} xBZZ`} />
          <ExpandableListItem
            label="Uncashed Amount"
-            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} BZZ`}
+            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} xBZZ`}
          />
          {uncashedAmount.toBigNumber.isGreaterThan('0') && (
            <ExpandableListItemActions>
@@ -2,7 +2,8 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Check, X } from 'react-feather'
+import 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'
@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Trash, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'
@@ -2,7 +2,8 @@ import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import { useSnackbar } from 'notistack'
 import { ReactElement } from 'react'
-import { Clipboard, Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { Code } from '../../components/Code'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'
@@ -1,7 +1,7 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate, useParams } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
@@ -1,7 +1,8 @@
 import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useRef, useState } from 'react'
-import { Check, Upload } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'
@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Bookmark, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -1,6 +1,9 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { File, Folder } from 'react-feather'
+import File from 'remixicon-react/FileLineIcon'
+import Folder from 'remixicon-react/FolderLineIcon'
 import { FitImage } from '../../components/FitImage'
 import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
@@ -1,12 +1,14 @@
-import { Utils } from '@ethersphere/bee-js'
+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, defaultUploadOrigin } from '../../providers/File'
+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'
@@ -16,8 +18,9 @@ export function Download(): ReactElement {
  const [loading, setLoading] = useState(false)
  const { beeApi } = useContext(SettingsContext)
  const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
+  const { nodeInfo } = useContext(BeeContext)

-  const { setUploadOrigin } = useContext(Context)
+  const { setUploadOrigin } = useContext(FileContext)

  const { enqueueSnackbar } = useSnackbar()
  const navigate = useNavigate()
@@ -72,6 +75,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)
@@ -80,7 +84,7 @@ export function Download(): ReactElement {

  return (
    <>
-      <FileNavigation active="DOWNLOAD" />
+      {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <FileNavigation active="DOWNLOAD" />}
      <ExpandableListItemInput
        label="Swarm Hash"
        onConfirm={value => onSwarmIdentifier(value)}
@@ -88,6 +92,7 @@ export function Download(): ReactElement {
        helperText={referenceError}
        confirmLabel={'Find'}
        confirmLabelDisabled={Boolean(referenceError) || loading}
+        confirmIcon={Search}
        placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
        expandedOnly
        mapperFn={value => recognizeEnsOrSwarmHash(value)}
@@ -1,6 +1,9 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Bookmark, Download, Link, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'

@@ -8,7 +8,6 @@ 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'
@@ -78,7 +77,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)
@@ -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)

@@ -147,6 +147,7 @@ export function Upload(): ReactElement {
        }
      })
      .catch(e => {
+        console.error(e) // eslint-disable-line
        enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
        setUploading(false)
      })
@@ -1,6 +1,10 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
+import ArrowLeft from 'remixicon-react/ArrowLeftLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Layers from 'remixicon-react/StackLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -45,7 +49,17 @@ export function UploadActionBar({
            </SwarmButton>
          </ExpandableListItemActions>
        </Box>
-        <DocumentationText>You need a postage stamp to upload.</DocumentationText>
+        <DocumentationText>
+          You need a postage stamp to upload. Find out more in{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </DocumentationText>
      </>
    )
  }
@@ -63,13 +77,15 @@ export function UploadActionBar({
            Back To Preview
          </SwarmButton>
        </ExpandableListItemActions>
-        <SwarmButton
-          disabled={stampMode === 'BUY' && !hasAnyStamps}
-          onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
-          iconType={stampMode === 'BUY' ? Layers : PlusSquare}
-        >
-          {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
-        </SwarmButton>
+        {hasAnyStamps && (
+          <SwarmButton
+            disabled={stampMode === 'BUY' && !hasAnyStamps}
+            onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
+            iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+          >
+            {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+          </SwarmButton>
+        )}
      </Grid>
    )
  }
@@ -2,7 +2,9 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import PlusCircle from 'remixicon-react/AddCircleLineIcon'
+import FilePlus from 'remixicon-react/FileAddLineIcon'
+import FolderPlus from 'remixicon-react/FolderAddLineIcon'
 import { useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -1,7 +1,7 @@
 import { ReactElement, useContext } from 'react'
 import { History } from '../../components/History'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { defaultUploadOrigin } from '../../providers/File'
 import { HISTORY_KEYS } from '../../utils/local-storage'
 import { FileNavigation } from './FileNavigation'
@@ -10,7 +10,7 @@ import { UploadArea } from './UploadArea'
 export function UploadLander(): ReactElement {
  const { status } = useContext(BeeContext)

-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  return (
    <>
@@ -1,7 +1,8 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Tooltip, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Check, X } from 'react-feather'
+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'
@@ -10,14 +11,20 @@ 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 { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 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[]>([])
@@ -26,13 +33,13 @@ export default function Index(): ReactElement {
    async function mapGiftWallets() {
      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()
@@ -43,9 +50,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)
@@ -60,35 +68,49 @@ export default function Index(): ReactElement {
    return <Loading />
  }

+  const notEnoughFundsCheck =
+    balance.dai.toBigNumber.isLessThanOrEqualTo(GIFT_WALLET_FUND_DAI_AMOUNT.toBigNumber) ||
+    balance.bzz.toBigNumber.isLessThan(GIFT_WALLET_FUND_BZZ_AMOUNT.toBigNumber)
+
  return (
    <>
      <HistoryHeader>Invite to Swarm...</HistoryHeader>
      <Box mb={4}>
        <Typography>
          Generate and share a gift wallet that anyone can use to set-up their light node with Swarm Desktop. This will
-          use 1 XDAI and 5 BZZ from your node wallet.
+          use {GIFT_WALLET_FUND_DAI_AMOUNT.toSignificantDigits(2)} xDAI and{' '}
+          {GIFT_WALLET_FUND_BZZ_AMOUNT.toSignificantDigits(2)} xBZZ from your node wallet.
        </Typography>
      </Box>
      <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
      </Box>
      <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
      </Box>
      <Box mb={4}>
        {balances.map((x, i) => (
          <Box mb={2} key={i}>
            <ExpandableListItemKey label={`swarm${String(i).padStart(3, '0')}`} value={x.privateKey} />
            <ExpandableListItemKey label="Address" value={x.address} />
-            <ExpandableListItem label="XDAI balance" value={`${x.dai.toSignificantDigits(4)} XDAI`} />
-            <ExpandableListItem label="BZZ balance" value={`${x.bzz.toSignificantDigits(4)} BZZ`} />
+            <ExpandableListItem label="xDAI balance" value={`${x.dai.toSignificantDigits(4)} xDAI`} />
+            <ExpandableListItem label="xBZZ balance" value={`${x.bzz.toSignificantDigits(4)} xBZZ`} />
          </Box>
        ))}
      </Box>
      <ExpandableListItemActions>
-        <SwarmButton onClick={onCreate} iconType={Check} loading={loading} disabled={loading}>
-          Generate gift wallet
-        </SwarmButton>
+        <Tooltip title={'Not enough funds'} placement="top" open={notEnoughFundsCheck} arrow>
+          <div>
+            <SwarmButton
+              onClick={onCreate}
+              iconType={Check}
+              loading={loading}
+              disabled={loading || notEnoughFundsCheck}
+            >
+              Generate gift wallet
+            </SwarmButton>
+          </div>
+        </Tooltip>
        <SwarmButton onClick={onCancel} cancel iconType={X} disabled={loading}>
          Cancel
        </SwarmButton>
@@ -0,0 +1,48 @@
+import { ReactElement, useContext } from 'react'
+import Search from 'remixicon-react/SearchLineIcon'
+import Globe from 'remixicon-react/GlobalLineIcon'
+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 { ROUTES } from '../../routes'
+
+export default function NodeInfoCard(): ReactElement {
+  const { status } = useContext(BeeContext)
+  const navigate = useNavigate()
+
+  if (status.all === CheckState.ERROR) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Your node is not connected…"
+        subtitle="You are not connected to Swarm."
+        status="error"
+      />
+    )
+  }
+
+  if (status.all === CheckState.WARNING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Your node is running…"
+        subtitle="Connection to Swarm might not be optimal."
+        status="error"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
+      icon={<Globe />}
+      title="Your node is connected."
+      subtitle="You are connected to Swarm."
+      status="ok"
+    />
+  )
+}
@@ -1,13 +1,20 @@
-import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
-import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
-
-import { Context as BeeContext } from '../../providers/Bee'
-import Card from '../../components/Card'
-import Map from '../../components/Map'
-import ExpandableListItem from '../../components/ExpandableListItem'
+import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
+import Wallet from 'remixicon-react/Wallet3LineIcon'
+import Card from '../../components/Card'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import Map from '../../components/Map'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
+import { chainIdToName } from '../../utils/chain'
+import NodeInfoCard from './NodeInfoCard'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'

 export default function Status(): ReactElement {
  const {
@@ -17,52 +24,49 @@ export default function Status(): ReactElement {
    latestBeeVersionUrl,
    topology,
    nodeInfo,
-    balance,
    chequebookBalance,
+    chainId,
  } = useContext(BeeContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { balance, error } = useContext(BalanceProvider)
+  const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
  const navigate = useNavigate()

+  let balanceText = 'Loading...'
+
+  if (error) {
+    balanceText = 'Could not load...'
+    console.error(error) // eslint-disable-line
+  } else if (balance) {
+    balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
+  }
+
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
-        {status.all ? (
-          <Card
-            buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
-            icon={<Globe />}
-            title="Your node is connected."
-            subtitle="You can now access content hosted on Swarm."
-            status="ok"
-          />
-        ) : (
-          <Card
-            buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
-            icon={<Globe />}
-            title="Your node is not connected…"
-            subtitle="You’re not connected to Swarm."
-            status="error"
-          />
-        )}
+        <NodeInfoCard />
        <div style={{ width: '8px' }}></div>
        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
          <Card
            buttonProps={{
-              iconType: Briefcase,
+              iconType: Wallet,
              children: 'Manage your wallet',
              onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
            }}
-            icon={<Briefcase />}
-            title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
+            icon={<Wallet />}
+            title={balanceText}
            subtitle="Current wallet balance."
            status="ok"
          />
        ) : (
          <Card
            buttonProps={{
-              iconType: Settings,
+              iconType: Wallet,
              children: 'Setup wallet',
-              onClick: () => navigate(ROUTES.WALLET),
+              onClick: () => navigate(ROUTES.TOP_UP),
            }}
-            icon={<ArrowUp />}
+            icon={<Upload />}
            title="Your wallet is not setup."
            subtitle="To share content on Swarm, please setup your wallet."
            status="error"
@@ -75,29 +79,29 @@ export default function Status(): ReactElement {
            chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
              <Card
                buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                  children: 'View chequebook',
                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-                subtitle="Your chequebook is setup and has balance"
+                subtitle="Current chequebook balance."
                status="ok"
              />
            ) : (
              <Card
                buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                  children: 'View chequebook',
                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                title={
                  chequebookBalance?.availableBalance
-                    ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
-                    : 'No available balance'
+                    ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
+                    : 'No available balance.'
                }
-                subtitle="Your chequebook is not setup or has no balance."
+                subtitle="Chequebook not setup."
                status="error"
              />
            )}
@@ -105,11 +109,31 @@ export default function Status(): ReactElement {
        )}
      </div>
      <div style={{ height: '16px' }} />
-      <Map />
+      <Map error={status.topology.checkState !== 'OK'} />
      <div style={{ height: '2px' }} />
      <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
      <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
      <div style={{ height: '16px' }} />
+      {isDesktop && (
+        <ExpandableListItem
+          label="Desktop version"
+          value={
+            <div>
+              {`${beeDesktopVersion} `}
+              <Button
+                size="small"
+                variant="outlined"
+                href={BEE_DESKTOP_LATEST_RELEASE_PAGE}
+                target="_blank"
+                disabled={newBeeDesktopVersion === ''}
+                style={{ height: '26px' }}
+              >
+                {newBeeDesktopVersion === '' ? 'latest' : 'update'}
+              </Button>
+            </div>
+          }
+        />
+      )}
      <ExpandableListItem
        label="Bee version"
        value={
@@ -118,11 +142,12 @@ export default function Status(): ReactElement {
              Bee
            </a>
            {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && (
+            {latestUserVersion && !isDesktop && (
              <Button
                size="small"
                variant="outlined"
                href={latestBeeVersionUrl}
+                disabled={isLatestBeeVersion}
                target="_blank"
                style={{ height: '26px' }}
              >
@@ -133,6 +158,7 @@ export default function Status(): ReactElement {
        }
      />
      <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
+      {chainId && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
    </div>
  )
 }
@@ -1,32 +1,46 @@
 import { BeeModes } from '@ethersphere/bee-js'
-import { Box, Typography } from '@material-ui/core'
+import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Loading } from '../../components/Loading'
+import { Waiting } from '../../components/Waiting'
 import { Context } from '../../providers/Bee'
 import { ROUTES } from '../../routes'

-export default function Settings(): ReactElement {
-  const [startedAt] = useState(Date.now())
+const STARTED_UPGRADE_AT = 'started-upgrade-at'
+
+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()

+  useEffect(() => {
+    localStorage.setItem(STARTED_UPGRADE_AT, startedAt.toFixed())
+  }, [startedAt])
+
  useEffect(() => {
    if (Date.now() - startedAt < 45_000) {
      return
    }

    if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      localStorage.removeItem(STARTED_UPGRADE_AT)
      navigate(ROUTES.INFO)
    }
  }, [startedAt, navigate, nodeInfo, apiHealth])

  return (
-    <>
-      <Box mb={4}>
-        <Loading />
+    <Grid container direction="column" justifyContent="center" alignItems="center">
+      <Box mb={9}>
+        <Waiting />
      </Box>
-      <Typography>Your node is being upgraded to light mode... postage syncing may take up to 10 minutes.</Typography>
-    </>
+      <Box mb={1}>
+        <Typography>
+          <strong>Upgrading Bee</strong>
+        </Typography>
+      </Box>
+      <Typography>
+        You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
+      </Typography>
+    </Grid>
  )
 }
@@ -1,41 +0,0 @@
-import { Box, Typography } from '@material-ui/core'
-import { ReactElement, useContext, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router'
-import { Loading } from '../../components/Loading'
-import { Context } from '../../providers/Bee'
-import { ROUTES } from '../../routes'
-
-export default function Settings(): ReactElement {
-  const [waited, setWaited] = useState(false)
-  const { apiHealth } = useContext(Context)
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    if (waited) {
-      return
-    }
-
-    const timeout = setTimeout(() => setWaited(true), 5_000)
-
-    return () => clearTimeout(timeout)
-  }, [waited])
-
-  useEffect(() => {
-    if (!waited) {
-      return
-    }
-
-    if (apiHealth) {
-      navigate(ROUTES.INFO)
-    }
-  }, [navigate, waited, apiHealth])
-
-  return (
-    <>
-      <Box mb={4}>
-        <Loading />
-      </Box>
-      <Typography>You will be redirected automatically once your node is up and running.</Typography>
-    </>
-  )
-}
@@ -1,61 +0,0 @@
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ReactElement } from 'react'
-import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
-import { useNavigate } from 'react-router'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-import { HistoryHeader } from '../../components/HistoryHeader'
-import { SwarmButton } from '../../components/SwarmButton'
-import { ROUTES } from '../../routes'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    checkWrapper: {
-      background: 'rgba(0, 230, 118, 0.25)',
-      borderRadius: 99999,
-      width: '180px',
-      height: '180px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  }),
-)
-
-export default function Confirmation(): ReactElement {
-  const navigate = useNavigate()
-
-  const styles = useStyles()
-
-  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={Battery} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
-            Get started with bank card
-          </SwarmButton>
-          <SwarmButton iconType={BatteryCharging} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
-            Use DAI
-          </SwarmButton>
-          <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
-            Use a gift code
-          </SwarmButton>
-        </ExpandableListItemActions>
-      </Grid>
-    </>
-  )
-}
@@ -1,61 +0,0 @@
-import { Box, Typography } from '@material-ui/core'
-import { useSnackbar } from 'notistack'
-import { ReactElement, useContext, useState } from 'react'
-import { Check } from 'react-feather'
-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() {
-    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, you may use{' '}
-          <a href="https://getblock.io/" target="_blank" rel="noreferrer">
-            https://getblock.io/
-          </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>
-    </>
-  )
-}
@@ -2,11 +2,55 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { useSnackbar } from 'notistack'
+import { restartBeeNode, setJsonRpcInDesktop } from '../../utils/desktop'
+import { BeeModes } from '@ethersphere/bee-js'

 export default function SettingsPage(): ReactElement {
-  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings, config, isLoading } =
-    useContext(SettingsContext)
+  const {
+    apiUrl,
+    apiDebugUrl,
+    setApiUrl,
+    setDebugApiUrl,
+    lockedApiSettings,
+    cors,
+    dataDir,
+    ensResolver,
+    rpcProviderUrl,
+    isLoading,
+    isDesktop,
+    desktopUrl,
+    setAndPersistJsonRpcProvider,
+  } = useContext(SettingsContext)
+  const { refresh, nodeInfo } = useContext(BeeContext)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  async function handleSetRpcUrl(value: string) {
+    try {
+      setAndPersistJsonRpcProvider(value)
+
+      // We can't set the RPC URL to the `swap-endpoint` Bee config value unless the Bee node is already in
+      // light mode as setting this config value, basically upgrades the node to light mode.
+      if (isDesktop && nodeInfo?.beeMode === BeeModes.LIGHT) {
+        await setJsonRpcInDesktop(desktopUrl, rpcProviderUrl)
+        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. Error: ${e}`, { variant: 'error' })
+    }
+  }

  if (isLoading) {
    return (
@@ -16,31 +60,36 @@ 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}
-      />
-    </ExpandableList>
+    <>
+      <ExpandableList label="API Settings" defaultOpen>
+        <ExpandableListItemInput
+          label="Bee API"
+          value={apiUrl}
+          onConfirm={setApiUrl}
+          locked={lockedApiSettings || isDesktop}
+        />
+        <ExpandableListItemInput
+          label="Bee Debug API"
+          value={apiDebugUrl}
+          onConfirm={setDebugApiUrl}
+          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>
+      )}
+    </>
  )
 }
@@ -1,15 +1,22 @@
+import { PostageBatchOptions } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import { Form, Formik, FormikHelpers } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+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 } from '../../utils'
+import {
+  calculateStampPrice,
+  convertAmountToSeconds,
+  convertDepthToBytes,
+  secondsToTimeString,
+  waitUntilStampExists,
+} from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'

 interface FormValues {
@@ -66,101 +73,121 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {

    const price = calculateStampPrice(depth, amount)

-    return `${price.toSignificantDigits()} BZZ`
+    return `${price.toSignificantDigits()} xBZZ`
  }

  return (
-    <Formik
-      initialValues={initialFormValues}
-      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
-        try {
-          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
-          if (!values.depth || !values.amount) return
+    <>
+      <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
+            if (!beeDebugApi) return

-          const amount = BigInt(values.amount)
-          const depth = Number.parseInt(values.depth)
-          const options = values.label ? { label: values.label } : undefined
-          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-          actions.resetForm()
-          await refresh()
-          onFinished()
-        } catch (e) {
-          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
-          actions.setSubmitting(false)
-        }
-      }}
-      validate={(values: FormValues) => {
-        const errors: FormErrors = {}
+            const amount = BigInt(values.amount)
+            const depth = Number.parseInt(values.depth)
+            const options: PostageBatchOptions = { waitForUsable: false, label: values.label || undefined }
+            const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+            await waitUntilStampExists(batchId, beeDebugApi)
+            actions.resetForm()
+            await refresh()
+            onFinished()
+          } catch (e) {
+            console.error(e) // eslint-disable-line
+            enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+            actions.setSubmitting(false)
+          }
+        }}
+        validate={(values: FormValues) => {
+          const errors: FormErrors = {}

-        // Depth
-        if (!values.depth) errors.depth = 'Required field'
-        else {
-          const depth = new BigNumber(values.depth)
+          // 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'
-        }
+            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)
+          // 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'
-        }
+            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>
+          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>
-          <Box mb={2}>
-            <SwarmTextInput name="amount" label="Amount" formik />
-            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+            <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>Corresponding TTL (Time to live)</Typography>
+                <Typography>Indicative Price</Typography>
                <Typography>
-                  {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
+                  {!errors.amount && !errors.depth && values.amount && values.depth
+                    ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
+                    : '-'}
                </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>
+            <SwarmButton
+              disabled={isSubmitting || !isValid || !values.amount || !values.depth}
+              onClick={submitForm}
+              iconType={Check}
+              loading={isSubmitting}
+            >
+              Buy New Stamp
+            </SwarmButton>
+          </Form>
+        )}
+      </Formik>
+    </>
  )
 }
@@ -1,7 +1,7 @@
 import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
@@ -24,23 +24,23 @@ const ChequebookDeployFund = (): ReactElement | null => {
      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 xDai network through the{' '}
-          <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
-          xDAI token. You can purchase DAI on the network and bridge it to xDai network through the{' '}
-          <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
-          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          (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.
        </>
      )
      break
    default:
      text = (
        <>
-          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the xDai
-          network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
-          the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
-          transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
-          network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
-          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the Gnosis
+          chain network. 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 <a href="https://www.gnosischain.com">official Gnosis Chain website</a> for more information.
        </>
      )
  }
@@ -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,19 +1,23 @@
 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={
        <Typography>
-          It&apos;s recommended to buy an amount equivalent to 5 to 10 EUR maximum. If you&apos;re not familiar with
+          It is recommended to buy an amount equivalent to 10 EUR maximum. If you&apos;re not familiar with
          cryptocurrencies, you may use{' '}
-          <a href="https://ramp.network/buy/" rel="noreferrer" target="_blank">
-            https://ramp.network/buy/
+          <a
+            href="https://medium.com/ethereum-swarm/upgrading-swarm-deskotp-app-beta-from-an-ultra-light-to-a-light-node-65d52cab7f2c"
+            rel="noreferrer"
+            target="_blank"
+          >
+            this guide
          </a>
          .
        </Typography>
@@ -1,18 +1,18 @@
 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={
        <Typography>
          For security reasons it is recommended to send maximum 5 to 10 xDAI. To get xDAI from DAI you may use{' '}
-          <a href="https://bridge.xdaichain.com/" rel="noreferrer" target="_blank">
-            https://bridge.xdaichain.com/
+          <a href="https://bridge.gnosischain.com" rel="noreferrer" target="_blank">
+            https://bridge.gnosischain.com
          </a>
          .
        </Typography>
@@ -1,7 +1,8 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { ArrowDown, Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -11,15 +12,18 @@ 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 { BeeModes } from '@ethersphere/bee-js'

 export function GiftCardFund(): ReactElement {
-  const { nodeAddresses, balance } = 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)
@@ -30,33 +34,47 @@ export function GiftCardFund(): ReactElement {
  const navigate = useNavigate()

  useEffect(() => {
-    if (!privateKeyString) {
+    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 = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
+    try {
+      await sleepMs(5_000)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
+      await restartBeeNode(desktopUrl)
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      console.error(error) // eslint-disable-line
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+  }
+
  async function onFund() {
-    if (!wallet || !nodeAddresses) {
+    if (!wallet || !nodeAddresses || !rpcProviderUrl) {
      return
    }

    setLoading(true)

    try {
-      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
-      enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
-      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
+      await wallet.transfer(nodeAddresses.ethereum, rpcProviderUrl)
+      enqueueSnackbar('Successfully funded node', { variant: 'success' })
+
+      if (canUpgradeToLightNode) await restart()
    } catch (error) {
-      enqueueSnackbar(`Failed to fund/restart node: ${error}`, { variant: 'error' })
+      console.error(error) // eslint-disable-line
+      enqueueSnackbar(`Failed to fund: ${error}`, { variant: 'error' })
    } finally {
      setLoading(false)
    }
@@ -82,10 +100,10 @@ export function GiftCardFund(): ReactElement {
        <ExpandableListItemKey label="Gift wallet address" value={wallet.address || 'N/A'} />
      </Box>
      <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${wallet.dai.toSignificantDigits(4)} XDAI`} />
+        <ExpandableListItem label="xDAI balance" value={`${wallet.dai.toSignificantDigits(4)} xDAI`} />
      </Box>
      <Box mb={4}>
-        <ExpandableListItem label="BZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} xBZZ`} />
      </Box>
      <Box mb={4}>
        <ArrowDown size={24} color="#aaaaaa" />
@@ -94,13 +112,13 @@ export function GiftCardFund(): ReactElement {
        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses?.ethereum || 'N/A'} expanded />
      </Box>
      <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
      </Box>
      <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
      </Box>
      <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
-        Send all funds to your node
+        {canUpgradeToLightNode ? 'Send all funds to your node and Upgrade' : 'Send all funds to your node'}
      </SwarmButton>
    </>
  )
@@ -2,9 +2,9 @@ import { Box, Typography } from '@material-ui/core'
 import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { ArrowRight } from 'react-feather'
+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,11 +24,13 @@ export function GiftCardTopUpIndex(): ReactElement {
  const navigate = useNavigate()

  async function onProceed() {
+    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')
@@ -36,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,8 +1,11 @@
+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, useState } from 'react'
-import { ArrowDown, Check } from 'react-feather'
+import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
+import ArrowDown from 'remixicon-react/ArrowDownCircleLineIcon'
+import Check from 'remixicon-react/CheckLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -13,35 +16,80 @@ import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
-import { performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'

+const MINIMUM_XDAI = '0.1'
+const MINIMUM_XBZZ = '0.1'
+
 interface Props {
  header: string
 }

+function isPositiveDecimal(value: string): boolean {
+  try {
+    return new BigNumber(value).isPositive()
+  } catch {
+    return false
+  }
+}
+
 export function Swap({ header }: Props): ReactElement {
  const [loading, setLoading] = useState(false)
  const [hasSwapped, setSwapped] = useState(false)
+  const [userInputSwap, setUserInputSwap] = useState<string | null>(null)
+  const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))

-  const { providerUrl } = useContext(TopUpContext)
-  const { balance, nodeAddresses } = useContext(BeeContext)
+  const { rpcProviderUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
+  const { balance } = useContext(BalanceProvider)

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

+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    getBzzPriceAsDai(desktopUrl).then(setPrice).catch(console.error)
+  }, [desktopUrl])
+
  if (!balance || !nodeAddresses) {
    return <Loading />
  }

-  const daiToSwap = balance.dai.minusBaseUnits('1')
+  const optimalSwap = balance.dai.minusBaseUnits('1')
+  const lowAmountSwap = new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2))
+
+  let daiToSwap: DaiToken
+
+  if (userInputSwap && isPositiveDecimal(userInputSwap)) {
+    daiToSwap = DaiToken.fromDecimal(userInputSwap, 18)
+  } else {
+    daiToSwap = lowAmountSwap.toBigNumber.gt(optimalSwap.toBigNumber) ? lowAmountSwap : optimalSwap
+  }

  const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
-  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200))
+  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedBy(100).dividedToIntegerBy(price.toDecimal))
+
+  const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
+    try {
+      await sleepMs(5_000)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
+      await restartBeeNode(desktopUrl)
+
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      console.error(error) // eslint-disable-line
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+  }

  async function onSwap() {
    if (hasSwapped) {
@@ -49,17 +97,17 @@ export function Swap({ header }: Props): ReactElement {
    }
    setLoading(true)
    setSwapped(true)
+
    try {
-      await performSwap(daiToSwap.toString)
-      enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
-      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      await performSwap(desktopUrl, daiToSwap.toString)
+      enqueueSnackbar('Successfully swapped', { variant: 'success' })
+
+      if (canUpgradeToLightNode) await restart()
    } catch (error) {
+      console.error(error) // eslint-disable-line
      enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
    } finally {
+      balance?.refresh()
      setLoading(false)
    }
  }
@@ -71,28 +119,35 @@ export function Swap({ header }: Props): ReactElement {
        <TopUpProgressIndicator index={1} />
      </Box>
      <Box mb={2}>
-        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to BZZ</Typography>
+        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to xBZZ</Typography>
      </Box>
      <Box mb={4}>
        <Typography>
-          You need to swap xDAI to BZZ in order to use Swarm. Make sure to keep at least 1 xDAI in order to pay for
-          transaction costs on the network.
+          You need to swap xDAI to xBZZ in order to use Swarm. Make sure to keep at least {MINIMUM_XDAI} xDAI in order
+          to pay for transaction costs on the network.
        </Typography>
      </Box>
      <SwarmDivider mb={4} />
      <Box mb={4}>
        <Typography>
          Your current balance is {balance.dai.toSignificantDigits(4)} xDAI and {balance.bzz.toSignificantDigits(4)}{' '}
-          BZZ.
+          xBZZ.
        </Typography>
      </Box>
      <Box mb={4}>
        <SwarmTextInput
          label="Amount to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
+          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
          name="x"
-          onChange={() => false}
+          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}
      </Box>
      <Box mb={4}>
        <ArrowDown size={24} color="#aaaaaa" />
@@ -102,24 +157,26 @@ export function Swap({ header }: Props): ReactElement {
      </Box>
      <Box mb={0.25}>
        <ExpandableListItem
-          label="Resulting XDAI balance after swap"
-          value={`${daiAfterSwap.toSignificantDigits(4)} XDAI`}
+          label="Resulting xDAI balance after swap"
+          value={`${daiAfterSwap.toSignificantDigits(4)} xDAI`}
        />
      </Box>
      <Box mb={2}>
        <ExpandableListItem
-          label="Resulting BZZ balance after swap"
-          value={`${bzzAfterSwap.toSignificantDigits(4)} BZZ`}
+          label="Resulting xBZZ balance after swap"
+          value={`${bzzAfterSwap.toSignificantDigits(4)} xBZZ`}
        />
      </Box>
      <ExpandableListItemActions>
        <SwarmButton
          iconType={Check}
          onClick={onSwap}
-          disabled={hasSwapped || loading || balance.dai.toDecimal.lte(1)}
+          disabled={
+            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
+          }
          loading={loading}
        >
-          Swap Now
+          {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}
        </SwarmButton>
      </ExpandableListItemActions>
    </>
@@ -6,5 +6,5 @@ interface Props {
 }

 export function TopUpProgressIndicator({ index }: Props): ReactElement {
-  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap BZZ']} />
+  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap xBZZ']} />
 }
@@ -1,55 +1,122 @@
-import { Box, Grid, Typography } from '@material-ui/core'
-import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement, useContext, useState } from 'react'
+import Check from 'remixicon-react/CheckLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
 import { useNavigate } from 'react-router'
-import ExpandableListItem from '../../components/ExpandableListItem'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+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 { ROUTES } from '../../routes'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
+import { BeeModes } from '@ethersphere/bee-js'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { Loading } from '../../components/Loading'
+import { useSnackbar } from 'notistack'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'

-interface Props {
-  header: string
-  title: string
-  p: ReactElement
-  next: string
-}
+const useStyles = makeStyles(() =>
+  createStyles({
+    checkWrapper: {
+      background: 'rgba(0, 230, 118, 0.25)',
+      borderRadius: 99999,
+      width: '180px',
+      height: '180px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  }),
+)

-export default function Index({ header, title, p, next }: Props): ReactElement {
-  const { nodeAddresses, balance } = useContext(Context)
+const MINIMUM_XDAI = '0.05'
+const MINIMUM_XBZZ = '0.1'
+
+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)
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      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.lte(1)
-
  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 xDAI to the address above in order to proceed.</Typography> : null}
+      <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={1}>
+          <Typography style={{ fontWeight: 'bold' }}>Transfer funds to your Swarm account</Typography>
+        </Box>
+        <Box mb={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>
+        <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 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>
    </>
  )
@@ -15,9 +15,11 @@ import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 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 REFRESH_WHEN_OK = 30_000
+const REFRESH_WHEN_ERROR = 5_000
+const TIMEOUT = 3_000

 export enum CheckState {
  OK = 'OK',
@@ -42,7 +44,6 @@ interface Status {

 interface ContextInterface {
  status: Status
-  balance: WalletAddress | null
  latestPublishedVersion?: string
  latestUserVersion?: string
  latestUserVersionExact?: string
@@ -61,9 +62,9 @@ interface ContextInterface {
  peerCheques: LastChequesResponse | null
  settlements: Settlements | null
  chainState: ChainState | null
+  chainId: number | null
  latestBeeRelease: LatestBeeRelease | null
  isLoading: boolean
-  isRefreshing: boolean
  lastUpdate: number | null
  start: (frequency?: number) => void
  stop: () => void
@@ -80,7 +81,6 @@ const initialValues: ContextInterface = {
    topology: { isEnabled: false, checkState: CheckState.ERROR },
    chequebook: { isEnabled: false, checkState: CheckState.ERROR },
  },
-  balance: null,
  latestPublishedVersion: undefined,
  latestUserVersion: undefined,
  latestUserVersionExact: undefined,
@@ -99,9 +99,9 @@ const initialValues: ContextInterface = {
  peerCheques: null,
  settlements: null,
  chainState: null,
+  chainId: null,
  latestBeeRelease: null,
  isLoading: true,
-  isRefreshing: false,
  lastUpdate: null,
  start: () => {}, // eslint-disable-line
  stop: () => {}, // eslint-disable-line
@@ -183,9 +183,11 @@ function getStatus(
  return status
 }

+// 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
+
 export function Provider({ children }: Props): ReactElement {
  const { beeApi, beeDebugApi } = useContext(SettingsContext)
-  const { provider } = useContext(TopUpContext)
  const [apiHealth, setApiHealth] = useState<boolean>(false)
  const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
  const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
@@ -198,13 +200,12 @@ export function Provider({ children }: Props): ReactElement {
  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 { latestBeeRelease } = useLatestBeeRelease()

  const [error, setError] = useState<Error | null>(initialValues.error)
  const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
-  const [isRefreshing, setIsRefreshing] = useState<boolean>(initialValues.isRefreshing)
  const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
  const [frequency, setFrequency] = useState<number | null>(30000)

@@ -217,7 +218,7 @@ export function Provider({ children }: Props): ReactElement {

    setApiHealth(false)

-    refresh()
+    if (beeApi !== null) refresh()
  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
@@ -235,21 +236,9 @@ export function Provider({ children }: Props): ReactElement {
    setSettlements(null)
    setChainState(null)

-    refresh()
+    if (beeDebugApi !== null) refresh()
  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps

-  useEffect(() => {
-    if (nodeAddresses?.ethereum) {
-      WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
-    }
-  }, [nodeAddresses, provider])
-
-  useEffect(() => {
-    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
-
-    return () => clearInterval(interval)
-  }, [walletAddress])
-
  const refresh = async () => {
    // Don't want to refresh when already refreshing
    if (isRefreshing) return
@@ -262,12 +251,12 @@ export function Provider({ children }: Props): ReactElement {
    }

    try {
-      setIsRefreshing(true)
+      isRefreshing = true
      setError(null)

      // 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 beeDebugApi.getChequebookBalance({ timeout: TIMEOUT })

        return {
          totalBalance: new Token(totalBalance),
@@ -277,14 +266,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 beeDebugApi.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 beeDebugApi.getAllSettlements({ timeout: TIMEOUT })

        return {
          totalReceived: new Token(totalReceived),
@@ -300,58 +289,64 @@ export function Provider({ children }: Props): ReactElement {
      const promises = [
        // API health
        beeApi
-          .isConnected()
+          .isConnected({ timeout: TIMEOUT })
          .then(setApiHealth)
          .catch(() => setApiHealth(false)),

        // Debug API health
        beeDebugApi
-          .getHealth()
+          .getHealth({ timeout: TIMEOUT })
          .then(setDebugApiHealth)
          .catch(() => setDebugApiHealth(null)),

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

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

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

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

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

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

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

+        // Wallet
+        beeDebugApi
+          .getWalletBalance({ timeout: TIMEOUT })
+          .then(({ chainID }) => setChainId(chainID))
+          .catch(() => setChainId(null)),
+
        // Chequebook balance
        chequeBalanceWrapper()
          .then(setChequebookBalance)
@@ -371,20 +366,40 @@ export function Provider({ children }: Props): ReactElement {
      await Promise.allSettled(promises)
    } catch (e) {
      setError(e as Error)
-    } finally {
-      setIsLoading(false)
-      setIsRefreshing(false)
-      setLastUpdate(Date.now())
    }
+
+    setIsLoading(false)
+    isRefreshing = false
+    setLastUpdate(Date.now())
  }

-  const start = (freq = 30000) => setFrequency(freq)
+  const start = (freq = REFRESH_WHEN_OK) => {
+    refresh()
+    setFrequency(freq)
+  }
  const stop = () => setFrequency(null)

+  const status = getStatus(
+    debugApiHealth,
+    nodeAddresses,
+    nodeInfo,
+    apiHealth,
+    topology,
+    chequebookAddress,
+    chequebookBalance,
+    error,
+  )
+
+  useEffect(() => {
+    let newFrequency = REFRESH_WHEN_OK
+
+    if (status.all !== 'OK') newFrequency = REFRESH_WHEN_ERROR
+
+    if (newFrequency !== frequency) setFrequency(newFrequency)
+  }, [status.all, frequency])
+
  // Start the update loop
  useEffect(() => {
-    refresh()
-
    // Start autorefresh only if the frequency is set
    if (frequency) {
      const interval = setInterval(refresh, frequency)
@@ -396,17 +411,7 @@ export function Provider({ children }: Props): ReactElement {
  return (
    <Context.Provider
      value={{
-        status: getStatus(
-          debugApiHealth,
-          nodeAddresses,
-          nodeInfo,
-          apiHealth,
-          topology,
-          chequebookAddress,
-          chequebookBalance,
-          error,
-        ),
-        balance: walletAddress,
+        status,
        latestUserVersion,
        latestUserVersionExact,
        latestPublishedVersion,
@@ -431,9 +436,9 @@ export function Provider({ children }: Props): ReactElement {
        peerCheques,
        settlements,
        chainState,
+        chainId,
        latestBeeRelease,
        isLoading,
-        isRefreshing,
        lastUpdate,
        start,
        stop,
@@ -1,32 +1,51 @@
 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 { providers } from 'ethers'
+import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react'
+import { useGetBeeConfig } from '../hooks/apiHooks'
+import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
+
+const LocalStorageKeys = {
+  providerUrl: 'json-rpc-provider',
+}

 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
+  cors: string | null
+  dataDir: string | null
+  ensResolver: string | null
+  setApiUrl: (url: string) => void
+  setDebugApiUrl: (url: string) => void
+  setAndPersistJsonRpcProvider: (url: string) => void
  isLoading: boolean
  error: Error | null
 }

 const initialValues: ContextInterface = {
-  apiUrl: config.BEE_API_HOST,
-  apiDebugUrl: config.BEE_DEBUG_API_HOST,
  beeApi: null,
  beeDebugApi: null,
+  apiUrl: DEFAULT_BEE_API_HOST,
+  apiDebugUrl: DEFAULT_BEE_DEBUG_API_HOST,
  setApiUrl: () => {}, // eslint-disable-line
  setDebugApiUrl: () => {}, // eslint-disable-line
  lockedApiSettings: false,
+  isDesktop: false,
  desktopApiKey: '',
-  config: null,
+  desktopUrl: window.location.origin,
+  setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
+  rpcProviderUrl: '',
+  rpcProvider: new providers.JsonRpcProvider(''),
+  cors: null,
+  dataDir: null,
+  ensResolver: null,
  isLoading: true,
  error: null,
 }
@@ -34,37 +53,43 @@ 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,
+  )
+  const debugUrl = makeHttpUrl(
+    config?.['debug-api-addr'] ??
+      sessionStorage.getItem('debug_api_host') ??
+      propsSettings.beeDebugApiUrl ??
+      apiDebugUrl,
+  )

  useEffect(() => {
    const urlSearchParams = new URLSearchParams(window.location.search)
@@ -104,9 +129,16 @@ export function Provider({
        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 +147,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))
+  }
+}
@@ -65,7 +65,7 @@ export function Provider({ children }: Props): ReactElement {
      setIsLoading(true)
      const stamps = await beeDebugApi.getAllPostageBatch()

-      setStamps(stamps.map(enrichStamp))
+      setStamps(stamps.filter(x => x.exists).map(enrichStamp))
      setLastUpdate(Date.now())
    } catch (e) {
      setError(e as Error)
@@ -1,27 +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
-  provider: providers.JsonRpcProvider
  giftWallets: Wallet[]
-  setProviderUrl: (providerUrl: string) => void
  addGiftWallet: (wallet: Wallet) => void
 }

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

@@ -33,25 +26,18 @@ interface Props {
 }

 export function Provider({ children }: Props): ReactElement {
-  const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl)
-  const [provider, setProvider] = useState(new providers.JsonRpcProvider(providerUrl))
  const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
+  const { rpcProvider } = useContext(SettingsContext)

  useEffect(() => {
+    if (rpcProvider === null) return
+
    const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)

    if (existingGiftWallets) {
-      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
+      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, rpcProvider)))
    }
-  }, [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)
-  }
+  }, [rpcProvider])

  function addGiftWallet(wallet: Wallet) {
    const newArray = [...giftWallets, wallet]
@@ -62,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,4 +1,4 @@
-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'
@@ -14,9 +14,7 @@ import { UploadLander } from './pages/files/UploadLander'
 import GiftCards from './pages/gift-code'
 import Info from './pages/info'
 import LightModeRestart from './pages/restart/LightModeRestart'
-import Restart from './pages/restart/Restart'
-import Wallet from './pages/rpc'
-import Confirmation from './pages/rpc/Confirmation'
+import TopUp from './pages/top-up'
 import Settings from './pages/settings'
 import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
 import Status from './pages/status'
@@ -25,6 +23,7 @@ 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'

 export enum ROUTES {
  INFO = '/',
@@ -35,15 +34,13 @@ export enum ROUTES {
  HASH = '/files/hash/:hash',
  SETTINGS = '/settings',
  STATUS = '/status',
-  WALLET = '/wallet',
-  CONFIRMATION = '/wallet/confirmation',
-  TOP_UP_CRYPTO = '/top-up/crypto',
-  TOP_UP_CRYPTO_SWAP = '/top-up/crypto/swap',
-  TOP_UP_BANK_CARD = '/top-up/bank-card',
-  TOP_UP_BANK_CARD_SWAP = '/top-up/bank-card/swap',
-  TOP_UP_GIFT_CODE = '/top-up/gift-code',
-  TOP_UP_GIFT_CODE_FUND = '/top-up/gift-code/fund/:privateKeyString',
-  RESTART = '/restart',
+  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',
+  TOP_UP_BANK_CARD_SWAP = '/account/wallet/top-up/bank-card/swap',
+  TOP_UP_GIFT_CODE = '/account/wallet/top-up/gift-code',
+  TOP_UP_GIFT_CODE_FUND = '/account/wallet/top-up/gift-code/fund/:privateKeyString',
  RESTART_LIGHT = '/light-mode-restart',
  ACCOUNT_WALLET = '/account/wallet',
  ACCOUNT_CHEQUEBOOK = '/account/chequebook',
@@ -63,35 +60,37 @@ export const ACCOUNT_TABS = [
  ROUTES.ACCOUNT_FEEDS,
 ]

-const BaseRouter = (): ReactElement => (
-  <Routes>
-    <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
-    <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
-    <Route path={ROUTES.DOWNLOAD} element={<Download />} />
-    <Route path={ROUTES.HASH} element={<Share />} />
-    <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_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 />} />
-    <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
-    <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
-    <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
-    <Route path={ROUTES.RESTART} element={<Restart />} />
-    <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
-    <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_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 />} />
-  </Routes>
-)
+const BaseRouter = (): ReactElement => {
+  const { isDesktop } = useContext(SettingsContext)
+
+  return (
+    <Routes>
+      <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
+      <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
+      <Route path={ROUTES.DOWNLOAD} element={<Download />} />
+      <Route path={ROUTES.HASH} element={<Share />} />
+      <Route path={ROUTES.SETTINGS} element={<Settings />} />
+      <Route path={ROUTES.STATUS} element={<Status />} />
+      <Route path={ROUTES.INFO} element={<Info />} />
+      <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 />} />
+      <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
+      <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
+      <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
+      <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
+      <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_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 />} />
+      {isDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
+    </Routes>
+  )
+}

 export default BaseRouter
@@ -0,0 +1,45 @@
+export const BZZ_TOKEN_ADDRESS = '0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da'
+export const bzzABI = [
+  {
+    type: 'function',
+    stateMutability: 'view',
+    payable: false,
+    outputs: [
+      {
+        type: 'uint256',
+        name: '',
+      },
+    ],
+    name: 'balanceOf',
+    inputs: [
+      {
+        type: 'address',
+        name: '_owner',
+      },
+    ],
+    constant: true,
+  },
+  {
+    type: 'function',
+    stateMutability: 'nonpayable',
+    payable: false,
+    outputs: [
+      {
+        type: 'bool',
+        name: '',
+      },
+    ],
+    name: 'transfer',
+    inputs: [
+      {
+        type: 'address',
+        name: '_to',
+      },
+      {
+        type: 'uint256',
+        name: '_value',
+      },
+    ],
+    constant: false,
+  },
+]
@@ -1,25 +0,0 @@
-export const bzzContractInterface = [
-  {
-    type: 'function',
-    stateMutability: 'nonpayable',
-    payable: false,
-    outputs: [
-      {
-        type: 'bool',
-        name: '',
-      },
-    ],
-    name: 'transfer',
-    inputs: [
-      {
-        type: 'address',
-        name: '_to',
-      },
-      {
-        type: 'uint256',
-        name: '_value',
-      },
-    ],
-    constant: false,
-  },
-]
@@ -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,69 +1,46 @@
 import axios from 'axios'
-import { getJson, postJson, sendRequest } from './net'
+import { DaiToken } from '../models/DaiToken'
+import { Token } from '../models/Token'
+import { postJson } from './net'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'

-interface DesktopStatus {
-  status: 0 | 1 | 2
-  address: string | null
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  config: Record<string, any>
+export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
+  const response = await axios.get(`${desktopUrl}/price`)
+
+  return DaiToken.fromDecimal(response.data, 18)
 }

-export async function getDesktopStatus(): Promise<DesktopStatus> {
-  const response = await getJson(`${getDesktopHost()}/status`)
-
-  return response as DesktopStatus
-}
-
-export async function getGasFromFaucet(address: string): Promise<void> {
-  await axios.post(`http://getxdai.co/${address}/0.1`)
-}
-
-export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
-  await updateDesktopConfiguration({
-    'chain-enable': true,
+export async function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<void> {
+  await updateDesktopConfiguration(desktopUrl, {
    'swap-enable': true,
    'swap-endpoint': rpcProvider,
  })
 }

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

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

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

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

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

-export async function getBeeDesktopLogs(): Promise<string> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee-desktop`, 'GET')
+export async function getLatestBeeDesktopVersion(): Promise<string> {
+  const response = await (await fetch(BEE_DESKTOP_LATEST_RELEASE_PAGE_API)).json()

-  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
-}
-
-function getDesktopHost(): string {
-  if (process.env.REACT_APP_BEE_DESKTOP_URL) {
-    return process.env.REACT_APP_BEE_DESKTOP_URL
-  }
-
-  return `http://${window.location.host}`
+  return response.tag_name.replace('v', '') // We get for example "v0.12.1"
 }
@@ -18,15 +18,26 @@ export function detectIndexHtml(files: FilePath[]): DetectedIndex | false {
    return { indexPath: exactMatch }
  }

-  const prefix = paths[0].split('/')[0] + '/'
+  const sortedPaths = paths.sort((a, b) => a.localeCompare(b))
+  const firstSegments = sortedPaths[0].split('/')
+  const lastSegments = sortedPaths[sortedPaths.length - 1].split('/')
+  let matchingSegments = 0

-  const allStartWithSamePrefix = paths.every(x => x.startsWith(prefix))
+  for (; matchingSegments < firstSegments.length; matchingSegments++) {
+    if (firstSegments[matchingSegments] !== lastSegments[matchingSegments]) {
+      break
+    }
+  }
+
+  const commonPrefix = firstSegments.slice(0, matchingSegments).join('/') + '/'
+
+  const allStartWithSamePrefix = paths.every(x => x.startsWith(commonPrefix))

  if (allStartWithSamePrefix) {
-    const match = paths.find(x => indexHtmls.map(y => prefix + y).includes(x))
+    const match = paths.find(x => indexHtmls.map(y => commonPrefix + y).includes(x))

    if (match) {
-      return { indexPath: match, commonPrefix: prefix }
+      return { indexPath: match, commonPrefix }
    }
  }

@@ -88,7 +99,11 @@ export function getPath(file: FilePath): string {
 * Utility function that is needed to have correct directory structure as webkitRelativePath is read only
 */
 export function packageFile(file: FilePath, pathOverwrite?: string): FilePath {
-  const path = pathOverwrite || getPath(file)
+  let path = pathOverwrite || getPath(file)
+
+  if (!path.startsWith('/') && path.includes('/')) {
+    path = `/${path}`
+  }

  return {
    path: path,
@@ -88,7 +88,7 @@ export async function updateFeed(
  const wallet = await getWalletFromIdentity(identity, password)

  if (!identity.feedHash) {
-    identity.feedHash = await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.address)
+    identity.feedHash = (await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.address)).reference
  }

  const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.privateKey)
@@ -1,8 +1,8 @@
-import { BigNumber } from 'bignumber.js'
-import { Token } from '../models/Token'
-import { decodeCid } from '@ethersphere/swarm-cid'
-import { BZZ_LINK_DOMAIN } from '../constants'
 import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
+import { decodeCid } from '@ethersphere/swarm-cid'
+import { BigNumber } from 'bignumber.js'
+import { BZZ_LINK_DOMAIN } from '../constants'
+import { Token } from '../models/Token'

 /**
 * Test if value is an integer
@@ -229,16 +229,25 @@ export function shortenText(text: string, length = 20, separator = '[…]'): str
 }

 const DEFAULT_POLLING_FREQUENCY = 1_000
-const DEFAULT_STAMP_USABLE_TIMEOUT = 120_000
+const DEFAULT_STAMP_USABLE_TIMEOUT = 240_000

 interface Options {
  pollingFrequency?: number
  timeout?: number
 }

-export async function waitUntilStampUsable(
+export function waitUntilStampUsable(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+  return waitForStamp(batchId, beeDebug, 'usable', options)
+}
+
+export function waitUntilStampExists(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+  return waitForStamp(batchId, beeDebug, 'exists', options)
+}
+
+async function waitForStamp(
  batchId: BatchId,
  beeDebug: BeeDebug,
+  field: 'exists' | 'usable',
  options?: Options,
 ): Promise<PostageBatch> {
  const timeout = options?.timeout || DEFAULT_STAMP_USABLE_TIMEOUT
@@ -247,7 +256,7 @@ export async function waitUntilStampUsable(
  for (let i = 0; i < timeout; i += pollingFrequency) {
    const stamp = await beeDebug.getPostageBatch(batchId)

-    if (stamp.usable) return stamp
+    if (stamp[field]) return stamp
    await sleepMs(pollingFrequency)
  }

@@ -6,8 +6,8 @@ export function getJson<T extends Record<string, any>>(url: string): Promise<T>
  return sendRequest(url, 'GET') as Promise<T>
 }

-export function postJson(url: string, data?: Record<string, any>): Promise<Record<string, unknown>> {
-  return sendRequest(url, 'POST', data)
+export function postJson<T extends Record<string, any>>(url: string, data?: T): Promise<T> {
+  return sendRequest(url, 'POST', data) as Promise<T>
 }

 export async function sendRequest(
@@ -1,6 +1,6 @@
 import { debounce } from '@material-ui/core'
-import { Contract, providers, Wallet } from 'ethers'
-import { bzzContractInterface } from './bzz-contract-interface'
+import { Contract, providers, Wallet, BigNumber as BN } from 'ethers'
+import { bzzABI, BZZ_TOKEN_ADDRESS } from './bzz-abi'

 async function eth_getBalance(address: string, provider: providers.JsonRpcProvider): Promise<string> {
  if (!address.startsWith('0x')) {
@@ -17,36 +17,15 @@ async function eth_getBlockByNumber(provider: providers.JsonRpcProvider): Promis
  return blockNumber.toString()
 }

-const partialERC20tokenABI = [
-  {
-    constant: true,
-    inputs: [
-      {
-        name: '_owner',
-        type: 'address',
-      },
-    ],
-    name: 'balanceOf',
-    outputs: [
-      {
-        name: 'balance',
-        type: 'uint256',
-      },
-    ],
-    payable: false,
-    type: 'function',
-  },
-]
-
 async function eth_getBalanceERC20(
  address: string,
  provider: providers.JsonRpcProvider,
-  tokenAddress = '0xdbf3ea6f5bee45c02255b2c26a16f300502f68da',
+  tokenAddress = BZZ_TOKEN_ADDRESS,
 ): Promise<string> {
  if (!address.startsWith('0x')) {
    address = `0x${address}`
  }
-  const contract = new Contract(tokenAddress, partialERC20tokenABI, provider)
+  const contract = new Contract(tokenAddress, bzzABI, provider)
  const balance = await contract.balanceOf(address)

  return balance.toString()
@@ -57,14 +36,26 @@ interface TransferResponse {
  receipt: providers.TransactionReceipt
 }

+export async function estimateNativeTransferTransactionCost(
+  privateKey: string,
+  jsonRpcProvider: string,
+): Promise<{ gasPrice: BN; totalCost: BN }> {
+  const signer = await makeReadySigner(privateKey, jsonRpcProvider)
+  const gasLimit = '21000'
+  const gasPrice = await signer.getGasPrice()
+
+  return { gasPrice, totalCost: gasPrice.mul(gasLimit) }
+}
+
 export async function sendNativeTransaction(
  privateKey: string,
  to: string,
  value: string,
  jsonRpcProvider: string,
+  externalGasPrice?: BN,
 ): Promise<TransferResponse> {
  const signer = await makeReadySigner(privateKey, jsonRpcProvider)
-  const gasPrice = await signer.getGasPrice()
+  const gasPrice = externalGasPrice ?? (await signer.getGasPrice())
  const transaction = await signer.sendTransaction({ to, value, gasPrice })
  const receipt = await transaction.wait(1)

@@ -79,7 +70,7 @@ export async function sendBzzTransaction(
 ): Promise<TransferResponse> {
  const signer = await makeReadySigner(privateKey, jsonRpcProvider)
  const gasPrice = await signer.getGasPrice()
-  const bzz = new Contract('0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da', bzzContractInterface, signer)
+  const bzz = new Contract(BZZ_TOKEN_ADDRESS, bzzABI, signer)
  const transaction = await bzz.transfer(to, value, { gasPrice })
  const receipt = await transaction.wait(1)

@@ -1,46 +0,0 @@
-import { config } from '../config'
-import * as Sentry from '@sentry/react'
-import packageJson from '../../package.json'
-import { BrowserTracing } from '@sentry/tracing'
-import { getBeeDesktopLogs, getBeeLogs } from './desktop'
-
-export async function initSentry(): Promise<void> {
-  let tunnelAvailable
-
-  try {
-    const result = await fetch(`${config.BEE_DESKTOP_URL}/sentry`, { method: 'OPTIONS' })
-
-    if (result.status === 204) {
-      tunnelAvailable = true
-    }
-  } catch (e) {
-    // There was an error, so tunnel is not available
-    tunnelAvailable = false
-  }
-
-  Sentry.init({
-    dsn: config.SENTRY_KEY,
-    release: packageJson.version,
-    environment: config.SENTRY_ENVIRONMENT,
-    tunnel: tunnelAvailable ? `${config.BEE_DESKTOP_URL}/sentry` : undefined,
-    integrations: [new BrowserTracing({ tracingOrigins: ['localhost'] })],
-    tracesSampleRate: 0.3,
-    beforeSend: async (event, hint) => {
-      hint.attachments = []
-
-      try {
-        // This will fail if we are not running in Bee Desktop, but that is alright
-        hint.attachments.push({ filename: 'bee-desktop.log', data: await getBeeDesktopLogs() })
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-
-      try {
-        // This will fail if we are not running in Bee Desktop, but that is alright
-        hint.attachments.push({ filename: 'bee.log', data: await getBeeLogs() })
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-
-      return event
-    },
-  })
-}
@@ -1,8 +1,7 @@
 import { providers, Wallet } from 'ethers'
-import { sleepMs } from '.'
 import { BzzToken } from '../models/BzzToken'
 import { DaiToken } from '../models/DaiToken'
-import { Rpc } from './rpc'
+import { estimateNativeTransferTransactionCost, Rpc } from './rpc'

 export class WalletAddress {
  private constructor(
@@ -59,20 +58,22 @@ export class ResolvedWallet {
  }

  public async transfer(destination: string, jsonRpcProvider: string): Promise<void> {
-    const DUMMY_GAS_PRICE = '300000000000000'
-
-    if (this.bzz.toDecimal.gt(0.1)) {
+    if (this.bzz.toDecimal.gt(0.05)) {
      await Rpc.sendBzzTransaction(this.privateKey, destination, this.bzz.toString, jsonRpcProvider)
-      await sleepMs(5_000)
+      await this.refresh()
    }

-    if (this.dai.toBigNumber.gt(DUMMY_GAS_PRICE)) {
+    const { gasPrice, totalCost } = await estimateNativeTransferTransactionCost(this.privateKey, jsonRpcProvider)
+
+    if (this.dai.toBigNumber.gt(totalCost.toString())) {
      await Rpc.sendNativeTransaction(
        this.privateKey,
        destination,
-        this.dai.toBigNumber.minus(DUMMY_GAS_PRICE).toString(),
+        this.dai.toBigNumber.minus(totalCost.toString()).toString(),
        jsonRpcProvider,
+        gasPrice,
      )
+      await this.refresh()
    }
  }
 }
@@ -0,0 +1,40 @@
+6857a7050f3b698675d85a6d019305b6090f95f0
+fcf895e4df26acdce571c2333bbd0730ef29f891
+68dc5591812e60b17dde51615ed0881ea5fcfd9f
+7adb999f68d64fe05b5274eee058521aa23b2aef
+becc4e5197099bdf152f1bf3bf9d1bb50e007a0c
+3c5ba0f875ff345ee48a269d7b53eeda12fd5601
+4dc6123048234084c599959142cf415172450715
+864c785d0ddf4e24924de4ac165bd4e74c7e36b3
+85df5c1f7994dfdc171db8ee17f6144ca18c0009
+9bbc1aa874ec49a9ac933faf4b05ab33b132bfbc
+0269aa60a6c456b9206e3b04c174603f869d2f14
+60f7b18bfa0f07c210e91d385d92e19140aeb51d
+21daec4b7ad73922169d8efddd0e0174fb90d013
+ed3d75ae2c0d5295841b5f96d278222cb4abc0f2
+10b8898cfaf7208884ea7c042cc456fc92c9b819
+38f2cdd53aa2d46423c7d9ee3f55ecdb3d69044d
+b3f3265c9d97e80260bb4a9c9b17c4a5bcf643a9
+545bc39d80151cb23d0c98ce618f0a4adc120ac5
+b4de4b6a2437e99534384cf6810feb500ee478f6
+a0d37a09c84ca3b58a493dd27ba36f43e8ee4fad
+2bd0ec3f8a3852fb960160dad51e5b4078426944
+57c8e004de3cff1974ff285677a3a386bd38a317
+bb6f33f3f12cfdc68ff2bb9f91406d40cee3c807
+a0e2045d7b3f5a84c2fc0262b37cba5b93d66bd0
+6456741eac9cdae9ced1cc2ce7d4972a3329bd39
+d8a7a7875ce0b15d1e1a50e705c3118280363ec0
+64c723249a47c0ff663000a762d95fb58f13fdea
+0327e8529be0d96f86c841cc7839e15dca15d2bd
+edcb3f24ba8c74359660bf2c488df0ed414072d6
+d654a02bf4271e9633548a6777c1788a98eded87
+bc6fa2c3c155a940262386571081420402b1b923
+338d8167dd48f810aa9573bb53d2bf632331f989
+81176b5e809c1b29aaf717cd3b43ee871c8f21c1
+6853345f0d4fd39365c4d9de58d258779e89eb7c
+b68aa42ba7a343eedd595ee197c6381457162b63
+ecebaf8124aa6caff3542c25d80ed7cf5f64584f
+501804d75a17f77799e09834101626c1c681237a
+ebba852da0af9fab804a79c592c2bdfed286c26b
+5ddabc3dcc3ab672e7b0a01f4afad5239109eba0
+6e89b48babada48b6e6e3dafb6c280b6089ba841
@@ -0,0 +1,40 @@
+89d0aa0693f8fa7fd56ea9821a20576b8dc0b70c
+233f235852c31d31d25c41a95d276457d75c5d2c
+4a6dbff20f95a99676b0423c945e532c1d27ce10
+e83f5f472255e5e47a94bec9ddc5a0b10787230f
+eb8f5d96cc60019a328a6fd70230d68e41ec5f8f
+95d3b8187e99d5eb9fb4110602ed0986cdcf7e9c
+2f57c850d44481baf3c91aac9a6aa17a6f870368
+4af29bd9177509376e20e79f3a4ff41475e89ce1
+b0424b5cc80fa80d7eb59faca0538bea7d4028ac
+242bc01b9b54a13e0f60259deb66a4ccf428a679
+34e3ca767691317ae7d021967f0576bd4eb0baa2
+0bf5c07d4e807ca46c5fb4334381bc77163c1f9d
+df4d25cb88c7177b2afddc1c652753a2b78ff7b9
+b82c0ba16886648e7f21d0b9b24b33080574671f
+92456c3bbffd461845f6600cf4357df7968b88e0
+ddbf58f422d7c3dfb0a5fb4ded9cd9d9e99da4be
+41c531777fd80868dffcff554de1d77b44dfab7e
+02540a73ce034777a18fe9ed9c76855f6fdbfb63
+0e6707e80215d5871203a1ca3048915eebec653b
+a00398936467504d5b3ea8bb59ab0d1259ca83bd
+1fb82cbec72739f7e366c9c4ca4ba75a3ffb20fe
+2335340c6ceeb6b7e5f91d659ba5aa1c0b47892d
+287b993cd5480a2267f7dbbb11f69777f6742b1e
+9462fa394fac136bed96b6274f999afd0256ce82
+33b3404926bb97848ea4f7a5d6f772251da7a608
+bfa50de6375939c17ed4ec29c8e812c4e9be60ce
+b2a9542b7bb6674f4aab36c30b16ff54c222bef1
+40746c1c87e7ea175df5f1680a0eceda0239868b
+73d56b02bfe537480cbfe59fde9ec859ed7fcd56
+33f8ceb9133e50a67d8fbab76c7f986ee8593ee7
+a520751396cfeadc99ea708e270080ad6170d5ea
+3ac084cb847b17b753142900a99fcd1f441084ab
+1a16765601210a635baad6aadaf6c9f1f2304d92
+0e7ac2503779b3969e1a153ac06a9271b5af9a4d
+c053d311c71f4461e2d56a7cf799b4841977b623
+b63bef742d705306e32e726738257b83bcd92ddb
+854e6e1731ccfc22327a6c5bd7ce78e394ef0325
+15f7b431a7d48391a71b79ca0e1b567eb7ff5f5c
+585e99c7cedfac1190ae449e5546a7da2fe0ff49
+0aae3e5db6057a2796c59bdefcd6ae44b880e5ce
@@ -0,0 +1,40 @@
+fafe57711ee6f0fe89ea64ab7e5b6f9a34eebc1a
+3f3a2a728f45e00a17ee7255b1f4fc4d9adc83c0
+815051cf4ac9235a0df2806bf2eabc668fa29a01
+cdac5f6018279816ee7287794239de83dc6312af
+401666cac4f1e34132176ba6565eb84899aa168f
+5f2812e35ca870b9e85b5ac60b47e0d80aa2d905
+ada7f51c064702ac4c1f33d1ced6dd882f2f4971
+e5b8944c6ee08170205a47049626d995bc850151
+cae308ccfc3ddc3c08f1da7bd6348c954c7c7cbe
+73be5df1891a0e6e374936f7f1fd93104033fecb
+60a8b7cb61e058722956e39d28f8b1efe5a0e309
+b2b6d5e138d41738ff9057b74aec1965fc030b30
+29ba55c0334e2fb60599ce99ed35b8adc65c92d6
+1ade4db1e922d6609216902a65fc72535f5570d5
+00749b46dc4d83d3c835ea51c387c2ba9f009ec4
+f5623179b8dd80eeb5dba80e70b304dc2debb585
+8ab93bde7091a75a66be77c20ee929dd37ea41f1
+e8d7ee0b5bb27154a855d95e1af3e4709e1a58f9
+5642d952fa67e0e89f1bc874c0e6593417289e78
+e3b584b47a28b8b664c78f536e76ae9b1d3079bf
+7d7c97d348eae903189c7c0efad090064d3b771e
+ae1502dd53c908bb3658e41f4d4da3dbb11cb772
+f4ef4a02759cb82cf90defab3ac948a65e874ee9
+8c797b38d4594ac2c03d069e853a586d02c6b368
+56f8a1fafd0c073440f71d8eeba3268689d78b98
+dc1a0e8caf5934babf92802f3a753933400b37d9
+da065c57205f39a943e3d0b10001fbf730feb552
+2926b2389769c14d77fc1b0f0ff1faec0a26323f
+7d439a063b726875e81683494affd5517f666649
+4ba360418d2d1d5f003b932747a258494c4301e8
+5d46dbc2f72781502eed0722c609ddd3ad2dcfa2
+7b7d15425d0b7de25e2f27ee5e402e0c22c22038
+e97a4765286e7c83d309676983c78da95754ff83
+8ed57bead42d0d22ebe0fcb322a0aa94ace3bb66
+352c383d10f97d17d4ea6d6ff55be5ec14e5a010
+b5025ec9e14721a9034b6f9f24932734b4fb822a
+a0d946a3a729d91ee0740b9d937ac7686cf7a553
+ef44430604978c460c7e33e56c723e9d2976aff6
+507dfe5656d5a3a139b7c0feb16b323557cb0a17
+6dfa530095471d8af68dda90a25829c3fb01857d
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
bee-worker	4c6d97ce00	chore(master): release 0.18.0 (#408 )	2022-07-04 16:26:33 +02:00
Cafe137	a9a5d76e45	feat: add real price calculation to swap page (#459 )	2022-07-04 15:38:55 +02:00
Cafe137	eb51dbb090	fix: remove expired stamps (#463 ) * fix: increase waitUntilStampUsable timeout * fix: wait for stamp to exist after buying	2022-07-04 15:28:43 +02:00
Adam Uhlíř	d12f86b9fa	fix: show update notifications only on non-auto-updating Swarm Desktops (#460 )	2022-07-01 15:55:12 +02:00
Vojtech Simetka	8c182cafd5	fix: users can now upgrade to light node if they have enough funds (#458 )	2022-06-30 16:43:08 +02:00
Vojtech Simetka	7225c5ca11	feat: transfer everything out of the gift wallet (#456 ) * feat: transfer everything out of the gift wallet * refactor: extract bzz token address into variable	2022-06-29 22:32:16 +02:00
Vojtech Simetka	fb8775d0a7	feat: add postage stamp guide (#455 ) * feat: add postage stamp guide to create new postage stamp * feat: add the docs to the upload page as well	2022-06-28 17:29:46 +02:00
Vojtech Simetka	a3c02dbf8a	fix: use xDAI and xBZZ on Gnosis chain (#454 ) * fix: use xDAI on Gnosis chain * fix: rename BZZ to xBZZ when on Gnosis chain * fix: replace MINIMUM_xDAI with MINIMUM_XDAI * fix: update xdai links to correct gnosis chain urls	2022-06-28 16:29:05 +02:00
Cafe137	26ce0efc0b	fix: sensible deposit and swap (#448 ) * fix: indicate and lower minimum xdai to deposit * fix: take user input on swap page * fix: change minimum_dai to minimum_bzz * fix: token naming convention * refactor: use constants * fix: check for positive decimal	2022-06-28 15:24:33 +02:00
Attila Gazso	56f207d6a6	fix: change topup button ordering (#453 )	2022-06-28 14:45:48 +02:00
Attila Gazso	c54170b185	fix: disable bee update button in desktop mode (#452 )	2022-06-28 14:37:36 +02:00
Vojtech Simetka	f2824b749b	fix: generate gift wallet is disabled if there is not enough funds (#451 )	2022-06-28 13:04:55 +02:00
Adam Uhlíř	ec13357666	build: use commonjs config for webpack (#449 )	2022-06-28 12:28:53 +02:00
Adam Uhlíř	58bea4e7a8	build: use cross-env for windows (#447 )	2022-06-28 11:52:08 +02:00
Adam Uhlíř	d0f9fa776b	ci: remove component build from release (#445 )	2022-06-28 11:05:18 +02:00
Vojtech Simetka	2a5c598ece	feat: reduce the minimal dai amount for the topup (#444 )	2022-06-28 11:01:57 +02:00
Adam Uhlíř	880c3ac33e	build: include component to prepare (#443 )	2022-06-28 10:48:34 +02:00
Attila Gazso	398632001a	fix: check desktop version only once (#441 )	2022-06-24 15:21:59 +02:00
Vojtech Simetka	83aab3be62	feat: ultra-light mode block not supported features that are not available in this mode (#438 )	2022-06-24 14:10:21 +02:00
Vojtech Simetka	2e0eeb7a1b	fix: provider is by default null and account page redirect to provider setup (#437 )	2022-06-24 14:03:37 +02:00
Vojtech Simetka	a756eedc49	fix: add troubleshooting checks (#435 ) * fix: add troubleshooting checks * feat: add node warning state	2022-06-24 14:03:20 +02:00
Vojtech Simetka	4cd580ca7f	fix: bee data auto-refresh (#436 )	2022-06-24 14:03:07 +02:00
Attila Gazso	2221d0e7c8	fix: add guide link to bank card top up (#439 )	2022-06-24 13:52:35 +02:00
Attila Gazso	21df01c924	fix: change wording from deposit to top up wallet (#440 )	2022-06-24 13:52:17 +02:00
Attila Gazso	cfcc859303	feat: add upgrade guide link from medium (#434 ) * feat: add upgrade guide link from medium * chore: fix linter issue	2022-06-23 18:57:29 +02:00
Adam Uhlíř	8f4a4ebaa9	feat: version check and info (#425 )	2022-06-21 15:47:26 +02:00
Vojtech Simetka	d345059048	fix: the topup urls are now under `/account` which fixes highlighting (#424 )	2022-06-21 15:29:14 +02:00
Adam Uhlíř	c601d97ed0	chore: new swarm desktop data dir path (#423 )	2022-06-21 14:39:07 +02:00
Vojtech Simetka	807af122f7	fix: don't display buy new stamp button when already in process of buying one (#422 )	2022-06-21 12:31:28 +02:00
Adam Uhlíř	7c39e2741c	fix: sentry trace only Bee Desktop API (#421 )	2022-06-21 12:15:16 +02:00
Cafe137	f43de77294	fix: display account wallet partially while loading (#420 )	2022-06-21 10:51:51 +02:00
Vojtech Simetka	f238c43307	fix: replace feather icons with remix icons on swarm button (#414 ) * fix: replace feather icons with remix icons on swarm button * fix: remove feather icons package (#415) * fix: remove all feather icons and replace with remix icons * fix: few stray weird icons	2022-06-20 23:37:59 +02:00
Cafe137	aa99e0153e	fix: make deposit go to top up selector page (#419 )	2022-06-20 23:34:52 +02:00
Cafe137	d664400a7e	feat: set title to swarm (#413 )	2022-06-20 16:42:48 +02:00
Vojtech Simetka	b969d8caee	fix: info page card and map error states (#412 )	2022-06-20 16:33:52 +02:00
Vojtech Simetka	5e31c21f49	fix: text in the info page cards (#411 )	2022-06-20 16:17:25 +02:00
Cafe137	8775283508	style: improve design on waiting pages (#410 ) * style: improve design on waiting pages * chore: remove dead Restart page	2022-06-20 15:34:19 +02:00
Vojtech Simetka	ce44ef78f4	feat: refresh frequency changes if the bee is in error state (#409 )	2022-06-20 15:32:23 +02:00
Cafe137	8b3ea5249e	feat: add updated sidebar icons (#407 )	2022-06-20 14:37:39 +02:00