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>

.babelrc.js

@@ -0,0 +1,20 @@
+module.exports = api => {
+  api.cache(true)
+
+  return {
+    presets: [
+      ['@babel/preset-env', { targets: { node: 'current' }, modules: 'commonjs' }],
+      '@babel/preset-typescript',
+      ['@babel/preset-react', { runtime: 'automatic' }],
+    ],
+    plugins: [
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+        },
+      ],
+    ],
+  }
+}

.depcheckrc.json

@@ -0,0 +1,18 @@
+{
+  "ignores": [
+    "@types/*",
+    "@commitlint/*",
+    "@babel/*",
+    "@eslint/*",
+    "@eslint/*",
+    "eslint*",
+    "env-paths",
+    "husky",
+    "jest-environment-jsdom",
+    "open",
+    "rimraf",
+    "sass",
+    "ts-node",
+    "@vitejs/plugin-react"
+  ]
+}

.dockerignore

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

.env.development

@@ -1,7 +1,6 @@
-PORT=3001
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_ETHERSCAN_HOST=etherscan.io
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+PORT=3002
+VITE_BEE_DESKTOP_URL=http://localhost:3054
+VITE_FORMBRICKS_ENV_ID=
+VITE_FORMBRICKS_APP_URL=
+VITE_DEFAULT_RPC_URL=
+VITE_BEE_DESKTOP_ENABLED=

.env.production

@@ -1,6 +0,0 @@
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_ETHERSCAN_HOST=etherscan.io
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

.eslintrc

@@ -1,94 +0,0 @@
-{
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended"
-  ],
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2018
-  },
-  "plugins": ["jest"],
-  "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
-      }
-    }
-  ]
-}

.github/dependabot.yml

@@ -0,0 +1,13 @@
+# See config in https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Enable version updates for 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 pnpm-lock.yaml is updated)
+    versioning-strategy: increase

.github/semantic.yml

@@ -0,0 +1,2 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: true

.github/workflows/check.yaml

@@ -14,38 +14,72 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [24.x]
+
+    env:
+      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 }}
 
-      ## Try getting the node modules from cache, if failed npm ci
-      - uses: actions/cache@v2
-        id: cache-npm
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
         with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-
+            ${{ runner.os }}-pnpm-
 
-      - name: Install npm deps
-        if: steps.cache-npm.outputs.cache-hit != 'true'
-        run: npm ci
+      - 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
-      #   env:
-      #     CI: true
+      - name: Code linting
+        run: pnpm run lint
+        env:
+          CI: true
+
+      - name: Dependency check
+        run: pnpm run depcheck
+
+      - name: Types check
+        run: pnpm run check:types
 
       - name: Build
-        run: npm run build
+        run: pnpm run build
+
+      - name: Build Component
+        run: pnpm run build:component
+
+      - name: Create preview
+        uses: ethersphere/swarm-actions/pr-preview@v1
+        continue-on-error: true
+        with:
+          bee-url: https://unlimited.gateway.ethswarm.org
+          token: ${{ secrets.GHA_PAT_BASIC }}
+          error-document: index.html
+          headers: '${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}'
+
+      - name: Upload to testnet
+        uses: ethersphere/swarm-actions/upload-dir@v1
+        continue-on-error: true
+        with:
+          index-document: index.html
+          error-document: index.html
+          dir: ./build
+          bee-url: https://api.gateway.testnet.ethswarm.org

.github/workflows/publish_npmjs.yaml

@@ -1,20 +1,39 @@
-# After new release is published on github, publish it to npmjs
-name: Publish on npmjs
-
+name: Publish on npm
 on:
+  workflow_dispatch:
   release:
     types: [published]
 
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   publish:
     runs-on: ubuntu-latest
+    env:
+      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: 14
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
           registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+      - 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 publish --provenance --access public --no-git-checks

.github/workflows/publish_pages.yaml

@@ -0,0 +1,40 @@
+# After new release is published on github, publish it to npmjs
+name: Publish the project to Github Pages
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    env:
+      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'
+      - 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
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build

.github/workflows/release_github.yaml

@@ -11,10 +11,10 @@ jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
-      - uses: GoogleCloudPlatform/release-please-action@v2
+      - uses: GoogleCloudPlatform/release-please-action@v3
         id: release
         with:
-          token: ${{ secrets.REPO_GHA_PAT }}
+          token: ${{ secrets.GHA_PAT_BASIC }}
           release-type: node
           package-name: bee-dashboard
           bump-minor-pre-major: true

.github/workflows/tests.yaml

@@ -12,34 +12,35 @@ jobs:
   tests:
     runs-on: ubuntu-latest
 
+    env:
+      VITE_FORMBRICKS_ENV_ID: ${{ secrets.VITE_FORMBRICKS_ENV_ID }}
+      VITE_FORMBRICKS_APP_URL: ${{ secrets.VITE_FORMBRICKS_APP_URL }}
+
     strategy:
       matrix:
-        node-version: [14.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 }}
-
-      ## Try getting the node modules from cache, if failed npm ci
-      - uses: actions/cache@v2
-        id: cache-npm
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
         with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-
+            ${{ runner.os }}-pnpm-
 
-      - name: Install npm deps
-        if: steps.cache-npm.outputs.cache-hit != 'true'
-        run: npm ci
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run tests
-        run: npm run test
-
-
+        run: pnpm run test

.gitignore

@@ -10,6 +10,8 @@
 
 # production
 /build
+/lib
+.env
 
 # misc
 .DS_Store
@@ -21,3 +23,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/**.log
+
+
+settings.json
+*.tsbuildinfo
+
+**.tgz
+
+api-key.txt
+tmp/

.husky/commit-msg

@@ -0,0 +1 @@
+pnpm exec commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm run lint && pnpm run check:types && pnpm run depcheck

.nvmrc

@@ -0,0 +1 @@
+v24.0.0

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+yarn.lock
+package-lock.json
+dist/
+pnpm-lock.yaml
+**/test-data/
+**.html
+**.svg
+build/
+lib/
+**/assets/*

CHANGELOG.md

@@ -1,5 +1,640 @@
 # 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)
+
+
+### Bug Fixes
+
+* file-manager and swarm-desktop bugs ([#718](https://github.com/ethersphere/bee-dashboard/issues/718)) ([9e1036a](https://github.com/ethersphere/bee-dashboard/commit/9e1036ac297842055bb91512987b684552b70ca5))
+
+## [0.33.4](https://github.com/ethersphere/bee-dashboard/compare/v0.33.3...v0.33.4) (2026-01-26)
+
+
+### Bug Fixes
+
+* file-manager and swarm-desktop bugs ([#714](https://github.com/ethersphere/bee-dashboard/issues/714)) ([0d5138f](https://github.com/ethersphere/bee-dashboard/commit/0d5138f5bc816cece0324793166ec84ef2147679))
+
+## [0.33.3](https://github.com/ethersphere/bee-dashboard/compare/v0.33.2...v0.33.3) (2025-11-17)
+
+
+### Bug Fixes
+
+* add formbricks environment variables to workflow files ([#709](https://github.com/ethersphere/bee-dashboard/issues/709)) ([6d28653](https://github.com/ethersphere/bee-dashboard/commit/6d28653bb0b731a16d8adabbb9a8c9074387f769))
+
+## [0.33.2](https://github.com/ethersphere/bee-dashboard/compare/v0.33.1...v0.33.2) (2025-11-14)
+
+
+### Bug Fixes
+
+* clarify installation instructions in README ([#707](https://github.com/ethersphere/bee-dashboard/issues/707)) ([82e7c78](https://github.com/ethersphere/bee-dashboard/commit/82e7c78a818b46031b040f92e9a9491003c9bd92))
+
+## [0.33.1](https://github.com/ethersphere/bee-dashboard/compare/v0.33.0...v0.33.1) (2025-11-13)
+
+
+### Bug Fixes
+
+* put back external wallet balance context ([#704](https://github.com/ethersphere/bee-dashboard/issues/704)) ([096522a](https://github.com/ethersphere/bee-dashboard/commit/096522aa8a2f11afb0061a6fedbae241967408ef))
+
+## [0.33.0](https://github.com/ethersphere/bee-dashboard/compare/v0.32.0...v0.33.0) (2025-11-12)
+
+
+### Features
+
+* bee-js revamp ([#690](https://github.com/ethersphere/bee-dashboard/issues/690)) ([1249c0d](https://github.com/ethersphere/bee-dashboard/commit/1249c0df71baec331cb3f2661e0a08648d924406))
+* FileManager ([#98](https://github.com/ethersphere/bee-dashboard/issues/98)) ([#703](https://github.com/ethersphere/bee-dashboard/issues/703)) ([5bfe2a0](https://github.com/ethersphere/bee-dashboard/commit/5bfe2a033118dde43b4cd221830741a427882922))
+
+## [0.32.0](https://github.com/ethersphere/bee-dashboard/compare/v0.31.0...v0.32.0) (2025-02-12)
+
+
+### Features
+
+* vod display ([#686](https://github.com/ethersphere/bee-dashboard/issues/686)) ([bcd3d50](https://github.com/ethersphere/bee-dashboard/commit/bcd3d50b4209a4f66a259b8a3f6ea5ffd908471f))
+
+## [0.31.0](https://github.com/ethersphere/bee-dashboard/compare/v0.30.0...v0.31.0) (2025-01-13)
+
+
+### Features
+
+* remove experimental FDP menu item ([#687](https://github.com/ethersphere/bee-dashboard/issues/687)) ([a6125b3](https://github.com/ethersphere/bee-dashboard/commit/a6125b3d0b0b680a9fa61a8edcd75b2ae6c153e0))
+
+## [0.30.0](https://github.com/ethersphere/bee-dashboard/compare/v0.29.0...v0.30.0) (2024-11-25)
+
+
+### Features
+
+* add experimental fdp ([#681](https://github.com/ethersphere/bee-dashboard/issues/681)) ([d0c94b7](https://github.com/ethersphere/bee-dashboard/commit/d0c94b7316ea2b139bddc5481132ea7de7cb840d))
+* update map data ([#684](https://github.com/ethersphere/bee-dashboard/issues/684)) ([fbb2ed8](https://github.com/ethersphere/bee-dashboard/commit/fbb2ed8a576f3519883e71382b7f4e8505fbe139))
+
+
+### Bug Fixes
+
+* allow changing api url ([#676](https://github.com/ethersphere/bee-dashboard/issues/676)) ([6294bb0](https://github.com/ethersphere/bee-dashboard/commit/6294bb0a7be6b9b82354c42da8c84e767fad899e))
+* explicitly define type 0 transaction ([#674](https://github.com/ethersphere/bee-dashboard/issues/674)) ([63f3380](https://github.com/ethersphere/bee-dashboard/commit/63f338075b919cb70d79665c3d86537f2ac1d2e9))
+
+## [0.29.0](https://github.com/ethersphere/bee-dashboard/compare/v0.28.0...v0.29.0) (2024-07-17)
+
+
+### Features
+
+* clarify labels and syncing ([#670](https://github.com/ethersphere/bee-dashboard/issues/670)) ([01b1b39](https://github.com/ethersphere/bee-dashboard/commit/01b1b39c42cc5b68a0132c3696c3c42a27ea2ee4))
+* polish app ([#669](https://github.com/ethersphere/bee-dashboard/issues/669)) ([8558860](https://github.com/ethersphere/bee-dashboard/commit/8558860f0a3baa82c31c091a44c78bb8e97de70d))
+
+
+### Bug Fixes
+
+* clarify withdraw and deposit message ([#654](https://github.com/ethersphere/bee-dashboard/issues/654)) ([b4ebfc7](https://github.com/ethersphere/bee-dashboard/commit/b4ebfc7c3fd449807db47fa25763df464cc45618))
+
+## [0.28.0](https://github.com/ethersphere/bee-dashboard/compare/v0.27.0...v0.28.0) (2024-06-18)
+
+
+### Features
+
+* upgrade bee-js to 7.0.3 ([#666](https://github.com/ethersphere/bee-dashboard/issues/666)) ([e9ebe33](https://github.com/ethersphere/bee-dashboard/commit/e9ebe33d51aa525921eacfad683577605e591531))
+
+## [0.27.0](https://github.com/ethersphere/bee-dashboard/compare/v0.26.2...v0.27.0) (2024-06-11)
+
+
+### Features
+
+* add redeem shortcut to sidebar ([999399f](https://github.com/ethersphere/bee-dashboard/commit/999399fb08c1a47a671ba0ad50409624654a1082))
+
+## [0.26.2](https://github.com/ethersphere/bee-dashboard/compare/v0.26.1...v0.26.2) (2024-06-05)
+
+
+### Bug Fixes
+
+* merge version and health check ([#662](https://github.com/ethersphere/bee-dashboard/issues/662)) ([cae90c1](https://github.com/ethersphere/bee-dashboard/commit/cae90c1a82e16ee8c7908c43e2fd17f7130eb89d))
+
+## [0.26.1](https://github.com/ethersphere/bee-dashboard/compare/v0.26.0...v0.26.1) (2024-06-03)
+
+
+### Bug Fixes
+
+* add bee version ([#659](https://github.com/ethersphere/bee-dashboard/issues/659)) ([a5d4ecf](https://github.com/ethersphere/bee-dashboard/commit/a5d4ecf045f691b9059fcca925d0f30675d12db0))
+
+## [0.26.0](https://github.com/ethersphere/bee-dashboard/compare/v0.25.0...v0.26.0) (2024-06-03)
+
+
+### Features
+
+* display effective capacity ([#643](https://github.com/ethersphere/bee-dashboard/issues/643)) ([5871223](https://github.com/ethersphere/bee-dashboard/commit/58712232031e084195adf92c40cd41a98eaf16cf))
+* merge api ([#658](https://github.com/ethersphere/bee-dashboard/issues/658)) ([8cbd812](https://github.com/ethersphere/bee-dashboard/commit/8cbd812a2c04706f8f46de5355209b96783723b9))
+* show syncing info ([#647](https://github.com/ethersphere/bee-dashboard/issues/647)) ([cc91f1d](https://github.com/ethersphere/bee-dashboard/commit/cc91f1d64cd48a845fa9fa45ec4b58335eab3893))
+* wait for upload sync ([#649](https://github.com/ethersphere/bee-dashboard/issues/649)) ([79bb315](https://github.com/ethersphere/bee-dashboard/commit/79bb31540196b74f3bc0220b8c844fbd5aaaf488))
+
+
+### Bug Fixes
+
+* correct the bee version detection ([#645](https://github.com/ethersphere/bee-dashboard/issues/645)) ([b3f521c](https://github.com/ethersphere/bee-dashboard/commit/b3f521ca2055b91d7adddf96563cca6bf92e3d59))
+
+## [0.25.0](https://github.com/ethersphere/bee-dashboard/compare/v0.24.1...v0.25.0) (2023-12-04)
+
+
+### Features
+
+* improve topup and dilute ux ([0c2ac0c](https://github.com/ethersphere/bee-dashboard/commit/0c2ac0c454ad02200a2762958c5bc5abbdfe8005))
+* update postage stamp creation screen ([#641](https://github.com/ethersphere/bee-dashboard/issues/641)) ([4f9abc6](https://github.com/ethersphere/bee-dashboard/commit/4f9abc614eedd5ce3a279a4686cc832c4d1e62c7))
+
+
+### Bug Fixes
+
+* add missing stamp labels and fix inputs ([#634](https://github.com/ethersphere/bee-dashboard/issues/634)) ([7fa1cb0](https://github.com/ethersphere/bee-dashboard/commit/7fa1cb0ccf9f2a32263e84aa76732ebd2fc7fb22))
+* put stamp input error handling in state ([#640](https://github.com/ethersphere/bee-dashboard/issues/640)) ([20a051b](https://github.com/ethersphere/bee-dashboard/commit/20a051b6589c22397a7305d722a56df0604ff7a4))
+
+## [0.24.1](https://github.com/ethersphere/bee-dashboard/compare/v0.24.0...v0.24.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* update `swap-endpoint` to `blockchain-rpc-endpoint` ([#628](https://github.com/ethersphere/bee-dashboard/issues/628)) ([bce93ce](https://github.com/ethersphere/bee-dashboard/commit/bce93ce3cdc1ef4b1f50fcf274591ba00726be16))
+
+## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
+
+
+### Features
+
+* add stamp dilute and topup ([#619](https://github.com/ethersphere/bee-dashboard/issues/619)) ([055a300](https://github.com/ethersphere/bee-dashboard/commit/055a3002b303df45c7010ef4d365e14b979e9084))
+
+## [0.23.0](https://github.com/ethersphere/bee-dashboard/compare/v0.22.0...v0.23.0) (2023-02-21)
+
+
+### Features
+
+* add staking for full nodes ([#590](https://github.com/ethersphere/bee-dashboard/issues/590)) ([fac72b1](https://github.com/ethersphere/bee-dashboard/commit/fac72b1299353c104231aa038c1bab9df78c1355))
+* upgrade bee-js to 5.2.0 ([#611](https://github.com/ethersphere/bee-dashboard/issues/611)) ([e215c61](https://github.com/ethersphere/bee-dashboard/commit/e215c61ea1619fc388fe8b1904d160b04a1a5c0d))
+
+## [0.22.0](https://github.com/ethersphere/bee-dashboard/compare/v0.21.1...v0.22.0) (2023-01-19)
+
+
+### Features
+
+* add node connecting status ([#603](https://github.com/ethersphere/bee-dashboard/issues/603)) ([90f9f91](https://github.com/ethersphere/bee-dashboard/commit/90f9f91ddbefb47b40c7e567125972b800d81972))
+
+## [0.21.1](https://github.com/ethersphere/bee-dashboard/compare/v0.21.0...v0.21.1) (2022-12-21)
+
+
+### Bug Fixes
+
+* do not require chequebook funding ([#599](https://github.com/ethersphere/bee-dashboard/issues/599)) ([42b7f08](https://github.com/ethersphere/bee-dashboard/commit/42b7f080b00a94f068d2fad4779d02ddcf58e27d))
+
+## [0.21.0](https://github.com/ethersphere/bee-dashboard/compare/v0.20.2...v0.21.0) (2022-12-01)
+
+
+### Features
+
+* add prerequisite checks before swap ([#588](https://github.com/ethersphere/bee-dashboard/issues/588)) ([4e564dd](https://github.com/ethersphere/bee-dashboard/commit/4e564dd5c08b938c95f07818bc60957a7df4f5bb))
+* add starting state to sidebar indicator ([#587](https://github.com/ethersphere/bee-dashboard/issues/587)) ([848e61a](https://github.com/ethersphere/bee-dashboard/commit/848e61a7a0fc9b31cae4f603473b37d467f9e914))
+
+
+### Bug Fixes
+
+* add loading state to info page ([#584](https://github.com/ethersphere/bee-dashboard/issues/584)) ([0246904](https://github.com/ethersphere/bee-dashboard/commit/02469046b05512d6617d8b21ca93b41d6a8a6827))
+* always consider user input when performing swap ([#572](https://github.com/ethersphere/bee-dashboard/issues/572)) ([ec8fdf0](https://github.com/ethersphere/bee-dashboard/commit/ec8fdf0315ed7ee75c7612780c602cba49a2321d))
+* always set rpc to newly provided value in desktop ([#591](https://github.com/ethersphere/bee-dashboard/issues/591)) ([b798fa0](https://github.com/ethersphere/bee-dashboard/commit/b798fa0e68b367fe324ef64507b1405b642da6e0))
+* change status page depending on desktop mode ([#573](https://github.com/ethersphere/bee-dashboard/issues/573)) ([a4b8e7c](https://github.com/ethersphere/bee-dashboard/commit/a4b8e7ca2596028e7c8192c92202c0361610e307))
+* change version mismatch to a warning ([#594](https://github.com/ethersphere/bee-dashboard/issues/594)) ([dc04e26](https://github.com/ethersphere/bee-dashboard/commit/dc04e26db4fe6beb9e76fad79c732794b0b7f77d))
+* fix conditional rendering for blockchain network ([#583](https://github.com/ethersphere/bee-dashboard/issues/583)) ([1ce4a47](https://github.com/ethersphere/bee-dashboard/commit/1ce4a474954a5ba4debee53b40bb66a46fb19ffc))
+* handle auth and server error during swap ([#593](https://github.com/ethersphere/bee-dashboard/issues/593)) ([665ae06](https://github.com/ethersphere/bee-dashboard/commit/665ae063fa49bc94762ea10a9098b57e95327d9c))
+* hide swap in standalone mode ([#582](https://github.com/ethersphere/bee-dashboard/issues/582)) ([9a8520e](https://github.com/ethersphere/bee-dashboard/commit/9a8520eb6fe9f40a77c4230ab79d3731ebdd4b42))
+* refresh after chequebook withdraw deposit ([#576](https://github.com/ethersphere/bee-dashboard/issues/576)) ([6936098](https://github.com/ethersphere/bee-dashboard/commit/693609810d735d1e54691b13ea0e4db33e678a53))
+
+## [0.20.2](https://github.com/ethersphere/bee-dashboard/compare/v0.20.1...v0.20.2) (2022-09-15)
+
+
+### Bug Fixes
+
+* stamp purchasing ([#551](https://github.com/ethersphere/bee-dashboard/issues/551)) ([c0456a3](https://github.com/ethersphere/bee-dashboard/commit/c0456a3bf6d541457b706670b1a757d2b1d70f10))
+
+## [0.20.1](https://github.com/ethersphere/bee-dashboard/compare/v0.20.0...v0.20.1) (2022-09-15)
+
+
+### Bug Fixes
+
+* revert bee env. variable names and add default rpc var ([#545](https://github.com/ethersphere/bee-dashboard/issues/545)) ([5295bd5](https://github.com/ethersphere/bee-dashboard/commit/5295bd5b012962846aa15ff12ca4234f0c8b37f7))
+* rpc endpoint setting ultra-light mode logic ([#547](https://github.com/ethersphere/bee-dashboard/issues/547)) ([e2dd077](https://github.com/ethersphere/bee-dashboard/commit/e2dd077118faf3b6071fc8327e37e317e0174975))
+
+## [0.20.0](https://github.com/ethersphere/bee-dashboard/compare/v0.19.3...v0.20.0) (2022-09-14)
+
+
+### Features
+
+* error reporting callback ([#530](https://github.com/ethersphere/bee-dashboard/issues/530)) ([0c74dae](https://github.com/ethersphere/bee-dashboard/commit/0c74dae4e88916cf54c3c0500b37203b865e48a7))
+
+
+### Bug Fixes
+
+* show update notifications only on non-auto-updating Swarm Desktops ([#543](https://github.com/ethersphere/bee-dashboard/issues/543)) ([528a810](https://github.com/ethersphere/bee-dashboard/commit/528a8106907ef176bcdb68b3386c2f3f9ea98a47))
+
+## [0.19.3](https://github.com/ethersphere/bee-dashboard/compare/v0.19.2...v0.19.3) (2022-08-24)
+
+
+### Bug Fixes
+
+* pass isBeeDesktop from provider to hook ([#525](https://github.com/ethersphere/bee-dashboard/issues/525)) ([677b6de](https://github.com/ethersphere/bee-dashboard/commit/677b6de0f82b02e1487420e3c08fbd19a949f97b))
+
+## [0.19.2](https://github.com/ethersphere/bee-dashboard/compare/v0.19.1...v0.19.2) (2022-08-08)
+
+
+### Bug Fixes
+
+* remove sentry ([#520](https://github.com/ethersphere/bee-dashboard/issues/520)) ([0260df6](https://github.com/ethersphere/bee-dashboard/commit/0260df61de0619202a819b79820cfbef6e3757ae))
+
+## [0.19.1](https://github.com/ethersphere/bee-dashboard/compare/v0.19.0...v0.19.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* compile types when building the library ([#516](https://github.com/ethersphere/bee-dashboard/issues/516)) ([df925b0](https://github.com/ethersphere/bee-dashboard/commit/df925b013bb02a16d308a86050ec8e0e0e361ff7))
+
+## [0.19.0](https://github.com/ethersphere/bee-dashboard/compare/v0.18.2...v0.19.0) (2022-08-03)
+
+
+### Features
+
+* add loading state to wallet balance ([#508](https://github.com/ethersphere/bee-dashboard/issues/508)) ([b9c008f](https://github.com/ethersphere/bee-dashboard/commit/b9c008f019f5bfe005d11f0208e90ca21b274e97))
+* add wallet endpoint and display blockchain name ([#492](https://github.com/ethersphere/bee-dashboard/issues/492)) ([fd11f01](https://github.com/ethersphere/bee-dashboard/commit/fd11f0166d77a89a2b350f16f9254af91441089d))
+* check whether the app runs within bee-desktop is now an environment variable ([#490](https://github.com/ethersphere/bee-dashboard/issues/490)) ([f01477e](https://github.com/ethersphere/bee-dashboard/commit/f01477ea70e6c343461cce6c1bcee3d738c076de))
+* don't display duplicate notifications with snackbar ([#488](https://github.com/ethersphere/bee-dashboard/issues/488)) ([feeca00](https://github.com/ethersphere/bee-dashboard/commit/feeca008acd523f16e7efdde2fa92ec98fde8bc9))
+* log errors to console when showing error notification  ([#489](https://github.com/ethersphere/bee-dashboard/issues/489)) ([6bfe97b](https://github.com/ethersphere/bee-dashboard/commit/6bfe97be5d69adeb13dafad2016d1c76a9d2e67c))
+* make blockchain JSON RPC configurable from settings ([#494](https://github.com/ethersphere/bee-dashboard/issues/494)) ([408b565](https://github.com/ethersphere/bee-dashboard/commit/408b565935a59759af6d3e252ceae6981fb60eb6))
+* pass isBeeDesktop as Bee Dashboard component property ([#510](https://github.com/ethersphere/bee-dashboard/issues/510)) ([4c48657](https://github.com/ethersphere/bee-dashboard/commit/4c48657fca0c22d5d4aaf220ffb278ac67001e1f))
+* reintroduce new bee version notification ([#500](https://github.com/ethersphere/bee-dashboard/issues/500)) ([f53e966](https://github.com/ethersphere/bee-dashboard/commit/f53e9664da8f4d1b6803de09f45a92493957d79d))
+* set default rpc endpoint ([#485](https://github.com/ethersphere/bee-dashboard/issues/485)) ([cba21bb](https://github.com/ethersphere/bee-dashboard/commit/cba21bb2e0e70e0ada01402d44e9ee61a55173cf))
+
+
+### Bug Fixes
+
+* correct website upload path ([#483](https://github.com/ethersphere/bee-dashboard/issues/483)) ([186d035](https://github.com/ethersphere/bee-dashboard/commit/186d0352cfda0408cf7add535d9247a85ce3796d))
+* disable swarm invitation outside of Swarm Desktop ([#497](https://github.com/ethersphere/bee-dashboard/issues/497)) ([f8390d7](https://github.com/ethersphere/bee-dashboard/commit/f8390d7eacc082a7b0a4551a3bc1572e3ce3463e))
+* handle unicode filename and website uploads ([#491](https://github.com/ethersphere/bee-dashboard/issues/491)) ([f82444f](https://github.com/ethersphere/bee-dashboard/commit/f82444f2124cad8bccead01a33cbc9f51d126acf))
+* if the node has error, disable pages that can never load ([#502](https://github.com/ethersphere/bee-dashboard/issues/502)) ([896f6e4](https://github.com/ethersphere/bee-dashboard/commit/896f6e48d988bbc0fe82a63a44bc82b035f30073))
+* new bee version notification is only shown if user bee version is detected ([#512](https://github.com/ethersphere/bee-dashboard/issues/512)) ([1be5cbd](https://github.com/ethersphere/bee-dashboard/commit/1be5cbda6de073f1e569ab92f178d815548a461b))
+
+## [0.18.2](https://github.com/ethersphere/bee-dashboard/compare/v0.18.1...v0.18.2) (2022-07-06)
+
+
+### Bug Fixes
+
+* don't link to latest release ([#477](https://github.com/ethersphere/bee-dashboard/issues/477)) ([498294e](https://github.com/ethersphere/bee-dashboard/commit/498294e227baa52c59adecf9c4cfd205061ddf75))
+* enable desktop update notifications on all platforms ([#476](https://github.com/ethersphere/bee-dashboard/issues/476)) ([33fff93](https://github.com/ethersphere/bee-dashboard/commit/33fff93cac31ec54b02f9c7d0c90c13c8d3763c7))
+
+## [0.18.1](https://github.com/ethersphere/bee-dashboard/compare/v0.18.0...v0.18.1) (2022-07-05)
+
+
+### Bug Fixes
+
+* refresh balance after dai tx ([#470](https://github.com/ethersphere/bee-dashboard/issues/470)) ([477c238](https://github.com/ethersphere/bee-dashboard/commit/477c2385b1d06da499facebf630338eb90ad22e7))
+* refresh dai after spending gas ([#468](https://github.com/ethersphere/bee-dashboard/issues/468)) ([56457eb](https://github.com/ethersphere/bee-dashboard/commit/56457eb9b989ed00c3b87555a43da7024654667d))
+* refresh gift wallet after swap ([#465](https://github.com/ethersphere/bee-dashboard/issues/465)) ([afb8c31](https://github.com/ethersphere/bee-dashboard/commit/afb8c31d9a022033cee14ff9a951f87cb992636f))
+* status checks have timeout ([#471](https://github.com/ethersphere/bee-dashboard/issues/471)) ([acee8c9](https://github.com/ethersphere/bee-dashboard/commit/acee8c9802318deb64d2bd8e701fae15c10d5fcf))
+
+## [0.18.0](https://github.com/ethersphere/bee-dashboard/compare/v0.17.0...v0.18.0) (2022-07-04)
+
+
+### Features
+
+* add postage stamp guide ([#455](https://github.com/ethersphere/bee-dashboard/issues/455)) ([fb8775d](https://github.com/ethersphere/bee-dashboard/commit/fb8775d0a7a2bb3525467cec98584009c167700f))
+* add real price calculation to swap page ([#459](https://github.com/ethersphere/bee-dashboard/issues/459)) ([a9a5d76](https://github.com/ethersphere/bee-dashboard/commit/a9a5d76e45d3a31f05f814fe6cd2c823317f1e2d))
+* add updated sidebar icons ([#407](https://github.com/ethersphere/bee-dashboard/issues/407)) ([8b3ea52](https://github.com/ethersphere/bee-dashboard/commit/8b3ea5249ee48e7a2403e00339fd51977b93fb56))
+* add upgrade guide link from medium ([#434](https://github.com/ethersphere/bee-dashboard/issues/434)) ([cfcc859](https://github.com/ethersphere/bee-dashboard/commit/cfcc859303f4fb931e07f9037a7ba0972f8fb8ba))
+* reduce the minimal dai amount for the topup ([#444](https://github.com/ethersphere/bee-dashboard/issues/444)) ([2a5c598](https://github.com/ethersphere/bee-dashboard/commit/2a5c598ece3ba5f88c53c87db52b10422a37aae7))
+* refresh frequency changes if the bee is in error state ([#409](https://github.com/ethersphere/bee-dashboard/issues/409)) ([ce44ef7](https://github.com/ethersphere/bee-dashboard/commit/ce44ef78f4d322a458c1e8dd1f5a0b87d3a45b85))
+* set title to swarm ([#413](https://github.com/ethersphere/bee-dashboard/issues/413)) ([d664400](https://github.com/ethersphere/bee-dashboard/commit/d664400a7e3427fd30c47b59ef9c0dccda061720))
+* transfer everything out of the gift wallet ([#456](https://github.com/ethersphere/bee-dashboard/issues/456)) ([7225c5c](https://github.com/ethersphere/bee-dashboard/commit/7225c5ca11a62e40f06e7b08d558b390e326bcaf))
+* ultra-light mode block not supported features that are not available in this mode ([#438](https://github.com/ethersphere/bee-dashboard/issues/438)) ([83aab3b](https://github.com/ethersphere/bee-dashboard/commit/83aab3be62d73b5a539aab8f9c2bbfad56c86bbf))
+* version check and info ([#425](https://github.com/ethersphere/bee-dashboard/issues/425)) ([8f4a4eb](https://github.com/ethersphere/bee-dashboard/commit/8f4a4ebaa951fdbbe9f697e2cb4dc34838ed5df7))
+
+
+### Bug Fixes
+
+* add guide link to bank card top up ([#439](https://github.com/ethersphere/bee-dashboard/issues/439)) ([2221d0e](https://github.com/ethersphere/bee-dashboard/commit/2221d0e7c89a9631e3d95dd71cde3eacb964f3b5))
+* add troubleshooting checks ([#435](https://github.com/ethersphere/bee-dashboard/issues/435)) ([a756eed](https://github.com/ethersphere/bee-dashboard/commit/a756eedc4995cad6c5cafd302f7d7d7d44656f6d))
+* bee data auto-refresh ([#436](https://github.com/ethersphere/bee-dashboard/issues/436)) ([4cd580c](https://github.com/ethersphere/bee-dashboard/commit/4cd580ca7f497104eb97ae5676f3d5334384f4dc))
+* change topup button ordering ([#453](https://github.com/ethersphere/bee-dashboard/issues/453)) ([56f207d](https://github.com/ethersphere/bee-dashboard/commit/56f207d6a63ee0a486a4e00770fd8342fa92a7b5))
+* change wording from deposit to top up wallet ([#440](https://github.com/ethersphere/bee-dashboard/issues/440)) ([21df01c](https://github.com/ethersphere/bee-dashboard/commit/21df01c9241bcdfd072b0f080a46823beb1a751a))
+* check desktop version only once ([#441](https://github.com/ethersphere/bee-dashboard/issues/441)) ([3986320](https://github.com/ethersphere/bee-dashboard/commit/398632001a589a20cecb4416dfd261be21e18959))
+* disable bee update button in desktop mode ([#452](https://github.com/ethersphere/bee-dashboard/issues/452)) ([c54170b](https://github.com/ethersphere/bee-dashboard/commit/c54170b18538f7d15181a87a556f7fb2954ed49d))
+* display account wallet partially while loading ([#420](https://github.com/ethersphere/bee-dashboard/issues/420)) ([f43de77](https://github.com/ethersphere/bee-dashboard/commit/f43de77294e86df4bb023cd19afe6327ace5e83c))
+* don't display buy new stamp button when already in process of buying one ([#422](https://github.com/ethersphere/bee-dashboard/issues/422)) ([807af12](https://github.com/ethersphere/bee-dashboard/commit/807af122f7743fc9d13120eef81cd3f55b51eb5a))
+* generate gift wallet is disabled if there is not enough funds ([#451](https://github.com/ethersphere/bee-dashboard/issues/451)) ([f2824b7](https://github.com/ethersphere/bee-dashboard/commit/f2824b749b950e5b401af1de2973f13ad95d0a2f))
+* info page card and map error states ([#412](https://github.com/ethersphere/bee-dashboard/issues/412)) ([b969d8c](https://github.com/ethersphere/bee-dashboard/commit/b969d8caeef8d0e6f6eb664b380228bccb498795))
+* make deposit go to top up selector page ([#419](https://github.com/ethersphere/bee-dashboard/issues/419)) ([aa99e01](https://github.com/ethersphere/bee-dashboard/commit/aa99e0153e20524c5b047e90803543cbb13bb625))
+* provider is by default null and account page redirect to provider setup ([#437](https://github.com/ethersphere/bee-dashboard/issues/437)) ([2e0eeb7](https://github.com/ethersphere/bee-dashboard/commit/2e0eeb7a1b86be091fbd4bc266aa2fcbfc271ca3))
+* remove expired stamps ([#463](https://github.com/ethersphere/bee-dashboard/issues/463)) ([eb51dbb](https://github.com/ethersphere/bee-dashboard/commit/eb51dbb090a22d398c13e355de26c229c79d4a6f))
+* replace feather icons with remix icons on swarm button ([#414](https://github.com/ethersphere/bee-dashboard/issues/414)) ([f238c43](https://github.com/ethersphere/bee-dashboard/commit/f238c433078b09ac034c4bc66a434f8a91422827))
+* sensible deposit and swap ([#448](https://github.com/ethersphere/bee-dashboard/issues/448)) ([26ce0ef](https://github.com/ethersphere/bee-dashboard/commit/26ce0efc0b5e441863d8991af6121f105f8c7981))
+* sentry trace only Bee Desktop API ([#421](https://github.com/ethersphere/bee-dashboard/issues/421)) ([7c39e27](https://github.com/ethersphere/bee-dashboard/commit/7c39e2741c87b1ca75fcb1a72a5d7c12b826e950))
+* show update notifications only on non-auto-updating Swarm Desktops ([#460](https://github.com/ethersphere/bee-dashboard/issues/460)) ([d12f86b](https://github.com/ethersphere/bee-dashboard/commit/d12f86b9fac047f7c62edaca4fa818dbac27e894))
+* text in the info page cards ([#411](https://github.com/ethersphere/bee-dashboard/issues/411)) ([5e31c21](https://github.com/ethersphere/bee-dashboard/commit/5e31c21f49e6418b3cf36a75076eff2234ab2e8c))
+* the topup urls are now under `/account` which fixes highlighting ([#424](https://github.com/ethersphere/bee-dashboard/issues/424)) ([d345059](https://github.com/ethersphere/bee-dashboard/commit/d345059048efdf7226b7bc26e6514792a0a4cbff))
+* use xDAI and xBZZ on Gnosis chain ([#454](https://github.com/ethersphere/bee-dashboard/issues/454)) ([a3c02db](https://github.com/ethersphere/bee-dashboard/commit/a3c02dbf8a063fd69f4b4c1b4ff058a35710d0bc))
+* users can now upgrade to light node if they have enough funds ([#458](https://github.com/ethersphere/bee-dashboard/issues/458)) ([8c182ca](https://github.com/ethersphere/bee-dashboard/commit/8c182cafd537e508384efcf9c52febcd47f14a67))
+
+## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)
+
+
+### Features
+
+* add account tabs ([#378](https://github.com/ethersphere/bee-dashboard/issues/378)) ([41432bc](https://github.com/ethersphere/bee-dashboard/commit/41432bc346b1b89f87489a0b38a5383b834edd62))
+* add map with peers to info page ([#398](https://github.com/ethersphere/bee-dashboard/issues/398)) ([2be9735](https://github.com/ethersphere/bee-dashboard/commit/2be9735e0c98f066afbd8c1fda27c8365b80f489))
+* gh pages deployment ([#389](https://github.com/ethersphere/bee-dashboard/issues/389)) ([2b58b30](https://github.com/ethersphere/bee-dashboard/commit/2b58b301225dba5809f0afb3849f97007123c61a))
+* improve stamp selector ([#400](https://github.com/ethersphere/bee-dashboard/issues/400)) ([0f0d72e](https://github.com/ethersphere/bee-dashboard/commit/0f0d72e7c5848559962b3020575d1b5f2d18a60e))
+* info page redesign ([#390](https://github.com/ethersphere/bee-dashboard/issues/390)) ([caea5ae](https://github.com/ethersphere/bee-dashboard/commit/caea5ae309028fef12c5cd036dcd1d264dd451e6))
+* sentry feedback form ([#388](https://github.com/ethersphere/bee-dashboard/issues/388)) ([b3028d7](https://github.com/ethersphere/bee-dashboard/commit/b3028d7893790010e417ccf091b7eb4981ed21d6))
+* sentry integration ([#385](https://github.com/ethersphere/bee-dashboard/issues/385)) ([109e07b](https://github.com/ethersphere/bee-dashboard/commit/109e07b0972309b9260db2e26a643be8562a9386))
+* sentry proxy ([#399](https://github.com/ethersphere/bee-dashboard/issues/399)) ([e966663](https://github.com/ethersphere/bee-dashboard/commit/e9666639b2df3b1586121df61a7eda24bc57766d))
+* update logo ([#401](https://github.com/ethersphere/bee-dashboard/issues/401)) ([36fc4bf](https://github.com/ethersphere/bee-dashboard/commit/36fc4bfe982b03589478acb36e5bb6ec5aff9b44))
+
+
+### Bug Fixes
+
+* all wallet flows to use ethers ([#395](https://github.com/ethersphere/bee-dashboard/issues/395)) ([80d684c](https://github.com/ethersphere/bee-dashboard/commit/80d684c1e5c74b3bdae6eca974ed3a0b7408be93))
+* change color of pins and show population instead of depth ([#402](https://github.com/ethersphere/bee-dashboard/issues/402)) ([127d44f](https://github.com/ethersphere/bee-dashboard/commit/127d44fd7ac763fd78d1eab99f10f952ba6bb1b6))
+* download preview ([#397](https://github.com/ethersphere/bee-dashboard/issues/397)) ([f38e8e1](https://github.com/ethersphere/bee-dashboard/commit/f38e8e11d6814e5246b0a7a25e32a009581a76a9))
+* map size in safari ([#404](https://github.com/ethersphere/bee-dashboard/issues/404)) ([ee864bd](https://github.com/ethersphere/bee-dashboard/commit/ee864bdbe9029184cc905f36af08fdea9431b4a8))
+
+## [0.16.0](https://github.com/ethersphere/bee-dashboard/compare/v0.15.0...v0.16.0) (2022-06-02)
+
+
+### Features
+
+* add light node upgrade top up methods ([#372](https://github.com/ethersphere/bee-dashboard/issues/372)) ([a768b4e](https://github.com/ethersphere/bee-dashboard/commit/a768b4ea0675596f6fe49771ef9d0755af00db56))
+* allow for the port to be configured ([#370](https://github.com/ethersphere/bee-dashboard/issues/370)) ([b6f138b](https://github.com/ethersphere/bee-dashboard/commit/b6f138b423cbe18b078fd38ea64b4c7a839d4e6e))
+* recognize ens domains ([#351](https://github.com/ethersphere/bee-dashboard/issues/351)) ([5917a13](https://github.com/ethersphere/bee-dashboard/commit/5917a133172c9e2fc0a81fb2fa19ea29ff976d03))
+
+## [0.15.0](https://github.com/ethersphere/bee-dashboard/compare/v0.14.0...v0.15.0) (2022-05-16)
+
+
+### Features
+
+* add aditional information to the stamps overview ([#349](https://github.com/ethersphere/bee-dashboard/issues/349)) ([23dea07](https://github.com/ethersphere/bee-dashboard/commit/23dea07f6e53da91f87078749f07bd95c9e65983))
+* add bee desktop toolkit ([#311](https://github.com/ethersphere/bee-dashboard/issues/311)) ([ecaf205](https://github.com/ethersphere/bee-dashboard/commit/ecaf2054fc5aaa5fa4f1d0b3fb2753af9d9b233e))
+* add bee-desktop settings capabilities ([#323](https://github.com/ethersphere/bee-dashboard/issues/323)) ([87b0b71](https://github.com/ethersphere/bee-dashboard/commit/87b0b71cc63098a5d886ff47d52715c250d1b659))
+* support for bzz.link cids when downloading files ([#350](https://github.com/ethersphere/bee-dashboard/issues/350)) ([3784b29](https://github.com/ethersphere/bee-dashboard/commit/3784b29f148b706d5bc40b69b5ae898efa2c1990))
+* wait for postage stamp to be usable when bying it ([#352](https://github.com/ethersphere/bee-dashboard/issues/352)) ([1e2face](https://github.com/ethersphere/bee-dashboard/commit/1e2face10e93818f281526d8245f84834e5ecb86))
+
+
+### Bug Fixes
+
+* app crash caused by inputing non-number characters ([#347](https://github.com/ethersphere/bee-dashboard/issues/347)) ([a67be7a](https://github.com/ethersphere/bee-dashboard/commit/a67be7a31ec88e9ce9c7764ec4523496c157d08a))
+* connection health indicator values to reflect the current network conditions ([#353](https://github.com/ethersphere/bee-dashboard/issues/353)) ([07561aa](https://github.com/ethersphere/bee-dashboard/commit/07561aaed2ce7f7ffd7ecfd8ae8b5190cc9893bc))
+* nested directory upload preserves the directory structure ([#365](https://github.com/ethersphere/bee-dashboard/issues/365)) ([86978b7](https://github.com/ethersphere/bee-dashboard/commit/86978b7e999584173b082eef86074af698523752))
+* remove restrictions on postage stamp label ([#354](https://github.com/ethersphere/bee-dashboard/issues/354)) ([b6b9914](https://github.com/ethersphere/bee-dashboard/commit/b6b9914548a0ac00ed293ea35490ce38e9d6adaa))
+* show current postage stamp price per block ([#348](https://github.com/ethersphere/bee-dashboard/issues/348)) ([906a457](https://github.com/ethersphere/bee-dashboard/commit/906a457ae5a8683f82d218759fd66dc1b7c9a220))
+
+## [0.14.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.13.0...v0.14.0) (2022-04-14)
+
+
+### Features
+
+* add hook that detects if the bee-dashboard is run within bee-desktop ([#334](https://www.github.com/ethersphere/bee-dashboard/issues/334)) ([eb9e309](https://www.github.com/ethersphere/bee-dashboard/commit/eb9e309c8bc0327d137f190d6873618cb215fece))
+* detect bee mode and enable/disable status checks accordingly ([#318](https://www.github.com/ethersphere/bee-dashboard/issues/318)) ([8baecb7](https://www.github.com/ethersphere/bee-dashboard/commit/8baecb783f1574af1cd1f17738efae4b0ac9f0c8))
+* optional status checks (e.g. connected peers > 0 or funded chequebook) ([#331](https://www.github.com/ethersphere/bee-dashboard/issues/331)) ([5d0fbf7](https://www.github.com/ethersphere/bee-dashboard/commit/5d0fbf705dfed6738980c751a9654199d60a3787))
+
+
+### Bug Fixes
+
+* postage stamp price and TTL calculation ([#305](https://www.github.com/ethersphere/bee-dashboard/issues/305)) ([d0b3f1a](https://www.github.com/ethersphere/bee-dashboard/commit/d0b3f1abee7ea017bdd05954d5fadafb67365efd))
+
+## [0.13.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.12.0...v0.13.0) (2022-01-28)
+
+
+### Features
+
+* add hash based routing ([#287](https://www.github.com/ethersphere/bee-dashboard/issues/287)) ([9ee1c91](https://www.github.com/ethersphere/bee-dashboard/commit/9ee1c9107bb08d1838044f39e4d0dd5817c8f283))
+* add metadata and preview ([#292](https://www.github.com/ethersphere/bee-dashboard/issues/292)) ([f401314](https://www.github.com/ethersphere/bee-dashboard/commit/f4013142afdb407e699eff9587921e23c971f1db))
+
+
+### Bug Fixes
+
+* clean up spinner and disabled state on download page ([#294](https://www.github.com/ethersphere/bee-dashboard/issues/294)) ([a406e0f](https://www.github.com/ethersphere/bee-dashboard/commit/a406e0fc014991fcbaca230f27f41cd071d8a863))
+* correct folder name when uploading multiple files or mix of files & directories ([#291](https://www.github.com/ethersphere/bee-dashboard/issues/291)) ([d878747](https://www.github.com/ethersphere/bee-dashboard/commit/d8787476acf068be6609a77b1fadb2f61d0fd502))
+* disable feeds page when disconnected ([#293](https://www.github.com/ethersphere/bee-dashboard/issues/293)) ([1310deb](https://www.github.com/ethersphere/bee-dashboard/commit/1310deb17aec91f368f99974aaa245abb0a3e201))
+* do not print size and name when meta is unknown ([#297](https://www.github.com/ethersphere/bee-dashboard/issues/297)) ([7880c80](https://www.github.com/ethersphere/bee-dashboard/commit/7880c802aea6b0830ca52b47b88540b8df5888cc))
+* get current price from chain state ([#286](https://www.github.com/ethersphere/bee-dashboard/issues/286)) ([bc82e67](https://www.github.com/ethersphere/bee-dashboard/commit/bc82e6756154b33d01796a6e66e51dcfa1495338))
+
+## [0.12.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.2...v0.12.0) (2021-12-21)
+
+
+### Features
+
+* add identity and feed management ([#272](https://www.github.com/ethersphere/bee-dashboard/issues/272)) ([25b65c3](https://www.github.com/ethersphere/bee-dashboard/commit/25b65c3fb770b09c685fe66596e372dfbb616625))
+
+### [0.11.2](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.1...v0.11.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* **ci:** add lib folder to the package.json files prop ([#270](https://www.github.com/ethersphere/bee-dashboard/issues/270)) ([5ac0f01](https://www.github.com/ethersphere/bee-dashboard/commit/5ac0f01bf50ee23b474ab9c8d61c6af418544083))
+
+### [0.11.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.11.0...v0.11.1) (2021-12-14)
+
+
+### Bug Fixes
+
+* typo in publish script ([#268](https://www.github.com/ethersphere/bee-dashboard/issues/268)) ([c1e77bf](https://www.github.com/ethersphere/bee-dashboard/commit/c1e77bfc0d3ac442d6bacec7402f576a6422927e))
+
+## [0.11.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.10.0...v0.11.0) (2021-12-14)
+
+
+### Features
+
+* modularisation ([#244](https://www.github.com/ethersphere/bee-dashboard/issues/244)) ([2a13da1](https://www.github.com/ethersphere/bee-dashboard/commit/2a13da1a6c5925946d22666a84f975cec87df115))
+
+
+### Bug Fixes
+
+* **build:** bee-dashboard component building ([#267](https://www.github.com/ethersphere/bee-dashboard/issues/267)) ([153b007](https://www.github.com/ethersphere/bee-dashboard/commit/153b007387618e34e1d5dc7fd82d49722783e757))
+
+## [0.10.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.9.0...v0.10.0) (2021-12-07)
+
+
+### Features
+
+* add website and folder upload and download ([#260](https://www.github.com/ethersphere/bee-dashboard/issues/260)) ([3ef1ad9](https://www.github.com/ethersphere/bee-dashboard/commit/3ef1ad9574c9193f83d8a1447fddb79266c1a4f4))
+
+## [0.9.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.8.0...v0.9.0) (2021-11-25)
+
+
+### Features
+
+* add dev mode flag ([#246](https://www.github.com/ethersphere/bee-dashboard/issues/246)) ([49350b0](https://www.github.com/ethersphere/bee-dashboard/commit/49350b05709053ecfbc4fc98f8b1df1aa0345e95))
+* enable setting devMode from queryParams ([#254](https://www.github.com/ethersphere/bee-dashboard/issues/254)) ([844383b](https://www.github.com/ethersphere/bee-dashboard/commit/844383bea7b2118232a74ac23c9e9a38fc47d3fd))
+* improve upload flow ([#240](https://www.github.com/ethersphere/bee-dashboard/issues/240)) ([635621b](https://www.github.com/ethersphere/bee-dashboard/commit/635621b04aea7124a99d00f9e31a86983063f5ce))
+* move postage stamp operations to bee debug api ([#256](https://www.github.com/ethersphere/bee-dashboard/issues/256)) ([3bb0077](https://www.github.com/ethersphere/bee-dashboard/commit/3bb00771d684ad93fd7acd921b648574013aec5c))
+
+## [0.8.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.7.0...v0.8.0) (2021-10-20)
+
+In this version we are adding support for the bee release 1.2.0. The app also went through a graphical redesign. More to come soon!
+
+
+### Features
+* support for bee 1.2.0
+* update files page design ([#218](https://www.github.com/ethersphere/bee-dashboard/issues/218)) ([93af7f3](https://www.github.com/ethersphere/bee-dashboard/commit/93af7f35a371d54864c068be6e1d8a70092afe28))
+* update info page design ([#207](https://www.github.com/ethersphere/bee-dashboard/issues/207)) ([57f5a73](https://www.github.com/ethersphere/bee-dashboard/commit/57f5a73f3a8d957bf967c51612dc09c802bb68dc))
+* update status page design ([#214](https://www.github.com/ethersphere/bee-dashboard/issues/214)) ([b666cd2](https://www.github.com/ethersphere/bee-dashboard/commit/b666cd2657cf1003651c44b6b4fa5bdcf11e895f))
+* update troubleshooting component design ([#204](https://www.github.com/ethersphere/bee-dashboard/issues/204)) ([c4c1573](https://www.github.com/ethersphere/bee-dashboard/commit/c4c1573263868b6dc8a863124e4aee824dceadbb))
+* update accounting page design ([#209](https://www.github.com/ethersphere/bee-dashboard/issues/209)) ([ecbc116](https://www.github.com/ethersphere/bee-dashboard/commit/ecbc1164756de912d14ce44aa9b2c155dded6dac))
+* update postage stamps page design ([#217](https://www.github.com/ethersphere/bee-dashboard/issues/217)) ([f241b2f](https://www.github.com/ethersphere/bee-dashboard/commit/f241b2fc5f6ec0741e275498ebef5a18ce710b81))
+* update settings page design ([#215](https://www.github.com/ethersphere/bee-dashboard/issues/215)) ([32e5ea9](https://www.github.com/ethersphere/bee-dashboard/commit/32e5ea9e56fdf957b758ec714bb6a4fe1903082a))
+
+
+### Bug Fixes
+
+* hover state style of ListItems which are clickable to be in line with other buttons ([#223](https://www.github.com/ethersphere/bee-dashboard/issues/223)) ([6c3f6c1](https://www.github.com/ethersphere/bee-dashboard/commit/6c3f6c1019801267aa5e51002f6e21f769edc210))
+* size of the troubleshoot component button ([#226](https://www.github.com/ethersphere/bee-dashboard/issues/226)) ([b4c9d9e](https://www.github.com/ethersphere/bee-dashboard/commit/b4c9d9e0182c4bee5ebb2d4e43e0aaad2aeb616b))
+* style of the update bee version button ([#222](https://www.github.com/ethersphere/bee-dashboard/issues/222)) ([83c6d13](https://www.github.com/ethersphere/bee-dashboard/commit/83c6d1341790d664c7986dd2a816fe6a3b069e5c))
+* typo in population text ([#228](https://www.github.com/ethersphere/bee-dashboard/issues/228)) ([cc5e778](https://www.github.com/ethersphere/bee-dashboard/commit/cc5e778f892b73b0b7ff5e0fa00c4816f3298ac7))
+* unknown routes should point to info page ([#227](https://www.github.com/ethersphere/bee-dashboard/issues/227)) ([f11bbd5](https://www.github.com/ethersphere/bee-dashboard/commit/f11bbd5008a78ef7d5c73fc2758ee4e2dafae01e))
+* used label in postage stamp list ([#220](https://www.github.com/ethersphere/bee-dashboard/issues/220)) ([0326568](https://www.github.com/ethersphere/bee-dashboard/commit/03265687ad630b0100da3134518b680327af1636))
+* wording in chequebook setup ([#211](https://www.github.com/ethersphere/bee-dashboard/issues/211)) ([e7188f4](https://www.github.com/ethersphere/bee-dashboard/commit/e7188f4a35c85204eef6a01ae6f1e679d076180c))
+
+
+## [0.7.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.6.0...v0.7.0) (2021-08-31)
+
+
+### Features
+
+* removed dark theme and theme switching ([#190](https://www.github.com/ethersphere/bee-dashboard/issues/190)) ([d1720e2](https://www.github.com/ethersphere/bee-dashboard/commit/d1720e243c4415d75763a229250fa20e3664290e))
+* separate info and status page ([#183](https://www.github.com/ethersphere/bee-dashboard/issues/183)) ([02a7bff](https://www.github.com/ethersphere/bee-dashboard/commit/02a7bff733b7fac70c6a36f94e6ba1425854a0af))
+* styling of the sidebar ([#194](https://github.com/ethersphere/bee-dashboard/pull/194))
+
+
+### Bug Fixes
+* bee 1.1.0 version reporting workaround ([#197](https://github.com/ethersphere/bee-dashboard/issues/197))
+
+## [0.6.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.5.0...v0.6.0) (2021-08-24)
+
+
+### Features
+
+* add retry to accounting ([#166](https://www.github.com/ethersphere/bee-dashboard/issues/166)) ([a62243f](https://www.github.com/ethersphere/bee-dashboard/commit/a62243fe5c45b7dd9be6e92f82ebdf0b64bd8f0d))
+* add tooltips and health indicator to peers ([#169](https://www.github.com/ethersphere/bee-dashboard/issues/169)) ([480f6dc](https://www.github.com/ethersphere/bee-dashboard/commit/480f6dc7f9c58a4aae87e0dea7082a4bd3dc900b))
+* bee provider caching the state of the app and refreshing periodically ([#172](https://www.github.com/ethersphere/bee-dashboard/issues/172)) ([2624cf0](https://www.github.com/ethersphere/bee-dashboard/commit/2624cf04c939e87f025c1f4ff417808073742dab))
+* changing API urls does not need the app refresh ([#173](https://www.github.com/ethersphere/bee-dashboard/issues/173)) ([d6d03bf](https://www.github.com/ethersphere/bee-dashboard/commit/d6d03bf7c6d2705de22f43825b85b32c2f0181fb))
+* remove the last update component ([#179](https://www.github.com/ethersphere/bee-dashboard/issues/179)) ([56df3a2](https://www.github.com/ethersphere/bee-dashboard/commit/56df3a2561c3c00237b5d107eb054403af3012f8))
+* synchronized platform tabs ([#165](https://www.github.com/ethersphere/bee-dashboard/issues/165)) ([ec42eaf](https://www.github.com/ethersphere/bee-dashboard/commit/ec42eafc2b768ba06649f628c733e8d3440fdcaf))
+
+
+### Bug Fixes
+
+* enum index for supported platforms ([#170](https://www.github.com/ethersphere/bee-dashboard/issues/170)) ([dcec6e0](https://www.github.com/ethersphere/bee-dashboard/commit/dcec6e01887465c74a68feede52b476791bbefa7))
+* remove nested ternary operator and simplify ping peer functionality ([#181](https://www.github.com/ethersphere/bee-dashboard/issues/181)) ([2b120e4](https://www.github.com/ethersphere/bee-dashboard/commit/2b120e44ca5e01451cc43e362195c04587836a03))
+
+## [0.5.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.4.0...v0.5.0) (2021-08-09)
+
+
+### Features
+
+* updated troubleshooting instructions and links for mainnet ([#161](https://www.github.com/ethersphere/bee-dashboard/issues/161)) ([960ffb8](https://www.github.com/ethersphere/bee-dashboard/commit/960ffb8fdd6cbfe4928b758da6cac9ba94050c00))
+
+
+### Bug Fixes
+
+* amend readme ([#155](https://www.github.com/ethersphere/bee-dashboard/issues/155)) ([be8b885](https://www.github.com/ethersphere/bee-dashboard/commit/be8b88516b00d79a623798588d3d4dac3340e8b2))
+
+## [0.4.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.1...v0.4.0) (2021-06-29)
+
+
+### Features
+
+* display postage batch usage percentage ([#149](https://www.github.com/ethersphere/bee-dashboard/issues/149)) ([6f645dc](https://www.github.com/ethersphere/bee-dashboard/commit/6f645dc6c357cb9d86cec15e454b361bc871bec6))
+
+
+### Bug Fixes
+
+* clear dropzone state after upload ([#150](https://www.github.com/ethersphere/bee-dashboard/issues/150)) ([b190cac](https://www.github.com/ethersphere/bee-dashboard/commit/b190cac7064ad3dffb770c5a83d3db4a14d39607))
+
+### [0.3.1](https://www.github.com/ethersphere/bee-dashboard/compare/v0.3.0...v0.3.1) (2021-06-03)
+
+
+### Bug Fixes
+
+* don't display version alert when unable to retrieve version from bee node ([#138](https://www.github.com/ethersphere/bee-dashboard/issues/138)) ([5ace762](https://www.github.com/ethersphere/bee-dashboard/commit/5ace7629f2479499fe975dec8be4187ece6221ed))
+* typeerror in the postage stamps form ([#137](https://www.github.com/ethersphere/bee-dashboard/issues/137)) ([465df17](https://www.github.com/ethersphere/bee-dashboard/commit/465df177413afba5376682bd23a712066bd0385c))
+
 ## [0.3.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.2.0...v0.3.0) (2021-06-02)
 
 

CODEOWNERS

@@ -1 +1 @@
-* nugaon vojtechsimetka
+* @Cafe137

Dockerfile

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

README.md

@@ -3,52 +3,73 @@
 [![](https://img.shields.io/badge/made%20by-Swarm-blue.svg?style=flat-square)](https://swarm.ethereum.org/)
 [![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)
-![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
-![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
+[![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/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 manage your postage stamps.
+> An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
+> manage your postage stamps.
 
-**Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
+**Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
+working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-![Status page](/ui_samples/status.png)
+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).
 
-| Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
-|-------|---------|-------|----------|------|
-| ![Setup](/ui_samples/node_setup.png) | ![Files](/ui_samples/file_upload.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/peers.png) | ![Settings](/ui_samples/settings.png) |
+![Status page](/docs/ui_samples/info.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
 
 - [Install](#install)
 - [Usage](#usage)
-    - [Terminal](#terminal)
-    - [Docker](#docker)
+  - [Terminal](#terminal)
+  - [Docker](#docker)
 - [Contribute](#contribute)
 - [Development](#development)
+- [File Manager](#file-manager)
 - [Maintainers](#maintainers)
 - [License](#license)
 
 ## 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.
+
 ## Usage
 
-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node. To see where the config file is, consult the [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
+:warning: To successfully connect to the Bee node, you will need to enable CORS. You can do so by setting
+`cors-allowed-origins: ['*']` in the Bee config file and then restart the Bee node. To see where the config file is,
+consult the
+[official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
 
 ### Terminal
 
 To start use:
+
 ```sh
 bee-dashboard
 ```
 
 This should open the webpage on [`http://localhost:8080`](http://localhost:8080)
 
+You can also define your own port with the `PORT` environment variable. E.g.
+
+```sh
+export PORT=3005
+bee-dashboard
+```
+
+Will start the bee-dashboard on [`http://localhost:3005`](http://localhost:3005)
+
 ### Docker
 
 To build Docker image and run it, execute the following from inside project directory:
@@ -58,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
@@ -67,24 +94,75 @@ git clone git@github.com:ethersphere/bee-dashboard.git
 
 cd  bee-dashboard
 
-npm start
+pnpm install
+
+pnpm run init:husky
+
+pnpm start
 ```
 
 The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
 
+#### Environmental variables
+
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static
+files. We support following variables:
+
+- `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.
+- `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
+
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where Desktop
+is initialized (eq. the splash screen disappear) and:
+
+```sh
+echo "VITE_BEE_DESKTOP_URL=http://localhost:3054
+VITE_BEE_DESKTOP_ENABLED=true" > .env.development.local
+
+pnpm start
+pnpm run desktop # This will inject the API key to the Dashboard
+```
+
+## File Manager
+
+The File Manager module provides intuitive decentralized file storage and management.
+
+For comprehensive documentation, see the [File Manager Documentation](./docs/FILE_MANAGER.md).
+
+### Features
+
+- Create and manage multiple drives with configurable capacity and lifetime
+- Upload, download, and organize files with version control
+- Manage postage stamps required for file uploads
+- Configure erasure coding levels for data redundancy
+
 ## Contribute
 
 There are some ways you can make this module better:
 
 - Consult our [open issues](https://github.com/ethersphere/bee-dashboard/issues) and take on one of them
 - Help our tests reach 100% coverage!
-- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or want to give feedback
+- Join us in our [Discord chat](https://discord.gg/wdghaQsGq5) in the #develop-on-swarm channel if you have questions or
+  want to give feedback
 
 ## Maintainers
 
-- [nugaon](https://github.com/nugaon)
-- [vojtechsimetka](https://github.com/vojtechsimetka)
+- [Cafe137](https://github.com/Cafe137)
+
+See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintainer).
 
 ## License
 
 [BSD-3-Clause](./LICENSE)
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)

commitlint.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [1, 'always', 120],
+    'header-max-length': [2, 'always', 160],
+  },
+}

desktop.mjs

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import envPaths from 'env-paths'
+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:${desktopPort}/?v=${apiKey}#/`
+
+// eslint-disable-next-line no-undef
+console.log('Opening: ' + url)
+await open(url)

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  bee-dashboard:
+    build: .
+    image: ethersphere/bee-dashboard:latest
+    ports:
+      - '127.0.0.1:8080:8080'
+    restart: unless-stopped

docs/FILE_MANAGER.md

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

eslint-compat.cjs

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

eslint.config.mjs

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

index.html

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

jest.config.cjs

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

package.json

@@ -1,20 +1,23 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.3.0",
+  "version": "0.35.1",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
-  "keywords": [
-    "bee",
-    "swarm",
-    "decentralised",
-    "storage",
-    "ethereum",
-    "typescript",
-    "p2p"
-  ],
   "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/"
   },
@@ -23,73 +26,129 @@
     "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": {
-    "@ethersphere/bee-js": "^0.10.0",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@types/react-router": "^5.1.13",
-    "@types/react-router-dom": "^5.1.7",
-    "axios": "^0.21.1",
-    "bignumber.js": "^9.0.1",
-    "feather-icons": "^4.28.0",
-    "formik": "^2.2.8",
-    "formik-material-ui": "^3.0.1",
-    "material-ui-dropzone": "^3.5.0",
-    "notistack": "^1.0.9",
-    "opener": "^1.5.2",
-    "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.2",
-    "react-feather": "^2.0.9",
-    "react-identicons": "^1.2.5",
-    "react-router-dom": "^5.2.0",
-    "react-syntax-highlighter": "^15.4.3",
-    "semver": "^7.3.2",
-    "serve-handler": "^6.1.3"
+    "@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": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.5",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.41",
-    "@types/qrcode.react": "^1.0.1",
-    "@types/react": "^17.0.3",
-    "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/semver": "^7.3.6",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "prettier": "^2.2.1",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
+    "@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"
   },
-  "scripts": {
-    "prepare": "npm run build",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "serve": "node ./serve.js",
-    "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\""
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "puppeteer",
+      "unrs-resolver"
+    ]
   },
+  "keywords": [
+    "bee",
+    "swarm",
+    "decentralised",
+    "storage",
+    "ethereum",
+    "typescript",
+    "p2p"
+  ],
   "files": [
+    "lib",
     "build",
     "serve.js"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -103,8 +162,9 @@
     ]
   },
   "engines": {
-    "node": ">=12.0.0",
-    "npm": ">=6.0.0",
-    "bee": ">=0.6.0"
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0",
+    "pnpm": ">=10.0.0",
+    "bee": "2.7.0"
   }
 }

public/index.html

@@ -1,48 +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" />
-
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
-    
-    <meta
-      name="description"
-      content="Bee Dashboard"
-    />
-    <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>Bee Dashboard</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>

public/serve.json

@@ -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"
         }
-    ]    
+      ]
+    }
+  ]
 }

serve.js

@@ -1,34 +1,37 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-require-imports */
 
 const path = require('path')
-const handler = require('serve-handler');
-const http = require('http');
+const handler = require('serve-handler')
+const http = require('http')
 const opener = require('opener')
 
+const port = process.env.PORT || 8080
+
 const serverConfig = {
   public: path.join(__dirname, 'build'),
   trailingSlash: false,
-  rewrites: [
-    { source: "**", destination: "/index.html" },
-  ],
+  rewrites: [{ source: '**', destination: '/index.html' }],
   headers: [
-      {
-        source: "*",
-        headers: [{
-          key: "Cache-Control",
-          value: "max-age=3600"
-        }]
-      }
-  ]
+    {
+      source: '*',
+      headers: [
+        {
+          key: 'Cache-Control',
+          value: 'max-age=3600',
+        },
+      ],
+    },
+  ],
 }
 
 const server = http.createServer((request, response) => {
+  return handler(request, response, serverConfig)
+})
 
-  return handler(request, response, serverConfig);
-})
- 
-server.listen(8080, () => {
-  console.log('Starting up Bee Dashboard on address http://localhost:8080')
+server.listen(port, () => {
+  console.log(`Starting up Bee Dashboard on address http://localhost:${port}`)
   console.log('Hit CTRL-C to stop the server')
-  opener('http://localhost:8080')
+  opener(`http://localhost:${port}`)
 })

src/@types/react-identicons/index.d.ts

@@ -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
-  export default Identicon
-}

src/App.css

@@ -1,34 +1,43 @@
 @font-face {
-  font-family: "IBMPlexMono500";
-  src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
-  font-weight: 500;
-}
-@font-face {
-  font-family: "IBMPlexMono600";
-  src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
-  font-weight: 600;
-}
-@font-face {
-  font-family: "IBMPlexMonoregular";
-  src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
+  font-family: 'iAWriterQuattroV';
+  font-style: normal;
   font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/iAWriterQuattroV.ttf) format('truetype');
 }
+
 @font-face {
-  font-family: "WorkSans-Italic-VariableFont_wght";
-  src: url(assets/fonts/WorkSans-Italic-VariableFont_wght.ttf) format('truetype');
-  font-weight: 700;
-}
-@font-face {
-  font-family: "WorkSans-VariableFont_wght";
-  src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
-  font-weight: 400;
+  font-family: 'iAWriterMonoV';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/iAWriterMonoV.ttf) format('truetype');
 }
 
 .App {
-  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family:
+    'iAWriterQuattroV',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-a, button {  
-  font-family: "IBMPlexMono500" !important;
+a,
+button {
+  font-family: 'iAWriterMonoV' !important;
   color: #dd7700;
-}
+}
+
+.MuiContainer-maxWidthLg > .fm {
+  padding: 0px !important;
+}

src/App.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-import App from './App'
-
-// Mocks methods that are not implemented in JSDOM
-// see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-})
-
-// TODO: this is not a good test and should be removed. Keeping it in to make sure the whole app renders (to be used in CI)
-test('should render the app', () => {
-  render(<App />)
-})

src/App.tsx

@@ -1,53 +1,83 @@
-import { ReactElement, useEffect, useState } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
+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 Dashboard from './layout/Dashboard'
+import { Provider as BeeProvider } from './providers/Bee'
+import { Provider as FeedsProvider } from './providers/Feeds'
+import { Provider as FileProvider } from './providers/File'
+import { Provider as FileManagerProvider } from './providers/FileManager'
+import { Provider as PlatformProvider } from './providers/Platform'
+import { Provider as SettingsProvider } from './providers/Settings'
+import { Provider as StampsProvider } from './providers/Stamps'
+import { Provider as TopUpProvider } from './providers/TopUp'
+import { Provider as BalanceProvider } from './providers/WalletBalance'
+import BaseRouter from './routes'
+import { theme } from './theme'
+
 import './App.css'
 
-import { ThemeProvider } from '@material-ui/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import { SnackbarProvider } from 'notistack'
+interface Props {
+  beeApiUrl?: string
+  defaultRpcUrl?: string
+  lockedApiSettings?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  errorReporting?: (err: Error) => void
+}
 
-import BaseRouter from './routes/routes'
-import { lightTheme, darkTheme } from './theme'
-import { Provider as StampsProvider } from './providers/Stamps'
-
-const App = (): ReactElement => {
-  const [themeMode, toggleThemeMode] = useState('light')
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
-
-  return (
+const App = ({
+  beeApiUrl,
+  defaultRpcUrl,
+  lockedApiSettings,
+  isDesktop,
+  desktopUrl,
+  errorReporting,
+}: Props): ReactElement => {
+  const mainApp = (
     <div className="App">
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
-        <StampsProvider>
-          <SnackbarProvider>
-            <>
-              <CssBaseline />
-              <Router>
-                <BaseRouter />
-              </Router>
-            </>
-          </SnackbarProvider>
-        </StampsProvider>
+      <ThemeProvider theme={theme}>
+        <SettingsProvider
+          beeApiUrl={beeApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
+          lockedApiSettings={lockedApiSettings}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
+        >
+          <TopUpProvider>
+            <BeeProvider>
+              <BalanceProvider>
+                <StampsProvider>
+                  <FileProvider>
+                    <FileManagerProvider>
+                      <FeedsProvider>
+                        <PlatformProvider>
+                          <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+                            <Router>
+                              <>
+                                <CssBaseline />
+                                <Dashboard errorReporting={errorReporting}>
+                                  <BaseRouter />
+                                </Dashboard>
+                              </>
+                            </Router>
+                          </SnackbarProvider>
+                        </PlatformProvider>
+                      </FeedsProvider>
+                    </FileManagerProvider>
+                  </FileProvider>
+                </StampsProvider>
+              </BalanceProvider>
+            </BeeProvider>
+          </TopUpProvider>
+        </SettingsProvider>
       </ThemeProvider>
     </div>
   )
+
+  return mainApp
 }
 
 export default App

src/assets/dashboard-logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="172" height="30" viewBox="0 0 172 30">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <path d="M0 0H172V30H0z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+                <path fill="#F9F9F9" fill-rule="nonzero" d="M94.26 21.338c1.242 0 2.168-.427 2.779-1.28.61-.853.916-2.118.916-3.796 0-1.677-.306-2.942-.916-3.795-.611-.854-1.537-1.28-2.778-1.28h-2.836v10.15h2.836zm-.057-1.062h-1.556V12.25h1.556c.814 0 1.427.28 1.84.843.411.562.617 1.357.617 2.385v1.57c0 1.028-.206 1.823-.618 2.386-.412.562-1.025.843-1.84.843zm6.767 1.062l.858-2.894h3.563l.858 2.894h1.294l-3.112-10.151h-1.614l-3.112 10.15h1.265zm4.13-3.956h-2.981l1.425-4.9h.131l1.425 4.9zm7.698 4.13c1.135 0 2.01-.266 2.625-.8.616-.533.924-1.27.924-2.21 0-.33-.044-.645-.131-.945-.087-.3-.235-.572-.444-.815-.208-.242-.482-.45-.821-.625-.34-.175-.757-.305-1.251-.393l-1.09-.189c-.718-.126-1.215-.332-1.491-.618-.277-.286-.415-.657-.415-1.112 0-.582.184-1.018.553-1.31.368-.29.897-.436 1.585-.436.63 0 1.144.117 1.541.35.398.232.737.533 1.018.901l.858-.742c-.339-.494-.787-.877-1.345-1.148-.557-.272-1.243-.408-2.058-.408-1.037 0-1.861.238-2.472.713-.61.475-.916 1.178-.916 2.109 0 .32.044.627.13.923.088.296.234.567.437.815.204.247.473.458.807.632.335.175.75.306 1.244.393l1.134.189c.698.116 1.188.313 1.469.589.281.276.422.662.422 1.156 0 .61-.194 1.086-.582 1.425-.388.34-.95.51-1.687.51-.61 0-1.137-.122-1.578-.364-.441-.243-.86-.611-1.258-1.106l-.887.728c.378.523.858.952 1.44 1.287.581.334 1.328.501 2.24.501zm7.262-.174v-4.61h3.956v4.61h1.221V11.187h-1.221v4.48h-3.956v-4.48h-1.222v10.15h1.222zm11.988 0c.388 0 .75-.075 1.084-.226.334-.15.625-.356.872-.618.248-.261.439-.572.575-.93.135-.36.203-.742.203-1.15 0-.707-.184-1.248-.552-1.62-.369-.374-.839-.629-1.411-.764v-.044c.465-.145.846-.393 1.142-.742.295-.349.443-.829.443-1.44 0-.794-.247-1.43-.741-1.904-.495-.476-1.178-.713-2.051-.713h-3.447v10.15h3.883zm-.567-5.745h-2.094V12.25h2.094c.514 0 .916.116 1.207.349.291.232.436.581.436 1.047v.567c0 .465-.145.812-.436 1.04-.29.227-.693.341-1.207.341zm.204 4.683h-2.298v-3.68h2.298c.562 0 1.003.13 1.323.386.32.257.48.643.48 1.156v.597c0 .523-.16.911-.48 1.163-.32.252-.761.378-1.323.378zm8.774 1.236c.62 0 1.154-.118 1.6-.356.446-.237.814-.58 1.105-1.025.29-.446.504-.994.64-1.644.136-.65.203-1.39.203-2.225 0-.824-.067-1.563-.203-2.217-.136-.655-.35-1.205-.64-1.651-.29-.446-.66-.788-1.105-1.025-.446-.238-.98-.357-1.6-.357-.62 0-1.154.12-1.6.357-.446.237-.814.579-1.105 1.025-.29.446-.504.996-.64 1.65-.136.655-.204 1.394-.204 2.218 0 .834.068 1.576.204 2.225.136.65.35 1.198.64 1.644.29.446.66.788 1.105 1.025.446.238.98.356 1.6.356zm0-1.061c-.407 0-.751-.08-1.033-.24-.28-.16-.513-.386-.698-.676-.184-.291-.317-.643-.4-1.055-.082-.412-.123-.875-.123-1.389v-1.658c0-.504.041-.964.123-1.381.083-.417.216-.77.4-1.062.185-.29.417-.516.698-.676.282-.16.626-.24 1.033-.24.407 0 .751.08 1.032.24.282.16.514.385.699.676.184.291.317.645.4 1.062.082.417.123.877.123 1.381v1.658c0 .514-.041.977-.124 1.39-.082.411-.215.763-.4 1.054-.184.29-.416.516-.698.676-.28.16-.625.24-1.032.24zm6.564.887l.858-2.894h3.563l.858 2.894h1.294l-3.112-10.151h-1.614l-3.113 10.15h1.266zm4.13-3.956h-2.981l1.425-4.9h.13l1.426 4.9zm5.895 3.956v-4.334h1.614l2.472 4.334h1.367l-2.588-4.392c.814-.078 1.434-.364 1.861-.858.427-.495.64-1.154.64-1.978 0-.921-.247-1.638-.742-2.152-.494-.514-1.212-.771-2.152-.771h-3.694v10.15h1.222zm2.443-5.366h-2.443v-3.723h2.443c.514 0 .914.128 1.2.385.286.257.429.623.429 1.098v.756c0 .475-.143.841-.43 1.098-.285.257-.685.386-1.2.386zm8.454 5.366c1.241 0 2.167-.427 2.778-1.28.61-.853.916-2.118.916-3.796 0-1.677-.305-2.942-.916-3.795-.611-.854-1.537-1.28-2.778-1.28h-2.836v10.15h2.836zm-.058-1.062h-1.556V12.25h1.556c.814 0 1.428.28 1.84.843.412.562.618 1.357.618 2.385v1.57c0 1.028-.206 1.823-.618 2.386-.412.562-1.026.843-1.84.843z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+                <path fill="#F9F9F9" d="M5.064 14.685l4.822 2.709v5.4L5.064 25.5l-4.82-2.706v-5.4l4.82-2.71zm11.034 0l4.822 2.709v5.4L16.098 25.5l-4.82-2.706v-5.4l4.82-2.71zm42.17-3.332v7.644l1.655 1.432.017-.014-1.187 1.327h-.019l-2.097-1.815-2.505 1.465c-.41.237-.876.362-1.35.357-.709-.005-1.392-.277-1.91-.762-.539-.503-.838-1.213-.824-1.95-.002-.974.52-1.874 1.367-2.356l5.05-2.895v-.644H50.55v-1.79h7.719zm-29.357.085c.802-.392 1.705-.529 2.588-.392.845.17 1.627.57 2.258 1.159.166.145.443.417.632.606l.122.121.08.08-1.178 1.336c.014-.017-.801-.773-.883-.841-.389-.367-.863-.627-1.383-.754-.539-.12-1.104-.022-1.573.27-.323.195-.508.552-.484.928.006.372.213.71.54.885.547.291 1.136.49 1.747.586.387.075.766.172 1.102.261.335.088.662.21.974.359.314.11.602.285.844.515.233.194.416.438.537.715.152.298.232.626.236.96.034.957-.403 1.87-1.17 2.444-.81.602-1.8.911-2.809.876-.379.002-.76-.036-1.131-.114-1.007-.247-1.925-.768-2.652-1.506-.05-.043-.608-.566-.608-.566l1.145-1.378c.246.23.486.462.741.677.313.303.655.574 1.02.813.913.518 2.035.518 2.948 0 .375-.227.596-.638.58-1.074.008-.364-.223-.687-.569-.799-.634-.27-1.298-.47-1.979-.59-.864-.152-1.684-.485-2.408-.978-.602-.433-.895-1.095-.895-2.025-.018-.85.365-1.657 1.03-2.183.186-.152.386-.282.598-.39zm17.705-.135c0-.022.006.006.006.006h1.922l-1.606 10.212h-3.152l-1.15-8.808h-.024l-1.164 8.804H38.3l-1.573-10.214h1.926l1.267 8.822h.024l1.114-8.822h3.157l1.109 8.822h.025zm33.488-.29c.703-.039 1.386.244 1.858.765.435.557.655 1.252.618 1.958v7.76h-1.89V14.08c-.014-.314-.113-.621-.288-.886-.212-.26-.54-.396-.873-.359-.362-.011-.708.145-.936.427-.272.41-.4.9-.357 1.391v6.854h-1.88v-7.337c.018-.353-.097-.7-.317-.976-.206-.241-.508-.373-.824-.359-.376-.022-.74.145-.966.448-.253.366-.379.808-.358 1.252v6.978h-1.876v-10.21h1.876v.946c.153-.354.401-.657.715-.877.38-.245.821-.37 1.272-.358.465-.02.923.124 1.296.404.304.244.535.57.664.937.424-.855 1.312-1.381 2.266-1.341zm-13.503-.011c.899-.011 1.763.349 2.387.996.66.62 1.031 1.488 1.023 2.393v.588h-1.764v-.588c0-.05-.003-.099-.008-.146-.08-.877-.859-1.519-1.735-1.436-.832.111-1.449.829-1.431 1.668v5.205h2.574v1.764H61.56v-1.764h1.687v-5.62l-1.697-1.538 1.178-1.315 1.195 1.096c.626-.846 1.625-1.332 2.677-1.303zm-10.136 4.89L52.32 18.27c-.288.158-.465.46-.46.789.01.496.41.894.905.905.166-.003.328-.052.468-.143h-.022l3.254-1.89v-2.04zM10.544 5.254l1.847 1.102v3.181l.634.354 2.347 1.318v2.15l-4.82 2.707-4.82-2.706v-5.4l4.812-2.706zm5.638-.755l2.568 1.44v2.886l-2.548 1.428-.02-.011-2.553-1.43V5.951l.005-.021L16.182 4.5z" transform="translate(-64.000000, -64.000000) translate(64.000000, 64.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/swarm-logo-1.svg

@@ -1,101 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 230.07104 58.680001"
-   version="1.1"
-   id="svg28566"
-   sodipodi:docname="swarm-logo.svg"
-   inkscape:version="1.0.1 (3bc2e81, 2020-09-07)"
-   width="230.07104"
-   height="58.68">
-  <metadata
-     id="metadata28570">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     id="namedview28568"
-     showgrid="false"
-     inkscape:zoom="3.1325"
-     inkscape:cx="123.33"
-     inkscape:cy="35.939998"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_2"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <defs
-     id="defs28540">
-    <style
-       id="style28538">.cls-1{fill:#fafafa;}.cls-2{fill:#242424;}</style>
-  </defs>
-  <title
-     id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
-  <g
-     id="Layer_2"
-     data-name="Layer 2"
-     transform="translate(-76.67,-71.05)">
-    <path
-       class="cls-2"
-       d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z"
-       id="path28546" />
-    <path
-       class="cls-2"
-       d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z"
-       id="path28548" />
-    <path
-       class="cls-2"
-       d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z"
-       id="path28550" />
-    <path
-       class="cls-2"
-       d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z"
-       id="path28552" />
-    <path
-       class="cls-2"
-       d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z"
-       id="path28554" />
-    <polygon
-       class="cls-2"
-       points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 "
-       id="polygon28556" />
-    <polygon
-       class="cls-2"
-       points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 "
-       id="polygon28558" />
-    <polygon
-       class="cls-2"
-       points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 "
-       id="polygon28560" />
-    <polygon
-       class="cls-2"
-       points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 "
-       id="polygon28562" />
-  </g>
-</svg>

src/assets/swarm-logo-2.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 468 142" xml:space="preserve"><style>.st1,.st2,.st3,.st4{opacity:.45;enable-background:new}.st2,.st3,.st4{opacity:.6}.st3,.st4{opacity:.3}.st4{opacity:.8}</style><g id="XMLID_41_"><g id="XMLID_1_"><g id="Swarm_typeface"><g id="XMLID_42_" opacity=".8"><path id="XMLID_31_" d="M193.7 90c0 9.1-9.5 13.4-17.4 13.4-8.5 0-17.8-3.3-17.8-13.2 0-1.7.1-3 2.2-3 1 0 1.4 1.3 1.4 2.1 0 8.5 6.8 10.6 14.2 10.6 5.8 0 13.8-2.8 13.8-9.8 0-13-31-5.3-31-20.3 0-8.6 9.6-10.8 16.5-10.8 8.1 0 17.1 3 17.1 12.6 0 1-1 1.7-1.9 1.7-1.1 0-1.7-1-1.7-1.9-.3-2.1-.6-3.5-2.1-5.2-2.6-3-7.7-3.6-11.5-3.6-4.5 0-12.9 1-12.9 7.1.1 10.9 31.1 3.5 31.1 20.3z"/><path id="XMLID_30_" d="M264.4 60.9c0 .8-13.2 37.6-14.5 40.9-.3 1-1 1.1-1.9 1.1-.9 0-1.6-.1-1.9-1.1l-12.9-36-12.9 36c-.3 1-1 1.1-1.9 1.1-.9 0-1.7-.1-1.9-1.1-1.3-3.3-14.5-40.1-14.5-40.9 0-1 .8-1.8 1.8-1.8.8 0 1.4.4 1.7 1.1l13 36.4 13-36.4c.3-.9 1-1.1 1.8-1.1.9 0 1.6.3 1.9 1.1l12.9 36.4 13-36.4c.3-.8.9-1.1 1.7-1.1.8 0 1.6.8 1.6 1.8z"/><path id="XMLID_45_" d="M315.3 60.9v39.2c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8v-8.2c-3.6 6.6-10.3 11.2-18 11.2-12.1 0-20.7-10.8-20.7-22.4s8.6-22.4 20.7-22.4c7.7 0 14.4 4.6 18 11.2v-8.6c0-.9.8-1.8 1.8-1.8s1.8.9 1.8 1.8zm-4.5 19.8c0-9.6-6.9-18.8-17.1-18.8-10 0-17.1 9.1-17.1 18.8s7.1 18.8 17.1 18.8c10.2 0 17.1-9.2 17.1-18.8z"/><path id="XMLID_27_" d="M352.4 61.3c0 1.1-.6 1.8-1.7 1.9-10.5 1.6-15.3 10.2-15.3 20.2v17.2c0 1-.8 1.8-1.8 1.8-1.1 0-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8 1.1 0 1.8.8 1.8 1.8v8c3-5 8.9-9.8 15.1-9.8.8 0 1.9.6 1.9 1.7z"/><path id="XMLID_2_" d="M430.6 77.7v23c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15 11.6-15 20.6v17.8c0 1-.9 1.8-1.8 1.8-1 0-1.8-.8-1.8-1.8v-23c0-7.7-4.4-15.3-13-15.3-10.9 0-15.4 8.6-15.1 20.1 0 .3.1.8 0 .9v17.4c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8V61.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8V68c3.1-5.5 8.6-9.1 15.1-9.1 7.3 0 13 4.6 15.3 11.5 3-6.7 8.8-11.5 16.2-11.5 10.6-.1 16.7 9.1 16.7 18.8z"/></g></g></g><g id="Swarm_Icon"><path id="XMLID_26_" class="st1" d="M121.3 27v12.4l-11.1-6.2V20.7z"/><path id="XMLID_25_" class="st2" d="M110.2 33.2v12.4l11.1-6.2V27z"/><path id="XMLID_24_" class="st3" d="M37.4 102.7l22.1 12.4 22.1-12.4-22.1-12.5z"/><path id="XMLID_23_" class="st1" d="M59.5 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_22_" class="st1" d="M81.6 77.8v24.9L59.5 90.2V65.4z"/><path id="XMLID_21_" class="st2" d="M59.5 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_20_" class="st2" d="M37.4 77.8v24.9l22.1-12.5V65.4z"/><path id="XMLID_19_" class="st4" d="M84 48.4l11 6.2 11.1-6.2L95 42.2z"/><path id="XMLID_18_" class="st4" d="M37.4 77.8l22.1 12.4 22.1-12.4-22.1-12.4z"/><path id="XMLID_17_" class="st3" d="M86.9 102.7l22.1 12.4 22.1-12.4L109 90.2z"/><path id="XMLID_16_" class="st1" d="M109 90.2v24.9l-22.1-12.4V77.8z"/><path id="XMLID_15_" class="st1" d="M131.1 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_14_" class="st2" d="M109 90.2v24.9l22.1-12.4V77.8z"/><path id="XMLID_13_" class="st2" d="M86.9 77.8v24.9L109 90.2V65.4z"/><path id="XMLID_12_" class="st4" d="M86.9 77.8L109 90.2l22.1-12.4L109 65.4z"/><path id="XMLID_11_" class="st2" d="M84 35.9v12.5l11-6.2V29.7z"/><path id="XMLID_10_" class="st3" d="M61.9 60.8L84 73.2l22.1-12.4L84 48.4z"/><path id="XMLID_9_" class="st1" d="M84 48.4v24.8L61.9 60.8V35.9z"/><path id="XMLID_8_" class="st2" d="M61.9 35.9v24.9L84 48.4V23.5z"/><path id="XMLID_7_" class="st2" d="M95 54.6V42.2l-11 6.2v24.8L95 67l11.1-6.2V48.4z"/><g id="XMLID_5_"><path id="XMLID_6_" class="st1" d="M95 29.7l-11-6.2v24.9l22.1 12.4V48.4L95 42.2z"/></g><path id="XMLID_4_" class="st4" d="M84 23.5l11 6.2-11 6.2v12.5L61.9 35.9z"/><path id="XMLID_3_" class="st4" d="M99.2 27l11 6.2 11.1-6.2-11.1-6.3z"/></g></g></svg>

src/assets/swarm-logo-orange.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 230.07104 58.680001" version="1.1" id="svg28566" sodipodi:docname="swarm-logo.svg" inkscape:version="1.0.1 (3bc2e81, 2020-09-07)" width="230.07104" height="58.68">
-  <metadata id="metadata28570">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1016" id="namedview28568" showgrid="false" inkscape:zoom="3.1325" inkscape:cx="123.33" inkscape:cy="35.939998" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="Layer_2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
-  <defs id="defs28540">
-    <style id="style28538">
-      .cls-1 {
-        fill: #fafafa;
-      }
-      .cls-2 {
-        fill: #dd7200;
-      }
-    </style>
-  </defs>
-  <title id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
-  <g id="Layer_2" data-name="Layer 2" transform="translate(-76.67,-71.05)">
-    <path class="cls-2" d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z" id="path28546"/>
-    <path class="cls-2" d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z" id="path28548"/>
-    <path class="cls-2" d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z" id="path28550"/>
-    <path class="cls-2" d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z" id="path28552"/>
-    <path class="cls-2" d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z" id="path28554"/>
-    <polygon class="cls-2" points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 " id="polygon28556"/>
-    <polygon class="cls-2" points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 " id="polygon28558"/>
-    <polygon class="cls-2" points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 " id="polygon28560"/>
-    <polygon class="cls-2" points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 " id="polygon28562"/>
-  </g>
-</svg>

src/components/AlertUploadSize.tsx

@@ -0,0 +1,38 @@
+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
+
+interface Props {
+  files: File[]
+}
+
+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 totalSize = props.files.reduce((previous, current) => previous + current.size, 0)
+
+  const aboveLimit = totalSize >= LIMIT
+
+  return (
+    <Collapse in={aboveLimit}>
+      <div className={classes.root}>
+        <Alert severity="warning">
+          <AlertTitle>Warning</AlertTitle>
+          The files you are trying to upload are above the recommended size. The chunks may not be synchronised properly
+          over the network.
+        </Alert>
+      </div>
+    </Collapse>
+  )
+}

src/components/AlertVersion.tsx

@@ -1,54 +0,0 @@
-import { ReactElement, useState } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
-import Collapse from '@material-ui/core/Collapse'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
-import { useStatusNodeVersion } from '../hooks/status'
-import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-  }),
-)
-
-export default function VersionAlert(): ReactElement | null {
-  const classes = useStyles()
-  const { isLoading, userVersion } = useStatusNodeVersion()
-  const [open, setOpen] = useState<boolean>(true)
-
-  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === userVersion
-
-  if (isLoading) return null
-
-  return (
-    <Collapse in={!isExactlySupportedBeeVersion && open}>
-      <div className={classes.root}>
-        <Alert
-          severity="warning"
-          action={
-            <IconButton
-              aria-label="close"
-              color="inherit"
-              size="small"
-              onClick={() => {
-                setOpen(false)
-              }}
-            >
-              <CloseIcon fontSize="inherit" />
-            </IconButton>
-          }
-        >
-          <AlertTitle>Warning</AlertTitle>
-          Your Bee node version (<code>{userVersion}</code>) does not exactly match the Bee version we tested the Bee
-          Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality may not
-          work properly.
-        </Alert>
-      </div>
-    </Collapse>
-  )
-}

src/components/Capacity.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react'
+
+interface Props {
+  width: string
+  usage: number
+}
+
+export function Capacity({ width, usage }: Props): ReactElement {
+  const integerUsage = Math.round(usage * 100)
+  const used = integerUsage + '%'
+  const free = 100 - 2 - integerUsage + '%'
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', height: '100%', width }}>
+      <div style={{ display: 'flex', height: '4px', width: '100%' }}>
+        <div style={{ width: used, background: '#dd7200' }} />
+        <div style={{ width: '2%' }} />
+        <div style={{ width: free, background: '#c9c9c9' }} />
+      </div>
+    </div>
+  )
+}

src/components/Card.tsx

@@ -0,0 +1,93 @@
+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 {
+  icon: ReactElement
+  title: string
+  subtitle: string
+  buttonProps: SwarmButtonProps
+  status: CheckState
+}
+
+const useStyles = (backgroundColor: string) =>
+  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',
+        },
+      },
+    },
+  }))
+
+export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
+  const backgroundColor = status === CheckState.ERROR ? 'white' : '#f3f3f3'
+  const { className, ...rest } = buttonProps
+  const { classes } = useStyles(backgroundColor)()
+
+  let statusIcon = null
+
+  if (status === CheckState.OK) {
+    statusIcon = <Check size="13" color="#09ca6c" />
+  } 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 (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <div className={classes.iconWrapper}>
+          {icon}
+          {statusIcon}
+        </div>
+        <Typography variant="h2" style={{ marginBottom: '8px' }}>
+          {title}
+        </Typography>
+        <Typography variant="caption">{subtitle}</Typography>
+      </div>
+      <SwarmButton className={[classes.button, className].join(' ')} {...rest} />
+    </div>
+  )
+}

src/components/CashoutModal.tsx

@@ -1,25 +1,25 @@
-import { ReactElement, useState } from 'react'
-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 { Container, CircularProgress } from '@material-ui/core'
+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 { beeDebugApi } from '../services/bee'
-
-import EthereumAddress from './EthereumAddress'
+import { Context as SettingsContext } from '../providers/Settings'
 
 interface Props {
   peerId: string
   uncashedAmount: string
 }
 
-export default function DepositModal({ peerId, uncashedAmount }: Props): ReactElement {
+export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactElement {
   const [open, setOpen] = useState<boolean>(false)
   const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
+  const { beeApi } = useContext(SettingsContext)
   const { enqueueSnackbar } = useSnackbar()
 
   const handleClickOpen = () => {
@@ -31,21 +31,19 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
   }
 
   const handleCashout = () => {
-    if (peerId) {
+    if (peerId && beeApi) {
       setLoadingCashout(true)
-      beeDebugApi.chequebook
-        .peerCashout(peerId)
+      beeApi
+        .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)
-          enqueueSnackbar(
-            <span>
-              Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res} network={'goerli'} />
-            </span>,
-            { variant: 'success' },
-          )
+          enqueueSnackbar(<span>Successfully cashed out cheque. Transaction {res.toHex()}</span>, {
+            variant: 'success',
+          })
         })
         .catch((e: Error) => {
+          // eslint-disable-next-line no-console
+          console.error(e)
           enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
         })
         .finally(() => {
@@ -58,8 +56,8 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
 
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
-        Cashout
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
+        Cash out peer {peerId.slice(0, 8)}[…]
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
@@ -77,7 +75,7 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
             )}
             {!loadingCashout && (
               <span>
-                Are you sure you want to cashout <strong>{uncashedAmount} BZZ</strong> from Peer{' '}
+                Are you sure you want to cashout <strong>{uncashedAmount} xBZZ</strong> from Peer{' '}
                 <strong>{peerId}</strong>?
               </span>
             )}

src/components/ChainSync.tsx

@@ -0,0 +1,30 @@
+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)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!beeApi) {
+        return
+      }
+
+      // eslint-disable-next-line no-console
+      beeApi.getChainState().then(setChainState).catch(console.error)
+    }, CHAIN_STATE_INTERVAL_MS)
+
+    return () => clearInterval(interval)
+  })
+
+  return (
+    <ExpandableListItem label="Chain state" value={chainState ? `${chainState.block} / ${chainState.chainTip}` : '-'} />
+  )
+}

src/components/ClipboardCopy.tsx

@@ -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 'react-feather'
+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>
   )

src/components/CloseButton.tsx

@@ -0,0 +1,24 @@
+import { Close } from '@mui/icons-material'
+import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    padding: theme.spacing(1),
+    cursor: 'pointer',
+  },
+}))
+
+export function CloseButton({ onClose }: Props): ReactElement {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.wrapper} onClick={onClose}>
+      <Close />
+    </div>
+  )
+}

src/components/Code.tsx

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+interface Props {
+  children: string
+  prettify?: boolean
+}
+
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    overflow: 'scroll',
+    background: '#ffffff',
+  },
+  pre: {
+    maxHeight: '6em',
+    padding: theme.spacing(2),
+  },
+}))
+
+function prettifyString(string: string): string {
+  try {
+    return JSON.stringify(JSON.parse(string), null, 4)
+  } catch {
+    return string
+  }
+}
+
+export function Code({ children, prettify }: Props): ReactElement {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.wrapper}>
+      <pre className={classes.pre}>{prettify ? prettifyString(children) : children}</pre>
+    </div>
+  )
+}

src/components/CodeBlockTabs.tsx

@@ -1,13 +1,9 @@
-import React, { ReactElement, useEffect } from 'react'
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Tabs, Tab, Box, Typography } from '@material-ui/core'
-import CodeBlock from './CodeBlock'
+import { ReactElement, useContext } from 'react'
 
-interface TabPanelProps {
-  children?: React.ReactNode
-  index: number
-  value: number
-}
+import { Context } from '../providers/Platform'
+
+import CodeBlock from './CodeBlock'
+import TabsContainer from './TabsContainer'
 
 interface Props {
   linux: string
@@ -15,133 +11,23 @@ interface Props {
   showLineNumbers?: boolean
 }
 
-function a11yProps(index: number) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  }
-}
-
-function getOS() {
-  const userAgent = window.navigator.userAgent
-  const platform = window.navigator.platform
-  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
-  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
-  const iosPlatforms = ['iPhone', 'iPad', 'iPod']
-
-  if (macosPlatforms.includes(platform)) return 'macOS'
-
-  if (iosPlatforms.includes(platform)) return 'iOS'
-
-  if (windowsPlatforms.includes(platform)) return 'windows'
-
-  if (/Android/.test(userAgent)) return 'android'
-
-  if (/Linux/.test(platform)) return 'linux'
-
-  return null
-}
-
 export default function CodeBlockTabs(props: Props): ReactElement {
-  const [value, setValue] = React.useState(0)
-
-  const handleChange = (event: React.ChangeEvent<unknown>, newValue: number) => {
-    setValue(newValue)
-  }
-
-  useEffect(() => {
-    const os = getOS()
-
-    if (os === 'windows') {
-      setValue(0)
-    } else if (os === 'linux') {
-      setValue(0)
-    } else if (os === 'macOS') {
-      setValue(1)
-    }
-  }, [])
-
-  function TabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props
-
-    return (
-      <div
-        role="tabpanel"
-        hidden={value !== index}
-        id={`simple-tabpanel-${index}`}
-        aria-labelledby={`simple-tab-${index}`}
-        {...other}
-      >
-        {value === index && (
-          <Box style={{ marginTop: '-12px' }}>
-            <Typography component="div">{children}</Typography>
-          </Box>
-        )}
-      </div>
-    )
-  }
-
-  const AntTabs = withStyles({
-    root: {
-      borderBottom: '1px solid #e8e8e8',
-    },
-    indicator: {
-      backgroundColor: '#3f51b5',
-    },
-  })(Tabs)
-
-  interface StyledTabProps {
-    label: string
-  }
-
-  const AntTab = withStyles((theme: Theme) =>
-    createStyles({
-      root: {
-        textTransform: 'none',
-        minWidth: 72,
-        backgroundColor: 'transparent',
-        fontWeight: theme.typography.fontWeightRegular,
-        marginRight: theme.spacing(4),
-        fontFamily: [
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"',
-        ].join(','),
-        '&:hover': {
-          color: '#3f51b5',
-          opacity: 1,
-        },
-        '&$selected': {
-          color: '#3f51b5',
-          fontWeight: theme.typography.fontWeightMedium,
-        },
-        '&:focus': {
-          color: '#3f51b5',
-        },
-      },
-      selected: {},
-    }),
-  )((props: StyledTabProps) => <Tab disableRipple {...props} />)
+  const { platform, setPlatform } = useContext(Context)
 
   return (
-    <div>
-      <AntTabs style={{ marginTop: '12px' }} value={value} onChange={handleChange} aria-label="ant example">
-        <AntTab label="Linux" {...a11yProps(0)} />
-        <AntTab label="MacOS" {...a11yProps(1)} />
-      </AntTabs>
-      <TabPanel value={value} index={0}>
-        <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />
-      </TabPanel>
-    </div>
+    <TabsContainer
+      index={platform}
+      indexChanged={setPlatform}
+      values={[
+        {
+          label: 'Linux',
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />,
+        },
+        {
+          label: 'macOS',
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />,
+        },
+      ]}
+    />
   )
 }

src/components/ConnectToHost.tsx

@@ -1,62 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import { TextField, Button, CircularProgress, Container } from '@material-ui/core'
-
-interface Props {
-  defaultHost?: string
-  hostName: string
-}
-
-export default function ConnectToHost(props: Props): ReactElement {
-  const [hostInputVisible, toggleHostInputVisibility] = useState(false)
-  const [connectingToHost, setConnectingToHost] = useState(false)
-  const [host, setHost] = useState('')
-
-  const handleNewHostConnection = () => {
-    if (host) {
-      setConnectingToHost(true)
-      sessionStorage.setItem(props.hostName, host)
-      toggleHostInputVisibility(!hostInputVisible)
-      window.location.reload()
-    }
-  }
-
-  return (
-    <div>
-      {
-        // FIXME: this should be broken up
-        /* eslint-disable no-nested-ternary */
-        hostInputVisible ? (
-          <div style={{ display: 'flex' }}>
-            <TextField
-              defaultValue={props.defaultHost}
-              label="Enter host"
-              variant="outlined"
-              size="small"
-              onChange={e => setHost(e.target.value)}
-              style={{ marginRight: '15px', minWidth: '300px' }}
-            />
-            <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
-              Connect
-            </Button>
-            <Button
-              style={{ marginLeft: '7px' }}
-              onClick={() => toggleHostInputVisibility(!hostInputVisible)}
-              size="small"
-            >
-              Cancel
-            </Button>
-          </div>
-        ) : connectingToHost ? (
-          <Container style={{ textAlign: 'center', padding: '0px' }}>
-            <CircularProgress size={20} />
-          </Container>
-        ) : (
-          <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
-            Change host
-          </Button>
-        )
-        /* eslint-enable no-nested-ternary */
-      }
-    </div>
-  )
-}

src/components/DocumentationText.tsx

@@ -0,0 +1,20 @@
+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()(() => ({
+  text: {
+    color: '#606060',
+    fontSize: '0.9rem',
+  },
+}))
+
+export function DocumentationText({ children }: Props): ReactElement {
+  const { classes } = useStyles()
+
+  return <Typography className={classes.text}>{children}</Typography>
+}

src/components/ErrorBoundary.tsx

@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactElement } from 'react'
 
 interface Props {
   children: ReactElement
+  errorReporting?: (err: Error) => void
 }
 
 interface State {
@@ -9,8 +10,11 @@ interface State {
 }
 
 export default class ErrorBoundary extends Component<Props, State> {
+  private errorReporting?: (err: Error) => void
+
   constructor(props: Props) {
     super(props)
+    this.errorReporting = props.errorReporting
     this.state = { error: null }
   }
 
@@ -20,8 +24,12 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // You can also log the error to an error reporting service
-    console.error({ error, errorInfo }) // eslint-disable-line
+    if (this.errorReporting) {
+      this.errorReporting(error)
+    }
+
+    // eslint-disable-next-line no-console
+    console.error({ error, errorInfo })
   }
 
   render(): ReactElement {

src/components/EthereumAddress.tsx

@@ -1,57 +0,0 @@
-import { Typography } from '@material-ui/core/'
-import QRCodeModal from './QRCodeModal'
-import ClipboardCopy from './ClipboardCopy'
-
-import Identicon from 'react-identicons'
-import { ReactElement } from 'react'
-
-interface Props {
-  address: string | undefined
-  network?: string
-  hideBlockie?: boolean
-  transaction?: boolean
-  truncate?: boolean
-}
-
-export default function EthereumAddress(props: Props): ReactElement {
-  return (
-    <Typography component="div" variant="subtitle1">
-      {props.address ? (
-        <div style={{ display: 'flex' }}>
-          {props.hideBlockie ? null : (
-            <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={props.address} />
-            </div>
-          )}
-          <div>
-            <a
-              style={
-                props.truncate
-                  ? {
-                      marginRight: '7px',
-                      maxWidth: '200px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                      display: 'block',
-                    }
-                  : { marginRight: '7px' }
-              }
-              href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${
-                props.transaction ? 'tx' : 'address'
-              }/${props.address}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {props.address}
-            </a>
-          </div>
-          <QRCodeModal value={props.address} label={'Ethereum Address'} />
-          <ClipboardCopy value={props.address} />
-        </div>
-      ) : (
-        '-'
-      )}
-    </Typography>
-  )
-}

src/components/EthereumAddressCard.tsx

@@ -1,75 +0,0 @@
-import React, { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-
-import EthereumAddress from '../components/EthereumAddress'
-import { Skeleton } from '@material-ui/lab'
-
-import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-around',
-      flexWrap: 'wrap',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      flex: '1 0 auto',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  isLoadingNodeAddresses: boolean
-  chequebookAddress: ChequebookAddressResponse | null
-  isLoadingChequebookAddress: boolean
-}
-
-function EthereumAddressCard(props: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      {props.isLoadingNodeAddresses ? (
-        <div style={{ padding: '16px' }}>
-          <Skeleton width={300} height={30} animation="wave" />
-          <Skeleton width={300} height={50} animation="wave" />
-        </div>
-      ) : (
-        <div className={classes.details}>
-          <CardContent className={classes.content}>
-            <Typography variant="subtitle1" gutterBottom>
-              Ethereum Address
-            </Typography>
-            <EthereumAddress address={props.nodeAddresses?.ethereum} network={'goerli'} />
-          </CardContent>
-        </div>
-      )}
-      {props.isLoadingChequebookAddress ? (
-        <div style={{ padding: '16px' }}>
-          <Skeleton width={300} height={30} animation="wave" />
-          <Skeleton width={300} height={50} animation="wave" />
-        </div>
-      ) : (
-        <div className={classes.details}>
-          <CardContent className={classes.content}>
-            <Typography variant="subtitle1" gutterBottom>
-              Chequebook Contract Address
-            </Typography>
-            <EthereumAddress address={props.chequebookAddress?.chequebookAddress} network={'goerli'} />
-          </CardContent>
-        </div>
-      )}
-    </Card>
-  )
-}
-
-export default EthereumAddressCard

src/components/ExpandableElement.tsx

@@ -0,0 +1,60 @@
+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 => ({
+  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),
+    '& > li:last-of-type': {
+      marginBottom: theme.spacing(2),
+    },
+  },
+  infoText: {
+    color: '#c9c9c9',
+  },
+}))
+
+interface Props {
+  children: ReactNode
+  expandable: ReactNode
+  defaultOpen?: boolean
+}
+
+export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
+  const { classes } = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <div className={`${classes.root} ${classes.rootLevel2}`}>
+      <ListItemButton onClick={handleClick} className={classes.header}>
+        {children}
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={classes.contentLevel12}>{expandable}</div>
+      </Collapse>
+    </div>
+  )
+}

src/components/ExpandableList.tsx

@@ -0,0 +1,82 @@
+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 => ({
+  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',
+  },
+}))
+
+interface Props {
+  children?: ReactNode
+  label: ReactNode
+  info?: ReactNode
+  level?: 0 | 1 | 2
+  defaultOpen?: boolean
+}
+
+export default function ExpandableList({ children, label, level, defaultOpen, info }: Props): ReactElement | null {
+  const { classes } = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  let rootLevelClass = ''
+  let typographyVariant: 'h1' | 'h2' | 'h3' = 'h1'
+  let contentLevelClass = classes.contentLevel0
+
+  if (level === 1) {
+    rootLevelClass = classes.rootLevel1
+    typographyVariant = 'h2'
+    contentLevelClass = classes.contentLevel12
+  } else if (level === 2) {
+    rootLevelClass = classes.rootLevel2
+    typographyVariant = 'h3'
+    contentLevelClass = classes.contentLevel12
+  }
+
+  return (
+    <div className={`${classes.root} ${rootLevelClass}`}>
+      <ListItemButton onClick={handleClick} className={classes.header}>
+        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
+        <Flex>
+          {!open && (
+            <Typography variant="body2" className={classes.infoText}>
+              {info}
+            </Typography>
+          )}
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </Flex>
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={contentLevelClass}>{children}</div>
+      </Collapse>
+    </div>
+  )
+}

src/components/ExpandableListItem.tsx

@@ -0,0 +1,58 @@
+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 => ({
+  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,
+    },
+  },
+}))
+
+interface Props {
+  label?: ReactNode
+  value?: ReactNode
+  tooltip?: string
+}
+
+export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
+  const { classes } = useStyles()
+
+  return (
+    <ListItemButton className={classes.header}>
+      <Box display="flex" flexDirection="row" alignItems="center" width="100%">
+        {label && (
+          <Box flex={2}>
+            <Typography variant="body1">{label}</Typography>
+          </Box>
+        )}
+        {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>
+  )
+}

src/components/ExpandableListItemActions.tsx

@@ -0,0 +1,44 @@
+import { Grid } from '@mui/material'
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+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()
+
+  if (Array.isArray(children)) {
+    return (
+      <div className={classes.wrapper}>
+        {children
+          // Exclude falsy values to allow conditional rendering
+          .filter(x => x)
+          .map((a, i) => (
+            <div key={i} className={classes.action}>
+              {a}
+            </div>
+          ))}
+      </div>
+    )
+  }
+
+  return (
+    <Grid container direction="row">
+      <Grid className={classes.action}>{children}</Grid>
+    </Grid>
+  )
+}

src/components/ExpandableListItemInput.tsx

@@ -0,0 +1,189 @@
+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 => ({
+  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,
+    },
+    '&:focus-within': {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+  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',
+  },
+}))
+
+interface Props {
+  label: string
+  value?: string
+  placeholder?: string
+  helperText?: string
+  expandedOnly?: boolean
+  confirmLabel?: string
+  confirmLabelDisabled?: boolean
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
+  loading?: boolean
+  onChange?: (value: string) => void
+  onConfirm?: (value: string) => void
+  mapperFn?: (value: string) => string
+  locked?: boolean
+}
+
+export default function ExpandableListItemInput({
+  label,
+  value = '',
+  placeholder,
+  helperText,
+  expandedOnly,
+  confirmLabel,
+  confirmLabelDisabled,
+  confirmIcon,
+  loading,
+  onChange,
+  onConfirm,
+  mapperFn,
+  locked,
+}: Props): ReactElement | null {
+  const { classes } = useStyles()
+  const [open, setOpen] = useState(Boolean(expandedOnly))
+  const [inputValue, setInputValue] = useState<string>(value || '')
+  const toggleOpen = () => setOpen(!open)
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    let newValue = e.target.value
+
+    if (mapperFn) {
+      newValue = mapperFn(newValue)
+    }
+    setInputValue(newValue)
+
+    if (onChange) onChange(newValue)
+  }
+
+  return (
+    <>
+      <ListItemButton className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Box display="flex" flexDirection="column" width="100%">
+          <Box display="flex" flexDirection="row" alignItems="center" width="100%">
+            {label && (
+              <Box flex={1} minWidth={0}>
+                <Typography variant="body1" className={classes.unselectableLabel} component="span">
+                  {label}
+                </Typography>
+              </Box>
+            )}
+            <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>
+            <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>
+        </Box>
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <Box mt={2}>
+          <ExpandableListItemActions>
+            <SwarmButton
+              disabled={
+                loading ||
+                inputValue === value ||
+                Boolean(confirmLabelDisabled) ||
+                (inputValue === '' && value === undefined)
+              }
+              loading={loading}
+              iconType={confirmIcon ?? Check}
+              onClick={() => {
+                onConfirm?.(inputValue.trim())
+              }}
+            >
+              {confirmLabel || 'Save'}
+            </SwarmButton>
+            <SwarmButton
+              disabled={loading || inputValue === value || inputValue === ''}
+              iconType={X}
+              onClick={() => setInputValue(value || '')}
+              cancel
+            >
+              Cancel
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
+      </Collapse>
+    </>
+  )
+}

src/components/ExpandableListItemKey.tsx

@@ -0,0 +1,117 @@
+import { Collapse, Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
+import { ReactElement, useState } from 'react'
+import Eye from 'remixicon-react/EyeLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
+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,
+    },
+    '&:focus-within': {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+  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),
+  },
+}))
+
+interface Props {
+  label: string
+  value: string
+  expanded?: boolean
+}
+
+const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
+
+function isPrefixedHexString(s: unknown): boolean {
+  return typeof s === 'string' && /^0x[0-9a-f]+$/i.test(s)
+}
+
+const split = (s: string): string[] => {
+  const nonPrefixLength = lengthWithoutPrefix(s)
+
+  if (nonPrefixLength % 6 === 0) return s.match(/(0x|.{6})/gi) || []
+
+  return s.match(/(0x|.{1,8})/gi) || []
+}
+
+export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
+  const { classes } = useStyles()
+
+  const [open, setOpen] = useState(expanded || false)
+  const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
+  const toggleOpen = () => setOpen(!open)
+
+  const splitValues = split(value)
+  const hasPrefix = isPrefixedHexString(value)
+  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
+    splitValues[splitValues.length - 1]
+  }`
+
+  return (
+    <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" component="span">
+              {label}
+            </Typography>
+          )}
+          <Typography variant="body2" component="span">
+            {!open && (
+              <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <span onClick={handleCopy}>{value ? spanText : ''}</span>
+                </Tooltip>
+              </span>
+            )}
+            <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+              {open ? <Minus strokeWidth={1} /> : <Eye strokeWidth={1} />}
+            </IconButton>
+          </Typography>
+        </Grid>
+        <Collapse in={open} timeout="auto" unmountOnExit>
+          <div className={classes.content}>
+            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+              {/* 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>
+              </span>
+            </Tooltip>
+          </div>
+        </Collapse>
+      </Grid>
+    </ListItemButton>
+  )
+}

src/components/ExpandableListItemLink.tsx

@@ -0,0 +1,109 @@
+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'
+
+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,
+    },
+    '&:focus-within': {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+  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),
+  },
+  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?: NavigationType
+  allowClipboard?: boolean
+}
+
+export default function ExpandableListItemLink({
+  label,
+  value,
+  link,
+  navigationType = NavigationType.NEW_WINDOW,
+  allowClipboard = true,
+}: Props): ReactElement | null {
+  const { classes } = useStyles()
+  const navigate = useNavigate()
+  const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
+
+  const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
+
+  function onNavigation() {
+    if (navigationType === NavigationType.NEW_WINDOW) {
+      window.open(link || value)
+    } else {
+      navigate(link || value)
+    }
+  }
+
+  return (
+    <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}>
+                  <span onClick={handleCopy}>{displayValue}</span>
+                </Tooltip>
+              </span>
+            )}
+            {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+          </Typography>
+          <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>
+  )
+}

src/components/ExpandableListItemNote.tsx

@@ -0,0 +1,30 @@
+import { Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+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()
+
+  return (
+    <ListItemButton className={classes.header}>
+      <Typography variant="body1" className={classes.typography}>
+        {children}
+      </Typography>
+    </ListItemButton>
+  )
+}

src/components/FitAudio.tsx

@@ -0,0 +1,31 @@
+import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(() => ({
+  audio: {
+    width: '100%',
+    maxWidth: '250px',
+  },
+}))
+
+interface AudioProps {
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitAudio(props: AudioProps): ReactElement {
+  const { classes } = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  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 />
+}

src/components/FitImage.tsx

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(() => ({
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+}))
+
+interface Props {
+  alt: string
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitImage(props: Props): ReactElement {
+  const { classes } = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  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} />
+}

src/components/FitVideo.tsx

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(() => ({
+  video: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+}))
+
+interface VideoProps {
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitVideo(props: VideoProps): ReactElement {
+  const { classes } = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  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 />
+}

src/components/Flex.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+export function Flex({ children }: Props) {
+  return <div style={{ display: 'flex' }}>{children}</div>
+}