chore(master): release 0.18.0 (#408 )

feat: add real price calculation to swap page (#459 )
fix: remove expired stamps (#463 )
2022-07-04 16:26:33 +02:00 · 2022-07-04 15:38:55 +02:00 · 2022-07-04 15:28:43 +02:00 · 2022-07-01 15:55:12 +02:00 · 2022-06-30 16:43:08 +02:00 · 2022-06-29 22:32:16 +02:00
143 changed files with 23984 additions and 27060 deletions
@@ -1,19 +1,19 @@
 {
  "ignores": [
-    "@types/jest", 
+    "@testing-library/react",
    "@types/*",
    "@commitlint/config-conventional",
-    "@types/react-router",
+    "@babel/*",
-    "@babel/core",
+    "babel*",
-    "@babel/plugin-proposal-class-properties",
+    "eslint*",
    "@babel/plugin-transform-runtime",
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
    "babel-loader",
    "babel-plugin-syntax-dynamic-import",
    "babel-plugin-tsconfig-paths",
    "file-loader",
    "ts-node",
-    "webpack-cli"
+    "webpack-cli",
    "assert",
    "buffer",
    "crypto*",
    "stream*",
    "env-paths",
    "open"
  ]
 }
@@ -23,7 +23,6 @@
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "plugins": ["jest"],
  "rules": {
    "array-bracket-newline": ["error", "consistent"],
    "strict": ["error", "safe"],
@@ -0,0 +1,13 @@
 # See config in https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates
 version: 2
 updates:
  # Enable version updates for npm
  - package-ecosystem: 'npm'
    # Look for `package.json` and `lock` files in the `root` directory
    directory: '/'
    # Check the npm registry for updates every day (weekdays)
    schedule:
      interval: 'weekly'
    # Always increase the version in package.json as well (for patch versions by default only package-lock.json i updated)
    versioning-strategy: increase
@@ -0,0 +1,2 @@
 # Always validate the PR title, and ignore the commits
 titleOnly: true
@@ -14,12 +14,14 @@ jobs:
    strategy:
      matrix:
-        node-version: [14.x]
+        node-version: [18.x]
    env:
      REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
      REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
      REACT_APP_DEV_MODE: 1
      REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
      REACT_APP_SENTRY_ENVIRONMENT: 'preview'
    steps:
      - uses: actions/checkout@v2
@@ -12,11 +12,18 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
-          node-version: 14
+          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
@@ -0,0 +1,28 @@
 # After new release is published on github, publish it to npmjs
 name: Publish the project to Github Pages
 on:
  workflow_dispatch:
  release:
    types: [published]
 jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 18
          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
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
@@ -11,7 +11,7 @@ jobs:
  release-please:
    runs-on: ubuntu-latest
    steps:
-      - uses: GoogleCloudPlatform/release-please-action@v2
+      - uses: GoogleCloudPlatform/release-please-action@v3
        id: release
        with:
          token: ${{ secrets.GHA_PAT_BASIC }}
@@ -14,7 +14,7 @@ jobs:
    strategy:
      matrix:
-        node-version: [14.x]
+        node-version: [18.x]
    steps:
      - uses: actions/checkout@v2
@@ -1,5 +1,99 @@
 # Changelog
 ## [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)
 ### Features
 * add account tabs ([#378](https://github.com/ethersphere/bee-dashboard/issues/378)) ([41432bc](https://github.com/ethersphere/bee-dashboard/commit/41432bc346b1b89f87489a0b38a5383b834edd62))
 * add map with peers to info page ([#398](https://github.com/ethersphere/bee-dashboard/issues/398)) ([2be9735](https://github.com/ethersphere/bee-dashboard/commit/2be9735e0c98f066afbd8c1fda27c8365b80f489))
 * gh pages deployment ([#389](https://github.com/ethersphere/bee-dashboard/issues/389)) ([2b58b30](https://github.com/ethersphere/bee-dashboard/commit/2b58b301225dba5809f0afb3849f97007123c61a))
 * improve stamp selector ([#400](https://github.com/ethersphere/bee-dashboard/issues/400)) ([0f0d72e](https://github.com/ethersphere/bee-dashboard/commit/0f0d72e7c5848559962b3020575d1b5f2d18a60e))
 * info page redesign ([#390](https://github.com/ethersphere/bee-dashboard/issues/390)) ([caea5ae](https://github.com/ethersphere/bee-dashboard/commit/caea5ae309028fef12c5cd036dcd1d264dd451e6))
 * sentry feedback form ([#388](https://github.com/ethersphere/bee-dashboard/issues/388)) ([b3028d7](https://github.com/ethersphere/bee-dashboard/commit/b3028d7893790010e417ccf091b7eb4981ed21d6))
 * sentry integration ([#385](https://github.com/ethersphere/bee-dashboard/issues/385)) ([109e07b](https://github.com/ethersphere/bee-dashboard/commit/109e07b0972309b9260db2e26a643be8562a9386))
 * sentry proxy ([#399](https://github.com/ethersphere/bee-dashboard/issues/399)) ([e966663](https://github.com/ethersphere/bee-dashboard/commit/e9666639b2df3b1586121df61a7eda24bc57766d))
 * update logo ([#401](https://github.com/ethersphere/bee-dashboard/issues/401)) ([36fc4bf](https://github.com/ethersphere/bee-dashboard/commit/36fc4bfe982b03589478acb36e5bb6ec5aff9b44))
 ### Bug Fixes
 * all wallet flows to use ethers ([#395](https://github.com/ethersphere/bee-dashboard/issues/395)) ([80d684c](https://github.com/ethersphere/bee-dashboard/commit/80d684c1e5c74b3bdae6eca974ed3a0b7408be93))
 * change color of pins and show population instead of depth ([#402](https://github.com/ethersphere/bee-dashboard/issues/402)) ([127d44f](https://github.com/ethersphere/bee-dashboard/commit/127d44fd7ac763fd78d1eab99f10f952ba6bb1b6))
 * download preview ([#397](https://github.com/ethersphere/bee-dashboard/issues/397)) ([f38e8e1](https://github.com/ethersphere/bee-dashboard/commit/f38e8e11d6814e5246b0a7a25e32a009581a76a9))
 * map size in safari ([#404](https://github.com/ethersphere/bee-dashboard/issues/404)) ([ee864bd](https://github.com/ethersphere/bee-dashboard/commit/ee864bdbe9029184cc905f36af08fdea9431b4a8))
 ## [0.16.0](https://github.com/ethersphere/bee-dashboard/compare/v0.15.0...v0.16.0) (2022-06-02)
 ### Features
 * add light node upgrade top up methods ([#372](https://github.com/ethersphere/bee-dashboard/issues/372)) ([a768b4e](https://github.com/ethersphere/bee-dashboard/commit/a768b4ea0675596f6fe49771ef9d0755af00db56))
 * allow for the port to be configured ([#370](https://github.com/ethersphere/bee-dashboard/issues/370)) ([b6f138b](https://github.com/ethersphere/bee-dashboard/commit/b6f138b423cbe18b078fd38ea64b4c7a839d4e6e))
 * recognize ens domains ([#351](https://github.com/ethersphere/bee-dashboard/issues/351)) ([5917a13](https://github.com/ethersphere/bee-dashboard/commit/5917a133172c9e2fc0a81fb2fa19ea29ff976d03))
 ## [0.15.0](https://github.com/ethersphere/bee-dashboard/compare/v0.14.0...v0.15.0) (2022-05-16)
 ### Features
 * add aditional information to the stamps overview ([#349](https://github.com/ethersphere/bee-dashboard/issues/349)) ([23dea07](https://github.com/ethersphere/bee-dashboard/commit/23dea07f6e53da91f87078749f07bd95c9e65983))
 * add bee desktop toolkit ([#311](https://github.com/ethersphere/bee-dashboard/issues/311)) ([ecaf205](https://github.com/ethersphere/bee-dashboard/commit/ecaf2054fc5aaa5fa4f1d0b3fb2753af9d9b233e))
 * add bee-desktop settings capabilities ([#323](https://github.com/ethersphere/bee-dashboard/issues/323)) ([87b0b71](https://github.com/ethersphere/bee-dashboard/commit/87b0b71cc63098a5d886ff47d52715c250d1b659))
 * support for bzz.link cids when downloading files ([#350](https://github.com/ethersphere/bee-dashboard/issues/350)) ([3784b29](https://github.com/ethersphere/bee-dashboard/commit/3784b29f148b706d5bc40b69b5ae898efa2c1990))
 * wait for postage stamp to be usable when bying it ([#352](https://github.com/ethersphere/bee-dashboard/issues/352)) ([1e2face](https://github.com/ethersphere/bee-dashboard/commit/1e2face10e93818f281526d8245f84834e5ecb86))
 ### Bug Fixes
 * app crash caused by inputing non-number characters ([#347](https://github.com/ethersphere/bee-dashboard/issues/347)) ([a67be7a](https://github.com/ethersphere/bee-dashboard/commit/a67be7a31ec88e9ce9c7764ec4523496c157d08a))
 * connection health indicator values to reflect the current network conditions ([#353](https://github.com/ethersphere/bee-dashboard/issues/353)) ([07561aa](https://github.com/ethersphere/bee-dashboard/commit/07561aaed2ce7f7ffd7ecfd8ae8b5190cc9893bc))
 * nested directory upload preserves the directory structure ([#365](https://github.com/ethersphere/bee-dashboard/issues/365)) ([86978b7](https://github.com/ethersphere/bee-dashboard/commit/86978b7e999584173b082eef86074af698523752))
 * remove restrictions on postage stamp label ([#354](https://github.com/ethersphere/bee-dashboard/issues/354)) ([b6b9914](https://github.com/ethersphere/bee-dashboard/commit/b6b9914548a0ac00ed293ea35490ce38e9d6adaa))
 * show current postage stamp price per block ([#348](https://github.com/ethersphere/bee-dashboard/issues/348)) ([906a457](https://github.com/ethersphere/bee-dashboard/commit/906a457ae5a8683f82d218759fd66dc1b7c9a220))
 ## [0.14.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.13.0...v0.14.0) (2022-04-14)
@@ -4,8 +4,8 @@
 [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
-![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/npm-%3E%3D6.9.0-orange.svg?style=flat-square)
-![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/Node.js-%3E%3D14.0.0-orange.svg?style=flat-square)
 > An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
 > manage your postage stamps.
@@ -13,7 +13,7 @@
 **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.5.1-d0a77598<!-- SUPPORTED_BEE_END -->**.
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.6.0-6ceadd35<!-- SUPPORTED_BEE_END -->**.
 Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
 [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
@@ -60,6 +60,15 @@ bee-dashboard
 This should open the webpage on [`http://localhost:8080`](http://localhost:8080)
 You can also define your own port with the `PORT` environment variable. E.g.
 ```sh
 export PORT=3005
 bee-dashboard
 ```
 Will start the bee-dashboard on [`http://localhost:3005`](http://localhost:3005)
 ### Docker
 To build Docker image and run it, execute the following from inside project directory:
@@ -87,6 +96,16 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
 > 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.
 #### Bee Desktop development
 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:
 ```sh
 echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
 npm start
 npm run desktop # This will inject the API key to the Dashboard 
 ```
 ## Contribute
 There are some ways you can make this module better:
@@ -0,0 +1,6 @@
 module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-max-line-length': [0, 'always', Infinity], // disable commit body length restriction
  },
 }
@@ -0,0 +1,14 @@
 #!/usr/bin/env node
 import envPaths from 'env-paths'
 import open  from 'open'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 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}#/`
 console.log('Opening: ' + url)
 await open(url)
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.14.0",
+  "version": "0.18.0",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -26,15 +26,22 @@
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^3.3.4",
+    "@ethersphere/bee-js": "^4.1.1",
-    "@ethersphere/manifest-js": "1.1.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",
-    "ethereumjs-wallet": "^1.0.2",
+    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "dotted-map": "^2.2.3",
    "ethers": "^5.6.4",
    "file-saver": "^2.0.5",
    "formik": "2.2.9",
    "formik-material-ui": "3.0.1",
@@ -46,23 +53,25 @@
    "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"
+    "serve-handler": "6.1.3",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.16.0",
    "@babel/plugin-proposal-class-properties": "7.16.0",
    "@babel/plugin-transform-runtime": "7.16.4",
    "@babel/preset-env": "7.16.4",
-    "@babel/preset-react": "7.16.0",
+    "@babel/preset-react": "7.16.7",
    "@babel/preset-typescript": "7.16.0",
    "@commitlint/config-conventional": "14.1.0",
-    "@testing-library/jest-dom": "5.15.0",
+    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "^8.0.0",
    "@types/cors": "^2.8.12",
@@ -73,55 +82,59 @@
    "@types/react": "17.0.34",
    "@types/react-copy-to-clipboard": "5.0.2",
    "@types/react-dom": "17.0.11",
-    "@types/react-router": "5.1.17",
+    "@types/react-router": "5.1.18",
    "@types/react-router-dom": "5.3.2",
    "@types/react-syntax-highlighter": "13.5.2",
    "@types/semver": "7.3.9",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/eslint-plugin": "5.28.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/parser": "5.28.0",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.1.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-tsconfig-paths": "1.0.2",
    "cors": "^2.8.5",
    "depcheck": "^1.4.3",
-    "eslint": "7.24.0",
+    "env-paths": "^3.0.0",
-    "eslint-config-prettier": "8.2.0",
+    "eslint": "8.17.0 ",
-    "eslint-config-react-app": "6.0.0",
+    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-jest": "26.5.3",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react": "7.30.0",
-    "eslint-plugin-testing-library": "3.10.2",
+    "eslint-plugin-react-hooks": "4.5.0",
    "eslint-plugin-testing-library": "5.5.1",
    "express": "^4.17.3",
    "file-loader": "6.2.0",
    "open": "^8.4.0",
    "prettier": "2.4.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
-    "ts-node": "^10.4.0",
+    "ts-node": "^10.8.1",
-    "typescript": "4.4.4",
+    "typescript": "4.7.3",
    "web-vitals": "2.1.2",
-    "webpack": "4.44.2",
+    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.1"
+    "webpack-cli": "^4.10.0"
  },
  "peerDependencies": {
    "react": ">= 17.0.2",
    "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": "webpack --mode=production",
    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
    "test": "react-scripts test",
    "serve": "node ./serve.js",
    "depcheck": "depcheck .",
    "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "check:types": "tsc --project tsconfig.lib.json"
+    "check:types": "tsc --project tsconfig.lib.json",
    "update-map-data": "node ./utils/update-map-data.js"
  },
  "files": [
    "lib",
@@ -142,7 +155,7 @@
  },
  "engines": {
    "node": ">=12.0.0",
-    "npm": ">=6.0.0",
+    "npm": ">=6.9.0",
    "bee": ">=0.6.0"
  }
 }
@@ -23,7 +23,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Bee Dashboard</title>
+    <title>Swarm</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,34 +1,35 @@
 #!/usr/bin/env node
 const path = require('path')
-const handler = require('serve-handler');
+const handler = require('serve-handler')
-const http = require('http');
+const http = require('http')
 const opener = require('opener')
 const port = process.env.PORT || 8080
 const serverConfig = {
  public: path.join(__dirname, 'build'),
  trailingSlash: false,
-  rewrites: [
+  rewrites: [{ source: '**', destination: '/index.html' }],
    { source: "**", destination: "/index.html" },
  ],
  headers: [
-      {
+    {
-        source: "*",
+      source: '*',
-        headers: [{
+      headers: [
-          key: "Cache-Control",
+        {
-          value: "max-age=3600"
+          key: 'Cache-Control',
-        }]
+          value: 'max-age=3600',
-      }
+        },
-  ]
+      ],
    },
  ],
 }
 const server = http.createServer((request, response) => {
-
+  return handler(request, response, serverConfig)
  return handler(request, response, serverConfig);
 })
-server.listen(8080, () => {
+server.listen(port, () => {
-  console.log('Starting up Bee Dashboard on address http://localhost:8080')
+  console.log(`Starting up Bee Dashboard on address http://localhost:${port}`)
  console.log('Hit CTRL-C to stop the server')
-  opener('http://localhost:8080')
+  opener(`http://localhost:${port}`)
 })
@@ -1,63 +1,28 @@
@font-face {
-  font-family: 'Work Sans';
+  font-family: 'iAWriterQuattroV';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(assets/fonts/WorkSans/WorkSans-Light.ttf) format('truetype');
+  src: url(assets/fonts/iAWriterQuattroV.ttf) format('truetype');
 }
@font-face {
-  font-family: 'Work Sans';
+  font-family: 'iAWriterMonoV';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/WorkSans/WorkSans-Regular.ttf) format('truetype');
 }
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/WorkSans/WorkSans-Medium.ttf) format('truetype');
 }
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/WorkSans/WorkSans-SemiBold.ttf) format('truetype');
 }
@font-face {
  font-family: 'IBMPlexMono500';
  src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
  font-weight: 500;
 }
@font-face {
  font-family: 'IBMPlexMono600';
  src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
  font-weight: 600;
 }
@font-face {
  font-family: 'IBMPlexMonoregular';
  src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
  font-weight: 300;
-}
+  font-display: swap;
-@font-face {
+  src: url(assets/fonts/iAWriterMonoV.ttf) format('truetype');
  font-family: 'WorkSans-Italic-VariableFont_wght';
  src: url(assets/fonts/WorkSans-Italic-VariableFont_wght.ttf) format('truetype');
  font-weight: 700;
 }
@font-face {
  font-family: 'WorkSans-VariableFont_wght';
  src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
  font-weight: 400;
 }
 .App {
-  font-family: 'Work Sans', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 a,
 button {
-  font-family: 'IBMPlexMono500' !important;
+  font-family: 'iAWriterMonoV' !important;
  color: #dd7700;
 }
@@ -1,23 +0,0 @@
 import { render } from '@testing-library/react'
 import App from './App'
 // Mocks methods that are not implemented in JSDOM
 // see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
 })
 // TODO: this is not a good test and should be removed. Keeping it in to make sure the whole app renders (to be used in CI)
 test('should render the app', () => {
  render(<App />)
 })
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
 import React, { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
 import * as Sentry from '@sentry/react'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -11,8 +12,12 @@ import { Provider as FileProvider } from './providers/File'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
 import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as TopUpProvider } from './providers/TopUp'
 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
@@ -20,33 +25,56 @@ interface Props {
  lockedApiSettings?: boolean
 }
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
+if (config.SENTRY_KEY) {
-  <div className="App">
+  // eslint-disable-next-line no-console
-    <ThemeProvider theme={theme}>
+  initSentry().catch(e => console.error(e))
-      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
+}
-        <BeeProvider>
+
-          <StampsProvider>
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
-            <FileProvider>
+  const mainApp = (
-              <FeedsProvider>
+    <div className="App">
-                <PlatformProvider>
+      <ThemeProvider theme={theme}>
-                  <SnackbarProvider>
+        <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
-                    <Router>
+          <TopUpProvider>
-                      <>
+            <BeeProvider>
-                        <CssBaseline />
+              <StampsProvider>
-                        <Dashboard>
+                <FileProvider>
-                          <BaseRouter />
+                  <FeedsProvider>
-                        </Dashboard>
+                    <PlatformProvider>
-                      </>
+                      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
-                    </Router>
+                        <Router>
-                  </SnackbarProvider>
+                          <>
-                </PlatformProvider>
+                            <CssBaseline />
-              </FeedsProvider>
+                            <Dashboard>
-            </FileProvider>
+                              <BaseRouter />
-          </StampsProvider>
+                            </Dashboard>
-        </BeeProvider>
+                          </>
-      </SettingsProvider>
+                        </Router>
-    </ThemeProvider>
+                      </SnackbarProvider>
-  </div>
+                    </PlatformProvider>
-)
+                  </FeedsProvider>
                </FileProvider>
              </StampsProvider>
            </BeeProvider>
          </TopUpProvider>
        </SettingsProvider>
      </ThemeProvider>
    </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
 }
 export default App
@@ -1,54 +0,0 @@
 import { ReactElement, useState, useContext } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Alert, AlertTitle } from '@material-ui/lab'
 import Collapse from '@material-ui/core/Collapse'
 import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from '@material-ui/icons/Close'
 import { Context } from '../providers/Bee'
 import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
      marginBottom: theme.spacing(2),
    },
  }),
 )
 export default function VersionAlert(): ReactElement | null {
  const classes = useStyles()
  const { isLoading, latestUserVersionExact } = useContext(Context)
  const [open, setOpen] = useState<boolean>(true)
  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === latestUserVersionExact
  if (isLoading || !latestUserVersionExact) return null
  return (
    <Collapse in={!isExactlySupportedBeeVersion && open}>
      <div className={classes.root}>
        <Alert
          severity="warning"
          action={
            <IconButton
              aria-label="close"
              color="inherit"
              size="small"
              onClick={() => {
                setOpen(false)
              }}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          }
        >
          <AlertTitle>Warning</AlertTitle>
          Your Bee node version (<code>{latestUserVersionExact}</code>) does not exactly match the Bee version we tested
          the Bee Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality
          may not work properly.
        </Alert>
      </div>
    </Collapse>
  )
 }
@@ -0,0 +1,74 @@
 import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
 import Check from 'remixicon-react/CheckLineIcon'
 import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 interface Props {
  icon: ReactElement
  title: string
  subtitle: string
  buttonProps: SwarmButtonProps
  status: 'ok' | 'error'
 }
 const useStyles = (backgroundColor: string) =>
  makeStyles((theme: Theme) =>
    createStyles({
      root: {
        flexGrow: 1,
        flexBasis: '100px',
      },
      wrapper: {
        backgroundColor,
        padding: '16px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
      },
      iconWrapper: {
        display: 'flex',
        alignItems: 'flex-start',
        marginBottom: '18px',
      },
      button: {
        width: '100%',
        marginTop: '2px',
        backgroundColor,
        '&:hover': {
          backgroundColor: theme.palette.primary.main,
          color: 'white',
          boxShadow: 'none',
          // https://github.com/mui-org/material-ui/issues/22543
          '@media (hover: none)': {
            backgroundColor: theme.palette.primary.main,
            color: 'white',
            boxShadow: 'none',
          },
        },
      },
    }),
  )
 export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
  const backgroundColor = status === 'error' ? 'white' : '#f3f3f3'
  const { className, ...rest } = buttonProps
  const classes = useStyles(backgroundColor)()
  return (
    <div className={classes.root}>
      <div className={classes.wrapper}>
        <div className={classes.iconWrapper}>
          {icon}
          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
        </div>
        <Typography variant="h2" style={{ marginBottom: '8px' }}>
          {title}
        </Typography>
        <Typography variant="caption">{subtitle}</Typography>
      </div>
      <SwarmButton className={[classes.button, className].join(' ')} {...rest} />
    </div>
  )
 }
@@ -6,8 +6,8 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState, useContext } from 'react'
+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'
@@ -61,7 +61,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
  return (
    <div>
      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cash out peer {peerId.substr(0, 8)}[…]
+        Cash out peer {peerId.slice(0, 8)}[…]
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
@@ -79,7 +79,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
            )}
            {!loadingCashout && (
              <span>
-                Are you sure you want to cashout <strong>{uncashedAmount} BZZ</strong> from Peer{' '}
+                Are you sure you want to cashout <strong>{uncashedAmount} xBZZ</strong> from Peer{' '}
                <strong>{peerId}</strong>?
              </span>
            )}
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Clipboard } from 'react-feather'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { useSnackbar } from 'notistack'
 interface Props {
@@ -1,4 +1,5 @@
 import { Component, ErrorInfo, ReactElement } from 'react'
 import ItsBroken from '../layout/ItsBroken'
 interface Props {
  children: ReactElement
@@ -26,8 +27,7 @@ export default class ErrorBoundary extends Component<Props, State> {
  render(): ReactElement {
    if (this.state.error) {
-      // You can render any custom fallback UI
+      return <ItsBroken message={this.state.error.message} />
      return <h1>Something went wrong. Error: {this.state.error.message}</h1>
    }
    return this.props.children
@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Info } from 'react-feather'
+import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'
 const useStyles = makeStyles((theme: Theme) =>
@@ -2,10 +2,14 @@ import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Edit, Minus, Search, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import Edit from 'remixicon-react/PencilLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
 import type { RemixiconReactIconProps } from 'remixicon-react'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -53,9 +57,10 @@ interface Props {
  expandedOnly?: boolean
  confirmLabel?: string
  confirmLabelDisabled?: boolean
  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
  loading?: boolean
  onChange?: (value: string) => void
-  onConfirm: (value: string) => void
+  onConfirm?: (value: string) => void
  mapperFn?: (value: string) => string
  locked?: boolean
 }
@@ -67,6 +72,7 @@ export default function ExpandableListItemKey({
  onChange,
  confirmLabel,
  confirmLabelDisabled,
  confirmIcon,
  expandedOnly,
  helperText,
  placeholder,
@@ -137,8 +143,10 @@ 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={() => onConfirm(inputValue)}
+            onClick={() => {
              if (onConfirm) onConfirm(inputValue)
            }}
          >
            {confirmLabel || 'Save'}
          </SwarmButton>
@@ -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({
@@ -38,6 +39,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface Props {
  label: string
  value: string
  expanded?: boolean
 }
 const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
@@ -54,9 +56,9 @@ const split = (s: string): string[] => {
  return s.match(/(0x|.{1,8})/gi) || []
 }
-export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
  const classes = useStyles()
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(expanded || false)
  const [copied, setCopied] = useState(false)
  const toggleOpen = () => setOpen(!open)
@@ -0,0 +1,95 @@
 import { ReactElement, useEffect, useState } from 'react'
 import * as Sentry from '@sentry/react'
 import { Link } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import MessageSquare from 'remixicon-react/Message2LineIcon'
 import config from '../config'
 import SideBarItem from './SideBarItem'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    link: {
      color: '#9f9f9f',
      textDecoration: 'none',
      '&:hover': {
        textDecoration: 'none',
        // https://github.com/mui-org/material-ui/issues/22543
        '@media (hover: none)': {
          textDecoration: 'none',
        },
      },
    },
    icon: {
      height: theme.spacing(4),
    },
  }),
 )
 /**
 * Parses Sentry DNS so it could be transformed into API call
 * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
 */
 const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
 async function isSentryReachable(): Promise<boolean> {
  const key = config.SENTRY_KEY
  if (!key) {
    return false
  }
  const match = SENTRY_PARSING_REGEX.exec(key)
  if (!match) {
    return false
  }
  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
  try {
    await fetch(url, { method: 'POST' })
    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
    return true
  } catch (e) {
    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
    return false
  }
 }
 function showFeedbackForm(): void {
  const eventId = Sentry.captureMessage('User feedback')
  Sentry.showReportDialog({
    eventId,
    title: 'Provide us feedback!',
    subtitle: 'Share with us what you like and/or dislike.',
    subtitle2: 'We will be very happy.',
    labelComments: 'What is your impression about this app?',
    labelSubmit: 'Send Feedback',
  })
 }
 export default function Feedback(): ReactElement {
  const [sentryEnabled, setSentryEnabled] = useState(false)
  const classes = useStyles()
  // Run this only on component mount to verify once that Sentry is reachable
  useEffect(() => {
    isSentryReachable().then(result => {
      setSentryEnabled(result)
    })
  }, [])
  if (sentryEnabled) {
    return (
      <Link onClick={showFeedbackForm} className={classes.link}>
        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
      </Link>
    )
  }
  return <></>
 }
@@ -0,0 +1,110 @@
 import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
 import type { Peer } from '@ethersphere/bee-js'
 import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
 import nodesDb from '../assets/data/nodes-db.json'
 import { Context } from '../providers/Bee'
 import mapData from '../assets/data/map-data.json'
 interface Props {
  style?: CSSProperties
  error?: boolean
 }
 interface MapRecord {
  lat: number
  lng: number
 }
 type MapDB = Record<string, MapRecord>
 const fullMapDb = nodesDb as unknown as MapDB
 const deduplicatedRecords = deduplicate(fullMapDb)
 function deduplicate(db: MapDB): MapRecord[] {
  const noDuplicates: Record<string, MapRecord> = {}
  Object.entries(fullMapDb).forEach(([key, record]) => {
    noDuplicates[`${record.lat} ${record.lng}`] = record
  })
  return Object.values(noDuplicates)
 }
 function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
  const noDuplicates: Record<string, MapRecord> = {}
  peers.forEach(({ address }) => {
    const record = db[address]
    if (record) noDuplicates[`${record.lat} ${record.lng}`] = record
  })
  return Object.values(noDuplicates)
 }
 function addPins(map: DottedMap, pins: MapRecord[], color: string) {
  pins.forEach(({ lat, lng }) => {
    map.addPin({ lat, lng, svgOptions: { color } })
  })
 }
 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, 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, error])
  return (
    <div
      style={Object.assign({}, style, {
        width: '100%',
        height: '380px',
        backgroundColor: '#f3f3f3',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
      })}
    >
      <img
        alt="world map"
        src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
      />
      {error && (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="60"
          height="60"
          viewBox="0 0 24 24"
          fill="#f44336"
          strokeWidth="0"
          strokeLinecap="round"
          strokeLinejoin="round"
          style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.25 }}
        >
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="9" x2="12" y2="13"></line>
          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
      )}
    </div>
  )
 }
@@ -1,47 +1,24 @@
 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 type { ReactElement } from 'react'
 import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
-import Logo from '../assets/logo.svg'
+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 TopUpContext } from '../providers/TopUp'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
 import { config } from '../config'
 import { useIsBeeDesktop } from '../hooks/apiHooks'
 import { ROUTES } from '../routes'
 import Feedback from './Feedback'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-
+import { BeeModes } from '@ethersphere/bee-js'
 const navBarItems = [
  {
    label: 'Info',
    path: ROUTES.INFO,
    icon: Home,
  },
  {
    label: 'Files',
    path: ROUTES.UPLOAD,
    icon: FileText,
  },
  {
    label: 'Feeds',
    path: ROUTES.FEEDS,
    icon: Bookmark,
  },
  {
    label: 'Stamps',
    path: ROUTES.STAMPS,
    icon: Layers,
  },
  {
    label: 'Accounting',
    path: ROUTES.ACCOUNTING,
    icon: DollarSign,
  },
  {
    label: 'Settings',
    path: ROUTES.SETTINGS,
    icon: Settings,
  },
 ]
 const drawerWidth = 300
@@ -60,6 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
    drawerPaper: {
      width: drawerWidth,
      backgroundColor: '#212121',
      zIndex: 988,
    },
    logo: {
      marginLeft: theme.spacing(8),
@@ -68,9 +46,6 @@ const useStyles = makeStyles((theme: Theme) =>
    icon: {
      height: theme.spacing(4),
    },
    iconSmall: {
      height: theme.spacing(2),
    },
    divider: {
      backgroundColor: '#2c2c2c',
      marginLeft: theme.spacing(4),
@@ -93,13 +68,41 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function SideBar(): ReactElement {
  const classes = useStyles()
  const { isBeeDesktop } = useIsBeeDesktop()
  const { providerUrl } = useContext(TopUpContext)
  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: providerUrl === null ? ROUTES.WALLET : 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={Logo} />
+            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
        </Grid>
        <Grid>
@@ -110,6 +113,7 @@ export default function SideBar(): ReactElement {
                  key={p.path}
                  iconStart={<p.icon className={classes.icon} />}
                  path={p.path}
                  pathMatcherSubstring={p.pathMatcherSubstring}
                  label={p.label}
                />
              </Link>
@@ -119,17 +123,20 @@ export default function SideBar(): ReactElement {
          <List>
            <MUILink href={config.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>
          </List>
        </Grid>
        <Grid>
-          <Link to={ROUTES.STATUS} className={classes.link}>
+          <List>
-            <SideBarStatus path={ROUTES.STATUS} />
+            <Link to={ROUTES.STATUS} className={classes.link}>
-          </Link>
+              <SideBarStatus path={ROUTES.STATUS} />
            </Link>
            <Feedback />
          </List>
        </Grid>
      </Grid>
    </Drawer>
@@ -1,8 +1,7 @@
 import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
 import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
 import type { ReactElement, ReactNode } from 'react'
-import { useLocation, matchPath } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
 const StyledListItem = withStyles((theme: Theme) => ({
  root: {
@@ -45,12 +44,15 @@ interface Props {
  iconEnd?: ReactNode
  path?: string
  label: ReactNode
  pathMatcherSubstring?: string
 }
-export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
  const classes = useStyles()
  const location = useLocation()
-  const isSelected = Boolean(path && matchPath(location.pathname, path))
+  const isSelected = pathMatcherSubstring
    ? location.pathname.startsWith(pathMatcherSubstring)
    : Boolean(path && matchPath(location.pathname, path))
  return (
    <StyledListItem button selected={isSelected} disableRipple>
@@ -1,6 +1,6 @@
 import { ReactElement, useContext } from 'react'
 import { useLocation, matchPath } from 'react-router-dom'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
@@ -1,13 +1,9 @@
-import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+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'
-interface Props {
+export interface SwarmButtonProps extends ButtonProps {
-  onClick: () => void
+  iconType: React.ComponentType<RemixiconReactIconProps>
  iconType: React.ComponentType<IconProps>
  children: string
  className?: string
  disabled?: boolean
  loading?: boolean
  cancel?: boolean
  variant?: 'text' | 'contained' | 'outlined'
@@ -16,13 +12,13 @@ interface Props {
 const useStyles = makeStyles(() =>
  createStyles({
    button: {
-      height: '52px',
+      height: '42px',
      position: 'relative',
      whiteSpace: 'nowrap',
      color: '#242424',
      '&:hover, &:focus': {
        '& svg': {
-          stroke: '#fff',
+          fill: '#fff',
          transition: '0.1s',
        },
      },
@@ -51,7 +47,9 @@ export function SwarmButton({
  loading,
  cancel,
  variant = 'contained',
-}: Props): ReactElement {
+  style,
  ...other
 }: SwarmButtonProps): ReactElement {
  const classes = useStyles()
  function getIconColor() {
@@ -73,14 +71,18 @@ export function SwarmButton({
  return (
    <Button
      style={style}
      className={getButtonClassName()}
      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick()
+        if (onClick) {
-        event.currentTarget.blur()
+          onClick(event)
          event.currentTarget.blur()
        }
      }}
      variant={variant}
      startIcon={icon}
      disabled={disabled}
      {...other}
    >
      {children}
      {loading && (
@@ -0,0 +1,17 @@
 import { Box, Divider } from '@material-ui/core'
 import { ReactElement } from 'react'
 interface Props {
  my?: number
  mt?: number
  mb?: number
  color?: string
 }
 export function SwarmDivider({ my, mt, mb, color = '#cbcbcb' }: Props): ReactElement {
  return (
    <Box my={my} mt={mt} mb={mb}>
      <Divider style={{ borderColor: color }} />
    </Box>
  )
 }
@@ -1,13 +1,27 @@
-import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
 import { Field } from 'formik'
 import { Select } from 'formik-material-ui'
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
 export type SelectEvent = React.ChangeEvent<{
  name?: string | undefined
  value: unknown
 }>
 function renderValue(value: unknown): ReactNode {
  if (typeof value === 'string') {
    return value
  }
  const label = Reflect.get(value as object, 'label')
  if (label) {
    return label
  }
  return value as ReactNode
 }
 interface Props {
  label?: string
  name?: string
@@ -15,6 +29,7 @@ interface Props {
  onChange?: (event: SelectEvent) => void
  formik?: boolean
  defaultValue?: string
  placeholder?: string
 }
 const useStyles = makeStyles((theme: Theme) =>
@@ -37,7 +52,15 @@ const useStyles = makeStyles((theme: Theme) =>
  }),
 )
-export function SwarmSelect({ defaultValue, formik, name, options, onChange, label }: Props): ReactElement {
+export function SwarmSelect({
  defaultValue,
  formik,
  name,
  options,
  onChange,
  label,
  placeholder,
 }: Props): ReactElement {
  const classes = useStyles()
  if (formik) {
@@ -50,9 +73,10 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
          name={name}
          fullWidth
          variant="outlined"
-          defaultValue={defaultValue || ''}
+          defaultValue={defaultValue}
          className={classes.select}
-          placeholder={label}
+          displayEmpty
          renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
        >
          {options.map((x, i) => (
@@ -68,15 +92,16 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
  return (
    <>
      {label && <FormHelperText>{label}</FormHelperText>}
-      <SimpleSelect
+      <MuiSelect
        required
        name={name}
        fullWidth
        variant="outlined"
        className={classes.select}
-        defaultValue={defaultValue || ''}
+        defaultValue={defaultValue}
        onChange={onChange}
-        placeholder={label}
+        displayEmpty
        renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
      >
        {options.map((x, i) => (
@@ -84,7 +109,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
            {x.label}
          </MenuItem>
        ))}
-      </SimpleSelect>
+      </MuiSelect>
    </>
  )
 }
@@ -10,6 +10,7 @@ interface Props {
  formik?: boolean
  optional?: boolean
  defaultValue?: string
  placeholder?: string
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }
@@ -41,6 +42,7 @@ export function SwarmTextInput({
  formik,
  onChange,
  defaultValue,
  placeholder,
 }: Props): ReactElement {
  const classes = useStyles()
@@ -57,6 +59,7 @@ export function SwarmTextInput({
        className={classes.field}
        defaultValue={defaultValue || ''}
        InputProps={{ disableUnderline: true }}
        placeholder={placeholder}
      />
    )
  }
@@ -72,6 +75,7 @@ export function SwarmTextInput({
      defaultValue={defaultValue || ''}
      onChange={onChange}
      InputProps={{ disableUnderline: true }}
      placeholder={placeholder}
    />
  )
 }
@@ -1,7 +1,7 @@
 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'
@@ -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>
  )
 }
@@ -96,7 +96,7 @@ export default function WithdrawDepositModal({
          />
          {amountError && (
            <FormHelperText error>
-              Please provide valid BZZ amount (max 16 decimals). Error: {amountError.message}
+              Please provide valid xBZZ amount (max 16 decimals). Error: {amountError.message}
            </FormHelperText>
          )}
        </DialogContent>
@@ -1,7 +1,3 @@
 function getProcessEnv(key: string): string | undefined | false {
  return typeof process === 'object' && process.env[key]
 }
 class Config {
  public readonly BEE_API_HOST: string
  public readonly BEE_DEBUG_API_HOST: string
@@ -10,19 +6,21 @@ class Config {
  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 =
+    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
-      sessionStorage.getItem('api_host') || getProcessEnv('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') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
+      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
    this.BLOCKCHAIN_EXPLORER_URL =
-      getProcessEnv('REACT_APP_BLOCKCHAIN_EXPLORER_URL') || 'https://blockscout.com/xdai/mainnet'
+      process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet'
-    this.BEE_DOCS_HOST = getProcessEnv('REACT_APP_BEE_DOCS_HOST') || 'https://docs.ethswarm.org/docs/'
+    this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/'
-    this.BEE_DISCORD_HOST = getProcessEnv('REACT_APP_BEE_DISCORD_HOST') || 'https://discord.gg/eKr9XPv7'
+    this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
-    this.GITHUB_REPO_URL =
+    this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
-      getProcessEnv('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
    this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
  }
 }
@@ -1,3 +1,4 @@
 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'
@@ -1,5 +1,5 @@
 import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -12,7 +12,7 @@ export default function DepositModal(): ReactElement {
    <WithdrawDepositModal
      successMessage="Successful deposit."
      errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
+      dialogMessage="Specify the amount of xBZZ you would like to deposit to your node."
      label="Deposit"
      icon={<Download size="1rem" />}
      min={new BigNumber(0)}
@@ -1,6 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
-import { Upload } from 'react-feather'
+import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as SettingsContext } from '../providers/Settings'
@@ -11,7 +11,7 @@ export default function WithdrawModal(): ReactElement {
    <WithdrawDepositModal
      successMessage="Successful withdrawal."
      errorMessage="Error with withdrawing."
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Specify the amount of xBZZ you would like to withdraw from your node."
      label="Withdraw"
      icon={<Upload size="1rem" />}
      min={new BigNumber(0)}
@@ -1,6 +1,8 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { config } from '../config'
 import { getJson } from '../utils/net'
 import { getLatestBeeDesktopVersion } from '../utils/desktop'
 export interface LatestBeeReleaseHook {
  latestBeeRelease: LatestBeeRelease | null
@@ -11,6 +13,12 @@ export interface LatestBeeReleaseHook {
 export interface IsBeeDesktopHook {
  isBeeDesktop: boolean
  isLoading: boolean
  beeDesktopVersion: string
  desktopAutoUpdateEnabled: boolean
 }
 export interface NewDesktopVersionHook {
  newBeeDesktopVersion: string
 }
 interface Config {
@@ -24,14 +32,19 @@ interface Config {
 */
 export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
  const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
  const [isLoading, setLoading] = useState<boolean>(true)
  useEffect(() => {
    axios
      .get(`${conf.BEE_DESKTOP_URL}/info`)
      .then(res => {
-        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        if (res.data?.name === 'bee-desktop') {
-        else setIsBeeDesktop(false)
+          setIsBeeDesktop(true)
          setBeeDesktopVersion(res.data?.version)
          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
        } else setIsBeeDesktop(false)
      })
      .catch(() => {
        setIsBeeDesktop(false)
@@ -41,7 +54,85 @@ export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
      })
  }, [conf])
-  return { isBeeDesktop, isLoading }
+  return { isBeeDesktop, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
 }
 async function checkNewVersion(conf: Config): Promise<string> {
  const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json()
  const currentVersion = resJson.version
  const latestVersion = await getLatestBeeDesktopVersion()
  if (currentVersion !== latestVersion) {
    return latestVersion
  }
  return ''
 }
 export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook {
  const [newBeeDesktopVersion, setNewNewBeeDesktopVersion] = useState<string>('')
  useEffect(() => {
    if (!isBeeDesktop) {
      return
    }
    checkNewVersion(conf).then(version => {
      if (version !== '') {
        setNewNewBeeDesktopVersion(version)
      }
    })
  }, [isBeeDesktop, conf])
  return { newBeeDesktopVersion }
 }
 export interface BeeConfig {
  'api-addr': string
  'debug-api-addr': string
  'debug-api-enable': boolean
  password: string
  'swap-enable': boolean
  'swap-initial-deposit': bigint
  mainnet: boolean
  'full-node': boolean
  'chain-enable': boolean
  'cors-allowed-origins': string
  'resolver-options': string
  'use-postage-snapshot': boolean
  'data-dir': string
  transaction: string
  'block-hash': string
  'swap-endpoint'?: string
 }
 export interface GetBeeConfig {
  config: BeeConfig | null
  isLoading: boolean
  error: Error | null
 }
 export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
  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`)
      .then(beeConf => {
        setBeeConfig(beeConf)
        setError(null)
      })
      .catch((err: Error) => {
        setError(err)
        setBeeConfig(null)
      })
      .finally(() => {
        setLoading(false)
      })
  }, [conf])
  return { config: beeConfig, isLoading, error }
 }
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
@@ -2,9 +2,8 @@ body {
  height: 100vh;
  min-height: 100vh;
  margin: 0;
-  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -16,6 +15,12 @@ body {
 }
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    monospace;
+}
 .sentry-error-embed * {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -1,13 +1,16 @@
-import { useContext, ReactElement } from 'react'
+import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import React, { ReactElement, useContext, useEffect } from 'react'
 import { useSnackbar } from 'notistack'
 import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
 import AlertVersion from '../components/AlertVersion'
 import { Container, CircularProgress } from '@material-ui/core'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import SideBar from '../components/SideBar'
 import { Context } from '../providers/Bee'
 import config from '../config'
 import * as Sentry from '@sentry/react'
 import ItsBroken from './ItsBroken'
 import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -26,24 +29,71 @@ const Dashboard = (props: Props): ReactElement => {
  const classes = useStyles()
  const { isLoading } = useContext(Context)
  const { isBeeDesktop, desktopAutoUpdateEnabled } = useIsBeeDesktop()
  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
  useEffect(() => {
    if (!desktopAutoUpdateEnabled && 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 ? (
        <div style={{ textAlign: 'center', width: '100%' }}>
          <CircularProgress />
        </div>
      ) : (
        props.children
      )}
    </>
  )
  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}>
+      <Container className={classes.content}>{errorBoundaryWithContent}</Container>
        <ErrorBoundary>
          <>
            <AlertVersion />
            {isLoading ? (
              <div style={{ textAlign: 'center', width: '100%' }}>
                <CircularProgress />
              </div>
            ) : (
              props.children
            )}
          </>
        </ErrorBoundary>
      </Container>
    </div>
  )
 }
@@ -0,0 +1,36 @@
 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
@@ -0,0 +1,8 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 export class BzzToken extends Token {
  constructor(amount: BigNumber | string | bigint) {
    super(amount, 16)
  }
 }
@@ -0,0 +1,8 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 export class DaiToken extends Token {
  constructor(amount: BigNumber | string | bigint) {
    super(amount, 18)
  }
 }
@@ -10,10 +10,12 @@ export class Token {
  private amount: BigNumber // Represented in the base units, so it is always an integer value
  private readonly decimals: digits
-  constructor(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS) {
+  constructor(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS) {
    const a = makeBigNumber(amount)
-    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) throw new TypeError('Not a valid token values')
+    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
      throw new TypeError(`Not a valid token values: ${amount} ${decimals}`)
    }
    this.amount = a
    this.decimals = decimals
@@ -29,7 +31,7 @@ export class Token {
   *
   * @returns new Token
   */
-  static fromDecimal(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS): Token | never {
+  static fromDecimal(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS): Token | never {
    const a = makeBigNumber(amount)
    // No need to do any validation here, it is done when the new token is created
@@ -38,7 +40,7 @@ export class Token {
    return new Token(t, decimals)
  }
-  get toBigInt(): BigInt {
+  get toBigInt(): bigint {
    return BigInt(this.amount.toFixed(0))
  }
@@ -59,7 +61,7 @@ export class Token {
  }
  toSignificantDigits(digits = 4): string {
-    const asString = this.toDecimal.toFixed(16)
+    const asString = this.toDecimal.toFixed(this.decimals)
    let indexOfSignificantDigit = -1
    let reachedDecimalPoint = false
@@ -78,4 +80,11 @@ export class Token {
    return asString.slice(0, indexOfSignificantDigit + digits)
  }
  minusBaseUnits(amount: string): Token {
    return new Token(
      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
      this.decimals,
    )
  }
 }
@@ -0,0 +1,55 @@
 import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
 import { ReactElement } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ACCOUNT_TABS } from '../../routes'
 const tabMap = {
  WALLET: 0,
  CHEQUEBOOK: 1,
  STAMPS: 2,
  FEEDS: 3,
 }
 interface Props {
  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
 }
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
      marginBottom: theme.spacing(4),
      textTransform: 'none',
    },
    leftTab: {
      marginRight: theme.spacing(0.125),
    },
    centerTab: {
      marginLeft: theme.spacing(0.125),
      marginRight: theme.spacing(0.125),
    },
    rightTab: {
      marginLeft: theme.spacing(0.125),
    },
  }),
 )
 export function AccountNavigation({ active }: Props): ReactElement {
  const classes = useStyles()
  const navigate = useNavigate()
  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
    navigate(ACCOUNT_TABS[newValue])
  }
  return (
    <div className={classes.root}>
      <Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
        <Tab className={classes.leftTab} key="WALLET" label="Wallet" />
        <Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
        <Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
        <Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
      </Tabs>
    </div>
  )
 }
@@ -0,0 +1,10 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
 export function Header(): ReactElement {
  return (
    <Box mb={4}>
      <Typography variant="h1">Account</Typography>
    </Box>
  )
 }
@@ -0,0 +1,67 @@
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
 import DepositModal from '../../../containers/DepositModal'
 import WithdrawModal from '../../../containers/WithdrawModal'
 import { useAccounting } from '../../../hooks/accounting'
 import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import PeerBalances from '../../accounting/PeerBalances'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 export function AccountChequebook(): ReactElement {
  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
    useContext(BeeContext)
  const { beeDebugApi } = useContext(SettingsContext)
  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
  const showChequebook = chequebookBalance?.totalBalance !== undefined
  return (
    <>
      <Header />
      <AccountNavigation active="CHEQUEBOOK" />
      <div>
        {showChequebook && (
          <ExpandableList label="Chequebook" defaultOpen>
            <ExpandableListItem
              label="Total Balance"
              value={`${chequebookBalance?.totalBalance.toFixedDecimal()} xBZZ`}
            />
            <ExpandableListItem
              label="Available Uncommitted Balance"
              value={`${chequebookBalance?.availableBalance.toFixedDecimal()} xBZZ`}
            />
            <ExpandableListItem
              label="Total Cheques Amount Sent"
              value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
            />
            <ExpandableListItem
              label="Total Cheques Amount Received"
              value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
            />
            <ExpandableListItemActions>
              <WithdrawModal />
              <DepositModal />
            </ExpandableListItemActions>
          </ExpandableList>
        )}
        <ExpandableList label="Blockchain" defaultOpen>
          <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
          <ExpandableListItemKey
            label="Chequebook contract address"
            value={chequebookAddress?.chequebookAddress || ''}
          />
        </ExpandableList>
        <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
      </div>
    </>
  )
 }
@@ -0,0 +1,120 @@
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
 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'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../../components/SwarmButton'
 import { Context as IdentityContext, Identity } from '../../../providers/Feeds'
 import { ROUTES } from '../../../routes'
 import { formatEnum } from '../../../utils'
 import { persistIdentitiesWithoutUpdate } from '../../../utils/identity'
 import { DeleteFeedDialog } from '../../feeds/DeleteFeedDialog'
 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()
  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
  const [showImport, setShowImport] = useState(false)
  const [showExport, setShowExport] = useState(false)
  const [showDelete, setShowDelete] = useState(false)
  function createNewFeed() {
    return navigate(ROUTES.ACCOUNT_FEEDS_NEW)
  }
  function viewFeed(uuid: string) {
    navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uuid))
  }
  function onDialogClose() {
    setShowDelete(false)
    setShowExport(false)
    setShowImport(false)
    setSelectedIdentity(null)
  }
  function onDelete(identity: Identity) {
    onDialogClose()
    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
    setIdentities(updatedFeeds)
    persistIdentitiesWithoutUpdate(updatedFeeds)
  }
  function onShowExport(identity: Identity) {
    setSelectedIdentity(identity)
    setShowExport(true)
  }
  function onShowDelete(identity: Identity) {
    setSelectedIdentity(identity)
    setShowDelete(true)
  }
  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
  return (
    <>
      <Header />
      <AccountNavigation active="FEEDS" />
      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
      {showDelete && selectedIdentity && (
        <DeleteFeedDialog
          identity={selectedIdentity}
          onClose={onDialogClose}
          onConfirm={(identity: Identity) => onDelete(identity)}
        />
      )}
      <Box mb={4}>
        <ExpandableListItemActions>
          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
            Create New Feed
          </SwarmButton>
          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
            Import Feed
          </SwarmButton>
        </ExpandableListItemActions>
      </Box>
      {identities.map((x, i) => (
        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
          <Box mb={0.5}>
            <ExpandableList label={x.name} level={1}>
              <ExpandableListItemKey label="Identity address" value={x.address} />
              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
            </ExpandableList>
          </Box>
          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
          <Box mt={0.75}>
            <ExpandableListItemActions>
              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
                View Feed Page
              </SwarmButton>
              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
                Export...
              </SwarmButton>
              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
                Delete...
              </SwarmButton>
            </ExpandableListItemActions>
          </Box>
        </ExpandableList>
      ))}
    </>
  )
 }
@@ -0,0 +1,75 @@
 import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
 import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
 import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 import { Context as StampsContext } from '../../../providers/Stamps'
 import { ROUTES } from '../../../routes'
 import StampsTable from '../../stamps/StampsTable'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 const useStyles = makeStyles(() =>
  createStyles({
    root: {
      width: '100%',
      display: 'grid',
    },
    actions: {
      display: 'flex',
      width: '100%',
      flex: '0 1 auto',
      flexWrap: 'wrap',
      alignItems: 'center',
    },
  }),
 )
 export function AccountStamps(): ReactElement {
  const classes = useStyles()
  const navigate = useNavigate()
  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
  const { status } = useContext(BeeContext)
  useEffect(() => {
    if (!status.all) return
    start()
    return () => stop()
  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
  function navigateToNewStamp() {
    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
  }
  return (
    <>
      <Header />
      <AccountNavigation active="STAMPS" />
      <div className={classes.root}>
        {error && (
          <Container style={{ textAlign: 'center', padding: '50px' }}>
            Error loading postage stamps details: {error.message}
          </Container>
        )}
        {!error && (
          <>
            <div className={classes.actions}>
              <SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
                Buy New Postage Stamp
              </SwarmButton>
              <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
            </div>
            <StampsTable postageStamps={stamps} />
          </>
        )}
      </div>
    </>
  )
 }
@@ -0,0 +1,74 @@
 import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 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 { ROUTES } from '../../../routes'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 export function AccountWallet(): ReactElement {
  const { balance, nodeAddresses, nodeInfo } = useContext(Context)
  const navigate = useNavigate()
  function onCheckTransactions() {
    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
  }
  function onInvite() {
    navigate(ROUTES.ACCOUNT_INVITATIONS)
  }
  function onDeposit() {
    navigate(ROUTES.CONFIRMATION)
  }
  return (
    <>
      <Header />
      {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}>
            Top up wallet
          </SwarmButton>
        </Grid>
      </Box>
      {balance && nodeAddresses ? (
        <>
          <Box mb={0.25}>
            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
          </Box>
          <Box mb={0.25}>
            <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
          </Box>
          <Box mb={2}>
            <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
          </Box>
        </>
      ) : (
        <Box mb={8}>
          <Loading />
        </Box>
      )}
      <ExpandableListItemActions>
        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
          Check transactions on Blockscout
        </SwarmButton>
        <SwarmButton onClick={onInvite} iconType={Gift}>
          Invite to Swarm...
        </SwarmButton>
      </ExpandableListItemActions>
    </>
  )
 }
@@ -1,11 +1,9 @@
 import type { ReactElement } from 'react'
-
+import CashoutModal from '../../components/CashoutModal'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import CashoutModal from '../../components/CashoutModal'
 import { Accounting } from '../../hooks/accounting'
 import type { Token } from '../../models/Token'
@@ -19,26 +17,26 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
  return (
    <ExpandableList
      label={`Peers (${accounting?.length || 0})`}
-      info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
+      info={`${totalUncashed.toFixedDecimal()} xBZZ (uncashed)`}
    >
-      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
+      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} xBZZ`} />
      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
        <ExpandableList
          key={peer}
-          label={`Peer ${peer.substr(0, 8)}[…]`}
+          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>
@@ -1,52 +0,0 @@
 import { ReactElement, useContext } from 'react'
 import PeerBalances from './PeerBalances'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { useAccounting } from '../../hooks/accounting'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import WithdrawModal from '../../containers/WithdrawModal'
 import DepositModal from '../../containers/DepositModal'
 export default function Accounting(): ReactElement {
  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
    useContext(BeeContext)
  const { beeDebugApi } = useContext(SettingsContext)
  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
  return (
    <div>
      <ExpandableList label="Chequebook" defaultOpen>
        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
        <ExpandableListItem
          label="Available Uncommitted Balance"
          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
        />
        <ExpandableListItem
          label="Total Cheques Amount Sent"
          value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
        />
        <ExpandableListItem
          label="Total Cheques Amount Received"
          value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
        />
        <ExpandableListItemActions>
          <WithdrawModal />
          <DepositModal />
        </ExpandableListItemActions>
      </ExpandableList>
      <ExpandableList label="Blockchain" defaultOpen>
        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
      </ExpandableList>
      <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
    </div>
  )
 }
@@ -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'
@@ -65,7 +66,7 @@ export default function CreateNewFeed(): ReactElement {
    const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
    persistIdentity(identities, identity)
    setIdentities(identities)
-    navigate(ROUTES.FEEDS)
+    navigate(ROUTES.ACCOUNT_FEEDS)
    setLoading(false)
  }
@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Trash, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
 import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'
@@ -2,7 +2,8 @@ import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import { useSnackbar } from 'notistack'
 import { ReactElement } from 'react'
-import { Clipboard, Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
 import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { Code } from '../../components/Code'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'
@@ -1,8 +1,8 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
-import { useParams, useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -40,13 +40,13 @@ export function FeedSubpage(): ReactElement {
  }, [beeApi, uuid, identity])
  if (!identity || !status.all) {
-    navigate(ROUTES.FEEDS, { replace: true })
+    navigate(ROUTES.ACCOUNT_FEEDS, { replace: true })
    return <></>
  }
  function onClose() {
-    navigate(ROUTES.FEEDS)
+    navigate(ROUTES.ACCOUNT_FEEDS)
  }
  return (
@@ -1,7 +1,8 @@
 import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useRef, useState } from 'react'
-import { Check, Upload } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import Upload from 'remixicon-react/UploadLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'
@@ -1,8 +1,9 @@
 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 { useParams, useNavigate } from 'react-router'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -73,10 +74,10 @@ export default function UpdateFeed(): ReactElement {
    }
    try {
-      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+      await updateFeed(beeApi, beeDebugApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
      persistIdentity(identities, identity)
      setIdentities([...identities])
-      navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
+      navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', identity.uuid))
    } catch (error: unknown) {
      setLoading(false)
@@ -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'
@@ -29,11 +32,11 @@ export default function Feeds(): ReactElement {
  const [showDelete, setShowDelete] = useState(false)
  function createNewFeed() {
-    return navigate(ROUTES.FEEDS_NEW)
+    return navigate(ROUTES.ACCOUNT_FEEDS_NEW)
  }
  function viewFeed(uuid: string) {
-    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
+    navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uuid))
  }
  function onDialogClose() {
@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { File, Folder } from 'react-feather'
+import File from 'remixicon-react/FileLineIcon'
 import Folder from 'remixicon-react/FolderLineIcon'
 import { FitImage } from '../../components/FitImage'
 import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
@@ -1,25 +1,32 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 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'
 interface Props {
  isWebsite?: boolean
-  hash: string
+  reference: string
 }
-export function AssetSummary({ isWebsite, hash }: Props): ReactElement {
+export function AssetSummary({ isWebsite, reference }: Props): ReactElement {
  const isHash = Utils.isHexString(reference) && reference.length === 64
  return (
    <>
      <Box mb={4}>
-        <ExpandableListItemKey label="Swarm hash" value={hash} />
+        {isHash && <ExpandableListItemKey label="Swarm hash" value={reference} />}
-        <ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
+        {!isHash && <ExpandableListItemLink label="ENS" value={reference} />}
-        {isWebsite && (
+        <ExpandableListItemLink
          label="Share on Swarm Gateway"
          value={`https://gateway.ethswarm.org/access/${reference}`}
        />
        {isWebsite && isHash && (
          <ExpandableListItemLink
            label="BZZ Link"
-            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
+            value={`https://${swarmCid.encodeManifestReference(reference).toString()}.bzz.link`}
          />
        )}
      </Box>
@@ -1,14 +1,16 @@
-import { Utils } from '@ethersphere/bee-js'
+import { BeeModes, Utils } from '@ethersphere/bee-js'
 import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Search from 'remixicon-react/SearchLineIcon'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
-import { Context, defaultUploadOrigin } from '../../providers/File'
+import { Context as FileContext, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
-import { extractSwarmHash } from '../../utils'
+import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FileNavigation } from './FileNavigation'
@@ -16,17 +18,25 @@ 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()
  const validateChange = (value: string) => {
-    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
+    if (
      Utils.isHexString(value, 64) ||
      Utils.isHexString(value, 128) ||
      !value.trim().length ||
      regexpEns.test(value)
    ) {
      setReferenceError(undefined)
    } else {
-      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+      setReferenceError(
        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
      )
    }
  }
@@ -71,23 +81,9 @@ export function Download(): ReactElement {
    }
  }
  function recognizeSwarmHash(value: string) {
    if (value.length < 64) {
      return value
    }
    const hash = extractSwarmHash(value)
    if (hash) {
      return hash
    }
    return value
  }
  return (
    <>
-      <FileNavigation active="DOWNLOAD" />
+      {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <FileNavigation active="DOWNLOAD" />}
      <ExpandableListItemInput
        label="Swarm Hash"
        onConfirm={value => onSwarmIdentifier(value)}
@@ -95,9 +91,10 @@ export function Download(): ReactElement {
        helperText={referenceError}
        confirmLabel={'Find'}
        confirmLabelDisabled={Boolean(referenceError) || loading}
        confirmIcon={Search}
        placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
        expandedOnly
-        mapperFn={value => recognizeSwarmHash(value)}
+        mapperFn={value => recognizeEnsOrSwarmHash(value)}
        loading={loading}
      />
      <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
@@ -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'
@@ -1,5 +1,5 @@
 import { Button, ListItemIcon, Menu, MenuItem, Typography } from '@material-ui/core'
 import React, { ReactElement } from 'react'
 import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 interface Props {
@@ -35,7 +35,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
            selected={stamp.batchID === selectedStamp?.batchID}
          >
            <ListItemIcon>{stamp.usageText}</ListItemIcon>
-            <Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
+            <Typography variant="body2">{stamp.batchID.slice(0, 8)}[…]</Typography>
          </MenuItem>
        ))}
      </Menu>
@@ -99,7 +99,7 @@ export function Share(): ReactElement {
  }
  function onUpdateFeed() {
-    navigate(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
+    navigate(ROUTES.ACCOUNT_FEEDS_UPDATE.replace(':hash', reference))
  }
  useEffect(() => {
@@ -151,7 +151,7 @@ export function Share(): ReactElement {
        <AssetPreview metadata={metadata} previewUri={preview} />
      </Box>
      <Box mb={4}>
-        <AssetSummary isWebsite={metadata?.isWebsite} hash={reference} />
+        <AssetSummary isWebsite={metadata?.isWebsite} reference={reference} />
      </Box>
      <DownloadActionBar
        onOpen={onOpen}
@@ -6,12 +6,14 @@ import { DocumentationText } from '../../components/DocumentationText'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as IdentityContext, Identity } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
 import { waitUntilStampUsable } from '../../utils'
 import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
@@ -21,7 +23,6 @@ import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 export function Upload(): ReactElement {
  const [step, setStep] = useState(0)
@@ -30,8 +31,8 @@ export function Upload(): ReactElement {
  const [isUploading, setUploading] = useState(false)
  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
-  const { refresh } = useContext(StampsContext)
+  const { stamps, refresh } = useContext(StampsContext)
-  const { beeApi } = useContext(SettingsContext)
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
  const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
  const { identities, setIdentities } = useContext(IdentityContext)
  const { status } = useContext(BeeContext)
@@ -39,6 +40,8 @@ export function Upload(): ReactElement {
  const { enqueueSnackbar } = useSnackbar()
  const navigate = useNavigate()
  const hasAnyStamps = stamps !== null && stamps.length > 0
  useEffect(() => {
    refresh()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps
@@ -66,12 +69,12 @@ export function Upload(): ReactElement {
    }
  }
-  const uploadFiles = (password?: string) => {
+  const uploadFiles = async (password?: string) => {
    if (!beeApi || !files.length || !stamp || !metadata) {
      return
    }
-    let fls = files.map(packageFile) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
+    let 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
@@ -83,11 +86,11 @@ export function Upload(): ReactElement {
        // The website is in some directory, remove it
        if (idx.commonPrefix) {
          const substrStart = idx.commonPrefix.length
-          indexDocument = idx.indexPath.substr(substrStart)
+          indexDocument = idx.indexPath.slice(substrStart)
-          fls = fls.map(f => {
+          fls = files.map(f => {
-            const path = (f.path as string).substr(substrStart)
+            const path = (f.path as string).slice(substrStart)
-            return { ...f, path, webkitRelativePath: path, fullPath: path }
+            return packageFile(f, path)
          })
        } else {
          // The website is not packed in a directory
@@ -122,6 +125,10 @@ export function Upload(): ReactElement {
    setUploading(true)
    if (beeDebugApi) {
      await waitUntilStampUsable(stamp.batchID, beeDebugApi)
    }
    beeApi
      .uploadFiles(stamp.batchID, fls, { indexDocument })
      .then(hash => {
@@ -130,11 +137,13 @@ export function Upload(): ReactElement {
        if (uploadOrigin.origin === 'UPLOAD') {
          navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
        } else {
-          updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
+          updateFeed(beeApi, beeDebugApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(
-            persistIdentity(identities, identity as Identity)
+            () => {
-            setIdentities([...identities])
+              persistIdentity(identities, identity as Identity)
-            navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
+              setIdentities([...identities])
-          })
+              navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
            },
          )
        }
      })
      .catch(e => {
@@ -173,7 +182,7 @@ export function Upload(): ReactElement {
      {step === 1 && (
        <>
          <Box mb={2}>
-            {stampMode === 'SELECT' ? (
+            {hasAnyStamps && stampMode === 'SELECT' ? (
              <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
            ) : (
              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
@@ -203,6 +212,7 @@ export function Upload(): ReactElement {
        onUpload={onUpload}
        isUploading={isUploading}
        hasStamp={Boolean(stamp)}
        hasAnyStamps={hasAnyStamps}
        uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
        stampMode={stampMode}
        setStampMode={setStampMode}
@@ -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'
@@ -13,6 +17,7 @@ interface Props {
  onProceed: () => void
  isUploading: boolean
  hasStamp: boolean
  hasAnyStamps: boolean
  uploadLabel: string
  stampMode: 'BUY' | 'SELECT'
  setStampMode: (mode: 'BUY' | 'SELECT') => void
@@ -26,6 +31,7 @@ export function UploadActionBar({
  onProceed,
  isUploading,
  hasStamp,
  hasAnyStamps,
  uploadLabel,
  stampMode,
  setStampMode,
@@ -43,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>
      </>
    )
  }
@@ -61,12 +77,15 @@ export function UploadActionBar({
            Back To Preview
          </SwarmButton>
        </ExpandableListItemActions>
-        <SwarmButton
+        {hasAnyStamps && (
-          onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
+          <SwarmButton
-          iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+            disabled={stampMode === 'BUY' && !hasAnyStamps}
-        >
+            onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
-          {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+            iconType={stampMode === 'BUY' ? Layers : PlusSquare}
-        </SwarmButton>
+          >
            {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
          </SwarmButton>
        )}
      </Grid>
    )
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bee-worker	4c6d97ce00	chore(master): release 0.18.0 (#408 )	2022-07-04 16:26:33 +02:00
Cafe137	a9a5d76e45	feat: add real price calculation to swap page (#459 )	2022-07-04 15:38:55 +02:00
Cafe137	eb51dbb090	fix: remove expired stamps (#463 ) * fix: increase waitUntilStampUsable timeout * fix: wait for stamp to exist after buying	2022-07-04 15:28:43 +02:00
Adam Uhlíř	d12f86b9fa	fix: show update notifications only on non-auto-updating Swarm Desktops (#460 )	2022-07-01 15:55:12 +02:00
Vojtech Simetka	8c182cafd5	fix: users can now upgrade to light node if they have enough funds (#458 )	2022-06-30 16:43:08 +02:00
Vojtech Simetka	7225c5ca11	feat: transfer everything out of the gift wallet (#456 ) * feat: transfer everything out of the gift wallet * refactor: extract bzz token address into variable	2022-06-29 22:32:16 +02:00
Vojtech Simetka	fb8775d0a7	feat: add postage stamp guide (#455 ) * feat: add postage stamp guide to create new postage stamp * feat: add the docs to the upload page as well	2022-06-28 17:29:46 +02:00
Vojtech Simetka	a3c02dbf8a	fix: use xDAI and xBZZ on Gnosis chain (#454 ) * fix: use xDAI on Gnosis chain * fix: rename BZZ to xBZZ when on Gnosis chain * fix: replace MINIMUM_xDAI with MINIMUM_XDAI * fix: update xdai links to correct gnosis chain urls	2022-06-28 16:29:05 +02:00
Cafe137	26ce0efc0b	fix: sensible deposit and swap (#448 ) * fix: indicate and lower minimum xdai to deposit * fix: take user input on swap page * fix: change minimum_dai to minimum_bzz * fix: token naming convention * refactor: use constants * fix: check for positive decimal	2022-06-28 15:24:33 +02:00
Attila Gazso	56f207d6a6	fix: change topup button ordering (#453 )	2022-06-28 14:45:48 +02:00
Attila Gazso	c54170b185	fix: disable bee update button in desktop mode (#452 )	2022-06-28 14:37:36 +02:00
Vojtech Simetka	f2824b749b	fix: generate gift wallet is disabled if there is not enough funds (#451 )	2022-06-28 13:04:55 +02:00
Adam Uhlíř	ec13357666	build: use commonjs config for webpack (#449 )	2022-06-28 12:28:53 +02:00
Adam Uhlíř	58bea4e7a8	build: use cross-env for windows (#447 )	2022-06-28 11:52:08 +02:00
Adam Uhlíř	d0f9fa776b	ci: remove component build from release (#445 )	2022-06-28 11:05:18 +02:00
Vojtech Simetka	2a5c598ece	feat: reduce the minimal dai amount for the topup (#444 )	2022-06-28 11:01:57 +02:00
Adam Uhlíř	880c3ac33e	build: include component to prepare (#443 )	2022-06-28 10:48:34 +02:00
Attila Gazso	398632001a	fix: check desktop version only once (#441 )	2022-06-24 15:21:59 +02:00
Vojtech Simetka	83aab3be62	feat: ultra-light mode block not supported features that are not available in this mode (#438 )	2022-06-24 14:10:21 +02:00
Vojtech Simetka	2e0eeb7a1b	fix: provider is by default null and account page redirect to provider setup (#437 )	2022-06-24 14:03:37 +02:00
Vojtech Simetka	a756eedc49	fix: add troubleshooting checks (#435 ) * fix: add troubleshooting checks * feat: add node warning state	2022-06-24 14:03:20 +02:00
Vojtech Simetka	4cd580ca7f	fix: bee data auto-refresh (#436 )	2022-06-24 14:03:07 +02:00
Attila Gazso	2221d0e7c8	fix: add guide link to bank card top up (#439 )	2022-06-24 13:52:35 +02:00
Attila Gazso	21df01c924	fix: change wording from deposit to top up wallet (#440 )	2022-06-24 13:52:17 +02:00
Attila Gazso	cfcc859303	feat: add upgrade guide link from medium (#434 ) * feat: add upgrade guide link from medium * chore: fix linter issue	2022-06-23 18:57:29 +02:00
Adam Uhlíř	8f4a4ebaa9	feat: version check and info (#425 )	2022-06-21 15:47:26 +02:00
Vojtech Simetka	d345059048	fix: the topup urls are now under `/account` which fixes highlighting (#424 )	2022-06-21 15:29:14 +02:00
Adam Uhlíř	c601d97ed0	chore: new swarm desktop data dir path (#423 )	2022-06-21 14:39:07 +02:00
Vojtech Simetka	807af122f7	fix: don't display buy new stamp button when already in process of buying one (#422 )	2022-06-21 12:31:28 +02:00
Adam Uhlíř	7c39e2741c	fix: sentry trace only Bee Desktop API (#421 )	2022-06-21 12:15:16 +02:00
Cafe137	f43de77294	fix: display account wallet partially while loading (#420 )	2022-06-21 10:51:51 +02:00
Vojtech Simetka	f238c43307	fix: replace feather icons with remix icons on swarm button (#414 ) * fix: replace feather icons with remix icons on swarm button * fix: remove feather icons package (#415) * fix: remove all feather icons and replace with remix icons * fix: few stray weird icons	2022-06-20 23:37:59 +02:00
Cafe137	aa99e0153e	fix: make deposit go to top up selector page (#419 )	2022-06-20 23:34:52 +02:00
Cafe137	d664400a7e	feat: set title to swarm (#413 )	2022-06-20 16:42:48 +02:00
Vojtech Simetka	b969d8caee	fix: info page card and map error states (#412 )	2022-06-20 16:33:52 +02:00
Vojtech Simetka	5e31c21f49	fix: text in the info page cards (#411 )	2022-06-20 16:17:25 +02:00
Cafe137	8775283508	style: improve design on waiting pages (#410 ) * style: improve design on waiting pages * chore: remove dead Restart page	2022-06-20 15:34:19 +02:00
Vojtech Simetka	ce44ef78f4	feat: refresh frequency changes if the bee is in error state (#409 )	2022-06-20 15:32:23 +02:00
Cafe137	8b3ea5249e	feat: add updated sidebar icons (#407 )	2022-06-20 14:37:39 +02:00
bee-worker	ac500543ec	chore(master): release 0.17.0 (#387 )	2022-06-20 12:09:57 +02:00
Vojtech Simetka	ee864bdbe9	fix: map size in safari (#404 )	2022-06-20 12:06:14 +02:00
Cafe137	36fc4bfe98	feat: update logo (#401 ) * style: update logo * feat: use both desktop and dashboard logo * test: remove App.test * build: fix depcheck	2022-06-20 12:06:08 +02:00
Vojtech Simetka	127d44fd7a	fix: change color of pins and show population instead of depth (#402 )	2022-06-20 11:44:31 +02:00
Adam Uhlíř	b3028d7893	feat: sentry feedback form (#388 )	2022-06-20 11:39:22 +02:00
Vojtech Simetka	2be9735e0c	feat: add map with peers to info page (#398 ) * feat: fetch and process map data DB * feat: add map * feat: nodes-db should be sorted alphabetically by key	2022-06-20 11:16:00 +02:00
Cafe137	0f0d72e7c5	feat: improve stamp selector (#400 )	2022-06-20 11:11:54 +02:00
Adam Uhlíř	e9666639b2	feat: sentry proxy (#399 ) * feat: sentry proxy * refactor: extracting init	2022-06-20 11:05:03 +02:00
Vojtech Simetka	f38e8e11d6	fix: download preview (#397 )	2022-06-19 09:57:54 +02:00
Vojtech Simetka	80d684c1e5	fix: all wallet flows to use ethers (#395 ) * fix: all wallet flows to use only ethers libraries * feat: remove ethereumjs-wallet * fix: remove the buggy `/wallet` bee call and use provider	2022-06-18 21:50:51 +02:00
Vojtech Simetka	caea5ae309	feat: info page redesign (#390 ) * feat: info page redesign * feat: add chequebook card	2022-06-18 17:09:13 +02:00
Cafe137	41432bc346	feat: add account tabs (#378 ) * feat: add account tabs * chore: bump * refactor: change network tab for old accounting * feat: new fonts and text transformation, chequebook tab * feat: polishing	2022-06-17 11:39:56 +02:00
Adam Uhlíř	199516d60c	ci: update nodejs version (#391 )	2022-06-17 10:51:43 +02:00
Adam Uhlíř	2b58b30122	feat: gh pages deployment (#389 )	2022-06-17 10:41:43 +02:00
Adam Uhlíř	109e07b097	feat: sentry integration (#385 ) * feat: sentry support * ci: depscheck	2022-06-16 20:32:53 +02:00
Adam Uhlíř	2edf99c323	chore: deps and react-script update (#383 ) * chore: deps and react-script update * ci: bump node version to 18 * ci: depscheck * docs: mention minimal npm required version * chore: feedback Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2022-06-15 12:20:36 +02:00
bee-worker	57dca48f3e	chore(master): release 0.16.0 (#371 )	2022-06-11 15:45:19 +02:00
Cafe137	a768b4ea06	feat: add light node upgrade top up methods (#372 ) * feat: add top up * chore: remove console.log * build: add pseudo-missing dependency * feat: add missing top up components * fix: crypto route * feat(wip): add gift wallet logic * fix: fix gift wallet flows * feat: simplify flow without fund step * feat: add loading screens * fix: remove alert * fix: prepend http if needed * fix: fix bug that was reintroduced with merge * refactor: rename minusEther to minusBaseUnits * fix: remove unused setStartedAt * build: remove unused dependency	2022-06-02 09:28:43 +02:00
bee-worker	026783924f	docs: update supported bee (#375 )	2022-05-31 19:15:40 +02:00
Vojtech Simetka	5917a13317	feat: recognize ens domains (#351 ) * feat: recognize ens domains * refactor: added ens recognition and more tests * fix: validation mechanism to accept ENS and CIDs * feat: support non-ascii characters for ENS * fix: asset summary component to support ENS issue	2022-05-31 13:37:37 +02:00
Vojtech Simetka	b6f138b423	feat: allow for the port to be configured (#370 ) * feat: allow for the port to be configured * feat: default to port 8080 if there is no other port provided	2022-05-19 11:37:54 +02:00
bee-worker	145ebc1232	chore(master): release 0.15.0 (#367 )	2022-05-16 11:52:58 +02:00
Vojtech Simetka	bfe38e96b4	ci: update release-please github action (#366 )	2022-05-16 11:45:35 +02:00
Vojtech Simetka	86978b7e99	fix: nested directory upload preserves the directory structure (#365 )	2022-05-16 10:39:00 +02:00
dependabot[bot]	efd3158b2b	build(deps-dev): bump ts-node from 10.4.0 to 10.7.0 (#360 ) Bumps [ts-node](https://github.com/TypeStrong/ts-node) from 10.4.0 to 10.7.0. - [Release notes](https://github.com/TypeStrong/ts-node/releases) - [Commits](https://github.com/TypeStrong/ts-node/compare/v10.4.0...v10.7.0) --- updated-dependencies: - dependency-name: ts-node dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-05-03 18:14:13 +02:00
Vojtech Simetka	07561aaed2	fix: connection health indicator values to reflect the current network conditions (#353 ) * fix: connection health indicator values to reflect the current network conditions * fix: remove depth check as it seems the depth is always 0 * Revert "fix: remove depth check as it seems the depth is always 0" This reverts commit 363ead8fba9bc79266abdf2d8c3f540d75da5b48. * fix: updated the values according to the bee team advice	2022-05-03 18:07:37 +02:00
Vojtech Simetka	1e2face10e	feat: wait for postage stamp to be usable when bying it (#352 ) * feat: wait for postage stamp to be usable when bying it * refactor: simplified the waitUntilStampUsable function	2022-04-29 13:42:29 +02:00
Vojtech Simetka	b6b9914548	fix: remove restrictions on postage stamp label (#354 )	2022-04-29 13:42:01 +02:00
Vojtech Simetka	87b0b71cc6	feat: add bee-desktop settings capabilities (#323 ) * refactor: make the config readonly and extract endpoint calls to hook (+2 squashed commits) Squashed commits: [91ffe45] feat: add swap-endpoint [e1d0c3a] feat: add bee-desktop settings capabilities * feat: use the request mechanism that uses the bee-desktop API key * fix: properly reset the error or on error set the config to null	2022-04-29 09:30:46 +02:00
dependabot[bot]	8114fa7d73	build(deps-dev): bump @babel/preset-react from 7.16.0 to 7.16.7 (#345 ) Bumps [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) from 7.16.0 to 7.16.7. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.16.7/packages/babel-preset-react) --- updated-dependencies: - dependency-name: "@babel/preset-react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-29 08:18:54 +02:00
dependabot[bot]	e454a7eba0	build(deps-dev): bump eslint-config-prettier from 8.2.0 to 8.5.0 (#344 ) Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 8.2.0 to 8.5.0. - [Release notes](https://github.com/prettier/eslint-config-prettier/releases) - [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/eslint-config-prettier/compare/v8.2.0...v8.5.0) --- updated-dependencies: - dependency-name: eslint-config-prettier dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-29 08:17:32 +02:00
Vojtech Simetka	3784b29f14	feat: support for bzz.link cids when downloading files (#350 ) * feat: detect and extract bzz.link cids into hash when downloading files * test: add quite thorough testsuite	2022-04-25 20:38:36 +05:00
Vojtech Simetka	a67be7a31e	fix: app crash caused by inputing non-number characters (#347 )	2022-04-24 21:40:52 +05:00
Vojtech Simetka	23dea07f6e	feat: add aditional information to the stamps overview (#349 )	2022-04-24 21:40:41 +05:00
Vojtech Simetka	906a457ae5	fix: show current postage stamp price per block (#348 )	2022-04-24 21:40:31 +05:00
dependabot[bot]	0a69409077	build(deps-dev): bump @testing-library/jest-dom from 5.15.0 to 5.16.4 (#343 ) Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 5.15.0 to 5.16.4. - [Release notes](https://github.com/testing-library/jest-dom/releases) - [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/jest-dom/compare/v5.15.0...v5.16.4) --- updated-dependencies: - dependency-name: "@testing-library/jest-dom" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 18:58:06 +05:00
dependabot[bot]	9026e65b1f	build(deps-dev): bump @types/react-router from 5.1.17 to 5.1.18 (#342 ) Bumps [@types/react-router](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-router) from 5.1.17 to 5.1.18. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-router) --- updated-dependencies: - dependency-name: "@types/react-router" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 18:57:34 +05:00
dependabot[bot]	a21e60f2d8	build(deps): bump ethers from 5.6.1 to 5.6.4 (#341 ) Bumps [ethers](https://github.com/ethers-io/ethers.js/tree/HEAD/packages/ethers) from 5.6.1 to 5.6.4. - [Release notes](https://github.com/ethers-io/ethers.js/releases) - [Changelog](https://github.com/ethers-io/ethers.js/blob/master/CHANGELOG.md) - [Commits](https://github.com/ethers-io/ethers.js/commits/v5.6.4/packages/ethers) --- updated-dependencies: - dependency-name: ethers dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-22 18:57:03 +05:00
Vojtech Simetka	39f59fcc07	ci: allow longer commit messages in commitlint (#346 )	2022-04-22 17:49:25 +05:00
Vojtech Simetka	75967b2bf5	ci: add dependabot (#335 )	2022-04-21 19:33:15 +05:00
Cafe137	ecaf2054fc	feat: add bee desktop toolkit (#311 ) * feat: add light node upgrade * refactor: improve upgrade page * feat: pretty print xdai and add xbzz faucets * feat: display xBZZ balance (#312) * refactor: change rpc provider * fix: remove version alert * fix: load really xBZZ balance instead of xDAI (#314) * feat: add bee desktop api key support * chore: remove dead code * chore: revert useless change * refactor: extract desktop utils module (#339) * refactor: extract desktop utils module * fix: add 0x prefix if it missing from address * refactor: extract BalanceProvider * fix: remove double finally * fix: remove token fallbacks * fix: reuse address and handle balance errors * chore: disable eslint for any * refactor: remove upgrade page * refactor: cleanup, debounce and axios * refactor: change fetch to axios * chore: remove dead code * chore: revert import ordering * refactor: use axios instead of fetch * refactor: use token instead of string Co-authored-by: Cafe137 <aron@aronsoos.com> Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>	2022-04-21 16:29:50 +02:00
		`@@ -0,0 +1,2 @@`
							`# Always validate the PR title, and ignore the commits`
							`titleOnly: true`