fix: adapt redistribution feature for v0.35.1

- Use @mui/material import in redistribution page - Configure pnpm workspace build script approvals
added new page with node redistribution statistics
2026-06-15 09:55:16 +00:00 · 2026-06-15 09:47:25 +00:00 · 2026-04-10 11:25:29 +02:00 · 2026-04-10 10:59:20 +02:00 · 2026-04-02 15:30:25 +02:00 · 2026-04-02 14:53:20 +02:00
323 changed files with 19474 additions and 31017 deletions
@@ -1,50 +1,20 @@
-'use strict'
-
-module.exports = function (api) {
-  const targets = '>1% and not ie 11 and not dead'
+module.exports = api => {
  api.cache(true)
-  api.cacheDirectory = true

  return {
    presets: [
+      ['@babel/preset-env', { targets: { node: 'current' }, modules: 'commonjs' }],
      '@babel/preset-typescript',
-      [
-        '@babel/preset-env',
-        {
-          targets,
-          modules: false,
-        }
-      ],
-      ['@babel/preset-react', {runtime: 'automatic' }]
+      ['@babel/preset-react', { runtime: 'automatic' }],
    ],
    plugins: [
-      [
-        "babel-plugin-tsconfig-paths",
-        {
-          "relative": true,
-          "extensions": [
-            ".js",
-            ".jsx",
-            ".ts",
-            ".tsx",
-            ".es",
-            ".es6",
-            ".mjs"
-          ],
-          "rootDir": ".",
-          "tsconfig": "tsconfig.lib.json",
-        }
-      ],
-      "@babel/plugin-proposal-numeric-separator",
-      "syntax-dynamic-import",
-      '@babel/plugin-proposal-class-properties',
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
-          regenerator: true
-        }
-      ]
-    ]
+          regenerator: true,
+        },
+      ],
+    ],
  }
 }
@@ -1,20 +1,18 @@
 {
  "ignores": [
-    "@testing-library/react",
    "@types/*",
-    "@commitlint/config-conventional",
+    "@commitlint/*",
    "@babel/*",
-    "babel*",
+    "@eslint/*",
+    "@eslint/*",
    "eslint*",
-    "file-loader",
-    "ts-node",
-    "webpack-cli",
-    "buffer",
-    "crypto*",
-    "stream*",
    "env-paths",
+    "husky",
+    "jest-environment-jsdom",
    "open",
-    "base64-inline-loader",
-    "sass"
+    "rimraf",
+    "sass",
+    "ts-node",
+    "@vitejs/plugin-react"
  ]
 }
@@ -0,0 +1,47 @@
+# Dependencies and build outputs
+node_modules
+build
+lib
+
+# Git
+.git
+.gitignore
+
+# CI/CD and tooling
+.github
+.husky
+tests
+
+# Documentation
+docs
+*.md
+LICENSE
+CODE_OF_CONDUCT.md
+CODEOWNERS
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+
+# Environment files
+.env
+.env.local
+.env.development
+
+# OS files
+.DS_Store
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# Coverage
+coverage
+
+# Dev scripts
+desktop.mjs
+utils
@@ -1,3 +1,6 @@
 PORT=3002
-REACT_APP_FORMBRICKS_ENV_ID=
-REACT_APP_FORMBRICKS_APP_URL=
+VITE_BEE_DESKTOP_URL=http://localhost:3054
+VITE_FORMBRICKS_ENV_ID=
+VITE_FORMBRICKS_APP_URL=
+VITE_DEFAULT_RPC_URL=
+VITE_BEE_DESKTOP_ENABLED=
@@ -1,100 +0,0 @@
-{
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "react-app",
-    "react-app/jest"
-  ],
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2018
-  },
-  "rules": {
-    "array-bracket-newline": ["error", "consistent"],
-    "strict": ["error", "safe"],
-    "block-scoped-var": "error",
-    "complexity": "warn",
-    "default-case": "error",
-    "dot-notation": "warn",
-    "eqeqeq": "error",
-    "guard-for-in": "warn",
-    "linebreak-style": ["warn", "unix"],
-    "no-alert": "error",
-    "no-case-declarations": "error",
-    "no-console": "error",
-    "no-constant-condition": "error",
-    "no-continue": "warn",
-    "no-div-regex": "error",
-    "no-empty": "warn",
-    "no-empty-pattern": "error",
-    "no-implicit-coercion": "error",
-    "prefer-arrow-callback": "warn",
-    "no-labels": "error",
-    "no-loop-func": "error",
-    "no-nested-ternary": "warn",
-    "no-script-url": "error",
-    "quote-props": ["error", "as-needed"],
-    "require-yield": "error",
-    "max-nested-callbacks": ["error", 4],
-    "max-depth": ["error", 4],
-    "require-await": "error",
-    "space-before-function-paren": [
-      "error",
-      {
-        "anonymous": "never",
-        "named": "never",
-        "asyncArrow": "always"
-      }
-    ],
-    "padding-line-between-statements": [
-      "error",
-      { "blankLine": "always", "prev": "*", "next": "if" },
-      { "blankLine": "always", "prev": "*", "next": "function" },
-      { "blankLine": "always", "prev": "*", "next": "return" }
-    ],
-    "no-useless-constructor": "off",
-    "no-dupe-class-members": "off",
-    "no-unused-expressions": "off",
-    "curly": ["error", "multi-line"],
-    "object-curly-spacing": ["error", "always"],
-    "comma-dangle": ["error", "always-multiline"],
-    "@typescript-eslint/no-useless-constructor": "error",
-    "@typescript-eslint/no-unused-expressions": "error",
-    "@typescript-eslint/member-delimiter-style": [
-      "error",
-      {
-        "multiline": {
-          "delimiter": "none",
-          "requireLast": true
-        },
-        "singleline": {
-          "delimiter": "semi",
-          "requireLast": false
-        }
-      }
-    ],
-    "react/react-in-jsx-scope": "off" // React v17+ does not need React in scope for JSX elements
-  },
-  "overrides": [
-    {
-      "files": ["*.spec.ts", "*.spec.tsx", "*.test.ts", "*.test.tsx"],
-      "rules": {
-        "max-nested-callbacks": ["error", 10] // allow describe/it/test nesting
-      }
-    }
-  ]
-}
@@ -2,12 +2,12 @@

 version: 2
 updates:
-  # Enable version updates for npm
+  # Enable version updates for pnpm
  - package-ecosystem: 'npm'
    # Look for `package.json` and `lock` files in the `root` directory
    directory: '/'
    # Check the npm registry for updates every day (weekdays)
    schedule:
      interval: 'weekly'
-    # Always increase the version in package.json as well (for patch versions by default only package-lock.json i updated)
+    # Always increase the version in package.json as well (for patch versions by default only pnpm-lock.yaml is updated)
    versioning-strategy: increase
@@ -14,44 +14,57 @@ jobs:

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

    env:
-      REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
-      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
-      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
+      VITE_BEE_HOST: https://api.test-node.staging.ethswarm.org/
+      VITE_FORMBRICKS_ENV_ID: ${{ secrets.VITE_FORMBRICKS_ENV_ID }}
+      VITE_FORMBRICKS_APP_URL: ${{ secrets.VITE_FORMBRICKS_APP_URL }}

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

-      - name: Install npm deps
-        run: npm ci
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile

      - name: Commit linting
-        uses: wagoid/commitlint-github-action@v2
+        uses: wagoid/commitlint-github-action@v6
+        with:
+          configFile: ./commitlint.config.cjs

      - name: Code linting
-        run: npm run lint:check
+        run: pnpm run lint
        env:
          CI: true

      - name: Dependency check
-        run: npm run depcheck
+        run: pnpm run depcheck

      - name: Types check
-        run: npm run check:types
+        run: pnpm run check:types

      - name: Build
-        run: npm run build
+        run: pnpm run build

      - name: Build Component
-        run: npm run build:component
+        run: pnpm run build:component

      - name: Create preview
        uses: ethersphere/swarm-actions/pr-preview@v1
@@ -1,5 +1,6 @@
 name: Publish on npm
 on:
+  workflow_dispatch:
  release:
    types: [published]

@@ -11,16 +12,28 @@ jobs:
  publish:
    runs-on: ubuntu-latest
    env:
-      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
-      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
+      VITE_FORMBRICKS_ENV_ID: ${{ secrets.VITE_FORMBRICKS_ENV_ID }}
+      VITE_FORMBRICKS_APP_URL: ${{ secrets.VITE_FORMBRICKS_APP_URL }}
    steps:
      - uses: actions/checkout@v4

+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          registry-url: 'https://registry.npmjs.org'

-      - run: npm ci
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-

-      - run: npm publish --provenance --access public
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm publish --provenance --access public --no-git-checks
@@ -11,17 +11,27 @@ jobs:
    runs-on: ubuntu-latest

    env:
-      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
-      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
+      VITE_FORMBRICKS_ENV_ID: ${{ secrets.VITE_FORMBRICKS_ENV_ID }}
+      VITE_FORMBRICKS_APP_URL: ${{ secrets.VITE_FORMBRICKS_APP_URL }}

    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
        with:
-          node-version: 18
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
          registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm run build
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run build
      - run: echo "dashboard.ethswarm.org" > ./build/CNAME
      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
@@ -13,24 +13,34 @@ jobs:
    runs-on: ubuntu-latest

    env:
-      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
-      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
+      VITE_FORMBRICKS_ENV_ID: ${{ secrets.VITE_FORMBRICKS_ENV_ID }}
+      VITE_FORMBRICKS_APP_URL: ${{ secrets.VITE_FORMBRICKS_APP_URL }}

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

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-

-      - name: Install npm deps
-        run: npm ci
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile

      - name: Run tests
-        run: npm run test
+        run: pnpm run test
@@ -23,8 +23,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/**.log


 settings.json
+*.tsbuildinfo

 **.tgz
+
+api-key.txt
+tmp/
@@ -0,0 +1 @@
+pnpm exec commitlint --edit "$1"
@@ -0,0 +1 @@
+pnpm run lint && pnpm run check:types && pnpm run depcheck
@@ -0,0 +1 @@
+v24.0.0
@@ -0,0 +1,11 @@
+node_modules
+yarn.lock
+package-lock.json
+dist/
+pnpm-lock.yaml
+**/test-data/
+**.html
+**.svg
+build/
+lib/
+**/assets/*
@@ -1,5 +1,87 @@
 # Changelog

+## [0.35.1](https://github.com/ethersphere/bee-dashboard/compare/v0.35.0...v0.35.1) (2026-04-10)
+
+
+### Bug Fixes
+
+- [`cb6854e`](https://github.com/ethersphere/bee-dashboard/commit/cb6854eb68ffe3064a39a171bc1e23f628ee93bb) fix: swap error caused by invalid id and batchcount
+- [`bb93d5c`](https://github.com/ethersphere/bee-dashboard/commit/bb93d5c26fa5414c6423b87a3992e0f2e410e515) fix: enhance creation messages for admin drive and user drives [(#238)](https://github.com/ethersphere/bee-dashboard/issues/238)
+- [`c08bf8a`](https://github.com/ethersphere/bee-dashboard/commit/d65da143d2200db653fe7a80a7891dacf4c2937e) fix: identity and wallet creation [(#240)](https://github.com/ethersphere/bee-dashboard/pull/240)
+- [`d65da14`](https://github.com/ethersphere/bee-dashboard/commit/d65da143d2200db653fe7a80a7891dacf4c2937e) fix: ui display changes [(#239)](https://github.com/ethersphere/bee-dashboard/issues/239)
+- [`c890f7c`](https://github.com/ethersphere/bee-dashboard/commit/c890f7c1e8e4d21f8d252b3e1a9c783982459adf) fix: stamp buy and dilute [(#242)](https://github.com/ethersphere/bee-dashboard/issues/242)
+- [`b33b663`](https://github.com/ethersphere/bee-dashboard/commit/b33b6630c2b5830b0fdbfbcf14cadc3fa1225190) fix: standard mode postage stamp purchase [(#243)](https://github.com/ethersphere/bee-dashboard/issues/243)
+- [`f943f7a`](https://github.com/ethersphere/bee-dashboard/commit/f943f7ad666de15ef780cb5adf736b533902eef7) fix: add syncing message for bee node and update page state [(#244)](https://github.com/ethersphere/bee-dashboard/pull/244)
+- [`056188a`](https://github.com/ethersphere/bee-dashboard/commit/056188abedf3a8ac828b8eb10a71a3b823cd5e6e) fix: duplicated ttl (time to live) information [(#245)](https://github.com/ethersphere/bee-dashboard/issues/245)
+- [`8b36556`](https://github.com/ethersphere/bee-dashboard/commit/8b36556502d316ac5bd7dba49ce34b594857d449) fix: misleading "bee node is syncing" message for ultra-light nodes in file manager [(#246)](https://github.com/ethersphere/bee-dashboard/pull/246)
+- [`9732170`](https://github.com/ethersphere/bee-dashboard/commit/97321706c33fb02abe7e067e6d865a046051d68b) fix: validate stamp before every upgrade click [(#247)](https://github.com/ethersphere/bee-dashboard/issues/247)
+- [`f52ed4a`](https://github.com/ethersphere/bee-dashboard/commit/f52ed4abb2bb5274b33430c1e8efadae6b3fa795) fix: use tochecksum() and toplurbigint for ethers v6 compatibility [(#248)](https://github.com/ethersphere/bee-dashboard/pull/248)
+
+
+## [0.35.0](https://github.com/ethersphere/bee-dashboard/compare/v0.34.0...v0.35.0) (2026-04-02)
+
+
+### Features
+
+* add image opening functionality to DownloadActionBar ([3ff645c](https://github.com/ethersphere/bee-dashboard/commit/3ff645cab1b4e9fba0c42ed99e7c3fac7b0ed0ca))
+* the dashboard sidebar should be collapsible ([fa8a26e](https://github.com/ethersphere/bee-dashboard/commit/fa8a26e80d83d5c794a9d572cf716f0cb484e642))
+* sync and update with all changes from fork ([519c411](https://github.com/ethersphere/bee-dashboard/commit/519c411db0b37f3d4004366ca267013e2268f8eb))
+
+
+### Bug Fixes
+
+* swap error caused by invalid id and batchcount
+* enhance creation messages for admin drive and user drives
+* identity and wallet creation
+* asset preview types
+* fm search unicode text
+* feed identity and stamp usage
+* ui display changes
+* stamp buy and dilute
+* vite polyfill warning for stream
+* standard mode postage stamp purchase reserves incorrect size and duration
+* add syncing message for Bee node and update page state handling
+* stamp depth and amount validation
+* add --no-git-checks to pnpm publish command ([37ab8fe](https://github.com/ethersphere/bee-dashboard/commit/37ab8fedaa9fa2f941b84746ec83fe87cf61b014))
+* add workflow_dispatch trigger to npm publish workflow ([becb873](https://github.com/ethersphere/bee-dashboard/commit/becb87377e506aca0c429439d70e43151025d755))
+* remove cross-env from prepublishOnly script ([4848b5b](https://github.com/ethersphere/bee-dashboard/commit/4848b5be97a827abeb0ca8156ef53cab0d2f315e))
+
+## [0.34.0](https://github.com/ethersphere/bee-dashboard/compare/v0.33.5...v0.34.0) (2026-03-20)
+
+### Features
+
+* add image opening functionality to DownloadActionBar ([3ff645c](https://github.com/ethersphere/bee-dashboard/commit/3ff645cab1b4e9fba0c42ed99e7c3fac7b0ed0ca))
+* the dashboard sidebar should be collapsible ([fa8a26e](https://github.com/ethersphere/bee-dashboard/commit/fa8a26e80d83d5c794a9d572cf716f0cb484e642))
+* sync and update with all changes from fork ([519c411](https://github.com/ethersphere/bee-dashboard/commit/519c411db0b37f3d4004366ca267013e2268f8eb))
+
+
+### Bug Fixes
+
+* add error handling and ui notifications for download failures ([b58f01c](https://github.com/ethersphere/bee-dashboard/commit/b58f01cc2b5535ba0ad347d03ae4102e18f637f0))
+* buy stamp values display ([3031d54](https://github.com/ethersphere/bee-dashboard/commit/3031d54272d51da020d3a3cd7154b969c60e8669))
+* cannot forget expired drives ([7e05a56](https://github.com/ethersphere/bee-dashboard/commit/7e05a56073a2be306a1394bf5b2e798a1a457c74))
+* Correct misleading update warning message for desktop version ([bc2c0ad](https://github.com/ethersphere/bee-dashboard/commit/bc2c0addbb685454fbae61d317f2e920d507c07c))
+* dockerfile build and use compose ([76bf221](https://github.com/ethersphere/bee-dashboard/commit/76bf2211ca75f44255e5696d58072e639a9cd2b0))
+* download and upload files ([e8e01c0](https://github.com/ethersphere/bee-dashboard/commit/e8e01c054a867447e07a71960d45f9cb36926e61))
+* filemanager state handling ([855a017](https://github.com/ethersphere/bee-dashboard/commit/855a0170334fb36d8ff119ce96f8c9bdb4294d58))
+* reflect file rename immediately ([a56a5c3](https://github.com/ethersphere/bee-dashboard/commit/a56a5c3ed8554cf81afc7c6401ca2dc65a8e898d))
+* rpc: ensure 0x prefix for recipient in sendBzzTransaction and add tests ([fff94d9](https://github.com/ethersphere/bee-dashboard/commit/fff94d907157d0cd4f6e490c450cdc58cefeec31))
+* sidebar: use swarm-desktop GitHub link when running in desktop mode ([7382da8](https://github.com/ethersphere/bee-dashboard/commit/7382da8595e86230c03dab93aec726cd02cc91ec))
+* cost values correcting [a7e4205](https://github.com/ethersphere/bee-dashboard/commit/a7e42053ae99990c5e9e782e8fe14326f155730c))
+* modals are partially cut off in File Manager on Windows (Chrome) ([220618f](https://github.com/ethersphere/bee-dashboard/commit/220618f19bc95b92a0521dc62eb8f5414dfdcbba))
+* misleading update warning (Desktop vs Dashboard) ([55e7879](https://github.com/ethersphere/bee-dashboard/commit/55e78798492e715ef9aa92262f5aa874aec240b0))
+* expired admin drive upgrading handling ([e1fdd52](https://github.com/ethersphere/bee-dashboard/commit/e1fdd52676653c65beba06283f07e470d7ee4668))
+* in case of a synced bee node the Purchase stamp and create drive button is inactive ([e00918b](https://github.com/ethersphere/bee-dashboard/commit/e00918b192f9a916d72df7ed6790eddf908397d3))
+* newly created drive sometimes appears under “Expired Drives” in Chrome until page refresh and sometimes you have to delete cache in order to appear. ([3c4d618](https://github.com/ethersphere/bee-dashboard/commit/3c4d618cc85b2836a2f794b7da79f4da12205869))
+* admin drive stucks in "in progress" state and the already existing admin drives are not listed on the initial modal ([ad8c8f1](https://github.com/ethersphere/bee-dashboard/commit/ad8c8f18eb5dabbf64e8059f0fcfe98a68b97eea))
+* update documentation message for file access clarification ([ae63615](https://github.com/ethersphere/bee-dashboard/commit/ae63615c7ca26896c1114c16dc6a921aa267bc0d))
+* upload history text align ([3031d54](https://github.com/ethersphere/bee-dashboard/commit/3031d54272d51da020d3a3cd7154b969c60e8669))
+* upload and drive size error ([8992c18](https://github.com/ethersphere/bee-dashboard/commit/8992c189fd0300b0ee28d44a109c47b633174c06))
+* use upload and download abort signals ([308ec3d](https://github.com/ethersphere/bee-dashboard/commit/308ec3dcc0ff3806777b89dc99fef669c993bcf7))
+* use uploadFile for single files to support long filenames and reafactor for linter ([db52e44](https://github.com/ethersphere/bee-dashboard/commit/db52e4471a9519a0aca8a6fd2702a242e03d2a06))
+* withdraw and deposit buttons style ([3031d54](https://github.com/ethersphere/bee-dashboard/commit/3031d54272d51da020d3a3cd7154b969c60e8669))
+
+
 ## [0.33.5](https://github.com/ethersphere/bee-dashboard/compare/v0.33.4...v0.33.5) (2026-02-17)


@@ -1,11 +1,13 @@
-FROM node:15.14-alpine AS build
+FROM node:24-alpine AS build
 WORKDIR /src
+RUN corepack enable && corepack prepare pnpm@10 --activate
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile --ignore-scripts
 COPY . .
-RUN npm ci
-RUN npm run build
+RUN pnpm run prepare

-FROM node:15.14-alpine AS final
-RUN npm i -g serve
+FROM node:24-alpine AS final
+RUN npm install -g serve
 WORKDIR /app
 COPY --from=build /src/build .
 EXPOSE 8080
@@ -4,7 +4,7 @@
 [![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.9.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/pnpm-%3E%3D10.0.0-orange.svg?style=flat-square)
 ![](https://img.shields.io/badge/Node.js-%3E%3D14.0.0-orange.svg?style=flat-square)

 > An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
@@ -16,11 +16,11 @@ working. Also, no guarantees can be made about its stability, efficiency, and se
 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)
+![Status page](/docs/ui_samples/info.png)

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

 ## Table of Contents

@@ -36,10 +36,10 @@ Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6)

 ## Install

-Install globally with npm. We require Node.js's version of at least 12.x and npm v6.x (or yarn v2.x).
+Install globally with pnpm. We require Node.js's version of at least 24.x and pnpm v10.x, npm v11.x.

 ```sh
-npm install -g @ethersphere/bee-dashboard
+pnpm add -g @ethersphere/bee-dashboard
 ```

 For the latest stable version, always use the official npm registry.
@@ -79,6 +79,12 @@ docker build . -t bee-dashboard
 docker run --rm -p 127.0.0.1:8080:8080 bee-dashboard
 ```

+Alternatively, use Docker Compose:
+
+```sh
+docker compose up
+```
+
 Bee dashboard is now available on [`http://localhost:8080`](http://localhost:8080)

 ### Development
@@ -88,9 +94,11 @@ git clone git@github.com:ethersphere/bee-dashboard.git

 cd  bee-dashboard

-npm i
+pnpm install

-npm start
+pnpm run init:husky
+
+pnpm start
 ```

 The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
@@ -100,17 +108,17 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
 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
+- `VITE_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
+- `VITE_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.
+- `VITE_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the
  `http://localhost:1633` is used.
- `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the
-  default value. The user can override this in Settings, which is then persisted in local store and has priority over
-  the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
- `REACT_APP_FORMBRICKS_ENV_ID` and `REACT_APP_FORMBRICKS_APP_URL` (`string`) configures the
-  [Formbricks](https://formbricks.com/) integration for user feedback collection. If these variables are not set, the
-  feedback form is not available in the app.
+- `VITE_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.
+- `VITE_FORMBRICKS_ENV_ID` and `VITE_FORMBRICKS_APP_URL` (`string`) configures the [Formbricks](https://formbricks.com/)
+  integration for user feedback collection. If these variables are not set, the feedback form is not available in the
+  app.

 #### Swarm Desktop development

@@ -118,11 +126,11 @@ If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `sw
 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
+echo "VITE_BEE_DESKTOP_URL=http://localhost:3054
+VITE_BEE_DESKTOP_ENABLED=true" > .env.development.local

-npm start
-npm run desktop # This will inject the API key to the Dashboard
+pnpm start
+pnpm run desktop # This will inject the API key to the Dashboard
 ```

 ## File Manager
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [1, 'always', 120],
+    'header-max-length': [2, 'always', 160],
+  },
+}
@@ -1,6 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    'body-max-line-length': [0, 'always', Infinity], // disable commit body length restriction
-  },
-}
@@ -1,14 +1,18 @@
 #!/usr/bin/env node

 import envPaths from 'env-paths'
-import open  from 'open'
+import open from 'open'

 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
+import process from 'node:process'

+const DEFAULT_VITE_DEV_PORT = 3002
+const desktopPort = process.env.PORT || DEFAULT_VITE_DEV_PORT
 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}#/`
+const apiKey = await readFile(join(paths.data, 'api-key.txt'), { encoding: 'utf-8' })
+const url = `http://localhost:${desktopPort}/?v=${apiKey}#/`

+// eslint-disable-next-line no-undef
 console.log('Opening: ' + url)
 await open(url)
@@ -0,0 +1,7 @@
+services:
+  bee-dashboard:
+    build: .
+    image: ethersphere/bee-dashboard:latest
+    ports:
+      - '127.0.0.1:8080:8080'
+    restart: unless-stopped
@@ -0,0 +1,21 @@
+const js = require('@eslint/js')
+const ts = require('@typescript-eslint/eslint-plugin')
+const tsParser = require('@typescript-eslint/parser')
+const prettier = require('eslint-config-prettier')
+const importPlugin = require('eslint-plugin-import')
+const pluginJest = require('eslint-plugin-jest')
+const prettierPlugin = require('eslint-plugin-prettier')
+const simpleImportSort = require('eslint-plugin-simple-import-sort')
+const react = require('eslint-plugin-react')
+
+module.exports = {
+  js,
+  ts,
+  tsParser,
+  prettier,
+  importPlugin,
+  pluginJest,
+  prettierPlugin,
+  simpleImportSort,
+  react,
+}
@@ -0,0 +1,260 @@
+import * as path from 'path'
+import { fileURLToPath } from 'url'
+
+import reactHooks from 'eslint-plugin-react-hooks'
+import { defineConfig } from 'eslint/config'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const compat = await import(`${__dirname}/eslint-compat.cjs`)
+const js = compat.default.js
+const ts = compat.default.ts
+const tsParser = compat.default.tsParser
+const prettier = compat.default.prettier
+const importPlugin = compat.default.importPlugin
+const pluginJest = compat.default.pluginJest
+const prettierPlugin = compat.default.prettierPlugin
+const simpleImportSort = compat.default.simpleImportSort
+const react = compat.default.react
+
+const eslintRecommended = js.configs.recommended
+
+const typescriptRecommended = {
+  plugins: {
+    '@typescript-eslint': ts,
+  },
+  rules: {
+    ...ts.configs.recommended.rules,
+  },
+}
+
+const importRules = {
+  plugins: {
+    import: importPlugin,
+  },
+  rules: {
+    ...importPlugin.configs.errors.rules,
+    ...importPlugin.configs.warnings.rules,
+    ...importPlugin.configs.typescript.rules,
+  },
+}
+
+const prettierRecommended = {
+  plugins: {
+    prettier: prettierPlugin,
+  },
+  rules: {
+    'prettier/prettier': 'error',
+    ...prettier.rules,
+  },
+}
+
+export default defineConfig([
+  reactHooks.configs.flat.recommended,
+  {
+    ignores: [
+      '**/node_modules/**',
+      '**/dist/**',
+      'eslint.config.mjs',
+      'eslint-compat.cjs',
+      '**/assets/*',
+      'lib/**',
+      'build/**',
+      '**/test-data/**',
+      'ui_samples/**',
+      'commitlint.config.cjs',
+    ],
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    settings: {
+      'import/resolver': {
+        typescript: {
+          alwaysTryTypes: true,
+        },
+      },
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parser: tsParser,
+      globals: {
+        require: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        module: 'readonly',
+        __dirname: 'readonly',
+        process: 'readonly',
+        Buffer: 'readonly',
+        React: 'readonly',
+        Event: 'readonly',
+        Element: 'readonly',
+        DataTransfer: 'readonly',
+        CustomEvent: 'readonly',
+        EventListener: 'readonly',
+        AbortController: 'readonly',
+        URLSearchParams: 'readonly',
+        FileList: 'readonly',
+        setTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearTimeout: 'readonly',
+        clearInterval: 'readonly',
+        TextEncoder: 'readonly',
+        TextDecoder: 'readonly',
+        localStorage: 'readonly',
+        fetch: 'readonly',
+        crypto: 'readonly',
+        Metadata: 'readonly',
+        Blob: 'readonly',
+        FilePath: 'readonly',
+        File: 'readonly',
+        HTMLSpanElement: 'readonly',
+        HTMLTextAreaElement: 'readonly',
+        HTMLElement: 'readonly',
+        HTMLInputElement: 'readonly',
+        HTMLDivElement: 'readonly',
+        HTMLImageElement: 'readonly',
+        HTMLAnchorElement: 'readonly',
+        MouseEvent: 'readonly',
+        HTMLButtonElement: 'readonly',
+        MutationObserver: 'readonly',
+        requestAnimationFrame: 'readonly',
+        Node: 'readonly',
+        ReadableStream: 'readonly',
+        FileSystemFileHandle: 'readonly',
+        AbortSignal: 'readonly',
+        WritableStreamDefaultWriter: 'readonly',
+        DOMException: 'readonly',
+        FileSystemDirectoryHandle: 'readonly',
+        URL: 'readonly',
+        DOMRect: 'readonly',
+        Window: 'readonly',
+        prompt: 'readonly',
+        global: 'readonly',
+        FileReader: 'readonly',
+        Image: 'readonly',
+        NodeJS: 'readonly',
+        LatestBeeRelease: 'readonly',
+        KeyboardEvent: 'readonly',
+        cancelAnimationFrame: 'readonly',
+      },
+    },
+  },
+  eslintRecommended,
+  typescriptRecommended,
+  importRules,
+  prettierRecommended,
+  prettier,
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    plugins: {
+      '@typescript-eslint': ts,
+      'simple-import-sort': simpleImportSort,
+      react: react,
+    },
+    rules: {
+      'array-bracket-newline': ['error', 'consistent'],
+      strict: ['error', 'safe'],
+      'block-scoped-var': 'error',
+      complexity: 'warn',
+      'default-case': 'error',
+      'dot-notation': 'warn',
+      eqeqeq: 'error',
+      'guard-for-in': 'warn',
+      'linebreak-style': ['warn', 'unix'],
+      'no-alert': 'error',
+      'no-case-declarations': 'error',
+      'no-console': 'error',
+      'no-constant-condition': 'error',
+      'no-continue': 'warn',
+      'no-div-regex': 'error',
+      'no-empty': 'warn',
+      'no-empty-pattern': 'error',
+      'no-implicit-coercion': 'error',
+      'prefer-arrow-callback': 'warn',
+      'no-labels': 'error',
+      'no-loop-func': 'error',
+      'no-nested-ternary': 'warn',
+      'no-script-url': 'error',
+      'quote-props': ['error', 'as-needed'],
+      'require-yield': 'error',
+      'max-depth': ['error', 4],
+      'require-await': 'error',
+      'space-before-function-paren': [
+        'error',
+        {
+          anonymous: 'never',
+          named: 'never',
+          asyncArrow: 'always',
+        },
+      ],
+      'padding-line-between-statements': [
+        'error',
+        { blankLine: 'always', prev: '*', next: 'if' },
+        { blankLine: 'always', prev: '*', next: 'function' },
+        { blankLine: 'always', prev: '*', next: 'return' },
+      ],
+      'no-useless-constructor': 'off',
+      'no-dupe-class-members': 'off',
+      'no-unused-expressions': 'off',
+      'no-unused-vars': 'off',
+      curly: ['error', 'multi-line'],
+      'object-curly-spacing': ['error', 'always'],
+      'comma-dangle': ['error', 'always-multiline'],
+      'react-hooks/set-state-in-effect': 'off',
+      '@typescript-eslint/no-useless-constructor': 'error',
+      '@typescript-eslint/no-unused-expressions': 'error',
+      '@typescript-eslint/no-dupe-class-members': 'error',
+      'react/react-in-jsx-scope': 'off',
+      'max-nested-callbacks': ['error', 4],
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-non-null-assertion': 'error',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
+      ],
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            ['^@?\\w'], // Packages
+            ['^\\u0000'], // Side effect imports
+            ['^\\.\\.(?!/?$)', '^\\.\\./?$'], // Parent imports
+            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'], // Other relative imports
+            ['^.+\\.?(css)$'], // Style imports
+          ],
+        },
+      ],
+    },
+  },
+  {
+    // tests
+    files: ['tests/**/*.{ts,js}', , 'tests/**/*.spec.ts'],
+    rules: {
+      'no-console': 'off',
+      'import/no-commonjs': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'max-nested-callbacks': ['error', 10], // allow describe/it/test nesting
+      'jest/no-disabled-tests': 'warn',
+      'jest/no-focused-tests': 'error',
+      'jest/no-identical-title': 'error',
+      'jest/prefer-to-have-length': 'warn',
+      'jest/valid-expect': 'error',
+    },
+    plugins: {
+      jest: pluginJest,
+    },
+    languageOptions: {
+      globals: {
+        ...pluginJest.environments.globals.globals,
+        require: 'readonly',
+        module: 'readonly',
+        exports: 'readonly',
+        XPathResult: 'readonly',
+      },
+    },
+  },
+])
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Bee Dashboard" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Bee Dashboard</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,15 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[tj]sx?$': ['babel-jest', { configFile: './.babelrc.js' }],
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  transformIgnorePatterns: ['node_modules/'],
+  extensionsToTreatAsEsm: ['.ts', '.tsx', '.jsx'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  modulePathIgnorePatterns: ['<rootDir>/build/'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  testMatch: ['<rootDir>/tests/**/*.spec.ts'],
+}
@@ -1,7 +1,140 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.33.5",
+  "version": "0.35.1",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
+  "homepage": ".",
+  "bin": {
+    "bee-dashboard": "./serve.js"
+  },
+  "main": "lib/App.cjs.js",
+  "browser": "lib/App.js",
+  "types": "lib/App.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/App.d.ts",
+      "require": "./lib/App.cjs.js",
+      "import": "./lib/App.js",
+      "default": "./lib/App.cjs.js"
+    },
+    "./style.css": "./lib/App.css"
+  },
+  "bugs": {
+    "url": "https://github.com/ethersphere/bee-dashboard/issues/"
+  },
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ethersphere/bee-dashboard.git"
+  },
+  "scripts": {
+    "prepublishOnly": "NODE_ENV=production pnpm run prepare",
+    "prepare": "pnpm run build && pnpm run build:component",
+    "start": "vite",
+    "desktop": "node ./desktop.mjs",
+    "build": "rimraf ./build && vite build",
+    "build:component": "rimraf ./lib && BUILD_MODE=component vite build",
+    "test": "jest",
+    "test:ui": "node tests/ui/index.js",
+    "serve": "node ./serve.js",
+    "depcheck": "depcheck .",
+    "lint": "eslint . --report-unused-disable-directives --no-cache --max-warnings=5",
+    "lint:fix": "pnpm run lint --fix",
+    "check:types": "tsc --project tsconfig.lib.json",
+    "update-map-data": "node ./utils/update-map-data.js",
+    "init:husky": "pnpm husky install"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-router": ">=7",
+    "react-router-dom": ">=7",
+    "tss-react": ">=4"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@ethersphere/bee-js": "^11.1.1",
+    "@formbricks/js": "^4.3.0",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@solarpunkltd/file-manager-lib": "^1.0.8",
+    "axios": "^0.30.2",
+    "bignumber.js": "^9.3.1",
+    "dotted-map": "^2.2.3",
+    "ethers": "^6.16.0",
+    "file-saver": "^2.0.5",
+    "formik": "2.4.9",
+    "formik-mui": "^5.0.0-alpha.1",
+    "jszip": "^3.10.1",
+    "notistack": "^3.0.2",
+    "opener": "1.5.2",
+    "react-dropzone": "^14.4.0",
+    "react-qr-code": "^2.0.18",
+    "react-syntax-highlighter": "16.1.0",
+    "remixicon-react": "^1.0.0",
+    "serve-handler": "6.1.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/plugin-transform-runtime": "^7.26.10",
+    "@babel/preset-env": "^7.26.10",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.10",
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@eslint/js": "^9.39.2",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/file-saver": "2.0.5",
+    "@types/jest": "30.0.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router": "5.1.20",
+    "@types/react-router-dom": "5.3.3",
+    "@types/react-syntax-highlighter": "15.5.13",
+    "@typescript-eslint/eslint-plugin": "8.55.0",
+    "@typescript-eslint/parser": "8.55.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "cors": "^2.8.5",
+    "depcheck": "^1.4.7",
+    "env-paths": "^3.0.0",
+    "eslint": "9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jest": "29.14.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-testing-library": "7.15.4",
+    "express": "^5.2.1",
+    "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "open": "^11.0.0",
+    "prettier": "3.8.1",
+    "puppeteer": "^24.37.1",
+    "rimraf": "^6.1.2",
+    "sass": "^1.97.3",
+    "ts-node": "^10.9.2",
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-node-polyfills": "^0.25.0",
+    "web-vitals": "5.1.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "puppeteer",
+      "unrs-resolver"
+    ]
+  },
  "keywords": [
    "bee",
    "swarm",
@@ -11,140 +144,6 @@
    "typescript",
    "p2p"
  ],
-  "homepage": ".",
-  "bin": {
-    "bee-dashboard": "./serve.js"
-  },
-  "main": "lib/App.js",
-  "types": "lib/src/App.d.ts",
-  "bugs": {
-    "url": "https://github.com/ethersphere/bee-dashboard/issues/"
-  },
-  "license": "BSD-3-Clause",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ethersphere/bee-dashboard.git"
-  },
-  "overrides": {
-    "@fairdatasociety/fdp-storage": {
-      "@ethersphere/bee-js": "^10.2.0"
-    }
-  },
-  "dependencies": {
-    "@ethersphere/bee-js": "^10.3.0",
-    "@ethersproject/keccak256": "^5.7.0",
-    "@ethersproject/strings": "^5.7.0",
-    "@fairdatasociety/fdp-storage": "^0.19.0",
-    "@formbricks/js": "^4.2.1",
-    "@material-ui/core": "4.12.3",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.57",
-    "@solarpunkltd/file-manager-lib": "^1.0.4",
-    "axios": "^0.28.1",
-    "bignumber.js": "^9.1.2",
-    "buffer": "^6.0.3",
-    "crypto": "npm:crypto-browserify",
-    "crypto-browserify": "^3.12.0",
-    "dotted-map": "^2.2.3",
-    "ethers": "^5.7.2",
-    "file-saver": "^2.0.5",
-    "formik": "2.2.9",
-    "formik-material-ui": "3.0.1",
-    "jszip": "^3.10.1",
-    "material-ui-dropzone": "3.5.0",
-    "notistack": "^3.0.1",
-    "opener": "1.5.2",
-    "qrcode.react": "1.0.1",
-    "react": ">= 17.0.2",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": ">= 17.0.2",
-    "react-identicons": "1.2.5",
-    "react-router": "6.2.1",
-    "react-router-dom": "6.2.1",
-    "react-syntax-highlighter": "15.4.4",
-    "remixicon-react": "^1.0.0",
-    "serve-handler": "6.1.3",
-    "stream": "npm:stream-browserify",
-    "stream-browserify": "^3.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@commitlint/config-conventional": "14.1.0",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@types/cors": "^2.8.12",
-    "@types/express": "^4.17.13",
-    "@types/file-saver": "2.0.4",
-    "@types/jest": "27.0.2",
-    "@types/qrcode.react": "1.0.2",
-    "@types/react": "17.0.34",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "17.0.11",
-    "@types/react-router": "5.1.18",
-    "@types/react-router-dom": "5.3.2",
-    "@types/react-syntax-highlighter": "13.5.2",
-    "@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",
-    "env-paths": "^3.0.0",
-    "eslint": "8.17.0 ",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "26.5.3",
-    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.30.0",
-    "eslint-plugin-react-hooks": "4.5.0",
-    "eslint-plugin-testing-library": "5.5.1",
-    "express": "^4.17.3",
-    "file-loader": "6.2.0",
-    "open": "^8.4.0",
-    "prettier": "2.4.1",
-    "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": "^5.93.0",
-    "webpack-cli": "^4.10.0"
-  },
-  "peerDependencies": {
-    "react": ">= 17.0.2",
-    "react-dom": ">= 17.0.2"
-  },
-  "scripts": {
-    "prepare": "npm run build && npm run build:component",
-    "start": "react-scripts start",
-    "desktop": "node ./desktop.mjs",
-    "build": "react-scripts build",
-    "build:component": "rimraf ./lib && webpack --mode=production && npm run compile:types",
-    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
-    "test": "react-scripts test",
-    "test:ui": "node ui-test/index.js",
-    "serve": "node ./serve.js",
-    "depcheck": "depcheck .",
-    "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "check:types": "tsc --project tsconfig.lib.json",
-    "update-map-data": "node ./utils/update-map-data.js",
-    "bee": "npx bee-factory start"
-  },
  "files": [
    "lib",
    "build",
@@ -163,8 +162,9 @@
    ]
  },
  "engines": {
-    "node": ">=14.0.0",
-    "npm": ">=6.9.0",
-    "bee": "1.16.1-8e269c8"
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0",
+    "pnpm": ">=10.0.0",
+    "bee": "2.7.0"
  }
 }
@@ -0,0 +1,5 @@
+allowBuilds:
+  '@parcel/watcher': false
+  esbuild: false
+  puppeteer: false
+  unrs-resolver: false
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-
-    <meta name="description" content="Bee Dashboard" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>Swarm</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
@@ -1,12 +1,15 @@
 {
-    "trailingSlash": false,
-    "headers": [
+  "rewrites": [{ "source": "**", "destination": "/index.html" }],
+  "trailingSlash": false,
+  "headers": [
+    {
+      "source": "*",
+      "headers": [
        {
-          "source" : "*",
-          "headers" : [{
-            "key" : "Cache-Control",
-            "value" : "max-age=3600"
-          }]
+          "key": "Cache-Control",
+          "value": "max-age=3600"
        }
-    ]    
+      ]
+    }
+  ]
 }
@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-require-imports */

 const path = require('path')
 const handler = require('serve-handler')
@@ -1,15 +0,0 @@
-declare module 'react-identicons' {
-  interface Props {
-    string: string
-    size?: number
-    padding?: number
-    bg?: string
-    fg?: string
-    palette?: string[]
-    count?: number
-    getColor?: () => string
-  }
-
-  const Identicon = (props: Props): JSXElementConstructor => ReactNode //eslint-disable-line @typescript-eslint/no-unused-vars
-  export default Identicon
-}
@@ -15,8 +15,19 @@
 }

 .App {
-  font-family: 'iAWriterQuattroV', -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;
 }
@@ -1,9 +1,9 @@
-import CssBaseline from '@material-ui/core/CssBaseline'
-import { ThemeProvider } from '@material-ui/core/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ThemeProvider } from '@mui/material/styles'
 import { SnackbarProvider } from 'notistack'
 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'
@@ -17,6 +17,8 @@ import { Provider as BalanceProvider } from './providers/WalletBalance'
 import BaseRouter from './routes'
 import { theme } from './theme'

+import './App.css'
+
 interface Props {
  beeApiUrl?: string
  defaultRpcUrl?: string
@@ -1,7 +1,7 @@
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
+import { Alert, AlertTitle } from '@mui/material'
+import Collapse from '@mui/material/Collapse'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 const LIMIT = 100000000 // 100 megabytes

@@ -9,18 +9,16 @@ interface Props {
  files: File[]
 }

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+}))

 export default function UploadSizeAlert(props: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()

  const totalSize = props.files.reduce((previous, current) => previous + current.size, 0)

@@ -1,9 +1,13 @@
-import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 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 { makeStyles } from 'tss-react/mui'
+
+import { CheckState } from '../providers/Bee'
+
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'

 interface Props {
@@ -11,64 +15,64 @@ interface Props {
  title: string
  subtitle: string
  buttonProps: SwarmButtonProps
-  status: 'ok' | 'error' | 'loading' | 'connecting'
+  status: CheckState
 }

 const useStyles = (backgroundColor: string) =>
-  makeStyles((theme: Theme) =>
-    createStyles({
-      root: {
-        flexGrow: 1,
-        flexBasis: '100px',
-      },
-      wrapper: {
-        backgroundColor,
-        padding: '16px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        textAlign: 'center',
-        height: '130px',
-      },
-      iconWrapper: {
-        display: 'flex',
-        alignItems: 'flex-start',
-        marginBottom: '18px',
-      },
-      button: {
-        width: '100%',
-        marginTop: '2px',
-        backgroundColor,
-        '&:hover': {
+  makeStyles()(theme => ({
+    root: {
+      flexGrow: 1,
+      flexBasis: '100px',
+    },
+    wrapper: {
+      backgroundColor,
+      padding: '16px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      textAlign: 'center',
+      height: '130px',
+    },
+    iconWrapper: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      marginBottom: '18px',
+    },
+    button: {
+      width: '100%',
+      marginTop: '2px',
+      backgroundColor,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
          backgroundColor: theme.palette.primary.main,
          color: 'white',
          boxShadow: 'none',
-          // 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 backgroundColor = status === CheckState.ERROR ? 'white' : '#f3f3f3'
  const { className, ...rest } = buttonProps
-  const classes = useStyles(backgroundColor)()
+  const { classes } = useStyles(backgroundColor)()

  let statusIcon = null

-  if (status === 'ok') {
+  if (status === CheckState.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') {
+  } else if (CheckState.STARTING) {
+    statusIcon = <RefreshLine size="13" color="#d99400d5" />
+  } else if (CheckState.CONNECTING) {
    statusIcon = <Connecting size="13" color="#0074D9" />
+  } else if (CheckState.WARNING) {
+    statusIcon = <Connecting size="13" color="#cbd900" />
+  } else {
+    statusIcon = <AlertCircle size="13" color="#f44336" />
  }

  return (
@@ -1,13 +1,14 @@
-import { CircularProgress, Container } 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 DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
+import { CircularProgress, Container } from '@mui/material'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import Zap from 'remixicon-react/FlashlightLineIcon'
+
 import { Context as SettingsContext } from '../providers/Settings'

 interface Props {
@@ -41,7 +42,8 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
          })
        })
        .catch((e: Error) => {
-          console.error(e) // eslint-disable-line
+          // eslint-disable-next-line no-console
+          console.error(e)
          enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
        })
        .finally(() => {
@@ -1,8 +1,12 @@
 import { ChainState } from '@ethersphere/bee-js'
 import { useContext, useEffect, useState } from 'react'
+
 import { Context } from '../providers/Settings'
+
 import ExpandableListItem from './ExpandableListItem'

+const CHAIN_STATE_INTERVAL_MS = 3_000
+
 export function ChainSync() {
  const { beeApi } = useContext(Context)
  const [chainState, setChainState] = useState<ChainState | null>(null)
@@ -13,8 +17,9 @@ export function ChainSync() {
        return
      }

-      beeApi.getChainState().then(setChainState).catch(console.error) // eslint-disable-line
-    }, 3_000)
+      // eslint-disable-next-line no-console
+      beeApi.getChainState().then(setChainState).catch(console.error)
+    }, CHAIN_STATE_INTERVAL_MS)

    return () => clearInterval(interval)
  })
@@ -1,8 +1,7 @@
-import type { ReactElement } from 'react'
-import IconButton from '@material-ui/core/IconButton'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Clipboard from 'remixicon-react/ClipboardLineIcon'
+import IconButton from '@mui/material/IconButton'
 import { useSnackbar } from 'notistack'
+import type { ReactElement } from 'react'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'

 interface Props {
  value: string
@@ -10,14 +9,20 @@ interface Props {

 export default function ClipboardCopy({ value }: Props): ReactElement {
  const { enqueueSnackbar } = useSnackbar()
-  const handleCopy = () => enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })
+    } catch {
+      enqueueSnackbar('Failed to copy to clipboard', { variant: 'error' })
+    }
+  }

  return (
    <div style={{ marginRight: '3px', marginLeft: '3px' }}>
      <IconButton color="primary" size="small" onClick={handleCopy}>
-        <CopyToClipboard text={value}>
-          <Clipboard style={{ height: '20px' }} />
-        </CopyToClipboard>
+        <Clipboard style={{ height: '20px' }} />
      </IconButton>
    </div>
  )
@@ -1,22 +1,20 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core'
-import { Close } from '@material-ui/icons'
+import { Close } from '@mui/icons-material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  onClose: () => void
 }

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      padding: theme.spacing(1),
-      cursor: 'pointer',
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    padding: theme.spacing(1),
+    cursor: 'pointer',
+  },
+}))

 export function CloseButton({ onClose }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return (
    <div className={classes.wrapper} onClick={onClose}>
@@ -1,23 +1,21 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  children: string
  prettify?: boolean
 }

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      overflow: 'scroll',
-      background: '#ffffff',
-    },
-    pre: {
-      maxHeight: '6em',
-      padding: theme.spacing(2),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    overflow: 'scroll',
+    background: '#ffffff',
+  },
+  pre: {
+    maxHeight: '6em',
+    padding: theme.spacing(2),
+  },
+}))

 function prettifyString(string: string): string {
  try {
@@ -28,7 +26,7 @@ function prettifyString(string: string): string {
 }

 export function Code({ children, prettify }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return (
    <div className={classes.wrapper}>
@@ -1,8 +1,10 @@
 import { ReactElement, useContext } from 'react'
-import TabsContainer from './TabsContainer'
-import CodeBlock from './CodeBlock'
+
 import { Context } from '../providers/Platform'

+import CodeBlock from './CodeBlock'
+import TabsContainer from './TabsContainer'
+
 interface Props {
  linux: string
  mac: string
@@ -1,21 +1,20 @@
-import { createStyles, makeStyles, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  children: (string | ReactElement)[] | (string | ReactElement)
 }

-const useStyles = makeStyles(() =>
-  createStyles({
-    text: {
-      color: '#606060',
-      fontSize: '0.9rem',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  text: {
+    color: '#606060',
+    fontSize: '0.9rem',
+  },
+}))

 export function DocumentationText({ children }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return <Typography className={classes.text}>{children}</Typography>
 }
@@ -28,7 +28,8 @@ export default class ErrorBoundary extends Component<Props, State> {
      this.errorReporting(error)
    }

-    console.error({ error, errorInfo }) // eslint-disable-line
+    // eslint-disable-next-line no-console
+    console.error({ error, errorInfo })
  }

  render(): ReactElement {
@@ -1,56 +0,0 @@
-import { Typography } from '@material-ui/core/'
-import { EthAddress } from '@ethersphere/bee-js'
-import { ReactElement } from 'react'
-import Identicon from 'react-identicons'
-import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
-import ClipboardCopy from './ClipboardCopy'
-import { Flex } from './Flex'
-import QRCodeModal from './QRCodeModal'
-
-interface Props {
-  address: EthAddress | undefined
-  hideBlockie?: boolean
-  transaction?: boolean
-  truncate?: boolean
-}
-
-export default function EthereumAddress(props: Props): ReactElement {
-  return (
-    <Typography component="div" variant="subtitle1">
-      {props.address ? (
-        <Flex>
-          {props.hideBlockie ? null : (
-            <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={props.address.toChecksum()} />
-            </div>
-          )}
-          <div>
-            <a
-              style={
-                props.truncate
-                  ? {
-                      marginRight: '7px',
-                      maxWidth: '200px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                      display: 'block',
-                    }
-                  : { marginRight: '7px' }
-              }
-              href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {props.address}
-            </a>
-          </div>
-          <QRCodeModal value={props.address.toChecksum()} label={'Ethereum Address'} />
-          <ClipboardCopy value={props.address.toChecksum()} />
-        </Flex>
-      ) : (
-        '-'
-      )}
-    </Typography>
-  )
-}
@@ -1,38 +1,36 @@
-import { Collapse, ListItem } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Collapse, ListItemButton } from '@mui/material'
 import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      padding: 0,
-      margin: 0,
-      marginTop: theme.spacing(4),
-      '&:first-child': {
-        marginTop: 0,
-      },
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: '100%',
+    padding: 0,
+    margin: 0,
+    marginTop: theme.spacing(4),
+    '&:first-of-type': {
+      marginTop: 0,
    },
-    rootLevel1: { marginTop: theme.spacing(1) },
-    rootLevel2: { marginTop: theme.spacing(0.5) },
-    header: {
-      backgroundColor: theme.palette.background.paper,
+  },
+  rootLevel1: { marginTop: theme.spacing(1) },
+  rootLevel2: { marginTop: theme.spacing(0.5) },
+  header: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  contentLevel0: {
+    marginTop: theme.spacing(1),
+  },
+  contentLevel12: {
+    marginTop: theme.spacing(0.25),
+    '& > li:last-of-type': {
+      marginBottom: theme.spacing(2),
    },
-    contentLevel0: {
-      marginTop: theme.spacing(1),
-    },
-    contentLevel12: {
-      marginTop: theme.spacing(0.25),
-      '& > li:last-of-type': {
-        marginBottom: theme.spacing(2),
-      },
-    },
-    infoText: {
-      color: '#c9c9c9',
-    },
-  }),
-)
+  },
+  infoText: {
+    color: '#c9c9c9',
+  },
+}))

 interface Props {
  children: ReactNode
@@ -41,7 +39,7 @@ interface Props {
 }

 export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))

  const handleClick = () => {
@@ -50,10 +48,10 @@ export default function ExpandableElement({ children, expandable, defaultOpen }:

  return (
    <div className={`${classes.root} ${classes.rootLevel2}`}>
-      <ListItem button onClick={handleClick} className={classes.header}>
+      <ListItemButton onClick={handleClick} className={classes.header}>
        {children}
        {open ? <ExpandLess /> : <ExpandMore />}
-      </ListItem>
+      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <div className={classes.contentLevel12}>{expandable}</div>
      </Collapse>
@@ -1,36 +1,35 @@
-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 { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Collapse, ListItemButton, ListItemText, Typography } from '@mui/material'
 import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
 import { Flex } from './Flex'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      padding: 0,
-      margin: 0,
-      marginTop: theme.spacing(4),
-      '&:first-child': {
-        marginTop: 0,
-      },
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: '100%',
+    padding: 0,
+    margin: 0,
+    marginTop: theme.spacing(4),
+    '&:first-of-type': {
+      marginTop: 0,
    },
-    rootLevel1: { marginTop: theme.spacing(1) },
-    rootLevel2: { marginTop: theme.spacing(0.5) },
-    header: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    contentLevel0: {
-      marginTop: theme.spacing(1),
-    },
-    contentLevel12: {
-      marginTop: theme.spacing(0.25),
-    },
-    infoText: {
-      color: '#c9c9c9',
-    },
-  }),
-)
+  },
+  rootLevel1: { marginTop: theme.spacing(1) },
+  rootLevel2: { marginTop: theme.spacing(0.5) },
+  header: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  contentLevel0: {
+    marginTop: theme.spacing(1),
+  },
+  contentLevel12: {
+    marginTop: theme.spacing(0.25),
+  },
+  infoText: {
+    color: '#c9c9c9',
+  },
+}))

 interface Props {
  children?: ReactNode
@@ -41,7 +40,7 @@ interface Props {
 }

 export default function ExpandableList({ children, label, level, defaultOpen, info }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))

  const handleClick = () => {
@@ -64,7 +63,7 @@ export default function ExpandableList({ children, label, level, defaultOpen, in

  return (
    <div className={`${classes.root} ${rootLevelClass}`}>
-      <ListItem button onClick={handleClick} className={classes.header}>
+      <ListItemButton onClick={handleClick} className={classes.header}>
        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
        <Flex>
          {!open && (
@@ -74,7 +73,7 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
          )}
          {open ? <ExpandLess /> : <ExpandMore />}
        </Flex>
-      </ListItem>
+      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <div className={contentLevelClass}>{children}</div>
      </Collapse>
@@ -1,27 +1,25 @@
-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 { Box, IconButton, Tooltip, Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
 import { ReactElement, ReactNode } from 'react'
 import Info from 'remixicon-react/InformationLineIcon'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      wordBreak: 'break-word',
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    wordBreak: 'break-word',
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-  }),
-)
+  },
+}))

 interface Props {
  label?: ReactNode
@@ -30,25 +28,31 @@ interface Props {
 }

 export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return (
-    <ListItem className={classes.header}>
-      <Grid container direction="row" justifyContent="space-between" alignItems="center">
-        {label && <Typography variant="body1">{label}</Typography>}
-        {value && (
-          <Typography variant="body2">
-            {value}
-            {tooltip && (
-              <Tooltip title={tooltip} placement="top" arrow>
-                <IconButton size="small" className={classes.copyValue}>
-                  <Info strokeWidth={1} />
-                </IconButton>
-              </Tooltip>
-            )}
-          </Typography>
+    <ListItemButton className={classes.header}>
+      <Box display="flex" flexDirection="row" alignItems="center" width="100%">
+        {label && (
+          <Box flex={2}>
+            <Typography variant="body1">{label}</Typography>
+          </Box>
        )}
-      </Grid>
-    </ListItem>
+        {value && (
+          <Box flex={1} textAlign="right">
+            <Typography variant="body2" component="div">
+              {value}
+              {tooltip && (
+                <Tooltip title={tooltip} placement="top" arrow>
+                  <IconButton size="small" className={classes.copyValue}>
+                    <Info strokeWidth={1} />
+                  </IconButton>
+                </Tooltip>
+              )}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </ListItemButton>
  )
 }
@@ -1,27 +1,25 @@
-import { Grid } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Grid } from '@mui/material'
 import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-    },
-    action: {
-      marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  action: {
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+}))

 interface Props {
  children: ReactNode | ReactNode[]
 }

 export default function ExpandableListItemActions({ children }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()

  if (Array.isArray(children)) {
    return (
@@ -1,53 +1,58 @@
-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 { Box, IconButton, InputBase, ListItemButton, Typography } from '@mui/material'
+import Collapse from '@mui/material/Collapse'
+import React, { ChangeEvent, ReactElement, useState } from 'react'
 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 { makeStyles } from 'tss-react/mui'
+
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    borderLeft: `${theme.spacing(0.25)} solid rgba(0,0,0,0)`,
+    wordBreak: 'break-word',
+    '&:hover': {
      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
-      wordBreak: 'break-word',
    },
-    headerOpen: {
-      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    '&:focus-within': {
+      backgroundColor: theme.palette.background.paper,
    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
+  },
+  headerOpen: {
+    borderLeft: `${theme.spacing(0.25)} solid ${theme.palette.primary.main}`,
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
    },
-    content: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-    },
-    keyMargin: {
-      marginRight: theme.spacing(1),
-    },
-    unselectableLabel: {
-      cursor: 'default',
-      userSelect: 'none',
-      // Many browsers don't support yet the general user-select css property
-      WebkitUserSelect: 'none',
-      MozUserSelect: 'none',
-      msUserSelect: 'none',
-    },
-  }),
-)
+  },
+  content: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  keyMargin: {
+    marginRight: theme.spacing(1),
+  },
+  unselectableLabel: {
+    cursor: 'default',
+    userSelect: 'none',
+    // Many browsers don't support yet the general user-select css property
+    WebkitUserSelect: 'none',
+    MozUserSelect: 'none',
+    msUserSelect: 'none',
+  },
+}))

 interface Props {
  label: string
@@ -65,84 +70,105 @@ interface Props {
  locked?: boolean
 }

-export default function ExpandableListItemKey({
+export default function ExpandableListItemInput({
  label,
-  value,
-  onConfirm,
-  onChange,
+  value = '',
+  placeholder,
+  helperText,
+  expandedOnly,
  confirmLabel,
  confirmLabelDisabled,
  confirmIcon,
-  expandedOnly,
-  helperText,
-  placeholder,
  loading,
+  onChange,
+  onConfirm,
  mapperFn,
  locked,
 }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
  const [open, setOpen] = useState(Boolean(expandedOnly))
  const [inputValue, setInputValue] = useState<string>(value || '')
  const toggleOpen = () => setOpen(!open)
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    let newValue = e.target.value
+
    if (mapperFn) {
-      e.target.value = mapperFn(e.target.value)
+      newValue = mapperFn(newValue)
    }
+    setInputValue(newValue)

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

  return (
    <>
-      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
-        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
-          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+      <ListItemButton className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Box display="flex" flexDirection="column" width="100%">
+          <Box display="flex" flexDirection="row" alignItems="center" width="100%">
            {label && (
-              <Typography variant="body1" className={classes.unselectableLabel}>
-                {label}
-              </Typography>
+              <Box flex={1} minWidth={0}>
+                <Typography variant="body1" className={classes.unselectableLabel} component="span">
+                  {label}
+                </Typography>
+              </Box>
            )}
-            <Typography variant="body2">
-              <div>
-                {!open && value}
-                {!expandedOnly && !locked && (
-                  <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
-                    {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
-                  </IconButton>
-                )}
-              </div>
-            </Typography>
-          </Grid>
+            <Box flex={3} display="flex" alignItems="center" justifyContent="flex-end" minWidth={0} gap={1}>
+              {!open && value && (
+                <Typography
+                  variant="body2"
+                  component="span"
+                  sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                >
+                  {value}
+                </Typography>
+              )}
+              {!expandedOnly && !locked && (
+                <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+                  {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
+                </IconButton>
+              )}
+            </Box>
+          </Box>
          <Collapse in={open} timeout="auto" unmountOnExit>
-            <InputBase
-              value={inputValue}
-              placeholder={placeholder}
-              onChange={handleChange}
-              fullWidth
-              className={classes.content}
-              autoFocus
-              hidden={locked}
-            />
+            <Box display="flex" alignItems="center" width="100%" minWidth={0}>
+              <InputBase
+                value={inputValue}
+                placeholder={placeholder}
+                onChange={handleChange}
+                fullWidth
+                className={classes.content}
+                autoFocus
+                hidden={locked}
+                inputProps={{
+                  style: {
+                    width: '100%',
+                    minWidth: 220,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  },
+                  maxLength: 512,
+                }}
+              />
+            </Box>
+            {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
          </Collapse>
-        </Grid>
-      </ListItem>
+        </Box>
+      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
-        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
        <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
+                Boolean(confirmLabelDisabled) ||
+                (inputValue === '' && value === undefined)
              }
              loading={loading}
              iconType={confirmIcon ?? Check}
              onClick={() => {
-                if (onConfirm) onConfirm(inputValue)
+                onConfirm?.(inputValue.trim())
              }}
            >
              {confirmLabel || 'Save'}
@@ -1,40 +1,44 @@
-import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Collapse, Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
 import { ReactElement, useState } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 import Eye from 'remixicon-react/EyeLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
+import { useClipboardCopy } from '../hooks/useClipboardCopy'
+
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    borderLeft: `${theme.spacing(0.25)} solid rgba(0,0,0,0)`,
+    wordBreak: 'break-word',
+    '&:hover': {
      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
-      wordBreak: 'break-word',
    },
-    headerOpen: {
-      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    '&:focus-within': {
+      backgroundColor: theme.palette.background.paper,
    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
+  },
+  headerOpen: {
+    borderLeft: `${theme.spacing(0.25)} solid ${theme.palette.primary.main}`,
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
    },
-    content: {
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    },
-    keyMargin: {
-      marginRight: theme.spacing(1),
-    },
-  }),
-)
+  },
+  content: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+  keyMargin: {
+    marginRight: theme.spacing(1),
+  },
+}))

 interface Props {
  label: string
@@ -57,13 +61,11 @@ const split = (s: string): string[] => {
 }

 export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
-  const classes = useStyles()
-  const [open, setOpen] = useState(expanded || false)
-  const [copied, setCopied] = useState(false)
-  const toggleOpen = () => setOpen(!open)
+  const { classes } = useStyles()

-  const tooltipClickHandler = () => setCopied(true)
-  const tooltipCloseHandler = () => setCopied(false)
+  const [open, setOpen] = useState(expanded || false)
+  const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
+  const toggleOpen = () => setOpen(!open)

  const splitValues = split(value)
  const hasPrefix = isPrefixedHexString(value)
@@ -72,17 +74,19 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
  }`

  return (
-    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
-      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+    <ListItemButton className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+      <Grid container direction="column" justifyContent="space-between" alignItems="stretch" style={{ width: '100%' }}>
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
-          {label && <Typography variant="body1">{label}</Typography>}
-          <Typography variant="body2">
+          {label && (
+            <Typography variant="body1" component="span">
+              {label}
+            </Typography>
+          )}
+          <Typography variant="body2" component="span">
            {!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>
+                  <span onClick={handleCopy}>{value ? spanText : ''}</span>
                </Tooltip>
              </span>
            )}
@@ -94,22 +98,20 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
        <Collapse in={open} timeout="auto" unmountOnExit>
          <div className={classes.content}>
            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-              <CopyToClipboard text={value}>
-                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
-                <span onClick={tooltipClickHandler}>
-                  <span className={classes.copyValue}>
-                    {splitValues.map((s, i) => (
-                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
-                        {s}
-                      </Typography>
-                    ))}
-                  </span>
+              {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
+              <span onClick={handleCopy}>
+                <span className={classes.copyValue}>
+                  {splitValues.map((s, i) => (
+                    <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
+                      {s}
+                    </Typography>
+                  ))}
                </span>
-              </CopyToClipboard>
+              </span>
            </Tooltip>
          </div>
        </Collapse>
      </Grid>
-    </ListItem>
+    </ListItemButton>
  )
 }
@@ -1,54 +1,64 @@
-import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
-import { ReactElement, useState } from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
+import { ArrowForward, OpenInNewSharp } from '@mui/icons-material'
+import { Box, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
+import { ReactElement } from 'react'
 import { useNavigate } from 'react-router'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
+import { useClipboardCopy } from '../hooks/useClipboardCopy'
+
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    borderLeft: `${theme.spacing(0.25)} solid rgba(0,0,0,0)`,
+    wordBreak: 'break-word',
+    '&:hover': {
      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
-      wordBreak: 'break-word',
    },
-    headerOpen: {
-      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    '&:focus-within': {
+      backgroundColor: theme.palette.background.paper,
    },
-    openLinkIcon: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
+  },
+  headerOpen: {
+    borderLeft: `${theme.spacing(0.25)} solid ${theme.palette.primary.main}`,
+  },
+  openLinkIcon: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
    },
-    content: {
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
+  },
+  content: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+  keyMargin: {
+    marginRight: theme.spacing(1),
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
    },
-    keyMargin: {
-      marginRight: theme.spacing(1),
-    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-  }),
-)
+  },
+}))
+
+export enum NavigationType {
+  NEW_WINDOW = 'NEW_WINDOW',
+  HISTORY_PUSH = 'HISTORY_PUSH',
+}

 interface Props {
  label: string
  value: string
  link?: string
-  navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'
+  navigationType?: NavigationType
  allowClipboard?: boolean
 }

@@ -56,20 +66,17 @@ export default function ExpandableListItemLink({
  label,
  value,
  link,
-  navigationType = 'NEW_WINDOW',
+  navigationType = NavigationType.NEW_WINDOW,
  allowClipboard = true,
 }: Props): ReactElement | null {
-  const classes = useStyles()
-  const [copied, setCopied] = useState(false)
+  const { classes } = useStyles()
  const navigate = useNavigate()
-
-  const tooltipClickHandler = () => setCopied(true)
-  const tooltipCloseHandler = () => setCopied(false)
+  const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)

  const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value

  function onNavigation() {
-    if (navigationType === 'NEW_WINDOW') {
+    if (navigationType === NavigationType.NEW_WINDOW) {
      window.open(link || value)
    } else {
      navigate(link || value)
@@ -77,28 +84,26 @@ export default function ExpandableListItemLink({
  }

  return (
-    <ListItem className={classes.header}>
-      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
-        <Grid container direction="row" justifyContent="space-between" alignItems="center">
-          {label && <Typography variant="body1">{label}</Typography>}
+    <ListItemButton className={classes.header} sx={{ width: '100%' }}>
+      <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" width="100%">
+        {label && <Typography variant="body1">{label}</Typography>}
+        <Box display="flex" alignItems="center">
          <Typography variant="body2">
            {allowClipboard && (
              <span className={classes.copyValue}>
                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <CopyToClipboard text={value}>
-                    <span onClick={tooltipClickHandler}>{displayValue}</span>
-                  </CopyToClipboard>
+                  <span onClick={handleCopy}>{displayValue}</span>
                </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>
-    </ListItem>
+          <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
+            {navigationType === NavigationType.NEW_WINDOW && <OpenInNewSharp strokeWidth={1} />}
+            {navigationType === NavigationType.HISTORY_PUSH && <ArrowForward strokeWidth={1} />}
+          </IconButton>
+        </Box>
+      </Box>
+    </ListItemButton>
  )
 }
@@ -1,32 +1,30 @@
+import { Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
 import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography } from '@material-ui/core'
-import ListItem from '@material-ui/core/ListItem'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: '#F7F7F7',
-      marginBottom: theme.spacing(0.25),
-    },
-    typography: {
-      color: '#242424',
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: '#F7F7F7',
+    marginBottom: theme.spacing(0.25),
+  },
+  typography: {
+    color: '#242424',
+  },
+}))

 interface Props {
  children?: ReactNode | ReactNode[]
 }

 export default function ExpandableListItemNote({ children }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return (
-    <ListItem className={classes.header}>
+    <ListItemButton className={classes.header}>
      <Typography variant="body1" className={classes.typography}>
        {children}
      </Typography>
-    </ListItem>
+    </ListItemButton>
  )
 }
@@ -1,14 +1,12 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles(() =>
-  createStyles({
-    audio: {
-      width: '100%',
-      maxWidth: '250px',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  audio: {
+    width: '100%',
+    maxWidth: '250px',
+  },
+}))

 interface AudioProps {
  src: string | undefined
@@ -17,12 +15,17 @@ interface AudioProps {
 }

 export function FitAudio(props: AudioProps): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  const inlineStyles: Record<string, string> = {}

-  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
-  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+  if (props.maxHeight) {
+    inlineStyles.maxHeight = props.maxHeight
+  }
+
+  if (props.maxWidth) {
+    inlineStyles.maxWidth = props.maxWidth
+  }

  return <audio className={classes.audio} src={props.src} style={inlineStyles} controls />
 }
@@ -1,15 +1,13 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles(() =>
-  createStyles({
-    image: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+}))

 interface Props {
  alt: string
@@ -19,12 +17,17 @@ interface Props {
 }

 export function FitImage(props: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  const inlineStyles: Record<string, string> = {}

-  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
-  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+  if (props.maxHeight) {
+    inlineStyles.maxHeight = props.maxHeight
+  }
+
+  if (props.maxWidth) {
+    inlineStyles.maxWidth = props.maxWidth
+  }

  return <img className={classes.image} alt={props.alt} src={props.src} style={inlineStyles} />
 }
@@ -1,15 +1,13 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles(() =>
-  createStyles({
-    video: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  video: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+}))

 interface VideoProps {
  src: string | undefined
@@ -18,12 +16,17 @@ interface VideoProps {
 }

 export function FitVideo(props: VideoProps): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  const inlineStyles: Record<string, string> = {}

-  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
-  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+  if (props.maxHeight) {
+    inlineStyles.maxHeight = props.maxHeight
+  }
+
+  if (props.maxWidth) {
+    inlineStyles.maxWidth = props.maxWidth
+  }

  return <video className={classes.video} src={props.src} style={inlineStyles} controls />
 }
@@ -1,8 +1,10 @@
 import { ReactElement, useEffect, useState } from 'react'
+
 import { getPrettyDateString } from '../utils/date'
-import { getHistorySafe, HistoryItem, HISTORY_KEYS } from '../utils/local-storage'
+import { getHistorySafe, HISTORY_KEYS, HistoryItem } from '../utils/localStorage'
+
 import ExpandableList from './ExpandableList'
-import ExpandableListItemLink from './ExpandableListItemLink'
+import ExpandableListItemLink, { NavigationType } from './ExpandableListItemLink'

 interface Props {
  title: string
@@ -28,7 +30,7 @@ export function History({ title, localStorageKey }: Props): ReactElement | null
          value={x.name}
          link={'/files/hash/' + x.hash}
          key={i}
-          navigationType="HISTORY_PUSH"
+          navigationType={NavigationType.HISTORY_PUSH}
          allowClipboard={false}
        />
      ))}
@@ -1,25 +1,24 @@
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ArrowBack } from '@material-ui/icons'
+import { ArrowBack } from '@mui/icons-material'
+import { Box, Grid, Typography } from '@mui/material'
 import { ReactElement } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  children: string
 }

-const useStyles = makeStyles(() =>
-  createStyles({
-    pressable: {
-      cursor: 'pointer',
-    },
-    icon: {
-      color: '#242424',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  pressable: {
+    cursor: 'pointer',
+  },
+  icon: {
+    color: '#242424',
+  },
+}))

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

  function goBack() {
@@ -1,4 +1,4 @@
-import { CircularProgress, Grid } from '@material-ui/core'
+import { CircularProgress, Grid } from '@mui/material'
 import { ReactElement } from 'react'

 export function Loading(): ReactElement {
@@ -1,6 +1,7 @@
 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'
@@ -18,17 +19,10 @@ interface MapRecord {
 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)
-}
+const deduplicatedRecords = Object.values(
+  Object.fromEntries(Object.values(fullMapDb).map(r => [`${r.lat} ${r.lng}`, r])),
+)

 function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
  const noDuplicates: Record<string, MapRecord> = {}
@@ -47,27 +41,45 @@ function addPins(map: DottedMap, pins: MapRecord[], color: string) {
  })
 }

+enum PeerColors {
+  Black = '#303030',
+  Green = '#09CA6C',
+  LightGrey = '#dadada',
+  White = '#eaeaea',
+}
+
 const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
 const mapNoPins = new DottedMap({ map: JSON.parse(mapData) })
-addPins(mapPrecomputed, deduplicatedRecords, '#303030')
+addPins(mapPrecomputed, deduplicatedRecords, PeerColors.Black)

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

 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' }))
+    let newSvg: string

-    // Display just the base map without any connections
-    if (!peers) return
+    if (error) {
+      newSvg = mapNoPins.getSVG({ ...mapSvgOptions, color: PeerColors.White })
+    } else if (peers) {
+      const points = findIntersection(fullMapDb, peers)
+      const mapNew = Object.create(mapPrecomputed)
+      addPins(mapNew, points, PeerColors.Green)
+      newSvg = mapNew.getSVG(mapSvgOptions)
+    } else {
+      return
+    }

-    const points = findIntersection(fullMapDb, peers)
-    const mapNew = Object.create(mapPrecomputed)
-    addPins(mapNew, points, '#09CA6C')
-    setMap(mapNew.getSVG(mapSvgOptions))
+    if (newSvg !== map) {
+      setMap(newSvg)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [peers, error])

  return (
@@ -1,7 +1,7 @@
+import Box from '@mui/material/Box'
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress'
+import Typography from '@mui/material/Typography'
 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
@@ -1,39 +1,38 @@
-import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  steps: string[]
  index: number
 }

-const useStyles = makeStyles(() =>
-  createStyles({
-    wrapper: {
-      height: '52px',
-      display: 'flex',
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    todo: {
-      background: '#f7f7f7',
-      color: '#c9c9c9',
-    },
-    inProgress: {
-      background: '#ffffff',
-      color: '#242424',
-      height: '52px',
-    },
-    done: {
-      background: '#f7f7f7',
-      color: '#606060',
-      height: '52px',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  wrapper: {
+    height: '52px',
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  todo: {
+    background: '#f7f7f7',
+    color: '#c9c9c9',
+  },
+  inProgress: {
+    background: '#ffffff',
+    color: '#242424',
+    height: '52px',
+  },
+  done: {
+    background: '#f7f7f7',
+    color: '#606060',
+    height: '52px',
+  },
+}))

 export function ProgressIndicator({ steps, index }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  function pickClass(i: number): string {
    if (i === index) {
@@ -1,7 +1,7 @@
+import { FilterCenterFocusSharp } from '@mui/icons-material'
+import { Dialog, DialogTitle, IconButton } from '@mui/material'
 import { ReactElement, useState } from 'react'
-import QRCode from 'qrcode.react'
-import { IconButton, Dialog, DialogTitle } from '@material-ui/core'
-import { FilterCenterFocusSharp } from '@material-ui/icons'
+import QRCode from 'react-qr-code'

 interface Props {
  value: string
@@ -27,15 +27,7 @@ export default function QRCodeModal(props: Props): ReactElement {
      <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
        <div style={{ padding: '30px', textAlign: 'center' }}>
          <DialogTitle id="simple-dialog-title">{props.label}</DialogTitle>
-          <QRCode
-            value={props.value}
-            size={150}
-            bgColor={'#ffffff'}
-            fgColor={'#000000'}
-            level={'L'}
-            includeMargin={false}
-            renderAs={'svg'}
-          />
+          <QRCode value={props.value} size={150} bgColor={'#ffffff'} fgColor={'#000000'} level={'L'} />
        </div>
      </Dialog>
    </div>
@@ -0,0 +1,73 @@
+import { BZZ, DAI, RedistributionState } from '@ethersphere/bee-js'
+import { useContext, useEffect, useState } from 'react'
+
+import { Context } from '../providers/Settings'
+
+import ExpandableListItem from './ExpandableListItem'
+
+export function Redistribution() {
+  const { beeApi } = useContext(Context)
+  const [redistributionState, setRedistributionState] = useState<RedistributionState | null>(null)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!beeApi) {
+        return
+      }
+
+      beeApi.getRedistributionState().then(setRedistributionState).catch(console.error) // eslint-disable-line
+    }, 3_000)
+
+    return () => clearInterval(interval)
+  })
+
+  const formatDurationSeconds = (s?: number) => {
+    if (s === null || s === undefined) {
+      return '-'
+    } else {
+      return `${s} s`
+    }
+  }
+
+  const formatBzzAmount = (amount?: BZZ) => {
+    if (amount === null || amount === undefined) {
+      return '-'
+    } else {
+      return `${amount.toSignificantDigits(4)} xBZZ`
+    }
+  }
+
+  const formatDaiAmount = (amount?: DAI) => {
+    if (amount === null || amount === undefined) {
+      return '-'
+    } else {
+      return `${amount.toSignificantDigits(4)} xDAI`
+    }
+  }
+
+  return (
+    <>
+      <ExpandableListItem
+        label="Has sufficient funds"
+        value={redistributionState?.hasSufficientFunds?.toString() ?? '-'}
+      />
+      <ExpandableListItem label="Fully synced" value={redistributionState?.isFullySynced?.toString() ?? '-'} />
+      <ExpandableListItem label="Frozen" value={redistributionState?.isFrozen?.toString() ?? '-'} />
+      <ExpandableListItem label="Phase" value={redistributionState?.phase ?? '-'} />
+      <ExpandableListItem label="Round" value={redistributionState?.round?.toString() ?? '-'} />
+      <ExpandableListItem
+        label="Last selected round"
+        value={redistributionState?.lastSelectedRound.toString() ?? '-'}
+      />
+      <ExpandableListItem label="Last played round" value={redistributionState?.lastPlayedRound.toString() ?? '-'} />
+      <ExpandableListItem label="Last round won" value={redistributionState?.lastWonRound.toString() ?? '-'} />
+      <ExpandableListItem label="Last frozen round" value={redistributionState?.lastFrozenRound.toString() ?? '-'} />
+      <ExpandableListItem
+        label="Last sample duration"
+        value={formatDurationSeconds(redistributionState?.lastSampleDurationSeconds)}
+      />
+      <ExpandableListItem label="Reward" value={formatBzzAmount(redistributionState?.reward)} />
+      <ExpandableListItem label="Fees" value={formatDaiAmount(redistributionState?.fees)} />
+    </>
+  )
+}
@@ -1,75 +1,128 @@
-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 { Box, Divider, Drawer, Grid, IconButton, Link as MUILink, List, Tooltip, Typography } from '@mui/material'
+import { ReactElement, useContext, useState } from 'react'
 import { Link } from 'react-router-dom'
 import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
-import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import DocsIcon from 'remixicon-react/BookOpenLineIcon'
+import ExchangeDollarLineIcon from 'remixicon-react/ExchangeDollarLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import GithubIcon from 'remixicon-react/GithubFillIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
+import MenuFoldIcon from 'remixicon-react/MenuFoldLineIcon'
+import MenuUnfoldIcon from 'remixicon-react/MenuUnfoldLineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import { makeStyles } from 'tss-react/mui'
+
 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 { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL, GITHUB_BEE_DESKTOP_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 drawerWidth = 300
+const drawerWidthCollapsed = 72
+const drawerHeaderHeight = 56

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexWrap: 'nowrap',
-      minHeight: '100vh',
-      paddingTop: theme.spacing(8),
-      paddingBottom: theme.spacing(8),
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-    },
-    drawerPaper: {
-      width: drawerWidth,
-      backgroundColor: '#212121',
-      zIndex: 988,
-    },
-    logo: {
-      marginLeft: theme.spacing(8),
-      marginRight: theme.spacing(8),
-    },
-    icon: {
-      height: theme.spacing(4),
-    },
-    divider: {
+const useStyles = makeStyles()(theme => ({
+  root: {
+    flexWrap: 'nowrap',
+    minHeight: `calc(100vh - ${drawerHeaderHeight}px)`,
+    paddingBottom: theme.spacing(8),
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerCollapsed: {
+    width: drawerWidthCollapsed,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    backgroundColor: '#212121',
+    zIndex: 988,
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperCollapsed: {
+    width: drawerWidthCollapsed,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    height: drawerHeaderHeight,
+    borderBottom: '1px solid #2c2c2c',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    flexShrink: 0,
+  },
+  logo: {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  logoImg: {
+    maxWidth: '100%',
+    display: 'block',
+  },
+  toggleButton: {
+    color: '#9f9f9f',
+    '&:hover': {
+      color: '#f9f9f9',
      backgroundColor: '#2c2c2c',
-      marginLeft: theme.spacing(4),
-      marginRight: theme.spacing(4),
    },
-    link: {
-      color: '#9f9f9f',
+  },
+  toggleButtonCollapsed: {
+    marginLeft: 'auto',
+  },
+  icon: {
+    height: theme.spacing(4),
+  },
+  divider: {
+    backgroundColor: '#2c2c2c',
+    marginLeft: theme.spacing(4),
+    marginRight: theme.spacing(4),
+  },
+  link: {
+    color: '#9f9f9f',
+    textDecoration: 'none',
+    '&:hover': {
      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'none',

-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          textDecoration: 'none',
-        },
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
+        textDecoration: 'none',
      },
    },
-  }),
-)
+  },
+}))

 export default function SideBar(): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
  const { isDesktop } = useContext(SettingsContext)
  const { nodeInfo } = useContext(BeeContext)
+  const [isCollapsed, setIsCollapsed] = useState(false)

  const navBarItems = [
    {
@@ -87,7 +140,7 @@ export default function SideBar(): ReactElement {
      label: 'File Manager',
      path: ROUTES.FILEMANAGER,
      icon: FileManagerIcon,
-      pathMatcherSubstring: '/filemanager/',
+      pathMatcherSubstring: '/filemanager',
    },
    {
      label: 'Account',
@@ -95,6 +148,11 @@ export default function SideBar(): ReactElement {
      icon: AccountIcon,
      pathMatcherSubstring: '/account/',
    },
+    {
+      label: 'Redistribution',
+      path: ROUTES.REDISTRIBUTION,
+      icon: ExchangeDollarLineIcon,
+    },
    {
      label: 'Settings',
      path: ROUTES.SETTINGS,
@@ -103,13 +161,28 @@ export default function SideBar(): ReactElement {
  ]

  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={isDesktop ? DesktopLogo : DashboardLogo} />
+    <Drawer
+      className={`${classes.drawer} ${isCollapsed ? classes.drawerCollapsed : ''}`}
+      variant="permanent"
+      anchor="left"
+      classes={{ paper: `${classes.drawerPaper} ${isCollapsed ? classes.drawerPaperCollapsed : ''}` }}
+    >
+      <div className={classes.header}>
+        {!isCollapsed && (
+          <Link to={ROUTES.INFO} className={classes.logo}>
+            <img alt="swarm" className={classes.logoImg} src={isDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
-        </Grid>
+        )}
+        <Tooltip title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'} placement="right">
+          <IconButton
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className={`${classes.toggleButton} ${isCollapsed ? classes.toggleButtonCollapsed : ''}`}
+          >
+            {isCollapsed ? <MenuUnfoldIcon /> : <MenuFoldIcon />}
+          </IconButton>
+        </Tooltip>
+      </div>
+      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
        <Grid>
          <List>
            {navBarItems.map(p => (
@@ -120,6 +193,7 @@ export default function SideBar(): ReactElement {
                  path={p.path}
                  pathMatcherSubstring={p.pathMatcherSubstring}
                  label={p.label}
+                  isCollapsed={isCollapsed}
                />
              </Link>
            ))}
@@ -129,32 +203,40 @@ export default function SideBar(): ReactElement {
            <MUILink href={BEE_DOCS_HOST} target="_blank" className={classes.link}>
              <SideBarItem
                iconStart={<DocsIcon className={classes.icon} />}
-                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
+                iconEnd={!isCollapsed ? <ExternalLinkIcon className={classes.icon} color="#595959" /> : undefined}
                label={<span>Docs</span>}
+                isCollapsed={isCollapsed}
              />
            </MUILink>
          </List>
          <Divider className={classes.divider} />
          <List>
-            <MUILink href={GITHUB_BEE_DASHBOARD_URL} target="_blank" className={classes.link}>
+            <MUILink
+              href={isDesktop ? GITHUB_BEE_DESKTOP_URL : GITHUB_BEE_DASHBOARD_URL}
+              target="_blank"
+              className={classes.link}
+            >
              <SideBarItem
                iconStart={<GithubIcon className={classes.icon} />}
-                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
+                iconEnd={!isCollapsed ? <ExternalLinkIcon className={classes.icon} color="#595959" /> : undefined}
                label={<span>GitHub</span>}
+                isCollapsed={isCollapsed}
              />
            </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>
+          {!isCollapsed && (
+            <Box mt={4}>
+              <Link to={ROUTES.TOP_UP_GIFT_CODE}>
+                <Typography align="center">Redeem gift code</Typography>
+              </Link>
+            </Box>
+          )}
        </Grid>
        <Grid>
          <List>
            <Link to={ROUTES.STATUS} className={classes.link}>
-              <SideBarStatus path={ROUTES.STATUS} />
+              <SideBarStatus path={ROUTES.STATUS} isCollapsed={isCollapsed} />
            </Link>
          </List>
        </Grid>
@@ -1,9 +1,9 @@
-import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
+import { ListItemButton, ListItemIcon, ListItemText, Tooltip } from '@mui/material'
 import type { ReactElement, ReactNode } from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'

-const StyledListItem = withStyles((theme: Theme) => ({
+const useItemStyles = makeStyles()(theme => ({
  root: {
    paddingLeft: theme.spacing(4),
    paddingRight: theme.spacing(4),
@@ -13,8 +13,6 @@ const StyledListItem = withStyles((theme: Theme) => ({
      backgroundColor: '#2c2c2c',
      color: '#f9f9f9',
    },
-  },
-  button: {
    '&:hover': {
      backgroundColor: '#2c2c2c',
      color: '#f9f9f9',
@@ -26,18 +24,26 @@ const StyledListItem = withStyles((theme: Theme) => ({
      },
    },
  },
-}))(ListItem)
+  rootCollapsed: {
+    justifyContent: 'center',
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+  },
+}))

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    icon: {
-      color: 'inherit',
-    },
-    activeIcon: {
-      color: theme.palette.primary.main,
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  icon: {
+    color: 'inherit',
+    minWidth: 0,
+  },
+  activeIcon: {
+    color: theme.palette.primary.main,
+    minWidth: 0,
+  },
+  label: {
+    marginLeft: theme.spacing(2),
+  },
+}))

 interface Props {
  iconStart?: ReactNode
@@ -45,20 +51,37 @@ interface Props {
  path?: string
  label: ReactNode
  pathMatcherSubstring?: string
+  isCollapsed?: boolean
 }

-export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
-  const classes = useStyles()
+export default function SideBarItem({
+  iconStart,
+  iconEnd,
+  path,
+  label,
+  pathMatcherSubstring,
+  isCollapsed,
+}: Props): ReactElement {
+  const { classes } = useStyles()
+  const { classes: itemClasses } = useItemStyles()
  const location = useLocation()
  const isSelected = pathMatcherSubstring
    ? location.pathname.startsWith(pathMatcherSubstring)
    : Boolean(path && matchPath(location.pathname, path))

  return (
-    <StyledListItem button selected={isSelected} disableRipple>
-      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
-      <ListItemText primary={label} />
-      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
-    </StyledListItem>
+    <Tooltip title={isCollapsed ? label : ''} placement="right">
+      <ListItemButton
+        className={`${itemClasses.root} ${isCollapsed ? itemClasses.rootCollapsed : ''}`}
+        selected={isSelected}
+        disableRipple
+      >
+        <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
+        {!isCollapsed && <ListItemText primary={label} className={classes.label} />}
+        {!isCollapsed && iconEnd && (
+          <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
+        )}
+      </ListItemButton>
+    </Tooltip>
  )
 }
@@ -1,78 +1,107 @@
+import { ListItemButton, ListItemIcon, ListItemText, Tooltip, Typography } from '@mui/material'
 import { ReactElement, useContext } from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
 import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
+import { makeStyles } from 'tss-react/mui'

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

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    icon: {
-      color: 'inherit',
-    },
-    iconSmall: {
-      height: theme.spacing(2),
-    },
+const useStyles = makeStyles()(theme => ({
+  icon: {
+    color: 'inherit',
+  },
+  iconSmall: {
+    height: theme.spacing(2),
+  },

-    root: {
-      height: theme.spacing(4),
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(4),
-      color: '#f9f9f9',
-      borderLeft: '0px solid rgba(0,0,0,0)',
-      '&.Mui-selected, &.Mui-selected:hover': {
-        borderLeft: `0px solid ${theme.palette.primary.main}`,
-        backgroundColor: '#2c2c2c',
-      },
+  root: {
+    height: theme.spacing(4),
+    paddingLeft: theme.spacing(0),
+    paddingRight: theme.spacing(0),
+    color: '#f9f9f9',
+    borderLeft: '0px solid rgba(0,0,0,0)',
+    '&.Mui-selected, &.Mui-selected:hover': {
+      borderLeft: `0px solid ${theme.palette.primary.main}`,
+      backgroundColor: '#2c2c2c',
    },
-    rootError: {
-      backgroundColor: 'rgba(255, 58, 82, 0.25)',
-    },
-    button: {
-      '&:hover': {
+  },
+  rootError: {
+    backgroundColor: 'rgba(255, 58, 82, 0.25)',
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: '#2c2c2c',
+      color: 'white',
+
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
        backgroundColor: '#2c2c2c',
        color: 'white',
-
-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          backgroundColor: '#2c2c2c',
-          color: 'white',
-        },
      },
    },
-    smallerText: {
-      fontSize: '0.9rem',
-      whiteSpace: 'nowrap',
-    },
-  }),
-)
+  },
+  smallerText: {
+    fontSize: '0.9rem',
+    whiteSpace: 'nowrap',
+  },
+  rootCollapsed: {
+    justifyContent: 'center',
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+  },
+  statusIcon: {
+    marginLeft: '30px',
+    minWidth: 0,
+  },
+  statusIconCollapsed: {
+    marginLeft: 0,
+    minWidth: 0,
+  },
+  statusText: {
+    marginLeft: theme.spacing(2),
+  },
+}))

 interface Props {
  path?: string
+  isCollapsed?: boolean
 }

-export default function SideBarItem({ path }: Props): ReactElement {
+export default function SideBarItem({ path, isCollapsed }: Props): ReactElement {
  const { status, isLoading } = useContext(Context)
-  const classes = useStyles()
+  const { classes } = useStyles()
  const location = useLocation()
  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
-    <ListItem
-      button
-      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
-      selected={isSelected}
-      disableRipple
-    >
-      <ListItemIcon style={{ marginLeft: '30px' }}>
-        <StatusIcon checkState={status.all} isLoading={isLoading} />
-      </ListItemIcon>
-      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
-      <ListItemIcon className={classes.icon}>
-        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
-      </ListItemIcon>
-    </ListItem>
+    <Tooltip title={isCollapsed ? `Node ${status.all}` : ''} placement="right">
+      <ListItemButton
+        classes={{
+          root: `${classes.root} ${status.all ? '' : classes.rootError} ${isCollapsed ? classes.rootCollapsed : ''}`,
+        }}
+        selected={isSelected}
+        disableRipple
+      >
+        <ListItemIcon className={isCollapsed ? classes.statusIconCollapsed : classes.statusIcon}>
+          <StatusIcon checkState={status.all} isLoading={isLoading} />
+        </ListItemIcon>
+        {!isCollapsed && (
+          <>
+            <ListItemText
+              primary={
+                <Typography
+                  className={`${classes.smallerText} ${classes.statusText}`}
+                >{`Node ${status.all}`}</Typography>
+              }
+            />
+            <ListItemIcon className={classes.icon}>
+              {status.all ? null : <ArrowRight className={classes.iconSmall} />}
+            </ListItemIcon>
+          </>
+        )}
+      </ListItemButton>
+    </Tooltip>
  )
 }
@@ -1,26 +1,55 @@
-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 { Bee, PostageBatch } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Input from '@mui/material/Input'
 import { useSnackbar } from 'notistack'
-import { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'

-interface Props {
-  type: 'Topup' | 'Dilute'
-  icon: ReactNode
-  bee: Bee
-  stamp: BatchId
+import { CheckState } from '../providers/Bee'
+
+const useStyles = makeStyles()(theme => ({
+  buttonSelected: {
+    color: 'white',
+    backgroundColor: theme.palette.primary.main,
+    '&:hover': {
+      color: theme.palette.secondary.main,
+      backgroundColor: 'white',
+      '@media (hover: none)': {
+        color: 'white',
+        backgroundColor: theme.palette.primary.main,
+      },
+    },
+  },
+  buttonUnselected: {
+    color: '#dd7700',
+    backgroundColor: 'white',
+  },
+}))
+
+export enum StampExtensionType {
+  Topup = 'Topup',
+  Dilute = 'Dilute',
 }

-export default function StampExtensionModal({ type, icon, bee, stamp }: Props): ReactElement {
-  const [open, setOpen] = useState(false)
-  const [amount, setAmount] = useState('')
+interface Props {
+  type: StampExtensionType
+  icon: ReactNode
+  bee: Bee
+  stamp: PostageBatch
+  status: CheckState
+}
+
+export default function StampExtensionModal({ type, icon, bee, stamp, status }: Props): ReactElement {
+  const { classes } = useStyles()
+  const [open, setOpen] = useState<boolean>(false)
+  const [amount, setAmount] = useState<string>('')
  const { enqueueSnackbar } = useSnackbar()
-  const label = `${type} ${stamp.toHex().substring(0, 8)}`
+  const label = `${type} ${stamp.batchID.toHex().substring(0, 8)}`

  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(true)
@@ -32,23 +61,65 @@ export default function StampExtensionModal({ type, icon, bee, stamp }: Props):
  }

  const handleAction = async () => {
-    if (type === 'Topup') {
+    if (status !== CheckState.OK) {
+      enqueueSnackbar(`Node connection status is not ${CheckState.OK}: ${status}`, { variant: 'error' })
+
+      return
+    }
+
+    if (type === StampExtensionType.Topup) {
+      const isAmountInvalid = BigInt(amount) <= BigInt(0)
+
+      if (isAmountInvalid) {
+        enqueueSnackbar(`Invalid amount: ${amount}, it must be greate than 0`, { variant: 'error' })
+
+        return
+      }
+
      try {
-        await bee.topUpBatch(stamp, amount)
+        await bee.topUpBatch(stamp.batchID, 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' })
      }
+
+      return
    }

-    if (type === 'Dilute') {
+    if (type === StampExtensionType.Dilute) {
+      const newDepth = parseInt(amount, 10)
+      const ttlDays = stamp.duration.toDays()
+      const currentDepth = stamp.depth
+      const maxHalvings = Math.floor(Math.log2(ttlDays)) + currentDepth
+      const isDepthInvalid = newDepth > maxHalvings || newDepth <= currentDepth
+
+      if (isDepthInvalid) {
+        enqueueSnackbar(`Invalid depth: ${newDepth} (${currentDepth} < new depth < ${maxHalvings})`, {
+          variant: 'error',
+        })
+
+        return
+      }
+
+      if (ttlDays <= 2) {
+        enqueueSnackbar(`TTL: ${ttlDays} <= 2 days, cannot dilute stamp (min. TTL is 1 day)`, {
+          variant: 'warning',
+        })
+
+        return
+      }
+
      try {
-        await bee.diluteBatch(stamp, parseInt(amount, 10))
+        await bee.diluteBatch(stamp.batchID, newDepth)
        enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: 'success' })
      } catch (error) {
        enqueueSnackbar(`Failed to dilute stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
      }
+
+      return
    }
+
+    enqueueSnackbar(`Failed to extend stamp, unknown operation: ${type}`, { variant: 'error' })
  }

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
@@ -57,7 +128,7 @@ export default function StampExtensionModal({ type, icon, bee, stamp }: Props):

  return (
    <Box mb={2}>
-      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
+      <Button className={classes.buttonSelected} variant="contained" onClick={handleClickOpen} startIcon={icon}>
        {type}
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -68,7 +139,7 @@ export default function StampExtensionModal({ type, icon, bee, stamp }: Props):
            margin="dense"
            id="name"
            type="text"
-            placeholder={type === 'Topup' ? 'Amount to add' : 'New depth to dilute'}
+            placeholder={type === StampExtensionType.Topup ? 'Amount to add' : 'New depth to dilute'}
            fullWidth
            value={amount}
            onChange={handleChange}
@@ -78,7 +149,14 @@ export default function StampExtensionModal({ type, icon, bee, stamp }: Props):
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
-          <Button disabled={amount === ''} onClick={handleAction} color="primary">
+          <Button
+            disabled={amount === ''}
+            onClick={async () => {
+              await handleAction()
+              handleClose()
+            }}
+            color="primary"
+          >
            {type}
          </Button>
        </DialogActions>
@@ -1,5 +1,6 @@
-import { CircularProgress } from '@material-ui/core'
+import { CircularProgress } from '@mui/material'
 import type { ReactElement } from 'react'
+
 import { CheckState } from '../providers/Bee'

 interface Props {
@@ -1,31 +1,29 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  children: ReactElement | ReactElement[]
 }

-const useStyles = makeStyles(() =>
-  createStyles({
-    wrapper: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '175px',
-      height: '175px',
-      background: `repeating-linear-gradient(
+const useStyles = makeStyles()(() => ({
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '175px',
+    height: '175px',
+    background: `repeating-linear-gradient(
                        45deg,
                        #efefef,
                        #efefef 4px,
                        #ffffff 4px,
                        #ffffff 8px
                    )`,
-    },
-  }),
-)
+  },
+}))

 export function StripedWrapper({ children }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return <div className={classes.wrapper}>{children}</div>
 }
@@ -1,6 +1,7 @@
-import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { Button, ButtonProps, CircularProgress } from '@mui/material'
 import React, { ReactElement } from 'react'
 import type { RemixiconReactIconProps } from 'remixicon-react'
+import { makeStyles } from 'tss-react/mui'

 export interface SwarmButtonProps extends ButtonProps {
  iconType: React.ComponentType<RemixiconReactIconProps>
@@ -9,34 +10,32 @@ export interface SwarmButtonProps extends ButtonProps {
  variant?: 'text' | 'contained' | 'outlined'
 }

-const useStyles = makeStyles(() =>
-  createStyles({
-    button: {
-      height: '42px',
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      color: '#242424',
-      '&:hover, &:focus': {
-        '& svg': {
-          fill: '#fff',
-          transition: '0.1s',
-        },
+const useStyles = makeStyles()(() => ({
+  button: {
+    height: '42px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    color: '#242424',
+    '&:hover, &:focus': {
+      '& svg': {
+        fill: '#fff',
+        transition: '0.1s',
      },
    },
-    cancelButton: {
-      background: '#f7f7f7',
-      color: '#606060',
-    },
-    spinnerWrapper: {
-      position: 'absolute',
-      left: '50%',
-      top: '50%',
-      width: '40px',
-      height: '40px',
-      transform: 'translate(-50%, -50%)',
-    },
-  }),
-)
+  },
+  cancelButton: {
+    background: '#f7f7f7',
+    color: '#606060',
+  },
+  spinnerWrapper: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    width: '40px',
+    height: '40px',
+    transform: 'translate(-50%, -50%)',
+  },
+}))

 export function SwarmButton({
  children,
@@ -50,7 +49,7 @@ export function SwarmButton({
  style,
  ...other
 }: SwarmButtonProps): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  function getIconColor() {
    if (loading || disabled) {
@@ -1,4 +1,4 @@
-import { Box, Dialog, Grid } from '@material-ui/core'
+import { Box, Dialog, Grid } from '@mui/material'
 import { ReactElement } from 'react'

 interface Props {
@@ -1,4 +1,4 @@
-import { Box, Divider } from '@material-ui/core'
+import { Box, Divider } from '@mui/material'
 import { ReactElement } from 'react'

 interface Props {
@@ -1,12 +1,10 @@
-import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
+import { FormHelperText, MenuItem, Select as MuiSelect, SelectChangeEvent } from '@mui/material'
 import { Field } from 'formik'
-import { Select } from 'formik-material-ui'
+import { Select } from 'formik-mui'
 import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'

-export type SelectEvent = React.ChangeEvent<{
-  name?: string | undefined
-  value: unknown
-}>
+export type SelectEvent = SelectChangeEvent<string>

 function renderValue(value: unknown): ReactNode {
  if (typeof value === 'string') {
@@ -28,33 +26,31 @@ interface Props {
  options: { value: string; label: string }[]
  onChange?: (event: SelectEvent) => void
  formik?: boolean
-  defaultValue?: string
+  value?: string
  placeholder?: string
  disabled?: boolean
 }

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    select: {
-      borderRadius: 0,
-      background: theme.palette.background.paper,
-      '& fieldset': {
-        border: 0,
-      },
-      '& .MuiSelect-select': {
-        '&:focus': {
-          background: theme.palette.background.paper,
-        },
+const useStyles = makeStyles()(theme => ({
+  select: {
+    borderRadius: 0,
+    background: theme.palette.background.paper,
+    '& fieldset': {
+      border: 0,
+    },
+    '& .MuiSelect-select': {
+      '&:focus': {
+        background: theme.palette.background.paper,
      },
    },
-    option: {
-      height: '52px',
-    },
-  }),
-)
+  },
+  option: {
+    height: '52px',
+  },
+}))

 export function SwarmSelect({
-  defaultValue,
+  value,
  formik,
  name,
  options,
@@ -63,7 +59,7 @@ export function SwarmSelect({
  placeholder,
  disabled = false,
 }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  if (formik) {
    return (
@@ -76,9 +72,10 @@ export function SwarmSelect({
          name={name}
          fullWidth
          variant="outlined"
-          defaultValue={defaultValue}
+          value={value}
          className={classes.select}
          displayEmpty
+          onChange={onChange}
          renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
        >
@@ -102,7 +99,7 @@ export function SwarmSelect({
        fullWidth
        variant="outlined"
        className={classes.select}
-        defaultValue={defaultValue}
+        value={value}
        onChange={onChange}
        displayEmpty
        renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
@@ -1,7 +1,8 @@
-import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { TextField as SimpleTextField } from '@mui/material'
 import { Field } from 'formik'
-import { TextField } from 'formik-material-ui'
+import { TextField } from 'formik-mui'
 import { ChangeEvent, ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'

 interface Props {
  name: string
@@ -14,25 +15,23 @@ interface Props {
  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }

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

 export function SwarmTextInput({
  name,
@@ -44,7 +43,7 @@ export function SwarmTextInput({
  defaultValue,
  placeholder,
 }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  if (formik) {
    return (
@@ -58,7 +57,7 @@ export function SwarmTextInput({
        variant="filled"
        className={classes.field}
        defaultValue={defaultValue || ''}
-        InputProps={{ disableUnderline: true }}
+        slotProps={{ input: { disableUnderline: true } }}
        placeholder={placeholder}
      />
    )
@@ -74,7 +73,7 @@ export function SwarmTextInput({
      className={classes.field}
      defaultValue={defaultValue || ''}
      onChange={onChange}
-      InputProps={{ disableUnderline: true }}
+      slotProps={{ input: { disableUnderline: true } }}
      placeholder={placeholder}
    />
  )
@@ -1,6 +1,6 @@
+import { Tab, Tabs } from '@mui/material'
 import React, { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Tab, Tabs } from '@material-ui/core'
+import { makeStyles } from 'tss-react/mui'

 interface TabPanelProps {
  children?: ReactNode
@@ -18,16 +18,14 @@ function TabPanel(props: TabPanelProps) {
  )
 }

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-    },
-    content: {
-      marginTop: theme.spacing(2),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  content: {
+    marginTop: theme.spacing(2),
+  },
+}))

 interface TabsValues {
  component: ReactNode
@@ -41,10 +39,10 @@ interface Props {
 }

 export default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
  const [value, setValue] = React.useState<number>(index || 0)

-  const handleChange = (event: React.ChangeEvent<Record<string, never>>, newValue: number) => {
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
    if (indexChanged) indexChanged(newValue)
    else setValue(newValue)
  }
@@ -1,5 +1,7 @@
-import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
 import { CloseButton } from './CloseButton'

 interface Props {
@@ -7,17 +9,15 @@ interface Props {
  onClose: () => void
 }

-const useStyles = makeStyles(() =>
-  createStyles({
-    text: {
-      color: '#606060',
-      fontWeight: 'bold',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  text: {
+    color: '#606060',
+    fontWeight: 'bold',
+  },
+}))

 export function TitleWithClose({ children, onClose }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return (
    <Grid container justifyContent="space-between" alignItems="center">
@@ -1,6 +1,8 @@
 import type { Topology } from '@ethersphere/bee-js'
 import type { ReactElement } from 'react'
+
 import { pickThreshold, ThresholdValues } from '../utils/threshold'
+
 import ExpandableListItem from './ExpandableListItem'

 interface Props {
@@ -1,40 +1,39 @@
-import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Button, Grid, Link as MuiLink, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
-import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
-import { ROUTES } from '../routes'
-import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
+import Activity from 'remixicon-react/PulseLineIcon'
+import { makeStyles } from 'tss-react/mui'

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: '100%',
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
+import { ROUTES } from '../routes'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    height: '100%',
+  },
+  content: {
+    maxWidth: 500,
+    marginBottom: theme.spacing(4),
+    '&:last-child': {
+      marginBottom: 0,
    },
-    content: {
-      maxWidth: 500,
-      marginBottom: theme.spacing(4),
-      '&:last-child': {
-        marginBottom: 0,
-      },
-    },
-    icon: {
-      height: '1rem',
-    },
-  }),
-)
+  },
+  icon: {
+    height: '1rem',
+  },
+}))

 export default function TroubleshootConnectionCard(): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()

  return (
    <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
-      <Grid item className={classes.content}>
+      <Grid className={classes.content}>
        <Typography variant="h1" align="center">
          Uh oh, it looks like your node is not connected.
        </Typography>
      </Grid>
-      <Grid item className={classes.content}>
+      <Grid className={classes.content}>
        <Typography align="center">
          Please check your node status to fix the problem. You can also check out the{' '}
          <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
@@ -47,7 +46,7 @@ export default function TroubleshootConnectionCard(): ReactElement {
          .
        </Typography>
      </Grid>
-      <Grid item className={classes.content}>
+      <Grid className={classes.content}>
        <Typography align="center">
          <Button
            component={Link}
@@ -1,4 +1,4 @@
-import { CircularProgress, Grid } from '@material-ui/core'
+import { CircularProgress, Grid } from '@mui/material'
 import { ReactElement } from 'react'

 export function Waiting(): ReactElement {
@@ -1,14 +1,45 @@
-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 DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import FormHelperText from '@material-ui/core/FormHelperText'
-import Input from '@material-ui/core/Input'
 import { BZZ, TransactionId } from '@ethersphere/bee-js'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+import FormHelperText from '@mui/material/FormHelperText'
+import Input from '@mui/material/Input'
 import { useSnackbar } from 'notistack'
-import { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(theme => ({
+  link: {
+    color: '#dd7700',
+    textDecoration: 'underline',
+    '&:hover': {
+      textDecoration: 'none',
+
+      '@media (hover: none)': {
+        textDecoration: 'none',
+      },
+    },
+  },
+  buttonSelected: {
+    color: theme.palette.secondary.main,
+    backgroundColor: 'white',
+    '&:hover': {
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+      '@media (hover: none)': {
+        color: theme.palette.secondary.main,
+        backgroundColor: 'white',
+      },
+    },
+  },
+  buttonUnselected: {
+    color: theme.palette.secondary.main,
+    backgroundColor: 'white',
+  },
+}))

 interface Props {
  successMessage: string
@@ -31,6 +62,8 @@ export default function WithdrawDepositModal({
  action,
  icon,
 }: Props): ReactElement {
+  const { classes } = useStyles()
+
  const [open, setOpen] = useState(false)
  const [amount, setAmount] = useState('')
  const [amountToken, setAmountToken] = useState<BZZ | null>(null)
@@ -54,7 +87,8 @@ export default function WithdrawDepositModal({
      setOpen(false)
      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
    } catch (e) {
-      console.error(e) // eslint-disable-line
+      // eslint-disable-next-line no-console
+      console.error(e)
      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
    }
  }
@@ -77,7 +111,7 @@ export default function WithdrawDepositModal({

  return (
    <div>
-      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon} className={classes.buttonSelected}>
        {label}
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -6,8 +6,11 @@ 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 GITHUB_BEE_DESKTOP_URL = 'https://github.com/ethersphere/bee-desktop.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'
+export const MIN_STAMP_DEPTH = 17
+export const MAX_STAMP_DEPTH = 255
@@ -1,6 +1,7 @@
 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'
@@ -22,7 +23,7 @@ export default function DepositModal(): ReactElement {
          throw new Error('Bee URL is not valid')
        }

-        const transactionHash = await beeApi.depositTokens(amount)
+        const transactionHash = await beeApi.depositBZZToChequebook(amount)
        refresh()

        return transactionHash
@@ -1,6 +1,7 @@
 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'
@@ -1,6 +1,7 @@
 import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 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'
@@ -22,7 +23,7 @@ export default function WithdrawModal(): ReactElement {
          throw new Error('Bee URL is not valid')
        }

-        const transactionHash = await beeApi.withdrawTokens(amount)
+        const transactionHash = await beeApi.withdrawBZZFromChequebook(amount)
        refresh()

        return transactionHash
@@ -1,5 +1,6 @@
 import { AllSettlements, Bee, BZZ, LastCashoutActionResponse, PeerBalance, Settlements } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
+
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'

 interface UseAccountingHook {
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
+
 import { GITHUB_REPO_URL } from '../constants'
 import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'

@@ -21,6 +22,8 @@ export interface NewDesktopVersionHook {
  newBeeDesktopVersion: string
 }

+const REACHABILITY_CHECK_INTERVAL_MS = 10_000
+
 export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
  const [reachable, setReachable] = useState(false)
  const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
@@ -30,6 +33,9 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk

  useEffect(() => {
    if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+
      return
    }

@@ -45,32 +51,25 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
    }

    runReachabilityCheck()
-    const interval = setInterval(runReachabilityCheck, 10_000)
+    const interval = setInterval(runReachabilityCheck, REACHABILITY_CHECK_INTERVAL_MS)
+
+    axios
+      .get(`${desktopUrl}/info`)
+      .then(res => {
+        setBeeDesktopVersion(res.data?.version)
+        setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+        setError(null)
+      })
+      .catch(e => {
+        setError(e)
+      })
+      .finally(() => {
+        setLoading(false)
+      })

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

@@ -0,0 +1,33 @@
+import { IconButton } from '@mui/material'
+import { closeSnackbar, useSnackbar } from 'notistack'
+import { useState } from 'react'
+import CloseLineIcon from 'remixicon-react/CloseLineIcon'
+
+export function useClipboardCopy(value: string) {
+  const { enqueueSnackbar } = useSnackbar()
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+    } catch {
+      enqueueSnackbar(`Failed to copy text`, {
+        variant: 'error',
+        action: key => (
+          <IconButton onClick={() => closeSnackbar(key)} size="small" color="inherit">
+            <CloseLineIcon fontSize="small" />
+          </IconButton>
+        ),
+      })
+    }
+  }
+
+  const tooltipCloseHandler = () => setCopied(false)
+
+  return {
+    copied,
+    handleCopy,
+    tooltipCloseHandler,
+  }
+}
@@ -1,19 +1,21 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import App from './App'
-import './index.css'
 import reportWebVitals from './reportWebVitals'

-const desktopEnabled = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true'
-const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
-const beeApiUrl = process.env.REACT_APP_BEE_HOST
-const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+import './index.css'

-ReactDOM.render(
+const desktopEnabled = import.meta.env.VITE_BEE_DESKTOP_ENABLED === 'true'
+const desktopUrl = import.meta.env.VITE_BEE_DESKTOP_URL
+const beeApiUrl = import.meta.env.VITE_BEE_HOST
+const defaultRpcUrl = import.meta.env.VITE_DEFAULT_RPC_URL
+
+const root = createRoot(document.getElementById('root') as HTMLElement)
+root.render(
  <React.StrictMode>
    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
  </React.StrictMode>,
-  document.getElementById('root'),
 )

 // If you want to start measuring performance in your app, pass a function
@@ -1,8 +1,10 @@
-import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { Button, CircularProgress, Container, IconButton } from '@mui/material'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
 import ErrorBoundary from '../components/ErrorBoundary'
 import { Flex } from '../components/Flex'
 import SideBar from '../components/SideBar'
@@ -10,20 +12,19 @@ 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({
-    content: {
-      backgroundColor: theme.palette.background.default,
-      minHeight: '100vh',
-    },
+const useStyles = makeStyles()(theme => ({
+  content: {
+    backgroundColor: theme.palette.background.default,
+    minHeight: '100vh',
+  },

-    fileManagerOn: {
-      padding: '0px',
-    },
-  }),
-)
+  fileManagerOn: {
+    padding: '0px !important',
+    margin: '0px !important',
+    maxWidth: '100% !important',
+  },
+}))

 interface Props {
  children?: ReactElement
@@ -34,7 +35,7 @@ const Dashboard = (props: Props): ReactElement => {
  const location = useLocation()

  const isFileManagerOn = location.pathname.startsWith('/filemanager')
-  const classes = useStyles()
+  const { classes } = useStyles()

  const { isLoading } = useContext(BeeContext)
  const { isDesktop, desktopUrl } = useContext(SettingsContext)
@@ -49,7 +50,7 @@ const Dashboard = (props: Props): ReactElement => {
    }

    if (newBeeDesktopVersion !== '') {
-      enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
+      enqueueSnackbar(`There is new Swarm Desktop version ${newBeeDesktopVersion}!`, {
        variant: 'warning',
        preventDuplicate: true,
        key: 'desktopNewVersion',
@@ -6,10 +6,6 @@
  background: rgb(33, 33, 33);
  height: 60px;
  padding: 10px 16px;
-
-  &.is-loading {
-    filter: blur(1px);
-  }
 }

 .fm-admin-status-bar-left {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
OpenCode	29b138346e	fix: adapt redistribution feature for v0.35.1 - Use @mui/material import in redistribution page - Configure pnpm workspace build script approvals	2026-06-15 09:55:16 +00:00
woggioni	b5b0d37e94	added new page with node redistribution statistics	2026-06-15 09:47:25 +00:00
bee-worker	b3137fbef1	chore(master): release 0.35.1 (#732 ) * chore(master): release 0.35.1 * docs: update changelog.md for v0.53.1 bug fixes --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>	2026-04-10 11:25:29 +02:00
Ferenc Sárai	e6f882d7e1	fix: for upcoming v0.53.1 (#731 ) * fix: swap error caused by invalid id and batchcount * fix: enhance creation messages for admin drive and user drives (#238) * fix: enhance creation messages for admin drive and user drives * fix: update creation message to indicate longer processing time * fix: identity and wallet creation (#240) * fix: asset preview types * fix: fm search unicode text * fix: feed identity and stamp usage * fix: ui display changes (#239) * fix: ui layout changes * fix: stamp buy and dilute (#242) fix: vite polyfill warning for stream refactor: stamp depth and amount validation * fix: spdv-917 (#243) * fix: spdv-917 * refactor: spdv-917 * fix: add syncing message for Bee node and update page state handling spdv-955 (#244) * fix: spdv-1037 (#245) * fix: spdv-1038 (#246) * fix: spdv-1038 * refactor: spdv-1038 * fix: validate stamp before every upgrade click (#247) * fix: validate stamp before every upgrade click --------- Co-authored-by: Roland Seres <roland.seres90@gmail.com> * fix: use tochecksum() and toplurbigint() for ethers v6 compatibility (#248) --------- Co-authored-by: Balint Ujvari <balint.ujvari@solarpunk.buzz> Co-authored-by: Bálint Ujvári <58116288+bosi95@users.noreply.github.com> Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com> Co-authored-by: Roland Seres <roland.seres90@gmail.com>	2026-04-10 10:59:20 +02:00
bee-worker	eda0529dfd	chore(master): release 0.35.0 (#728 ) * chore(master): release 0.35.0 * fix: update changelog with new features and bug fixes for version 0.35.0 --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>	2026-04-02 15:30:25 +02:00
Ferenc Sárai	cb5adfe031	feat: sync and update with all changes from solar-punk-ltd fork (#730 ) * fix: swap error caused by invalid id and batchcount * fix: enhance creation messages for admin drive and user drives * fix: identity and wallet creation * fix: asset preview types * fix: fm search unicode text * fix: feed identity and stamp usage * fix: ui display changes * fix: stamp buy and dilute * fix: vite polyfill warning for stream * fix: standard mode postage stamp purchase reserves incorrect size and duration * fix: add syncing message for Bee node and update page state handling * refactor: stamp depth and amount validation --------- Co-authored-by: Balint Ujvari <balint.ujvari@solarpunk.buzz> Co-authored-by: Bálint Ujvári <58116288+bosi95@users.noreply.github.com> Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>	2026-04-02 14:53:20 +02:00
Ferenc Sárai	4848b5be97	fix: remove cross-env from prepublishOnly script	2026-03-20 18:13:06 +01:00
Ferenc Sárai	becb87377e	fix: add workflow_dispatch trigger to npm publish workflow	2026-03-20 17:58:55 +01:00
bee-worker	f149f86155	chore(master): release 0.34.0 (#727 ) * chore(master): release 0.34.0 * fix: correct version number in package.json and update changelog * fix: remove packageManager field from package.json --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>	2026-03-20 17:51:07 +01:00
Ferenc Sárai	37ab8fedaa	fix: add --no-git-checks to pnpm publish command	2026-03-20 17:08:38 +01:00
bee-worker	688a95a454	chore(master): release 0.34.0 (#723 )	2026-03-20 16:57:31 +01:00
Balint Ujvari	d0922eb9a4	chore: set max commit header length	2026-03-20 16:02:17 +01:00
rolandlor	a7e42053ae	fix: spdv-1007 cost values correcting (#234 ) * fix: spdv-1007 * refactor: spdv-1007 * refactor: spdv-1007	2026-03-20 16:02:17 +01:00
Bálint Ujvári	e0280ead14	chore: update fm-lib version (#233 )	2026-03-20 16:02:17 +01:00
Bálint Ujvári	855a017033	fix: filemanager state handling (#232 ) * fix: filemanager state handling * refactor: fm provider and fm page * fix: detect bee warmup and wait more for syncing * refactor: optimize bee provider to avoid rerenders --------- Co-authored-by: Roland Seres <roland.seres90@gmail.com>	2026-03-20 16:02:17 +01:00
rolandlor	55e7879849	fix: spdv-934 (#231 )	2026-03-20 16:02:17 +01:00
rolandlor	e1fdd52676	fix: spdv-963 - Expired admin drive upgrading handling (#230 ) * fix: spdv-963 * refactor: spdv-963	2026-03-20 16:02:17 +01:00
Ferenc Sárai	db52e4471a	fix: use uploadFile for single files to support long filenames and reafactor for linter (#228 )	2026-03-20 16:02:17 +01:00
Bálint Ujvári	a56a5c3ed8	fix: reflect file rename immediately (#227 )	2026-03-20 16:02:17 +01:00
Bálint Ujvári	3031d54272	fix: buy stamp values display (#226 ) fix: withdraw and deposit buttons style fix: upload history text align fix: buy stamp values display	2026-03-20 16:02:17 +01:00
Ferenc Sárai	ae63615c7c	fix: update documentation message for file access clarification (#221 ) * fix: update documentation message for file access clarification * fix(ui): upload message only for upload	2026-03-20 16:02:17 +01:00
rolandlor	fa8a26e80d	feat: spdv-995 (#225 )	2026-03-20 16:02:17 +01:00
rolandlor	3c4d618cc8	fix: spdv-973	2026-03-20 16:02:17 +01:00
Bálint Ujvári	e8e01c054a	fix: download and upload files (#223 ) * fix: download for unknown mime types * fix: async process two files from the queue * refactor: upload functions	2026-03-20 16:02:17 +01:00
Balint Ujvari	76bf2211ca	fix: dockerfile build and use compose	2026-03-20 16:02:17 +01:00
rolandlor	220618f19b	fix: spdv-914 - Modals are partially cut off in File Manager on Windows (Chrome) (#219 ) * fix: spdv-914 * refactor: spdv-914-fix * refactor: spdv-914-fix	2026-03-20 16:02:17 +01:00
Bálint Ujvári	8992c189fd	fix: upload q and drive size error (#220 ) * refactor: usetransfers hook functions * refactor: bulk actions code style and readability * fix: use upload q inflight size for subsequent uploads * refactor: runUploadQueue execution	2026-03-20 16:02:17 +01:00
Ferenc Sárai	bc2c0addbb	fix: correct misleading update warning message for desktop version (#218 )	2026-03-20 16:02:17 +01:00
Ferenc Sárai	b58f01cc2b	fix: add error handling and ui notifications for download failures (#217 ) * fix: add error handling and ui notifications for download failures * fix: refactor error handling for download failures	2026-03-20 16:02:17 +01:00
Bálint Ujvári	7e05a56073	fix: cannot forget expired drives (#214 ) * fix: forget expired drives	2026-03-20 16:02:17 +01:00
rolandlor	ad8c8f18eb	fix: spdv-986 [commit: `519c411d`] - Admin drive stucks in "in progress" state and the already existing admin drives are not listed on the initial modal (#215 ) * fix: spdv-986 * refactor: spdv-986	2026-03-20 16:02:17 +01:00
Bálint Ujvári	308ec3dcc0	fix: use upload and download abort signals (#212 ) * fix: use upload and download abort signals * fix: progress trackers chore: update fm-lib and bee-js * chore: bump-up fm-lib version	2026-03-20 16:02:17 +01:00
rolandlor	e00918b192	fix: spdv-971 (#211 ) * fix: spdv-971 * fix: spdv-971	2026-03-20 16:02:17 +01:00
Ferenc Sárai	3ff645cab1	feat: add image opening functionality to DownloadActionBar (#725 ) * feat: add image opening functionality to DownloadActionBar and Share components --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2026-03-05 16:51:09 +01:00
Ferenc Sárai	fff94d9071	fix(rpc): ensure 0x prefix for recipient in sendBzzTransaction and add tests (#722 ) * fix(rpc): ensure 0x prefixed recipient in sendBzzTransaction and add tests * fix(tests): move rpc spec to tests/unit after rebase to master	2026-03-05 10:28:29 +01:00
Ferenc Sárai	7382da8595	fix(sidebar): use swarm-desktop GitHub link when running in desktop mode (#724 )	2026-03-05 10:27:40 +01:00
Bálint Ujvári	519c411db0	feat: sync and update with all changes from fork (#720 ) * feat: sync and update with all changes from fork * refactor: extract clipboard copy logic into custom hook * fix: correct spelling of DEFAULT_REFRESH_FREQUENCY_MS in Stamps and WalletBalance providers * refactor(ui-tests): replace fixed sleeps with condition-based waits * fix: handle null values for size and granteeCount in infoGroups * fix(lint): add newline at end of file in useClipboardCopy hook * fix(ui-tests): page.goto URL * refactor: update import paths for useClipboardCopy --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>	2026-03-02 11:34:39 +01:00
				`@@ -0,0 +1 @@`
				`pnpm run lint && pnpm run check:types && pnpm run depcheck`