chore(master): release 0.33.2 (#708 )

fix: clarify installation instructions in README (#707 )
chore: set formbricks env in pull_request workflow (#103 ) (#706 )
2025-11-14 15:34:50 +01:00 · 2025-11-14 15:27:12 +01:00 · 2025-11-14 14:26:14 +01:00 · 2025-11-13 19:09:37 +01:00 · 2025-11-13 19:00:35 +01:00 · 2025-11-12 11:47:45 +01:00
334 changed files with 85826 additions and 42888 deletions
@@ -1,19 +1,20 @@
 {
  "ignores": [
-    "@types/jest", 
+    "@testing-library/react",
+    "@types/*",
    "@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",
+    "@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"],
@@ -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
@@ -58,15 +47,6 @@ jobs:
      - name: Types check
        run: npm run check:types

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

@@ -74,15 +54,16 @@ jobs:
        run: npm run build:component

      - name: Create preview
-        uses: ethersphere/swarm-actions/pr-preview@v0
+        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 }}"
+          headers: '${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}'

      - name: Upload to testnet
-        uses: ethersphere/swarm-actions/upload-dir@v0
+        uses: ethersphere/swarm-actions/upload-dir@v1
        continue-on-error: true
        with:
          index-document: index.html
@@ -12,11 +12,9 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
-          node-version: 14
+          node-version: 18
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
-      - run: npm run compile:types
-      - run: npm run build:component
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
@@ -0,0 +1,25 @@
+# After new release is published on github, publish it to npmjs
+name: Publish the project to Github Pages
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - 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
@@ -14,7 +14,7 @@ jobs:

    strategy:
      matrix:
-        node-version: [14.x]
+        node-version: [18.x]

    steps:
      - uses: actions/checkout@v2
@@ -25,21 +25,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,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+settings.json
@@ -1,5 +1,337 @@
 # Changelog

+## [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)


@@ -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.6.0-6ceadd35<!-- SUPPORTED_BEE_END -->**.
-Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
-[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
+Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).

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

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

 ## Table of Contents

@@ -43,11 +41,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
@@ -94,7 +94,32 @@ 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.
+
+#### 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
+```

 ## Contribute

@@ -107,7 +132,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).
@@ -116,5 +140,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)
@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+import envPaths from 'env-paths'
+import open  from 'open'
+
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const paths = envPaths('Swarm Desktop', { suffix: '' })
+const apiKey = await readFile(join(paths.data, 'api-key.txt'), {encoding: 'utf-8'})
+const url = `http://localhost:3001/?v=${apiKey}#/`
+
+console.log('Opening: ' + url)
+await open(url)
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.16.0",
+  "version": "0.33.2",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -25,43 +25,55 @@
    "type": "git",
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
+  "overrides": {
+    "@fairdatasociety/fdp-storage": {
+      "@ethersphere/bee-js": "^10.1.1"
+    }
+  },
  "dependencies": {
-    "@ethersphere/bee-js": "^4.1.1",
-    "@ethersphere/manifest-js": "1.1.0",
-    "@ethersphere/swarm-cid": "^0.1.0",
+    "@ethersphere/bee-js": "^10.1.1",
+    "@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",
-    "ethers": "^5.6.4",
+    "@solarpunkltd/file-manager-lib": "^1.0.0",
+    "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": "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.7",
-    "@babel/preset-typescript": "7.16.0",
+    "@babel/core": "^7.22.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/preset-typescript": "^7.22.0",
    "@commitlint/config-conventional": "14.1.0",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "12.1.2",
@@ -72,57 +84,66 @@
    "@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.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",
+    "base64-inline-loader": "^2.0.1",
    "cors": "^2.8.5",
    "depcheck": "^1.4.3",
-    "eslint": "7.24.0",
+    "env-paths": "^3.0.0",
+    "eslint": "8.17.0 ",
    "eslint-config-prettier": "8.5.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",
+    "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.7.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",
@@ -142,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"
  }
 }
@@ -23,7 +23,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Bee Dashboard</title>
+    <title>Swarm</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,63 +1,32 @@
@font-face {
-  font-family: 'Work Sans';
+  font-family: 'iAWriterQuattroV';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(assets/fonts/WorkSans/WorkSans-Light.ttf) format('truetype');
+  src: url(assets/fonts/iAWriterQuattroV.ttf) format('truetype');
 }
+
@font-face {
-  font-family: 'Work Sans';
+  font-family: 'iAWriterMonoV';
  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(assets/fonts/WorkSans/WorkSans-Regular.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(assets/fonts/WorkSans/WorkSans-Medium.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(assets/fonts/WorkSans/WorkSans-SemiBold.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'IBMPlexMono500';
-  src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
-  font-weight: 500;
-}
-@font-face {
-  font-family: 'IBMPlexMono600';
-  src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
-  font-weight: 600;
-}
-@font-face {
-  font-family: 'IBMPlexMonoregular';
-  src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
  font-weight: 300;
-}
-@font-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-display: swap;
+  src: url(assets/fonts/iAWriterMonoV.ttf) format('truetype');
 }

 .App {
-  font-family: 'Work Sans', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

 a,
 button {
-  font-family: 'IBMPlexMono500' !important;
+  font-family: 'iAWriterMonoV' !important;
  color: #dd7700;
 }
+
+.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,55 +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 { 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>
-                  <TopUpProvider>
-                    <SnackbarProvider>
-                      <Router>
-                        <>
-                          <CssBaseline />
-                          <Dashboard>
-                            <BaseRouter />
-                          </Dashboard>
-                        </>
-                      </Router>
-                    </SnackbarProvider>
-                  </TopUpProvider>
-                </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
@@ -0,0 +1,88 @@
+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',
+      },
+      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>
+  )
+}
@@ -7,9 +7,8 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Zap } from 'react-feather'
+import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
-import EthereumAddress from './EthereumAddress'

 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(() => {
@@ -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,6 +57,7 @@ interface Props {
  expandedOnly?: boolean
  confirmLabel?: string
  confirmLabelDisabled?: boolean
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
  loading?: boolean
  onChange?: (value: string) => void
  onConfirm?: (value: string) => void
@@ -67,6 +72,7 @@ export default function ExpandableListItemKey({
  onChange,
  confirmLabel,
  confirmLabelDisabled,
+  confirmIcon,
  expandedOnly,
  helperText,
  placeholder,
@@ -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,31 +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={() => {
-              if (onConfirm) 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({
@@ -76,20 +77,18 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
        <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>
@@ -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,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>
+}
@@ -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,58 +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, Briefcase, DollarSign, FileText, Gift, 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,
-  },
-  {
-    label: 'Account',
-    path: ROUTES.WALLET,
-    icon: Briefcase,
-  },
-  {
-    label: 'Gift Wallets',
-    path: ROUTES.GIFT_CODES,
-    icon: Gift,
-  },
-]
-
 const drawerWidth = 300

 const useStyles = makeStyles((theme: Theme) =>
@@ -70,6 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
    drawerPaper: {
      width: drawerWidth,
      backgroundColor: '#212121',
+      zIndex: 988,
    },
    logo: {
      marginLeft: theme.spacing(8),
@@ -78,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),
@@ -103,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>
@@ -120,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>
@@ -127,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(path && matchPath(location.pathname, path))
+  const isSelected = pathMatcherSubstring
+    ? location.pathname.startsWith(pathMatcherSubstring)
+    : Boolean(path && matchPath(location.pathname, path))

  return (
    <StyledListItem button selected={isSelected} disableRipple>
@@ -1,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',
    },
  }),
 )
@@ -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,5 +1,5 @@
-import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import type { ReactElement } from 'react'
 import { CheckState } from '../providers/Bee'

 interface Props {
@@ -25,6 +25,12 @@ export default function StatusIcon({ checkState, size, className, isLoading }: P
    case CheckState.ERROR:
      backgroundColor = '#ff3a52'
      break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.CONNECTING:
+      backgroundColor = '#0074D9'
+      break
    default:
      // Default is error
      backgroundColor = '#ff3a52'
@@ -1,13 +1,9 @@
-import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { IconProps } from 'react-feather'
+import type { RemixiconReactIconProps } from 'remixicon-react'

-interface Props {
-  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'
@@ -16,13 +12,13 @@ interface Props {
 const useStyles = makeStyles(() =>
  createStyles({
    button: {
-      height: '52px',
+      height: '42px',
      position: 'relative',
      whiteSpace: 'nowrap',
      color: '#242424',
      '&:hover, &:focus': {
        '& svg': {
-          stroke: '#fff',
+          fill: '#fff',
          transition: '0.1s',
        },
      },
@@ -51,7 +47,9 @@ export function SwarmButton({
  loading,
  cancel,
  variant = 'contained',
-}: Props): ReactElement {
+  style,
+  ...other
+}: SwarmButtonProps): ReactElement {
  const classes = useStyles()

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

  return (
    <Button
+      style={style}
      className={getButtonClassName()}
      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick()
-        event.currentTarget.blur()
+        if (onClick) {
+          onClick(event)
+          event.currentTarget.blur()
+        }
      }}
      variant={variant}
      startIcon={icon}
      disabled={disabled}
+      {...other}
    >
      {children}
      {loading && (
@@ -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) =>
@@ -37,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) {
@@ -46,13 +71,15 @@ 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) => (
@@ -68,15 +95,17 @@ 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) => (
@@ -84,7 +113,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
            {x.label}
          </MenuItem>
        ))}
-      </SimpleSelect>
+      </MuiSelect>
    </>
  )
 }
@@ -10,6 +10,7 @@ interface Props {
  formik?: boolean
  optional?: boolean
  defaultValue?: string
+  placeholder?: string
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }

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

@@ -57,6 +59,7 @@ export function SwarmTextInput({
        className={classes.field}
        defaultValue={defaultValue || ''}
        InputProps={{ disableUnderline: true }}
+        placeholder={placeholder}
      />
    )
  }
@@ -72,6 +75,7 @@ export function SwarmTextInput({
      defaultValue={defaultValue || ''}
      onChange={onChange}
      InputProps={{ disableUnderline: true }}
+      placeholder={placeholder}
    />
  )
 }
@@ -1,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,31 +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
-  public readonly BEE_DESKTOP_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'
-    this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
-  }
-}
-
-export const config = new Config()
-
-export default config
@@ -1,4 +1,13 @@
-export const META_FILE_NAME = '.swarmgatewaymeta.json'
-export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
+export const META_FILE_NAME = 'metadata'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
-export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'
+export const BZZ_LINK_DOMAIN = 'bzz.link'
+export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet'
+export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/'
+export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7'
+export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee'
+export const GITHUB_BEE_DASHBOARD_URL = 'https://github.com/ethersphere/bee-dashboard.git'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
+  'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
+export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
+export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'
@@ -1,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,
@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react-hooks'
-import express from 'express'
 import cors from 'cors'
+import express from 'express'
 import type { Server } from 'http'
-import { useIsBeeDesktop } from './apiHooks'
+import { useBeeDesktop } from './apiHooks'

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

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

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

 let serverCorrect: Server
-let serverWrong: Server

 let serverCorrectURL: string
-let serverWrongURL: string

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

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

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

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

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

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

-interface Config {
-  BEE_DESKTOP_URL: string
+export interface NewDesktopVersionHook {
+  newBeeDesktopVersion: string
 }

-/**
- * Detect if the dashboard is run within bee-desktop
- *
- * @returns isBeeDesktop true if this is run within bee-desktop
- */
-export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
-  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
+  const [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(() => {
-    axios
-      .get(`${conf.BEE_DESKTOP_URL}/info`)
-      .then(res => {
-        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
-        else setIsBeeDesktop(false)
-      })
-      .catch(() => {
-        setIsBeeDesktop(false)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [conf])
+    if (!isBeeDesktop) {
+      return
+    }

-  return { isBeeDesktop, isLoading }
+    function runReachabilityCheck() {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
+        })
+        .catch(() => {
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+    } else {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(res => {
+          setBeeDesktopVersion(res.data?.version)
+          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+          setError(null)
+        })
+        .catch(e => {
+          setError(e)
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    }
+  }, [desktopUrl, isBeeDesktop])
+
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }

-export interface BeeConfig {
-  'api-addr': string
-  'debug-api-addr': string
-  'debug-api-enable': boolean
-  password: string
-  'swap-enable': boolean
-  'swap-initial-deposit': bigint
-  mainnet: boolean
-  'full-node': boolean
-  'chain-enable': boolean
-  'cors-allowed-origins': string
-  'resolver-options': string
-  'use-postage-snapshot': boolean
-  'data-dir': string
-  transaction: string
-  'block-hash': string
-  'swap-endpoint'?: string
+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 {
@@ -70,13 +114,13 @@ export interface GetBeeConfig {
  error: Error | null
 }

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

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

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

  useEffect(() => {
    axios
-      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
+      .get(`${GITHUB_REPO_URL}/releases/latest`)
      .then(res => {
        setLatestBeeRelease(res.data)
      })
@@ -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 = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED)
+const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
+const beeApiUrl = process.env.REACT_APP_BEE_HOST
+const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+
 ReactDOM.render(
  <React.StrictMode>
-    <App />
+    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -1,9 +1,16 @@
-import { CircularProgress, Container } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ReactElement, useContext } 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 { 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({
@@ -11,35 +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>
-          <>
-            {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,8 +0,0 @@
-import { BigNumber } from 'bignumber.js'
-import { Token } from './Token'
-
-export class BzzToken extends Token {
-  constructor(amount: BigNumber | string | BigInt) {
-    super(amount, 16)
-  }
-}
@@ -1,8 +0,0 @@
-import { BigNumber } from 'bignumber.js'
-import { Token } from './Token'
-
-export class DaiToken extends Token {
-  constructor(amount: BigNumber | string | BigInt) {
-    super(amount, 18)
-  }
-}
@@ -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,90 +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: ${amount} ${decimals}`)
-    }
-
-    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)
-  }
-
-  toSignificantDigits(digits = 4): string {
-    const asString = this.toDecimal.toFixed(this.decimals)
-
-    let indexOfSignificantDigit = -1
-    let reachedDecimalPoint = false
-
-    for (let i = 0; i < asString.length; i++) {
-      const char = asString[i]
-
-      if (char === '.') {
-        reachedDecimalPoint = true
-        indexOfSignificantDigit = i + 1
-      } else if (reachedDecimalPoint && char !== '0') {
-        indexOfSignificantDigit = i
-        break
-      }
-    }
-
-    return asString.slice(0, indexOfSignificantDigit + digits)
-  }
-
-  minusBaseUnits(amount: string): Token {
-    return new Token(
-      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
-      this.decimals,
-    )
-  }
-}
@@ -0,0 +1,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,172 @@
+import { ReactElement, useState, useMemo, useEffect, useRef, useContext } from 'react'
+import './AdminStatusBar.scss'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
+import { calculateStampCapacityMetrics } from '../../utils/bee'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
+
+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 { setShowError, refreshStamp } = useContext(FMContext)
+
+  const [isUpgradeDriveModalOpen, setIsUpgradeDriveModalOpen] = useState(false)
+  const [isUpgrading, setIsUpgrading] = useState(false)
+  const [actualStamp, setActualStamp] = useState<PostageBatch | null>(adminStamp)
+  const [showProgressModal, setShowProgressModal] = useState(true)
+
+  const isMountedRef = useRef(true)
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
+  useEffect(() => {
+    setShowProgressModal(isCreationInProgress || loading)
+  }, [isCreationInProgress, loading, setShowProgressModal])
+
+  useEffect(() => {
+    setActualStamp(adminStamp)
+  }, [adminStamp, setActualStamp])
+
+  useEffect(() => {
+    if (!adminDrive) return
+
+    const id = adminDrive.id.toString()
+    const batchId = adminStamp?.batchID.toString() || ''
+
+    const onStart = (e: Event) => {
+      const { driveId } = (e as CustomEvent).detail || {}
+
+      if (driveId === id) {
+        setIsUpgrading(true)
+      }
+    }
+
+    const onEnd = async (e: Event) => {
+      const { driveId, success, error } = (e as CustomEvent).detail || {}
+
+      if (!success) {
+        if (error) {
+          setErrorMessage?.(error)
+        }
+
+        setShowError(true)
+      }
+
+      if (driveId === id && batchId) {
+        setIsUpgrading(false)
+
+        const upgradedStamp = await refreshStamp(batchId)
+
+        if (!isMountedRef.current) return
+
+        if (upgradedStamp) {
+          setActualStamp(upgradedStamp)
+        }
+      }
+    }
+
+    window.addEventListener('fm:drive-upgrade-start', onStart as EventListener)
+    window.addEventListener('fm:drive-upgrade-end', onEnd as EventListener)
+
+    return () => {
+      window.removeEventListener('fm:drive-upgrade-start', onStart as EventListener)
+      window.removeEventListener('fm:drive-upgrade-end', onEnd as EventListener)
+    }
+  }, [adminDrive, adminStamp?.batchID, setErrorMessage, setShowError, refreshStamp, setIsUpgrading])
+
+  const { capacityPct, usedSize, totalSize } = useMemo(
+    () => calculateStampCapacityMetrics(actualStamp, adminDrive),
+    [actualStamp, adminDrive],
+  )
+
+  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'
+
+  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">
+            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>
+
+        {isUpgradeDriveModalOpen && actualStamp && adminDrive && (
+          <UpgradeDriveModal
+            stamp={actualStamp}
+            drive={adminDrive}
+            onCancelClick={() => setIsUpgradeDriveModalOpen(false)}
+            setErrorMessage={setErrorMessage}
+          />
+        )}
+
+        <div
+          className="fm-admin-status-bar-upgrade-button"
+          onClick={() => !isBusy && actualStamp && adminDrive && setIsUpgradeDriveModalOpen(true)}
+          aria-disabled={isBusy ? 'true' : 'false'}
+        >
+          {isBusy ? 'Working…' : 'Manage'}
+        </div>
+
+        {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)}
+          />
+        )}
+      </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?: string
+  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,85 @@
+.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;
+}
@@ -0,0 +1,216 @@
+import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
+
+import { BZZ, 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))
+
+interface CreateDriveModalProps {
+  onCancelClick: () => void
+  onDriveCreated: () => void
+  onCreationStarted: () => 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 [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 } = useContext(BeeContext)
+  const { beeApi } = useContext(SettingsContext)
+  const { fm } = useContext(FMContext)
+  const currentFetch = useRef<Promise<void> | null>(null)
+  const isMountedRef = useRef(true)
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
+  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)
+
+          if ((walletBalance && cost.gte(walletBalance.bzzBalance)) || !walletBalance) {
+            setIsBalanceSufficient(false)
+          }
+          setCost(cost.toSignificantDigits(2))
+        },
+        currentFetch,
+      )
+
+      if (driveName && driveName.trim().length > 0) {
+        setIsCreateEnabled(true)
+      } else {
+        setIsCreateEnabled(false)
+      }
+    } else {
+      setCost('0')
+      setIsCreateEnabled(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [capacity, validityEndDate, beeApi, driveName, walletBalance])
+
+  useEffect(() => {
+    setValidityEndDate(getExpiryDateByLifetime(lifetimeIndex))
+  }, [lifetimeIndex])
+
+  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)}
+            />
+          </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 shown above are system-calculated based on 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)'}
+              </div>
+
+              <Tooltip label={TOOLTIPS.DRIVE_ESTIMATED_COST} bottomTooltip={true} />
+            </div>
+            <div>(Based on current network conditions)</div>
+          </div>
+        </div>
+        <div className="fm-modal-window-footer">
+          <Button
+            label="Create drive"
+            variant="primary"
+            disabled={!isCreateEnabled || !isBalanceSufficient}
+            onClick={async () => {
+              if (isCreateEnabled && fm && beeApi && walletBalance) {
+                onCreationStarted()
+                onCancelClick()
+
+                await handleCreateDrive(
+                  beeApi,
+                  fm,
+                  Size.fromBytes(capacity),
+                  Duration.fromEndDate(validityEndDate),
+                  driveName,
+                  encryptionEnabled,
+                  erasureCodeLevel,
+                  false,
+                  false,
+                  null,
+                  () => onDriveCreated(), // onSuccess
+                  () => onCreationError(driveName), // onError
+                )
+              }
+            }}
+          />
+          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,86 @@
+.fm-custom-dropdown {
+  position: relative;
+  width: 100%;
+  font-size: 14px;
+  user-select: none;
+
+  .fm-custom-dropdown-selected {
+    padding: 8px 12px;
+    border: 1px solid rgb(209, 213, 219);
+    border-radius: 0px;
+    background: #fff;
+    color: rgb(55, 65, 81);
+    cursor: pointer;
+    position: relative;
+    transition: border-color 0.2s;
+    outline: none;
+    display: flex;
+    align-items: center;
+    min-height: 40px;
+
+    .placeholder {
+      color: #aaa;
+    }
+
+    & .arrow {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%) rotate(0deg);
+      width: 16px;
+      height: 16px;
+      pointer-events: none;
+      display: inline-block;
+      transition: transform 0.2s;
+    }
+
+    &.open .arrow {
+      transform: translateY(-50%) rotate(180deg);
+    }
+
+    &:focus,
+    &.open {
+      border-color: rgb(237, 129, 49);
+    }
+  }
+
+  .fm-custom-dropdown-list {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + 4px);
+    background: #fff;
+    border: 1px solid rgb(209, 213, 219);
+    border-radius: 0px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 20;
+    margin: 0;
+    padding: 4px 0;
+    list-style: none;
+    max-height: 220px;
+    overflow-y: auto;
+    animation: fadeIn 0.15s;
+
+    li {
+      padding: 10px 16px;
+      cursor: pointer;
+      color: rgb(55, 65, 81);
+      transition: background 0.15s;
+      &:hover,
+      &.selected {
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
@@ -0,0 +1,74 @@
+import { useState, useRef } from 'react'
+import './CustomDropdown.scss'
+import ArrowDropdown from 'remixicon-react/ArrowDropDownLineIcon'
+import { useClickOutside } from '../../hooks/useClickOutside'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+interface Option {
+  value: number
+  label: string
+}
+
+interface CustomDropdownProps {
+  options: Option[]
+  value: number
+  onChange: (value: number, index: number) => void
+  placeholder?: string
+  id?: string
+  label?: string
+  icon?: React.ReactNode
+  infoText?: string
+}
+
+export function CustomDropdown({
+  options,
+  value,
+  onChange,
+  placeholder,
+  id,
+  label,
+  icon,
+  infoText,
+}: CustomDropdownProps) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useClickOutside(ref, () => setOpen(false), open)
+
+  const selectedLabel = options.find(opt => opt.value === value)?.label || ''
+
+  return (
+    <div className="fm-custom-dropdown" ref={ref}>
+      {label && (
+        <label htmlFor={id} className="fm-input-label">
+          {icon} {label} {infoText && <Tooltip label={infoText ? infoText : ''} iconSize="14px" />}
+        </label>
+      )}
+      <div
+        className={`fm-custom-dropdown-selected${open ? ' open' : ''}`}
+        id={id}
+        onClick={() => setOpen(prev => !prev)}
+      >
+        {selectedLabel || <span className="placeholder">{placeholder} </span>}
+
+        <ArrowDropdown className="arrow" />
+      </div>
+      {open && (
+        <ul className="fm-custom-dropdown-list">
+          {options.map((opt, index) => (
+            <li
+              key={opt.value}
+              className={opt.value === value ? 'selected' : ''}
+              onClick={() => {
+                onChange(opt.value, index)
+                setOpen(false)
+              }}
+            >
+              {opt.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,17 @@
+.fm-delete-file-modal {
+  width: 510px;
+}
+
+.fm-delete-file-modal-list {
+  margin: 0 0 12px 0;
+  padding: 0;
+  list-style: none;
+  max-height: 240px;
+  overflow: auto;
+}
+
+.fm-delete-file-modal-list-item {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
@@ -0,0 +1,120 @@
+import { ReactElement, useState } from 'react'
+import './DeleteFileModal.scss'
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+import TrashIcon from 'remixicon-react/DeleteBin6LineIcon'
+import AlertIcon from 'remixicon-react/AlertLineIcon'
+
+import Radio from '@material-ui/core/Radio'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import FormControl from '@material-ui/core/FormControl'
+
+import { FileAction } from '../../constants/transfers'
+
+interface DeleteFileModalProps {
+  name?: string
+  names?: string[]
+  currentDriveName?: string
+  onCancelClick: () => void
+  onProceed: (action: FileAction) => void
+}
+
+export function DeleteFileModal({
+  name,
+  names,
+  currentDriveName,
+  onCancelClick,
+  onProceed,
+}: DeleteFileModalProps): ReactElement {
+  const [value, setValue] = useState<FileAction>(FileAction.Trash)
+
+  const modalRoot = document.querySelector('.fm-main') || document.body
+  const isBulk = Array.isArray(names) && names.length > 0
+  const count = isBulk ? names.length : 1
+  const headerText = isBulk ? `Delete ${count} file${count > 1 ? 's' : ''}?` : `Delete ${name}?`
+  const subjectNoun = isBulk ? 'selected file(s)' : 'this file'
+
+  return createPortal(
+    <div className="fm-modal-container">
+      <div className="fm-modal-window fm-delete-file-modal">
+        <div className="fm-modal-window-header">
+          <TrashIcon /> <span className="fm-main-font-color">{headerText}</span>
+        </div>
+
+        <div className="fm-modal-window-body">
+          {isBulk && (
+            <ul className="fm-delete-file-modal-list">
+              {names.map(n => (
+                <li key={n} className="fm-delete-file-modal-list-item" title={n}>
+                  {n}
+                </li>
+              ))}
+            </ul>
+          )}
+          <FormControl component="fieldset">
+            <div className="fm-radio-group">
+              <div className="fm-form-control-label">
+                <FormControlLabel
+                  value={FileAction.Trash}
+                  control={<Radio checked={value === FileAction.Trash} onChange={() => setValue(FileAction.Trash)} />}
+                  label={
+                    <div className="fm-radio-label">
+                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">Move to Trash</div>
+                      <div onClick={e => e.preventDefault()}>
+                        Moves {subjectNoun} to the trash. It will still take up space on{' '}
+                        {currentDriveName ?? 'this drive'} and expire along with it. You can restore it later.
+                      </div>
+                    </div>
+                  }
+                />
+              </div>
+
+              <div className="fm-form-control-label">
+                <FormControlLabel
+                  value={FileAction.Forget}
+                  control={<Radio checked={value === FileAction.Forget} onChange={() => setValue(FileAction.Forget)} />}
+                  label={
+                    <div className="fm-radio-label">
+                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">Forget</div>
+                      <div onClick={e => e.preventDefault()}>
+                        Removes {subjectNoun} from your view. The data will remain on Swarm until{' '}
+                        {currentDriveName ?? 'the drive'} expires. This action cannot be easily undone.
+                      </div>
+                    </div>
+                  }
+                />
+              </div>
+
+              <div className="fm-form-control-label">
+                <FormControlLabel
+                  value={FileAction.Destroy}
+                  control={
+                    <Radio checked={value === FileAction.Destroy} onChange={() => setValue(FileAction.Destroy)} />
+                  }
+                  label={
+                    <div className="fm-radio-label">
+                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">
+                        Destroy entire drive {currentDriveName ? `‘${currentDriveName}’` : ''} to delete this{' '}
+                        {subjectNoun}
+                      </div>
+                      <div className="fm-red-font" onClick={e => e.preventDefault()}>
+                        <AlertIcon size="14px" className="fm-alert-icon-inline" />
+                        Warning: This will make all files on this drive inaccessible. This action is irreversible.
+                      </div>
+                    </div>
+                  }
+                />
+              </div>
+            </div>
+          </FormControl>
+        </div>
+
+        <div className="fm-modal-window-footer">
+          <Button label="Proceed" variant="primary" onClick={() => onProceed(value)} />
+          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
+        </div>
+      </div>
+    </div>,
+    modalRoot,
+  )
+}
--- a/Show More
+++ b/Show More