chore(master): release 0.24.0 (#621)

* feat: add stamp dilute and topup

* fix: remove any

* chore: bump bee-js

* chore: remove obsolete workaround

.depcheckrc.json

@@ -14,6 +14,7 @@
     "crypto*",
     "stream*",
     "env-paths",
-    "open"
+    "open",
+    "base64-inline-loader"
   ]
 }

.env.development

@@ -1,7 +1 @@
-PORT=3001
+PORT=3002
-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

.env.production

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

.github/workflows/check.yaml

@@ -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,13 +57,11 @@ jobs:
       - name: Types check
         run: npm run check:types
 
-      - name: Types build
-        run: npm run compile:types
-
       - name: Update supported Bee action
         uses: ethersphere/update-supported-bee-action@v1
         if: github.ref == 'refs/heads/master'
         with:
+          updateEngine: true
           token: ${{ secrets.GHA_PAT_BASIC }}
 
       - name: Build
@@ -77,6 +72,7 @@ jobs:
 
       - name: Create preview
         uses: ethersphere/swarm-actions/pr-preview@v0
+        continue-on-error: true
         with:
           bee-url: https://unlimited.gateway.ethswarm.org
           token: ${{ secrets.GHA_PAT_BASIC }}

.github/workflows/publish_npmjs.yaml

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

.github/workflows/publish_pages.yaml

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

CHANGELOG.md

@@ -1,5 +1,187 @@
 # Changelog
 
+## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
+
+
+### Features
+
+* add stamp dilute and topup ([#619](https://github.com/ethersphere/bee-dashboard/issues/619)) ([055a300](https://github.com/ethersphere/bee-dashboard/commit/055a3002b303df45c7010ef4d365e14b979e9084))
+
+## [0.23.0](https://github.com/ethersphere/bee-dashboard/compare/v0.22.0...v0.23.0) (2023-02-21)
+
+
+### Features
+
+* add staking for full nodes ([#590](https://github.com/ethersphere/bee-dashboard/issues/590)) ([fac72b1](https://github.com/ethersphere/bee-dashboard/commit/fac72b1299353c104231aa038c1bab9df78c1355))
+* upgrade bee-js to 5.2.0 ([#611](https://github.com/ethersphere/bee-dashboard/issues/611)) ([e215c61](https://github.com/ethersphere/bee-dashboard/commit/e215c61ea1619fc388fe8b1904d160b04a1a5c0d))
+
+## [0.22.0](https://github.com/ethersphere/bee-dashboard/compare/v0.21.1...v0.22.0) (2023-01-19)
+
+
+### Features
+
+* add node connecting status ([#603](https://github.com/ethersphere/bee-dashboard/issues/603)) ([90f9f91](https://github.com/ethersphere/bee-dashboard/commit/90f9f91ddbefb47b40c7e567125972b800d81972))
+
+## [0.21.1](https://github.com/ethersphere/bee-dashboard/compare/v0.21.0...v0.21.1) (2022-12-21)
+
+
+### Bug Fixes
+
+* do not require chequebook funding ([#599](https://github.com/ethersphere/bee-dashboard/issues/599)) ([42b7f08](https://github.com/ethersphere/bee-dashboard/commit/42b7f080b00a94f068d2fad4779d02ddcf58e27d))
+
+## [0.21.0](https://github.com/ethersphere/bee-dashboard/compare/v0.20.2...v0.21.0) (2022-12-01)
+
+
+### Features
+
+* add prerequisite checks before swap ([#588](https://github.com/ethersphere/bee-dashboard/issues/588)) ([4e564dd](https://github.com/ethersphere/bee-dashboard/commit/4e564dd5c08b938c95f07818bc60957a7df4f5bb))
+* add starting state to sidebar indicator ([#587](https://github.com/ethersphere/bee-dashboard/issues/587)) ([848e61a](https://github.com/ethersphere/bee-dashboard/commit/848e61a7a0fc9b31cae4f603473b37d467f9e914))
+
+
+### Bug Fixes
+
+* add loading state to info page ([#584](https://github.com/ethersphere/bee-dashboard/issues/584)) ([0246904](https://github.com/ethersphere/bee-dashboard/commit/02469046b05512d6617d8b21ca93b41d6a8a6827))
+* always consider user input when performing swap ([#572](https://github.com/ethersphere/bee-dashboard/issues/572)) ([ec8fdf0](https://github.com/ethersphere/bee-dashboard/commit/ec8fdf0315ed7ee75c7612780c602cba49a2321d))
+* always set rpc to newly provided value in desktop ([#591](https://github.com/ethersphere/bee-dashboard/issues/591)) ([b798fa0](https://github.com/ethersphere/bee-dashboard/commit/b798fa0e68b367fe324ef64507b1405b642da6e0))
+* change status page depending on desktop mode ([#573](https://github.com/ethersphere/bee-dashboard/issues/573)) ([a4b8e7c](https://github.com/ethersphere/bee-dashboard/commit/a4b8e7ca2596028e7c8192c92202c0361610e307))
+* change version mismatch to a warning ([#594](https://github.com/ethersphere/bee-dashboard/issues/594)) ([dc04e26](https://github.com/ethersphere/bee-dashboard/commit/dc04e26db4fe6beb9e76fad79c732794b0b7f77d))
+* fix conditional rendering for blockchain network ([#583](https://github.com/ethersphere/bee-dashboard/issues/583)) ([1ce4a47](https://github.com/ethersphere/bee-dashboard/commit/1ce4a474954a5ba4debee53b40bb66a46fb19ffc))
+* handle auth and server error during swap ([#593](https://github.com/ethersphere/bee-dashboard/issues/593)) ([665ae06](https://github.com/ethersphere/bee-dashboard/commit/665ae063fa49bc94762ea10a9098b57e95327d9c))
+* hide swap in standalone mode ([#582](https://github.com/ethersphere/bee-dashboard/issues/582)) ([9a8520e](https://github.com/ethersphere/bee-dashboard/commit/9a8520eb6fe9f40a77c4230ab79d3731ebdd4b42))
+* refresh after chequebook withdraw deposit ([#576](https://github.com/ethersphere/bee-dashboard/issues/576)) ([6936098](https://github.com/ethersphere/bee-dashboard/commit/693609810d735d1e54691b13ea0e4db33e678a53))
+
+## [0.20.2](https://github.com/ethersphere/bee-dashboard/compare/v0.20.1...v0.20.2) (2022-09-15)
+
+
+### Bug Fixes
+
+* stamp purchasing ([#551](https://github.com/ethersphere/bee-dashboard/issues/551)) ([c0456a3](https://github.com/ethersphere/bee-dashboard/commit/c0456a3bf6d541457b706670b1a757d2b1d70f10))
+
+## [0.20.1](https://github.com/ethersphere/bee-dashboard/compare/v0.20.0...v0.20.1) (2022-09-15)
+
+
+### Bug Fixes
+
+* revert bee env. variable names and add default rpc var ([#545](https://github.com/ethersphere/bee-dashboard/issues/545)) ([5295bd5](https://github.com/ethersphere/bee-dashboard/commit/5295bd5b012962846aa15ff12ca4234f0c8b37f7))
+* rpc endpoint setting ultra-light mode logic ([#547](https://github.com/ethersphere/bee-dashboard/issues/547)) ([e2dd077](https://github.com/ethersphere/bee-dashboard/commit/e2dd077118faf3b6071fc8327e37e317e0174975))
+
+## [0.20.0](https://github.com/ethersphere/bee-dashboard/compare/v0.19.3...v0.20.0) (2022-09-14)
+
+
+### Features
+
+* error reporting callback ([#530](https://github.com/ethersphere/bee-dashboard/issues/530)) ([0c74dae](https://github.com/ethersphere/bee-dashboard/commit/0c74dae4e88916cf54c3c0500b37203b865e48a7))
+
+
+### Bug Fixes
+
+* show update notifications only on non-auto-updating Swarm Desktops ([#543](https://github.com/ethersphere/bee-dashboard/issues/543)) ([528a810](https://github.com/ethersphere/bee-dashboard/commit/528a8106907ef176bcdb68b3386c2f3f9ea98a47))
+
+## [0.19.3](https://github.com/ethersphere/bee-dashboard/compare/v0.19.2...v0.19.3) (2022-08-24)
+
+
+### Bug Fixes
+
+* pass isBeeDesktop from provider to hook ([#525](https://github.com/ethersphere/bee-dashboard/issues/525)) ([677b6de](https://github.com/ethersphere/bee-dashboard/commit/677b6de0f82b02e1487420e3c08fbd19a949f97b))
+
+## [0.19.2](https://github.com/ethersphere/bee-dashboard/compare/v0.19.1...v0.19.2) (2022-08-08)
+
+
+### Bug Fixes
+
+* remove sentry ([#520](https://github.com/ethersphere/bee-dashboard/issues/520)) ([0260df6](https://github.com/ethersphere/bee-dashboard/commit/0260df61de0619202a819b79820cfbef6e3757ae))
+
+## [0.19.1](https://github.com/ethersphere/bee-dashboard/compare/v0.19.0...v0.19.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* compile types when building the library ([#516](https://github.com/ethersphere/bee-dashboard/issues/516)) ([df925b0](https://github.com/ethersphere/bee-dashboard/commit/df925b013bb02a16d308a86050ec8e0e0e361ff7))
+
+## [0.19.0](https://github.com/ethersphere/bee-dashboard/compare/v0.18.2...v0.19.0) (2022-08-03)
+
+
+### Features
+
+* add loading state to wallet balance ([#508](https://github.com/ethersphere/bee-dashboard/issues/508)) ([b9c008f](https://github.com/ethersphere/bee-dashboard/commit/b9c008f019f5bfe005d11f0208e90ca21b274e97))
+* add wallet endpoint and display blockchain name ([#492](https://github.com/ethersphere/bee-dashboard/issues/492)) ([fd11f01](https://github.com/ethersphere/bee-dashboard/commit/fd11f0166d77a89a2b350f16f9254af91441089d))
+* check whether the app runs within bee-desktop is now an environment variable ([#490](https://github.com/ethersphere/bee-dashboard/issues/490)) ([f01477e](https://github.com/ethersphere/bee-dashboard/commit/f01477ea70e6c343461cce6c1bcee3d738c076de))
+* don't display duplicate notifications with snackbar ([#488](https://github.com/ethersphere/bee-dashboard/issues/488)) ([feeca00](https://github.com/ethersphere/bee-dashboard/commit/feeca008acd523f16e7efdde2fa92ec98fde8bc9))
+* log errors to console when showing error notification  ([#489](https://github.com/ethersphere/bee-dashboard/issues/489)) ([6bfe97b](https://github.com/ethersphere/bee-dashboard/commit/6bfe97be5d69adeb13dafad2016d1c76a9d2e67c))
+* make blockchain JSON RPC configurable from settings ([#494](https://github.com/ethersphere/bee-dashboard/issues/494)) ([408b565](https://github.com/ethersphere/bee-dashboard/commit/408b565935a59759af6d3e252ceae6981fb60eb6))
+* pass isBeeDesktop as Bee Dashboard component property ([#510](https://github.com/ethersphere/bee-dashboard/issues/510)) ([4c48657](https://github.com/ethersphere/bee-dashboard/commit/4c48657fca0c22d5d4aaf220ffb278ac67001e1f))
+* reintroduce new bee version notification ([#500](https://github.com/ethersphere/bee-dashboard/issues/500)) ([f53e966](https://github.com/ethersphere/bee-dashboard/commit/f53e9664da8f4d1b6803de09f45a92493957d79d))
+* set default rpc endpoint ([#485](https://github.com/ethersphere/bee-dashboard/issues/485)) ([cba21bb](https://github.com/ethersphere/bee-dashboard/commit/cba21bb2e0e70e0ada01402d44e9ee61a55173cf))
+
+
+### Bug Fixes
+
+* correct website upload path ([#483](https://github.com/ethersphere/bee-dashboard/issues/483)) ([186d035](https://github.com/ethersphere/bee-dashboard/commit/186d0352cfda0408cf7add535d9247a85ce3796d))
+* disable swarm invitation outside of Swarm Desktop ([#497](https://github.com/ethersphere/bee-dashboard/issues/497)) ([f8390d7](https://github.com/ethersphere/bee-dashboard/commit/f8390d7eacc082a7b0a4551a3bc1572e3ce3463e))
+* handle unicode filename and website uploads ([#491](https://github.com/ethersphere/bee-dashboard/issues/491)) ([f82444f](https://github.com/ethersphere/bee-dashboard/commit/f82444f2124cad8bccead01a33cbc9f51d126acf))
+* if the node has error, disable pages that can never load ([#502](https://github.com/ethersphere/bee-dashboard/issues/502)) ([896f6e4](https://github.com/ethersphere/bee-dashboard/commit/896f6e48d988bbc0fe82a63a44bc82b035f30073))
+* new bee version notification is only shown if user bee version is detected ([#512](https://github.com/ethersphere/bee-dashboard/issues/512)) ([1be5cbd](https://github.com/ethersphere/bee-dashboard/commit/1be5cbda6de073f1e569ab92f178d815548a461b))
+
+## [0.18.2](https://github.com/ethersphere/bee-dashboard/compare/v0.18.1...v0.18.2) (2022-07-06)
+
+
+### Bug Fixes
+
+* don't link to latest release ([#477](https://github.com/ethersphere/bee-dashboard/issues/477)) ([498294e](https://github.com/ethersphere/bee-dashboard/commit/498294e227baa52c59adecf9c4cfd205061ddf75))
+* enable desktop update notifications on all platforms ([#476](https://github.com/ethersphere/bee-dashboard/issues/476)) ([33fff93](https://github.com/ethersphere/bee-dashboard/commit/33fff93cac31ec54b02f9c7d0c90c13c8d3763c7))
+
+## [0.18.1](https://github.com/ethersphere/bee-dashboard/compare/v0.18.0...v0.18.1) (2022-07-05)
+
+
+### Bug Fixes
+
+* refresh balance after dai tx ([#470](https://github.com/ethersphere/bee-dashboard/issues/470)) ([477c238](https://github.com/ethersphere/bee-dashboard/commit/477c2385b1d06da499facebf630338eb90ad22e7))
+* refresh dai after spending gas ([#468](https://github.com/ethersphere/bee-dashboard/issues/468)) ([56457eb](https://github.com/ethersphere/bee-dashboard/commit/56457eb9b989ed00c3b87555a43da7024654667d))
+* refresh gift wallet after swap ([#465](https://github.com/ethersphere/bee-dashboard/issues/465)) ([afb8c31](https://github.com/ethersphere/bee-dashboard/commit/afb8c31d9a022033cee14ff9a951f87cb992636f))
+* status checks have timeout ([#471](https://github.com/ethersphere/bee-dashboard/issues/471)) ([acee8c9](https://github.com/ethersphere/bee-dashboard/commit/acee8c9802318deb64d2bd8e701fae15c10d5fcf))
+
+## [0.18.0](https://github.com/ethersphere/bee-dashboard/compare/v0.17.0...v0.18.0) (2022-07-04)
+
+
+### 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)
 
 

README.md

@@ -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.12.0-88c1d236<!-- SUPPORTED_BEE_END -->**.
 Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
 [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 
 ![Status page](/ui_samples/info.png)
 
-| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
+| 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 Desktop is initialized (eq. the splash screen disappear) and:
 
 ```sh
-echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
+REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
+
 npm start
 npm run desktop # This will inject the API key to the Dashboard 
 ```

desktop.mjs

@@ -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}#/`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.17.0",
+  "version": "0.24.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -26,14 +26,11 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^4.1.1",
+    "@ethersphere/bee-js": "^6.2.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",
@@ -46,6 +43,7 @@
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
     "jszip": "^3.7.1",
+    "mantaray-js": "^1.0.3",
     "material-ui-dropzone": "3.5.0",
     "notistack": "1.0.10",
     "opener": "1.5.2",
@@ -53,11 +51,11 @@
     "react": ">= 17.0.2",
     "react-copy-to-clipboard": "5.0.4",
     "react-dom": ">= 17.0.2",
-    "react-feather": "2.0.9",
     "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,19 +123,21 @@
     "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\"",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
     "check:types": "tsc --project tsconfig.lib.json",
-    "update-map-data": "node ./utils/update-map-data.js"
+    "update-map-data": "node ./utils/update-map-data.js",
+    "bee": "npx bee-factory start"
   },
   "files": [
     "lib",
@@ -154,8 +157,8 @@
     ]
   },
   "engines": {
-    "node": ">=12.0.0",
+    "node": ">=14.0.0",
     "npm": ">=6.9.0",
-    "bee": ">=0.6.0"
+    "bee": "1.16.1-8e269c8"
   }
 }

public/index.html

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

src/App.tsx

@@ -1,9 +1,8 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
-import * as Sentry from '@sentry/react'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -13,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) {
+const App = ({
-  // eslint-disable-next-line no-console
+  beeApiUrl,
-  initSentry().catch(e => console.error(e))
+  beeDebugApiUrl,
-}
+  defaultRpcUrl,
-
+  lockedApiSettings,
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
+  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>
+            <BeeProvider isDesktop={isDesktop}>
-              <StampsProvider>
+              <BalanceProvider>
-                <FileProvider>
+                <StampsProvider>
-                  <FeedsProvider>
+                  <FileProvider>
-                    <PlatformProvider>
+                    <FeedsProvider>
-                      <SnackbarProvider>
+                      <PlatformProvider>
-                        <Router>
+                        <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
-                          <>
+                          <Router>
-                            <CssBaseline />
+                            <>
-                            <Dashboard>
+                              <CssBaseline />
-                              <BaseRouter />
+                              <Dashboard errorReporting={errorReporting}>
-                            </Dashboard>
+                                <BaseRouter />
-                          </>
+                              </Dashboard>
-                        </Router>
+                            </>
-                      </SnackbarProvider>
+                          </Router>
-                    </PlatformProvider>
+                        </SnackbarProvider>
-                  </FeedsProvider>
+                      </PlatformProvider>
-                </FileProvider>
+                    </FeedsProvider>
-              </StampsProvider>
+                  </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
 }
 

src/components/Card.tsx

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

src/components/CashoutModal.tsx

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

src/components/ClipboardCopy.tsx

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

src/components/ErrorBoundary.tsx

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

src/components/EthereumAddress.tsx

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

src/components/ExpandableListItem.tsx

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

src/components/ExpandableListItemInput.tsx

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

src/components/ExpandableListItemKey.tsx

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

src/components/Feedback.tsx

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

src/components/Map.tsx

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

src/components/SideBar.tsx

@@ -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'
+import { BeeModes } from '@ethersphere/bee-js'
-
+import { BEE_DOCS_HOST } from '../constants'
-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,
-  },
-]
 
 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 { isDesktop } = useContext(SettingsContext)
-  const { isBeeDesktop } = useIsBeeDesktop()
+  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
+            {navBarItems.map(p => (
-              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
+              <Link to={p.path} key={p.path} className={classes.link}>
-              .map(p => (
+                <SideBarItem
-                <Link to={p.path} key={p.path} className={classes.link}>
+                  key={p.path}
-                  <SideBarItem
+                  iconStart={<p.icon className={classes.icon} />}
-                    key={p.path}
+                  path={p.path}
-                    iconStart={<p.icon className={classes.icon} />}
+                  pathMatcherSubstring={p.pathMatcherSubstring}
-                    path={p.path}
+                  label={p.label}
-                    pathMatcherSubstring={p.pathMatcherSubstring}
+                />
-                    label={p.label}
+              </Link>
-                  />
+            ))}
-                </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} />}
+                iconStart={<DocsIcon className={classes.icon} />}
-                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                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>

src/components/SideBarStatus.tsx

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

src/components/StampExtensionModal.tsx

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

src/components/StatusIcon.tsx

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

src/components/SwarmButton.tsx

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

src/components/SwarmSelect.tsx

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

src/components/SwarmTextInput.tsx

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

src/components/TroubleshootConnectionCard.tsx

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

src/components/Waiting.tsx

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

src/components/WithdrawDepositModal.tsx

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

src/config.ts

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

src/constants.ts

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

src/containers/DepositModal.tsx

@@ -1,25 +1,29 @@
-import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
-import { Context as SettingsContext } from '../providers/Settings'
-
-import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { BigNumber } from 'bignumber.js'
+import { ReactElement, useContext } from 'react'
+import Download from 'remixicon-react/DownloadLineIcon'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 
 export default function DepositModal(): ReactElement {
   const { beeDebugApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
 
   return (
     <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)}
-      action={(amount: bigint) => {
+      action={async (amount: bigint) => {
         if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
 
-        return beeDebugApi.depositTokens(amount.toString())
+        const transactionHash = await beeDebugApi.depositTokens(amount.toString())
+        refresh()
+
+        return transactionHash
       }}
     />
   )

src/containers/StakeModal.tsx

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

src/containers/WithdrawModal.tsx

@@ -1,24 +1,29 @@
 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 BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
   const { beeDebugApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
 
   return (
     <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)}
-      action={(amount: bigint) => {
+      action={async (amount: bigint) => {
         if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
 
-        return beeDebugApi.withdrawTokens(amount.toString())
+        const transactionHash = await beeDebugApi.withdrawTokens(amount.toString())
+        refresh()
+
+        return transactionHash
       }}
     />
   )

src/hooks/apiHooks.test.ts

@@ -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', () => {
+describe('useBeeDesktop', () => {
-  it('should fail when connected to wrong server', async () => {
+  it('should not have error when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverWrongURL }))
+    const { result, waitFor } = renderHook(() => useBeeDesktop(true, 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(false)
+    expect(result.current.desktopAutoUpdateEnabled).toBe(true)
-  })
+    expect(result.current.beeDesktopVersion).toBe('0.1.0')
-
+    expect(result.current.error).toBe(null)
-  it('should return isBeeDesktop true when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL }))
-
-    expect(result.current.isLoading).toBe(true)
-    expect(result.current.isBeeDesktop).toBe(false)
-
-    await waitFor(() => {
-      expect(result.current.isLoading).toBe(false)
-    })
-    expect(result.current.isBeeDesktop).toBe(true)
   })
 })

src/hooks/apiHooks.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { config } from '../config'
+import { GITHUB_REPO_URL } from '../constants'
-import { getJson } from '../utils/net'
+import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -9,59 +9,103 @@ export interface LatestBeeReleaseHook {
   error: Error | null
 }
 
-export interface IsBeeDesktopHook {
+export interface BeeDesktopHook {
-  isBeeDesktop: boolean
+  reachable: boolean
+  error: Error | null
   isLoading: boolean
+  beeDesktopVersion: string
+  desktopAutoUpdateEnabled: boolean
 }
 
-interface Config {
+export interface NewDesktopVersionHook {
-  BEE_DESKTOP_URL: string
+  newBeeDesktopVersion: string
 }
 
-/**
+export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
- * Detect if the dashboard is run within bee-desktop
+  const [reachable, setReachable] = useState(false)
- *
+  const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
- * @returns isBeeDesktop true if this is run within bee-desktop
+  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
- */
-export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
-  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
   const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
 
   useEffect(() => {
-    axios
+    if (!isBeeDesktop) {
-      .get(`${conf.BEE_DESKTOP_URL}/info`)
+      return
-      .then(res => {
+    }
-        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
-        else setIsBeeDesktop(false)
-      })
-      .catch(() => {
-        setIsBeeDesktop(false)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [conf])
 
-  return { isBeeDesktop, isLoading }
+    function runReachabilityCheck() {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
+        })
+        .catch(() => {
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      setLoading(false)
+      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 { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }
 
-export interface BeeConfig {
+async function checkNewVersion(desktopUrl: string): Promise<string> {
-  'api-addr': string
+  const resJson = await (await fetch(`${desktopUrl}/info`)).json()
-  'debug-api-addr': string
+  const currentVersion = resJson.version
-  'debug-api-enable': boolean
+  const latestVersion = await getLatestBeeDesktopVersion()
-  password: string
+
-  'swap-enable': boolean
+  if (currentVersion !== latestVersion) {
-  'swap-initial-deposit': bigint
+    return latestVersion
-  mainnet: boolean
+  }
-  'full-node': boolean
+
-  'chain-enable': boolean
+  return ''
-  'cors-allowed-origins': string
+}
-  'resolver-options': string
+
-  'use-postage-snapshot': boolean
+export function useNewBeeDesktopVersion(
-  'data-dir': string
+  isBeeDesktop: boolean,
-  transaction: string
+  desktopUrl: string,
-  'block-hash': string
+  desktopAutoUpdateEnabled: boolean,
-  'swap-endpoint'?: string
+): 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 GetBeeConfig {
@@ -70,13 +114,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`)
+    getDesktopConfiguration(desktopUrl)
       .then(beeConf => {
         setBeeConfig(beeConf)
         setError(null)
@@ -88,7 +132,7 @@ export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
       .finally(() => {
         setLoading(false)
       })
-  }, [conf])
+  }, [desktopUrl])
 
   return { config: beeConfig, isLoading, error }
 }
@@ -100,7 +144,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
 
   useEffect(() => {
     axios
-      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
+      .get(`${GITHUB_REPO_URL}/releases/latest`)
       .then(res => {
         setLatestBeeRelease(res.data)
       })

src/index.tsx

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

src/layout/Dashboard.tsx

@@ -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 { Context as BeeContext } from '../providers/Bee'
-import config from '../config'
+import { Context as SettingsContext } from '../providers/Settings'
-import * as Sentry from '@sentry/react'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
-import ItsBroken from './ItsBroken'
+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>
   )
 }

src/layout/ItsBroken.tsx

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

src/models/BzzToken.ts

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

src/models/DaiToken.ts

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

src/models/Token.ts

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

src/pages/account/AccountNavigation.tsx

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

src/pages/account/chequebook/AccountChequebook.tsx

@@ -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>
+        {showChequebook && (
-          <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
+          <ExpandableList label="Chequebook" defaultOpen>
-          <ExpandableListItem
+            <ExpandableListItem
-            label="Available Uncommitted Balance"
+              label="Total Balance"
-            value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
+              value={`${chequebookBalance?.totalBalance.toFixedDecimal()} xBZZ`}
-          />
+            />
-          <ExpandableListItem
+            <ExpandableListItem
-            label="Total Cheques Amount Sent"
+              label="Available Uncommitted Balance"
-            value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
+              value={`${chequebookBalance?.availableBalance.toFixedDecimal()} xBZZ`}
-          />
+            />
-          <ExpandableListItem
+            <ExpandableListItem
-            label="Total Cheques Amount Received"
+              label="Total Cheques Amount Sent"
-            value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
+              value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
-          />
+            />
-          <ExpandableListItemActions>
+            <ExpandableListItem
-            <WithdrawModal />
+              label="Total Cheques Amount Received"
-            <DepositModal />
+              value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
-          </ExpandableListItemActions>
+            />
-        </ExpandableList>
+            <ExpandableListItemActions>
+              <WithdrawModal />
+              <DepositModal />
+            </ExpandableListItemActions>
+          </ExpandableList>
+        )}
         <ExpandableList label="Blockchain" defaultOpen>
           <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
           <ExpandableListItemKey

src/pages/account/feeds/AccountFeeds.tsx

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

src/pages/account/staking/AccountStaking.tsx

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

src/pages/account/stamps/AccountStamps.tsx

@@ -1,10 +1,11 @@
-import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
+import { CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
 import { useNavigate } from 'react-router'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as StampsContext } from '../../../providers/Stamps'
 import { ROUTES } from '../../../routes'
 import StampsTable from '../../stamps/StampsTable'
@@ -53,11 +54,7 @@ export function AccountStamps(): ReactElement {
       <Header />
       <AccountNavigation active="STAMPS" />
       <div className={classes.root}>
-        {error && (
+        {error && <Loading />}
-          <Container style={{ textAlign: 'center', padding: '50px' }}>
-            Error loading postage stamps details: {error.message}
-          </Container>
-        )}
         {!error && (
           <>
             <div className={classes.actions}>

src/pages/account/wallet/AccountWallet.tsx

@@ -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,51 @@ 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}>
+          {isDesktop && (
-            Deposit
+            <SwarmButton onClick={onDeposit} iconType={Download}>
-          </SwarmButton>
+              Top up wallet
+            </SwarmButton>
+          )}
         </Grid>
       </Box>
-      <Box mb={0.25}>
+      {balance && nodeAddresses ? (
-        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+        <>
-      </Box>
+          <Box mb={0.25}>
-      <Box mb={0.25}>
+            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+          </Box>
-      </Box>
+          <Box mb={0.25}>
-      <Box mb={2}>
+            <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+          </Box>
-      </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}>
+        {isDesktop && (
-          Invite to Swarm...
+          <SwarmButton onClick={onInvite} iconType={Gift}>
-        </SwarmButton>
+            Invite to Swarm...
+          </SwarmButton>
+        )}
       </ExpandableListItemActions>
     </>
   )

src/pages/accounting/PeerBalances.tsx

@@ -14,29 +14,31 @@ interface Props {
 }
 
 export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
+  const uncashedPeers = accounting?.filter(({ uncashedAmount }) => uncashedAmount.toBigNumber.isGreaterThan('0')) || []
+
   return (
     <ExpandableList
-      label={`Peers (${accounting?.length || 0})`}
+      label={`Peers (${uncashedPeers.length})`}
-      info={`${totalUncashed.toFixedDecimal()} 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 }) => (
+      {uncashedPeers.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>

src/pages/feeds/CreateNewFeed.tsx

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

src/pages/feeds/DeleteFeedDialog.tsx

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

src/pages/feeds/ExportFeedDialog.tsx

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

src/pages/feeds/FeedPasswordDialog.tsx

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

src/pages/feeds/FeedSubpage.tsx

@@ -1,12 +1,10 @@
-import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { X } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
+import X from 'remixicon-react/CloseLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-import ExpandableListItemLink from '../../components/ExpandableListItemLink'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { Context as BeeContext } from '../../providers/Bee'
@@ -55,14 +53,8 @@ export function FeedSubpage(): ReactElement {
       <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
       {available && identity.feedHash ? (
         <>
-          <Box mb={0.25}>
-            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
-          </Box>
           <Box mb={4}>
-            <ExpandableListItemLink
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
-              label="BZZ Link"
-              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
-            />
           </Box>
         </>
       ) : (

src/pages/feeds/ImportFeedDialog.tsx

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

src/pages/feeds/UpdateFeed.tsx

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

src/pages/feeds/index.tsx

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

src/pages/files/AssetPreview.tsx

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

src/pages/files/AssetSummary.tsx

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

src/pages/files/Download.tsx

@@ -1,23 +1,26 @@
-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 BeeContext } from '../../providers/Bee'
+import { Context as FileContext, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { ManifestJs } from '../../utils/manifest'
 import { FileNavigation } from './FileNavigation'
 
 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()
@@ -31,9 +34,7 @@ export function Download(): ReactElement {
     ) {
       setReferenceError(undefined)
     } else {
-      setReferenceError(
+      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters or ENS domain.')
-        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
-      )
     }
   }
 
@@ -72,6 +73,7 @@ export function Download(): ReactElement {
       if (message.includes('Not Found: Not Found')) {
         message = 'The specified hash was not found.'
       }
+      console.error(error) // eslint-disable-line
       enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
     } finally {
       setLoading(false)
@@ -80,7 +82,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 +90,7 @@ export function Download(): ReactElement {
         helperText={referenceError}
         confirmLabel={'Find'}
         confirmLabelDisabled={Boolean(referenceError) || loading}
+        confirmIcon={Search}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
         mapperFn={value => recognizeEnsOrSwarmHash(value)}

src/pages/files/DownloadActionBar.tsx

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

src/pages/files/Share.tsx

@@ -1,4 +1,3 @@
-import { ManifestJs } from '@ethersphere/manifest-js'
 import { Box, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
@@ -8,12 +7,12 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import config from '../../config'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { ManifestJs } from '../../utils/manifest'
 import { AssetPreview } from './AssetPreview'
 import { AssetSummary } from './AssetSummary'
 import { DownloadActionBar } from './DownloadActionBar'
@@ -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)

src/pages/files/Upload.tsx

@@ -7,11 +7,11 @@ import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../providers/Bee'
-import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
+import { EnrichedPostageBatch, Context as StampsContext } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
 import { waitUntilStampUsable } from '../../utils'
 import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
@@ -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)
 
@@ -130,7 +130,7 @@ export function Upload(): ReactElement {
     }
 
     beeApi
-      .uploadFiles(stamp.batchID, fls, { indexDocument })
+      .uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
       .then(hash => {
         putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(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)
       })

src/pages/files/UploadActionBar.tsx

@@ -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
+        {hasAnyStamps && (
-          disabled={stampMode === 'BUY' && !hasAnyStamps}
+          <SwarmButton
-          onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
+            disabled={stampMode === 'BUY' && !hasAnyStamps}
-          iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+            onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
-        >
+            iconType={stampMode === 'BUY' ? Layers : PlusSquare}
-          {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+          >
-        </SwarmButton>
+            {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+          </SwarmButton>
+        )}
       </Grid>
     )
   }

src/pages/files/UploadArea.tsx

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

src/pages/files/UploadLander.tsx

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

src/pages/gift-code/index.tsx

@@ -1,38 +1,48 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Tooltip, Typography } from '@material-ui/core'
+import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Check, X } from 'react-feather'
 import { useNavigate } from 'react-router'
-import { Wallet } from 'ethers'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { Context as BeeContext } from '../../providers/Bee'
+import { Token } from '../../models/Token'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { createGiftWallet } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
 
+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 { giftWallets, addGiftWallet } = useContext(TopUpContext)
-  const { balance } = useContext(BeeContext)
+  const { rpcProvider, desktopUrl } = useContext(SettingsContext)
+  const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
   const [balances, setBalances] = useState<ResolvedWallet[]>([])
 
   useEffect(() => {
     async function mapGiftWallets() {
+      if (!rpcProvider) {
+        return
+      }
       const results = []
       for (const giftWallet of giftWallets) {
-        results.push(await ResolvedWallet.make(giftWallet, provider))
+        results.push(await ResolvedWallet.make(giftWallet, rpcProvider))
       }
       setBalances(results)
     }
 
     mapGiftWallets()
-  }, [giftWallets, provider])
+  }, [giftWallets, rpcProvider])
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
@@ -43,9 +53,10 @@ export default function Index(): ReactElement {
     try {
       const wallet = Wallet.createRandom()
       addGiftWallet(wallet)
-      await createGiftWallet(wallet.address)
+      await createGiftWallet(desktopUrl, wallet.address)
       enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
     } catch (error) {
+      console.error(error) // eslint-disable-line
       enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
     } finally {
       setLoading(false)
@@ -60,35 +71,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="xDAI balance" value={`${x.dai.toSignificantDigits(4)} xDAI`} />
-            <ExpandableListItem label="BZZ balance" value={`${x.bzz.toSignificantDigits(4)} BZZ`} />
+            <ExpandableListItem label="xBZZ balance" value={`${x.bzz.toSignificantDigits(4)} xBZZ`} />
           </Box>
         ))}
       </Box>
       <ExpandableListItemActions>
-        <SwarmButton onClick={onCreate} iconType={Check} loading={loading} disabled={loading}>
+        <Tooltip title={'Not enough funds'} placement="top" open={notEnoughFundsCheck} arrow>
-          Generate gift wallet
+          <div>
-        </SwarmButton>
+            <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>

src/pages/info/ChequebookInfoCard.tsx

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

src/pages/info/NodeInfoCard.tsx

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

src/pages/info/WalletInfoCard.tsx

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

src/pages/info/index.tsx

@@ -1,115 +1,70 @@
-import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
-import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
+import { ReactElement, useContext } from 'react'
-
-import { Context as BeeContext } from '../../providers/Bee'
-import Card from '../../components/Card'
-import Map from '../../components/Map'
 import ExpandableListItem from '../../components/ExpandableListItem'
-import { useNavigate } from 'react-router'
+import Map from '../../components/Map'
-import { ROUTES } from '../../routes'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { chainIdToName } from '../../utils/chain'
+import { ChequebookInfoCard } from './ChequebookInfoCard'
+import NodeInfoCard from './NodeInfoCard'
+import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
   const {
+    debugApiReadiness,
     status,
     latestUserVersion,
     isLatestBeeVersion,
     latestBeeVersionUrl,
     topology,
     nodeInfo,
-    balance,
+    chainId,
-    chequebookBalance,
   } = useContext(BeeContext)
-  const navigate = useNavigate()
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
 
   return (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
-        {status.all ? (
+        <NodeInfoCard />
-          <Card
+        {debugApiReadiness && (
-            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"
-          />
-        )}
-        <div style={{ width: '8px' }}></div>
-        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
-          <Card
-            buttonProps={{
-              iconType: Briefcase,
-              children: 'Manage your wallet',
-              onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
-            }}
-            icon={<Briefcase />}
-            title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
-            subtitle="Current wallet balance."
-            status="ok"
-          />
-        ) : (
-          <Card
-            buttonProps={{
-              iconType: Settings,
-              children: 'Setup wallet',
-              onClick: () => navigate(ROUTES.WALLET),
-            }}
-            icon={<ArrowUp />}
-            title="Your wallet is not setup."
-            subtitle="To share content on Swarm, please setup your wallet."
-            status="error"
-          />
-        )}
-        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && (
           <>
-            <div style={{ width: '8px' }} />
+            <div style={{ width: '8px' }}></div>
-            {chequebookBalance?.availableBalance !== undefined &&
+            <WalletInfoCard />
-            chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
+            <div style={{ width: '8px' }}></div>
-              <Card
+            <ChequebookInfoCard />
-                buttonProps={{
-                  iconType: RefreshCcw,
-                  children: 'View chequebook',
-                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
-                }}
-                icon={<RefreshCcw />}
-                title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-                subtitle="Your chequebook is setup and has balance"
-                status="ok"
-              />
-            ) : (
-              <Card
-                buttonProps={{
-                  iconType: RefreshCcw,
-                  children: 'View chequebook',
-                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
-                }}
-                icon={<RefreshCcw />}
-                title={
-                  chequebookBalance?.availableBalance
-                    ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
-                    : 'No available balance'
-                }
-                subtitle="Your chequebook is not setup or has no balance."
-                status="error"
-              />
-            )}
           </>
         )}
       </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 +73,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 +89,7 @@ export default function Status(): ReactElement {
         }
       />
       <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
+      {chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
     </div>
   )
 }

src/pages/restart/LightModeRestart.tsx

@@ -1,15 +1,23 @@
 import { BeeModes } from '@ethersphere/bee-js'
-import { Box, Typography } from '@material-ui/core'
+import { Box, Grid, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Loading } from '../../components/Loading'
+import { Waiting } from '../../components/Waiting'
 import { Context } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
-export default function Settings(): ReactElement {
+const STARTED_UPGRADE_AT = 'started-upgrade-at'
-  const [startedAt] = useState(Date.now())
+
+export default function LightModeRestart(): ReactElement {
+  const [startedAt] = useState(Number.parseInt(localStorage.getItem(STARTED_UPGRADE_AT) ?? Date.now().toFixed()))
   const { apiHealth, nodeInfo } = useContext(Context)
   const navigate = useNavigate()
+  const { enqueueSnackbar } = useSnackbar()
+
+  useEffect(() => {
+    localStorage.setItem(STARTED_UPGRADE_AT, startedAt.toFixed())
+  }, [startedAt])
 
   useEffect(() => {
     if (Date.now() - startedAt < 45_000) {
@@ -17,16 +25,25 @@ export default function Settings(): ReactElement {
     }
 
     if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      localStorage.removeItem(STARTED_UPGRADE_AT)
       navigate(ROUTES.INFO)
     }
-  }, [startedAt, navigate, nodeInfo, apiHealth])
+  }, [startedAt, navigate, nodeInfo, apiHealth, enqueueSnackbar])
 
   return (
-    <>
+    <Grid container direction="column" justifyContent="center" alignItems="center">
-      <Box mb={4}>
+      <Box mb={9}>
-        <Loading />
+        <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>
   )
 }

src/pages/restart/Restart.tsx

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

src/pages/rpc/Confirmation.tsx

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

src/pages/rpc/index.tsx

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

src/pages/settings/index.tsx

@@ -1,12 +1,55 @@
 import CircularProgress from '@material-ui/core/CircularProgress'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { getDesktopConfiguration, restartBeeNode, setJsonRpcInDesktop } from '../../utils/desktop'
 
 export default function SettingsPage(): ReactElement {
-  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings, config, isLoading } =
+  const {
-    useContext(SettingsContext)
+    apiUrl,
+    apiDebugUrl,
+    setApiUrl,
+    setDebugApiUrl,
+    lockedApiSettings,
+    cors,
+    dataDir,
+    ensResolver,
+    rpcProviderUrl,
+    isLoading,
+    isDesktop,
+    desktopUrl,
+    setAndPersistJsonRpcProvider,
+  } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  async function handleSetRpcUrl(value: string) {
+    try {
+      setAndPersistJsonRpcProvider(value)
+
+      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['swap-endpoint']
+
+      if (shouldUpdateDesktop) {
+        await setJsonRpcInDesktop(desktopUrl, value)
+        const snackKey = enqueueSnackbar('RPC endpoint successfully changed, restarting Bee node...', {
+          variant: 'success',
+        })
+        await restartBeeNode(desktopUrl)
+        closeSnackbar(snackKey)
+        enqueueSnackbar('Bee node restarted', { variant: 'success' })
+      } else {
+        enqueueSnackbar('RPC endpoint successfully changed', { variant: 'success' })
+      }
+
+      await refresh()
+    } catch (e) {
+      console.error(e) //eslint-disable-line
+      enqueueSnackbar(`Failed to change RPC endpoint. ${e}`, { variant: 'error' })
+    }
+  }
 
   if (isLoading) {
     return (
@@ -16,31 +59,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} />
+      <ExpandableList label="API Settings" defaultOpen>
-      <ExpandableListItemInput
+        <ExpandableListItemInput
-        label="Bee Debug API"
+          label="Bee API"
-        value={apiDebugUrl}
+          value={apiUrl}
-        onConfirm={setDebugApiUrl}
+          onConfirm={setApiUrl}
-        locked={lockedApiSettings}
+          locked={lockedApiSettings || isDesktop}
-      />
+        />
-    </ExpandableList>
+        <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>
+      )}
+    </>
   )
 }

src/pages/stamps/PostageStampCreation.tsx

@@ -1,29 +1,24 @@
+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 { ReactElement, useContext, useEffect, useState } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmSelect } from '../../components/SwarmSelect'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampsContext } from '../../providers/Stamps'
-import { calculateStampPrice, convertAmountToSeconds, convertDepthToBytes, secondsToTimeString } from '../../utils'
+import {
+  calculateStampPrice,
+  convertAmountToSeconds,
+  convertDepthToBytes,
+  secondsToTimeString,
+  waitUntilStampExists,
+} from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 
-interface FormValues {
-  depth?: string
-  amount?: string
-  label?: string
-}
-type FormErrors = Partial<FormValues>
-const initialFormValues: FormValues = {
-  depth: '',
-  amount: '',
-  label: '',
-}
-
 interface Props {
   onFinished: () => void
 }
@@ -33,6 +28,13 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
   const { refresh } = useContext(StampsContext)
   const { beeDebugApi } = useContext(SettingsContext)
 
+  const [depthInput, setDepthInput] = useState<string>('')
+  const [amountInput, setAmountInput] = useState<string>('')
+  const [labelInput, setLabelInput] = useState('')
+  const [immutable, setImmutable] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [submitting, setSubmitting] = useState(false)
+
   const { enqueueSnackbar } = useSnackbar()
 
   function getFileSize(depth: number): string {
@@ -66,101 +68,158 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
 
     const price = calculateStampPrice(depth, amount)
 
-    return `${price.toSignificantDigits()} BZZ`
+    return `${price.toSignificantDigits()} xBZZ`
   }
 
+  async function submit() {
+    try {
+      // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+      if (!depthInput || !amountInput) {
+        return
+      }
+
+      if (!beeDebugApi) {
+        return
+      }
+
+      setSubmitting(true)
+      const amount = BigInt(amountInput)
+      const depth = Number.parseInt(depthInput)
+      const options: PostageBatchOptions = {
+        waitForUsable: false,
+        label: labelInput || undefined,
+        immutableFlag: immutable,
+      }
+
+      const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+      await waitUntilStampExists(batchId, beeDebugApi)
+      await refresh()
+      onFinished()
+    } catch (e) {
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+    }
+    setSubmitting(false)
+  }
+
+  useEffect(() => {
+    function validate() {
+      const errors: Record<string, string> = {}
+
+      if (!depthInput) {
+        errors.depth = 'Required field'
+      } else {
+        const depth = new BigNumber(depthInput)
+
+        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 (!amountInput) {
+        errors.amount = 'Required field'
+      } else {
+        const amount = new BigNumber(amountInput)
+
+        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
+    }
+
+    setErrors(validate())
+  }, [depthInput, amountInput])
+
   return (
-    <Formik
+    <>
-      initialValues={initialFormValues}
+      <Box mb={4}>
-      onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
+        <Typography>
-        try {
+          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
-          // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+          this, please read{' '}
-          if (!values.depth || !values.amount) return
+          <a
-
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
-          if (!beeDebugApi) return
+            target="_blank"
-
+            rel="noreferrer"
-          const amount = BigInt(values.amount)
-          const depth = Number.parseInt(values.depth)
-          const options = values.label ? { label: values.label } : undefined
-          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-          actions.resetForm()
-          await refresh()
-          onFinished()
-        } catch (e) {
-          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
-          actions.setSubmitting(false)
-        }
-      }}
-      validate={(values: FormValues) => {
-        const errors: FormErrors = {}
-
-        // Depth
-        if (!values.depth) errors.depth = 'Required field'
-        else {
-          const depth = new BigNumber(values.depth)
-
-          if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
-          else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
-          else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
-        }
-
-        // Amount
-        if (!values.amount) errors.amount = 'Required field'
-        else {
-          const amount = new BigNumber(values.amount)
-
-          if (!amount.isInteger()) errors.amount = 'Amount must be an integer'
-          else if (amount.isLessThanOrEqualTo(0)) errors.amount = 'Amount must be greater than 0'
-        }
-
-        return errors
-      }}
-    >
-      {({ submitForm, isValid, isSubmitting, values, errors }) => (
-        <Form>
-          <Box mb={2}>
-            <SwarmTextInput name="depth" label="Depth" formik />
-            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-              <Grid container justifyContent="space-between">
-                <Typography>Corresponding file size</Typography>
-                <Typography>{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}</Typography>
-              </Grid>
-            </Box>
-          </Box>
-          <Box mb={2}>
-            <SwarmTextInput name="amount" label="Amount" formik />
-            <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-              <Grid container justifyContent="space-between">
-                <Typography>Corresponding TTL (Time to live)</Typography>
-                <Typography>
-                  {!errors.amount && values.amount ? getTtl(Number.parseInt(values.amount, 10)) : '-'}
-                </Typography>
-              </Grid>
-            </Box>
-          </Box>
-          <Box mb={2}>
-            <SwarmTextInput name="label" label="Label" optional formik />
-          </Box>
-          <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
-            <Grid container justifyContent="space-between">
-              <Typography>Indicative Price</Typography>
-              <Typography>
-                {!errors.amount && !errors.depth && values.amount && values.depth
-                  ? getPrice(parseInt(values.depth, 10), BigInt(values.amount))
-                  : '-'}
-              </Typography>
-            </Grid>
-          </Box>
-          <SwarmButton
-            disabled={isSubmitting || !isValid || !values.amount || !values.depth}
-            onClick={submitForm}
-            iconType={Check}
-            loading={isSubmitting}
           >
-            Buy New Stamp
+            this guide
-          </SwarmButton>
+          </a>
-        </Form>
+          .
-      )}
+        </Typography>
-    </Formik>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="depth" label="Depth" onChange={event => setDepthInput(event.target.value)} />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding file size</Typography>
+            <Typography>{!errors.depth && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'}</Typography>
+          </Grid>
+        </Box>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="amount" label="Amount" onChange={event => setAmountInput(event.target.value)} />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding TTL (Time to live)</Typography>
+            <Typography>{!errors.amount && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
+          </Grid>
+        </Box>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="label" label="Label" optional onChange={event => setLabelInput(event.target.value)} />
+      </Box>
+      <Box mb={2}>
+        <SwarmSelect
+          label="Immutable"
+          defaultValue="No"
+          onChange={event => setImmutable(event.target.value === 'Yes')}
+          options={[
+            { value: 'Yes', label: 'Yes' },
+            { value: 'No', label: 'No' },
+          ]}
+        />
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            {immutable && (
+              <Typography>
+                Once an immutable stamp is maxed out, it disallows further content uploads, thereby safeguarding your
+                previously uploaded content from unintentional overwriting.
+              </Typography>
+            )}
+            {!immutable && (
+              <Typography>
+                When a mutable stamp reaches full capacity, it still permits new content uploads. However, this comes
+                with the caveat of overwriting previously uploaded content associated with the same stamp.
+              </Typography>
+            )}
+          </Grid>
+        </Box>
+      </Box>
+      <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+        <Grid container justifyContent="space-between">
+          <Typography>Indicative Price</Typography>
+          <Typography>
+            {!errors.amount && !errors.depth && amountInput && depthInput
+              ? getPrice(parseInt(depthInput, 10), BigInt(amountInput))
+              : '-'}
+          </Typography>
+        </Grid>
+      </Box>
+      <SwarmButton
+        disabled={submitting || Object.keys(errors).length > 0}
+        onClick={submit}
+        iconType={Check}
+        loading={submitting}
+      >
+        Buy New Stamp
+      </SwarmButton>
+    </>
   )
 }

src/pages/stamps/StampsTable.tsx

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

src/pages/stamps/index.tsx

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

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -11,36 +11,34 @@ import { CheckState, Context } from '../../../providers/Bee'
 const ChequebookDeployFund = (): ReactElement | null => {
   const { status, isLoading, chequebookAddress } = useContext(Context)
   const { checkState, isEnabled } = status.chequebook
+  const { checkState: debugApiCheckState } = status.debugApiConnection
 
-  if (!isEnabled) return null
+  if (!isEnabled || debugApiCheckState === CheckState.ERROR) return null
 
   let text: ReactNode
 
   switch (checkState) {
     case CheckState.OK:
-      text = 'Your chequebook is deployed and funded'
-      break
-    case CheckState.WARNING:
       text = (
         <>
-          Your chequebook is not funded. Please deposit some xBZZ to your chequebook address. You may need to aquire BZZ
+          Your chequebook is deployed. You may deposit some xBZZ to your chequebook to afford more traffic. You can
-          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the xDai network through the{' '}
+          acquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network
-          <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
+          through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you
-          xDAI token. You can purchase DAI on the network and bridge it to xDai network through the{' '}
+          will also need xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain
-          <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          network through the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
-          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          <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
+          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the Gnosis
-          network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
+          chain network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge
-          the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
+          it to the Gnosis Chain network through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To
-          transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
+          pay the transaction fees, you will also need xDAI token. You can purchase DAI on the Ethereum mainnet network
-          network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          and bridge it to Gnosis Chain network through the <a href="https://bridge.gnosischain.com">xDai Bridge</a>.
-          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          See the <a href="https://www.gnosischain.com">official Gnosis Chain website</a> for more information.
         </>
       )
   }

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -11,7 +11,7 @@ import { Context as SettingsContext } from '../../../providers/Settings'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { status, isLoading } = useContext(Context)
-  const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
+  const { setDebugApiUrl, apiDebugUrl, isDesktop } = useContext(SettingsContext)
   const { checkState, isEnabled } = status.debugApiConnection
 
   if (!isEnabled) return null
@@ -26,12 +26,12 @@ export default function NodeConnectionCheck(): ReactElement | null {
     >
       <ExpandableListItemNote>
         {checkState === CheckState.OK
-          ? 'The connection to the Bee nodes debug API has been successful'
+          ? 'The connection to the Bee node debug API has been successful'
-          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+          : 'Could not connect to your Bee node debug API.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
 
-      {checkState === CheckState.ERROR && (
+      {checkState === CheckState.ERROR && !isDesktop && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/DesktopConnectionCheck.tsx

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

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

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

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -8,8 +8,9 @@ import { CheckState, Context } from '../../../providers/Bee'
 export default function PeerConnection(): ReactElement | null {
   const { status, isLoading, topology } = useContext(Context)
   const { isEnabled, checkState } = status.topology
+  const { checkState: debugApiCheckState } = status.debugApiConnection
 
-  if (!isEnabled) return null
+  if (!isEnabled || debugApiCheckState === CheckState.ERROR) return null
 
   let text: ReactNode
   switch (checkState) {

src/pages/status/index.tsx

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

src/pages/top-up/Balance.tsx

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

src/pages/top-up/BankCardTopUpIndex.tsx

@@ -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">
+          <a
-            https://ramp.network/buy/
+            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>

src/pages/top-up/CryptoTopUpIndex.tsx

@@ -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">
+          <a href="https://bridge.gnosischain.com" rel="noreferrer" target="_blank">
-            https://bridge.xdaichain.com/
+            https://bridge.gnosischain.com
           </a>
           .
         </Typography>

src/pages/top-up/GiftCardFund.tsx

@@ -1,8 +1,10 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { ArrowDown, Check } from 'react-feather'
 import { useNavigate, useParams } from 'react-router'
+import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
+import Check from 'remixicon-react/CheckLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -11,15 +13,17 @@ import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
 
 export function GiftCardFund(): ReactElement {
-  const { nodeAddresses, balance } = useContext(BeeContext)
+  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const { provider, providerUrl } = useContext(TopUpContext)
+  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,46 @@ export function GiftCardFund(): ReactElement {
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (!privateKeyString) {
+    if (!privateKeyString || !rpcProvider) {
       return
     }
 
-    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
+    ResolvedWallet.make(privateKeyString, rpcProvider).then(setWallet)
-  }, [privateKeyString, provider])
+  }, [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)
+      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)
+      await wallet.transfer(nodeAddresses.ethereum, rpcProviderUrl)
-      enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
+      enqueueSnackbar('Successfully funded node', { variant: 'success' })
-      await sleepMs(5_000)
+
-      await upgradeToLightNode(providerUrl)
+      if (canUpgradeToLightNode) await restart()
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
     } 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 +99,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 +111,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>
     </>
   )

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -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 wallet = new Wallet(giftCode, rpcProvider)
-      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, rpcProvider))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
+      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)

src/pages/top-up/Swap.tsx

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

src/pages/top-up/TopUpProgressIndicator.tsx

@@ -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']} />
 }

src/pages/top-up/index.tsx

@@ -1,55 +1,121 @@
-import { Box, Grid, Typography } from '@material-ui/core'
+import { BeeModes } from '@ethersphere/bee-js'
-import { ReactElement, useContext } from 'react'
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { Check } from 'react-feather'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router'
-import ExpandableListItem from '../../components/ExpandableListItem'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import Check from 'remixicon-react/CheckLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { SwarmDivider } from '../../components/SwarmDivider'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
-import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
+import { ROUTES } from '../../routes'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 
-interface Props {
+const useStyles = makeStyles(() =>
-  header: string
+  createStyles({
-  title: string
+    checkWrapper: {
-  p: ReactElement
+      background: 'rgba(0, 230, 118, 0.25)',
-  next: string
+      borderRadius: 99999,
-}
+      width: '180px',
+      height: '180px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  }),
+)
 
-export default function Index({ header, title, p, next }: Props): ReactElement {
+const MINIMUM_XDAI = '0.05'
-  const { nodeAddresses, balance } = useContext(Context)
+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)
+      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>
+      <HistoryHeader>Account</HistoryHeader>
-      <Box mb={4}>
+      <Grid container direction="column" alignItems="center">
-        <TopUpProgressIndicator index={0} />
+        <Box mb={6}>
-      </Box>
+          <div className={styles.checkWrapper}>
-      <Box mb={2}>
+            <Download size={100} color="#ededed" />
-        <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
+          </div>
-      </Box>
+        </Box>
-      <Box mb={4}>{p}</Box>
+        <Box mb={1}>
-      <SwarmDivider mb={4} />
+          <Typography style={{ fontWeight: 'bold' }}>Transfer funds to your Swarm account</Typography>
-      <Box mb={0.25}>
+        </Box>
-        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
+        <Box mb={4}>
-      </Box>
+          <Typography align="center">Top up your account with xBZZ and xDAI.</Typography>
-      <Box mb={4}>
+          <Typography align="center">
-        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
+            If you&apos;re not familiar with cryptocurrencies, you can start with a bank card.
-      </Box>
+          </Typography>
-      <Grid container direction="row" justifyContent="space-between">
+        </Box>
-        <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
+        <ExpandableListItemActions>
-          Proceed
+          <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
-        </SwarmButton>
+            Use a gift code
-        {disabled ? <Typography>Please deposit xDAI to the address above in order to proceed.</Typography> : null}
+          </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>
     </>
   )

src/providers/Bee.tsx

@@ -9,20 +9,26 @@ import {
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactChild, ReactElement, createContext, useContext, useEffect, useState } from 'react'
 import semver from 'semver'
 import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { BzzToken } from '../models/BzzToken'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
-import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
-import { Context as TopUpContext } from './TopUp'
+
+const LAUNCH_GRACE_PERIOD = 15_000
+const REFRESH_WHEN_OK = 30_000
+const REFRESH_WHEN_ERROR = 5_000
+const TIMEOUT = 3_000
 
 export enum CheckState {
+  CONNECTING = 'Connecting',
   OK = 'OK',
   WARNING = 'Warning',
   ERROR = 'Error',
+  STARTING = 'Starting',
 }
 
 interface StatusItem {
@@ -42,7 +48,6 @@ interface Status {
 
 interface ContextInterface {
   status: Status
-  balance: WalletAddress | null
   latestPublishedVersion?: string
   latestUserVersion?: string
   latestUserVersionExact?: string
@@ -51,19 +56,21 @@ interface ContextInterface {
   error: Error | null
   apiHealth: boolean
   debugApiHealth: Health | null
+  debugApiReadiness: boolean
   nodeAddresses: NodeAddresses | null
   nodeInfo: NodeInfo | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
   chequebookBalance: ChequebookBalance | null
+  stake: BzzToken | null
   peerBalances: Balance[] | null
   peerCheques: LastChequesResponse | null
   settlements: Settlements | null
   chainState: ChainState | null
+  chainId: number | null
   latestBeeRelease: LatestBeeRelease | null
   isLoading: boolean
-  isRefreshing: boolean
   lastUpdate: number | null
   start: (frequency?: number) => void
   stop: () => void
@@ -80,7 +87,6 @@ const initialValues: ContextInterface = {
     topology: { isEnabled: false, checkState: CheckState.ERROR },
     chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
-  balance: null,
   latestPublishedVersion: undefined,
   latestUserVersion: undefined,
   latestUserVersionExact: undefined,
@@ -89,19 +95,21 @@ const initialValues: ContextInterface = {
   error: null,
   apiHealth: false,
   debugApiHealth: null,
+  debugApiReadiness: false,
   nodeAddresses: null,
   nodeInfo: null,
   topology: null,
   chequebookAddress: null,
+  stake: null,
   peers: null,
   chequebookBalance: null,
   peerBalances: null,
   peerCheques: null,
   settlements: null,
   chainState: null,
+  chainId: null,
   latestBeeRelease: null,
   isLoading: true,
-  isRefreshing: false,
   lastUpdate: null,
   start: () => {}, // eslint-disable-line
   stop: () => {}, // eslint-disable-line
@@ -117,25 +125,27 @@ interface Props {
 
 function getStatus(
   debugApiHealth: Health | null,
-  nodeAddresses: NodeAddresses | null,
+  debugApiReadiness: boolean,
   nodeInfo: NodeInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
   chequebookAddress: ChequebookAddressResponse | null,
   chequebookBalance: ChequebookBalance | null,
   error: Error | null,
+  isDesktop: boolean,
+  startedAt: number,
 ): Status {
   const status: Status = { ...initialValues.status }
 
   // Version check
-  status.version.isEnabled = true
+  status.version.isEnabled = !isDesktop
   status.version.checkState =
     debugApiHealth &&
     semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
       includePrerelease: true,
     })
       ? CheckState.OK
-      : CheckState.ERROR
+      : CheckState.WARNING
 
   // Blockchain connection check
   status.blockchainConnection.isEnabled = true
@@ -159,52 +169,77 @@ function getStatus(
   if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
     status.chequebook.isEnabled = true
 
-    if (
+    if (chequebookAddress?.chequebookAddress && chequebookBalance !== null) {
-      chequebookAddress?.chequebookAddress &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)
-    ) {
       status.chequebook.checkState = CheckState.OK
-    } else if (chequebookAddress?.chequebookAddress) status.chequebook.checkState = CheckState.WARNING
+    } else status.chequebook.checkState = CheckState.OK
-    else status.chequebook.checkState = CheckState.OK
   }
 
-  // Determine overall status
+  status.all = determineOverallStatus(debugApiHealth, debugApiReadiness, status, startedAt)
-  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
-    status.all = CheckState.ERROR
-  } else if (
-    Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
-  ) {
-    status.all = CheckState.WARNING
-  } else {
-    status.all = CheckState.OK
-  }
 
   return status
 }
 
-export function Provider({ children }: Props): ReactElement {
+function determineOverallStatus(
+  debugApiHealth: Health | null,
+  debugApiReadiness: boolean,
+  status: Status,
+  startedAt: number,
+): CheckState {
+  const hasErrors = Object.values(status).some(
+    ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR,
+  )
+  const hasWarnings = Object.values(status).some(
+    ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING,
+  )
+  const isInGracePeriod = Date.now() - startedAt < LAUNCH_GRACE_PERIOD
+
+  if (debugApiHealth?.status === 'ok' && !debugApiReadiness) {
+    return CheckState.STARTING
+  } else if (hasErrors && isInGracePeriod) {
+    return CheckState.CONNECTING
+  } else if (hasErrors) {
+    return CheckState.ERROR
+  } else if (hasWarnings) {
+    return CheckState.WARNING
+  } else {
+    return CheckState.OK
+  }
+}
+
+// This does not need to be exposed and works much better as variable than state variable which may trigger some unnecessary re-renders
+let isRefreshing = false
+
+interface InitialSettings {
+  isDesktop?: boolean
+}
+
+interface Props extends InitialSettings {
+  children: ReactChild
+}
+
+export function Provider({ children, isDesktop }: 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 [debugApiReadiness, setDebugApiReadiness] = useState(false)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
   const [nodeInfo, setNodeInfo] = useState<NodeInfo | null>(null)
   const [topology, setNodeTopology] = useState<Topology | null>(null)
   const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
   const [peers, setPeers] = useState<Peer[] | null>(null)
   const [chequebookBalance, setChequebookBalance] = useState<ChequebookBalance | null>(null)
+  const [stake, setStake] = useState<BzzToken | null>(null)
   const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
   const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
   const [settlements, setSettlements] = useState<Settlements | null>(null)
   const [chainState, setChainState] = useState<ChainState | null>(null)
-  const [walletAddress, setWalletAddress] = useState<WalletAddress | null>(initialValues.balance)
+  const [chainId, setChainId] = useState<number | null>(null)
+  const [startedAt] = useState(Date.now())
 
   const { latestBeeRelease } = useLatestBeeRelease()
 
   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 +252,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 +270,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 +285,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 +300,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,63 +323,80 @@ 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)),
 
+        // Debug API readiness
+        beeDebugApi
+          .getReadiness({ timeout: TIMEOUT })
+          .then(setDebugApiReadiness)
+          .catch(() => setDebugApiReadiness(false)),
+
         // 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)
           .catch(() => setChequebookBalance(null)),
 
+        beeDebugApi
+          .getStake({ timeout: TIMEOUT })
+          .then(stake => setStake(new BzzToken(stake)))
+          .catch(() => setStake(null)),
+
         // Peer balances
         peerBalanceWrapper()
           .then(setPeerBalances)
@@ -371,20 +411,42 @@ 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,
+    debugApiReadiness,
+    nodeInfo,
+    apiHealth,
+    topology,
+    chequebookAddress,
+    chequebookBalance,
+    error,
+    Boolean(isDesktop),
+    startedAt,
+  )
+
+  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 +458,7 @@ export function Provider({ children }: Props): ReactElement {
   return (
     <Context.Provider
       value={{
-        status: getStatus(
+        status,
-          debugApiHealth,
-          nodeAddresses,
-          nodeInfo,
-          apiHealth,
-          topology,
-          chequebookAddress,
-          chequebookBalance,
-          error,
-        ),
-        balance: walletAddress,
         latestUserVersion,
         latestUserVersionExact,
         latestPublishedVersion,
@@ -421,19 +473,21 @@ export function Provider({ children }: Props): ReactElement {
         error,
         apiHealth,
         debugApiHealth,
+        debugApiReadiness,
         nodeAddresses,
         nodeInfo,
         topology,
         chequebookAddress,
         peers,
         chequebookBalance,
+        stake,
         peerBalances,
         peerCheques,
         settlements,
         chainState,
+        chainId,
         latestBeeRelease,
         isLoading,
-        isRefreshing,
         lastUpdate,
         start,
         stop,

src/providers/Settings.tsx

@@ -1,32 +1,51 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
-import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+import { providers } from 'ethers'
-import { config } from '../config'
+import { ReactElement, ReactNode, createContext, useEffect, useState } from 'react'
-import { BeeConfig, useGetBeeConfig } from '../hooks/apiHooks'
+import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
+import { useGetBeeConfig } from '../hooks/apiHooks'
+
+const LocalStorageKeys = {
+  providerUrl: 'json-rpc-provider',
+}
 
 interface ContextInterface {
   apiUrl: string
   apiDebugUrl: string
   beeApi: Bee | null
   beeDebugApi: BeeDebug | null
-  setApiUrl: (url: string) => void
-  setDebugApiUrl: (url: string) => void
   lockedApiSettings: boolean
   desktopApiKey: string
-  config: BeeConfig | null
+  isDesktop: boolean
+  desktopUrl: string
+  rpcProviderUrl: string
+  rpcProvider: providers.JsonRpcProvider | null
+  cors: string | null
+  dataDir: string | null
+  ensResolver: string | null
+  setApiUrl: (url: string) => void
+  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: null,
+  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 {
+interface InitialSettings {
-  children: ReactChild
   beeApiUrl?: string
   beeDebugApiUrl?: string
   lockedApiSettings?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  defaultRpcUrl?: string
 }
 
-export function Provider({
+interface Props extends InitialSettings {
-  children,
+  children: ReactNode
-  beeApiUrl,
+}
-  beeDebugApiUrl,
+
-  lockedApiSettings: extLockedApiSettings,
+export function Provider({ children, ...propsSettings }: Props): ReactElement {
-}: 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 {
+  const url = makeHttpUrl(
-    if (!string.startsWith('http')) {
+    config?.['api-addr'] ?? sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? apiUrl,
-      return `http://${string}`
+  )
-    }
+  const debugUrl = makeHttpUrl(
-
+    config?.['debug-api-addr'] ??
-    return string
+      sessionStorage.getItem('debug_api_host') ??
-  }
+      propsSettings.beeDebugApiUrl ??
-
+      apiDebugUrl,
-  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
+  )
-  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || 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))
+  }
+}

src/providers/Stamps.tsx

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