chore(master): release 0.15.0 (#367)

Bumps [ts-node](https://github.com/TypeStrong/ts-node) from 10.4.0 to 10.7.0.
- [Release notes](https://github.com/TypeStrong/ts-node/releases)
- [Commits](https://github.com/TypeStrong/ts-node/compare/v10.4.0...v10.7.0)

---
updated-dependencies:
- dependency-name: ts-node
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.babelrc.js

@@ -0,0 +1,50 @@
+'use strict'
+
+module.exports = function (api) {
+  const targets = '>1% and not ie 11 and not dead'
+  api.cache(true)
+  api.cacheDirectory = true
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          targets,
+          modules: false,
+        }
+      ],
+      ['@babel/preset-react', {runtime: 'automatic' }]
+    ],
+    plugins: [
+      [
+        "babel-plugin-tsconfig-paths",
+        {
+          "relative": true,
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".ts",
+            ".tsx",
+            ".es",
+            ".es6",
+            ".mjs"
+          ],
+          "rootDir": ".",
+          "tsconfig": "tsconfig.lib.json",
+        }
+      ],
+      "@babel/plugin-proposal-numeric-separator",
+      "syntax-dynamic-import",
+      '@babel/plugin-proposal-class-properties',
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ]
+    ]
+  }
+}

.depcheckrc.json

@@ -0,0 +1,19 @@
+{
+  "ignores": [
+    "@types/jest", 
+    "@commitlint/config-conventional", 
+    "@types/react-router",
+    "@babel/core",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime",
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    "babel-loader",
+    "babel-plugin-syntax-dynamic-import",
+    "babel-plugin-tsconfig-paths",
+    "file-loader",
+    "ts-node",
+    "webpack-cli"
+  ]
+}

.env.development

@@ -3,5 +3,5 @@ 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_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

.env.production

@@ -1,4 +1,6 @@
 REACT_APP_BEE_HOST=http://localhost:1633
 REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
 REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
+REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
+REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
 REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

.eslintrc

@@ -1,9 +1,16 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:prettier/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "react-app",
+    "react-app/jest"
   ],
   "env": {
     "browser": true,

.gitattributes

@@ -0,0 +1,4 @@
+* text=auto eol=lf 
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary

.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 npm
+  - package-ecosystem: 'npm'
+    # Look for `package.json` and `lock` files in the `root` directory
+    directory: '/'
+    # Check the npm registry for updates every day (weekdays)
+    schedule:
+      interval: 'weekly'
+    # Always increase the version in package.json as well (for patch versions by default only package-lock.json i updated)
+    versioning-strategy: increase

.github/semantic.yml

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

.github/workflows/check.yaml

@@ -16,6 +16,11 @@ jobs:
       matrix:
         node-version: [14.x]
 
+    env:
+      REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
+      REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
+      REACT_APP_DEV_MODE: 1
+
     steps:
       - uses: actions/checkout@v2
         with:
@@ -42,10 +47,45 @@ jobs:
       - name: Commit linting
         uses: wagoid/commitlint-github-action@v2
 
-      # - name: Code linting
+      - name: Code linting
-      #   run: npm run lint:check
+        run: npm run lint:check
-      #   env:
+        env:
-      #     CI: true
+          CI: true
+
+      - name: Dependency check
+        run: npm run depcheck
+
+      - name: Types check
+        run: npm run check:types
+
+      - name: Types build
+        run: npm run compile:types
+
+      - name: Update supported Bee action
+        uses: ethersphere/update-supported-bee-action@v1
+        if: github.ref == 'refs/heads/master'
+        with:
+          token: ${{ secrets.GHA_PAT_BASIC }}
 
       - name: Build
         run: npm run build
+
+      - name: Build Component
+        run: npm run build:component
+
+      - name: Create preview
+        uses: ethersphere/swarm-actions/pr-preview@v0
+        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@v0
+        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

@@ -15,6 +15,8 @@ jobs:
           node-version: 14
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
+      - run: npm run compile:types
+      - run: npm run build:component
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.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

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/lib
 
 # misc
 .DS_Store

CHANGELOG.md

@@ -1,5 +1,215 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* added Dockerfile ([#75](https://www.github.com/ethersphere/bee-dashboard/issues/75)) ([aab0462](https://www.github.com/ethersphere/bee-dashboard/commit/aab0462047a3fcd87ba258b5486aede922865b1e))
+* added tolerance to version check and warning if not exact to what we tested ([#133](https://www.github.com/ethersphere/bee-dashboard/issues/133)) ([353db10](https://www.github.com/ethersphere/bee-dashboard/commit/353db10080b85b0e12e13991665297ec262d2806))
+* postage stamps support ([#115](https://www.github.com/ethersphere/bee-dashboard/issues/115)) ([4074a9d](https://www.github.com/ethersphere/bee-dashboard/commit/4074a9de5dae4aaa1654f7dfdd3e3343eaf2bf9b))
+* unified notification with notistack ([#127](https://www.github.com/ethersphere/bee-dashboard/issues/127)) ([bec8405](https://www.github.com/ethersphere/bee-dashboard/commit/bec84051a9582bf62a23f2080a6587a9f458b969))
+* upload files with postage stamps ([#126](https://www.github.com/ethersphere/bee-dashboard/issues/126)) ([92c727e](https://www.github.com/ethersphere/bee-dashboard/commit/92c727e5f5772f612fe04b750ef5373780ccba5c))
+
+
+### Bug Fixes
+
+* add git attributes ([#123](https://www.github.com/ethersphere/bee-dashboard/issues/123)) ([07f987e](https://www.github.com/ethersphere/bee-dashboard/commit/07f987e069cda2f28bc5ebf8958b9b0aa9d875dc))
+* add prod env variables ([#121](https://www.github.com/ethersphere/bee-dashboard/issues/121)) ([a603a86](https://www.github.com/ethersphere/bee-dashboard/commit/a603a86c1adcfb0dcc9995c95c4ee4411c41c25a))
+* replace http-serve with serve-handler ([#122](https://www.github.com/ethersphere/bee-dashboard/issues/122)) ([ba9b498](https://www.github.com/ethersphere/bee-dashboard/commit/ba9b498488dca989bbbda6110d0d22753b33ae8c))
+* troubleshooting on a mac and clearer CORS setup guide ([#131](https://www.github.com/ethersphere/bee-dashboard/issues/131)) ([9fee1aa](https://www.github.com/ethersphere/bee-dashboard/commit/9fee1aa68ac6dbc53615332bc0142a06f3e5f03f))
+
 ## [0.2.0](https://www.github.com/ethersphere/bee-dashboard/compare/v0.1.0...v0.2.0) (2021-05-20)
 
 This release supports the [Bee's 0.6.0 release](https://github.com/ethersphere/bee/releases/tag/v0.6.0) and is fully

CODEOWNERS

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

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:15.14-alpine AS build
+WORKDIR /src
+COPY . .
+RUN npm ci
+RUN npm run build
+
+FROM node:15.14-alpine AS final
+RUN npm i -g serve
+WORKDIR /app
+COPY --from=build /src/build .
+EXPOSE 8080
+ENTRYPOINT ["serve", "-l", "8080"]

README.md

@@ -3,47 +3,89 @@
 [![](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)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
 ![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
 ![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
 
-> An app which helps users to setup their Bee node and do actions like cash out cheques.
+> 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)
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.5.1-d0a77598<!-- SUPPORTED_BEE_END -->**.
+Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
+[official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
+[releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 
-| Node Setup | Browse & Upload Files | Accounting | Peers | Settings |
+![Status page](/ui_samples/info.png)
-|-------|---------|-------|----------|------|
-| ![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) |
 
+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Postage Stamps                           |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Peers](/ui_samples/postage_stamps.png) |
 
 ## Table of Contents
 
 - [Install](#install)
 - [Usage](#usage)
+  - [Terminal](#terminal)
+  - [Docker](#docker)
 - [Contribute](#contribute)
+- [Development](#development)
+- [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).
-$ npm install -g @ethersphere/bee-dashboard
+
-$ bee-dashboard
+```sh
+npm install -g @ethersphere/bee-dashboard
 ```
 
-## Development
+## 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)
+
+### Terminal
+
+To start use:
+
+```sh
+bee-dashboard
+```
+
+This should open the webpage on [`http://localhost:8080`](http://localhost:8080)
+
+### Docker
+
+To build Docker image and run it, execute the following from inside project directory:
+
+```sh
+docker build . -t bee-dashboard
+docker run --rm -p 127.0.0.1:8080:8080 bee-dashboard
+```
+
+Bee dashboard is now available on [`http://localhost:8080`](http://localhost:8080)
+
+### Development
 
 ```sh
 git clone git@github.com:ethersphere/bee-dashboard.git
 
 cd  bee-dashboard
 
-npm ci
+npm i
-npm run build
+
-npm run serve
+npm start
 ```
 
-You can now access Bee Dashboard on [http://localhost:8080/](http://localhost:8080/)
+The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
+
+> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
 
 ## Contribute
 
@@ -51,13 +93,19 @@ 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 [Mattermost chat](https://beehive.ethswarm.org/swarm/channels/swarm-javascript) 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.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [0, 'always', Infinity], // disable commit body length restriction
+  },
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.2.0",
+  "version": "0.15.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -15,6 +15,8 @@
   "bin": {
     "bee-dashboard": "./serve.js"
   },
+  "main": "lib/App.js",
+  "types": "lib/src/App.d.ts",
   "bugs": {
     "url": "https://github.com/ethersphere/bee-dashboard/issues/"
   },
@@ -24,66 +26,109 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.9.0",
+    "@ethersphere/bee-js": "^3.3.4",
-    "@material-ui/core": "^4.11.3",
+    "@ethersphere/manifest-js": "1.1.0",
-    "@material-ui/icons": "^4.11.2",
+    "@ethersphere/swarm-cid": "^0.1.0",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/core": "4.12.3",
-    "@types/react-router": "^5.1.13",
+    "@material-ui/icons": "4.11.2",
-    "@types/react-router-dom": "^5.1.7",
+    "@material-ui/lab": "4.0.0-alpha.57",
-    "axios": "^0.21.1",
+    "axios": "0.24.0",
-    "bignumber.js": "^9.0.1",
+    "bignumber.js": "9.0.1",
-    "feather-icons": "^4.28.0",
+    "ethereumjs-wallet": "^1.0.2",
-    "http-serve": "^1.0.1",
+    "ethers": "^5.6.4",
-    "material-ui-dropzone": "^3.5.0",
+    "file-saver": "^2.0.5",
-    "qrcode.react": "^1.0.1",
+    "formik": "2.2.9",
-    "react": "^17.0.2",
+    "formik-material-ui": "3.0.1",
-    "react-copy-to-clipboard": "^5.0.3",
+    "jszip": "^3.7.1",
-    "react-dom": "^17.0.2",
+    "material-ui-dropzone": "3.5.0",
-    "react-feather": "^2.0.9",
+    "notistack": "1.0.10",
-    "react-identicons": "^1.2.5",
+    "opener": "1.5.2",
-    "react-router-dom": "^5.2.0",
+    "qrcode.react": "1.0.1",
-    "react-syntax-highlighter": "^15.4.3"
+    "react": ">= 17.0.2",
+    "react-copy-to-clipboard": "5.0.4",
+    "react-dom": ">= 17.0.2",
+    "react-feather": "2.0.9",
+    "react-identicons": "1.2.5",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
+    "react-syntax-highlighter": "15.4.4",
+    "semver": "7.3.5",
+    "serve-handler": "6.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
+    "@babel/core": "7.16.0",
-    "@testing-library/react": "^11.2.6",
+    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@testing-library/user-event": "^13.1.5",
+    "@babel/plugin-transform-runtime": "7.16.4",
-    "@types/jest": "^26.0.22",
+    "@babel/preset-env": "7.16.4",
-    "@types/node": "^14.14.41",
+    "@babel/preset-react": "7.16.7",
-    "@types/qrcode.react": "^1.0.1",
+    "@babel/preset-typescript": "7.16.0",
-    "@types/react": "^17.0.3",
+    "@commitlint/config-conventional": "14.1.0",
-    "@types/react-copy-to-clipboard": "^5.0.0",
+    "@testing-library/jest-dom": "5.16.4",
-    "@types/react-dom": "^17.0.3",
+    "@testing-library/react": "12.1.2",
-    "@types/react-syntax-highlighter": "^13.5.0",
+    "@testing-library/react-hooks": "^8.0.0",
-    "eslint": "^7.24.0",
+    "@types/cors": "^2.8.12",
-    "eslint-config-prettier": "^8.2.0",
+    "@types/express": "^4.17.13",
-    "eslint-plugin-jest": "^24.3.5",
+    "@types/file-saver": "2.0.4",
-    "eslint-plugin-prettier": "^3.4.0",
+    "@types/jest": "27.0.2",
-    "eslint-plugin-react": "^7.23.2",
+    "@types/qrcode.react": "1.0.2",
-    "prettier": "^2.2.1",
+    "@types/react": "17.0.34",
+    "@types/react-copy-to-clipboard": "5.0.2",
+    "@types/react-dom": "17.0.11",
+    "@types/react-router": "5.1.18",
+    "@types/react-router-dom": "5.3.2",
+    "@types/react-syntax-highlighter": "13.5.2",
+    "@types/semver": "7.3.9",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "babel-eslint": "10.1.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
+    "babel-plugin-tsconfig-paths": "1.0.2",
+    "cors": "^2.8.5",
+    "depcheck": "^1.4.3",
+    "eslint": "7.24.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-testing-library": "3.10.2",
+    "express": "^4.17.3",
+    "file-loader": "6.2.0",
+    "prettier": "2.4.1",
     "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
+    "ts-node": "^10.7.0",
-    "web-vitals": "^1.1.1"
+    "typescript": "4.4.4",
+    "web-vitals": "2.1.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
   },
   "scripts": {
     "prepare": "npm run build",
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
+    "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
     "test": "react-scripts test",
-    "serve": "http-serve ./build -o",
+    "serve": "node ./serve.js",
+    "depcheck": "depcheck .",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\""
+    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "check:types": "tsc --project tsconfig.lib.json"
   },
   "files": [
+    "lib",
     "build",
     "serve.js"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -95,5 +140,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=6.0.0",
+    "bee": ">=0.6.0"
   }
 }

public/index.html

@@ -6,13 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 
-    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <meta name="description" content="Bee Dashboard" />
-    <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

public/serve.json

@@ -0,0 +1,12 @@
+{
+    "trailingSlash": false,
+    "headers": [
+        {
+          "source" : "*",
+          "headers" : [{
+            "key" : "Cache-Control",
+            "value" : "max-age=3600"
+          }]
+        }
+    ]    
+}

serve.js

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

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

@@ -10,6 +10,6 @@ declare module 'react-identicons' {
     getColor?: () => string
   }
 
-  const Identicon = (props: Props): JSXElementConstructor => ReactNode
+  const Identicon = (props: Props): JSXElementConstructor => ReactNode //eslint-disable-line @typescript-eslint/no-unused-vars
   export default Identicon
 }

src/App.css

@@ -1,34 +1,63 @@
 @font-face {
-  font-family: "IBMPlexMono500";
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-Medium.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(assets/fonts/WorkSans/WorkSans-SemiBold.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBMPlexMono500';
   src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
   font-weight: 500;
 }
 @font-face {
-  font-family: "IBMPlexMono600";
+  font-family: 'IBMPlexMono600';
   src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
   font-weight: 600;
 }
 @font-face {
-  font-family: "IBMPlexMonoregular";
+  font-family: 'IBMPlexMonoregular';
   src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
   font-weight: 300;
 }
 @font-face {
-  font-family: "WorkSans-Italic-VariableFont_wght";
+  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";
+  font-family: 'WorkSans-VariableFont_wght';
   src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
   font-weight: 400;
 }
 
 .App {
-  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-family: 'Work Sans', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
 }
 
-a, button {  
+a,
-  font-family: "IBMPlexMono500" !important;
+button {
+  font-family: 'IBMPlexMono500' !important;
   color: #dd7700;
-}
+}

src/App.tsx

@@ -1,45 +1,52 @@
-import { ReactElement, useEffect, useState } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
-import './App.css'
-
-import { ThemeProvider } from '@material-ui/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider } from '@material-ui/core/styles'
+import { SnackbarProvider } from 'notistack'
+import React, { ReactElement } from 'react'
+import { HashRouter as Router } from 'react-router-dom'
+import './App.css'
+import Dashboard from './layout/Dashboard'
+import { Provider as BeeProvider } from './providers/Bee'
+import { Provider as FeedsProvider } from './providers/Feeds'
+import { Provider as FileProvider } from './providers/File'
+import { Provider as PlatformProvider } from './providers/Platform'
+import { Provider as SettingsProvider } from './providers/Settings'
+import { Provider as StampsProvider } from './providers/Stamps'
+import BaseRouter from './routes'
+import { theme } from './theme'
 
-import BaseRouter from './routes/routes'
+interface Props {
-import { lightTheme, darkTheme } from './theme'
+  beeApiUrl?: string
-
+  beeDebugApiUrl?: string
-const App = (): ReactElement => {
+  lockedApiSettings?: boolean
-  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 (
-    <div className="App">
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
-        <CssBaseline />
-        <Router>
-          <BaseRouter />
-        </Router>
-      </ThemeProvider>
-    </div>
-  )
 }
 
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
+  <div className="App">
+    <ThemeProvider theme={theme}>
+      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
+        <BeeProvider>
+          <StampsProvider>
+            <FileProvider>
+              <FeedsProvider>
+                <PlatformProvider>
+                  <SnackbarProvider>
+                    <Router>
+                      <>
+                        <CssBaseline />
+                        <Dashboard>
+                          <BaseRouter />
+                        </Dashboard>
+                      </>
+                    </Router>
+                  </SnackbarProvider>
+                </PlatformProvider>
+              </FeedsProvider>
+            </FileProvider>
+          </StampsProvider>
+        </BeeProvider>
+      </SettingsProvider>
+    </ThemeProvider>
+  </div>
+)
+
 export default App

src/assets/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,40 @@
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import { ReactElement } from 'react'
+
+const LIMIT = 100000000 // 100 megabytes
+
+interface Props {
+  files: File[]
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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

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

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/CashoutModal.tsx

@@ -1,14 +1,14 @@
-import { ReactElement, useState } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
-import { Snackbar, Container, CircularProgress } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
-
+import { ReactElement, useState, useContext } from 'react'
-import { beeDebugApi } from '../services/bee'
+import { Zap } from 'react-feather'
-
+import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 
 interface Props {
@@ -16,11 +16,11 @@ interface Props {
   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 [showToast, setToastVisibility] = useState<boolean>(false)
+  const { enqueueSnackbar } = useSnackbar()
-  const [toastContent, setToastContent] = useState<JSX.Element | null>(null)
+  const { beeDebugApi } = useContext(SettingsContext)
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -31,43 +31,38 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
   }
 
   const handleCashout = () => {
+    if (!beeDebugApi) return
+
     if (peerId) {
       setLoadingCashout(true)
-      beeDebugApi.chequebook
+      beeDebugApi
-        .peerCashout(peerId)
+        .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)
-          handleToast(
+          enqueueSnackbar(
             <span>
               Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res.transactionHash} network={'goerli'} />
+              <EthereumAddress hideBlockie transaction address={res} />
             </span>,
+            { variant: 'success' },
           )
         })
-        .catch(() => {
+        .catch((e: Error) => {
-          // FIXME: handle errors more gracefully
+          enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
-          handleToast(<span>Error with cashout</span>)
         })
         .finally(() => {
           setLoadingCashout(false)
         })
     } else {
-      handleToast(<span>Peer Id invalid</span>)
+      enqueueSnackbar(<span>Peer Id invalid</span>, { variant: 'error' })
     }
   }
 
-  const handleToast = (text: JSX.Element) => {
-    setToastContent(text)
-    setToastVisibility(true)
-    setTimeout(() => setToastVisibility(false), 7000)
-  }
-
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cashout
+        Cash out peer {peerId.substr(0, 8)}[…]
       </Button>
-      <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={showToast} message={toastContent} />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
         <DialogContent>

src/components/ClipboardCopy.tsx

@@ -1,25 +1,21 @@
-import { ReactElement, useState } from 'react'
+import type { ReactElement } from 'react'
-import { IconButton, Snackbar } from '@material-ui/core'
+import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Clipboard } from 'react-feather'
+import { useSnackbar } from 'notistack'
 
 interface Props {
   value: string
 }
 
-export default function ClipboardCopy(props: Props): ReactElement {
+export default function ClipboardCopy({ value }: Props): ReactElement {
-  const [copied, setCopied] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
-
+  const handleCopy = () => enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })
-  const handleCopy = () => {
-    setCopied(true)
-    setTimeout(() => setCopied(false), 3000)
-  }
 
   return (
     <div style={{ marginRight: '3px', marginLeft: '3px' }}>
-      <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={copied} message="Copied" />
       <IconButton color="primary" size="small" onClick={handleCopy}>
-        <CopyToClipboard text={props.value}>
+        <CopyToClipboard text={value}>
           <Clipboard style={{ height: '20px' }} />
         </CopyToClipboard>
       </IconButton>

src/components/CloseButton.tsx

@@ -0,0 +1,26 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { Close } from '@material-ui/icons'
+import { ReactElement } from 'react'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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,38 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: string
+  prettify?: boolean
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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,7 @@
-import React, { ReactElement, useEffect } from 'react'
+import { ReactElement, useContext } from 'react'
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles'
+import TabsContainer from './TabsContainer'
-import { Tabs, Tab, Box, Typography } from '@material-ui/core'
 import CodeBlock from './CodeBlock'
-
+import { Context } from '../providers/Platform'
-interface TabPanelProps {
-  children?: React.ReactNode
-  index: number
-  value: number
-}
 
 interface Props {
   linux: string
@@ -15,133 +9,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 { platform, setPlatform } = useContext(Context)
-
-  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} />)
 
   return (
-    <div>
+    <TabsContainer
-      <AntTabs style={{ marginTop: '12px' }} value={value} onChange={handleChange} aria-label="ant example">
+      index={platform}
-        <AntTab label="Linux" {...a11yProps(0)} />
+      indexChanged={setPlatform}
-        <AntTab label="MacOS" {...a11yProps(1)} />
+      values={[
-      </AntTabs>
+        {
-      <TabPanel value={value} index={0}>
+          label: 'Linux',
-        <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.linux} />,
-      </TabPanel>
+        },
-      <TabPanel value={value} index={1}>
+        {
-        <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />
+          label: 'macOS',
-      </TabPanel>
+          component: <CodeBlock showLineNumbers={props.showLineNumbers} language="bash" code={props.mac} />,
-    </div>
+        },
+      ]}
+    />
   )
 }

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,21 @@
+import { createStyles, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: (string | ReactElement)[] | (string | ReactElement)
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    text: {
+      color: '#606060',
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+export function DocumentationText({ children }: Props): ReactElement {
+  const classes = useStyles()
+
+  return <Typography className={classes.text}>{children}</Typography>
+}

src/components/EthereumAddress.tsx

@@ -1,13 +1,12 @@
 import { Typography } from '@material-ui/core/'
-import QRCodeModal from './QRCodeModal'
-import ClipboardCopy from './ClipboardCopy'
-
-import Identicon from 'react-identicons'
 import { ReactElement } from 'react'
+import Identicon from 'react-identicons'
+import { config } from '../config'
+import ClipboardCopy from './ClipboardCopy'
+import QRCodeModal from './QRCodeModal'
 
 interface Props {
   address: string | undefined
-  network?: string
   hideBlockie?: boolean
   transaction?: boolean
   truncate?: boolean
@@ -37,9 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement {
                     }
                   : { marginRight: '7px' }
               }
-              href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${
+              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
-                props.transaction ? 'tx' : 'address'
-              }/${props.address}`}
               target="_blank"
               rel="noreferrer"
             >

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,59 @@
+import { Collapse, ListItem } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ReactElement, ReactNode, useState } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      padding: 0,
+      margin: 0,
+      marginTop: theme.spacing(4),
+      '&:first-child': {
+        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
+  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}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        {children}
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={classes.contentLevel12}>{expandable}</div>
+      </Collapse>
+    </div>
+  )
+}

src/components/ExpandableList.tsx

@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      padding: 0,
+      margin: 0,
+      marginTop: theme.spacing(4),
+      '&:first-child': {
+        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}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
+        <div style={{ display: 'flex' }}>
+          {!open && (
+            <Typography variant="body2" className={classes.infoText}>
+              {info}
+            </Typography>
+          )}
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </div>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={contentLevelClass}>{children}</div>
+      </Collapse>
+    </div>
+  )
+}

src/components/ExpandableListItem.tsx

@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
+import { Info } from 'react-feather'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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 (
+    <ListItem className={classes.header}>
+      <Grid container direction="row" justifyContent="space-between" alignItems="center">
+        {label && <Typography variant="body1">{label}</Typography>}
+        {value && (
+          <Typography variant="body2">
+            {value}
+            {tooltip && (
+              <Tooltip title={tooltip} placement="top" arrow>
+                <IconButton size="small" className={classes.copyValue}>
+                  <Info strokeWidth={1} />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Typography>
+        )}
+      </Grid>
+    </ListItem>
+  )
+}

src/components/ExpandableListItemActions.tsx

@@ -0,0 +1,46 @@
+import { Grid } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, ReactNode } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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,159 @@
+import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ChangeEvent, ReactElement, useState } from 'react'
+import { Edit, Minus, Search, X } from 'react-feather'
+import ExpandableListItemActions from './ExpandableListItemActions'
+import ExpandableListItemNote from './ExpandableListItemNote'
+import { SwarmButton } from './SwarmButton'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    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
+  loading?: boolean
+  onChange?: (value: string) => void
+  onConfirm?: (value: string) => void
+  mapperFn?: (value: string) => string
+  locked?: boolean
+}
+
+export default function ExpandableListItemKey({
+  label,
+  value,
+  onConfirm,
+  onChange,
+  confirmLabel,
+  confirmLabelDisabled,
+  expandedOnly,
+  helperText,
+  placeholder,
+  loading,
+  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<HTMLTextAreaElement>) => {
+    if (mapperFn) {
+      e.target.value = mapperFn(e.target.value)
+    }
+
+    setInputValue(e.target.value)
+
+    if (onChange) onChange(e.target.value)
+  }
+
+  return (
+    <>
+      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+            {label && (
+              <Typography variant="body1" className={classes.unselectableLabel}>
+                {label}
+              </Typography>
+            )}
+            <Typography variant="body2">
+              <div>
+                {!open && value}
+                {!expandedOnly && !locked && (
+                  <IconButton size="small" className={classes.copyValue}>
+                    {open ? (
+                      <Minus onClick={toggleOpen} strokeWidth={1} />
+                    ) : (
+                      <Edit onClick={toggleOpen} strokeWidth={1} />
+                    )}
+                  </IconButton>
+                )}
+              </div>
+            </Typography>
+          </Grid>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <InputBase
+              value={inputValue}
+              placeholder={placeholder}
+              onChange={handleChange}
+              fullWidth
+              className={classes.content}
+              autoFocus
+              hidden={locked}
+            />
+          </Collapse>
+        </Grid>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+        <ExpandableListItemActions>
+          <SwarmButton
+            disabled={
+              loading ||
+              inputValue === value ||
+              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
+            }
+            loading={loading}
+            iconType={Search}
+            onClick={() => {
+              if (onConfirm) onConfirm(inputValue)
+            }}
+          >
+            {confirmLabel || 'Save'}
+          </SwarmButton>
+          <SwarmButton
+            disabled={loading || inputValue === value || inputValue === ''}
+            iconType={X}
+            onClick={() => setInputValue(value || '')}
+            cancel
+          >
+            Cancel
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Collapse>
+    </>
+  )
+}

src/components/ExpandableListItemKey.tsx

@@ -0,0 +1,115 @@
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
+import Collapse from '@material-ui/core/Collapse'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement, useState } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { Eye, Minus } from 'react-feather'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    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
+}
+
+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 }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const toggleOpen = () => setOpen(!open)
+
+  const tooltipClickHandler = () => setCopied(true)
+  const tooltipCloseHandler = () => setCopied(false)
+
+  const splitValues = split(value)
+  const hasPrefix = isPrefixedHexString(value)
+  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
+    splitValues[splitValues.length - 1]
+  }`
+
+  return (
+    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          {label && <Typography variant="body1">{label}</Typography>}
+          <Typography variant="body2">
+            <div>
+              {!open && (
+                <span className={classes.copyValue}>
+                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                    <CopyToClipboard text={value}>
+                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
+                    </CopyToClipboard>
+                  </Tooltip>
+                </span>
+              )}
+              <IconButton size="small" className={classes.copyValue}>
+                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
+              </IconButton>
+            </div>
+          </Typography>
+        </Grid>
+        <Collapse in={open} timeout="auto" unmountOnExit>
+          <div className={classes.content}>
+            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+              <CopyToClipboard text={value}>
+                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
+                <span onClick={tooltipClickHandler}>
+                  <span className={classes.copyValue}>
+                    {splitValues.map((s, i) => (
+                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
+                        {s}
+                      </Typography>
+                    ))}
+                  </span>
+                </span>
+              </CopyToClipboard>
+            </Tooltip>
+          </div>
+        </Collapse>
+      </Grid>
+    </ListItem>
+  )
+}

src/components/ExpandableListItemLink.tsx

@@ -0,0 +1,106 @@
+import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
+import { ReactElement, useState } from 'react'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { useNavigate } from 'react-router'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    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,
+      },
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+  link?: string
+  navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH'
+  allowClipboard?: boolean
+}
+
+export default function ExpandableListItemLink({
+  label,
+  value,
+  link,
+  navigationType = 'NEW_WINDOW',
+  allowClipboard = true,
+}: Props): ReactElement | null {
+  const classes = useStyles()
+  const [copied, setCopied] = useState(false)
+  const navigate = useNavigate()
+
+  const tooltipClickHandler = () => setCopied(true)
+  const tooltipCloseHandler = () => setCopied(false)
+
+  const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
+
+  function onNavigation() {
+    if (navigationType === 'NEW_WINDOW') {
+      window.open(link || value)
+    } else {
+      navigate(link || value)
+    }
+  }
+
+  return (
+    <ListItem className={classes.header}>
+      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          {label && <Typography variant="body1">{label}</Typography>}
+          <Typography variant="body2">
+            <div>
+              {allowClipboard && (
+                <span className={classes.copyValue}>
+                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                    <CopyToClipboard text={value}>
+                      <span onClick={tooltipClickHandler}>{displayValue}</span>
+                    </CopyToClipboard>
+                  </Tooltip>
+                </span>
+              )}
+              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+              <IconButton size="small" className={classes.openLinkIcon}>
+                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
+                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
+              </IconButton>
+            </div>
+          </Typography>
+        </Grid>
+      </Grid>
+    </ListItem>
+  )
+}

src/components/ExpandableListItemNote.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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 (
+    <ListItem className={classes.header}>
+      <Typography variant="body1" className={classes.typography}>
+        {children}
+      </Typography>
+    </ListItem>
+  )
+}

src/components/FitImage.tsx

@@ -0,0 +1,30 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    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> = {}
+
+  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
+  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+
+  return <img className={classes.image} alt={props.alt} src={props.src} style={inlineStyles} />
+}

src/components/History.tsx

@@ -0,0 +1,37 @@
+import { ReactElement, useEffect, useState } from 'react'
+import { getPrettyDateString } from '../utils/date'
+import { getHistorySafe, HistoryItem, HISTORY_KEYS } from '../utils/local-storage'
+import ExpandableList from './ExpandableList'
+import ExpandableListItemLink from './ExpandableListItemLink'
+
+interface Props {
+  title: string
+  localStorageKey: HISTORY_KEYS
+}
+
+export function History({ title, localStorageKey }: Props): ReactElement | null {
+  const [items, setItems] = useState<HistoryItem[]>([])
+
+  useEffect(() => {
+    setItems(getHistorySafe(localStorageKey))
+  }, [localStorageKey])
+
+  if (!items.length) {
+    return null
+  }
+
+  return (
+    <ExpandableList label={title} defaultOpen>
+      {items.map((x, i) => (
+        <ExpandableListItemLink
+          label={getPrettyDateString(new Date(x.createdAt))}
+          value={x.name}
+          link={'/files/hash/' + x.hash}
+          key={i}
+          navigationType="HISTORY_PUSH"
+          allowClipboard={false}
+        />
+      ))}
+    </ExpandableList>
+  )
+}

src/components/HistoryHeader.tsx

@@ -0,0 +1,41 @@
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ArrowBack } from '@material-ui/icons'
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface Props {
+  children: string
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    pressable: {
+      cursor: 'pointer',
+    },
+    icon: {
+      color: '#242424',
+    },
+  }),
+)
+
+export function HistoryHeader({ children }: Props): ReactElement {
+  const classes = useStyles()
+  const navigate = useNavigate()
+
+  function goBack() {
+    navigate(-1)
+  }
+
+  return (
+    <Box mb={4}>
+      <Grid container direction="row">
+        <Box mr={2}>
+          <div className={classes.pressable} onClick={goBack}>
+            <ArrowBack className={classes.icon} />
+          </div>
+        </Box>
+        <Typography variant="h1">{children}</Typography>
+      </Grid>
+    </Box>
+  )
+}

src/components/Loading.tsx

@@ -0,0 +1,10 @@
+import { CircularProgress, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Loading(): ReactElement {
+  return (
+    <Grid container direction="row" justifyContent="center" alignItems="center">
+      <CircularProgress />
+    </Grid>
+  )
+}

src/components/NavBar.tsx

@@ -1,61 +0,0 @@
-import { useState, ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Toolbar, Chip, IconButton } from '@material-ui/core/'
-
-import { Sun, Moon } from 'react-feather'
-
-const drawerWidth = 240
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-    },
-    network: {},
-  }),
-)
-interface Props {
-  themeMode: string
-}
-
-export default function SideBar(props: Props): ReactElement {
-  const [darkMode, toggleDarkMode] = useState(false)
-
-  const switchTheme = () => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light')
-    } else {
-      localStorage.setItem('theme', darkMode ? 'dark' : 'light')
-    }
-
-    toggleDarkMode(!darkMode)
-    window.location.reload()
-  }
-
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div style={{ display: 'fixed' }} className={classes.appBar}>
-        <Toolbar style={{ display: 'flex' }}>
-          <Chip style={{ marginLeft: '7px' }} size="small" label="Goerli" className={classes.network} />
-          <div style={{ width: '100%' }}>
-            <div style={{ float: 'right' }}>
-              <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
-                {props.themeMode === 'dark' ? <Moon /> : <Sun />}
-              </IconButton>
-              {/* <Chip 
-              label="Connect Wallet"
-              color="primary"
-              /> */}
-            </div>
-          </div>
-        </Toolbar>
-      </div>
-    </div>
-  )
-}

src/components/ProgressIndicator.tsx

@@ -0,0 +1,55 @@
+import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  steps: string[]
+  index: number
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      height: '52px',
+      display: 'flex',
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    todo: {
+      background: '#f7f7f7',
+      color: '#c9c9c9',
+    },
+    inProgress: {
+      background: '#ffffff',
+      color: '#242424',
+      height: '52px',
+    },
+    done: {
+      background: '#f7f7f7',
+      color: '#606060',
+      height: '52px',
+    },
+  }),
+)
+
+export function ProgressIndicator({ steps, index }: Props): ReactElement {
+  const classes = useStyles()
+
+  function pickClass(i: number): string {
+    if (i === index) {
+      return classes.inProgress
+    }
+
+    return i < index ? classes.done : classes.todo
+  }
+
+  return (
+    <Grid container justifyContent="space-between">
+      {steps.map((x, i) => (
+        <div key={i} className={`${classes.wrapper} ${pickClass(i)}`}>
+          <Typography>{x}</Typography>
+        </div>
+      ))}
+    </Grid>
+  )
+}

src/components/SideBar.tsx

@@ -1,61 +1,57 @@
-import { ReactElement } from 'react'
+import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Activity, FileText, DollarSign, Share2, Settings } from 'react-feather'
+import type { ReactElement } from 'react'
-
+import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
-import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
+import { Link } from 'react-router-dom'
-import { Health } from '@ethersphere/bee-js'
+import Logo from '../assets/logo.svg'
-
+import { config } from '../config'
-const drawerWidth = 240
+import { ROUTES } from '../routes'
+import SideBarItem from './SideBarItem'
+import SideBarStatus from './SideBarStatus'
 
 const navBarItems = [
   {
-    label: 'Status',
+    label: 'Info',
-    id: 'status',
+    path: ROUTES.INFO,
-    path: '/',
+    icon: Home,
-    icon: Activity,
   },
   {
     label: 'Files',
-    id: 'files',
+    path: ROUTES.UPLOAD,
-    path: '/files/',
     icon: FileText,
   },
+  {
+    label: 'Feeds',
+    path: ROUTES.FEEDS,
+    icon: Bookmark,
+  },
+  {
+    label: 'Stamps',
+    path: ROUTES.STAMPS,
+    icon: Layers,
+  },
   {
     label: 'Accounting',
-    id: 'accounting',
+    path: ROUTES.ACCOUNTING,
-    path: '/accounting/',
     icon: DollarSign,
   },
-  {
-    label: 'Peers',
-    id: 'peers',
-    path: '/peers/',
-    icon: Share2,
-  },
   {
     label: 'Settings',
-    id: 'settings',
+    path: ROUTES.SETTINGS,
-    path: '/settings/',
     icon: Settings,
   },
 ]
 
+const drawerWidth = 300
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      display: 'flex',
+      flexWrap: 'nowrap',
-    },
+      minHeight: '100vh',
-    appBar: {
+      paddingTop: theme.spacing(8),
-      width: `calc(100% - ${drawerWidth}px)`,
+      paddingBottom: theme.spacing(8),
-      marginLeft: drawerWidth,
-    },
-    logo: {
-      padding: 1,
-      marginTop: 20,
     },
     drawer: {
       width: drawerWidth,
@@ -63,106 +59,79 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      backgroundColor: '#212121',
     },
-    activeSideBar: {
+    logo: {
-      color: '#dd7700',
+      marginLeft: theme.spacing(8),
+      marginRight: theme.spacing(8),
     },
-    activeSideBarItem: {
+    icon: {
-      borderLeft: '4px solid #dd7700',
+      height: theme.spacing(4),
-      backgroundColor: 'inherit !important',
+    },
+    iconSmall: {
+      height: theme.spacing(2),
+    },
+    divider: {
+      backgroundColor: '#2c2c2c',
+      marginLeft: theme.spacing(4),
+      marginRight: theme.spacing(4),
+    },
+    link: {
+      color: '#9f9f9f',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
     },
-    toolbar: theme.mixins.toolbar,
   }),
 )
 
-interface Props extends RouteComponentProps {
+export default function SideBar(): ReactElement {
-  themeMode: string
-  health: boolean
-  nodeHealth: Health | null
-}
-
-export default function SideBar(props: Props): ReactElement {
   const classes = useStyles()
 
   return (
-    <div className={classes.root}>
+    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
-      <Drawer
+      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
-        className={classes.drawer}
+        <Grid className={classes.logo}>
-        variant="permanent"
+          <Link to={ROUTES.INFO}>
-        classes={{
+            <img alt="swarm" src={Logo} />
-          paper: classes.drawerPaper,
-        }}
-        anchor="left"
-      >
-        <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
-          <Link to="/">
-            <img
-              alt="swarm"
-              className={classes.logo}
-              src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange}
-              style={{ maxHeight: '30px', alignItems: 'center' }}
-            />
           </Link>
-        </div>
+        </Grid>
-        <List>
+        <Grid>
-          {navBarItems.map(item => (
+          <List>
-            <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
+            {navBarItems.map(p => (
-              <ListItem
+              <Link to={p.path} key={p.path} className={classes.link}>
-                button
+                <SideBarItem
-                selected={props.location.pathname === item.path}
+                  key={p.path}
-                className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
+                  iconStart={<p.icon className={classes.icon} />}
-              >
+                  path={p.path}
-                <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
+                  label={p.label}
-                  <item.icon style={{ height: '20px' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary={item.label}
-                  className={props.location.pathname === item.path ? classes.activeSideBar : ''}
                 />
-              </ListItem>
+              </Link>
-            </Link>
+            ))}
-          ))}
+          </List>
-        </List>
+          <Divider className={classes.divider} />
-        <Divider />
+          <List>
-        <List>
+            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
-          <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{ textDecoration: 'none' }}>
+              <SideBarItem
-            <ListItem button>
+                iconStart={<BookOpen className={classes.icon} />}
-              <ListItemText primary={'Docs'} />
+                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
-              <OpenInNewSharp fontSize="small" />
+                label={<span>Docs</span>}
-            </ListItem>
-          </MUILink>
-        </List>
-        <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
-          <ListItem>
-            <div style={{ marginRight: '30px' }}>
-              <div
-                style={{
-                  backgroundColor: props.health ? '#32c48d' : '#c9201f',
-                  marginRight: '7px',
-                  height: '10px',
-                  width: '10px',
-                  borderRadius: '50%',
-                  display: 'inline-block',
-                }}
               />
-              <span>API</span>
+            </MUILink>
-            </div>
+          </List>
-            <div>
+        </Grid>
-              <div
+        <Grid>
-                style={{
+          <Link to={ROUTES.STATUS} className={classes.link}>
-                  backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f',
+            <SideBarStatus path={ROUTES.STATUS} />
-                  marginRight: '7px',
+          </Link>
-                  height: '10px',
+        </Grid>
-                  width: '10px',
+      </Grid>
-                  borderRadius: '50%',
+    </Drawer>
-                  display: 'inline-block',
-                }}
-              />
-              <span>Debug API</span>
-            </div>
-          </ListItem>
-        </div>
-      </Drawer>
-    </div>
   )
 }

src/components/SideBarItem.tsx

@@ -0,0 +1,62 @@
+import type { ReactElement, ReactNode } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+
+import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
+import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
+
+const StyledListItem = withStyles((theme: Theme) => ({
+  root: {
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
+    borderLeft: '4px solid rgba(0,0,0,0)',
+    '&.Mui-selected, &.Mui-selected:hover': {
+      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      backgroundColor: '#2c2c2c',
+      color: '#f9f9f9',
+    },
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: '#2c2c2c',
+      color: '#f9f9f9',
+
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
+        backgroundColor: '#2c2c2c',
+        color: '#f9f9f9',
+      },
+    },
+  },
+}))(ListItem)
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      color: 'inherit',
+    },
+    activeIcon: {
+      color: theme.palette.primary.main,
+    },
+  }),
+)
+
+interface Props {
+  iconStart?: ReactNode
+  iconEnd?: ReactNode
+  path?: string
+  label: ReactNode
+}
+
+export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = Boolean(path && matchPath(location.pathname, path))
+
+  return (
+    <StyledListItem button selected={isSelected} disableRipple>
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
+      <ListItemText primary={label} />
+      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
+    </StyledListItem>
+  )
+}

src/components/SideBarStatus.tsx

@@ -0,0 +1,77 @@
+import { ReactElement, useContext } from 'react'
+import { useLocation, matchPath } from 'react-router-dom'
+import { ArrowRight } from 'react-feather'
+
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
+import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { Context } from '../providers/Bee'
+import StatusIcon from './StatusIcon'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    icon: {
+      color: 'inherit',
+    },
+    iconSmall: {
+      height: theme.spacing(2),
+    },
+
+    root: {
+      height: theme.spacing(4),
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(4),
+      color: '#f9f9f9',
+      borderLeft: '0px solid rgba(0,0,0,0)',
+      '&.Mui-selected, &.Mui-selected:hover': {
+        borderLeft: `0px solid ${theme.palette.primary.main}`,
+        backgroundColor: '#2c2c2c',
+      },
+    },
+    rootError: {
+      backgroundColor: 'rgba(255, 58, 82, 0.25)',
+    },
+    button: {
+      '&:hover': {
+        backgroundColor: '#2c2c2c',
+        color: 'white',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#2c2c2c',
+          color: 'white',
+        },
+      },
+    },
+    smallerText: {
+      fontSize: '0.9rem',
+    },
+  }),
+)
+
+interface Props {
+  path?: string
+}
+
+export default function SideBarItem({ path }: Props): ReactElement {
+  const { status, isLoading } = useContext(Context)
+  const classes = useStyles()
+  const location = useLocation()
+  const isSelected = Boolean(path && matchPath(location.pathname, path))
+
+  return (
+    <ListItem
+      button
+      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
+      selected={isSelected}
+      disableRipple
+    >
+      <ListItemIcon style={{ marginLeft: '30px' }}>
+        <StatusIcon checkState={status.all} isLoading={isLoading} />
+      </ListItemIcon>
+      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
+      <ListItemIcon className={classes.icon}>
+        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
+      </ListItemIcon>
+    </ListItem>
+  )
+}

src/components/StatCard.tsx

@@ -1,50 +0,0 @@
-import type { ReactElement } from 'react'
-
-import { makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-import { Skeleton } from '@material-ui/lab'
-
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  title: {
-    fontSize: 16,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-})
-
-interface Props {
-  label: string
-  statistic?: string
-  loading?: boolean
-}
-
-export default function StatCard({ loading, label, statistic }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <CardContent>
-        {loading && (
-          <>
-            <Skeleton width={180} height={25} animation="wave" />
-            <Skeleton width={180} height={35} animation="wave" />
-          </>
-        )}
-        {!loading && (
-          <>
-            <Typography className={classes.title} color="textSecondary" gutterBottom>
-              {label}
-            </Typography>
-            <Typography variant="h5" component="h2">
-              {statistic}
-            </Typography>
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}

src/components/StatusIcon.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement } from 'react'
+import { CircularProgress } from '@material-ui/core'
+import { CheckState } from '../providers/Bee'
+
+interface Props {
+  checkState: CheckState
+  isLoading?: boolean
+  size?: number | string
+  className?: string
+}
+
+export default function StatusIcon({ checkState, size, className, isLoading }: Props): ReactElement {
+  const s = size || '1rem'
+
+  if (isLoading) return <CircularProgress size={s} className={className} />
+
+  let backgroundColor: string
+  switch (checkState) {
+    case CheckState.OK:
+      backgroundColor = '#1de600'
+      break
+    case CheckState.WARNING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.ERROR:
+      backgroundColor = '#ff3a52'
+      break
+    default:
+      // Default is error
+      backgroundColor = '#ff3a52'
+  }
+
+  return (
+    <span
+      className={className}
+      style={{
+        backgroundColor,
+        height: s,
+        width: s,
+        borderRadius: '50%',
+        display: 'inline-block',
+      }}
+    />
+  )
+}

src/components/StripedWrapper.tsx

@@ -0,0 +1,31 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement | ReactElement[]
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '175px',
+      height: '175px',
+      background: `repeating-linear-gradient(
+                        45deg,
+                        #efefef,
+                        #efefef 4px,
+                        #ffffff 4px,
+                        #ffffff 8px
+                    )`,
+    },
+  }),
+)
+
+export function StripedWrapper({ children }: Props): ReactElement {
+  const classes = useStyles()
+
+  return <div className={classes.wrapper}>{children}</div>
+}

src/components/SwarmButton.tsx

@@ -0,0 +1,93 @@
+import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import React, { ReactElement } from 'react'
+import { IconProps } from 'react-feather'
+
+interface Props {
+  onClick: () => void
+  iconType: React.ComponentType<IconProps>
+  children: string
+  className?: string
+  disabled?: boolean
+  loading?: boolean
+  cancel?: boolean
+  variant?: 'text' | 'contained' | 'outlined'
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    button: {
+      height: '52px',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      color: '#242424',
+      '&:hover, &:focus': {
+        '& svg': {
+          stroke: '#fff',
+          transition: '0.1s',
+        },
+      },
+    },
+    cancelButton: {
+      background: '#f7f7f7',
+      color: '#606060',
+    },
+    spinnerWrapper: {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      width: '40px',
+      height: '40px',
+      transform: 'translate(-50%, -50%)',
+    },
+  }),
+)
+
+export function SwarmButton({
+  children,
+  onClick,
+  iconType,
+  className,
+  disabled,
+  loading,
+  cancel,
+  variant = 'contained',
+}: Props): ReactElement {
+  const classes = useStyles()
+
+  function getIconColor() {
+    if (loading || disabled) {
+      return 'rgba(0, 0, 0, 0.26)'
+    }
+
+    return cancel ? '#606060' : '#dd7700'
+  }
+
+  function getButtonClassName() {
+    return [className, classes.button, cancel && classes.cancelButton].filter(x => x).join(' ')
+  }
+
+  const icon = React.createElement(iconType, {
+    size: '1.25rem',
+    color: getIconColor(),
+  })
+
+  return (
+    <Button
+      className={getButtonClassName()}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick()
+        event.currentTarget.blur()
+      }}
+      variant={variant}
+      startIcon={icon}
+      disabled={disabled}
+    >
+      {children}
+      {loading && (
+        <div className={classes.spinnerWrapper}>
+          <CircularProgress />
+        </div>
+      )}
+    </Button>
+  )
+}

src/components/SwarmDialog.tsx

@@ -0,0 +1,23 @@
+import { Box, Dialog, Grid } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement | ReactElement[]
+}
+
+export function SwarmDialog({ children }: Props): ReactElement {
+  return (
+    <Dialog
+      open={true}
+      PaperProps={{
+        style: { borderRadius: 0, background: '#efefef' },
+      }}
+    >
+      <Box p={4} sx={{ maxWidth: '100%', width: '650px' }}>
+        <Grid container direction="column">
+          {children}
+        </Grid>
+      </Box>
+    </Dialog>
+  )
+}

src/components/SwarmSelect.tsx

@@ -0,0 +1,90 @@
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { Select } from 'formik-material-ui'
+import { ReactElement } from 'react'
+
+export type SelectEvent = React.ChangeEvent<{
+  name?: string | undefined
+  value: unknown
+}>
+
+interface Props {
+  label?: string
+  name?: string
+  options: { value: string; label: string }[]
+  onChange?: (event: SelectEvent) => void
+  formik?: boolean
+  defaultValue?: string
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    select: {
+      borderRadius: 0,
+      background: theme.palette.background.paper,
+      '& fieldset': {
+        border: 0,
+      },
+      '& .MuiSelect-select': {
+        '&:focus': {
+          background: theme.palette.background.paper,
+        },
+      },
+    },
+    option: {
+      height: '52px',
+    },
+  }),
+)
+
+export function SwarmSelect({ defaultValue, formik, name, options, onChange, label }: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <>
+        {label && <FormHelperText>{label}</FormHelperText>}
+        <Field
+          required
+          component={Select}
+          name={name}
+          fullWidth
+          variant="outlined"
+          defaultValue={defaultValue || ''}
+          className={classes.select}
+          placeholder={label}
+          MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
+        >
+          {options.map((x, i) => (
+            <MenuItem key={i} value={x.value} className={classes.option}>
+              {x.label}
+            </MenuItem>
+          ))}
+        </Field>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {label && <FormHelperText>{label}</FormHelperText>}
+      <SimpleSelect
+        required
+        name={name}
+        fullWidth
+        variant="outlined"
+        className={classes.select}
+        defaultValue={defaultValue || ''}
+        onChange={onChange}
+        placeholder={label}
+        MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
+      >
+        {options.map((x, i) => (
+          <MenuItem key={i} value={x.value} className={classes.option}>
+            {x.label}
+          </MenuItem>
+        ))}
+      </SimpleSelect>
+    </>
+  )
+}

src/components/SwarmTextInput.tsx

@@ -0,0 +1,77 @@
+import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { Field } from 'formik'
+import { TextField } from 'formik-material-ui'
+import { ChangeEvent, ReactElement } from 'react'
+
+interface Props {
+  name: string
+  label: string
+  password?: boolean
+  formik?: boolean
+  optional?: boolean
+  defaultValue?: string
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    field: {
+      background: theme.palette.background.paper,
+      '& fieldset': {
+        border: 0,
+      },
+      '& .Mui-focused': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiInputBase-root': {
+        background: theme.palette.background.paper,
+      },
+      '& .MuiFilledInput-root': {
+        borderRadius: 0,
+      },
+    },
+  }),
+)
+
+export function SwarmTextInput({
+  name,
+  label,
+  password,
+  optional,
+  formik,
+  onChange,
+  defaultValue,
+}: Props): ReactElement {
+  const classes = useStyles()
+
+  if (formik) {
+    return (
+      <Field
+        component={TextField}
+        type={password ? 'password' : undefined}
+        required={!optional}
+        name={name}
+        label={label}
+        fullWidth
+        variant="filled"
+        className={classes.field}
+        defaultValue={defaultValue || ''}
+        InputProps={{ disableUnderline: true }}
+      />
+    )
+  }
+
+  return (
+    <SimpleTextField
+      type={password ? 'password' : undefined}
+      required
+      label={label}
+      fullWidth
+      variant="filled"
+      className={classes.field}
+      defaultValue={defaultValue || ''}
+      onChange={onChange}
+      InputProps={{ disableUnderline: true }}
+    />
+  )
+}

src/components/TabsContainer.tsx

@@ -0,0 +1,70 @@
+import React, { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Tab, Tabs } from '@material-ui/core'
+
+interface TabPanelProps {
+  children?: ReactNode
+  index: number
+  value: number
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && children}
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    content: {
+      marginTop: theme.spacing(2),
+    },
+  }),
+)
+
+interface TabsValues {
+  component: ReactNode
+  label: ReactNode
+}
+
+interface Props {
+  values: TabsValues[]
+  index?: number
+  indexChanged?: (index: number) => void
+}
+
+export default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {
+  const classes = useStyles()
+  const [value, setValue] = React.useState<number>(index || 0)
+
+  const handleChange = (event: React.ChangeEvent<Record<string, never>>, newValue: number) => {
+    if (indexChanged) indexChanged(newValue)
+    else setValue(newValue)
+  }
+
+  const v = index !== undefined ? index : value
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={v} onChange={handleChange} variant="fullWidth">
+        {values.map(({ label }, idx) => (
+          <Tab key={idx} label={label} />
+        ))}
+      </Tabs>
+      <div className={classes.content}>
+        {values.map(({ component }, idx) => (
+          <TabPanel key={idx} value={v} index={idx}>
+            {component}
+          </TabPanel>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/TitleWithClose.tsx

@@ -0,0 +1,31 @@
+import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { CloseButton } from './CloseButton'
+
+interface Props {
+  children: string
+  onClose: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    text: {
+      color: '#606060',
+      fontWeight: 'bold',
+    },
+  }),
+)
+
+export function TitleWithClose({ children, onClose }: Props): ReactElement {
+  const classes = useStyles()
+
+  return (
+    <Grid container justifyContent="space-between" alignItems="center">
+      <span>&nbsp;</span>
+      <Typography className={classes.text} align="center">
+        {children}
+      </Typography>
+      <CloseButton onClose={onClose} />
+    </Grid>
+  )
+}

src/components/TopologyStats.tsx

@@ -1,28 +1,43 @@
 import type { Topology } from '@ethersphere/bee-js'
-import { Grid } from '@material-ui/core/'
 import type { ReactElement } from 'react'
-import StatCard from './StatCard'
+import { pickThreshold, ThresholdValues } from '../utils/threshold'
+import ExpandableListItem from './ExpandableListItem'
 
 interface Props {
-  isLoading: boolean
   topology: Topology | null
-  error: Error | null // FIXME: should display error
 }
 
-const TopologyStats = ({ isLoading, topology }: Props): ReactElement => (
+const TopologyStats = (props: Props): ReactElement => {
-  <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
+  const thresholds: ThresholdValues = {
-    <Grid container spacing={3}>
+    connectedPeers: pickThreshold('connectedPeers', props.topology?.connected || 0),
-      <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
+    population: pickThreshold('population', props.topology?.population || 0),
-        <StatCard label="Connected Peers" statistic={topology?.connected.toString()} loading={isLoading} />
+    depth: pickThreshold('depth', props.topology?.depth || 0),
-      </Grid>
+  }
-      <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
+
-        <StatCard label="Population" statistic={topology?.population.toString()} loading={isLoading} />
+  const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
-      </Grid>
+  const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
-      <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
+  const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
-        <StatCard label="Depth" statistic={topology?.depth.toString()} loading={isLoading} />
+
-      </Grid>
+  return (
-    </Grid>
+    <>
-  </Grid>
+      <ExpandableListItem label="Overall Health Indicator" value={percentageText} />
-)
+      <ExpandableListItem
+        label="Connected Peers"
+        value={props.topology?.connected.toString()}
+        tooltip={thresholds.connectedPeers.explanation}
+      />
+      <ExpandableListItem
+        label="Population"
+        value={props.topology?.population.toString()}
+        tooltip={thresholds.population.explanation}
+      />
+      <ExpandableListItem
+        label="Depth"
+        value={props.topology?.depth.toString()}
+        tooltip={thresholds.depth.explanation}
+      />
+    </>
+  )
+}
 
 export default TopologyStats

src/components/TroubleshootConnectionCard.tsx

@@ -1,47 +1,64 @@
+import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
+import { Activity } from 'react-feather'
 import { Link } from 'react-router-dom'
+import { config } from '../config'
+import { ROUTES } from '../routes'
 
-import { makeStyles } from '@material-ui/core/styles'
+const useStyles = makeStyles((theme: Theme) =>
-import { Card, CardContent, Typography } from '@material-ui/core/'
+  createStyles({
-
+    root: {
-const useStyles = makeStyles({
+      height: '100%',
-  root: {
+    },
-    flexGrow: 1,
+    content: {
-    marginTop: '20px',
+      maxWidth: 500,
-  },
+      marginBottom: theme.spacing(4),
-  title: {
+      '&:last-child': {
-    textAlign: 'center',
+        marginBottom: 0,
-    fontSize: 26,
+      },
-  },
+    },
-})
+    icon: {
+      height: '1rem',
+    },
+  }),
+)
 
 export default function TroubleshootConnectionCard(): ReactElement {
   const classes = useStyles()
 
   return (
-    <Card className={classes.root}>
+    <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
-      <CardContent>
+      <Grid item className={classes.content}>
-        <Typography className={classes.title} gutterBottom>
+        <Typography variant="h1" align="center">
-          Looks like your node is not connected
+          Uh oh, it looks like your node is not connected.
         </Typography>
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+      </Grid>
-          <strong>
+      <Grid item className={classes.content}>
-            <Link to="/">Click to run status checks</Link> on your nodes connection or check out the{' '}
+        <Typography align="center">
-            <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          Please check your node status to fix the problem. You can also check out the{' '}
-              Swarm Bee Docs
+          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
-            </a>
+            Swarm Bee Docs
-          </strong>
+          </MuiLink>{' '}
-        </div>
+          or ask for support on the{' '}
-
+          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+            Ethereum Swarm Discord
-          <p style={{ marginTop: '50px' }}>
+          </MuiLink>
-            Still not working? Drop us a message on the Ethereum Swarm{' '}
+          .
-            <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+        </Typography>
-              Discord
+      </Grid>
-            </a>
+      <Grid item className={classes.content}>
-          </p>
+        <Typography align="center">
-        </div>
+          <Button
-      </CardContent>
+            component={Link}
-    </Card>
+            variant="contained"
+            startIcon={<Activity className={classes.icon} />}
+            to={ROUTES.STATUS}
+          >
+            Check node status
+          </Button>
+        </Typography>
+      </Grid>
+    </Grid>
   )
 }

src/components/WithdrawDepositModal.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
@@ -6,9 +6,10 @@ import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
-import { FormHelperText, Snackbar } from '@material-ui/core'
+import FormHelperText from '@material-ui/core/FormHelperText'
 import { Token } from '../models/Token'
 import type { BigNumber } from 'bignumber.js'
+import { useSnackbar } from 'notistack'
 
 interface Props {
   successMessage: string
@@ -17,10 +18,11 @@ interface Props {
   label: string
   max?: BigNumber
   min?: BigNumber
-  action: (amount: bigint) => Promise<{ transactionHash: string }>
+  action: (amount: bigint) => Promise<string>
+  icon?: ReactNode
 }
 
-export default function WithdrawModal({
+export default function WithdrawDepositModal({
   successMessage,
   errorMessage,
   dialogMessage,
@@ -28,16 +30,17 @@ export default function WithdrawModal({
   max,
   label,
   action,
+  icon,
 }: Props): ReactElement {
   const [open, setOpen] = useState(false)
   const [amount, setAmount] = useState('')
   const [amountToken, setAmountToken] = useState<Token | null>(null)
   const [amountError, setAmountError] = useState<Error | null>(null)
-  const [showToast, setToastVisibility] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
-  const [toastContent, setToastContent] = useState('')
 
-  const handleClickOpen = () => {
+  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     setOpen(true)
+    e.stopPropagation()
   }
 
   const handleClose = () => {
@@ -48,20 +51,14 @@ export default function WithdrawModal({
     if (amountToken === null) return
 
     try {
-      const { transactionHash } = await action(amountToken.toBigInt as bigint)
+      const transactionHash = await action(amountToken.toBigInt as bigint)
       setOpen(false)
-      handleToast(`${successMessage} Transaction ${transactionHash}`)
+      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      handleToast(`${errorMessage} Error: ${e.message}`)
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
     }
   }
 
-  const handleToast = (text: string) => {
-    setToastContent(text)
-    setToastVisibility(true)
-    setTimeout(() => setToastVisibility(false), 7000)
-  }
-
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
     const value = e.target.value
     setAmount(value)
@@ -74,16 +71,15 @@ export default function WithdrawModal({
 
       if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
     } catch (e) {
-      setAmountError(e)
+      setAmountError(e as Error)
     }
   }
 
   return (
     <div>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
         {label}
       </Button>
-      <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={showToast} message={toastContent} />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">{label}</DialogTitle>
         <DialogContent>

src/config.ts

@@ -0,0 +1,31 @@
+function getProcessEnv(key: string): string | undefined | false {
+  return typeof process === 'object' && process.env[key]
+}
+
+class Config {
+  public readonly BEE_API_HOST: string
+  public readonly BEE_DEBUG_API_HOST: string
+  public readonly BLOCKCHAIN_EXPLORER_URL: string
+  public readonly BEE_DOCS_HOST: string
+  public readonly BEE_DISCORD_HOST: string
+  public readonly GITHUB_REPO_URL: string
+  public readonly BEE_DESKTOP_URL: string
+
+  constructor() {
+    this.BEE_API_HOST =
+      sessionStorage.getItem('api_host') || getProcessEnv('REACT_APP_BEE_HOST') || 'http://localhost:1633'
+    this.BEE_DEBUG_API_HOST =
+      sessionStorage.getItem('debug_api_host') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
+    this.BLOCKCHAIN_EXPLORER_URL =
+      getProcessEnv('REACT_APP_BLOCKCHAIN_EXPLORER_URL') || 'https://blockscout.com/xdai/mainnet'
+    this.BEE_DOCS_HOST = getProcessEnv('REACT_APP_BEE_DOCS_HOST') || 'https://docs.ethswarm.org/docs/'
+    this.BEE_DISCORD_HOST = getProcessEnv('REACT_APP_BEE_DISCORD_HOST') || 'https://discord.gg/eKr9XPv7'
+    this.GITHUB_REPO_URL =
+      getProcessEnv('REACT_APP_BEE_GITHUB_REPO_URL') || 'https://api.github.com/repos/ethersphere/bee'
+    this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
+  }
+}
+
+export const config = new Config()
+
+export default config

src/constants.ts

@@ -1,4 +1,4 @@
-// These values can for now be constants because their change in the app reloads the page
+export const META_FILE_NAME = '.swarmgatewaymeta.json'
-export const apiHost = sessionStorage.getItem('api_host') || process.env.REACT_APP_BEE_HOST || 'http://localhost:1633'
+export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
-export const debugApiHost =
+export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
-  sessionStorage.getItem('debug_api_host') || process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635'
+export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'

src/containers/DepositModal.tsx

@@ -1,18 +1,26 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { beeDebugApi } from '../services/bee'
+import { Download } from 'react-feather'
+import { Context as SettingsContext } from '../providers/Settings'
 
-import WDModal from '../components/WDModal'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { BigNumber } from 'bignumber.js'
 
 export default function DepositModal(): ReactElement {
+  const { beeDebugApi } = useContext(SettingsContext)
+
   return (
-    <WDModal
+    <WithdrawDepositModal
       successMessage="Successful deposit."
       errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
       label="Deposit"
+      icon={<Download size="1rem" />}
       min={new BigNumber(0)}
-      action={beeDebugApi.chequebook.deposit}
+      action={(amount: bigint) => {
+        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+
+        return beeDebugApi.depositTokens(amount.toString())
+      }}
     />
   )
 }

src/containers/WithdrawModal.tsx

@@ -1,18 +1,25 @@
-import type { ReactElement } from 'react'
-import { beeDebugApi } from '../services/bee'
-
-import WDModal from '../components/WDModal'
 import { BigNumber } from 'bignumber.js'
+import { ReactElement, useContext } from 'react'
+import { Upload } from 'react-feather'
+import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
+  const { beeDebugApi } = useContext(SettingsContext)
+
   return (
-    <WDModal
+    <WithdrawDepositModal
-      successMessage="Successful withdrawl."
+      successMessage="Successful withdrawal."
       errorMessage="Error with withdrawing."
       dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
       label="Withdraw"
+      icon={<Upload size="1rem" />}
       min={new BigNumber(0)}
-      action={beeDebugApi.chequebook.withdraw}
+      action={(amount: bigint) => {
+        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+
+        return beeDebugApi.withdrawTokens(amount.toString())
+      }}
     />
   )
 }

src/hooks/accounting.ts

@@ -1,15 +1,12 @@
-import { LastCashoutActionResponse } from '@ethersphere/bee-js'
+import { LastCashoutActionResponse, BeeDebug } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
 import { Token } from '../models/Token'
-import { beeDebugApi } from '../services/bee'
+import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
-import { Balance, Settlement, useApiPeerBalances, useApiSettlements } from './apiHooks'
+import { Balance, Settlements, Settlement } from '../types'
 
 interface UseAccountingHook {
-  isLoading: boolean
   isLoadingUncashed: boolean
-  error: Error | null
+  totalUncashed: Token
-  totalsent: Token
-  totalreceived: Token
   accounting: Accounting[] | null
 }
 
@@ -64,51 +61,57 @@ function mergeAccounting(
       }),
   )
 
-  // If there are no cheques (and hence last cashout actions), we don't need to sort and can return values right away
+  // If there are no cheques (and hence last cashout actions)
-  if (!uncashedAmounts) return Object.values(accounting)
+  if (!uncashedAmounts) return Object.values(accounting).sort((a, b) => (a.peer < b.peer ? -1 : 1))
 
   uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
     accounting[peer].uncashedAmount = new Token(uncashedAmount)
   })
 
-  return Object.values(accounting).sort((a, b) =>
+  // Return sorted by the uncashed amount first and then by the peer id
-    b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber(),
+  return Object.values(accounting).sort((a, b) => {
-  )
+    const diff = b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber()
+
+    if (diff !== 0) return diff
+
+    return a.peer < b.peer ? -1 : 1
+  })
 }
 
-export const useAccounting = (): UseAccountingHook => {
+export const useAccounting = (
-  const settlements = useApiSettlements()
+  beeDebugApi: BeeDebug | null,
-  const balances = useApiPeerBalances()
+  settlements: Settlements | null,
-
+  balances: Balance[] | null,
-  const [err, setErr] = useState<Error | null>(null)
+): UseAccountingHook => {
   const [isLoadingUncashed, setIsloadingUncashed] = useState<boolean>(false)
   const [uncashedAmounts, setUncashedAmounts] = useState<LastCashoutActionResponse[] | undefined>(undefined)
 
-  const error = balances.error || settlements.error || err
-
   useEffect(() => {
     // We don't have any settlements loaded yet or we are already loading/have loaded the uncashed amounts
-    if (isLoadingUncashed || !settlements.settlements || uncashedAmounts || error) return
+    if (isLoadingUncashed || !beeDebugApi || !settlements || uncashedAmounts) return
 
     setIsloadingUncashed(true)
-    const promises = settlements.settlements.settlements
+    const promises = settlements.settlements
       .filter(({ received }) => received.toBigNumber.gt('0'))
-      .map(({ peer }) => beeDebugApi.chequebook.getPeerLastCashout(peer))
+      .map(({ peer }) => makeRetriablePromise(() => beeDebugApi.getLastCashoutAction(peer)))
 
-    Promise.all(promises)
+    Promise.allSettled(promises).then(settlements => {
-      .then(setUncashedAmounts)
+      const results = unwrapPromiseSettlements(settlements)
-      .catch(setErr)
+      setUncashedAmounts(results.fulfilled)
-      .finally(() => setIsloadingUncashed(false))
+      setIsloadingUncashed(false)
-  }, [settlements, isLoadingUncashed, uncashedAmounts, error])
+    })
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
 
-  const accounting = mergeAccounting(balances.peerBalances, settlements.settlements?.settlements, uncashedAmounts)
+  const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
+
+  let totalUncashed: Token = new Token('0')
+  accounting?.forEach(
+    ({ uncashedAmount }) => (totalUncashed = new Token(totalUncashed.toBigNumber.plus(uncashedAmount.toBigNumber))),
+  )
 
   return {
-    isLoading: settlements.isLoadingSettlements || balances.isLoadingPeerBalances,
     isLoadingUncashed,
-    error,
+    totalUncashed,
     accounting,
-    totalsent: settlements.settlements?.totalSent || new Token('0'),
-    totalreceived: settlements.settlements?.totalReceived || new Token('0'),
   }
 }

src/hooks/apiHooks.test.ts

@@ -0,0 +1,73 @@
+import { renderHook } from '@testing-library/react-hooks'
+import express from 'express'
+import cors from 'cors'
+import type { Server } from 'http'
+import { useIsBeeDesktop } from './apiHooks'
+
+interface AddressInfo {
+  address: string
+  family: string
+  port: number
+}
+
+export function mockServer(data: Record<string | number | symbol, string>): Promise<Server> {
+  const app = express()
+  app.use(cors())
+
+  app.get('/info', (req, res) => {
+    res.send(data)
+  })
+
+  return new Promise(resolve => {
+    const server = app.listen(() => {
+      resolve(server)
+    })
+  })
+}
+
+let serverCorrect: Server
+let serverWrong: Server
+
+let serverCorrectURL: string
+let serverWrongURL: string
+
+beforeAll(async () => {
+  serverCorrect = await mockServer({ name: 'bee-desktop' })
+  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
+  serverCorrectURL = `http://localhost:${portServerCorrect}`
+
+  serverWrong = await mockServer({ foo: 'bar' })
+  const portServerWrong = (serverWrong.address() as AddressInfo).port
+  serverWrongURL = `http://localhost:${portServerWrong}`
+})
+
+afterAll(async () => {
+  await new Promise(resolve => serverCorrect.close(resolve))
+  await new Promise(resolve => serverWrong.close(resolve))
+})
+
+describe('useIsBeeDesktop', () => {
+  it('should fail when connected to wrong server', async () => {
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverWrongURL }))
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isBeeDesktop).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.isBeeDesktop).toBe(false)
+  })
+
+  it('should return isBeeDesktop true when connected to bee-desktop', async () => {
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL }))
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.isBeeDesktop).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.isBeeDesktop).toBe(true)
+  })
+})

src/hooks/apiHooks.tsx

@@ -1,406 +1,7 @@
-import { useState, useEffect } from 'react'
-
-import {
-  NodeAddresses,
-  ChequebookAddressResponse,
-  LastChequesResponse,
-  Health,
-  Peer,
-  Topology,
-  LastChequesForPeerResponse,
-} from '@ethersphere/bee-js'
-
-import { beeDebugApi, beeApi } from '../services/bee'
 import axios from 'axios'
-import { Token } from '../models/Token'
+import { useEffect, useState } from 'react'
-
+import { config } from '../config'
-export interface HealthHook {
+import { getJson } from '../utils/net'
-  health: boolean
-  isLoadingHealth: boolean
-  error: Error | null
-}
-export const useApiHealth = (): HealthHook => {
-  const [health, setHealth] = useState<boolean>(false)
-  const [isLoadingHealth, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeApi.status
-      .health()
-      .then(res => {
-        setHealth(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { health, isLoadingHealth, error }
-}
-
-export interface DebugHealthHook {
-  nodeHealth: Health | null
-  isLoadingNodeHealth: boolean
-  error: Error | null
-}
-
-export const useDebugApiHealth = (): DebugHealthHook => {
-  const [nodeHealth, setNodeHealth] = useState<Health | null>(null)
-  const [isLoadingNodeHealth, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.status
-      .nodeHealth()
-      .then(res => {
-        setNodeHealth(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { nodeHealth, isLoadingNodeHealth, error }
-}
-
-export interface NodeAddressesHook {
-  nodeAddresses: NodeAddresses | null
-  isLoadingNodeAddresses: boolean
-  error: Error | null
-}
-
-export const useApiNodeAddresses = (): NodeAddressesHook => {
-  const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
-  const [isLoadingNodeAddresses, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.connectivity
-      .addresses()
-      .then(res => {
-        setNodeAddresses(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { nodeAddresses, isLoadingNodeAddresses, error }
-}
-
-export interface NodeTopologyHook {
-  topology: Topology | null
-  isLoading: boolean
-  error: Error | null
-}
-
-export const useApiNodeTopology = (): NodeTopologyHook => {
-  const [topology, setNodeTopology] = useState<Topology | null>(null)
-  const [isLoading, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.connectivity
-      .topology()
-      .then(res => {
-        setNodeTopology(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { topology, isLoading, error }
-}
-export interface ChequebookAddressHook {
-  chequebookAddress: ChequebookAddressResponse | null
-  isLoadingChequebookAddress: boolean
-  error: Error | null
-}
-
-export const useApiChequebookAddress = (): ChequebookAddressHook => {
-  const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
-  const [isLoadingChequebookAddress, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .address()
-      .then(res => {
-        setChequebookAddress(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { chequebookAddress, isLoadingChequebookAddress, error }
-}
-
-export interface NodePeersHook {
-  peers: Peer[] | null
-  isLoading: boolean
-  error: Error | null
-}
-
-export const useApiNodePeers = (): NodePeersHook => {
-  const [peers, setPeers] = useState<Peer[] | null>(null)
-  const [isLoading, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.connectivity
-      .listPeers()
-      .then(res => {
-        setPeers(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { peers, isLoading, error }
-}
-
-export interface ChequebookBalance {
-  totalBalance: Token
-  availableBalance: Token
-}
-
-export interface ChequebookBalanceHook {
-  chequebookBalance: ChequebookBalance | null
-  isLoadingChequebookBalance: boolean
-  error: Error | null
-}
-
-export const useApiChequebookBalance = (): ChequebookBalanceHook => {
-  const [chequebookBalance, setChequebookBalance] = useState<ChequebookBalance | null>(null)
-  const [isLoadingChequebookBalance, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .balance()
-      .then(({ totalBalance, availableBalance }) => {
-        const balance = {
-          totalBalance: new Token(totalBalance),
-          availableBalance: new Token(availableBalance),
-        }
-        setChequebookBalance(balance)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { chequebookBalance, isLoadingChequebookBalance, error }
-}
-
-export interface Balance {
-  peer: string
-  balance: Token
-}
-
-export interface PeerBalanceHook {
-  peerBalances: Balance[] | null
-  isLoadingPeerBalances: boolean
-  error: Error | null
-}
-
-export const useApiPeerBalances = (): PeerBalanceHook => {
-  const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
-  const [isLoadingPeerBalances, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.balance
-      .balances()
-      .then(res => {
-        // for some reason sometimes these are numbers and not BigInts
-        const balances = res.balances.map(({ peer, balance }) => ({ peer, balance: new Token(balance) }))
-        setPeerBalances(balances)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { peerBalances, isLoadingPeerBalances, error }
-}
-
-export interface PeerChequesHook {
-  peerCheques: LastChequesResponse | null
-  isLoadingPeerCheques: boolean
-  error: Error | null
-}
-
-export const useApiPeerCheques = (): PeerChequesHook => {
-  const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
-  const [isLoadingPeerCheques, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .getLastCheques()
-      .then(res => {
-        setPeerCheques(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { peerCheques, isLoadingPeerCheques, error }
-}
-
-export interface PeerLastChequesHook {
-  peerCheque: LastChequesForPeerResponse | null
-  isLoadingPeerCheque: boolean
-  error: Error | null
-}
-
-export const useApiPeerLastCheque = (peerId: string): PeerLastChequesHook => {
-  const [peerCheque, setPeerCheque] = useState<LastChequesForPeerResponse | null>(null)
-  const [isLoadingPeerCheque, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .getPeerLastCheques(peerId)
-      .then(res => {
-        setPeerCheque(res)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [peerId])
-
-  return { peerCheque, isLoadingPeerCheque, error }
-}
-
-export interface Settlement {
-  peer: string
-  received: Token
-  sent: Token
-}
-
-export interface Settlements {
-  totalReceived: Token
-  totalSent: Token
-  settlements: Settlement[]
-}
-
-export interface SettlementsHook {
-  settlements: Settlements | null
-  isLoadingSettlements: boolean
-  error: Error | null
-}
-
-export const useApiSettlements = (): SettlementsHook => {
-  const [settlements, setSettlements] = useState<Settlements | null>(null)
-  const [isLoadingSettlements, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.settlements
-      .getSettlements()
-      .then(({ totalReceived, settlements, totalSent }) => {
-        const set = {
-          totalReceived: new Token(totalReceived),
-          totalSent: new Token(totalSent),
-          settlements: settlements.map(({ peer, received, sent }) => ({
-            peer,
-            received: new Token(received),
-            sent: new Token(sent),
-          })),
-        }
-        setSettlements(set)
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
-
-  return { settlements, isLoadingSettlements, error }
-}
-
-export interface LastCashout {
-  peer: string
-  uncashedAmount: Token
-}
-
-export interface PeerLastCashoutHook {
-  peerCashout: LastCashout | null
-  isLoadingPeerCashout: boolean
-  error: Error | null
-}
-
-export const useApiPeerLastCashout = (peerId: string): PeerLastCashoutHook => {
-  const [peerCashout, setPeerCashout] = useState<LastCashout | null>(null)
-  const [isLoadingPeerCashout, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    setLoading(true)
-    beeDebugApi.chequebook
-      .getPeerLastCashout(peerId)
-      .then(({ peer, uncashedAmount }) => {
-        setPeerCashout({ peer, uncashedAmount: new Token(uncashedAmount.toString()) })
-      })
-      .catch(error => {
-        setError(error)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [peerId])
-
-  return { peerCashout, isLoadingPeerCashout, error }
-}
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -408,6 +9,90 @@ export interface LatestBeeReleaseHook {
   error: Error | null
 }
 
+export interface IsBeeDesktopHook {
+  isBeeDesktop: boolean
+  isLoading: boolean
+}
+
+interface Config {
+  BEE_DESKTOP_URL: string
+}
+
+/**
+ * Detect if the dashboard is run within bee-desktop
+ *
+ * @returns isBeeDesktop true if this is run within bee-desktop
+ */
+export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
+  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+  const [isLoading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    axios
+      .get(`${conf.BEE_DESKTOP_URL}/info`)
+      .then(res => {
+        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        else setIsBeeDesktop(false)
+      })
+      .catch(() => {
+        setIsBeeDesktop(false)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { isBeeDesktop, isLoading }
+}
+
+export interface BeeConfig {
+  'api-addr': string
+  'debug-api-addr': string
+  'debug-api-enable': boolean
+  password: string
+  'swap-enable': boolean
+  'swap-initial-deposit': bigint
+  mainnet: boolean
+  'full-node': boolean
+  'chain-enable': boolean
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  transaction: string
+  'block-hash': string
+  'swap-endpoint'?: string
+}
+
+export interface GetBeeConfig {
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+  const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
+  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    getJson<BeeConfig>(`${conf.BEE_DESKTOP_URL}/config`)
+      .then(beeConf => {
+        setBeeConfig(beeConf)
+        setError(null)
+      })
+      .catch((err: Error) => {
+        setError(err)
+        setBeeConfig(null)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { config: beeConfig, isLoading, error }
+}
+
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
   const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
   const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)
@@ -415,7 +100,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
 
   useEffect(() => {
     axios
-      .get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
+      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
       .then(res => {
         setLatestBeeRelease(res.data)
       })

src/hooks/status.ts

@@ -1,82 +0,0 @@
-import { ChequebookAddressResponse } from '@ethersphere/bee-js'
-import {
-  ChequebookBalance,
-  useApiChequebookAddress,
-  useApiChequebookBalance,
-  useApiHealth,
-  useApiNodeAddresses,
-  useApiNodeTopology,
-  useDebugApiHealth,
-  useLatestBeeRelease,
-} from './apiHooks'
-
-export interface StatusChequebookHook extends StatusHookCommon {
-  chequebookBalance: ChequebookBalance | null
-  chequebookAddress: ChequebookAddressResponse | null
-}
-
-export const useStatusNodeVersion = (): StatusNodeVersionHook => {
-  const { latestBeeRelease, isLoadingLatestBeeRelease } = useLatestBeeRelease()
-  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
-
-  return {
-    isLoading: isLoadingNodeHealth || isLoadingLatestBeeRelease,
-    isOk: Boolean(latestBeeRelease && latestBeeRelease.name === `v${nodeHealth?.version?.split('-')[0]}`),
-    userVersion: nodeHealth?.version?.split('-')[0] || '-',
-    latestVersion: latestBeeRelease?.name.substring(1) || '-',
-    latestUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
-  }
-}
-
-export const useStatusEthereumConnection = (): StatusEthereumConnectionHook => {
-  const { isLoadingNodeAddresses, nodeAddresses } = useApiNodeAddresses()
-
-  return {
-    isLoading: isLoadingNodeAddresses,
-    isOk: Boolean(nodeAddresses?.ethereum),
-    nodeAddresses,
-  }
-}
-
-export const useStatusDebugConnection = (): StatusHookCommon => {
-  const { isLoadingNodeHealth, nodeHealth } = useDebugApiHealth()
-
-  return {
-    isLoading: isLoadingNodeHealth,
-    isOk: Boolean(nodeHealth?.status === 'ok'),
-  }
-}
-
-export const useStatusConnection = (): StatusHookCommon => {
-  const { isLoadingHealth, health } = useApiHealth()
-
-  return {
-    isLoading: isLoadingHealth,
-    isOk: health,
-  }
-}
-
-export const useStatusTopology = (): StatusTopologyHook => {
-  const { topology, isLoading } = useApiNodeTopology()
-
-  return {
-    isLoading,
-    isOk: Boolean(topology?.connected && topology?.connected > 0),
-    topology,
-  }
-}
-
-export const useStatusChequebook = (): StatusChequebookHook => {
-  const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
-  const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
-
-  return {
-    isLoading: isLoadingChequebookAddress || isLoadingChequebookBalance,
-    isOk:
-      Boolean(chequebookAddress?.chequebookAddress) &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0),
-    chequebookBalance,
-    chequebookAddress,
-  }
-}

src/layout/Dashboard.tsx

@@ -1,80 +1,49 @@
-import { useState, useEffect, ReactElement } from 'react'
+import { useContext, ReactElement } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
+import AlertVersion from '../components/AlertVersion'
+import { Container, CircularProgress } from '@material-ui/core'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 
 import SideBar from '../components/SideBar'
-import NavBar from '../components/NavBar'
 
-import { useApiHealth, useDebugApiHealth } from '../hooks/apiHooks'
+import { Context } from '../providers/Bee'
-import { RouteComponentProps } from 'react-router'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    toolbar: theme.mixins.toolbar,
     content: {
-      marginLeft: '240px',
-      flexGrow: 1,
       backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
+      minHeight: '100vh',
-      paddingBottom: '65px',
-    },
-    footer: {
-      marginLeft: '240px',
-      backgroundColor: theme.palette.background.default,
-      position: 'fixed',
-      bottom: 0,
-      flexGrow: 1,
-      width: '-webkit-fill-available',
-      padding: theme.spacing(2),
-      textAlign: 'center',
-    },
-    logo: {
-      height: '20px',
-      marginRight: '7px',
     },
   }),
 )
 
-interface Props extends RouteComponentProps {
+interface Props {
   children?: ReactElement
 }
 
 const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
-  const [themeMode, toggleThemeMode] = useState('light')
+  const { isLoading } = useContext(Context)
-
-  // FIXME: handle errrors and loading
-  const { health } = useApiHealth()
-  const { nodeHealth } = useDebugApiHealth()
-
-  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 (
-    <div>
+    <div style={{ display: 'flex' }}>
-      <SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
+      <SideBar />
-      <NavBar themeMode={themeMode} />
+      <Container className={classes.content}>
-      <ErrorBoundary>
+        <ErrorBoundary>
-        <main className={classes.content}>{props.children}</main>
+          <>
-      </ErrorBoundary>
+            <AlertVersion />
+            {isLoading ? (
+              <div style={{ textAlign: 'center', width: '100%' }}>
+                <CircularProgress />
+              </div>
+            ) : (
+              props.children
+            )}
+          </>
+        </ErrorBoundary>
+      </Container>
     </div>
   )
 }

src/models/Token.ts

@@ -57,4 +57,25 @@ export class Token {
   toFixedDecimal(digits = 7): string {
     return this.toDecimal.toFixed(digits)
   }
+
+  toSignificantDigits(digits = 4): string {
+    const asString = this.toDecimal.toFixed(16)
+
+    let indexOfSignificantDigit = -1
+    let reachedDecimalPoint = false
+
+    for (let i = 0; i < asString.length; i++) {
+      const char = asString[i]
+
+      if (char === '.') {
+        reachedDecimalPoint = true
+        indexOfSignificantDigit = i + 1
+      } else if (reachedDecimalPoint && char !== '0') {
+        indexOfSignificantDigit = i
+        break
+      }
+    }
+
+    return asString.slice(0, indexOfSignificantDigit + digits)
+  }
 }

src/pages/accounting/AccountCard.tsx

@@ -1,105 +0,0 @@
-import { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Theme } from '@material-ui/core/'
-import { Skeleton } from '@material-ui/lab'
-import WithdrawModal from '../../containers/WithdrawModal'
-import DepositModal from '../../containers/DepositModal'
-
-import type { ChequebookAddressResponse } from '@ethersphere/bee-js'
-import { Token } from '../../models/Token'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    buttons: {
-      display: 'flex',
-      columnGap: theme.spacing(1),
-    },
-    gridContainer: {
-      display: 'flex',
-      width: '100%',
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      columnGap: theme.spacing(1),
-      rowGap: theme.spacing(1),
-      flex: '0 1 auto',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-    },
-    chequebookActions: {
-      justifyContent: 'space-between',
-      display: 'flex',
-      marginBottom: theme.spacing(1),
-    },
-  }),
-)
-
-interface ChequebookBalance {
-  totalBalance: Token
-  availableBalance: Token
-}
-
-interface Props {
-  chequebookAddress: ChequebookAddressResponse | null
-  chequebookBalance: ChequebookBalance | null
-  totalsent: Token
-  totalreceived: Token
-  isLoading: boolean
-}
-
-function AccountCard({ totalreceived, totalsent, chequebookBalance, isLoading }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div className={classes.chequebookActions}>
-        <Typography component="h2" variant="h6">
-          Chequebook
-        </Typography>
-        <div className={classes.buttons}>
-          <WithdrawModal />
-          <DepositModal />
-        </div>
-      </div>
-
-      <Card className={classes.root}>
-        {!isLoading && (
-          <CardContent className={classes.gridContainer}>
-            <div>
-              <Typography component="h2" variant="h6" color="primary" gutterBottom>
-                Total Balance
-              </Typography>
-              <Typography variant="h5">{chequebookBalance?.totalBalance.toFixedDecimal()} BZZ</Typography>
-            </div>
-            <div>
-              <Typography component="h2" variant="h6" color="primary" gutterBottom>
-                Available Uncommitted Balance
-              </Typography>
-              <Typography variant="h5">{chequebookBalance?.availableBalance.toFixedDecimal()} BZZ</Typography>
-            </div>
-            <div>
-              <Typography component="h2" variant="h6" color="primary" gutterBottom>
-                Total Sent / Received
-              </Typography>
-              <Typography variant="h5">
-                {totalsent.toFixedDecimal()} / {totalreceived.toFixedDecimal()} BZZ
-              </Typography>
-            </div>
-          </CardContent>
-        )}
-        {isLoading && (
-          <div className={classes.gridContainer}>
-            <Skeleton width={180} height={110} animation="wave" />
-            <Skeleton width={180} height={110} animation="wave" />
-            <Skeleton width={180} height={110} animation="wave" />
-          </div>
-        )}
-      </Card>
-    </div>
-  )
-}
-
-export default AccountCard

src/pages/accounting/BalancesTable.tsx

@@ -1,94 +0,0 @@
-import type { ReactElement } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
-
-import ClipboardCopy from '../../components/ClipboardCopy'
-import CashoutModal from '../../components/CashoutModal'
-import PeerDetailDrawer from './PeerDetail'
-import { Accounting } from '../../hooks/accounting'
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  values: {
-    textAlign: 'right',
-    fontFamily: 'monospace, monospace',
-  },
-})
-interface Props {
-  isLoadingUncashed: boolean
-  accounting: Accounting[] | null
-}
-
-function BalancesTable({ accounting, isLoadingUncashed }: Props): ReactElement | null {
-  if (accounting === null) return null
-  const classes = useStyles()
-
-  return (
-    <TableContainer component={Paper}>
-      <Table className={classes.table} size="small" aria-label="Balances Table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Peer</TableCell>
-            <TableCell align="right">Outstanding Balance</TableCell>
-            <TableCell align="right">Settlements Sent / Received</TableCell>
-            <TableCell align="right">Total</TableCell>
-            <TableCell align="right">Uncashed Amount</TableCell>
-            <TableCell />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {accounting.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
-            <TableRow key={peer}>
-              <TableCell>
-                <div style={{ display: 'flex' }}>
-                  <small>
-                    <PeerDetailDrawer peerId={peer} />
-                  </small>
-                  <ClipboardCopy value={peer} />
-                </div>
-              </TableCell>
-              <TableCell className={classes.values}>
-                <span
-                  style={{
-                    color: balance.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
-                  }}
-                >
-                  {balance.toFixedDecimal()}
-                </span>{' '}
-                BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                -{sent.toFixedDecimal()} / {received.toFixedDecimal()} BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                <span
-                  style={{
-                    color: total.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
-                  }}
-                >
-                  {total.toFixedDecimal()}
-                </span>{' '}
-                BZZ
-              </TableCell>
-              <TableCell className={classes.values}>
-                {isLoadingUncashed && 'loading...'}
-                {!isLoadingUncashed && (
-                  <>{uncashedAmount.toBigNumber.isGreaterThan('0') ? uncashedAmount.toFixedDecimal() : '0'} BZZ</>
-                )}
-              </TableCell>
-              <TableCell className={classes.values}>
-                {uncashedAmount.toBigNumber.isGreaterThan('0') && (
-                  <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export default BalancesTable

src/pages/accounting/PeerBalances.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react'
+
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+
+import CashoutModal from '../../components/CashoutModal'
+import { Accounting } from '../../hooks/accounting'
+import type { Token } from '../../models/Token'
+
+interface Props {
+  isLoadingUncashed: boolean
+  totalUncashed: Token
+  accounting: Accounting[] | null
+}
+
+export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
+  return (
+    <ExpandableList
+      label={`Peers (${accounting?.length || 0})`}
+      info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
+    >
+      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
+      {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
+        <ExpandableList
+          key={peer}
+          label={`Peer ${peer.substr(0, 8)}[…]`}
+          level={1}
+          info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
+        >
+          <ExpandableListItemKey label="Peer ID" value={peer} />
+          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Settlements Sent / Received"
+            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Uncashed Amount"
+            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} BZZ`}
+          />
+          {uncashedAmount.toBigNumber.isGreaterThan('0') && (
+            <ExpandableListItemActions>
+              <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
+            </ExpandableListItemActions>
+          )}
+        </ExpandableList>
+      ))}
+    </ExpandableList>
+  )
+}

src/pages/accounting/PeerDetail.tsx

@@ -1,23 +0,0 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@material-ui/core'
-
-function truncStringPortion(str: string, firstCharCount = 10, endCharCount = 10) {
-  return `${str.substring(0, firstCharCount)}...${str.substring(str.length - endCharCount, str.length)}`
-}
-
-interface Props {
-  peerId: string
-}
-
-export default function PeerDetail(props: Props): ReactElement {
-  return (
-    <Typography
-      variant="button"
-      style={{
-        fontFamily: 'monospace, monospace',
-      }}
-    >
-      {truncStringPortion(props.peerId)}
-    </Typography>
-  )
-}

src/pages/accounting/index.tsx

@@ -1,72 +1,52 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
-import { Container, CircularProgress } from '@material-ui/core'
 
-import AccountCard from '../accounting/AccountCard'
+import PeerBalances from './PeerBalances'
-import BalancesTable from './BalancesTable'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
-import {
+import { Context as SettingsContext } from '../../providers/Settings'
-  useApiNodeAddresses,
-  useApiChequebookAddress,
-  useApiChequebookBalance,
-  useApiHealth,
-  useDebugApiHealth,
-} from '../../hooks/apiHooks'
 import { useAccounting } from '../../hooks/accounting'
-
+import ExpandableList from '../../components/ExpandableList'
-const useStyles = makeStyles((theme: Theme) =>
+import ExpandableListItem from '../../components/ExpandableListItem'
-  createStyles({
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-    root: {
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-      width: '100%',
+import WithdrawModal from '../../containers/WithdrawModal'
-      display: 'grid',
+import DepositModal from '../../containers/DepositModal'
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
 
 export default function Accounting(): ReactElement {
-  const classes = useStyles()
+  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
+    useContext(BeeContext)
+  const { beeDebugApi } = useContext(SettingsContext)
 
-  const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
-  const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
-  const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
-  const { health, isLoadingHealth } = useApiHealth()
-  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
-  const { isLoading, totalsent, totalreceived, accounting, isLoadingUncashed, error } = useAccounting()
 
-  if (isLoadingHealth || isLoadingNodeHealth) {
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (nodeHealth?.status !== 'ok' || !health) return <TroubleshootConnectionCard />
 
   return (
-    <div className={classes.root}>
+    <div>
-      <AccountCard
+      <ExpandableList label="Chequebook" defaultOpen>
-        chequebookAddress={chequebookAddress}
+        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-        isLoading={isLoadingChequebookAddress || isLoading || isLoadingChequebookBalance}
+        <ExpandableListItem
-        chequebookBalance={chequebookBalance}
+          label="Available Uncommitted Balance"
-        totalsent={totalsent}
+          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-        totalreceived={totalreceived}
+        />
-      />
+        <ExpandableListItem
-      <EthereumAddressCard
+          label="Total Cheques Amount Sent"
-        nodeAddresses={nodeAddresses}
+          value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
-        isLoadingNodeAddresses={isLoadingNodeAddresses}
+        />
-        chequebookAddress={chequebookAddress}
+        <ExpandableListItem
-        isLoadingChequebookAddress={isLoadingChequebookAddress}
+          label="Total Cheques Amount Received"
-      />
+          value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
-      {error && (
+        />
-        <Container style={{ textAlign: 'center', padding: '50px' }}>
+        <ExpandableListItemActions>
-          Error loading accounting details: {error.message}
+          <WithdrawModal />
-        </Container>
+          <DepositModal />
-      )}
+        </ExpandableListItemActions>
-      {!error && <BalancesTable accounting={accounting} isLoadingUncashed={isLoadingUncashed} />}
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
     </div>
   )
 }

src/pages/feeds/CreateNewFeed.tsx

@@ -0,0 +1,133 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { Form, Formik } from 'formik'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Check, X } from 'react-feather'
+import { useNavigate } from 'react-router'
+import { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as FeedsContext, IdentityType } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { convertWalletToIdentity, generateWallet, persistIdentity } from '../../utils/identity'
+
+interface FormValues {
+  identityName?: string
+  type?: IdentityType
+  password?: string
+}
+
+const initialValues: FormValues = {
+  identityName: '',
+  type: 'PRIVATE_KEY',
+  password: '',
+}
+
+export default function CreateNewFeed(): ReactElement {
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { identities, setIdentities } = useContext(FeedsContext)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+
+  const navigate = useNavigate()
+
+  async function onSubmit(values: FormValues) {
+    setLoading(true)
+
+    if (!beeApi) {
+      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+    const wallet = generateWallet()
+    const stamps = await beeDebugApi?.getAllPostageBatch()
+
+    if (!stamps || !stamps.length) {
+      enqueueSnackbar(<span>No stamp available</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    if (!values.identityName || !values.type) {
+      enqueueSnackbar(<span>Form is unfinished</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    navigate(ROUTES.FEEDS)
+    setLoading(false)
+  }
+
+  function cancel() {
+    navigate(-1)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Create new feed</HistoryHeader>
+      <Box mb={4}>
+        <DocumentationText>
+          To create a feed you will need to create an identity. Please refer to the{' '}
+          <a
+            href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
+            target="_blank"
+            rel="noreferrer"
+          >
+            official Bee documentation
+          </a>{' '}
+          to understand how feeds work.
+        </DocumentationText>
+      </Box>
+      <Formik initialValues={initialValues} onSubmit={onSubmit}>
+        {({ submitForm, values }) => (
+          <Form>
+            <Box mb={0.25}>
+              <SwarmTextInput name="identityName" label="Identity name" formik />
+            </Box>
+            <Box mb={0.25}>
+              <SwarmSelect
+                formik
+                name="type"
+                options={[
+                  { label: 'Keypair Only', value: 'PRIVATE_KEY' },
+                  { label: 'Password Protected', value: 'V3' },
+                ]}
+              />
+            </Box>
+            {values.type === 'V3' && <SwarmTextInput name="password" label="Password" password formik />}
+            <Box mt={2}>
+              <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+            </Box>
+            <Box mt={2} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+              <Grid container justifyContent="space-between">
+                <Typography>Feeds name</Typography>
+                <Typography>{values.identityName} Website</Typography>
+              </Grid>
+            </Box>
+            <Box mt={1.25}>
+              <ExpandableListItemActions>
+                <SwarmButton onClick={submitForm} iconType={Check} disabled={loading} loading={loading}>
+                  Create Feed
+                </SwarmButton>
+                <SwarmButton onClick={cancel} iconType={X} disabled={loading} cancel>
+                  Cancel
+                </SwarmButton>
+              </ExpandableListItemActions>
+            </Box>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}

src/pages/feeds/DeleteFeedDialog.tsx

@@ -0,0 +1,35 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Trash, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Identity } from '../../providers/Feeds'
+
+interface Props {
+  identity: Identity
+  onConfirm: (identity: Identity) => void
+  onClose: () => void
+}
+
+export function DeleteFeedDialog({ identity, onConfirm, onClose }: Props): ReactElement {
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Delete</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography align="center">{`You are about to delete feed ${identity.name} Website. It is strongly advised to export this feed first.`}</Typography>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Trash} onClick={() => onConfirm(identity)}>
+          Delete
+        </SwarmButton>
+        <SwarmButton iconType={X} onClick={onClose} cancel>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/ExportFeedDialog.tsx

@@ -0,0 +1,71 @@
+import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
+import { saveAs } from 'file-saver'
+import { useSnackbar } from 'notistack'
+import { ReactElement } from 'react'
+import { Clipboard, Download } from 'react-feather'
+import { Code } from '../../components/Code'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Identity } from '../../providers/Feeds'
+
+interface Props {
+  identity: Identity
+  onClose: () => void
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      maxWidth: '100%',
+    },
+  }),
+)
+
+export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  function onDownload() {
+    saveAs(
+      new Blob([identity.identity], {
+        type: 'application/json',
+      }),
+      identity.name + '.json',
+    )
+  }
+
+  function getExportText() {
+    return identity.type === 'V3' ? 'JSON file' : 'the private key string'
+  }
+
+  function onCopy() {
+    navigator.clipboard
+      .writeText(identity.identity)
+      .then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))
+  }
+
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Export</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography align="center">{`We exported the identity associated with this feed as ${getExportText()}.`}</Typography>
+      </Box>
+      <Box mb={4} className={classes.wrapper}>
+        <Code prettify>{identity.identity}</Code>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Download} onClick={onDownload}>
+          Download JSON File
+        </SwarmButton>
+        <SwarmButton iconType={Clipboard} onClick={onCopy}>
+          Copy To Clipboard
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/FeedPasswordDialog.tsx

@@ -0,0 +1,52 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useState } from 'react'
+import { Check, X } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+
+interface Props {
+  feedName: string
+  onProceed: (password: string) => void
+  onCancel: () => void
+  loading: boolean
+}
+
+export function FeedPasswordDialog({ feedName, onProceed, onCancel, loading }: Props): ReactElement {
+  const [password, setPassword] = useState('')
+
+  function onProceedClick() {
+    return onProceed(password)
+  }
+
+  return (
+    <SwarmDialog>
+      <Box mb={4}>
+        <TitleWithClose onClose={onCancel}>Update Feed</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <Typography>Please enter the password for “{feedName}”:</Typography>
+      </Box>
+      <Box mb={4}>
+        <SwarmTextInput
+          label="Password"
+          name="password"
+          onChange={event => {
+            setPassword(event.target.value)
+          }}
+          password
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Check} onClick={onProceedClick} disabled={loading} loading={loading}>
+          Proceed
+        </SwarmButton>
+        <SwarmButton iconType={X} onClick={onCancel} cancel disabled={loading}>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/FeedSubpage.tsx

@@ -0,0 +1,90 @@
+import * as swarmCid from '@ethersphere/swarm-cid'
+import { Box } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { X } from 'react-feather'
+import { useParams, useNavigate } from 'react-router-dom'
+import { DocumentationText } from '../../components/DocumentationText'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableListItemLink from '../../components/ExpandableListItemLink'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { ROUTES } from '../../routes'
+import { UploadArea } from '../files/UploadArea'
+
+export function FeedSubpage(): ReactElement {
+  const { identities } = useContext(IdentityContext)
+  const { uuid } = useParams()
+  const { beeApi } = useContext(SettingsContext)
+  const { status } = useContext(BeeContext)
+
+  const navigate = useNavigate()
+
+  const [available, setAvailable] = useState(false)
+
+  const identity = identities.find(x => x.uuid === uuid)
+
+  useEffect(() => {
+    if (!identity || !identity.feedHash) {
+      return
+    }
+
+    try {
+      beeApi?.downloadData(identity.feedHash).then(() => setAvailable(true))
+    } catch {
+      setAvailable(false)
+    }
+  }, [beeApi, uuid, identity])
+
+  if (!identity || !status.all) {
+    navigate(ROUTES.FEEDS, { replace: true })
+
+    return <></>
+  }
+
+  function onClose() {
+    navigate(ROUTES.FEEDS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>{`${identity.name} Website`}</HistoryHeader>
+      <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
+      {available && identity.feedHash ? (
+        <>
+          <Box mb={0.25}>
+            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
+          </Box>
+          <Box mb={4}>
+            <ExpandableListItemLink
+              label="BZZ Link"
+              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
+            />
+          </Box>
+        </>
+      ) : (
+        <Box mb={4}>
+          <DocumentationText>
+            This feed is curently not pointing anywhere, you can update the feed to fix this. Please refer to the{' '}
+            <a
+              href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
+              target="_blank"
+              rel="noreferrer"
+            >
+              official Bee documentation
+            </a>
+            .
+          </DocumentationText>
+        </Box>
+      )}
+      <ExpandableListItemActions>
+        <SwarmButton iconType={X} onClick={onClose} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </div>
+  )
+}

src/pages/feeds/ImportFeedDialog.tsx

@@ -0,0 +1,113 @@
+import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useRef, useState } from 'react'
+import { Check, Upload } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Context, Identity } from '../../providers/Feeds'
+import { importIdentity, persistIdentity } from '../../utils/identity'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    textarea: {
+      width: '100%',
+      border: 0,
+      padding: theme.spacing(1),
+    },
+    displayNone: {
+      display: 'none',
+    },
+  }),
+)
+
+export function ImportFeedDialog({ onClose }: Props): ReactElement {
+  const [textareaValue, setTextareaValue] = useState('')
+  const [name, setName] = useState('')
+  const fileInputRef = useRef(null)
+
+  const { identities, setIdentities } = useContext(Context)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  async function onImport() {
+    const feed = await importIdentity(name, textareaValue)
+
+    if (feed) {
+      onFeedReady(feed)
+    } else {
+      enqueueSnackbar('Feed is not valid', { variant: 'error' })
+    }
+  }
+
+  function onUploadIdentityFile() {
+    if (fileInputRef.current) {
+      const input = fileInputRef.current as HTMLInputElement
+      input.click()
+    }
+  }
+
+  function onIdentityFileSelected(event: React.ChangeEvent<HTMLInputElement>) {
+    const fileReader = new FileReader()
+    const file = event.target?.files?.[0]
+    fileReader.onload = async event => {
+      const string = event.target?.result
+
+      if (string) {
+        const feed = await importIdentity(name, string as string)
+
+        if (feed) {
+          onFeedReady(feed)
+        } else {
+          enqueueSnackbar('Feed is not valid', { variant: 'error' })
+        }
+      }
+    }
+
+    if (file) {
+      fileReader.readAsText(file)
+    }
+  }
+
+  function onFeedReady(identity: Identity) {
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    enqueueSnackbar('Feed imported successfully', { variant: 'success' })
+    onClose()
+  }
+
+  return (
+    <SwarmDialog>
+      <input onChange={onIdentityFileSelected} ref={fileInputRef} className={classes.displayNone} type="file" />
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Import</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput label="Identity Name" name="name" onChange={event => setName(event.target.value)} />
+      </Box>
+      <Box mb={4}>
+        <TextareaAutosize
+          className={classes.textarea}
+          minRows={5}
+          onChange={event => setTextareaValue(event.target.value)}
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Upload} onClick={onUploadIdentityFile}>
+          Upload Json File
+        </SwarmButton>
+        <SwarmButton iconType={Check} onClick={onImport}>
+          Use Pasted Text
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}

src/pages/feeds/UpdateFeed.tsx

@@ -0,0 +1,148 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { Bookmark, X } from 'react-feather'
+import { useParams, useNavigate } from 'react-router'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SelectEvent, SwarmSelect } from '../../components/SwarmSelect'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import { persistIdentity, updateFeed } from '../../utils/identity'
+import { FeedPasswordDialog } from './FeedPasswordDialog'
+
+export default function UpdateFeed(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { stamps, refresh } = useContext(StampContext)
+  const { status } = useContext(BeeContext)
+  const { hash } = useParams()
+
+  const [selectedStamp, setSelectedStamp] = useState<string | null>(null)
+  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
+
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    refresh()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function onFeedChange(event: SelectEvent) {
+    const uuid = event.target.value
+    setSelectedIdentity(identities.find(x => x.uuid === uuid) || null)
+  }
+
+  function onStampChange(event: SelectEvent) {
+    const batchId = event.target.value as string
+    setSelectedStamp(batchId)
+  }
+
+  function onCancel() {
+    navigate(-1)
+  }
+
+  function onBeginUpdatingFeed() {
+    if (!selectedIdentity) {
+      return
+    }
+
+    if (selectedIdentity.type === 'V3') {
+      setShowPasswordPrompt(true)
+    } else {
+      onFeedUpdate(selectedIdentity)
+    }
+  }
+
+  async function onFeedUpdate(identity: Identity, password?: string) {
+    setLoading(true)
+
+    if (!beeApi || !beeDebugApi || !selectedStamp) {
+      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
+      setLoading(false)
+
+      return
+    }
+
+    try {
+      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+      persistIdentity(identities, identity)
+      setIdentities([...identities])
+      navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
+    } catch (error: unknown) {
+      setLoading(false)
+
+      const message = (typeof error === 'object' && error !== null && Reflect.get(error, 'message')) || ''
+
+      if (message.includes('possibly wrong passphrase')) {
+        enqueueSnackbar('Wrong password, please try again', { variant: 'error' })
+      } else {
+        enqueueSnackbar('Could not update feed at this time, please try again later', { variant: 'error' })
+      }
+    }
+  }
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      {showPasswordPrompt && selectedIdentity && (
+        <FeedPasswordDialog
+          feedName={selectedIdentity.name + ' Website'}
+          onCancel={() => {
+            setShowPasswordPrompt(false)
+          }}
+          onProceed={(password: string) => {
+            onFeedUpdate(selectedIdentity, password)
+          }}
+          loading={loading}
+        />
+      )}
+      <HistoryHeader>Update feed</HistoryHeader>
+      <Box mb={2}>
+        <Grid container>
+          <SwarmSelect
+            options={identities.map(x => ({ value: x.uuid, label: `${x.name} Website` }))}
+            onChange={onFeedChange}
+            label="Feed"
+          />
+        </Grid>
+      </Box>
+
+      <Box mb={4}>
+        <Grid container>
+          {stamps ? (
+            <SwarmSelect
+              options={stamps.map(x => ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}
+              onChange={onStampChange}
+              label="Stamp"
+            />
+          ) : (
+            <Typography>You need to buy a stamp first to be able to update a feed.</Typography>
+          )}
+        </Grid>
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton
+          onClick={onBeginUpdatingFeed}
+          iconType={Bookmark}
+          loading={!showPasswordPrompt && loading}
+          disabled={loading || !selectedStamp || !selectedIdentity}
+        >
+          Update Selected Feed
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
+          Close
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </div>
+  )
+}

src/pages/feeds/index.tsx

@@ -0,0 +1,116 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useContext, useState } from 'react'
+import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { SwarmButton } from '../../components/SwarmButton'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { ROUTES } from '../../routes'
+import { formatEnum } from '../../utils'
+import { persistIdentitiesWithoutUpdate } from '../../utils/identity'
+import { DeleteFeedDialog } from './DeleteFeedDialog'
+import { ExportFeedDialog } from './ExportFeedDialog'
+import { ImportFeedDialog } from './ImportFeedDialog'
+
+export default function Feeds(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
+
+  const navigate = useNavigate()
+
+  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
+  const [showImport, setShowImport] = useState(false)
+  const [showExport, setShowExport] = useState(false)
+  const [showDelete, setShowDelete] = useState(false)
+
+  function createNewFeed() {
+    return navigate(ROUTES.FEEDS_NEW)
+  }
+
+  function viewFeed(uuid: string) {
+    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
+  }
+
+  function onDialogClose() {
+    setShowDelete(false)
+    setShowExport(false)
+    setShowImport(false)
+    setSelectedIdentity(null)
+  }
+
+  function onDelete(identity: Identity) {
+    onDialogClose()
+    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
+    setIdentities(updatedFeeds)
+    persistIdentitiesWithoutUpdate(updatedFeeds)
+  }
+
+  function onShowExport(identity: Identity) {
+    setSelectedIdentity(identity)
+    setShowExport(true)
+  }
+
+  function onShowDelete(identity: Identity) {
+    setSelectedIdentity(identity)
+    setShowDelete(true)
+  }
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  return (
+    <div>
+      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
+      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
+      {showDelete && selectedIdentity && (
+        <DeleteFeedDialog
+          identity={selectedIdentity}
+          onClose={onDialogClose}
+          onConfirm={(identity: Identity) => onDelete(identity)}
+        />
+      )}
+      <Box mb={4}>
+        <Typography variant="h1">Feeds</Typography>
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItemActions>
+          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
+            Create New Feed
+          </SwarmButton>
+          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
+            Import Feed
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Box>
+      {identities.map((x, i) => (
+        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
+          <Box mb={0.5}>
+            <ExpandableList label={x.name} level={1}>
+              <ExpandableListItemKey label="Identity address" value={x.address} />
+              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
+            </ExpandableList>
+          </Box>
+          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
+          <Box mt={0.75}>
+            <ExpandableListItemActions>
+              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
+                View Feed Page
+              </SwarmButton>
+              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
+                Export...
+              </SwarmButton>
+              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
+                Delete...
+              </SwarmButton>
+            </ExpandableListItemActions>
+          </Box>
+        </ExpandableList>
+      ))}
+    </div>
+  )
+}

src/pages/files/AssetIcon.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react'
+import { StripedWrapper } from '../../components/StripedWrapper'
+
+interface Props {
+  icon: ReactElement
+}
+
+export function AssetIcon({ icon }: Props): ReactElement {
+  return <StripedWrapper>{icon}</StripedWrapper>
+}