chore(master): release 0.17.0 (#387)

* style: update logo

* feat: use both desktop and dashboard logo

* test: remove App.test

* build: fix depcheck

.depcheckrc.json

@@ -1,19 +1,19 @@
 {
   "ignores": [
-    "@types/jest", 
+    "@testing-library/react",
-    "@commitlint/config-conventional", 
+    "@types/*",
-    "@types/react-router",
+    "@commitlint/config-conventional",
-    "@babel/core",
+    "@babel/*",
-    "@babel/plugin-proposal-class-properties",
+    "babel*",
-    "@babel/plugin-transform-runtime",
+    "eslint*",
-    "@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"
+    "webpack-cli",
+    "assert",
+    "buffer",
+    "crypto*",
+    "stream*",
+    "env-paths",
+    "open"
   ]
 }

.eslintrc

@@ -23,7 +23,6 @@
     "sourceType": "module",
     "ecmaVersion": 2018
   },
-  "plugins": ["jest"],
   "rules": {
     "array-bracket-newline": ["error", "consistent"],
     "strict": ["error", "safe"],

.github/workflows/check.yaml

@@ -14,12 +14,14 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     env:
       REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
       REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
       REACT_APP_DEV_MODE: 1
+      REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
+      REACT_APP_SENTRY_ENVIRONMENT: 'preview'
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/publish_npmjs.yaml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
       - run: npm run compile:types
@@ -20,3 +20,11 @@ jobs:
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+      - name: Create Sentry release
+        uses: getsentry/action-release@v1
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+        with:
+          sourcemaps: ./build/static/js

.github/workflows/publish_pages.yaml

@@ -0,0 +1,28 @@
+# After new release is published on github, publish it to npmjs
+name: Publish the project to Github Pages
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+        env:
+          REACT_APP_SENTRY_KEY: ${{ secrets.SENTRY_KEY }}
+          REACT_APP_SENTRY_ENVIRONMENT: 'pages'
+      - run: echo "dashboard.ethswarm.org" > ./build/CNAME
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build

.github/workflows/tests.yaml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2

CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)
+
+
+### Features
+
+* add account tabs ([#378](https://github.com/ethersphere/bee-dashboard/issues/378)) ([41432bc](https://github.com/ethersphere/bee-dashboard/commit/41432bc346b1b89f87489a0b38a5383b834edd62))
+* add map with peers to info page ([#398](https://github.com/ethersphere/bee-dashboard/issues/398)) ([2be9735](https://github.com/ethersphere/bee-dashboard/commit/2be9735e0c98f066afbd8c1fda27c8365b80f489))
+* gh pages deployment ([#389](https://github.com/ethersphere/bee-dashboard/issues/389)) ([2b58b30](https://github.com/ethersphere/bee-dashboard/commit/2b58b301225dba5809f0afb3849f97007123c61a))
+* improve stamp selector ([#400](https://github.com/ethersphere/bee-dashboard/issues/400)) ([0f0d72e](https://github.com/ethersphere/bee-dashboard/commit/0f0d72e7c5848559962b3020575d1b5f2d18a60e))
+* info page redesign ([#390](https://github.com/ethersphere/bee-dashboard/issues/390)) ([caea5ae](https://github.com/ethersphere/bee-dashboard/commit/caea5ae309028fef12c5cd036dcd1d264dd451e6))
+* sentry feedback form ([#388](https://github.com/ethersphere/bee-dashboard/issues/388)) ([b3028d7](https://github.com/ethersphere/bee-dashboard/commit/b3028d7893790010e417ccf091b7eb4981ed21d6))
+* sentry integration ([#385](https://github.com/ethersphere/bee-dashboard/issues/385)) ([109e07b](https://github.com/ethersphere/bee-dashboard/commit/109e07b0972309b9260db2e26a643be8562a9386))
+* sentry proxy ([#399](https://github.com/ethersphere/bee-dashboard/issues/399)) ([e966663](https://github.com/ethersphere/bee-dashboard/commit/e9666639b2df3b1586121df61a7eda24bc57766d))
+* update logo ([#401](https://github.com/ethersphere/bee-dashboard/issues/401)) ([36fc4bf](https://github.com/ethersphere/bee-dashboard/commit/36fc4bfe982b03589478acb36e5bb6ec5aff9b44))
+
+
+### Bug Fixes
+
+* all wallet flows to use ethers ([#395](https://github.com/ethersphere/bee-dashboard/issues/395)) ([80d684c](https://github.com/ethersphere/bee-dashboard/commit/80d684c1e5c74b3bdae6eca974ed3a0b7408be93))
+* change color of pins and show population instead of depth ([#402](https://github.com/ethersphere/bee-dashboard/issues/402)) ([127d44f](https://github.com/ethersphere/bee-dashboard/commit/127d44fd7ac763fd78d1eab99f10f952ba6bb1b6))
+* download preview ([#397](https://github.com/ethersphere/bee-dashboard/issues/397)) ([f38e8e1](https://github.com/ethersphere/bee-dashboard/commit/f38e8e11d6814e5246b0a7a25e32a009581a76a9))
+* map size in safari ([#404](https://github.com/ethersphere/bee-dashboard/issues/404)) ([ee864bd](https://github.com/ethersphere/bee-dashboard/commit/ee864bdbe9029184cc905f36af08fdea9431b4a8))
+
 ## [0.16.0](https://github.com/ethersphere/bee-dashboard/compare/v0.15.0...v0.16.0) (2022-06-02)
 
 

README.md

@@ -4,8 +4,8 @@
 [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
-![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/npm-%3E%3D6.9.0-orange.svg?style=flat-square)
-![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/Node.js-%3E%3D14.0.0-orange.svg?style=flat-square)
 
 > An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
 > manage your postage stamps.
@@ -96,6 +96,16 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
 
 > 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.
 
+#### Bee Desktop development
+
+If you want to develop Bee Dashboard in the Bee Desktop mode, then spin up `bee-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
+
+```sh
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000" > .env.development.local
+npm start
+npm run desktop # This will inject the API key to the Dashboard 
+```
+
 ## Contribute
 
 There are some ways you can make this module better:
@@ -117,4 +127,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 [BSD-3-Clause](./LICENSE)
 
 
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)

desktop.mjs

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+import envPaths from 'env-paths'
+import open  from 'open'
+
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const paths = envPaths('bee-desktop')
+const apiKey = await readFile(join(paths.data, 'api-key.txt'), {encoding: 'utf-8'})
+const url = `http://localhost:3001/?v=${apiKey}#/`
+
+console.log('Opening: ' + url)
+await open(url)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -27,14 +27,20 @@
   },
   "dependencies": {
     "@ethersphere/bee-js": "^4.1.1",
-    "@ethersphere/manifest-js": "1.1.0",
+    "@ethersphere/manifest-js": "1.2.1",
     "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",
+    "@sentry/react": "^7.1.1",
+    "@sentry/tracing": "^7.1.1",
+    "assert": "^2.0.0",
     "axios": "0.24.0",
     "bignumber.js": "9.0.1",
-    "ethereumjs-wallet": "^1.0.2",
+    "buffer": "^6.0.3",
+    "crypto": "npm:crypto-browserify",
+    "crypto-browserify": "^3.12.0",
+    "dotted-map": "^2.2.3",
     "ethers": "^5.6.4",
     "file-saver": "^2.0.5",
     "formik": "2.2.9",
@@ -53,7 +59,9 @@
     "react-router-dom": "6.2.1",
     "react-syntax-highlighter": "15.4.4",
     "semver": "7.3.5",
-    "serve-handler": "6.1.3"
+    "serve-handler": "6.1.3",
+    "stream": "npm:stream-browserify",
+    "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.16.0",
@@ -78,34 +86,36 @@
     "@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/eslint-plugin": "5.28.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/parser": "5.28.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-tsconfig-paths": "1.0.2",
     "cors": "^2.8.5",
     "depcheck": "^1.4.3",
-    "eslint": "7.24.0",
+    "env-paths": "^3.0.0",
+    "eslint": "8.17.0 ",
     "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "6.0.0",
+    "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jest": "26.5.3",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react": "7.30.0",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react-hooks": "4.5.0",
-    "eslint-plugin-testing-library": "3.10.2",
+    "eslint-plugin-testing-library": "5.5.1",
     "express": "^4.17.3",
     "file-loader": "6.2.0",
+    "open": "^8.4.0",
     "prettier": "2.4.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.1",
-    "typescript": "4.4.4",
+    "typescript": "4.7.3",
     "web-vitals": "2.1.2",
-    "webpack": "4.44.2",
+    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.1"
+    "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
     "react": ">= 17.0.2",
@@ -114,6 +124,7 @@
   "scripts": {
     "prepare": "npm run build",
     "start": "react-scripts start",
+    "desktop": "node ./desktop.mjs",
     "build": "react-scripts build",
     "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
     "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
@@ -122,7 +133,8 @@
     "depcheck": "depcheck .",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "check:types": "tsc --project tsconfig.lib.json"
+    "check:types": "tsc --project tsconfig.lib.json",
+    "update-map-data": "node ./utils/update-map-data.js"
   },
   "files": [
     "lib",
@@ -143,7 +155,7 @@
   },
   "engines": {
     "node": ">=12.0.0",
-    "npm": ">=6.0.0",
+    "npm": ">=6.9.0",
     "bee": ">=0.6.0"
   }
 }

src/App.css

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

src/App.test.tsx

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

src/App.tsx

@@ -3,6 +3,7 @@ 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 * as Sentry from '@sentry/react'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -14,6 +15,9 @@ import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as TopUpProvider } from './providers/TopUp'
 import BaseRouter from './routes'
 import { theme } from './theme'
+import { config } from './config'
+import ItsBroken from './layout/ItsBroken'
+import { initSentry } from './utils/sentry'
 
 interface Props {
   beeApiUrl?: string
@@ -21,35 +25,56 @@ interface Props {
   lockedApiSettings?: boolean
 }
 
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
+if (config.SENTRY_KEY) {
-  <div className="App">
+  // eslint-disable-next-line no-console
-    <ThemeProvider theme={theme}>
+  initSentry().catch(e => console.error(e))
-      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
+}
-        <BeeProvider>
+
-          <StampsProvider>
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
-            <FileProvider>
+  const mainApp = (
-              <FeedsProvider>
+    <div className="App">
-                <PlatformProvider>
+      <ThemeProvider theme={theme}>
-                  <TopUpProvider>
+        <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
-                    <SnackbarProvider>
+          <TopUpProvider>
-                      <Router>
+            <BeeProvider>
-                        <>
+              <StampsProvider>
-                          <CssBaseline />
+                <FileProvider>
-                          <Dashboard>
+                  <FeedsProvider>
-                            <BaseRouter />
+                    <PlatformProvider>
-                          </Dashboard>
+                      <SnackbarProvider>
-                        </>
+                        <Router>
-                      </Router>
+                          <>
-                    </SnackbarProvider>
+                            <CssBaseline />
-                  </TopUpProvider>
+                            <Dashboard>
-                </PlatformProvider>
+                              <BaseRouter />
-              </FeedsProvider>
+                            </Dashboard>
-            </FileProvider>
+                          </>
-          </StampsProvider>
+                        </Router>
-        </BeeProvider>
+                      </SnackbarProvider>
-      </SettingsProvider>
+                    </PlatformProvider>
-    </ThemeProvider>
+                  </FeedsProvider>
-  </div>
+                </FileProvider>
-)
+              </StampsProvider>
+            </BeeProvider>
+          </TopUpProvider>
+        </SettingsProvider>
+      </ThemeProvider>
+    </div>
+  )
+
+  // Displays Report Dialog when some component crashes
+  if (config.SENTRY_KEY) {
+    return (
+      <Sentry.ErrorBoundary
+        showDialog
+        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
+      >
+        {mainApp}
+      </Sentry.ErrorBoundary>
+    )
+  }
+
+  return mainApp
+}
 
 export default App

src/components/Card.tsx

@@ -0,0 +1,77 @@
+import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { AlertCircle, Check } from 'react-feather'
+import { SwarmButton, SwarmButtonProps } from './SwarmButton'
+
+interface Props {
+  icon: ReactElement
+  title: string
+  subtitle: string
+  buttonProps: SwarmButtonProps
+  status: 'ok' | 'error'
+}
+
+const useStyles = (backgroundColor: string) =>
+  makeStyles((theme: Theme) =>
+    createStyles({
+      root: {
+        flexGrow: 1,
+        flexBasis: '100px',
+      },
+      wrapper: {
+        backgroundColor,
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+      },
+      iconWrapper: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        marginBottom: '18px',
+      },
+      button: {
+        width: '100%',
+        marginTop: '2px',
+        backgroundColor,
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+          // https://github.com/mui-org/material-ui/issues/22543
+          '@media (hover: none)': {
+            backgroundColor: theme.palette.primary.main,
+            color: 'white',
+            boxShadow: 'none',
+          },
+        },
+      },
+    }),
+  )
+
+export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
+  const backgroundColor = status === 'error' ? 'white' : '#f3f3f3'
+  const { className, ...rest } = buttonProps
+  const classes = useStyles(backgroundColor)()
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <div className={classes.iconWrapper}>
+          {icon}
+          {status === 'ok' ? (
+            <Check size="13" stroke="#09ca6c" />
+          ) : (
+            <AlertCircle size="13" fill="#f44336" stroke="white" />
+          )}
+        </div>
+        <Typography variant="h2" style={{ marginBottom: '8px' }}>
+          {title}
+        </Typography>
+        <Typography variant="caption">{subtitle}</Typography>
+      </div>
+      <SwarmButton className={[classes.button, className].join(' ')} {...rest} />
+    </div>
+  )
+}

src/components/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import { Component, ErrorInfo, ReactElement } from 'react'
+import ItsBroken from '../layout/ItsBroken'
 
 interface Props {
   children: ReactElement
@@ -26,8 +27,7 @@ export default class ErrorBoundary extends Component<Props, State> {
 
   render(): ReactElement {
     if (this.state.error) {
-      // You can render any custom fallback UI
+      return <ItsBroken message={this.state.error.message} />
-      return <h1>Something went wrong. Error: {this.state.error.message}</h1>
     }
 
     return this.props.children

src/components/Feedback.tsx

@@ -0,0 +1,95 @@
+import { ReactElement, useEffect, useState } from 'react'
+import * as Sentry from '@sentry/react'
+import { Link } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { MessageSquare } from 'react-feather'
+
+import config from '../config'
+import SideBarItem from './SideBarItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#9f9f9f',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+
+    icon: {
+      height: theme.spacing(4),
+    },
+  }),
+)
+
+/**
+ * Parses Sentry DNS so it could be transformed into API call
+ * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
+ */
+const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
+
+async function isSentryReachable(): Promise<boolean> {
+  const key = config.SENTRY_KEY
+
+  if (!key) {
+    return false
+  }
+
+  const match = SENTRY_PARSING_REGEX.exec(key)
+
+  if (!match) {
+    return false
+  }
+
+  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
+
+  try {
+    await fetch(url, { method: 'POST' })
+
+    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
+    return true
+  } catch (e) {
+    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
+    return false
+  }
+}
+
+function showFeedbackForm(): void {
+  const eventId = Sentry.captureMessage('User feedback')
+  Sentry.showReportDialog({
+    eventId,
+    title: 'Provide us feedback!',
+    subtitle: 'Share with us what you like and/or dislike.',
+    subtitle2: 'We will be very happy.',
+    labelComments: 'What is your impression about this app?',
+    labelSubmit: 'Send Feedback',
+  })
+}
+
+export default function Feedback(): ReactElement {
+  const [sentryEnabled, setSentryEnabled] = useState(false)
+  const classes = useStyles()
+
+  // Run this only on component mount to verify once that Sentry is reachable
+  useEffect(() => {
+    isSentryReachable().then(result => {
+      setSentryEnabled(result)
+    })
+  }, [])
+
+  if (sentryEnabled) {
+    return (
+      <Link onClick={showFeedbackForm} className={classes.link}>
+        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
+      </Link>
+    )
+  }
+
+  return <></>
+}

src/components/Map.tsx

@@ -0,0 +1,86 @@
+import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
+import type { Peer } from '@ethersphere/bee-js'
+import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
+import nodesDb from '../assets/data/nodes-db.json'
+import { Context } from '../providers/Bee'
+import mapData from '../assets/data/map-data.json'
+
+interface Props {
+  style?: CSSProperties
+}
+
+interface MapRecord {
+  lat: number
+  lng: number
+}
+
+type MapDB = Record<string, MapRecord>
+
+const fullMapDb = nodesDb as unknown as MapDB
+const deduplicatedRecords = deduplicate(fullMapDb)
+
+function deduplicate(db: MapDB): MapRecord[] {
+  const noDuplicates: Record<string, MapRecord> = {}
+
+  Object.entries(fullMapDb).forEach(([key, record]) => {
+    noDuplicates[`${record.lat} ${record.lng}`] = record
+  })
+
+  return Object.values(noDuplicates)
+}
+
+function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
+  const noDuplicates: Record<string, MapRecord> = {}
+  peers.forEach(({ address }) => {
+    const record = db[address]
+
+    if (record) noDuplicates[`${record.lat} ${record.lng}`] = record
+  })
+
+  return Object.values(noDuplicates)
+}
+
+function addPins(map: DottedMap, pins: MapRecord[], color: string) {
+  pins.forEach(({ lat, lng }) => {
+    map.addPin({ lat, lng, svgOptions: { color } })
+  })
+}
+
+const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
+addPins(mapPrecomputed, deduplicatedRecords, '#303030')
+
+const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
+
+export default function Card({ style }: Props): ReactElement {
+  const { peers } = useContext(Context)
+  const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
+
+  useEffect(() => {
+    if (!peers) return
+
+    const points = findIntersection(fullMapDb, peers)
+    const mapNew = Object.create(mapPrecomputed)
+    addPins(mapNew, points, '#09CA6C')
+    setMap(mapNew.getSVG(mapSvgOptions))
+  }, [peers])
+
+  return (
+    <div
+      style={Object.assign({}, style, {
+        width: '100%',
+        height: '380px',
+        backgroundColor: '#f3f3f3',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <img
+        alt="world map"
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
+      />
+    </div>
+  )
+}

src/components/SideBar.tsx

@@ -1,14 +1,19 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
-import { Bookmark, BookOpen, Briefcase, DollarSign, FileText, Gift, Home, Layers, Settings } from 'react-feather'
+import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
-import Logo from '../assets/logo.svg'
+import DashboardLogo from '../assets/dashboard-logo.svg'
+import DesktopLogo from '../assets/desktop-logo.svg'
 import { config } from '../config'
+import { useIsBeeDesktop } from '../hooks/apiHooks'
+import { Context } from '../providers/Bee'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
+import Feedback from './Feedback'
 
 const navBarItems = [
   {
@@ -20,37 +25,25 @@ const navBarItems = [
     label: 'Files',
     path: ROUTES.UPLOAD,
     icon: FileText,
+    pathMatcherSubstring: '/files/',
   },
   {
-    label: 'Feeds',
+    label: 'Account',
-    path: ROUTES.FEEDS,
+    path: ROUTES.ACCOUNT_WALLET,
-    icon: Bookmark,
+    icon: Briefcase,
+    pathMatcherSubstring: '/account/',
   },
   {
-    label: 'Stamps',
+    label: 'Top Up',
-    path: ROUTES.STAMPS,
+    path: ROUTES.WALLET,
-    icon: Layers,
-  },
-  {
-    label: 'Accounting',
-    path: ROUTES.ACCOUNTING,
     icon: DollarSign,
+    requiresMode: BeeModes.ULTRA_LIGHT,
   },
   {
     label: 'Settings',
     path: ROUTES.SETTINGS,
     icon: Settings,
   },
-  {
-    label: 'Account',
-    path: ROUTES.WALLET,
-    icon: Briefcase,
-  },
-  {
-    label: 'Gift Wallets',
-    path: ROUTES.GIFT_CODES,
-    icon: Gift,
-  },
 ]
 
 const drawerWidth = 300
@@ -70,6 +63,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
       backgroundColor: '#212121',
+      zIndex: 988,
     },
     logo: {
       marginLeft: theme.spacing(8),
@@ -103,27 +97,32 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
+  const { nodeInfo } = useContext(Context)
+  const { isBeeDesktop } = useIsBeeDesktop()
 
   return (
     <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
       <Grid container direction="column" justifyContent="space-between" className={classes.root}>
         <Grid className={classes.logo}>
           <Link to={ROUTES.INFO}>
-            <img alt="swarm" src={Logo} />
+            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
           </Link>
         </Grid>
         <Grid>
           <List>
-            {navBarItems.map(p => (
+            {navBarItems
-              <Link to={p.path} key={p.path} className={classes.link}>
+              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
-                <SideBarItem
+              .map(p => (
-                  key={p.path}
+                <Link to={p.path} key={p.path} className={classes.link}>
-                  iconStart={<p.icon className={classes.icon} />}
+                  <SideBarItem
-                  path={p.path}
+                    key={p.path}
-                  label={p.label}
+                    iconStart={<p.icon className={classes.icon} />}
-                />
+                    path={p.path}
-              </Link>
+                    pathMatcherSubstring={p.pathMatcherSubstring}
-            ))}
+                    label={p.label}
+                  />
+                </Link>
+              ))}
           </List>
           <Divider className={classes.divider} />
           <List>
@@ -137,9 +136,12 @@ export default function SideBar(): ReactElement {
           </List>
         </Grid>
         <Grid>
-          <Link to={ROUTES.STATUS} className={classes.link}>
+          <List>
-            <SideBarStatus path={ROUTES.STATUS} />
+            <Link to={ROUTES.STATUS} className={classes.link}>
-          </Link>
+              <SideBarStatus path={ROUTES.STATUS} />
+            </Link>
+            <Feedback />
+          </List>
         </Grid>
       </Grid>
     </Drawer>

src/components/SideBarItem.tsx

@@ -1,8 +1,7 @@
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
 import type { ReactElement, ReactNode } from 'react'
-import { useLocation, matchPath } from 'react-router-dom'
+import { matchPath, useLocation } 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: {
@@ -45,12 +44,15 @@ interface Props {
   iconEnd?: ReactNode
   path?: string
   label: ReactNode
+  pathMatcherSubstring?: string
 }
 
-export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
   const classes = useStyles()
   const location = useLocation()
-  const isSelected = Boolean(path && matchPath(location.pathname, path))
+  const isSelected = pathMatcherSubstring
+    ? location.pathname.startsWith(pathMatcherSubstring)
+    : Boolean(path && matchPath(location.pathname, path))
 
   return (
     <StyledListItem button selected={isSelected} disableRipple>

src/components/SwarmButton.tsx

@@ -1,13 +1,9 @@
-import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
 import { IconProps } from 'react-feather'
 
-interface Props {
+export interface SwarmButtonProps extends ButtonProps {
-  onClick: () => void
   iconType: React.ComponentType<IconProps>
-  children: string
-  className?: string
-  disabled?: boolean
   loading?: boolean
   cancel?: boolean
   variant?: 'text' | 'contained' | 'outlined'
@@ -16,7 +12,7 @@ interface Props {
 const useStyles = makeStyles(() =>
   createStyles({
     button: {
-      height: '52px',
+      height: '42px',
       position: 'relative',
       whiteSpace: 'nowrap',
       color: '#242424',
@@ -51,7 +47,9 @@ export function SwarmButton({
   loading,
   cancel,
   variant = 'contained',
-}: Props): ReactElement {
+  style,
+  ...other
+}: SwarmButtonProps): ReactElement {
   const classes = useStyles()
 
   function getIconColor() {
@@ -73,14 +71,18 @@ export function SwarmButton({
 
   return (
     <Button
+      style={style}
       className={getButtonClassName()}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick()
+        if (onClick) {
-        event.currentTarget.blur()
+          onClick(event)
+          event.currentTarget.blur()
+        }
       }}
       variant={variant}
       startIcon={icon}
       disabled={disabled}
+      {...other}
     >
       {children}
       {loading && (

src/components/SwarmSelect.tsx

@@ -1,13 +1,27 @@
-import { createStyles, FormHelperText, makeStyles, MenuItem, Select as SimpleSelect, Theme } from '@material-ui/core'
+import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
 import { Field } from 'formik'
 import { Select } from 'formik-material-ui'
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
 
 export type SelectEvent = React.ChangeEvent<{
   name?: string | undefined
   value: unknown
 }>
 
+function renderValue(value: unknown): ReactNode {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  const label = Reflect.get(value as object, 'label')
+
+  if (label) {
+    return label
+  }
+
+  return value as ReactNode
+}
+
 interface Props {
   label?: string
   name?: string
@@ -15,6 +29,7 @@ interface Props {
   onChange?: (event: SelectEvent) => void
   formik?: boolean
   defaultValue?: string
+  placeholder?: string
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -37,7 +52,15 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 )
 
-export function SwarmSelect({ defaultValue, formik, name, options, onChange, label }: Props): ReactElement {
+export function SwarmSelect({
+  defaultValue,
+  formik,
+  name,
+  options,
+  onChange,
+  label,
+  placeholder,
+}: Props): ReactElement {
   const classes = useStyles()
 
   if (formik) {
@@ -50,9 +73,10 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
           name={name}
           fullWidth
           variant="outlined"
-          defaultValue={defaultValue || ''}
+          defaultValue={defaultValue}
           className={classes.select}
-          placeholder={label}
+          displayEmpty
+          renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
           MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
         >
           {options.map((x, i) => (
@@ -68,15 +92,16 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
   return (
     <>
       {label && <FormHelperText>{label}</FormHelperText>}
-      <SimpleSelect
+      <MuiSelect
         required
         name={name}
         fullWidth
         variant="outlined"
         className={classes.select}
-        defaultValue={defaultValue || ''}
+        defaultValue={defaultValue}
         onChange={onChange}
-        placeholder={label}
+        displayEmpty
+        renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
         MenuProps={{ MenuListProps: { disablePadding: true }, PaperProps: { square: true } }}
       >
         {options.map((x, i) => (
@@ -84,7 +109,7 @@ export function SwarmSelect({ defaultValue, formik, name, options, onChange, lab
             {x.label}
           </MenuItem>
         ))}
-      </SimpleSelect>
+      </MuiSelect>
     </>
   )
 }

src/config.ts

@@ -1,7 +1,3 @@
-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
@@ -10,19 +6,21 @@ class Config {
   public readonly BEE_DISCORD_HOST: string
   public readonly GITHUB_REPO_URL: string
   public readonly BEE_DESKTOP_URL: string
+  public readonly SENTRY_KEY: string | undefined
+  public readonly SENTRY_ENVIRONMENT: string | undefined
 
   constructor() {
-    this.BEE_API_HOST =
+    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
-      sessionStorage.getItem('api_host') || getProcessEnv('REACT_APP_BEE_HOST') || 'http://localhost:1633'
+    this.SENTRY_KEY = process.env.REACT_APP_SENTRY_KEY
+    this.SENTRY_ENVIRONMENT = process.env.REACT_APP_SENTRY_ENVIRONMENT
     this.BEE_DEBUG_API_HOST =
-      sessionStorage.getItem('debug_api_host') || getProcessEnv('REACT_APP_BEE_DEBUG_HOST') || 'http://localhost:1635'
+      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
     this.BLOCKCHAIN_EXPLORER_URL =
-      getProcessEnv('REACT_APP_BLOCKCHAIN_EXPLORER_URL') || 'https://blockscout.com/xdai/mainnet'
+      process.env.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_DOCS_HOST = process.env.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.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
-    this.GITHUB_REPO_URL =
+    this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
-      getProcessEnv('REACT_APP_BEE_GITHUB_REPO_URL') || 'https://api.github.com/repos/ethersphere/bee'
+    this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin
-    this.BEE_DESKTOP_URL = getProcessEnv('REACT_APP_BEE_DESKTOP_URL') || window.location.origin
   }
 }
 

src/index.css

@@ -2,9 +2,8 @@ body {
   height: 100vh;
   min-height: 100vh;
   margin: 0;
-  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -16,6 +15,12 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    monospace;
+}
+
+.sentry-error-embed * {
+  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

src/layout/Dashboard.tsx

@@ -1,9 +1,12 @@
 import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ReactElement, useContext } from 'react'
+import React, { ReactElement, useContext } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
 import { Context } from '../providers/Bee'
+import config from '../config'
+import * as Sentry from '@sentry/react'
+import ItsBroken from './ItsBroken'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -22,23 +25,37 @@ const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
   const { isLoading } = useContext(Context)
+  const content = (
+    <>
+      {isLoading ? (
+        <div style={{ textAlign: 'center', width: '100%' }}>
+          <CircularProgress />
+        </div>
+      ) : (
+        props.children
+      )}
+    </>
+  )
+
+  let errorBoundaryWithContent
+
+  if (config.SENTRY_KEY) {
+    errorBoundaryWithContent = (
+      <Sentry.ErrorBoundary
+        showDialog
+        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
+      >
+        {content}
+      </Sentry.ErrorBoundary>
+    )
+  } else {
+    errorBoundaryWithContent = <ErrorBoundary>{content}</ErrorBoundary>
+  }
 
   return (
     <div style={{ display: 'flex' }}>
       <SideBar />
-      <Container className={classes.content}>
+      <Container className={classes.content}>{errorBoundaryWithContent}</Container>
-        <ErrorBoundary>
-          <>
-            {isLoading ? (
-              <div style={{ textAlign: 'center', width: '100%' }}>
-                <CircularProgress />
-              </div>
-            ) : (
-              props.children
-            )}
-          </>
-        </ErrorBoundary>
-      </Container>
     </div>
   )
 }

src/layout/ItsBroken.tsx

@@ -0,0 +1,36 @@
+import { Container } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    content: {
+      backgroundColor: theme.palette.background.default,
+      minHeight: '100vh',
+      textAlign: 'center',
+    },
+    errorMsg: {
+      marginTop: '30px',
+    },
+  }),
+)
+
+interface Props {
+  message: string
+}
+
+// TODO: Provide some nicer design
+const ItsBroken = ({ message }: Props): ReactElement => {
+  const classes = useStyles()
+
+  return (
+    <div>
+      <Container className={classes.content}>
+        <h1>Ups, there was a problem 😅</h1>
+        <h3 className={classes.errorMsg}>Error: {message}</h3>
+      </Container>
+    </div>
+  )
+}
+
+export default ItsBroken

src/models/BzzToken.ts

@@ -2,7 +2,7 @@ import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
 export class BzzToken extends Token {
-  constructor(amount: BigNumber | string | BigInt) {
+  constructor(amount: BigNumber | string | bigint) {
     super(amount, 16)
   }
 }

src/models/DaiToken.ts

@@ -2,7 +2,7 @@ import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
 export class DaiToken extends Token {
-  constructor(amount: BigNumber | string | BigInt) {
+  constructor(amount: BigNumber | string | bigint) {
     super(amount, 18)
   }
 }

src/models/Token.ts

@@ -10,7 +10,7 @@ export class Token {
   private amount: BigNumber // Represented in the base units, so it is always an integer value
   private readonly decimals: digits
 
-  constructor(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS) {
+  constructor(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS) {
     const a = makeBigNumber(amount)
 
     if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
@@ -31,7 +31,7 @@ export class Token {
    *
    * @returns new Token
    */
-  static fromDecimal(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS): Token | never {
+  static fromDecimal(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS): Token | never {
     const a = makeBigNumber(amount)
 
     // No need to do any validation here, it is done when the new token is created
@@ -40,7 +40,7 @@ export class Token {
     return new Token(t, decimals)
   }
 
-  get toBigInt(): BigInt {
+  get toBigInt(): bigint {
     return BigInt(this.amount.toFixed(0))
   }
 

src/pages/account/AccountNavigation.tsx

@@ -0,0 +1,55 @@
+import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ACCOUNT_TABS } from '../../routes'
+
+const tabMap = {
+  WALLET: 0,
+  CHEQUEBOOK: 1,
+  STAMPS: 2,
+  FEEDS: 3,
+}
+
+interface Props {
+  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      marginBottom: theme.spacing(4),
+      textTransform: 'none',
+    },
+    leftTab: {
+      marginRight: theme.spacing(0.125),
+    },
+    centerTab: {
+      marginLeft: theme.spacing(0.125),
+      marginRight: theme.spacing(0.125),
+    },
+    rightTab: {
+      marginLeft: theme.spacing(0.125),
+    },
+  }),
+)
+
+export function AccountNavigation({ active }: Props): ReactElement {
+  const classes = useStyles()
+  const navigate = useNavigate()
+
+  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
+    navigate(ACCOUNT_TABS[newValue])
+  }
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
+        <Tab className={classes.leftTab} key="WALLET" label="Wallet" />
+        <Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
+        <Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
+        <Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
+      </Tabs>
+    </div>
+  )
+}

src/pages/account/Header.tsx

@@ -0,0 +1,10 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+export function Header(): ReactElement {
+  return (
+    <Box mb={4}>
+      <Typography variant="h1">Account</Typography>
+    </Box>
+  )
+}

src/pages/account/chequebook/AccountChequebook.tsx

@@ -0,0 +1,60 @@
+import { ReactElement, useContext } from 'react'
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import DepositModal from '../../../containers/DepositModal'
+import WithdrawModal from '../../../containers/WithdrawModal'
+import { useAccounting } from '../../../hooks/accounting'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
+import PeerBalances from '../../accounting/PeerBalances'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountChequebook(): ReactElement {
+  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
+    useContext(BeeContext)
+  const { beeDebugApi } = useContext(SettingsContext)
+
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="CHEQUEBOOK" />
+      <div>
+        <ExpandableList label="Chequebook" defaultOpen>
+          <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem
+            label="Available Uncommitted Balance"
+            value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem
+            label="Total Cheques Amount Sent"
+            value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItem
+            label="Total Cheques Amount Received"
+            value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
+          />
+          <ExpandableListItemActions>
+            <WithdrawModal />
+            <DepositModal />
+          </ExpandableListItemActions>
+        </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/account/feeds/AccountFeeds.tsx

@@ -0,0 +1,112 @@
+import { Box } 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 { Context as IdentityContext, Identity } from '../../../providers/Feeds'
+import { ROUTES } from '../../../routes'
+import { formatEnum } from '../../../utils'
+import { persistIdentitiesWithoutUpdate } from '../../../utils/identity'
+import { DeleteFeedDialog } from '../../feeds/DeleteFeedDialog'
+import { ExportFeedDialog } from '../../feeds/ExportFeedDialog'
+import { ImportFeedDialog } from '../../feeds/ImportFeedDialog'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountFeeds(): ReactElement {
+  const { identities, setIdentities } = useContext(IdentityContext)
+
+  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.ACCOUNT_FEEDS_NEW)
+  }
+
+  function viewFeed(uuid: string) {
+    navigate(ROUTES.ACCOUNT_FEEDS_VIEW.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)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="FEEDS" />
+      {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}>
+        <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>
+      ))}
+    </>
+  )
+}

src/pages/account/stamps/AccountStamps.tsx

@@ -0,0 +1,75 @@
+import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement, useContext, useEffect } from 'react'
+import { PlusSquare } from 'react-feather'
+import { useNavigate } from 'react-router'
+import { SwarmButton } from '../../../components/SwarmButton'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as StampsContext } from '../../../providers/Stamps'
+import { ROUTES } from '../../../routes'
+import StampsTable from '../../stamps/StampsTable'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      width: '100%',
+      display: 'grid',
+    },
+    actions: {
+      display: 'flex',
+      width: '100%',
+      flex: '0 1 auto',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+    },
+  }),
+)
+
+export function AccountStamps(): ReactElement {
+  const classes = useStyles()
+
+  const navigate = useNavigate()
+
+  const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
+  const { status } = useContext(BeeContext)
+
+  useEffect(() => {
+    if (!status.all) return
+    start()
+
+    return () => stop()
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
+  function navigateToNewStamp() {
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="STAMPS" />
+      <div className={classes.root}>
+        {error && (
+          <Container style={{ textAlign: 'center', padding: '50px' }}>
+            Error loading postage stamps details: {error.message}
+          </Container>
+        )}
+        {!error && (
+          <>
+            <div className={classes.actions}>
+              <SwarmButton onClick={navigateToNewStamp} iconType={PlusSquare}>
+                Buy New Postage Stamp
+              </SwarmButton>
+              <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
+            </div>
+            <StampsTable postageStamps={stamps} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}

src/pages/account/wallet/AccountWallet.tsx

@@ -0,0 +1,67 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { Download, Gift, Link } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import { Loading } from '../../../components/Loading'
+import { SwarmButton } from '../../../components/SwarmButton'
+import { Context } from '../../../providers/Bee'
+import { ROUTES } from '../../../routes'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountWallet(): ReactElement {
+  const { balance, nodeAddresses } = useContext(Context)
+
+  const navigate = useNavigate()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  function onCheckTransactions() {
+    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
+  }
+
+  function onInvite() {
+    navigate(ROUTES.ACCOUNT_INVITATIONS)
+  }
+
+  function onDeposit() {
+    navigate(ROUTES.WALLET)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="WALLET" />
+      <Box mb={4}>
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          <Typography variant="h2">Wallet balance</Typography>
+          <SwarmButton onClick={onDeposit} iconType={Download}>
+            Deposit
+          </SwarmButton>
+        </Grid>
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
+          Check transactions on Blockscout
+        </SwarmButton>
+        <SwarmButton onClick={onInvite} iconType={Gift}>
+          Invite to Swarm...
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}

src/pages/accounting/index.tsx

@@ -1,52 +0,0 @@
-import { ReactElement, useContext } from 'react'
-
-import PeerBalances from './PeerBalances'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
-import { Context as SettingsContext } from '../../providers/Settings'
-import { useAccounting } from '../../hooks/accounting'
-import ExpandableList from '../../components/ExpandableList'
-import ExpandableListItem from '../../components/ExpandableListItem'
-import ExpandableListItemActions from '../../components/ExpandableListItemActions'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-import WithdrawModal from '../../containers/WithdrawModal'
-import DepositModal from '../../containers/DepositModal'
-
-export default function Accounting(): ReactElement {
-  const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
-    useContext(BeeContext)
-  const { beeDebugApi } = useContext(SettingsContext)
-
-  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
-
-  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
-
-  return (
-    <div>
-      <ExpandableList label="Chequebook" defaultOpen>
-        <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-        <ExpandableListItem
-          label="Available Uncommitted Balance"
-          value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-        />
-        <ExpandableListItem
-          label="Total Cheques Amount Sent"
-          value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
-        />
-        <ExpandableListItem
-          label="Total Cheques Amount Received"
-          value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
-        />
-        <ExpandableListItemActions>
-          <WithdrawModal />
-          <DepositModal />
-        </ExpandableListItemActions>
-      </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

@@ -65,7 +65,7 @@ export default function CreateNewFeed(): ReactElement {
     const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
     persistIdentity(identities, identity)
     setIdentities(identities)
-    navigate(ROUTES.FEEDS)
+    navigate(ROUTES.ACCOUNT_FEEDS)
     setLoading(false)
   }
 

src/pages/feeds/FeedSubpage.tsx

@@ -2,7 +2,7 @@ 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 { useNavigate, useParams } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -40,13 +40,13 @@ export function FeedSubpage(): ReactElement {
   }, [beeApi, uuid, identity])
 
   if (!identity || !status.all) {
-    navigate(ROUTES.FEEDS, { replace: true })
+    navigate(ROUTES.ACCOUNT_FEEDS, { replace: true })
 
     return <></>
   }
 
   function onClose() {
-    navigate(ROUTES.FEEDS)
+    navigate(ROUTES.ACCOUNT_FEEDS)
   }
 
   return (

src/pages/feeds/UpdateFeed.tsx

@@ -2,7 +2,7 @@ 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 { useNavigate, useParams } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -73,10 +73,10 @@ export default function UpdateFeed(): ReactElement {
     }
 
     try {
-      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+      await updateFeed(beeApi, beeDebugApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
       persistIdentity(identities, identity)
       setIdentities([...identities])
-      navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
+      navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', identity.uuid))
     } catch (error: unknown) {
       setLoading(false)
 

src/pages/feeds/index.tsx

@@ -29,11 +29,11 @@ export default function Feeds(): ReactElement {
   const [showDelete, setShowDelete] = useState(false)
 
   function createNewFeed() {
-    return navigate(ROUTES.FEEDS_NEW)
+    return navigate(ROUTES.ACCOUNT_FEEDS_NEW)
   }
 
   function viewFeed(uuid: string) {
-    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
+    navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uuid))
   }
 
   function onDialogClose() {

src/pages/files/Share.tsx

@@ -99,7 +99,7 @@ export function Share(): ReactElement {
   }
 
   function onUpdateFeed() {
-    navigate(ROUTES.FEEDS_UPDATE.replace(':hash', reference))
+    navigate(ROUTES.ACCOUNT_FEEDS_UPDATE.replace(':hash', reference))
   }
 
   useEffect(() => {

src/pages/files/Upload.tsx

@@ -13,6 +13,7 @@ import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampsContext, EnrichedPostageBatch } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
+import { waitUntilStampUsable } from '../../utils'
 import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils/file'
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
@@ -30,8 +31,8 @@ export function Upload(): ReactElement {
   const [isUploading, setUploading] = useState(false)
   const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
-  const { refresh } = useContext(StampsContext)
+  const { stamps, refresh } = useContext(StampsContext)
-  const { beeApi } = useContext(SettingsContext)
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
   const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
   const { identities, setIdentities } = useContext(IdentityContext)
   const { status } = useContext(BeeContext)
@@ -39,6 +40,8 @@ export function Upload(): ReactElement {
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
 
+  const hasAnyStamps = stamps !== null && stamps.length > 0
+
   useEffect(() => {
     refresh()
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
@@ -66,7 +69,7 @@ export function Upload(): ReactElement {
     }
   }
 
-  const uploadFiles = (password?: string) => {
+  const uploadFiles = async (password?: string) => {
     if (!beeApi || !files.length || !stamp || !metadata) {
       return
     }
@@ -122,6 +125,10 @@ export function Upload(): ReactElement {
 
     setUploading(true)
 
+    if (beeDebugApi) {
+      await waitUntilStampUsable(stamp.batchID, beeDebugApi)
+    }
+
     beeApi
       .uploadFiles(stamp.batchID, fls, { indexDocument })
       .then(hash => {
@@ -130,11 +137,13 @@ export function Upload(): ReactElement {
         if (uploadOrigin.origin === 'UPLOAD') {
           navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
         } else {
-          updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
+          updateFeed(beeApi, beeDebugApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(
-            persistIdentity(identities, identity as Identity)
+            () => {
-            setIdentities([...identities])
+              persistIdentity(identities, identity as Identity)
-            navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
+              setIdentities([...identities])
-          })
+              navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
+            },
+          )
         }
       })
       .catch(e => {
@@ -173,7 +182,7 @@ export function Upload(): ReactElement {
       {step === 1 && (
         <>
           <Box mb={2}>
-            {stampMode === 'SELECT' ? (
+            {hasAnyStamps && stampMode === 'SELECT' ? (
               <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
             ) : (
               <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
@@ -203,6 +212,7 @@ export function Upload(): ReactElement {
         onUpload={onUpload}
         isUploading={isUploading}
         hasStamp={Boolean(stamp)}
+        hasAnyStamps={hasAnyStamps}
         uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
         stampMode={stampMode}
         setStampMode={setStampMode}

src/pages/files/UploadActionBar.tsx

@@ -13,6 +13,7 @@ interface Props {
   onProceed: () => void
   isUploading: boolean
   hasStamp: boolean
+  hasAnyStamps: boolean
   uploadLabel: string
   stampMode: 'BUY' | 'SELECT'
   setStampMode: (mode: 'BUY' | 'SELECT') => void
@@ -26,6 +27,7 @@ export function UploadActionBar({
   onProceed,
   isUploading,
   hasStamp,
+  hasAnyStamps,
   uploadLabel,
   stampMode,
   setStampMode,
@@ -62,6 +64,7 @@ export function UploadActionBar({
           </SwarmButton>
         </ExpandableListItemActions>
         <SwarmButton
+          disabled={stampMode === 'BUY' && !hasAnyStamps}
           onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
           iconType={stampMode === 'BUY' ? Layers : PlusSquare}
         >

src/pages/gift-code/index.tsx

@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { Check, X } from 'react-feather'
 import { useNavigate } from 'react-router'
+import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -12,11 +13,10 @@ import { SwarmButton } from '../../components/SwarmButton'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as TopUpContext } from '../../providers/TopUp'
 import { createGiftWallet } from '../../utils/desktop'
-import { generateWallet } from '../../utils/identity'
 import { ResolvedWallet } from '../../utils/wallet'
 
 export default function Index(): ReactElement {
-  const { giftWallets, addGiftWallet } = useContext(TopUpContext)
+  const { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
   const { balance } = useContext(BeeContext)
 
   const [loading, setLoading] = useState(false)
@@ -26,13 +26,13 @@ export default function Index(): ReactElement {
     async function mapGiftWallets() {
       const results = []
       for (const giftWallet of giftWallets) {
-        results.push(await ResolvedWallet.make(giftWallet))
+        results.push(await ResolvedWallet.make(giftWallet, provider))
       }
       setBalances(results)
     }
 
     mapGiftWallets()
-  }, [giftWallets])
+  }, [giftWallets, provider])
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
@@ -41,9 +41,9 @@ export default function Index(): ReactElement {
     enqueueSnackbar('Sending funds to gift wallet...')
     setLoading(true)
     try {
-      const wallet = generateWallet()
+      const wallet = Wallet.createRandom()
       addGiftWallet(wallet)
-      await createGiftWallet(wallet.getAddressString())
+      await createGiftWallet(wallet.address)
       enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
     } catch (error) {
       enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })

src/pages/info/index.tsx

@@ -1,12 +1,13 @@
 import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
+import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
 
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import Card from '../../components/Card'
-import ExpandableList from '../../components/ExpandableList'
+import Map from '../../components/Map'
 import ExpandableListItem from '../../components/ExpandableListItem'
-import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { useNavigate } from 'react-router'
-import TopologyStats from '../../components/TopologyStats'
+import { ROUTES } from '../../routes'
 
 export default function Status(): ReactElement {
   const {
@@ -15,48 +16,123 @@ export default function Status(): ReactElement {
     isLatestBeeVersion,
     latestBeeVersionUrl,
     topology,
-    nodeAddresses,
-    chequebookAddress,
     nodeInfo,
+    balance,
+    chequebookBalance,
   } = useContext(BeeContext)
-
+  const navigate = useNavigate()
-  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <div>
-      <ExpandableList label="Bee Node" defaultOpen>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
-        <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
+        {status.all ? (
-        <ExpandableListItem
+          <Card
-          label="Agent"
+            buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
-          value={
+            icon={<Globe />}
-            <div>
+            title="Your node is connected."
-              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+            subtitle="You can now access content hosted on Swarm."
-                Bee
+            status="ok"
-              </a>
+          />
-              {` ${latestUserVersion || '-'} `}
+        ) : (
-              <Button size="small" variant="outlined" href={latestBeeVersionUrl} target="_blank">
+          <Card
+            buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+            icon={<Globe />}
+            title="Your node is not connected…"
+            subtitle="You’re not connected to Swarm."
+            status="error"
+          />
+        )}
+        <div style={{ width: '8px' }}></div>
+        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
+          <Card
+            buttonProps={{
+              iconType: Briefcase,
+              children: 'Manage your wallet',
+              onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
+            }}
+            icon={<Briefcase />}
+            title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
+            subtitle="Current wallet balance."
+            status="ok"
+          />
+        ) : (
+          <Card
+            buttonProps={{
+              iconType: Settings,
+              children: 'Setup wallet',
+              onClick: () => navigate(ROUTES.WALLET),
+            }}
+            icon={<ArrowUp />}
+            title="Your wallet is not setup."
+            subtitle="To share content on Swarm, please setup your wallet."
+            status="error"
+          />
+        )}
+        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && (
+          <>
+            <div style={{ width: '8px' }} />
+            {chequebookBalance?.availableBalance !== undefined &&
+            chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
+              <Card
+                buttonProps={{
+                  iconType: RefreshCcw,
+                  children: 'View chequebook',
+                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+                }}
+                icon={<RefreshCcw />}
+                title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
+                subtitle="Your chequebook is setup and has balance"
+                status="ok"
+              />
+            ) : (
+              <Card
+                buttonProps={{
+                  iconType: RefreshCcw,
+                  children: 'View chequebook',
+                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+                }}
+                icon={<RefreshCcw />}
+                title={
+                  chequebookBalance?.availableBalance
+                    ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
+                    : 'No available balance'
+                }
+                subtitle="Your chequebook is not setup or has no balance."
+                status="error"
+              />
+            )}
+          </>
+        )}
+      </div>
+      <div style={{ height: '16px' }} />
+      <Map />
+      <div style={{ height: '2px' }} />
+      <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
+      <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
+      <div style={{ height: '16px' }} />
+      <ExpandableListItem
+        label="Bee version"
+        value={
+          <div>
+            <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+              Bee
+            </a>
+            {` ${latestUserVersion ?? '-'} `}
+            {latestUserVersion && (
+              <Button
+                size="small"
+                variant="outlined"
+                href={latestBeeVersionUrl}
+                target="_blank"
+                style={{ height: '26px' }}
+              >
                 {isLatestBeeVersion ? 'latest' : 'update'}
               </Button>
-            </div>
+            )}
-          }
+          </div>
-        />
+        }
-        <ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
+      />
-        <ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
+      <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
-        <ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
-
-        <ExpandableList level={1} label="Underlay addresses">
-          {nodeAddresses?.underlay.map(addr => (
-            <ExpandableListItem key={addr} value={addr} />
-          ))}
-        </ExpandableList>
-      </ExpandableList>
-      <ExpandableList label="Blockchain" defaultOpen>
-        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
-        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
-      </ExpandableList>
-      <ExpandableList label="Connectivity" defaultOpen>
-        <TopologyStats topology={topology} />
-      </ExpandableList>
     </div>
   )
 }

src/pages/rpc/index.tsx

@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { Check } from 'react-feather'
 import { useNavigate } from 'react-router'
+import { providers } from 'ethers'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
@@ -11,18 +12,17 @@ import { ROUTES } from '../../routes'
 import { Rpc } from '../../utils/rpc'
 
 export default function Index(): ReactElement {
-  const { jsonRpcProvider, setJsonRpcProvider } = useContext(Context)
+  const { providerUrl, setProviderUrl } = useContext(Context)
-
+  const [localProviderUrl, setLocalProviderUrl] = useState(providerUrl)
-  const [provider, setProvider] = useState(jsonRpcProvider)
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
 
   async function onSubmit() {
     try {
-      await Rpc.eth_getBlockByNumber(provider)
+      await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
       enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
-      setJsonRpcProvider(provider)
+      setProviderUrl(localProviderUrl)
       navigate(ROUTES.CONFIRMATION)
     } catch (error) {
       enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
@@ -49,8 +49,8 @@ export default function Index(): ReactElement {
         <SwarmTextInput
           name="rpc-endpoint"
           label="RPC Endpoint"
-          onChange={event => setProvider(event.target.value)}
+          onChange={event => setLocalProviderUrl(event.target.value)}
-          defaultValue={jsonRpcProvider}
+          defaultValue={providerUrl}
         />
       </Box>
       <SwarmButton iconType={Check} onClick={onSubmit}>

src/pages/stamps/CreatePostageStampPage.tsx

@@ -8,7 +8,7 @@ export function CreatePostageStampPage(): ReactElement {
   const navigate = useNavigate()
 
   function onFinished() {
-    navigate(ROUTES.STAMPS)
+    navigate(ROUTES.ACCOUNT_STAMPS)
   }
 
   return (

src/pages/stamps/PostageStampCreation.tsx

@@ -9,13 +9,7 @@ import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampsContext } from '../../providers/Stamps'
-import {
+import { calculateStampPrice, convertAmountToSeconds, convertDepthToBytes, secondsToTimeString } from '../../utils'
-  calculateStampPrice,
-  convertAmountToSeconds,
-  convertDepthToBytes,
-  secondsToTimeString,
-  waitUntilStampUsable,
-} from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 
 interface FormValues {
@@ -88,8 +82,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           const amount = BigInt(values.amount)
           const depth = Number.parseInt(values.depth)
           const options = values.label ? { label: values.label } : undefined
-          const batch = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
-          await waitUntilStampUsable(batch, beeDebugApi)
           actions.resetForm()
           await refresh()
           onFinished()
@@ -107,7 +100,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           const depth = new BigNumber(values.depth)
 
           if (!depth.isInteger()) errors.depth = 'Depth must be an integer'
-          else if (depth.isLessThan(16)) errors.depth = 'Minimal depth is 16'
+          else if (depth.isLessThan(17)) errors.depth = 'Minimal depth is 17'
           else if (depth.isGreaterThan(255)) errors.depth = 'Depth has to be at most 255'
         }
 

src/pages/stamps/PostageStampSelector.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext } from 'react'
+import { ReactElement, useContext } from 'react'
 import { SwarmSelect } from '../../components/SwarmSelect'
 import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
 
@@ -26,6 +26,7 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
       options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
       onChange={event => onChange(event.target.value as string)}
       defaultValue={defaultValue}
+      placeholder="Please select a postage stamp..."
     />
   )
 }

src/pages/stamps/index.tsx

@@ -44,7 +44,7 @@ export default function Stamp(): ReactElement {
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
-    navigate(ROUTES.STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
   }
 
   return (

src/pages/top-up/GiftCardFund.tsx

@@ -19,7 +19,7 @@ import { ResolvedWallet } from '../../utils/wallet'
 
 export function GiftCardFund(): ReactElement {
   const { nodeAddresses, balance } = useContext(BeeContext)
-  const { jsonRpcProvider } = useContext(TopUpContext)
+  const { provider, providerUrl } = useContext(TopUpContext)
 
   const [loading, setLoading] = useState(false)
   const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
@@ -34,8 +34,8 @@ export function GiftCardFund(): ReactElement {
       return
     }
 
-    ResolvedWallet.make(privateKeyString).then(setWallet)
+    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
-  }, [privateKeyString])
+  }, [privateKeyString, provider])
 
   if (!wallet || !balance) {
     return <Loading />
@@ -49,10 +49,10 @@ export function GiftCardFund(): ReactElement {
     setLoading(true)
 
     try {
-      await wallet.transfer(nodeAddresses.ethereum)
+      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
       enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
       await sleepMs(5_000)
-      await upgradeToLightNode(jsonRpcProvider)
+      await upgradeToLightNode(providerUrl)
       await restartBeeNode()
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -1,8 +1,10 @@
 import { Box, Typography } from '@material-ui/core'
+import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import { ArrowRight } from 'react-feather'
 import { useNavigate } from 'react-router'
+import { Context as TopUpContext } from '../../providers/TopUp'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -11,10 +13,10 @@ import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 import { ROUTES } from '../../routes'
-import { getWalletFromPrivateKeyString } from '../../utils/identity'
 import { Rpc } from '../../utils/rpc'
 
 export function GiftCardTopUpIndex(): ReactElement {
+  const { provider } = useContext(TopUpContext)
   const [loading, setLoading] = useState(false)
   const [giftCode, setGiftCode] = useState('')
 
@@ -24,9 +26,9 @@ export function GiftCardTopUpIndex(): ReactElement {
   async function onProceed() {
     setLoading(true)
     try {
-      const wallet = getWalletFromPrivateKeyString(giftCode)
+      const wallet = new Wallet(giftCode, provider)
-      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.getAddressString()))
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.getAddressString()))
+      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
 
       if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
         throw Error('Gift wallet does not have enough funds')

src/pages/top-up/Swap.tsx

@@ -28,13 +28,13 @@ export function Swap({ header }: Props): ReactElement {
   const [loading, setLoading] = useState(false)
   const [hasSwapped, setSwapped] = useState(false)
 
-  const { jsonRpcProvider } = useContext(TopUpContext)
+  const { providerUrl } = useContext(TopUpContext)
-  const { balance } = useContext(BeeContext)
+  const { balance, nodeAddresses } = useContext(BeeContext)
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
 
-  if (!balance) {
+  if (!balance || !nodeAddresses) {
     return <Loading />
   }
 
@@ -53,7 +53,7 @@ export function Swap({ header }: Props): ReactElement {
       await performSwap(daiToSwap.toString)
       enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
       await sleepMs(5_000)
-      await upgradeToLightNode(jsonRpcProvider)
+      await upgradeToLightNode(providerUrl)
       await restartBeeNode()
       navigate(ROUTES.RESTART_LIGHT)
       enqueueSnackbar('Upgraded to light node', { variant: 'success' })
@@ -98,7 +98,7 @@ export function Swap({ header }: Props): ReactElement {
         <ArrowDown size={24} color="#aaaaaa" />
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
       </Box>
       <Box mb={0.25}>
         <ExpandableListItem

src/pages/top-up/index.tsx

@@ -40,7 +40,7 @@ export default function Index({ header, title, p, next }: Props): ReactElement {
       <Box mb={4}>{p}</Box>
       <SwarmDivider mb={4} />
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
       </Box>
       <Box mb={4}>
         <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />

src/providers/Bee.tsx

@@ -11,12 +11,13 @@ import {
 } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
 import semver from 'semver'
-import { engines } from '../../package.json'
+import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
 import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
+import { Context as TopUpContext } from './TopUp'
 
 export enum CheckState {
   OK = 'OK',
@@ -130,7 +131,7 @@ function getStatus(
   status.version.isEnabled = true
   status.version.checkState =
     debugApiHealth &&
-    semver.satisfies(debugApiHealth.version, engines.bee, {
+    semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
       includePrerelease: true,
     })
       ? CheckState.OK
@@ -184,6 +185,7 @@ function getStatus(
 
 export function Provider({ children }: Props): ReactElement {
   const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { provider } = useContext(TopUpContext)
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
@@ -238,9 +240,9 @@ export function Provider({ children }: Props): ReactElement {
 
   useEffect(() => {
     if (nodeAddresses?.ethereum) {
-      WalletAddress.make(nodeAddresses.ethereum).then(setWalletAddress)
+      WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
     }
-  }, [nodeAddresses])
+  }, [nodeAddresses, provider])
 
   useEffect(() => {
     const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)

src/providers/Stamps.tsx

@@ -34,7 +34,7 @@ interface Props {
   children: ReactChild
 }
 
-function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
+export function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
   const { depth, bucketDepth, utilization } = postageBatch
 
   const usage = utilization / Math.pow(2, depth - bucketDepth)

src/providers/TopUp.tsx

@@ -1,26 +1,27 @@
-import Wallet from 'ethereumjs-wallet'
+import { providers, Wallet } from 'ethers'
 import { createContext, ReactElement, useEffect, useState } from 'react'
 import { setJsonRpcInDesktop } from '../utils/desktop'
-import { getWalletFromPrivateKeyString } from '../utils/identity'
 
 const LocalStorageKeys = {
-  jsonRpcProvider: 'json-rpc-provider',
+  providerUrl: 'json-rpc-provider',
   depositWallet: 'deposit-wallet',
   giftWallets: 'gift-wallets',
   invitation: 'invitation',
 }
 
 interface ContextInterface {
-  jsonRpcProvider: string
+  providerUrl: string
+  provider: providers.JsonRpcProvider
   giftWallets: Wallet[]
-  setJsonRpcProvider: (jsonRpcProvider: string) => void
+  setProviderUrl: (providerUrl: string) => void
   addGiftWallet: (wallet: Wallet) => void
 }
 
 const initialValues: ContextInterface = {
-  jsonRpcProvider: '',
+  providerUrl: '',
+  provider: new providers.JsonRpcProvider(),
   giftWallets: [],
-  setJsonRpcProvider: () => {}, // eslint-disable-line
+  setProviderUrl: () => {}, // eslint-disable-line
   addGiftWallet: () => {}, // eslint-disable-line
 }
 
@@ -32,38 +33,39 @@ interface Props {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const [jsonRpcProvider, setJsonRpcProvider] = useState(
+  const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl)
-    localStorage.getItem('json-rpc-provider') || initialValues.jsonRpcProvider,
+  const [provider, setProvider] = useState(new providers.JsonRpcProvider(providerUrl))
-  )
   const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
 
   useEffect(() => {
     const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
 
     if (existingGiftWallets) {
-      setGiftWallets(JSON.parse(existingGiftWallets).map(getWalletFromPrivateKeyString))
+      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
     }
-  }, [])
+  }, [provider])
 
-  function setAndPersistJsonRpcProvider(jsonRpcProvider: string) {
+  function setAndPersistJsonRpcProvider(providerUrl: string) {
-    localStorage.setItem(LocalStorageKeys.jsonRpcProvider, jsonRpcProvider)
+    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
-    setJsonRpcProvider(jsonRpcProvider)
+    setProviderUrl(providerUrl)
+    setProvider(new providers.JsonRpcProvider(providerUrl))
     // eslint-disable-next-line no-console
-    setJsonRpcInDesktop(jsonRpcProvider).catch(console.error)
+    setJsonRpcInDesktop(providerUrl).catch(console.error)
   }
 
   function addGiftWallet(wallet: Wallet) {
     const newArray = [...giftWallets, wallet]
-    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.getPrivateKeyString())))
+    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
     setGiftWallets(newArray)
   }
 
   return (
     <Context.Provider
       value={{
-        jsonRpcProvider,
+        providerUrl,
+        provider,
         giftWallets,
-        setJsonRpcProvider: setAndPersistJsonRpcProvider,
+        setProviderUrl: setAndPersistJsonRpcProvider,
         addGiftWallet,
       }}
     >

src/routes.tsx

@@ -1,7 +1,9 @@
 import type { ReactElement } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import Accounting from './pages/accounting'
+import { AccountChequebook } from './pages/account/chequebook/AccountChequebook'
-import Feeds from './pages/feeds'
+import { AccountFeeds } from './pages/account/feeds/AccountFeeds'
+import { AccountStamps } from './pages/account/stamps/AccountStamps'
+import { AccountWallet } from './pages/account/wallet/AccountWallet'
 import CreateNewFeed from './pages/feeds/CreateNewFeed'
 import { FeedSubpage } from './pages/feeds/FeedSubpage'
 import UpdateFeed from './pages/feeds/UpdateFeed'
@@ -16,7 +18,6 @@ import Restart from './pages/restart/Restart'
 import Wallet from './pages/rpc'
 import Confirmation from './pages/rpc/Confirmation'
 import Settings from './pages/settings'
-import Stamps from './pages/stamps'
 import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
 import Status from './pages/status'
 import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
@@ -32,15 +33,8 @@ export enum ROUTES {
   UPLOAD_IN_PROGRESS = '/files/upload/workflow',
   DOWNLOAD = '/files/download',
   HASH = '/files/hash/:hash',
-  ACCOUNTING = '/accounting',
   SETTINGS = '/settings',
-  STAMPS = '/stamps',
-  STAMPS_NEW = '/stamps/new',
   STATUS = '/status',
-  FEEDS = '/feeds',
-  FEEDS_NEW = '/feeds/new',
-  FEEDS_UPDATE = '/feeds/update/:hash',
-  FEEDS_PAGE = '/feeds/:uuid',
   WALLET = '/wallet',
   CONFIRMATION = '/wallet/confirmation',
   TOP_UP_CRYPTO = '/top-up/crypto',
@@ -49,30 +43,37 @@ export enum ROUTES {
   TOP_UP_BANK_CARD_SWAP = '/top-up/bank-card/swap',
   TOP_UP_GIFT_CODE = '/top-up/gift-code',
   TOP_UP_GIFT_CODE_FUND = '/top-up/gift-code/fund/:privateKeyString',
-  GIFT_CODES = '/gift-codes',
   RESTART = '/restart',
   RESTART_LIGHT = '/light-mode-restart',
+  ACCOUNT_WALLET = '/account/wallet',
+  ACCOUNT_CHEQUEBOOK = '/account/chequebook',
+  ACCOUNT_STAMPS = '/account/stamps',
+  ACCOUNT_STAMPS_NEW = '/account/stamps/new',
+  ACCOUNT_FEEDS = '/account/feeds',
+  ACCOUNT_FEEDS_NEW = '/account/feeds/new',
+  ACCOUNT_FEEDS_UPDATE = '/account/feeds/update/:hash',
+  ACCOUNT_FEEDS_VIEW = '/account/feeds/:uuid',
+  ACCOUNT_INVITATIONS = '/account/invitations',
 }
 
+export const ACCOUNT_TABS = [
+  ROUTES.ACCOUNT_WALLET,
+  ROUTES.ACCOUNT_CHEQUEBOOK,
+  ROUTES.ACCOUNT_STAMPS,
+  ROUTES.ACCOUNT_FEEDS,
+]
+
 const BaseRouter = (): ReactElement => (
   <Routes>
     <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
     <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
     <Route path={ROUTES.DOWNLOAD} element={<Download />} />
     <Route path={ROUTES.HASH} element={<Share />} />
-    <Route path={ROUTES.ACCOUNTING} element={<Accounting />} />
     <Route path={ROUTES.SETTINGS} element={<Settings />} />
-    <Route path={ROUTES.STAMPS} element={<Stamps />} />
-    <Route path={ROUTES.STAMPS_NEW} element={<CreatePostageStampPage />} />
     <Route path={ROUTES.STATUS} element={<Status />} />
-    <Route path={ROUTES.FEEDS} element={<Feeds />} />
-    <Route path={ROUTES.FEEDS_NEW} element={<CreateNewFeed />} />
-    <Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
-    <Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
     <Route path={ROUTES.INFO} element={<Info />} />
     <Route path={ROUTES.WALLET} element={<Wallet />} />
     <Route path={ROUTES.CONFIRMATION} element={<Confirmation />} />
-    <Route path={ROUTES.GIFT_CODES} element={<GiftCards />} />
     <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
     <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
     <Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />
@@ -81,6 +82,15 @@ const BaseRouter = (): ReactElement => (
     <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
     <Route path={ROUTES.RESTART} element={<Restart />} />
     <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
+    <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
+    <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
+    <Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
+    <Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
+    <Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
+    <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
+    <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
+    <Route path={ROUTES.ACCOUNT_FEEDS_VIEW} element={<FeedSubpage />} />
+    <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />
   </Routes>
 )
 

src/theme.tsx

@@ -1,5 +1,5 @@
-import { createTheme, Theme } from '@material-ui/core/styles'
 import { orange } from '@material-ui/core/colors'
+import { createTheme, Theme } from '@material-ui/core/styles'
 
 declare module '@material-ui/core/styles/createPalette' {
   interface TypeBackground {
@@ -174,7 +174,7 @@ export const theme = createTheme({
   palette: {
     type: 'light',
     background: {
-      default: '#efefef',
+      default: '#ededed',
     },
     primary: {
       light: '#fcf2e8',
@@ -186,23 +186,29 @@ export const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
+    fontFamily: ['iAWriterQuattroV', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
     h1: {
-      fontSize: '1.3rem',
+      fontSize: '1.1rem',
-      fontWeight: 500,
+      fontWeight: 600,
     },
     h2: {
-      fontSize: '1rem',
+      fontSize: '0.9rem',
-      fontWeight: 500,
+      fontWeight: 600,
     },
     h3: {
       fontSize: '0.8rem',
       fontWeight: 500,
     },
+    body1: {
+      fontSize: '0.85rem',
+    },
     body2: {
-      fontFamily: '"IBM Plex Mono", monospace',
+      fontFamily: '"iAWriterMonoV", monospace',
       fontWeight: 500,
-      fontSize: '1rem',
+      fontSize: '0.85rem',
+    },
+    button: {
+      textTransform: 'none',
     },
   },
 })

src/utils/desktop.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { getJson, postJson } from './net'
+import { getJson, postJson, sendRequest } from './net'
 
 interface DesktopStatus {
   status: 0 | 1 | 2
@@ -9,7 +9,7 @@ interface DesktopStatus {
 }
 
 export async function getDesktopStatus(): Promise<DesktopStatus> {
-  const response = await getJson(`http://${getDesktopHost()}/status`)
+  const response = await getJson(`${getDesktopHost()}/status`)
 
   return response as DesktopStatus
 }
@@ -33,21 +33,37 @@ export async function setJsonRpcInDesktop(value: string): Promise<void> {
 }
 
 async function updateDesktopConfiguration(values: Record<string, unknown>): Promise<void> {
-  await postJson(`http://${getDesktopHost()}/config`, values)
+  await postJson(`${getDesktopHost()}/config`, values)
 }
 
 export async function restartBeeNode(): Promise<void> {
-  await postJson(`http://${getDesktopHost()}/restart`)
+  await postJson(`${getDesktopHost()}/restart`)
 }
 
 export async function createGiftWallet(address: string): Promise<void> {
-  await postJson(`http://${getDesktopHost()}/gift-wallet/${address}`)
+  await postJson(`${getDesktopHost()}/gift-wallet/${address}`)
 }
 
 export async function performSwap(daiAmount: string): Promise<void> {
-  await postJson(`http://${getDesktopHost()}/swap`, { dai: daiAmount })
+  await postJson(`${getDesktopHost()}/swap`, { dai: daiAmount })
+}
+
+export async function getBeeDesktopLogs(): Promise<string> {
+  const response = await sendRequest(`${getDesktopHost()}/logs/bee-desktop`, 'GET')
+
+  return response as unknown as string
+}
+
+export async function getBeeLogs(): Promise<string> {
+  const response = await sendRequest(`${getDesktopHost()}/logs/bee`, 'GET')
+
+  return response as unknown as string
 }
 
 function getDesktopHost(): string {
-  return window.location.host
+  if (process.env.REACT_APP_BEE_DESKTOP_URL) {
+    return process.env.REACT_APP_BEE_DESKTOP_URL
+  }
+
+  return `http://${window.location.host}`
 }

src/utils/identity.ts

@@ -1,14 +1,10 @@
-import { Bee, Reference } from '@ethersphere/bee-js'
+import { BatchId, Bee, BeeDebug, Reference } from '@ethersphere/bee-js'
-import Wallet from 'ethereumjs-wallet'
+import { Wallet } from 'ethers'
-import { uuidV4 } from '.'
+import { uuidV4, waitUntilStampUsable } from '.'
 import { Identity, IdentityType } from '../providers/Feeds'
 
 export function generateWallet(): Wallet {
-  const buffer = new Uint8Array(32)
+  return Wallet.createRandom()
-  crypto.getRandomValues(buffer)
-  const wallet = new Wallet(Buffer.from(buffer))
-
-  return wallet
 }
 
 export function persistIdentity(identities: Identity[], identity: Identity): void {
@@ -35,14 +31,13 @@ export async function convertWalletToIdentity(
     throw Error('V3 passwords require password')
   }
 
-  const identityString =
+  const identityString = type === 'PRIVATE_KEY' ? identity.privateKey : await identity.encrypt(password as string)
-    type === 'PRIVATE_KEY' ? identity.getPrivateKeyString() : await identity.toV3String(password as string)
 
   return {
     uuid: uuidV4(),
     name,
     type: password ? 'V3' : 'PRIVATE_KEY',
-    address: identity.getAddressString(),
+    address: identity.address,
     identity: identityString,
   }
 }
@@ -56,14 +51,14 @@ export async function importIdentity(name: string, data: string): Promise<Identi
       name,
       type: 'PRIVATE_KEY',
       identity: data,
-      address: wallet.getAddressString(),
+      address: wallet.address,
     }
   }
 
   if (data.length === 66 && data.toLowerCase().startsWith('0x')) {
     const wallet = await getWallet('PRIVATE_KEY', data.slice(2))
 
-    return { uuid: uuidV4(), name, type: 'PRIVATE_KEY', identity: data, address: wallet.getAddressString() }
+    return { uuid: uuidV4(), name, type: 'PRIVATE_KEY', identity: data, address: wallet.address }
   }
   try {
     const { address } = JSON.parse(data)
@@ -79,15 +74,12 @@ function getWalletFromIdentity(identity: Identity, password?: string): Promise<W
 }
 
 async function getWallet(type: IdentityType, data: string, password?: string): Promise<Wallet> {
-  return type === 'PRIVATE_KEY' ? getWalletFromPrivateKeyString(data) : await Wallet.fromV3(data, password as string)
+  return type === 'PRIVATE_KEY' ? new Wallet(data) : await Wallet.fromEncryptedJson(data, password as string)
-}
-
-export function getWalletFromPrivateKeyString(privateKey: string): Wallet {
-  return Wallet.fromPrivateKey(Buffer.from(trimHexString(privateKey), 'hex'))
 }
 
 export async function updateFeed(
   beeApi: Bee,
+  beeDebugApi: BeeDebug | null,
   identity: Identity,
   hash: string,
   stamp: string,
@@ -96,17 +88,13 @@ export async function updateFeed(
   const wallet = await getWalletFromIdentity(identity, password)
 
   if (!identity.feedHash) {
-    identity.feedHash = await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.getAddressString())
+    identity.feedHash = await beeApi.createFeedManifest(stamp, 'sequence', '00'.repeat(32), wallet.address)
   }
 
-  const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.getPrivateKeyString())
+  const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.privateKey)
+
+  if (beeDebugApi) {
+    await waitUntilStampUsable(stamp as BatchId, beeDebugApi)
+  }
   await writer.upload(stamp, hash as Reference)
 }
-
-function trimHexString(string: string): string {
-  if (string.toLowerCase().startsWith('0x')) {
-    return string.slice(2)
-  }
-
-  return string
-}

src/utils/index.ts

@@ -24,7 +24,7 @@ export function isInteger(value: unknown): value is BigNumber | bigint {
  *
  * @returns BigNumber - but it may still be NaN or Infinite
  */
-export function makeBigNumber(value: BigNumber | BigInt | number | string): BigNumber | never {
+export function makeBigNumber(value: BigNumber | bigint | number | string): BigNumber | never {
   if (BigNumber.isBigNumber(value)) return value
 
   if (typeof value === 'string') return new BigNumber(value)

src/utils/net.ts

@@ -10,7 +10,7 @@ export function postJson(url: string, data?: Record<string, any>): Promise<Recor
   return sendRequest(url, 'POST', data)
 }
 
-async function sendRequest(
+export async function sendRequest(
   url: string,
   method: 'GET' | 'POST',
   data?: Record<string, unknown>,

src/utils/rpc.ts

@@ -1,45 +1,20 @@
 import { debounce } from '@material-ui/core'
-import axios from 'axios'
 import { Contract, providers, Wallet } from 'ethers'
 import { bzzContractInterface } from './bzz-contract-interface'
 
-export const JSON_RPC_PROVIDER = 'https://gno.getblock.io/mainnet/?api_key=d7b92d96-9784-49a8-a800-b3edd1647fc7'
+async function eth_getBalance(address: string, provider: providers.JsonRpcProvider): Promise<string> {
-
-async function eth_getBalance(address: string): Promise<string> {
   if (!address.startsWith('0x')) {
     address = `0x${address}`
   }
-  const response = await axios(JSON_RPC_PROVIDER, {
+  const balance = await provider.getBalance(address)
-    method: 'POST',
-    headers: {
-      'content-type': 'application/json',
-    },
-    data: {
-      jsonrpc: '2.0',
-      method: 'eth_getBalance',
-      params: [address, 'latest'],
-      id: 1,
-    },
-  })
 
-  return response.data.result
+  return balance.toString()
 }
 
-async function eth_getBlockByNumber(provider = JSON_RPC_PROVIDER): Promise<string> {
+async function eth_getBlockByNumber(provider: providers.JsonRpcProvider): Promise<string> {
-  const response = await axios(provider, {
+  const blockNumber = await provider.getBlockNumber()
-    method: 'POST',
-    headers: {
-      'content-type': 'application/json',
-    },
-    data: {
-      jsonrpc: '2.0',
-      method: 'eth_getBlockByNumber',
-      params: ['latest', false],
-      id: 1,
-    },
-  })
 
-  return response.data.result
+  return blockNumber.toString()
 }
 
 const partialERC20tokenABI = [
@@ -63,10 +38,9 @@ const partialERC20tokenABI = [
   },
 ]
 
-const provider = new providers.JsonRpcProvider(JSON_RPC_PROVIDER)
-
 async function eth_getBalanceERC20(
   address: string,
+  provider: providers.JsonRpcProvider,
   tokenAddress = '0xdbf3ea6f5bee45c02255b2c26a16f300502f68da',
 ): Promise<string> {
   if (!address.startsWith('0x')) {

src/utils/sentry.ts

@@ -0,0 +1,46 @@
+import { config } from '../config'
+import * as Sentry from '@sentry/react'
+import packageJson from '../../package.json'
+import { BrowserTracing } from '@sentry/tracing'
+import { getBeeDesktopLogs, getBeeLogs } from './desktop'
+
+export async function initSentry(): Promise<void> {
+  let tunnelAvailable
+
+  try {
+    const result = await fetch(`${config.BEE_DESKTOP_URL}/sentry`, { method: 'OPTIONS' })
+
+    if (result.status === 204) {
+      tunnelAvailable = true
+    }
+  } catch (e) {
+    // There was an error, so tunnel is not available
+    tunnelAvailable = false
+  }
+
+  Sentry.init({
+    dsn: config.SENTRY_KEY,
+    release: packageJson.version,
+    environment: config.SENTRY_ENVIRONMENT,
+    tunnel: tunnelAvailable ? `${config.BEE_DESKTOP_URL}/sentry` : undefined,
+    integrations: [new BrowserTracing({ tracingOrigins: ['localhost'] })],
+    tracesSampleRate: 0.3,
+    beforeSend: async (event, hint) => {
+      hint.attachments = []
+
+      try {
+        // This will fail if we are not running in Bee Desktop, but that is alright
+        hint.attachments.push({ filename: 'bee-desktop.log', data: await getBeeDesktopLogs() })
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+
+      try {
+        // This will fail if we are not running in Bee Desktop, but that is alright
+        hint.attachments.push({ filename: 'bee.log', data: await getBeeLogs() })
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+
+      return event
+    },
+  })
+}

src/utils/wallet.ts

@@ -1,23 +1,27 @@
-import Wallet from 'ethereumjs-wallet'
+import { providers, Wallet } from 'ethers'
 import { sleepMs } from '.'
 import { BzzToken } from '../models/BzzToken'
 import { DaiToken } from '../models/DaiToken'
-import { getWalletFromPrivateKeyString } from './identity'
 import { Rpc } from './rpc'
 
 export class WalletAddress {
-  private constructor(public address: string, public bzz: BzzToken, public dai: DaiToken) {}
+  private constructor(
+    public address: string,
+    public bzz: BzzToken,
+    public dai: DaiToken,
+    public provider: providers.JsonRpcProvider,
+  ) {}
 
-  static async make(address: string): Promise<WalletAddress> {
+  static async make(address: string, provider: providers.JsonRpcProvider): Promise<WalletAddress> {
-    const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address))
+    const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address, provider))
-    const dai = new DaiToken(await Rpc._eth_getBalance(address))
+    const dai = new DaiToken(await Rpc._eth_getBalance(address, provider))
 
-    return new WalletAddress(address, bzz, dai)
+    return new WalletAddress(address, bzz, dai, provider)
   }
 
   public async refresh(): Promise<WalletAddress> {
-    this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address))
+    this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address, this.provider))
-    this.dai = new DaiToken(await Rpc._eth_getBalance(this.address))
+    this.dai = new DaiToken(await Rpc._eth_getBalance(this.address, this.provider))
 
     return this
   }
@@ -27,32 +31,34 @@ export class ResolvedWallet {
   public address: string
   public privateKey: string
 
-  private constructor(public wallet: Wallet, public bzz: BzzToken, public dai: DaiToken) {
+  private constructor(
-    this.address = wallet.getAddressString()
+    public wallet: Wallet,
-    this.privateKey = wallet.getPrivateKeyString()
+    public bzz: BzzToken,
+    public dai: DaiToken,
+    public provider: providers.JsonRpcProvider,
+  ) {
+    this.address = wallet.address
+    this.privateKey = wallet.privateKey
   }
 
-  static async make(privateKeyOrWallet: string | Wallet): Promise<ResolvedWallet> {
+  static async make(privateKeyOrWallet: string | Wallet, provider: providers.JsonRpcProvider): Promise<ResolvedWallet> {
     const wallet =
-      typeof privateKeyOrWallet === 'string' ? getWalletFromPrivateKeyString(privateKeyOrWallet) : privateKeyOrWallet
+      typeof privateKeyOrWallet === 'string' ? new Wallet(privateKeyOrWallet, provider) : privateKeyOrWallet
-    const address = wallet.getAddressString()
+    const address = wallet.address
-    const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address))
+    const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(address, provider))
-    const dai = new DaiToken(await Rpc._eth_getBalance(address))
+    const dai = new DaiToken(await Rpc._eth_getBalance(address, provider))
 
-    return new ResolvedWallet(wallet, bzz, dai)
+    return new ResolvedWallet(wallet, bzz, dai, provider)
   }
 
   public async refresh(): Promise<ResolvedWallet> {
-    this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address))
+    this.bzz = new BzzToken(await Rpc._eth_getBalanceERC20(this.address, this.provider))
-    this.dai = new DaiToken(await Rpc._eth_getBalance(this.address))
+    this.dai = new DaiToken(await Rpc._eth_getBalance(this.address, this.provider))
 
     return this
   }
 
-  public async transfer(
+  public async transfer(destination: string, jsonRpcProvider: string): Promise<void> {
-    destination: string,
-    jsonRpcProvider = 'https://gno.getblock.io/mainnet/?api_key=d7b92d96-9784-49a8-a800-b3edd1647fc7',
-  ): Promise<void> {
     const DUMMY_GAS_PRICE = '300000000000000'
 
     if (this.bzz.toDecimal.gt(0.1)) {

utils/update-map-data.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+const axios = require('axios')
+const fs = require('fs')
+const getMapJSON = require('dotted-map').getMapJSON
+
+const DATA_SOURCE = 'https://swarmscan-api.resenje.org/v1/network/dump'
+const DATA_DESTINATION = './src/assets/data/nodes-db.json'
+const MAP_HEIGHT = 50
+const MAP_DESTINATION = './src/assets/data/map-data.json'
+
+async function getData(url) {
+  const res = await axios.get(url)
+
+  return res.data
+}
+
+function processData(data) {
+  const db = new Map()
+  data.nodes.forEach(node => {
+    db.set(node.overlay, { lat: node.location.latitude, lng: node.location.longitude })
+  })
+
+  return Object.fromEntries([...db.entries()].sort())
+}
+
+function saveFile(db, path) {
+  return fs.writeFileSync(path, JSON.stringify(db, null, 2))
+}
+
+function preComputeMap() {
+  return getMapJSON({ height: MAP_HEIGHT, grid: 'diagonal' })
+}
+
+async function main() {
+  console.log('Fetching DB data')
+  const dataDump = await getData(DATA_SOURCE)
+
+  console.log('Processing DB data')
+  const db = processData(dataDump)
+
+  console.log('Saving DB data')
+  saveFile(db, DATA_DESTINATION)
+
+  console.log('Pre-computing the word map')
+  const map = preComputeMap()
+
+  console.log('Saving map data')
+  saveFile(map, MAP_DESTINATION)
+
+  console.log('Done')
+}
+
+main()