chore(master): release 0.33.4 (#716 )

Fix: file-manager and swarm-desktop bugs (#714 )
- drive capacity display with stamp polling - download/upload progress handling - overlay and tooltip issues - FileMaganger readme - ultra-light mode handling - account feed view page - download media files - remove not found syncing link - fix ultra light node wallet page - tooltip issues --------- Co-authored-by: Andrei Mitrea <andrei.mitrea.hq@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com> Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com> Co-authored-by: Nándor Komlódi <nandor.komlodi@gmail.com> Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>
2026-01-26 13:19:08 +01:00 · 2026-01-26 12:57:14 +01:00 · 2026-01-05 19:03:59 +01:00 · 2025-11-17 13:34:32 +01:00 · 2025-11-17 13:25:32 +01:00 · 2025-11-14 15:34:50 +01:00
346 changed files with 90640 additions and 41442 deletions
@@ -1,19 +1,20 @@
 {
  "ignores": [
-    "@types/jest", 
-    "@commitlint/config-conventional", 
-    "@types/react-router",
-    "@babel/core",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime",
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript",
-    "babel-loader",
-    "babel-plugin-syntax-dynamic-import",
-    "babel-plugin-tsconfig-paths",
+    "@testing-library/react",
+    "@types/*",
+    "@commitlint/config-conventional",
+    "@babel/*",
+    "babel*",
+    "eslint*",
    "file-loader",
    "ts-node",
-    "webpack-cli"
+    "webpack-cli",
+    "buffer",
+    "crypto*",
+    "stream*",
+    "env-paths",
+    "open",
+    "base64-inline-loader",
+    "sass"
  ]
 }
@@ -1,7 +1,3 @@
-PORT=3001
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+PORT=3002
+REACT_APP_FORMBRICKS_ENV_ID=
+REACT_APP_FORMBRICKS_APP_URL=
@@ -1,6 +0,0 @@
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
@@ -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,12 @@ 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_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
+      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}

    steps:
      - uses: actions/checkout@v2
@@ -30,18 +30,7 @@ jobs:
        with:
          node-version: ${{ matrix.node-version }}

-      ## Try getting the node modules from cache, if failed npm ci
-      - uses: actions/cache@v2
-        id: cache-npm
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-
-
      - name: Install npm deps
-        if: steps.cache-npm.outputs.cache-hit != 'true'
        run: npm ci

      - name: Commit linting
@@ -52,20 +41,32 @@ jobs:
        env:
          CI: true

+      - name: Dependency check
+        run: npm run depcheck
+
      - name: Types check
        run: npm run check:types

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

      - name: Build Component
        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/swarm-actions/pr-preview@v1
+        continue-on-error: true
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          token: ${{ secrets.GHA_PAT_BASIC }}
+          error-document: index.html
+          headers: '${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}'
+
+      - name: Upload to testnet
+        uses: ethersphere/swarm-actions/upload-dir@v1
+        continue-on-error: true
+        with:
+          index-document: index.html
+          error-document: index.html
+          dir: ./build
+          bee-url: https://api.gateway.testnet.ethswarm.org
@@ -1,22 +1,26 @@
-# After new release is published on github, publish it to npmjs
-name: Publish on npmjs
-
+name: Publish on npm
 on:
  release:
    types: [published]

+permissions:
+  id-token: write
+  contents: read
+
 jobs:
  publish:
    runs-on: ubuntu-latest
+    env:
+      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
+      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
        with:
-          node-version: 14
+          node-version: 24
          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}}
+
+      - run: npm publish --provenance --access public
@@ -0,0 +1,30 @@
+# 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
+
+    env:
+      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
+      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
+
+    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
+      - 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,10 +11,10 @@ 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.REPO_GHA_PAT }}
+          token: ${{ secrets.GHA_PAT_BASIC }}
          release-type: node
          package-name: bee-dashboard
          bump-minor-pre-major: true
@@ -12,9 +12,13 @@ jobs:
  tests:
    runs-on: ubuntu-latest

+    env:
+      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
+      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
+
    strategy:
      matrix:
-        node-version: [14.x]
+        node-version: [18.x]

    steps:
      - uses: actions/checkout@v2
@@ -25,21 +29,8 @@ jobs:
        with:
          node-version: ${{ matrix.node-version }}

-      ## Try getting the node modules from cache, if failed npm ci
-      - uses: actions/cache@v2
-        id: cache-npm
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-
-
      - name: Install npm deps
-        if: steps.cache-npm.outputs.cache-hit != 'true'
        run: npm ci

      - name: Run tests
        run: npm run test
-
-
@@ -11,6 +11,7 @@
 # production
 /build
 /lib
+.env

 # misc
 .DS_Store
@@ -22,3 +23,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+settings.json
+
+**.tgz
@@ -1,5 +1,411 @@
 # Changelog

+## [0.33.4](https://github.com/ethersphere/bee-dashboard/compare/v0.33.3...v0.33.4) (2026-01-26)
+
+
+### Bug Fixes
+
+* file-manager and swarm-desktop bugs ([#714](https://github.com/ethersphere/bee-dashboard/issues/714)) ([0d5138f](https://github.com/ethersphere/bee-dashboard/commit/0d5138f5bc816cece0324793166ec84ef2147679))
+
+## [0.33.3](https://github.com/ethersphere/bee-dashboard/compare/v0.33.2...v0.33.3) (2025-11-17)
+
+
+### Bug Fixes
+
+* add formbricks environment variables to workflow files ([#709](https://github.com/ethersphere/bee-dashboard/issues/709)) ([6d28653](https://github.com/ethersphere/bee-dashboard/commit/6d28653bb0b731a16d8adabbb9a8c9074387f769))
+
+## [0.33.2](https://github.com/ethersphere/bee-dashboard/compare/v0.33.1...v0.33.2) (2025-11-14)
+
+
+### Bug Fixes
+
+* clarify installation instructions in README ([#707](https://github.com/ethersphere/bee-dashboard/issues/707)) ([82e7c78](https://github.com/ethersphere/bee-dashboard/commit/82e7c78a818b46031b040f92e9a9491003c9bd92))
+
+## [0.33.1](https://github.com/ethersphere/bee-dashboard/compare/v0.33.0...v0.33.1) (2025-11-13)
+
+
+### Bug Fixes
+
+* put back external wallet balance context ([#704](https://github.com/ethersphere/bee-dashboard/issues/704)) ([096522a](https://github.com/ethersphere/bee-dashboard/commit/096522aa8a2f11afb0061a6fedbae241967408ef))
+
+## [0.33.0](https://github.com/ethersphere/bee-dashboard/compare/v0.32.0...v0.33.0) (2025-11-12)
+
+
+### Features
+
+* bee-js revamp ([#690](https://github.com/ethersphere/bee-dashboard/issues/690)) ([1249c0d](https://github.com/ethersphere/bee-dashboard/commit/1249c0df71baec331cb3f2661e0a08648d924406))
+* FileManager ([#98](https://github.com/ethersphere/bee-dashboard/issues/98)) ([#703](https://github.com/ethersphere/bee-dashboard/issues/703)) ([5bfe2a0](https://github.com/ethersphere/bee-dashboard/commit/5bfe2a033118dde43b4cd221830741a427882922))
+
+## [0.32.0](https://github.com/ethersphere/bee-dashboard/compare/v0.31.0...v0.32.0) (2025-02-12)
+
+
+### Features
+
+* vod display ([#686](https://github.com/ethersphere/bee-dashboard/issues/686)) ([bcd3d50](https://github.com/ethersphere/bee-dashboard/commit/bcd3d50b4209a4f66a259b8a3f6ea5ffd908471f))
+
+## [0.31.0](https://github.com/ethersphere/bee-dashboard/compare/v0.30.0...v0.31.0) (2025-01-13)
+
+
+### Features
+
+* remove experimental FDP menu item ([#687](https://github.com/ethersphere/bee-dashboard/issues/687)) ([a6125b3](https://github.com/ethersphere/bee-dashboard/commit/a6125b3d0b0b680a9fa61a8edcd75b2ae6c153e0))
+
+## [0.30.0](https://github.com/ethersphere/bee-dashboard/compare/v0.29.0...v0.30.0) (2024-11-25)
+
+
+### Features
+
+* add experimental fdp ([#681](https://github.com/ethersphere/bee-dashboard/issues/681)) ([d0c94b7](https://github.com/ethersphere/bee-dashboard/commit/d0c94b7316ea2b139bddc5481132ea7de7cb840d))
+* update map data ([#684](https://github.com/ethersphere/bee-dashboard/issues/684)) ([fbb2ed8](https://github.com/ethersphere/bee-dashboard/commit/fbb2ed8a576f3519883e71382b7f4e8505fbe139))
+
+
+### Bug Fixes
+
+* allow changing api url ([#676](https://github.com/ethersphere/bee-dashboard/issues/676)) ([6294bb0](https://github.com/ethersphere/bee-dashboard/commit/6294bb0a7be6b9b82354c42da8c84e767fad899e))
+* explicitly define type 0 transaction ([#674](https://github.com/ethersphere/bee-dashboard/issues/674)) ([63f3380](https://github.com/ethersphere/bee-dashboard/commit/63f338075b919cb70d79665c3d86537f2ac1d2e9))
+
+## [0.29.0](https://github.com/ethersphere/bee-dashboard/compare/v0.28.0...v0.29.0) (2024-07-17)
+
+
+### Features
+
+* clarify labels and syncing ([#670](https://github.com/ethersphere/bee-dashboard/issues/670)) ([01b1b39](https://github.com/ethersphere/bee-dashboard/commit/01b1b39c42cc5b68a0132c3696c3c42a27ea2ee4))
+* polish app ([#669](https://github.com/ethersphere/bee-dashboard/issues/669)) ([8558860](https://github.com/ethersphere/bee-dashboard/commit/8558860f0a3baa82c31c091a44c78bb8e97de70d))
+
+
+### Bug Fixes
+
+* clarify withdraw and deposit message ([#654](https://github.com/ethersphere/bee-dashboard/issues/654)) ([b4ebfc7](https://github.com/ethersphere/bee-dashboard/commit/b4ebfc7c3fd449807db47fa25763df464cc45618))
+
+## [0.28.0](https://github.com/ethersphere/bee-dashboard/compare/v0.27.0...v0.28.0) (2024-06-18)
+
+
+### Features
+
+* upgrade bee-js to 7.0.3 ([#666](https://github.com/ethersphere/bee-dashboard/issues/666)) ([e9ebe33](https://github.com/ethersphere/bee-dashboard/commit/e9ebe33d51aa525921eacfad683577605e591531))
+
+## [0.27.0](https://github.com/ethersphere/bee-dashboard/compare/v0.26.2...v0.27.0) (2024-06-11)
+
+
+### Features
+
+* add redeem shortcut to sidebar ([999399f](https://github.com/ethersphere/bee-dashboard/commit/999399fb08c1a47a671ba0ad50409624654a1082))
+
+## [0.26.2](https://github.com/ethersphere/bee-dashboard/compare/v0.26.1...v0.26.2) (2024-06-05)
+
+
+### Bug Fixes
+
+* merge version and health check ([#662](https://github.com/ethersphere/bee-dashboard/issues/662)) ([cae90c1](https://github.com/ethersphere/bee-dashboard/commit/cae90c1a82e16ee8c7908c43e2fd17f7130eb89d))
+
+## [0.26.1](https://github.com/ethersphere/bee-dashboard/compare/v0.26.0...v0.26.1) (2024-06-03)
+
+
+### Bug Fixes
+
+* add bee version ([#659](https://github.com/ethersphere/bee-dashboard/issues/659)) ([a5d4ecf](https://github.com/ethersphere/bee-dashboard/commit/a5d4ecf045f691b9059fcca925d0f30675d12db0))
+
+## [0.26.0](https://github.com/ethersphere/bee-dashboard/compare/v0.25.0...v0.26.0) (2024-06-03)
+
+
+### Features
+
+* display effective capacity ([#643](https://github.com/ethersphere/bee-dashboard/issues/643)) ([5871223](https://github.com/ethersphere/bee-dashboard/commit/58712232031e084195adf92c40cd41a98eaf16cf))
+* merge api ([#658](https://github.com/ethersphere/bee-dashboard/issues/658)) ([8cbd812](https://github.com/ethersphere/bee-dashboard/commit/8cbd812a2c04706f8f46de5355209b96783723b9))
+* show syncing info ([#647](https://github.com/ethersphere/bee-dashboard/issues/647)) ([cc91f1d](https://github.com/ethersphere/bee-dashboard/commit/cc91f1d64cd48a845fa9fa45ec4b58335eab3893))
+* wait for upload sync ([#649](https://github.com/ethersphere/bee-dashboard/issues/649)) ([79bb315](https://github.com/ethersphere/bee-dashboard/commit/79bb31540196b74f3bc0220b8c844fbd5aaaf488))
+
+
+### Bug Fixes
+
+* correct the bee version detection ([#645](https://github.com/ethersphere/bee-dashboard/issues/645)) ([b3f521c](https://github.com/ethersphere/bee-dashboard/commit/b3f521ca2055b91d7adddf96563cca6bf92e3d59))
+
+## [0.25.0](https://github.com/ethersphere/bee-dashboard/compare/v0.24.1...v0.25.0) (2023-12-04)
+
+
+### Features
+
+* improve topup and dilute ux ([0c2ac0c](https://github.com/ethersphere/bee-dashboard/commit/0c2ac0c454ad02200a2762958c5bc5abbdfe8005))
+* update postage stamp creation screen ([#641](https://github.com/ethersphere/bee-dashboard/issues/641)) ([4f9abc6](https://github.com/ethersphere/bee-dashboard/commit/4f9abc614eedd5ce3a279a4686cc832c4d1e62c7))
+
+
+### Bug Fixes
+
+* add missing stamp labels and fix inputs ([#634](https://github.com/ethersphere/bee-dashboard/issues/634)) ([7fa1cb0](https://github.com/ethersphere/bee-dashboard/commit/7fa1cb0ccf9f2a32263e84aa76732ebd2fc7fb22))
+* put stamp input error handling in state ([#640](https://github.com/ethersphere/bee-dashboard/issues/640)) ([20a051b](https://github.com/ethersphere/bee-dashboard/commit/20a051b6589c22397a7305d722a56df0604ff7a4))
+
+## [0.24.1](https://github.com/ethersphere/bee-dashboard/compare/v0.24.0...v0.24.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* update `swap-endpoint` to `blockchain-rpc-endpoint` ([#628](https://github.com/ethersphere/bee-dashboard/issues/628)) ([bce93ce](https://github.com/ethersphere/bee-dashboard/commit/bce93ce3cdc1ef4b1f50fcf274591ba00726be16))
+
+## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
+
+
+### Features
+
+* add stamp dilute and topup ([#619](https://github.com/ethersphere/bee-dashboard/issues/619)) ([055a300](https://github.com/ethersphere/bee-dashboard/commit/055a3002b303df45c7010ef4d365e14b979e9084))
+
+## [0.23.0](https://github.com/ethersphere/bee-dashboard/compare/v0.22.0...v0.23.0) (2023-02-21)
+
+
+### Features
+
+* add staking for full nodes ([#590](https://github.com/ethersphere/bee-dashboard/issues/590)) ([fac72b1](https://github.com/ethersphere/bee-dashboard/commit/fac72b1299353c104231aa038c1bab9df78c1355))
+* upgrade bee-js to 5.2.0 ([#611](https://github.com/ethersphere/bee-dashboard/issues/611)) ([e215c61](https://github.com/ethersphere/bee-dashboard/commit/e215c61ea1619fc388fe8b1904d160b04a1a5c0d))
+
+## [0.22.0](https://github.com/ethersphere/bee-dashboard/compare/v0.21.1...v0.22.0) (2023-01-19)
+
+
+### Features
+
+* add node connecting status ([#603](https://github.com/ethersphere/bee-dashboard/issues/603)) ([90f9f91](https://github.com/ethersphere/bee-dashboard/commit/90f9f91ddbefb47b40c7e567125972b800d81972))
+
+## [0.21.1](https://github.com/ethersphere/bee-dashboard/compare/v0.21.0...v0.21.1) (2022-12-21)
+
+
+### Bug Fixes
+
+* do not require chequebook funding ([#599](https://github.com/ethersphere/bee-dashboard/issues/599)) ([42b7f08](https://github.com/ethersphere/bee-dashboard/commit/42b7f080b00a94f068d2fad4779d02ddcf58e27d))
+
+## [0.21.0](https://github.com/ethersphere/bee-dashboard/compare/v0.20.2...v0.21.0) (2022-12-01)
+
+
+### Features
+
+* add prerequisite checks before swap ([#588](https://github.com/ethersphere/bee-dashboard/issues/588)) ([4e564dd](https://github.com/ethersphere/bee-dashboard/commit/4e564dd5c08b938c95f07818bc60957a7df4f5bb))
+* add starting state to sidebar indicator ([#587](https://github.com/ethersphere/bee-dashboard/issues/587)) ([848e61a](https://github.com/ethersphere/bee-dashboard/commit/848e61a7a0fc9b31cae4f603473b37d467f9e914))
+
+
+### Bug Fixes
+
+* add loading state to info page ([#584](https://github.com/ethersphere/bee-dashboard/issues/584)) ([0246904](https://github.com/ethersphere/bee-dashboard/commit/02469046b05512d6617d8b21ca93b41d6a8a6827))
+* always consider user input when performing swap ([#572](https://github.com/ethersphere/bee-dashboard/issues/572)) ([ec8fdf0](https://github.com/ethersphere/bee-dashboard/commit/ec8fdf0315ed7ee75c7612780c602cba49a2321d))
+* always set rpc to newly provided value in desktop ([#591](https://github.com/ethersphere/bee-dashboard/issues/591)) ([b798fa0](https://github.com/ethersphere/bee-dashboard/commit/b798fa0e68b367fe324ef64507b1405b642da6e0))
+* change status page depending on desktop mode ([#573](https://github.com/ethersphere/bee-dashboard/issues/573)) ([a4b8e7c](https://github.com/ethersphere/bee-dashboard/commit/a4b8e7ca2596028e7c8192c92202c0361610e307))
+* change version mismatch to a warning ([#594](https://github.com/ethersphere/bee-dashboard/issues/594)) ([dc04e26](https://github.com/ethersphere/bee-dashboard/commit/dc04e26db4fe6beb9e76fad79c732794b0b7f77d))
+* fix conditional rendering for blockchain network ([#583](https://github.com/ethersphere/bee-dashboard/issues/583)) ([1ce4a47](https://github.com/ethersphere/bee-dashboard/commit/1ce4a474954a5ba4debee53b40bb66a46fb19ffc))
+* handle auth and server error during swap ([#593](https://github.com/ethersphere/bee-dashboard/issues/593)) ([665ae06](https://github.com/ethersphere/bee-dashboard/commit/665ae063fa49bc94762ea10a9098b57e95327d9c))
+* hide swap in standalone mode ([#582](https://github.com/ethersphere/bee-dashboard/issues/582)) ([9a8520e](https://github.com/ethersphere/bee-dashboard/commit/9a8520eb6fe9f40a77c4230ab79d3731ebdd4b42))
+* refresh after chequebook withdraw deposit ([#576](https://github.com/ethersphere/bee-dashboard/issues/576)) ([6936098](https://github.com/ethersphere/bee-dashboard/commit/693609810d735d1e54691b13ea0e4db33e678a53))
+
+## [0.20.2](https://github.com/ethersphere/bee-dashboard/compare/v0.20.1...v0.20.2) (2022-09-15)
+
+
+### Bug Fixes
+
+* stamp purchasing ([#551](https://github.com/ethersphere/bee-dashboard/issues/551)) ([c0456a3](https://github.com/ethersphere/bee-dashboard/commit/c0456a3bf6d541457b706670b1a757d2b1d70f10))
+
+## [0.20.1](https://github.com/ethersphere/bee-dashboard/compare/v0.20.0...v0.20.1) (2022-09-15)
+
+
+### Bug Fixes
+
+* revert bee env. variable names and add default rpc var ([#545](https://github.com/ethersphere/bee-dashboard/issues/545)) ([5295bd5](https://github.com/ethersphere/bee-dashboard/commit/5295bd5b012962846aa15ff12ca4234f0c8b37f7))
+* rpc endpoint setting ultra-light mode logic ([#547](https://github.com/ethersphere/bee-dashboard/issues/547)) ([e2dd077](https://github.com/ethersphere/bee-dashboard/commit/e2dd077118faf3b6071fc8327e37e317e0174975))
+
+## [0.20.0](https://github.com/ethersphere/bee-dashboard/compare/v0.19.3...v0.20.0) (2022-09-14)
+
+
+### Features
+
+* error reporting callback ([#530](https://github.com/ethersphere/bee-dashboard/issues/530)) ([0c74dae](https://github.com/ethersphere/bee-dashboard/commit/0c74dae4e88916cf54c3c0500b37203b865e48a7))
+
+
+### Bug Fixes
+
+* show update notifications only on non-auto-updating Swarm Desktops ([#543](https://github.com/ethersphere/bee-dashboard/issues/543)) ([528a810](https://github.com/ethersphere/bee-dashboard/commit/528a8106907ef176bcdb68b3386c2f3f9ea98a47))
+
+## [0.19.3](https://github.com/ethersphere/bee-dashboard/compare/v0.19.2...v0.19.3) (2022-08-24)
+
+
+### Bug Fixes
+
+* pass isBeeDesktop from provider to hook ([#525](https://github.com/ethersphere/bee-dashboard/issues/525)) ([677b6de](https://github.com/ethersphere/bee-dashboard/commit/677b6de0f82b02e1487420e3c08fbd19a949f97b))
+
+## [0.19.2](https://github.com/ethersphere/bee-dashboard/compare/v0.19.1...v0.19.2) (2022-08-08)
+
+
+### Bug Fixes
+
+* remove sentry ([#520](https://github.com/ethersphere/bee-dashboard/issues/520)) ([0260df6](https://github.com/ethersphere/bee-dashboard/commit/0260df61de0619202a819b79820cfbef6e3757ae))
+
+## [0.19.1](https://github.com/ethersphere/bee-dashboard/compare/v0.19.0...v0.19.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* compile types when building the library ([#516](https://github.com/ethersphere/bee-dashboard/issues/516)) ([df925b0](https://github.com/ethersphere/bee-dashboard/commit/df925b013bb02a16d308a86050ec8e0e0e361ff7))
+
+## [0.19.0](https://github.com/ethersphere/bee-dashboard/compare/v0.18.2...v0.19.0) (2022-08-03)
+
+
+### Features
+
+* add loading state to wallet balance ([#508](https://github.com/ethersphere/bee-dashboard/issues/508)) ([b9c008f](https://github.com/ethersphere/bee-dashboard/commit/b9c008f019f5bfe005d11f0208e90ca21b274e97))
+* add wallet endpoint and display blockchain name ([#492](https://github.com/ethersphere/bee-dashboard/issues/492)) ([fd11f01](https://github.com/ethersphere/bee-dashboard/commit/fd11f0166d77a89a2b350f16f9254af91441089d))
+* check whether the app runs within bee-desktop is now an environment variable ([#490](https://github.com/ethersphere/bee-dashboard/issues/490)) ([f01477e](https://github.com/ethersphere/bee-dashboard/commit/f01477ea70e6c343461cce6c1bcee3d738c076de))
+* don't display duplicate notifications with snackbar ([#488](https://github.com/ethersphere/bee-dashboard/issues/488)) ([feeca00](https://github.com/ethersphere/bee-dashboard/commit/feeca008acd523f16e7efdde2fa92ec98fde8bc9))
+* log errors to console when showing error notification  ([#489](https://github.com/ethersphere/bee-dashboard/issues/489)) ([6bfe97b](https://github.com/ethersphere/bee-dashboard/commit/6bfe97be5d69adeb13dafad2016d1c76a9d2e67c))
+* make blockchain JSON RPC configurable from settings ([#494](https://github.com/ethersphere/bee-dashboard/issues/494)) ([408b565](https://github.com/ethersphere/bee-dashboard/commit/408b565935a59759af6d3e252ceae6981fb60eb6))
+* pass isBeeDesktop as Bee Dashboard component property ([#510](https://github.com/ethersphere/bee-dashboard/issues/510)) ([4c48657](https://github.com/ethersphere/bee-dashboard/commit/4c48657fca0c22d5d4aaf220ffb278ac67001e1f))
+* reintroduce new bee version notification ([#500](https://github.com/ethersphere/bee-dashboard/issues/500)) ([f53e966](https://github.com/ethersphere/bee-dashboard/commit/f53e9664da8f4d1b6803de09f45a92493957d79d))
+* set default rpc endpoint ([#485](https://github.com/ethersphere/bee-dashboard/issues/485)) ([cba21bb](https://github.com/ethersphere/bee-dashboard/commit/cba21bb2e0e70e0ada01402d44e9ee61a55173cf))
+
+
+### Bug Fixes
+
+* correct website upload path ([#483](https://github.com/ethersphere/bee-dashboard/issues/483)) ([186d035](https://github.com/ethersphere/bee-dashboard/commit/186d0352cfda0408cf7add535d9247a85ce3796d))
+* disable swarm invitation outside of Swarm Desktop ([#497](https://github.com/ethersphere/bee-dashboard/issues/497)) ([f8390d7](https://github.com/ethersphere/bee-dashboard/commit/f8390d7eacc082a7b0a4551a3bc1572e3ce3463e))
+* handle unicode filename and website uploads ([#491](https://github.com/ethersphere/bee-dashboard/issues/491)) ([f82444f](https://github.com/ethersphere/bee-dashboard/commit/f82444f2124cad8bccead01a33cbc9f51d126acf))
+* if the node has error, disable pages that can never load ([#502](https://github.com/ethersphere/bee-dashboard/issues/502)) ([896f6e4](https://github.com/ethersphere/bee-dashboard/commit/896f6e48d988bbc0fe82a63a44bc82b035f30073))
+* new bee version notification is only shown if user bee version is detected ([#512](https://github.com/ethersphere/bee-dashboard/issues/512)) ([1be5cbd](https://github.com/ethersphere/bee-dashboard/commit/1be5cbda6de073f1e569ab92f178d815548a461b))
+
+## [0.18.2](https://github.com/ethersphere/bee-dashboard/compare/v0.18.1...v0.18.2) (2022-07-06)
+
+
+### Bug Fixes
+
+* don't link to latest release ([#477](https://github.com/ethersphere/bee-dashboard/issues/477)) ([498294e](https://github.com/ethersphere/bee-dashboard/commit/498294e227baa52c59adecf9c4cfd205061ddf75))
+* enable desktop update notifications on all platforms ([#476](https://github.com/ethersphere/bee-dashboard/issues/476)) ([33fff93](https://github.com/ethersphere/bee-dashboard/commit/33fff93cac31ec54b02f9c7d0c90c13c8d3763c7))
+
+## [0.18.1](https://github.com/ethersphere/bee-dashboard/compare/v0.18.0...v0.18.1) (2022-07-05)
+
+
+### Bug Fixes
+
+* refresh balance after dai tx ([#470](https://github.com/ethersphere/bee-dashboard/issues/470)) ([477c238](https://github.com/ethersphere/bee-dashboard/commit/477c2385b1d06da499facebf630338eb90ad22e7))
+* refresh dai after spending gas ([#468](https://github.com/ethersphere/bee-dashboard/issues/468)) ([56457eb](https://github.com/ethersphere/bee-dashboard/commit/56457eb9b989ed00c3b87555a43da7024654667d))
+* refresh gift wallet after swap ([#465](https://github.com/ethersphere/bee-dashboard/issues/465)) ([afb8c31](https://github.com/ethersphere/bee-dashboard/commit/afb8c31d9a022033cee14ff9a951f87cb992636f))
+* status checks have timeout ([#471](https://github.com/ethersphere/bee-dashboard/issues/471)) ([acee8c9](https://github.com/ethersphere/bee-dashboard/commit/acee8c9802318deb64d2bd8e701fae15c10d5fcf))
+
+## [0.18.0](https://github.com/ethersphere/bee-dashboard/compare/v0.17.0...v0.18.0) (2022-07-04)
+
+
+### Features
+
+* add postage stamp guide ([#455](https://github.com/ethersphere/bee-dashboard/issues/455)) ([fb8775d](https://github.com/ethersphere/bee-dashboard/commit/fb8775d0a7a2bb3525467cec98584009c167700f))
+* add real price calculation to swap page ([#459](https://github.com/ethersphere/bee-dashboard/issues/459)) ([a9a5d76](https://github.com/ethersphere/bee-dashboard/commit/a9a5d76e45d3a31f05f814fe6cd2c823317f1e2d))
+* add updated sidebar icons ([#407](https://github.com/ethersphere/bee-dashboard/issues/407)) ([8b3ea52](https://github.com/ethersphere/bee-dashboard/commit/8b3ea5249ee48e7a2403e00339fd51977b93fb56))
+* add upgrade guide link from medium ([#434](https://github.com/ethersphere/bee-dashboard/issues/434)) ([cfcc859](https://github.com/ethersphere/bee-dashboard/commit/cfcc859303f4fb931e07f9037a7ba0972f8fb8ba))
+* reduce the minimal dai amount for the topup ([#444](https://github.com/ethersphere/bee-dashboard/issues/444)) ([2a5c598](https://github.com/ethersphere/bee-dashboard/commit/2a5c598ece3ba5f88c53c87db52b10422a37aae7))
+* refresh frequency changes if the bee is in error state ([#409](https://github.com/ethersphere/bee-dashboard/issues/409)) ([ce44ef7](https://github.com/ethersphere/bee-dashboard/commit/ce44ef78f4d322a458c1e8dd1f5a0b87d3a45b85))
+* set title to swarm ([#413](https://github.com/ethersphere/bee-dashboard/issues/413)) ([d664400](https://github.com/ethersphere/bee-dashboard/commit/d664400a7e3427fd30c47b59ef9c0dccda061720))
+* transfer everything out of the gift wallet ([#456](https://github.com/ethersphere/bee-dashboard/issues/456)) ([7225c5c](https://github.com/ethersphere/bee-dashboard/commit/7225c5ca11a62e40f06e7b08d558b390e326bcaf))
+* ultra-light mode block not supported features that are not available in this mode ([#438](https://github.com/ethersphere/bee-dashboard/issues/438)) ([83aab3b](https://github.com/ethersphere/bee-dashboard/commit/83aab3be62d73b5a539aab8f9c2bbfad56c86bbf))
+* version check and info ([#425](https://github.com/ethersphere/bee-dashboard/issues/425)) ([8f4a4eb](https://github.com/ethersphere/bee-dashboard/commit/8f4a4ebaa951fdbbe9f697e2cb4dc34838ed5df7))
+
+
+### Bug Fixes
+
+* add guide link to bank card top up ([#439](https://github.com/ethersphere/bee-dashboard/issues/439)) ([2221d0e](https://github.com/ethersphere/bee-dashboard/commit/2221d0e7c89a9631e3d95dd71cde3eacb964f3b5))
+* add troubleshooting checks ([#435](https://github.com/ethersphere/bee-dashboard/issues/435)) ([a756eed](https://github.com/ethersphere/bee-dashboard/commit/a756eedc4995cad6c5cafd302f7d7d7d44656f6d))
+* bee data auto-refresh ([#436](https://github.com/ethersphere/bee-dashboard/issues/436)) ([4cd580c](https://github.com/ethersphere/bee-dashboard/commit/4cd580ca7f497104eb97ae5676f3d5334384f4dc))
+* change topup button ordering ([#453](https://github.com/ethersphere/bee-dashboard/issues/453)) ([56f207d](https://github.com/ethersphere/bee-dashboard/commit/56f207d6a63ee0a486a4e00770fd8342fa92a7b5))
+* change wording from deposit to top up wallet ([#440](https://github.com/ethersphere/bee-dashboard/issues/440)) ([21df01c](https://github.com/ethersphere/bee-dashboard/commit/21df01c9241bcdfd072b0f080a46823beb1a751a))
+* check desktop version only once ([#441](https://github.com/ethersphere/bee-dashboard/issues/441)) ([3986320](https://github.com/ethersphere/bee-dashboard/commit/398632001a589a20cecb4416dfd261be21e18959))
+* disable bee update button in desktop mode ([#452](https://github.com/ethersphere/bee-dashboard/issues/452)) ([c54170b](https://github.com/ethersphere/bee-dashboard/commit/c54170b18538f7d15181a87a556f7fb2954ed49d))
+* display account wallet partially while loading ([#420](https://github.com/ethersphere/bee-dashboard/issues/420)) ([f43de77](https://github.com/ethersphere/bee-dashboard/commit/f43de77294e86df4bb023cd19afe6327ace5e83c))
+* don't display buy new stamp button when already in process of buying one ([#422](https://github.com/ethersphere/bee-dashboard/issues/422)) ([807af12](https://github.com/ethersphere/bee-dashboard/commit/807af122f7743fc9d13120eef81cd3f55b51eb5a))
+* generate gift wallet is disabled if there is not enough funds ([#451](https://github.com/ethersphere/bee-dashboard/issues/451)) ([f2824b7](https://github.com/ethersphere/bee-dashboard/commit/f2824b749b950e5b401af1de2973f13ad95d0a2f))
+* info page card and map error states ([#412](https://github.com/ethersphere/bee-dashboard/issues/412)) ([b969d8c](https://github.com/ethersphere/bee-dashboard/commit/b969d8caeef8d0e6f6eb664b380228bccb498795))
+* make deposit go to top up selector page ([#419](https://github.com/ethersphere/bee-dashboard/issues/419)) ([aa99e01](https://github.com/ethersphere/bee-dashboard/commit/aa99e0153e20524c5b047e90803543cbb13bb625))
+* provider is by default null and account page redirect to provider setup ([#437](https://github.com/ethersphere/bee-dashboard/issues/437)) ([2e0eeb7](https://github.com/ethersphere/bee-dashboard/commit/2e0eeb7a1b86be091fbd4bc266aa2fcbfc271ca3))
+* remove expired stamps ([#463](https://github.com/ethersphere/bee-dashboard/issues/463)) ([eb51dbb](https://github.com/ethersphere/bee-dashboard/commit/eb51dbb090a22d398c13e355de26c229c79d4a6f))
+* replace feather icons with remix icons on swarm button ([#414](https://github.com/ethersphere/bee-dashboard/issues/414)) ([f238c43](https://github.com/ethersphere/bee-dashboard/commit/f238c433078b09ac034c4bc66a434f8a91422827))
+* sensible deposit and swap ([#448](https://github.com/ethersphere/bee-dashboard/issues/448)) ([26ce0ef](https://github.com/ethersphere/bee-dashboard/commit/26ce0efc0b5e441863d8991af6121f105f8c7981))
+* sentry trace only Bee Desktop API ([#421](https://github.com/ethersphere/bee-dashboard/issues/421)) ([7c39e27](https://github.com/ethersphere/bee-dashboard/commit/7c39e2741c87b1ca75fcb1a72a5d7c12b826e950))
+* show update notifications only on non-auto-updating Swarm Desktops ([#460](https://github.com/ethersphere/bee-dashboard/issues/460)) ([d12f86b](https://github.com/ethersphere/bee-dashboard/commit/d12f86b9fac047f7c62edaca4fa818dbac27e894))
+* text in the info page cards ([#411](https://github.com/ethersphere/bee-dashboard/issues/411)) ([5e31c21](https://github.com/ethersphere/bee-dashboard/commit/5e31c21f49e6418b3cf36a75076eff2234ab2e8c))
+* the topup urls are now under `/account` which fixes highlighting ([#424](https://github.com/ethersphere/bee-dashboard/issues/424)) ([d345059](https://github.com/ethersphere/bee-dashboard/commit/d345059048efdf7226b7bc26e6514792a0a4cbff))
+* use xDAI and xBZZ on Gnosis chain ([#454](https://github.com/ethersphere/bee-dashboard/issues/454)) ([a3c02db](https://github.com/ethersphere/bee-dashboard/commit/a3c02dbf8a063fd69f4b4c1b4ff058a35710d0bc))
+* users can now upgrade to light node if they have enough funds ([#458](https://github.com/ethersphere/bee-dashboard/issues/458)) ([8c182ca](https://github.com/ethersphere/bee-dashboard/commit/8c182cafd537e508384efcf9c52febcd47f14a67))
+
+## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)
+
+
+### 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)
+
+
+### Features
+
+* add hook that detects if the bee-dashboard is run within bee-desktop ([#334](https://www.github.com/ethersphere/bee-dashboard/issues/334)) ([eb9e309](https://www.github.com/ethersphere/bee-dashboard/commit/eb9e309c8bc0327d137f190d6873618cb215fece))
+* detect bee mode and enable/disable status checks accordingly ([#318](https://www.github.com/ethersphere/bee-dashboard/issues/318)) ([8baecb7](https://www.github.com/ethersphere/bee-dashboard/commit/8baecb783f1574af1cd1f17738efae4b0ac9f0c8))
+* optional status checks (e.g. connected peers > 0 or funded chequebook) ([#331](https://www.github.com/ethersphere/bee-dashboard/issues/331)) ([5d0fbf7](https://www.github.com/ethersphere/bee-dashboard/commit/5d0fbf705dfed6738980c751a9654199d60a3787))
+
+
+### Bug Fixes
+
+* postage stamp price and TTL calculation ([#305](https://www.github.com/ethersphere/bee-dashboard/issues/305)) ([d0b3f1a](https://www.github.com/ethersphere/bee-dashboard/commit/d0b3f1abee7ea017bdd05954d5fadafb67365efd))
+
+## [0.13.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.12.0...v0.13.0) (2022-01-28)
+
+
+### Features
+
+* add hash based routing ([#287](https://www.github.com/ethersphere/bee-dashboard/issues/287)) ([9ee1c91](https://www.github.com/ethersphere/bee-dashboard/commit/9ee1c9107bb08d1838044f39e4d0dd5817c8f283))
+* add metadata and preview ([#292](https://www.github.com/ethersphere/bee-dashboard/issues/292)) ([f401314](https://www.github.com/ethersphere/bee-dashboard/commit/f4013142afdb407e699eff9587921e23c971f1db))
+
+
+### Bug Fixes
+
+* clean up spinner and disabled state on download page ([#294](https://www.github.com/ethersphere/bee-dashboard/issues/294)) ([a406e0f](https://www.github.com/ethersphere/bee-dashboard/commit/a406e0fc014991fcbaca230f27f41cd071d8a863))
+* correct folder name when uploading multiple files or mix of files & directories ([#291](https://www.github.com/ethersphere/bee-dashboard/issues/291)) ([d878747](https://www.github.com/ethersphere/bee-dashboard/commit/d8787476acf068be6609a77b1fadb2f61d0fd502))
+* disable feeds page when disconnected ([#293](https://www.github.com/ethersphere/bee-dashboard/issues/293)) ([1310deb](https://www.github.com/ethersphere/bee-dashboard/commit/1310deb17aec91f368f99974aaa245abb0a3e201))
+* do not print size and name when meta is unknown ([#297](https://www.github.com/ethersphere/bee-dashboard/issues/297)) ([7880c80](https://www.github.com/ethersphere/bee-dashboard/commit/7880c802aea6b0830ca52b47b88540b8df5888cc))
+* get current price from chain state ([#286](https://www.github.com/ethersphere/bee-dashboard/issues/286)) ([bc82e67](https://www.github.com/ethersphere/bee-dashboard/commit/bc82e6756154b33d01796a6e66e51dcfa1495338))
+
 ## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)


@@ -1 +1 @@
-* @Cafe137 @vojtechsimetka
+* @Cafe137
@@ -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/Node.js-%3E%3D10.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%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,16 +13,14 @@
 **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.4.1-238867f1<!-- 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
+Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).

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

-| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
-| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
-| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/postage_stamps.png) |
+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                              | File Manager                       |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ------------------------------------- | ---------------------------------- |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Settings](/ui_samples/settings.png) | ![File Manager](/ui_samples/file_manager.png) |

 ## Table of Contents

@@ -32,6 +30,7 @@ Using it with older or newer Bee versions is not recommended and may not work. S
  - [Docker](#docker)
 - [Contribute](#contribute)
 - [Development](#development)
+- [File Manager](#file-manager)
 - [Maintainers](#maintainers)
 - [License](#license)

@@ -43,11 +42,13 @@ Install globally with npm. We require Node.js's version of at least 12.x and npm
 npm install -g @ethersphere/bee-dashboard
 ```

+For the latest stable version, always use the official npm registry.
+
 ## Usage

-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
-setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
-To see where the config file is, consult the
+:warning: To successfully connect to the Bee node, you will need to enable CORS. You can do so by setting
+`cors-allowed-origins: ['*']` in the Bee config file and then restart the Bee node. To see where the config file is,
+consult the
 [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)

 ### Terminal
@@ -60,6 +61,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:
@@ -85,7 +95,48 @@ npm start

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

-> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
+#### Environmental variables
+
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static
+files. We support following variables:
+
+- `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
+- `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same
+  origin under which the Dashboard is served.
+- `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the
+  `http://localhost:1633` is used.
+- `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the
+  default value. The user can override this in Settings, which is then persisted in local store and has priority over
+  the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
+- `REACT_APP_FORMBRICKS_ENV_ID` and `REACT_APP_FORMBRICKS_APP_URL` (`string`) configures the
+  [Formbricks](https://formbricks.com/) integration for user feedback collection. If these variables are not set, the
+  feedback form is not available in the app.
+
+#### Swarm Desktop development
+
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where Desktop
+is initialized (eq. the splash screen disappear) and:
+
+```sh
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
+REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
+
+npm start
+npm run desktop # This will inject the API key to the Dashboard
+```
+
+## File Manager
+
+The File Manager module provides intuitive decentralized file storage and management.
+
+For comprehensive documentation, see the [File Manager Documentation](./docs/FILE_MANAGER.md).
+
+### Features
+
+- Create and manage multiple drives with configurable capacity and lifetime
+- Upload, download, and organize files with version control
+- Manage postage stamps required for file uploads
+- Configure erasure coding levels for data redundancy

 ## Contribute

@@ -98,7 +149,6 @@ There are some ways you can make this module better:

 ## Maintainers

- [vojtechsimetka](https://github.com/vojtechsimetka)
 - [Cafe137](https://github.com/Cafe137)

 See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintainer).
@@ -107,5 +157,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine

 [BSD-3-Clause](./LICENSE)

-
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
@@ -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)
@@ -0,0 +1,605 @@
+# File Manager Module Documentation
+
+## Introduction
+
+The File Manager module is a decentralized file storage interface built on top of Ethereum Swarm. It provides a complete file management system that leverages Swarm's postage stamp mechanism for incentivized storage and retrieval.
+
+### Table of Contents
+
+- [Introduction](#introduction)
+- [Key Concepts](#key-concepts)
+- [Architecture Overview](#architecture-overview)
+- [Module Structure](#module-structure)
+- [Getting Started](#getting-started)
+- [State Management](#state-management)
+- [Core Features](#core-features)
+- [Operation Flows](#operation-flows)
+- [Component Architecture](#component-architecture)
+- [Design Patterns](#design-patterns)
+- [Troubleshooting](#troubleshooting)
+- [Testing Approach](#testing-approach)
+- [Performance Considerations](#performance-considerations)
+- [Known Limitations](#known-limitations)
+- [Future Enhancements](#future-enhancements)
+
+### What is File Manager?
+
+File Manager allows users to:
+- Create and manage multiple isolated storage containers (drives)
+- Upload, download, and organize files with folder support
+- Configure security levels (redundancy levels) using erasure coding
+- Purchase and manage postage stamp batches to pay for storage
+- Track file versions and restore previous states
+- Handle file conflicts and perform bulk operations
+
+### Core Philosophy
+
+File Manager is built around several key principles:
+
+1. **Decentralization**: All file metadata and content are stored on Swarm, not centralized servers
+2. **User Control**: Users own their private keys and control their data
+3. **Stamp-Based Storage**: All operations require valid postage stamps (blockchain-backed storage payment)
+4. **Complexity Management**: Components follow strict complexity limits (max 20) with extraction patterns
+5. **State Consistency**: Real-time synchronization between UI and Swarm storage
+
+---
+
+## Key Concepts
+
+### Drives
+
+**Drives** are isolated storage containers that hold files and folders. Each drive:
+- Has a unique ID derived from its creation topic on Swarm
+- Is associated with a specific postage batch
+- Has configurable initial capacity and desired lifetime (inherited from batch)
+- Can be either an **admin drive** (manages system state) or **user drive** (stores user files)
+- Maintains its own file list and metadata
+
+**Admin Drive** is a special drive that:
+- Is created once per File Manager instance
+- Stores the list of all user drives
+- Must be initialized before any other operations
+- Uses a stamp labeled `ADMIN_STAMP_LABEL`
+- Cannot be deleted (only reset)
+
+**User Drives** are regular drives that:
+- Store user files and folders
+- Can be created, upgraded, or destroyed
+- Appear in the sidebar for navigation
+- Move to "Expired Drives" when their postage batch expires
+
+### Postage Stamps
+
+**Postage Stamps** (or batches) are blockchain-based payment mechanisms for Swarm storage:
+- Purchased with BZZ tokens (Swarm's native token)
+- Have a **batchID** (unique identifier)
+- Define **initial capacity** (storage space) and **desired lifetime** (time-to-live)
+- Must be **usable** (not expired, not diluted beyond capacity)
+- Can have optional labels for identification
+
+**Postage Batch Validation** is critical:
+- Before creating drives
+- Before uploading files
+- During admin drive initialization
+- Invalid or unusable batches cause operations to fail
+
+### File Info
+
+**FileInfo** objects represent files in File Manager:
+- Stored as metadata on Swarm (not in local storage)
+- Contains: name, size, mime type, timestamps, drive association
+- Has a **topic** (unique identifier derived from path and parent)
+- Can be **trashed** (soft delete) or **forgotten** (hard delete)
+- Supports versioning via **history** (Swarm feed entries)
+
+### Erasure Coding
+
+**Erasure coding** provides data redundancy:
+- **OFF**: No redundancy (1x storage)
+- **MEDIUM**: Moderate redundancy (~2x storage)
+- **STRONG**: High redundancy (~3x storage)
+- **INSANE**: Very high redundancy (~4x storage)
+- **PARANOID**: Maximum redundancy (~5x storage)
+
+Higher levels cost more but protect against data loss if Swarm nodes go offline.
+
+---
+
+## Architecture Overview
+
+### High-Level Flow
+
+The File Manager follows a layered architecture:
+
+1. **User Action** - User interacts with UI components
+2. **Component Layer** - FileBrowser, DriveItem, Modals handle UI logic
+3. **Context Layer** - FileManagerProvider, ViewProvider, SearchProvider manage state
+4. **Library Layer** - FileManagerBase from @solarpunkltd/file-manager-lib handles business logic
+5. **API Layer** - Bee API from @ethersphere/bee-js communicates with Swarm
+6. **Network Layer** - Swarm network stores data
+
+### State Management
+
+File Manager uses **React Context** for state management with three separate contexts:
+
+1. **FileManagerProvider** - Core FM state: drives, files, admin drive, current drive. Manages FM instance lifecycle and event listeners.
+
+2. **ViewProvider** - UI view preferences (grid/list) and current item being viewed (drive name or search results).
+
+3. **SearchProvider** - Search query and scope (all drives, selected drive), filter options (include active, include trashed).
+
+This separation ensures that updates in one context don't unnecessarily trigger re-renders in components that only depend on other contexts.
+
+### Component Hierarchy
+
+The component structure follows a strict hierarchy:
+- **FileManagerPage** - Orchestrates initialization flow
+- **Providers** - Wrap entire tree (FileManager → View → Search)
+- **Header** - Top navigation
+- **AdminStatusBar** - Admin stamp status display
+- **Sidebar** - Drive list with create/destroy actions
+- **FileBrowser** - Main file browser with operations
+- **Modals** - Various modals for different operations
+
+---
+
+## Module Structure
+
+### Directory Organization
+
+The File Manager module is organized into logical sections:
+
+**Components Directory** - All React UI components, each in its own folder with associated styles and tests. Major components include FileBrowser (main interface), Sidebar (drive navigation), various modals for operations, and reusable elements like buttons and dropdowns.
+
+**Hooks Directory** - Custom React hooks for specific functionality. Key hooks include useTransfers (upload/download management), useFileFiltering (search and filtering), useBulkActions (bulk operations), and useSorting (column sorting).
+
+**Utils Directory** - Pure utility functions. Includes Bee API wrappers for stamp validation and drive operations, common helpers for formatting, download logic, and UI utilities.
+
+**Constants Directory** - Configuration constants for erasure code levels, postage batch desired lifetimes, tooltips, and transfer statuses.
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+1. **Bee Node**: Running Bee node (dev mode or mainnet). Can be local or remote connection via Settings.
+
+2. **Wallet Balance**: BZZ tokens to purchase postage batches, and xDAI for gas fees on blockchain transactions.
+
+3. **CORS Configuration**: Bee node must allow CORS from the dashboard origin.
+
+### Initial Setup Flow
+
+**First Launch - Private Key Generation**
+
+When a user first visits File Manager, they must provide or generate a private key. This key is stored in browser local storage and is critical - loss of the key means permanent data loss with no recovery option.
+
+**One-Time Admin Drive Creation**
+
+After the private key is set, the system checks for an admin drive. If none exists, the InitialModal appears automatically. The user selects initial capacity and desired lifetime, then purchases a postage batch with BZZ tokens. The system creates the admin drive which stores all user drive metadata.
+
+**Creating User Drives**
+
+Once the admin drive exists, users can create user drives from the sidebar. They enter a drive name (max 40 characters), select initial capacity, desired lifetime, and security level (erasure coding). The system displays the BZZ cost and creates the drive upon confirmation.
+
+**Uploading Files**
+
+Users select a drive from the sidebar, then drag-and-drop files or click "Upload File(s)". They choose an active postage batch, and the system monitors progress with ETA calculations. Files are uploaded with automatic conflict resolution if names already exist.
+
+---
+
+## State Management
+
+### FileManager Provider
+
+The FileManager Provider is the core state management solution. It manages:
+
+**Core State**: The FileManagerBase instance, all files across drives, user drives with valid postage batches, expired drives, admin drive, currently selected drive, and currently selected postage batch.
+
+**Error States**: Initialization errors, error modal visibility, and reset requirements when admin postage batch is invalid.
+
+**Synchronization**: Real-time updates through event listeners that respond to drive and file changes from the FileManagerBase library.
+
+### Initialization Sequence
+
+The provider handles a complex initialization:
+
+1. **Private Key Check** - Retrieves key from local storage. If missing, initialization halts until user provides one.
+
+2. **Bee Instance Creation** - Creates Bee client with the private key as signer, then creates FileManagerBase instance.
+
+3. **Event Listener Registration** - Registers handlers for all file manager events (drive created, file uploaded, file trashed, etc.).
+
+4. **Admin Postage Batch Validation** - If admin postage batch exists, validates it's still usable. Invalid batches trigger reset flow.
+
+5. **State Synchronization** - Categorizes drives into admin, user, and expired based on postage batch validity. Populates file list.
+
+### Drive Categorization
+
+The system continuously categorizes drives based on postage batch validity:
+
+**Admin Drive** - Must have valid postage batch. If invalid, entire FM enters reset state.
+
+**User Drives** - Drives with valid, usable postage batches appear in main drive list for normal operations.
+
+**Expired Drives** - Drives whose postage batches expired but data still exists on Swarm. Appear in collapsed section, cannot be modified but can be viewed.
+
+### State Synchronization Methods
+
+**Sync Files** - Updates the files array when files are uploaded, trashed, restored, or forgotten. Can update entire list or individual files incrementally.
+
+**Sync Drives** - Updates drive arrays (user, expired, admin) when drives are created, upgraded, or destroyed. Fetches current postage batch validity and recategorizes.
+
+**Resync** - Full state refresh that re-initializes FM instance and restores previous selections if still valid. Used after major operations or manual refresh.
+
+**Refresh Postage Batch** - Updates a specific postage batch's information without full resync. Used after uploads to update capacity.
+
+### Event Flow
+
+When a user performs an operation like uploading a file:
+
+1. Component calls FM method
+2. FileManagerBase library executes operation
+3. Library emits event when complete
+4. Provider's event listener catches it
+5. Provider updates React state
+6. UI automatically re-renders with new data
+
+This event-driven architecture keeps UI and Swarm state perfectly synchronized.
+
+---
+
+## Core Features
+
+### Upload Management
+
+The upload system handles complex scenarios:
+
+**Conflict Detection** - Before upload, checks if file name already exists in target drive. Offers three resolution options: Cancel (skip file), Keep Both (rename with suffix like "file (1).txt"), or Replace (overwrite with new version).
+
+**Queue Processing** - Uploads are queued and processed with maximum 10 concurrent uploads. This prevents overwhelming the network while maintaining good throughput.
+
+**Progress Tracking** - Each upload shows percentage complete, data transferred, elapsed time, and ETA. ETA uses smoothing algorithm to prevent wild fluctuations from network speed variations.
+
+**Postage Batch Validation** - Before each upload, validates the selected postage batch is still usable. Verifies sufficient capacity remains for the file size considering erasure coding overhead.
+
+**Cancellation** - Users can cancel in-progress uploads. The system uses abort controllers to cleanly terminate HTTP requests and update transfer status.
+
+### Download Management
+
+Downloads execute in the background using browser's native download API:
+
+**Progress Tracking** - Similar to uploads, shows percentage, speed, and ETA for each download.
+
+**Bulk Downloads** - Users can select multiple files and download all at once. Each download tracks independently.
+
+**Background Execution** - Downloads continue even if user navigates away from File Manager (within same browser tab).
+
+### File Filtering
+
+The filtering system supports multiple criteria:
+
+**Search Query** - Case-insensitive substring matching on file names.
+
+**Drive Scope** - Filter to selected drive only, or search across all drives.
+
+**Trash Status** - Include active files only, trashed files only, or both.
+
+**State Preservation** - When entering search mode, current filter settings are saved. Clearing search restores previous settings automatically.
+
+### Sorting
+
+Users can sort file lists by multiple columns:
+
+**Sort Keys** - Name (alphabetical), Size (bytes), Timestamp (upload date), Drive (name, when searching all drives).
+
+**Sort Direction** - Ascending or descending. Clicking same column header toggles direction.
+
+**Sort Reset** - Clear sorting returns to natural order (order from Swarm).
+
+### Bulk Operations
+
+Select multiple files and perform batch actions:
+
+**Bulk Trash** - Move multiple files to trash (soft delete). Can be restored later.
+
+**Bulk Restore** - Restore multiple trashed files to active status.
+
+**Bulk Forget** - Permanently delete files (irreversible). Requires confirmation.
+
+**Bulk Download** - Download multiple files simultaneously with individual progress tracking.
+
+### Version History
+
+Files support full version history:
+
+**Version Tracking** - Each file upload creates new version, previous versions retained.
+
+**View History** - Modal shows all versions with timestamps and sizes.
+
+**Restore Version** - Roll back to any previous version, which becomes the new current version.
+
+**Storage Impact** - Each version consumes postage batch capacity, old versions can be forgotten but space continues to be occupied.
+
+### Drag and Drop
+
+Full drag-and-drop support for file uploads:
+
+**Visual Feedback** - Overlay appears when dragging files over browser area.
+
+**Drag Counter** - Tracks nested drag events to prevent flickering on complex layouts.
+
+**Drop Handling** - Processes dropped files through same upload pipeline as manual selection.
+
+---
+
+## Operation Flows
+
+### Initial Setup
+
+**User Opens /file-manager**
+- System checks for private key in local storage
+- If no key: Shows PrivateKeyModal for user to enter or generate key
+- If has key: Initializes FileManager
+
+**FileManager Initialization**
+- Creates Bee instance with user's private key
+- Creates FileManagerBase instance
+- Registers event listeners for all FM events
+- Reads admin state from Swarm
+
+**Admin Drive Validation**
+- If admin postage batch exists and valid: Loads drives and files, shows FileBrowser
+- If admin postage batch exists but invalid: Sets reset flag, shows InitialModal in reset mode
+- If no admin postage batch (first time): Shows InitialModal for first-time setup
+
+**Creating Admin Drive**
+- User selects desired lifetime and security level (erasure coding)
+- System calculates cost in BZZ tokens
+- User confirms and purchases postage batch (blockchain transaction)
+- System creates admin drive with purchased postage batch
+- Success: Shows Sidebar and FileBrowser
+
+### Creating User Drive
+
+**User Initiates Creation**
+- Clicks "Create New Drive" button in Sidebar
+- CreateDriveModal appears
+
+**Drive Configuration**
+- User enters drive name (validated: max 40 chars)
+- Selects initial capacity from dropdown
+- Selects desired lifetime from dropdown
+- Chooses security level (erasure coding: OFF, MEDIUM, STRONG, INSANE, PARANOID)
+
+**Cost Calculation**
+- System fetches current BZZ cost based on capacity, desired lifetime, and redundancy level
+- Displays total cost to user
+- Validates user has sufficient BZZ balance
+- If insufficient: Shows error, disables Create button
+- If sufficient: Enables Create button
+
+**Drive Creation**
+- User clicks Create
+- System shows creation progress indicator
+- Purchases new postage batch (blockchain transaction, waits for confirmation)
+- Creates drive metadata on Swarm
+- FM emits DRIVE_CREATED event
+- Provider categorizes drive (has usable postage batch)
+- Drive appears in Sidebar
+- Success: User can now select and use the drive
+
+### Uploading Files
+
+**File Selection**
+- User drags files onto browser OR clicks "Upload file(s)" button
+- System receives file list
+
+**Conflict Resolution (per file)**
+- Checks if file.name already exists in current drive
+- If no conflict: Proceeds with original name
+- If conflict: Shows UploadConflictModal with options:
+  - Cancel: Skip this file
+  - Keep Both: Rename to unique name (e.g., "file (1).txt")
+  - Replace: Overwrite existing file, creating new version
+
+**Queue Processing**
+- All files added to upload queue with resolved names
+- Queue processes maximum 10 files concurrently
+- For each file in batch:
+  - Validates postage batch still exists and is usable
+  - Verifies sufficient drive space remains
+  - Creates transfer tracking item (shows in UI)
+  - Executes upload with progress callbacks to Swarm
+  - Updates progress (percentage, ETA, elapsed time)
+  - On completion: Marks transfer Done, refreshes postage batch capacity 
+  - On error: Marks transfer Error, shows error message
+- Next batch starts when previous completes
+
+**Event Synchronization**
+- FM library emits FILE_UPLOADED event
+- Provider's sync method adds/updates file in state
+- UI automatically updates to show new file
+
+### Destroying Drive
+
+**User Initiates Destruction**
+- Clicks menu button on Drive Item in Sidebar
+- Selects "Destroy Drive" from context menu
+- DestroyDriveModal appears with confirmation prompt
+
+**Confirmation**
+- User reads warning about permanent deletion
+- User clicks "Destroy" button
+
+**Destruction Process**
+- Modal closes
+- Progress overlay appears (spinner with "Destroying drive..." text)
+- Overlay is clickable to expand to full progress modal
+- System executes drive destruction:
+  - Deletes drive metadata from Swarm
+  - FM emits DRIVE_DESTROYED event
+  - Provider removes drive from drives array
+  - Provider removes all files belonging to destroyed drive
+- Progress overlay disappears
+- Drive no longer appears in Sidebar
+- If drive was selected: View switches to another drive or empty state
+
+### Downloading Files
+
+**User Initiates Download**
+- User right-clicks file
+- Selects "Download" from menu
+
+**Download Tracking**
+- System creates download transfer item in UI
+- Transfer item shows: file name, size, progress percentage
+- Download panel appears at bottom of screen
+
+**Download Execution**
+- System retrieves file from Swarm using file's topic
+- Uses browser's native download API to save file
+- Progress callbacks update UI in real-time:
+  - Bytes downloaded / total bytes (from Swarm chunks)
+  - Download speed
+  - Estimated time remaining (ETA with smoothing)
+  - Elapsed time
+
+**Background Processing**
+- Downloads execute in background
+- User can continue browsing File Manager
+- Multiple downloads can run simultaneously
+- Each download tracks independently
+
+**Completion**
+- On success: Browser saves file to user's downloads folder
+- Transfer item marked as "Done"
+- User can dismiss completed downloads
+- On error: Shows error message, allows retry
+
+**Cancellation**
+- User clicks cancel button on transfer item
+- System aborts HTTP request using AbortController
+- Transfer item marked as "Cancelled"
+- Partial download discarded
+
+### Search Operation
+
+**Entering Search**
+- User types in search box
+- SearchContext captures query
+- System saves current scope and filter settings
+- Sets inSearch flag to true
+
+**Filtering Execution**
+- useFileFiltering hook processes files array:
+  - Filters by trash status (active/trashed based on checkboxes)
+  - Filters by drive scope (selected drive vs all drives)
+  - Filters by search query (case-insensitive substring match on name)
+- Returns filtered array
+
+**Sorting Application**
+- useSorting hook processes filtered array
+- Applies current sort key and direction
+- Returns sorted array
+
+**Display**
+- FileBrowserContent renders sorted list
+- If searching all drives: Shows drive name column
+- If no results: Shows "No files found" message
+
+**Exiting Search**
+- User clears search box (empty query)
+- System restores saved scope and filter settings
+- Sets inSearch flag to false
+- View returns to previous state
+
+---
+
+## Component Architecture
+
+### Hierarchical Structure
+
+File Manager follows strict component hierarchy to manage complexity:
+
+**Page Level** - FileManagerPage orchestrates the entire module, handling initialization states and conditional rendering.
+
+**Provider Level** - Three nested contexts (FileManager → View → Search) wrap the component tree, each managing separate concerns.
+
+**Layout Level** - Header, AdminStatusBar, Sidebar, and FileBrowser form the main layout structure.
+
+**Feature Level** - Major features like FileBrowser contain sub-components for specific areas (TopBar, Header, Content, Modals, Overlays).
+
+**Primitive Level** - Reusable elements like buttons, dropdowns, tooltips, progress bars used throughout.
+
+### Component Responsibilities
+
+Each component has a single, clear responsibility:
+
+**FileManagerPage** - Orchestrates initialization flow and conditional rendering based on FM state.
+
+**Sidebar** - Displays drive list, handles navigation, shows drive creation button.
+
+**DriveItem** - Renders individual drive with capacity info, context menu, progress indicators.
+
+**FileBrowser** - Main file browser interface, coordinates all file operations.
+
+**FileBrowserModals** - Renders all modals (extracted for complexity management).
+
+**FileBrowserOverlays** - Renders progress overlays (extracted for complexity management).
+
+---
+
+## Known Limitations
+
+### Admin Drive Expiration
+
+**Status**: Not fully handled (TODO in code).
+
+**Current Behavior**: When admin drive postage batch expires, entire FM enters invalid state. User must reset and create new admin drive. Previous user drives remain accessible if their postage batches are valid.
+
+**Desired Behavior**: System detects admin postage batch expiration before it happens, shows warning with "Extend Batch" button, seamlessly extends admin postage batch without requiring reset.
+
+### Drive Name Length
+
+**Limitation**: Drive names limited to 40 characters maximum.
+
+**Reason**: Swarm feed entry size constraints limit metadata size.
+
+**Workaround**: Use shorter, descriptive names. Consider abbreviations or codes for long project names.
+
+### Postage Batch Selection in CreateDriveModal
+
+**Status**: TODO comment in code.
+
+**Current Behavior**: CreateDriveModal always purchases new postage batch for each drive.
+
+**Desired Behavior**: Dropdown to select from existing usable postage batches (like InitialModal has), allowing users to reuse batches with remaining capacity.
+
+**Impact**: Users must purchase separate postage batch for each drive, even if existing batches have sufficient capacity for multiple drives.
+
+### Postage Batch Capacity Calculation
+
+**Issue**: Capacity calculation depends on erasure coding level.
+
+**Problem**: Frontend calculates approximate capacity based on redundancy multiplier. Actual capacity depends on how Bee node distributes chunks across Swarm network.
+
+**Current**: Approximate calculation usually close enough for practical use.
+
+**Ideal**: Bee node provides exact remaining capacity calculation accounting for actual chunk distribution and erasure coding overhead.
+
+### Ultra-Light Nodes
+
+**Limitation**: Ultra-light Bee nodes cannot create drives or purchase postage batches.
+
+**Requirement**: Users must upgrade to light node to use File Manager.
+
+**Error Message**: Displayed in InitialModal and CreateDriveModal when ultra-light node detected.
+
+**Documentation**: https://docs.ethswarm.org/docs/desktop/configuration/#upgrading-from-an-ultra-light-to-a-light-node
+
+---
+
+
+*This documentation provides a comprehensive functional overview of the File Manager module. For implementation details, refer to the source code in `src/modules/filemanager/` and `src/providers/FileManager.tsx`.*
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.12.0",
+  "version": "0.33.4",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -25,98 +25,125 @@
    "type": "git",
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
+  "overrides": {
+    "@fairdatasociety/fdp-storage": {
+      "@ethersphere/bee-js": "^10.2.0"
+    }
+  },
  "dependencies": {
-    "@ethersphere/bee-js": "3.1.0",
-    "@ethersphere/manifest-js": "1.1.0",
-    "@ethersphere/swarm-cid": "^0.1.0",
+    "@ethersphere/bee-js": "^10.3.0",
+    "@ethersproject/keccak256": "^5.7.0",
+    "@ethersproject/strings": "^5.7.0",
+    "@fairdatasociety/fdp-storage": "^0.19.0",
+    "@formbricks/js": "^4.2.1",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
-    "axios": "0.24.0",
-    "bignumber.js": "9.0.1",
-    "ethereumjs-wallet": "^1.0.2",
+    "@solarpunkltd/file-manager-lib": "^1.0.4",
+    "axios": "^0.28.1",
+    "bignumber.js": "^9.1.2",
+    "buffer": "^6.0.3",
+    "crypto": "npm:crypto-browserify",
+    "crypto-browserify": "^3.12.0",
+    "dotted-map": "^2.2.3",
+    "ethers": "^5.7.2",
    "file-saver": "^2.0.5",
    "formik": "2.2.9",
    "formik-material-ui": "3.0.1",
-    "jszip": "^3.7.1",
+    "jszip": "^3.10.1",
    "material-ui-dropzone": "3.5.0",
-    "notistack": "1.0.10",
+    "notistack": "^3.0.1",
    "opener": "1.5.2",
    "qrcode.react": "1.0.1",
    "react": ">= 17.0.2",
-    "react-copy-to-clipboard": "5.0.4",
+    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": ">= 17.0.2",
-    "react-feather": "2.0.9",
    "react-identicons": "1.2.5",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
    "react-syntax-highlighter": "15.4.4",
-    "semver": "7.3.5",
-    "serve-handler": "6.1.3"
+    "remixicon-react": "^1.0.0",
+    "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-typescript": "7.16.0",
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
    "@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",
+    "@types/express": "^4.17.13",
    "@types/file-saver": "2.0.4",
    "@types/jest": "27.0.2",
    "@types/qrcode.react": "1.0.2",
    "@types/react": "17.0.34",
-    "@types/react-copy-to-clipboard": "5.0.2",
+    "@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/parser": "4.33.0",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "8.1.0",
+    "@typescript-eslint/eslint-plugin": "5.28.0",
+    "@typescript-eslint/parser": "5.28.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-tsconfig-paths": "1.0.2",
-    "depcheck": "1.4.2",
-    "eslint": "7.24.0",
-    "eslint-config-prettier": "8.2.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "5.10.0",
-    "eslint-plugin-import": "2.25.2",
-    "eslint-plugin-jest": "24.3.5",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react": "7.23.2",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "3.10.2",
+    "base64-inline-loader": "^2.0.1",
+    "cors": "^2.8.5",
+    "depcheck": "^1.4.3",
+    "env-paths": "^3.0.0",
+    "eslint": "8.17.0 ",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "26.5.3",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.30.0",
+    "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",
-    "ts-node": "^10.4.0",
-    "typescript": "4.4.4",
+    "puppeteer": "^15.4.0",
+    "react-scripts": "^5.0.1",
+    "rimraf": "^3.0.2",
+    "sass": "^1.91.0",
+    "ts-node": "^10.8.1",
+    "typescript": "4.8.3",
    "web-vitals": "2.1.2",
-    "webpack": "4.44.2",
-    "webpack-cli": "^4.9.1"
+    "webpack": "^5.93.0",
+    "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": "rimraf ./lib && webpack --mode=production && npm run compile:types",
    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
    "test": "react-scripts test",
+    "test:ui": "node ui-test/index.js",
    "serve": "node ./serve.js",
    "depcheck": "depcheck .",
    "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "check:types": "tsc --project tsconfig.lib.json"
+    "check:types": "tsc --project tsconfig.lib.json",
+    "update-map-data": "node ./utils/update-map-data.js",
+    "bee": "npx bee-factory start"
  },
  "files": [
    "lib",
@@ -136,8 +163,8 @@
    ]
  },
  "engines": {
-    "node": ">=12.0.0",
-    "npm": ">=6.0.0",
-    "bee": ">=0.6.0"
+    "node": ">=14.0.0",
+    "npm": ">=6.9.0",
+    "bee": "1.16.1-8e269c8"
  }
 }
@@ -6,13 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
-    
-    <meta
-      name="description"
-      content="Bee Dashboard"
-    />
+    <meta name="description" content="Bee Dashboard" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -29,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 http = require('http');
+const handler = require('serve-handler')
+const http = require('http')
 const opener = require('opener')

+const port = process.env.PORT || 8080
+
 const serverConfig = {
  public: path.join(__dirname, 'build'),
  trailingSlash: false,
-  rewrites: [
-    { source: "**", destination: "/index.html" },
-  ],
+  rewrites: [{ source: '**', destination: '/index.html' }],
  headers: [
-      {
-        source: "*",
-        headers: [{
-          key: "Cache-Control",
-          value: "max-age=3600"
-        }]
-      }
-  ]
+    {
+      source: '*',
+      headers: [
+        {
+          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, () => {
-  console.log('Starting up Bee Dashboard on address http://localhost:8080')
+server.listen(port, () => {
+  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,34 +1,32 @@
@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-family: 'iAWriterQuattroV';
+  font-style: normal;
  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/iAWriterQuattroV.ttf) format('truetype');
 }
+
@font-face {
-  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;
+  font-family: 'iAWriterMonoV';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/iAWriterMonoV.ttf) format('truetype');
 }

 .App {
-  font-family: "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;
+a,
+button {
+  font-family: 'iAWriterMonoV' !important;
  color: #dd7700;
-}
+}
+
+.MuiContainer-maxWidthLg > .fm {
+  padding: 0px !important;
+}
@@ -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 />)
-})
@@ -1,52 +1,81 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
-import React, { ReactElement } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { ReactElement } from 'react'
+import { HashRouter as Router } from 'react-router-dom'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
 import { Provider as FeedsProvider } from './providers/Feeds'
 import { Provider as FileProvider } from './providers/File'
+import { Provider as FileManagerProvider } from './providers/FileManager'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
 import { Provider as StampsProvider } from './providers/Stamps'
+import { Provider as TopUpProvider } from './providers/TopUp'
+import { Provider as BalanceProvider } from './providers/WalletBalance'
 import BaseRouter from './routes'
 import { theme } from './theme'

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

-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
-  <div className="App">
-    <ThemeProvider theme={theme}>
-      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
-        <BeeProvider>
-          <StampsProvider>
-            <FileProvider>
-              <FeedsProvider>
-                <PlatformProvider>
-                  <SnackbarProvider>
-                    <Router>
-                      <>
-                        <CssBaseline />
-                        <Dashboard>
-                          <BaseRouter />
-                        </Dashboard>
-                      </>
-                    </Router>
-                  </SnackbarProvider>
-                </PlatformProvider>
-              </FeedsProvider>
-            </FileProvider>
-          </StampsProvider>
-        </BeeProvider>
-      </SettingsProvider>
-    </ThemeProvider>
-  </div>
-)
+const App = ({
+  beeApiUrl,
+  defaultRpcUrl,
+  lockedApiSettings,
+  isDesktop,
+  desktopUrl,
+  errorReporting,
+}: Props): ReactElement => {
+  const mainApp = (
+    <div className="App">
+      <ThemeProvider theme={theme}>
+        <SettingsProvider
+          beeApiUrl={beeApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
+          lockedApiSettings={lockedApiSettings}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
+        >
+          <TopUpProvider>
+            <BeeProvider>
+              <BalanceProvider>
+                <StampsProvider>
+                  <FileProvider>
+                    <FileManagerProvider>
+                      <FeedsProvider>
+                        <PlatformProvider>
+                          <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+                            <Router>
+                              <>
+                                <CssBaseline />
+                                <Dashboard errorReporting={errorReporting}>
+                                  <BaseRouter />
+                                </Dashboard>
+                              </>
+                            </Router>
+                          </SnackbarProvider>
+                        </PlatformProvider>
+                      </FeedsProvider>
+                    </FileManagerProvider>
+                  </FileProvider>
+                </StampsProvider>
+              </BalanceProvider>
+            </BeeProvider>
+          </TopUpProvider>
+        </SettingsProvider>
+      </ThemeProvider>
+    </div>
+  )
+
+  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,89 @@
+import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import Check from 'remixicon-react/CheckLineIcon'
+import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
+import Connecting from 'remixicon-react/LinksLineIcon'
+import RefreshLine from 'remixicon-react/RefreshLineIcon'
+import { SwarmButton, SwarmButtonProps } from './SwarmButton'
+
+interface Props {
+  icon: ReactElement
+  title: string
+  subtitle: string
+  buttonProps: SwarmButtonProps
+  status: 'ok' | 'error' | 'loading' | 'connecting'
+}
+
+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',
+        height: '130px',
+      },
+      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)()
+
+  let statusIcon = null
+
+  if (status === 'ok') {
+    statusIcon = <Check size="13" color="#09ca6c" />
+  } else if (status === 'error') {
+    statusIcon = <AlertCircle size="13" color="#f44336" />
+  } else if (status === 'loading') {
+    statusIcon = <RefreshLine size="13" color="orange" />
+  } else if (status === 'connecting') {
+    statusIcon = <Connecting size="13" color="#0074D9" />
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <div className={classes.iconWrapper}>
+          {icon}
+          {statusIcon}
+        </div>
+        <Typography variant="h2" style={{ marginBottom: '8px' }}>
+          {title}
+        </Typography>
+        <Typography variant="caption">{subtitle}</Typography>
+      </div>
+      <SwarmButton className={[classes.button, className].join(' ')} {...rest} />
+    </div>
+  )
+}
@@ -6,10 +6,9 @@ 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 { Zap } from 'react-feather'
+import { ReactElement, useContext, useState } from 'react'
+import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
-import EthereumAddress from './EthereumAddress'

 interface Props {
  peerId: string
@@ -19,8 +18,8 @@ interface Props {
 export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactElement {
  const [open, setOpen] = useState<boolean>(false)
  const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
+  const { beeApi } = useContext(SettingsContext)
  const { enqueueSnackbar } = useSnackbar()
-  const { beeDebugApi } = useContext(SettingsContext)

  const handleClickOpen = () => {
    setOpen(true)
@@ -31,23 +30,18 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
  }

  const handleCashout = () => {
-    if (!beeDebugApi) return
-
-    if (peerId) {
+    if (peerId && beeApi) {
      setLoadingCashout(true)
-      beeDebugApi
+      beeApi
        .cashoutLastCheque(peerId)
        .then(res => {
          setOpen(false)
-          enqueueSnackbar(
-            <span>
-              Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res} />
-            </span>,
-            { variant: 'success' },
-          )
+          enqueueSnackbar(<span>Successfully cashed out cheque. Transaction {res.toHex()}</span>, {
+            variant: 'success',
+          })
        })
        .catch((e: Error) => {
+          console.error(e) // eslint-disable-line
          enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
        })
        .finally(() => {
@@ -61,7 +55,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 +73,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>
            )}
@@ -0,0 +1,25 @@
+import { ChainState } from '@ethersphere/bee-js'
+import { useContext, useEffect, useState } from 'react'
+import { Context } from '../providers/Settings'
+import ExpandableListItem from './ExpandableListItem'
+
+export function ChainSync() {
+  const { beeApi } = useContext(Context)
+  const [chainState, setChainState] = useState<ChainState | null>(null)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!beeApi) {
+        return
+      }
+
+      beeApi.getChainState().then(setChainState).catch(console.error) // eslint-disable-line
+    }, 3_000)
+
+    return () => clearInterval(interval)
+  })
+
+  return (
+    <ExpandableListItem label="Chain state" value={chainState ? `${chainState.block} / ${chainState.chainTip}` : '-'} />
+  )
+}
@@ -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 {
@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactElement } from 'react'

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

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

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

@@ -20,7 +24,10 @@ export default class ErrorBoundary extends Component<Props, State> {
  }

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

@@ -1,12 +1,14 @@
 import { Typography } from '@material-ui/core/'
+import { EthAddress } from '@ethersphere/bee-js'
 import { ReactElement } from 'react'
 import Identicon from 'react-identicons'
-import { config } from '../config'
+import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
 import ClipboardCopy from './ClipboardCopy'
+import { Flex } from './Flex'
 import QRCodeModal from './QRCodeModal'

 interface Props {
-  address: string | undefined
+  address: EthAddress | undefined
  hideBlockie?: boolean
  transaction?: boolean
  truncate?: boolean
@@ -16,10 +18,10 @@ export default function EthereumAddress(props: Props): ReactElement {
  return (
    <Typography component="div" variant="subtitle1">
      {props.address ? (
-        <div style={{ display: 'flex' }}>
+        <Flex>
          {props.hideBlockie ? null : (
            <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={props.address} />
+              <Identicon size={20} string={props.address.toChecksum()} />
            </div>
          )}
          <div>
@@ -36,16 +38,16 @@ export default function EthereumAddress(props: Props): ReactElement {
                    }
                  : { marginRight: '7px' }
              }
-              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
+              href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
              target="_blank"
              rel="noreferrer"
            >
              {props.address}
            </a>
          </div>
-          <QRCodeModal value={props.address} label={'Ethereum Address'} />
-          <ClipboardCopy value={props.address} />
-        </div>
+          <QRCodeModal value={props.address.toChecksum()} label={'Ethereum Address'} />
+          <ClipboardCopy value={props.address.toChecksum()} />
+        </Flex>
      ) : (
        '-'
      )}
@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    contentLevel12: {
      marginTop: theme.spacing(0.25),
+      '& > li:last-of-type': {
+        marginBottom: theme.spacing(2),
+      },
    },
    infoText: {
      color: '#c9c9c9',
@@ -1,7 +1,8 @@
-import { ReactElement, ReactNode, useState } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ReactElement, ReactNode, useState } from 'react'
+import { Flex } from './Flex'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -65,14 +66,14 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
    <div className={`${classes.root} ${rootLevelClass}`}>
      <ListItem button onClick={handleClick} className={classes.header}>
        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
-        <div style={{ display: 'flex' }}>
+        <Flex>
          {!open && (
            <Typography variant="body2" className={classes.infoText}>
              {info}
            </Typography>
          )}
          {open ? <ExpandLess /> : <ExpandMore />}
-        </div>
+        </Flex>
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <div className={contentLevelClass}>{children}</div>
@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Info } from 'react-feather'
+import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
 import ListItem from '@material-ui/core/ListItem'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
+import Info from 'remixicon-react/InformationLineIcon'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -1,8 +1,12 @@
-import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Edit, Minus, Search, X } from 'react-feather'
+import type { RemixiconReactIconProps } from 'remixicon-react'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
+import Edit from 'remixicon-react/PencilLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
@@ -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,
@@ -83,9 +89,9 @@ export default function ExpandableListItemKey({
      e.target.value = mapperFn(e.target.value)
    }

-    setInputValue(e.target.value)
+    setInputValue(e.target.value.trim())

-    if (onChange) onChange(e.target.value)
+    if (onChange) onChange(e.target.value.trim())
  }

  return (
@@ -102,12 +108,8 @@ export default function ExpandableListItemKey({
              <div>
                {!open && value}
                {!expandedOnly && !locked && (
-                  <IconButton size="small" className={classes.copyValue}>
-                    {open ? (
-                      <Minus onClick={toggleOpen} strokeWidth={1} />
-                    ) : (
-                      <Edit onClick={toggleOpen} strokeWidth={1} />
-                    )}
+                  <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+                    {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
                  </IconButton>
                )}
              </div>
@@ -128,29 +130,33 @@ export default function ExpandableListItemKey({
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
-        <ExpandableListItemActions>
-          <SwarmButton
-            disabled={
-              loading ||
-              inputValue === value ||
-              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
-              (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}
-            onClick={() => onConfirm(inputValue)}
-          >
-            {confirmLabel || 'Save'}
-          </SwarmButton>
-          <SwarmButton
-            disabled={loading || inputValue === value || inputValue === ''}
-            iconType={X}
-            onClick={() => setInputValue(value || '')}
-            cancel
-          >
-            Cancel
-          </SwarmButton>
-        </ExpandableListItemActions>
+        <Box mt={2}>
+          <ExpandableListItemActions>
+            <SwarmButton
+              disabled={
+                loading ||
+                inputValue === value ||
+                Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+                (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={confirmIcon ?? Check}
+              onClick={() => {
+                if (onConfirm) onConfirm(inputValue)
+              }}
+            >
+              {confirmLabel || 'Save'}
+            </SwarmButton>
+            <SwarmButton
+              disabled={loading || inputValue === value || inputValue === ''}
+              iconType={X}
+              onClick={() => setInputValue(value || '')}
+              cancel
+            >
+              Cancel
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
      </Collapse>
    </>
  )
@@ -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)

@@ -75,20 +77,18 @@ export default function ExpandableListItemKey({ label, value }: Props): ReactEle
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          {label && <Typography variant="body1">{label}</Typography>}
          <Typography variant="body2">
-            <div>
-              {!open && (
-                <span className={classes.copyValue}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                    <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                    </CopyToClipboard>
-                  </Tooltip>
-                </span>
-              )}
-              <IconButton size="small" className={classes.copyValue}>
-                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
-              </IconButton>
-            </div>
+            {!open && (
+              <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
+                  </CopyToClipboard>
+                </Tooltip>
+              </span>
+            )}
+            <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+              {open ? <Minus strokeWidth={1} /> : <Eye strokeWidth={1} />}
+            </IconButton>
          </Typography>
        </Grid>
        <Collapse in={open} timeout="auto" unmountOnExit>
@@ -3,7 +3,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
 import { ReactElement, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -61,7 +61,7 @@ export default function ExpandableListItemLink({
 }: Props): ReactElement | null {
  const classes = useStyles()
  const [copied, setCopied] = useState(false)
-  const history = useHistory()
+  const navigate = useNavigate()

  const tooltipClickHandler = () => setCopied(true)
  const tooltipCloseHandler = () => setCopied(false)
@@ -72,7 +72,7 @@ export default function ExpandableListItemLink({
    if (navigationType === 'NEW_WINDOW') {
      window.open(link || value)
    } else {
-      history.push(link || value)
+      navigate(link || value)
    }
  }

@@ -82,22 +82,20 @@ export default function ExpandableListItemLink({
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          {label && <Typography variant="body1">{label}</Typography>}
          <Typography variant="body2">
-            <div>
-              {allowClipboard && (
-                <span className={classes.copyValue}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                    <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{displayValue}</span>
-                    </CopyToClipboard>
-                  </Tooltip>
-                </span>
-              )}
-              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
-              <IconButton size="small" className={classes.openLinkIcon}>
-                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
-                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
-              </IconButton>
-            </div>
+            {allowClipboard && (
+              <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{displayValue}</span>
+                  </CopyToClipboard>
+                </Tooltip>
+              </span>
+            )}
+            {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+            <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
+              {navigationType === 'NEW_WINDOW' && <OpenInNewSharp strokeWidth={1} />}
+              {navigationType === 'HISTORY_PUSH' && <ArrowForward strokeWidth={1} />}
+            </IconButton>
          </Typography>
        </Grid>
      </Grid>
@@ -0,0 +1,28 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    audio: {
+      width: '100%',
+      maxWidth: '250px',
+    },
+  }),
+)
+
+interface AudioProps {
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitAudio(props: AudioProps): ReactElement {
+  const classes = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
+  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+
+  return <audio className={classes.audio} src={props.src} style={inlineStyles} controls />
+}
@@ -0,0 +1,29 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    video: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+    },
+  }),
+)
+
+interface VideoProps {
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitVideo(props: VideoProps): ReactElement {
+  const classes = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
+  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+
+  return <video className={classes.video} src={props.src} style={inlineStyles} controls />
+}
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+export function Flex({ children }: Props) {
+  return <div style={{ display: 'flex' }}>{children}</div>
+}
@@ -1,7 +1,7 @@
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
 import { ArrowBack } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'

 interface Props {
  children: string
@@ -20,10 +20,10 @@ const useStyles = makeStyles(() =>

 export function HistoryHeader({ children }: Props): ReactElement {
  const classes = useStyles()
-  const history = useHistory()
+  const navigate = useNavigate()

  function goBack() {
-    history.goBack()
+    navigate(-1)
  }

  return (
@@ -0,0 +1,110 @@
+import type { Peer } from '@ethersphere/bee-js'
+import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
+import { CSSProperties, ReactElement, useContext, useEffect, useState } from 'react'
+import mapData from '../assets/data/map-data.json'
+import nodesDb from '../assets/data/nodes-db.json'
+import { Context } from '../providers/Bee'
+
+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>
+  )
+}
@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react'
+import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+interface Props {
+  linearProgressProps?: LinearProgressProps
+  value: number
+}
+
+export function LinearProgressWithLabel(props: Props): ReactElement {
+  return (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box minWidth={35}>
+        <Typography variant="body2" color="textSecondary">{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}
@@ -1,48 +1,25 @@
-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 type { ReactElement } from 'react'
-import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
+import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { BeeModes } from '@ethersphere/bee-js'
+import { ReactElement, useContext } from 'react'
 import { Link } from 'react-router-dom'
-import Logo from '../assets/logo.svg'
-import { config } from '../config'
+import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
+import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
+import DocsIcon from 'remixicon-react/BookOpenLineIcon'
+import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import GithubIcon from 'remixicon-react/GithubFillIcon'
+import HomeIcon from 'remixicon-react/Home3LineIcon'
+import SettingsIcon from 'remixicon-react/Settings2LineIcon'
+import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import DashboardLogo from '../assets/dashboard-logo.svg'
+import DesktopLogo from '../assets/desktop-logo.svg'
+import { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL } from '../constants'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'

-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

 const useStyles = makeStyles((theme: Theme) =>
@@ -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,46 @@ const useStyles = makeStyles((theme: Theme) =>

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

  return (
    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
        <Grid className={classes.logo}>
          <Link to={ROUTES.INFO}>
-            <img alt="swarm" src={Logo} />
+            <img alt="swarm" src={isDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
        </Grid>
        <Grid>
@@ -110,6 +118,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>
@@ -117,19 +126,37 @@ export default function SideBar(): ReactElement {
          </List>
          <Divider className={classes.divider} />
          <List>
-            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
+            <MUILink href={BEE_DOCS_HOST} target="_blank" className={classes.link}>
              <SideBarItem
-                iconStart={<BookOpen className={classes.icon} />}
-                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                iconStart={<DocsIcon className={classes.icon} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
                label={<span>Docs</span>}
              />
            </MUILink>
          </List>
+          <Divider className={classes.divider} />
+          <List>
+            <MUILink href={GITHUB_BEE_DASHBOARD_URL} target="_blank" className={classes.link}>
+              <SideBarItem
+                iconStart={<GithubIcon className={classes.icon} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
+                label={<span>GitHub</span>}
+              />
+            </MUILink>
+          </List>
+          <Divider className={classes.divider} />
+          <Box mt={4}>
+            <Link to={ROUTES.TOP_UP_GIFT_CODE}>
+              <Typography align="center">Redeem gift code</Typography>
+            </Link>
+          </Box>
        </Grid>
        <Grid>
-          <Link to={ROUTES.STATUS} className={classes.link}>
-            <SideBarStatus path={ROUTES.STATUS} />
-          </Link>
+          <List>
+            <Link to={ROUTES.STATUS} className={classes.link}>
+              <SideBarStatus path={ROUTES.STATUS} />
+            </Link>
+          </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 { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
+import { matchPath, useLocation } from 'react-router-dom'

 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(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = pathMatcherSubstring
+    ? location.pathname.startsWith(pathMatcherSubstring)
+    : Boolean(path && matchPath(location.pathname, path))

  return (
    <StyledListItem button selected={isSelected} disableRipple>
@@ -1,9 +1,9 @@
 import { ReactElement, useContext } from 'react'
-import { useLocation, matchPath } from 'react-router-dom'
-import { ArrowRight } from 'react-feather'
+import { matchPath, useLocation } from 'react-router-dom'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'

-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Context } from '../providers/Bee'
 import StatusIcon from './StatusIcon'

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    smallerText: {
      fontSize: '0.9rem',
+      whiteSpace: 'nowrap',
    },
  }),
 )
@@ -56,7 +57,7 @@ export default function SideBarItem({ path }: Props): ReactElement {
  const { status, isLoading } = useContext(Context)
  const classes = useStyles()
  const location = useLocation()
-  const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
+  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <ListItem
@@ -66,11 +67,9 @@ export default function SideBarItem({ path }: Props): ReactElement {
      disableRipple
    >
      <ListItemIcon style={{ marginLeft: '30px' }}>
-        <StatusIcon isOk={status.all} isLoading={isLoading} />
+        <StatusIcon checkState={status.all} isLoading={isLoading} />
      </ListItemIcon>
-      <ListItemText
-        primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
-      />
+      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
      <ListItemIcon className={classes.icon}>
        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
      </ListItemIcon>
@@ -0,0 +1,88 @@
+import { Box } from '@material-ui/core'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Input from '@material-ui/core/Input'
+import { BatchId, Bee } from '@ethersphere/bee-js'
+import { useSnackbar } from 'notistack'
+import { ReactElement, ReactNode, useState } from 'react'
+
+interface Props {
+  type: 'Topup' | 'Dilute'
+  icon: ReactNode
+  bee: Bee
+  stamp: BatchId
+}
+
+export default function StampExtensionModal({ type, icon, bee, stamp }: Props): ReactElement {
+  const [open, setOpen] = useState(false)
+  const [amount, setAmount] = useState('')
+  const { enqueueSnackbar } = useSnackbar()
+  const label = `${type} ${stamp.toHex().substring(0, 8)}`
+
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setOpen(true)
+    e.stopPropagation()
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleAction = async () => {
+    if (type === 'Topup') {
+      try {
+        await bee.topUpBatch(stamp, amount)
+        enqueueSnackbar(`Successfully topped up stamp, your changes will appear soon`, { variant: 'success' })
+      } catch (error) {
+        enqueueSnackbar(`Failed to topup stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
+      }
+    }
+
+    if (type === 'Dilute') {
+      try {
+        await bee.diluteBatch(stamp, parseInt(amount, 10))
+        enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: 'success' })
+      } catch (error) {
+        enqueueSnackbar(`Failed to dilute stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
+      }
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    setAmount(event.target.value)
+  }
+
+  return (
+    <Box mb={2}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
+        {type}
+      </Button>
+      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">{label}</DialogTitle>
+        <DialogContent>
+          <Input
+            autoFocus
+            margin="dense"
+            id="name"
+            type="text"
+            placeholder={type === 'Topup' ? 'Amount to add' : 'New depth to dilute'}
+            fullWidth
+            value={amount}
+            onChange={handleChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button disabled={amount === ''} onClick={handleAction} color="primary">
+            {type}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
@@ -1,23 +1,46 @@
-import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import type { ReactElement } from 'react'
+import { CheckState } from '../providers/Bee'

 interface Props {
-  isOk: boolean
+  checkState: CheckState
  isLoading?: boolean
  size?: number | string
  className?: string
 }

-export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+export default function StatusIcon({ checkState, size, className, isLoading }: Props): ReactElement {
  const s = size || '1rem'

  if (isLoading) return <CircularProgress size={s} className={className} />

+  let backgroundColor: string
+  switch (checkState) {
+    case CheckState.OK:
+      backgroundColor = '#1de600'
+      break
+    case CheckState.WARNING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.ERROR:
+      backgroundColor = '#ff3a52'
+      break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.CONNECTING:
+      backgroundColor = '#0074D9'
+      break
+    default:
+      // Default is error
+      backgroundColor = '#ff3a52'
+  }
+
  return (
    <span
      className={className}
      style={{
-        backgroundColor: isOk ? '#1de600' : '#ff3a52',
+        backgroundColor,
        height: s,
        width: s,
        borderRadius: '50%',
@@ -1,27 +1,24 @@
-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 {
-  onClick: () => void
-  iconType: React.ComponentType<IconProps>
-  children: string
-  className?: string
-  disabled?: boolean
+export interface SwarmButtonProps extends ButtonProps {
+  iconType: React.ComponentType<RemixiconReactIconProps>
  loading?: boolean
  cancel?: boolean
+  variant?: 'text' | 'contained' | 'outlined'
 }

 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',
        },
      },
@@ -49,7 +46,10 @@ export function SwarmButton({
  disabled,
  loading,
  cancel,
-}: Props): ReactElement {
+  variant = 'contained',
+  style,
+  ...other
+}: SwarmButtonProps): ReactElement {
  const classes = useStyles()

  function getIconColor() {
@@ -71,14 +71,18 @@ export function SwarmButton({

  return (
    <Button
+      style={style}
      className={getButtonClassName()}
      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick()
-        event.currentTarget.blur()
+        if (onClick) {
+          onClick(event)
+          event.currentTarget.blur()
+        }
      }}
-      variant="contained"
+      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,8 @@ interface Props {
  onChange?: (event: SelectEvent) => void
  formik?: boolean
  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
 }

 const useStyles = makeStyles((theme: Theme) =>
@@ -25,6 +41,11 @@ const useStyles = makeStyles((theme: Theme) =>
      '& fieldset': {
        border: 0,
      },
+      '& .MuiSelect-select': {
+        '&:focus': {
+          background: theme.palette.background.paper,
+        },
+      },
    },
    option: {
      height: '52px',
@@ -32,7 +53,16 @@ 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,
+  disabled = false,
+}: Props): ReactElement {
  const classes = useStyles()

  if (formik) {
@@ -41,13 +71,16 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
        {label && <FormHelperText>{label}</FormHelperText>}
        <Field
          required
+          disabled={disabled}
          component={Select}
          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) => (
            <MenuItem key={i} value={x.value} className={classes.option}>
@@ -62,22 +95,25 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
  return (
    <>
      {label && <FormHelperText>{label}</FormHelperText>}
-      <SimpleSelect
+      <MuiSelect
        required
+        disabled={disabled}
        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) => (
          <MenuItem key={i} value={x.value} className={classes.option}>
            {x.label}
          </MenuItem>
        ))}
-      </SimpleSelect>
+      </MuiSelect>
    </>
  )
 }
@@ -9,6 +9,8 @@ interface Props {
  password?: boolean
  formik?: boolean
  optional?: boolean
+  defaultValue?: string
+  placeholder?: string
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }

@@ -16,15 +18,32 @@ const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    field: {
      background: theme.palette.background.paper,
-      height: '52px',
      '& fieldset': {
        border: 0,
      },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
    },
  }),
 )

-export function SwarmTextInput({ name, label, password, optional, formik, onChange }: Props): ReactElement {
+export function SwarmTextInput({
+  name,
+  label,
+  password,
+  optional,
+  formik,
+  onChange,
+  defaultValue,
+  placeholder,
+}: Props): ReactElement {
  const classes = useStyles()

  if (formik) {
@@ -36,9 +55,11 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
        name={name}
        label={label}
        fullWidth
-        variant="outlined"
+        variant="filled"
        className={classes.field}
-        defaultValue=""
+        defaultValue={defaultValue || ''}
+        InputProps={{ disableUnderline: true }}
+        placeholder={placeholder}
      />
    )
  }
@@ -49,10 +70,12 @@ export function SwarmTextInput({ name, label, password, optional, formik, onChan
      required
      label={label}
      fullWidth
-      variant="outlined"
+      variant="filled"
      className={classes.field}
-      defaultValue=""
+      defaultValue={defaultValue || ''}
      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
+      placeholder={placeholder}
    />
  )
 }
@@ -1,10 +1,10 @@
 import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import { Activity } from 'react-feather'
+import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
-import { config } from '../config'
 import { ROUTES } from '../routes'
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
      <Grid item className={classes.content}>
        <Typography align="center">
          Please check your node status to fix the problem. You can also check out the{' '}
-          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
            Swarm Bee Docs
          </MuiLink>{' '}
          or ask for support on the{' '}
-          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
            Ethereum Swarm Discord
          </MuiLink>
          .
@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Waiting(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress size={240} style={{ color: '#ffffff' }} />
+    </Grid>
+  )
+}
@@ -1,24 +1,23 @@
-import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import FormHelperText from '@material-ui/core/FormHelperText'
-import { Token } from '../models/Token'
-import type { BigNumber } from 'bignumber.js'
+import Input from '@material-ui/core/Input'
+import { BZZ, TransactionId } from '@ethersphere/bee-js'
 import { useSnackbar } from 'notistack'
+import { ReactElement, ReactNode, useState } from 'react'

 interface Props {
  successMessage: string
  errorMessage: string
  dialogMessage: string
  label: string
-  max?: BigNumber
-  min?: BigNumber
-  action: (amount: bigint) => Promise<string>
+  max?: BZZ
+  min?: BZZ
+  action: (amount: BZZ) => Promise<TransactionId>
  icon?: ReactNode
 }

@@ -34,7 +33,7 @@ export default function WithdrawDepositModal({
 }: Props): ReactElement {
  const [open, setOpen] = useState(false)
  const [amount, setAmount] = useState('')
-  const [amountToken, setAmountToken] = useState<Token | null>(null)
+  const [amountToken, setAmountToken] = useState<BZZ | null>(null)
  const [amountError, setAmountError] = useState<Error | null>(null)
  const { enqueueSnackbar } = useSnackbar()

@@ -51,10 +50,11 @@ export default function WithdrawDepositModal({
    if (amountToken === null) return

    try {
-      const transactionHash = await action(amountToken.toBigInt as bigint)
+      const transactionHash = await action(amountToken)
      setOpen(false)
      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
    } catch (e) {
+      console.error(e) // eslint-disable-line
      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
    }
  }
@@ -64,12 +64,12 @@ export default function WithdrawDepositModal({
    setAmount(value)
    setAmountError(null)
    try {
-      const t = Token.fromDecimal(value)
+      const t = BZZ.fromDecimalString(value)
      setAmountToken(t)

-      if (min && t.toDecimal.isLessThan(min)) setAmountError(new Error(`Needs to be more than ${min}`))
+      if (min && t.lt(min)) setAmountError(new Error(`Needs to be more than ${min.toSignificantDigits(4)}`))

-      if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
+      if (max && t.gt(max)) setAmountError(new Error(`Needs to be less than ${max.toSignificantDigits(4)}`))
    } catch (e) {
      setAmountError(e as Error)
    }
@@ -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,29 +0,0 @@
-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
-  public readonly BLOCKCHAIN_EXPLORER_URL: string
-  public readonly BEE_DOCS_HOST: string
-  public readonly BEE_DISCORD_HOST: string
-  public readonly GITHUB_REPO_URL: string
-
-  constructor() {
-    this.BEE_API_HOST =
-      sessionStorage.getItem('api_host') || getProcessEnv('REACT_APP_BEE_HOST') || 'http://localhost:1633'
-    this.BEE_DEBUG_API_HOST =
-      sessionStorage.getItem('debug_api_host') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
-    this.BLOCKCHAIN_EXPLORER_URL =
-      getProcessEnv('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_DISCORD_HOST = getProcessEnv('REACT_APP_BEE_DISCORD_HOST') || 'https://discord.gg/eKr9XPv7'
-    this.GITHUB_REPO_URL =
-      getProcessEnv('REACT_APP_BEE_GITHUB_REPO_URL') || 'https://api.github.com/repos/ethersphere/bee'
-  }
-}
-
-export const config = new Config()
-
-export default config
@@ -0,0 +1,13 @@
+export const META_FILE_NAME = 'metadata'
+export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
+export const BZZ_LINK_DOMAIN = 'bzz.link'
+export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet'
+export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/'
+export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7'
+export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee'
+export const GITHUB_BEE_DASHBOARD_URL = 'https://github.com/ethersphere/bee-dashboard.git'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
+  'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
+export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
+export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'
@@ -1,25 +1,31 @@
+import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'

-import WithdrawDepositModal from '../components/WithdrawDepositModal'
-import { BigNumber } from 'bignumber.js'
-
 export default function DepositModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)

  return (
    <WithdrawDepositModal
      successMessage="Successful deposit."
      errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
+      dialogMessage="Amount of xBZZ to deposit to the checkbook, from your node."
      label="Deposit"
      icon={<Download size="1rem" />}
-      min={new BigNumber(0)}
-      action={(amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+      min={BZZ.fromPLUR('1')}
+      action={async (amount: BZZ) => {
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }

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

 export default function WithdrawModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)

  return (
    <WithdrawDepositModal
      successMessage="Successful withdrawal."
      errorMessage="Error with withdrawing."
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Amount of xBZZ to withdraw from the checkbook to your node."
      label="Withdraw"
      icon={<Upload size="1rem" />}
-      min={new BigNumber(0)}
-      action={(amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+      min={BZZ.fromPLUR('1')}
+      action={async (amount: BZZ) => {
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }

-        return beeDebugApi.withdrawTokens(amount.toString())
+        const transactionHash = await beeApi.withdrawTokens(amount)
+        refresh()
+
+        return transactionHash
      }}
    />
  )
@@ -1,22 +1,20 @@
-import { LastCashoutActionResponse, BeeDebug } from '@ethersphere/bee-js'
+import { AllSettlements, Bee, BZZ, LastCashoutActionResponse, PeerBalance, Settlements } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
-import { Token } from '../models/Token'
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
-import { Balance, Settlements, Settlement } from '../types'

 interface UseAccountingHook {
  isLoadingUncashed: boolean
-  totalUncashed: Token
+  totalUncashed: BZZ
  accounting: Accounting[] | null
 }

 export interface Accounting {
  peer: string
-  uncashedAmount: Token
-  balance: Token
-  received: Token
-  sent: Token
-  total: Token
+  uncashedAmount: BZZ
+  balance: BZZ
+  received: BZZ
+  sent: BZZ
+  total: BZZ
 }

 /**
@@ -29,8 +27,8 @@ export interface Accounting {
 * @returns
 */
 function mergeAccounting(
-  balances: Balance[] | null,
-  settlements?: Settlement[],
+  balances: PeerBalance[] | null,
+  settlements?: Settlements[],
  uncashedAmounts?: LastCashoutActionResponse[],
 ): Accounting[] | null {
  // Settlements or balances are still loading or there is an error -> return null
@@ -44,9 +42,9 @@ function mergeAccounting(
      (accounting[peer] = {
        peer,
        balance,
-        sent: new Token('0'),
-        received: new Token('0'),
-        uncashedAmount: new Token('0'),
+        sent: BZZ.fromPLUR('0'),
+        received: BZZ.fromPLUR('0'),
+        uncashedAmount: BZZ.fromPLUR('0'),
        total: balance,
      }),
  )
@@ -57,7 +55,7 @@ function mergeAccounting(
        ...accounting[peer],
        sent,
        received,
-        total: new Token(accounting[peer].balance.toBigNumber.plus(received.toBigNumber).minus(sent.toBigNumber)),
+        total: accounting[peer].balance.plus(received).minus(sent),
      }),
  )

@@ -65,49 +63,49 @@ function mergeAccounting(
  if (!uncashedAmounts) return Object.values(accounting).sort((a, b) => (a.peer < b.peer ? -1 : 1))

  uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
-    accounting[peer].uncashedAmount = new Token(uncashedAmount)
+    accounting[peer].uncashedAmount = uncashedAmount
  })

  // Return sorted by the uncashed amount first and then by the peer id
  return Object.values(accounting).sort((a, b) => {
-    const diff = b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber()
+    const diff = Number(b.uncashedAmount.minus(a.uncashedAmount))

-    if (diff !== 0) return diff
+    if (diff !== 0) {
+      return diff
+    }

    return a.peer < b.peer ? -1 : 1
  })
 }

 export const useAccounting = (
-  beeDebugApi: BeeDebug | null,
-  settlements: Settlements | null,
-  balances: Balance[] | null,
+  beeApi: Bee | null,
+  settlements: AllSettlements | null,
+  balances: PeerBalance[] | null,
 ): UseAccountingHook => {
  const [isLoadingUncashed, setIsloadingUncashed] = useState<boolean>(false)
  const [uncashedAmounts, setUncashedAmounts] = useState<LastCashoutActionResponse[] | undefined>(undefined)

  useEffect(() => {
    // We don't have any settlements loaded yet or we are already loading/have loaded the uncashed amounts
-    if (isLoadingUncashed || !beeDebugApi || !settlements || uncashedAmounts) return
+    if (isLoadingUncashed || !beeApi || !settlements || uncashedAmounts) return

    setIsloadingUncashed(true)
    const promises = settlements.settlements
-      .filter(({ received }) => received.toBigNumber.gt('0'))
-      .map(({ peer }) => makeRetriablePromise(() => beeDebugApi.getLastCashoutAction(peer)))
+      .filter(({ received }) => received.gt(BZZ.fromPLUR('0')))
+      .map(({ peer }) => makeRetriablePromise(() => beeApi.getLastCashoutAction(peer)))

    Promise.allSettled(promises).then(settlements => {
      const results = unwrapPromiseSettlements(settlements)
      setUncashedAmounts(results.fulfilled)
      setIsloadingUncashed(false)
    })
-  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeApi])

  const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)

-  let totalUncashed: Token = new Token('0')
-  accounting?.forEach(
-    ({ uncashedAmount }) => (totalUncashed = new Token(totalUncashed.toBigNumber.plus(uncashedAmount.toBigNumber))),
-  )
+  let totalUncashed = BZZ.fromPLUR('0')
+  accounting?.forEach(({ uncashedAmount }) => (totalUncashed = totalUncashed.plus(uncashedAmount)))

  return {
    isLoadingUncashed,
@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react-hooks'
+import cors from 'cors'
+import express from 'express'
+import type { Server } from 'http'
+import { useBeeDesktop } from './apiHooks'
+
+interface AddressInfo {
+  address: string
+  family: string
+  port: number
+}
+
+export function mockServer(data: Record<string | number | symbol, string | boolean>): Promise<Server> {
+  const app = express()
+  app.use(cors())
+
+  app.get('/info', (req, res) => {
+    res.send(data)
+  })
+
+  return new Promise(resolve => {
+    const server = app.listen(() => {
+      resolve(server)
+    })
+  })
+}
+
+let serverCorrect: Server
+
+let serverCorrectURL: string
+
+beforeAll(async () => {
+  serverCorrect = await mockServer({ autoUpdateEnabled: true, version: '0.1.0' })
+  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
+  serverCorrectURL = `http://localhost:${portServerCorrect}`
+})
+
+afterAll(async () => {
+  await new Promise(resolve => serverCorrect.close(resolve))
+})
+
+describe('useBeeDesktop', () => {
+  it('should not have error when connected to bee-desktop', async () => {
+    const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.desktopAutoUpdateEnabled).toBe(true)
+    expect(result.current.beeDesktopVersion).toBe('0.1.0')
+    expect(result.current.error).toBe(null)
+  })
+})
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { config } from '../config'
+import { GITHUB_REPO_URL } from '../constants'
+import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'

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

+export interface BeeDesktopHook {
+  reachable: boolean
+  error: Error | null
+  isLoading: boolean
+  beeDesktopVersion: string
+  desktopAutoUpdateEnabled: boolean
+}
+
+export interface NewDesktopVersionHook {
+  newBeeDesktopVersion: string
+}
+
+export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
+  const [reachable, setReachable] = useState(false)
+  const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
+  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
+  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      return
+    }
+
+    function runReachabilityCheck() {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
+        })
+        .catch(() => {
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+    } else {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(res => {
+          setBeeDesktopVersion(res.data?.version)
+          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+          setError(null)
+        })
+        .catch(e => {
+          setError(e)
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    }
+  }, [desktopUrl, isBeeDesktop])
+
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
+}
+
+async function checkNewVersion(desktopUrl: string): Promise<string> {
+  const resJson = await (await fetch(`${desktopUrl}/info`)).json()
+  const currentVersion = resJson.version
+  const latestVersion = await getLatestBeeDesktopVersion()
+
+  if (currentVersion !== latestVersion) {
+    return latestVersion
+  }
+
+  return ''
+}
+
+export function useNewBeeDesktopVersion(
+  isBeeDesktop: boolean,
+  desktopUrl: string,
+  desktopAutoUpdateEnabled: boolean,
+): NewDesktopVersionHook {
+  const [newBeeDesktopVersion, setNewBeeDesktopVersion] = useState<string>('')
+
+  useEffect(() => {
+    if (!isBeeDesktop || desktopAutoUpdateEnabled) {
+      return
+    }
+
+    checkNewVersion(desktopUrl).then(version => {
+      if (version !== '') {
+        setNewBeeDesktopVersion(version)
+      }
+    })
+  }, [isBeeDesktop, desktopUrl, desktopAutoUpdateEnabled])
+
+  return { newBeeDesktopVersion }
+}
+
+export interface GetBeeConfig {
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useGetBeeConfig = (desktopUrl: string): GetBeeConfig => {
+  const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
+  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    getDesktopConfiguration(desktopUrl)
+      .then(beeConf => {
+        setBeeConfig(beeConf)
+        setError(null)
+      })
+      .catch((err: Error) => {
+        setError(err)
+        setBeeConfig(null)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [desktopUrl])
+
+  return { config: beeConfig, isLoading, error }
+}
+
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
  const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
  const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)
@@ -15,7 +144,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {

  useEffect(() => {
    axios
-      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
+      .get(`${GITHUB_REPO_URL}/releases/latest`)
      .then(res => {
        setLatestBeeRelease(res.data)
      })
@@ -2,9 +2,8 @@ body {
  height: 100vh;
  min-height: 100vh;
  margin: 0;
-  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    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;
 }
@@ -16,6 +15,12 @@ body {
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 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,12 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
 import App from './App'
+import './index.css'
 import reportWebVitals from './reportWebVitals'

+const desktopEnabled = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true'
+const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
+const beeApiUrl = process.env.REACT_APP_BEE_HOST
+const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+
 ReactDOM.render(
  <React.StrictMode>
-    <App />
+    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -1,13 +1,16 @@
-import { useContext, ReactElement } from 'react'
+import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useEffect } from 'react'
+import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
-import AlertVersion from '../components/AlertVersion'
-import { Container, CircularProgress } from '@material-ui/core'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-
+import { Flex } from '../components/Flex'
 import SideBar from '../components/SideBar'
-
-import { Context } from '../providers/Bee'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
+import { useLocation } from 'react-router-dom'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -15,36 +18,85 @@ const useStyles = makeStyles((theme: Theme) =>
      backgroundColor: theme.palette.background.default,
      minHeight: '100vh',
    },
+
+    fileManagerOn: {
+      padding: '0px',
+    },
  }),
 )

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

 const Dashboard = (props: Props): ReactElement => {
+  const location = useLocation()
+
+  const isFileManagerOn = location.pathname.startsWith('/filemanager')
  const classes = useStyles()

-  const { isLoading } = useContext(Context)
+  const { isLoading } = useContext(BeeContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  useEffect(() => {
+    // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
+    if (desktopAutoUpdateEnabled) {
+      return
+    }
+
+    if (newBeeDesktopVersion !== '') {
+      enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
+        variant: 'warning',
+        preventDuplicate: true,
+        key: 'desktopNewVersion',
+        persist: true,
+        action: key => (
+          <React.Fragment>
+            <Button
+              onClick={() => {
+                window.open(BEE_DESKTOP_LATEST_RELEASE_PAGE)
+                closeSnackbar(key)
+              }}
+            >
+              Download release
+            </Button>
+            <IconButton
+              onClick={() => {
+                closeSnackbar(key)
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        ),
+      })
+    }
+  }, [enqueueSnackbar, closeSnackbar, newBeeDesktopVersion, desktopAutoUpdateEnabled])
+
+  const content = (
+    <>
+      {isLoading ? (
+        <div style={{ textAlign: 'center', width: '100%' }}>
+          <CircularProgress />
+        </div>
+      ) : (
+        props.children
+      )}
+    </>
+  )

  return (
-    <div style={{ display: 'flex' }}>
+    <Flex>
      <SideBar />
-      <Container className={classes.content}>
-        <ErrorBoundary>
-          <>
-            <AlertVersion />
-            {isLoading ? (
-              <div style={{ textAlign: 'center', width: '100%' }}>
-                <CircularProgress />
-              </div>
-            ) : (
-              props.children
-            )}
-          </>
-        </ErrorBoundary>
+      <Container className={`${classes.content} ${isFileManagerOn ? classes.fileManagerOn : ''}`}>
+        {' '}
+        <ErrorBoundary errorReporting={props.errorReporting}>{content}</ErrorBoundary>
      </Container>
-    </div>
+    </Flex>
  )
 }

@@ -1,39 +0,0 @@
-import BigNumber from 'bignumber.js'
-import { Token } from './Token'
-
-describe('models/Token', () => {
-  describe('Token.fromDecimal', () => {
-    const values = [
-      { bzz: '0', baseUnits: '0' },
-      { bzz: '0.1', baseUnits: BigInt('1000000000000000') },
-      { bzz: '9.9', baseUnits: BigInt('99000000000000000') },
-    ]
-
-    // Test with default 16 decimal places
-    values.forEach(({ bzz, baseUnits }) => {
-      test(`converting ${bzz} => ${baseUnits}`, () => {
-        expect(Token.fromDecimal(bzz).toBigNumber.eq(baseUnits.toString())).toBe(true)
-      })
-    })
-
-    // Test with 0 decimal places
-    values.forEach(({ baseUnits }) => {
-      test(`converting ${baseUnits} => ${baseUnits} with 0 decimals`, () => {
-        expect(Token.fromDecimal(baseUnits, 0).toBigNumber.eq(baseUnits.toString())).toBe(true)
-      })
-    })
-  })
-
-  describe('new Token', () => {
-    const cs = ['0', '1234567890', '99000000000000000']
-    const correctValues = [...cs, ...cs.map(BigInt), ...cs.map(v => new BigNumber(v))]
-
-    correctValues.forEach(v => {
-      test(`New Token ${v} of type ${typeof v}`, () => {
-        const t = new Token(v)
-
-        expect(t.toBigNumber.eq(v.toString())).toBe(true)
-      })
-    })
-  })
-})
@@ -1,60 +0,0 @@
-import { BigNumber } from 'bignumber.js'
-import { isInteger, makeBigNumber } from '../utils'
-
-const POSSIBLE_DECIMALS = [18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
-type digits = typeof POSSIBLE_DECIMALS[number]
-
-const BZZ_DECIMALS = 16
-
-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) {
-    const a = makeBigNumber(amount)
-
-    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) throw new TypeError('Not a valid token values')
-
-    this.amount = a
-    this.decimals = decimals
-  }
-
-  /**
-   * Construct new Token from a digit representation
-   *
-   * @param amount    Amount of a token in the digits (1 token = 10^decimals)
-   * @param decimals  Number of decimals for the token (must be integer)
-   *
-   * @throws {TypeError} If the decimals is not an integer or the amount after conversion is not an integer
-   *
-   * @returns new Token
-   */
-  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
-    const t = a.multipliedBy(new BigNumber(10).pow(decimals))
-
-    return new Token(t, decimals)
-  }
-
-  get toBigInt(): BigInt {
-    return BigInt(this.amount.toFixed(0))
-  }
-
-  get toString(): string {
-    return this.amount.toFixed(0)
-  }
-
-  get toBigNumber(): BigNumber {
-    return new BigNumber(this.amount)
-  }
-
-  get toDecimal(): BigNumber {
-    return this.amount.dividedBy(new BigNumber(10).pow(this.decimals))
-  }
-
-  toFixedDecimal(digits = 7): string {
-    return this.toDecimal.toFixed(digits)
-  }
-}
@@ -0,0 +1,111 @@
+.fm-admin-status-bar-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgb(33, 33, 33);
+  height: 60px;
+  padding: 10px 16px;
+
+  &.is-loading {
+    filter: blur(1px);
+  }
+}
+
+.fm-admin-status-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  color: rgb(229, 231, 235);
+}
+
+.fm-admin-status-bar-upgrade-button {
+  padding: 6px;
+  background-color: rgb(237, 237, 237);
+  border-radius: 0;
+  text-align: center;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}
+
+.fm-admin-status-bar-loader {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
+  animation: fmShimmer 1.2s infinite;
+  border-radius: 6px;
+}
+
+@keyframes fmShimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.fm-admin-status-bar-progress-pill-container {
+  position: absolute;
+  height: 60px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  bottom: 0;
+  right: 0;
+}
+
+.fm-admin-status-progress-pill {
+  position: absolute;
+  right: 16px;
+
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+
+  background: rgb(255, 255, 255);
+  color: #000000;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+
+  backdrop-filter: blur(6px);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  z-index: 999;
+
+  &:hover {
+    background: rgb(221, 221, 221);
+  }
+
+  &::after {
+    content: '›';
+    font-size: 14px;
+    opacity: 0.7;
+    transition: transform 0.2s ease;
+  }
+
+  &:hover::after {
+    transform: translateX(2px);
+    opacity: 1;
+  }
+}
+
+.fm-admin-status-bar-container.is-loading .fm-admin-status-progress-pill {
+  filter: none;
+}
@@ -0,0 +1,254 @@
+import { ReactElement, useState, useMemo, useEffect, useContext, useCallback } from 'react'
+import './AdminStatusBar.scss'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { DriveInfo, estimateDriveListMetadataSize } from '@solarpunkltd/file-manager-lib'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
+import { calculateStampCapacityMetrics } from '../../utils/bee'
+import { getHumanReadableFileSize } from '../../../../utils/file'
+import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
+import { UpgradeTimeoutModal } from '../UpgradeTimeoutModal/UpgradeTimeoutModal'
+import { FILE_MANAGER_EVENTS, POLLING_TIMEOUT_MS } from '../../constants/common'
+import { useStampPolling } from '../../hooks/useStampPolling'
+
+interface AdminStatusBarProps {
+  adminStamp: PostageBatch | null
+  adminDrive: DriveInfo | null
+  loading: boolean
+  isCreationInProgress: boolean
+  setErrorMessage?: (error: string) => void
+}
+
+export function AdminStatusBar({
+  adminStamp,
+  adminDrive,
+  loading,
+  isCreationInProgress,
+  setErrorMessage,
+}: AdminStatusBarProps): ReactElement {
+  const { drives, setShowError, refreshStamp } = useContext(FMContext)
+
+  const [isUpgradeDriveModalOpen, setIsUpgradeDriveModalOpen] = useState(false)
+  const [isUpgradeTimeoutModalOpen, setIsUpgradeTimeoutModalOpen] = useState(false)
+  const [isUpgrading, setIsUpgrading] = useState(false)
+  const [actualStamp, setActualStamp] = useState<PostageBatch | null>(adminStamp)
+  const [showProgressModal, setShowProgressModal] = useState(true)
+
+  const handleStampUpdated = useCallback((updatedStamp: PostageBatch) => {
+    setActualStamp(updatedStamp)
+  }, [])
+
+  const handlePollingStateChange = useCallback((_isPolling: boolean) => {
+    // no-op
+  }, [])
+
+  const { startPolling } = useStampPolling({
+    onStampUpdated: handleStampUpdated,
+    onPollingStateChange: handlePollingStateChange,
+    refreshStamp,
+    timeout: POLLING_TIMEOUT_MS,
+  })
+
+  useEffect(() => {
+    setShowProgressModal(isCreationInProgress || loading)
+  }, [isCreationInProgress, loading, setShowProgressModal])
+
+  useEffect(() => {
+    if (!adminStamp || !actualStamp) {
+      setActualStamp(adminStamp)
+
+      return
+    }
+
+    if (actualStamp.batchID.toString() !== adminStamp.batchID.toString()) {
+      setActualStamp(adminStamp)
+
+      return
+    }
+
+    const incomingSize = adminStamp.size.toBytes()
+    const currentSize = actualStamp.size.toBytes()
+    const incomingExpiry = adminStamp.duration.toEndDate().getTime()
+    const currentExpiry = actualStamp.duration.toEndDate().getTime()
+
+    if (incomingSize > currentSize || incomingExpiry > currentExpiry) {
+      setActualStamp(adminStamp)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adminStamp])
+
+  useEffect(() => {
+    if (!adminDrive) return
+
+    const id = adminDrive.id.toString()
+
+    const onStart = (e: Event) => {
+      const { driveId } = (e as CustomEvent).detail || {}
+
+      if (driveId === id) {
+        setIsUpgrading(true)
+      }
+    }
+
+    const onEnd = (e: Event) => {
+      const { driveId, success, error, updatedStamp } = (e as CustomEvent).detail || {}
+
+      if (driveId !== id) return
+
+      if (!success && error) {
+        setIsUpgrading(false)
+        setErrorMessage?.(error)
+        setShowError(true)
+
+        return
+      }
+
+      if (updatedStamp) {
+        setActualStamp(updatedStamp)
+      }
+
+      setIsUpgrading(false)
+    }
+
+    const onTimeout = (e: Event) => {
+      const { driveId } = (e as CustomEvent).detail || {}
+
+      if (driveId === id) {
+        setIsUpgradeTimeoutModalOpen(true)
+      }
+    }
+
+    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_START, onStart as EventListener)
+    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onEnd as EventListener)
+    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_TIMEOUT, onTimeout as EventListener)
+
+    return () => {
+      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_START, onStart as EventListener)
+      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onEnd as EventListener)
+      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_TIMEOUT, onTimeout as EventListener)
+    }
+  }, [adminDrive, setErrorMessage, setShowError])
+
+  const handleTimeoutCancel = useCallback(() => {
+    setIsUpgrading(false)
+    setIsUpgradeTimeoutModalOpen(false)
+
+    // Restart polling to continue checking for capacity updates
+    if (actualStamp) {
+      startPolling(actualStamp)
+    }
+  }, [actualStamp, startPolling])
+
+  const { capacityPct, usedSize, totalSize } = useMemo(() => {
+    if (!actualStamp) {
+      return {
+        capacityPct: 0,
+        usedSize: '—',
+        totalSize: '—',
+      }
+    }
+
+    const estimatedDlSizeBytes = estimateDriveListMetadataSize(drives) * drives.length
+    const {
+      capacityPct: reportedPct,
+      usedBytes: reportedUsedBytes,
+      stampSizeBytes,
+    } = calculateStampCapacityMetrics(actualStamp, [], adminDrive?.redundancyLevel)
+    const actualUsedSizeBytes = Math.max(reportedUsedBytes, estimatedDlSizeBytes)
+    const actualPct = Math.max(reportedPct, (actualUsedSizeBytes / stampSizeBytes) * 100)
+
+    return {
+      capacityPct: actualPct,
+      usedSize: getHumanReadableFileSize(actualUsedSizeBytes),
+      totalSize: getHumanReadableFileSize(stampSizeBytes),
+    }
+  }, [actualStamp, adminDrive, drives])
+
+  const expiresAt = useMemo(
+    () => (actualStamp ? actualStamp.duration.toEndDate().toLocaleDateString() : '—'),
+    [actualStamp],
+  )
+
+  const isBusy = loading || isUpgrading || isCreationInProgress
+  const blurCls = isBusy ? ' is-loading' : ''
+  const statusVerb = isCreationInProgress ? 'Creating' : 'Loading'
+  const statusText = statusVerb + '  admin drive, please do not reload'
+
+  const renderModalsAndOverlays = () => {
+    return (
+      <>
+        {isUpgradeDriveModalOpen && actualStamp && adminDrive && (
+          <UpgradeDriveModal
+            stamp={actualStamp}
+            drive={adminDrive}
+            onCancelClick={() => setIsUpgradeDriveModalOpen(false)}
+            setErrorMessage={setErrorMessage}
+          />
+        )}
+
+        {isUpgradeTimeoutModalOpen && adminDrive && actualStamp && (
+          <UpgradeTimeoutModal driveName={adminDrive.name} onOk={handleTimeoutCancel} />
+        )}
+
+        {isUpgrading && (
+          <div className="fm-drive-item-creating-overlay" aria-live="polite">
+            <div className="fm-mini-spinner" />
+            <span>Upgrading admin drive…</span>
+          </div>
+        )}
+
+        {showProgressModal && (
+          <ConfirmModal
+            title="Admin Drive Creation"
+            isProgress
+            spinnerMessage={statusText}
+            showFooter={false}
+            showMinimize={true}
+            onMinimize={() => setShowProgressModal(false)}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    <div>
+      <div className={`fm-admin-status-bar-container${blurCls}`} aria-busy={isBusy ? 'true' : 'false'}>
+        <div className="fm-admin-status-bar-left">
+          <div
+            className={`fm-drive-item-capacity ${isUpgrading ? 'fm-drive-item-capacity-updating' : ''}`}
+            title={isUpgrading ? 'Capacity is updating... This may take a few moments.' : ''}
+          >
+            Capacity <ProgressBar value={capacityPct} width="150px" /> {usedSize} / {totalSize}
+          </div>
+
+          <div>File Manager Available: Until: {expiresAt}</div>
+
+          <Tooltip
+            label="The File Manager works only while your storage remains valid. If it expires, all catalogue metadata is
+            permanently lost."
+          />
+        </div>
+
+        {renderModalsAndOverlays()}
+
+        <div
+          className="fm-admin-status-bar-upgrade-button"
+          onClick={() => !isBusy && actualStamp && adminDrive && setIsUpgradeDriveModalOpen(true)}
+          aria-disabled={isBusy ? 'true' : 'false'}
+        >
+          {isBusy ? 'Working…' : 'Manage'}
+        </div>
+      </div>
+      {!showProgressModal && (loading || isCreationInProgress) && (
+        <div className="fm-admin-status-bar-progress-pill-container">
+          <div className="fm-admin-status-progress-pill" onClick={() => setShowProgressModal(true)}>
+            {statusText}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,66 @@
+.fm-button {
+  border-radius: 0px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+.fm-button-primary {
+  background-color: rgb(237, 129, 49);
+  color: white;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.fm-button-secondary {
+  background-color: rgb(255, 255, 255);
+  color: rgb(55, 65, 81);
+  border: 1px solid rgb(209, 213, 219);
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.fm-button-danger {
+  background-color: #dc2626;
+  color: white;
+  border: 1px solid #dc2626;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.fm-button-small {
+  font-size: 10px;
+  padding: 2px 3px;
+}
+
+.fm-button-medium {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fm-button-disabled {
+  background-color: rgb(156, 163, 175);
+  border: 1px solid rgb(156, 163, 175);
+
+  &:hover {
+    opacity: 1;
+    cursor: not-allowed;
+  }
+}
+
+.fm-button-icon {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
@@ -0,0 +1,34 @@
+import { ReactElement } from 'react'
+import './Button.scss'
+
+interface ButtonProps {
+  label: string
+  onClick?: () => void
+  icon?: ReactElement
+  size?: 'small' | 'medium'
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+  width?: number
+}
+
+export function Button({
+  label,
+  onClick,
+  icon,
+  size = 'medium',
+  variant = 'primary',
+  disabled,
+  width,
+}: ButtonProps): ReactElement {
+  return (
+    <div
+      className={`fm-button fm-button-${variant} fm-button-${size}${icon ? ' fm-button-icon' : ''}${
+        disabled ? ' fm-button-disabled' : ''
+      }`}
+      onClick={disabled ? undefined : onClick}
+      style={{ width: width ? `${width}px` : undefined }}
+    >
+      {icon} {label}
+    </div>
+  )
+}
@@ -0,0 +1,40 @@
+.fm-modal-container .fm-modal-window {
+  width: min(560px, 92vw);
+}
+
+.fm-modal-container .fm-modal-window-header {
+  font-weight: 600;
+}
+
+.fm-modal-container .fm-modal-window-body .fm-modal-white-section {
+  max-height: 50vh;
+  overflow: auto;
+  word-break: break-word;
+  padding: 12px 14px;
+  border-radius: 8px;
+}
+
+.fm-modal-container .fm-modal-window-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+@media (max-width: 480px) {
+  .fm-modal-container .fm-modal-window {
+    width: 94vw;
+  }
+  .fm-modal-container .fm-modal-window-body .fm-modal-white-section {
+    max-height: 56vh;
+  }
+}
+
+.fm-modal-no-background {
+  background: transparent;
+}
+
+.fm-spinner-message {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
@@ -0,0 +1,67 @@
+import { ReactElement } from 'react'
+import '../../styles/global.scss'
+import './ConfirmModal.scss'
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+
+interface ConfirmModalProps {
+  title?: React.ReactNode
+  message?: React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm?: () => void | Promise<void>
+  onCancel?: () => void
+  showFooter?: boolean
+  isProgress?: boolean
+  spinnerMessage?: string
+  showMinimize?: boolean
+  onMinimize?: () => void
+  background?: boolean
+}
+
+export function ConfirmModal({
+  title = 'Are you sure?',
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  showFooter = true,
+  isProgress = false,
+  spinnerMessage,
+  showMinimize = true,
+  onMinimize,
+  background = true,
+}: ConfirmModalProps): ReactElement {
+  const modalRoot = document.querySelector('.fm-main') || document.body
+
+  return createPortal(
+    <div className={`fm-modal-container fm-confirm-modal ${background ? '' : 'fm-modal-no-background'}`}>
+      <div className="fm-modal-window">
+        <div className="fm-modal-window-header">{title}</div>
+
+        <div className="fm-modal-window-body">
+          {isProgress ? (
+            <div className="fm-spinner-center">
+              <div className="fm-spinner-message">
+                <div>{spinnerMessage || 'Working…'}</div>
+                <div className="fm-mini-spinner" />
+              </div>
+              {showMinimize && <Button label="Minimize" variant="secondary" onClick={onMinimize} />}
+            </div>
+          ) : (
+            <div className="fm-modal-white-section">{message}</div>
+          )}
+        </div>
+
+        {showFooter && (onCancel || onConfirm) && (
+          <div className="fm-modal-window-footer">
+            {onCancel && <Button label={cancelLabel} variant="secondary" onClick={onCancel} />}
+            {onConfirm && <Button label={confirmLabel} variant="primary" onClick={() => onConfirm()} />}
+          </div>
+        )}
+      </div>
+    </div>,
+    modalRoot,
+  )
+}
@@ -0,0 +1,6 @@
+.fm-context-menu {
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0px;
+}
@@ -0,0 +1,11 @@
+import { ReactElement } from 'react'
+
+import './ContextMenu.scss'
+
+interface ContextMenuProps {
+  children?: ReactElement | ReactElement[]
+}
+
+export function ContextMenu({ children }: ContextMenuProps): ReactElement {
+  return <div className="fm-context-menu">{children}</div>
+}
@@ -0,0 +1,91 @@
+.fm-create-drive-modal-container {
+  position: absolute;
+
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: #000c;
+  backdrop-filter: blur(5px);
+  z-index: 1300;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fm-create-drive-modal {
+  width: 450px;
+  padding: 24px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  justify-content: center;
+  align-items: center;
+}
+
+.fm-create-drive-modal-header {
+  display: flex;
+  width: 100%;
+  justify-content: start;
+  font-size: 18px;
+  color: rgb(237, 129, 49);
+  font-weight: 700;
+}
+
+.fm-create-drive-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  border: 1px solid rgb(229, 231, 235);
+  padding: 24px;
+  background-color: rgb(249, 250, 251);
+}
+
+.fm-create-drive-modal-input-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: rgb(55, 65, 81);
+
+  & input {
+    padding: 8px 12px;
+    font-size: 14px;
+    font-family: 'iAWriterQuattroV';
+    border: 1px solid rgb(209, 213, 219);
+
+    line-height: 21px;
+    outline: none;
+  }
+
+  & input::placeholder {
+    color: #aaa;
+  }
+
+  & input:focus {
+    border: 1px solid rgb(237, 129, 49) !important;
+  }
+}
+
+.fm-create-drive-modal-footer {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.fm-modal-info-note {
+  font-size: 0.85rem;
+  color: #666;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.fm-error-text {
+  color: var(--fm-error, #dc2626);
+  font-size: 12px;
+  line-height: 1.25;
+}
@@ -0,0 +1,261 @@
+import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
+
+import { BeeModes, BZZ, DAI, Duration, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
+import './CreateDriveModal.scss'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+import { Button } from '../Button/Button'
+import { fmFetchCost, handleCreateDrive } from '../../utils/bee'
+import { getExpiryDateByLifetime } from '../../utils/common'
+import { erasureCodeMarks } from '../../constants/common'
+import { desiredLifetimeOptions } from '../../constants/stamps'
+import { Context as BeeContext } from '../../../../providers/Bee'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { FMSlider } from '../Slider/Slider'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { getHumanReadableFileSize } from '../../../../utils/file'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { TOOLTIPS } from '../../constants/tooltips'
+
+const minMarkValue = Math.min(...erasureCodeMarks.map(mark => mark.value))
+const maxMarkValue = Math.max(...erasureCodeMarks.map(mark => mark.value))
+const maxDriveNameLength = 40
+
+interface CreateDriveModalProps {
+  onCancelClick: () => void
+  onDriveCreated: () => void
+  onCreationStarted: (driveName: string) => void
+  onCreationError: (name: string) => void
+}
+// TODO: select existing batch id or create a new one - just like in InitialModal
+export function CreateDriveModal({
+  onCancelClick,
+  onDriveCreated,
+  onCreationStarted,
+  onCreationError,
+}: CreateDriveModalProps): ReactElement {
+  const [isCreateEnabled, setIsCreateEnabled] = useState(false)
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState(true)
+  const [isxDaiBalanceSufficient, setIsxDaiBalanceSufficient] = useState(true)
+  const [capacity, setCapacity] = useState(0)
+  const [lifetimeIndex, setLifetimeIndex] = useState(-1)
+  const [validityEndDate, setValidityEndDate] = useState(new Date())
+  const [driveName, setDriveName] = useState('')
+  const [capacityIndex, setCapacityIndex] = useState(-1)
+  const [encryptionEnabled] = useState(false)
+  const [erasureCodeLevel, setErasureCodeLevel] = useState(RedundancyLevel.OFF)
+  const [cost, setCost] = useState('0')
+
+  const [sizeMarks, setSizeMarks] = useState<{ value: number; label: string }[]>([])
+  const { walletBalance, nodeInfo } = useContext(BeeContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { fm, drives, expiredDrives, adminDrive } = useContext(FMContext)
+  const currentFetch = useRef<Promise<void> | null>(null)
+  const isMountedRef = useRef(true)
+  const [duplicate, setDuplicate] = useState(false)
+
+  const trimmedName = driveName.trim()
+  const allExistingDriveNames = new Set(
+    [...(drives || []), ...(expiredDrives || []), ...(adminDrive ? [adminDrive] : [])].map(d => d.name.trim()),
+  )
+  const nameExists = trimmedName.length > 0 && allExistingDriveNames.has(trimmedName)
+  const validationError = duplicate && nameExists ? 'Drive already exists. Please choose another name.' : ''
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
+  useEffect(() => {
+    if (duplicate && !nameExists) {
+      setDuplicate(false)
+    }
+  }, [duplicate, nameExists])
+
+  const handleCapacityChange = (value: number, index: number) => {
+    setCapacityIndex(index)
+  }
+
+  useEffect(() => {
+    const newSizes = Array.from(Utils.getStampEffectiveBytesBreakpoints(encryptionEnabled, erasureCodeLevel).values())
+
+    setSizeMarks(
+      newSizes.map(size => ({
+        value: size,
+        label: getHumanReadableFileSize(size),
+      })),
+    )
+
+    setCapacity(newSizes[capacityIndex])
+  }, [encryptionEnabled, erasureCodeLevel, capacityIndex])
+
+  useEffect(() => {
+    if (capacity > 0 && validityEndDate.getTime() > new Date().getTime()) {
+      fmFetchCost(
+        capacity,
+        validityEndDate,
+        false,
+        erasureCodeLevel,
+        beeApi,
+        (cost: BZZ) => {
+          if (!isMountedRef.current) return
+
+          setIsBalanceSufficient(true)
+          setIsxDaiBalanceSufficient(true)
+
+          if ((walletBalance && cost.gte(walletBalance.bzzBalance)) || !walletBalance) {
+            setIsBalanceSufficient(false)
+          }
+          setCost(cost.toSignificantDigits(2))
+
+          const zeroDAI = DAI.fromDecimalString('0')
+
+          if ((walletBalance && zeroDAI.eq(walletBalance.nativeTokenBalance)) || !walletBalance) {
+            setIsxDaiBalanceSufficient(false)
+          }
+        },
+        currentFetch,
+      )
+
+      const canCreate = Boolean(trimmedName) && !nameExists
+      setIsCreateEnabled(canCreate)
+    } else {
+      setCost('0')
+      setIsCreateEnabled(false)
+    }
+  }, [capacity, validityEndDate, beeApi, walletBalance, nameExists, erasureCodeLevel, trimmedName])
+
+  useEffect(() => {
+    setValidityEndDate(getExpiryDateByLifetime(lifetimeIndex))
+  }, [lifetimeIndex])
+
+  const isUltraLightNode = nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+  const isCreateDriveDisabled = isUltraLightNode || !isCreateEnabled || !isBalanceSufficient || !isxDaiBalanceSufficient
+
+  return (
+    <div className="fm-modal-container">
+      <div className="fm-modal-window">
+        <div className="fm-modal-window-header">Create new drive</div>
+        <div className="fm-modal-window-body">
+          <div className="fm-modal-window-input-container">
+            <label htmlFor="drive-name" className="fm-input-label">
+              Drive name: <Tooltip label={TOOLTIPS.DRIVE_NAME} />
+            </label>
+            <input
+              type="text"
+              id="drive-name"
+              placeholder="My important files"
+              value={driveName}
+              onChange={e => setDriveName(e.target.value)}
+              onBlur={() => setDuplicate(true)}
+              maxLength={maxDriveNameLength}
+            />
+            {validationError && <div className="fm-error-text">{validationError}</div>}
+          </div>
+          <div className="fm-modal-window-input-container">
+            <label htmlFor="drive-initial-capacity" className="fm-input-label">
+              Initial capacity: <Tooltip label={TOOLTIPS.DRIVE_INITIAL_CAPACITY} />
+            </label>
+            <CustomDropdown
+              id="drive-initial-capacity"
+              options={sizeMarks}
+              value={capacity}
+              onChange={handleCapacityChange}
+              placeholder="Select a value"
+            />
+          </div>
+          <div className="fm-modal-info-warning">
+            Drive sizes are calculated automatically from your current stamp configuration.
+          </div>
+          <div className="fm-modal-window-input-container">
+            <label htmlFor="drive-desired-lifetime" className="fm-input-label">
+              Desired lifetime: <Tooltip label={TOOLTIPS.DRIVE_DESIRED_LIFETIME} />
+            </label>
+            <CustomDropdown
+              id="drive-desired-lifetime"
+              options={desiredLifetimeOptions}
+              value={lifetimeIndex}
+              onChange={setLifetimeIndex}
+              placeholder="Select a value"
+            />
+          </div>
+          <div className="fm-modal-window-input-container">
+            <label htmlFor="drive-security-level" className="fm-input-label">
+              Security Level <Tooltip label={TOOLTIPS.DRIVE_SECURITY_LEVEL} />
+            </label>
+            <FMSlider
+              id="drive-security-level"
+              defaultValue={0}
+              marks={erasureCodeMarks}
+              onChange={value => setErasureCodeLevel(value)}
+              minValue={minMarkValue}
+              maxValue={maxMarkValue}
+              step={1}
+            />
+          </div>
+
+          <div>
+            <div className="fm-modal-estimated-cost-container">
+              <div className="fm-emphasized-text">Estimated Cost:</div>
+              <div>
+                {cost} BZZ {isBalanceSufficient ? '' : '(Insufficient balance)'}
+                {isxDaiBalanceSufficient ? '' : ' (Insufficient xDAI balance)'}
+              </div>
+              <Tooltip label={TOOLTIPS.DRIVE_ESTIMATED_COST} bottomTooltip={true} />
+            </div>
+            <div>(Based on current network conditions)</div>
+            {isUltraLightNode && (
+              <div>
+                Creating a drive requires running a light node. Please{' '}
+                <a
+                  href="https://docs.ethswarm.org/docs/desktop/configuration/#upgrading-from-an-ultra-light-to-a-light-node"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  upgrade
+                </a>{' '}
+                to continue.
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="fm-modal-window-footer">
+          <Button
+            label="Create drive"
+            variant="primary"
+            disabled={isCreateDriveDisabled}
+            onClick={async () => {
+              if (!trimmedName || nameExists) {
+                setDuplicate(true)
+
+                return
+              }
+
+              if (isCreateEnabled && walletBalance && adminDrive) {
+                onCreationStarted(driveName)
+                onCancelClick()
+
+                await handleCreateDrive({
+                  beeApi,
+                  fm,
+                  size: Size.fromBytes(capacity),
+                  duration: Duration.fromEndDate(validityEndDate),
+                  label: trimmedName,
+                  encryption: encryptionEnabled,
+                  redundancyLevel: erasureCodeLevel,
+                  adminRedundancy: adminDrive?.redundancyLevel,
+                  isAdmin: false,
+                  resetState: false,
+                  existingBatch: null,
+                  onSuccess: () => onDriveCreated(),
+                  onError: () => onCreationError(trimmedName),
+                })
+              }
+            }}
+          />
+          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/Show More
+++ b/Show More