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",
+    "@types/*",
     "@commitlint/config-conventional",
-    "@types/react-router",
+    "@babel/*",
-    "@babel/core",
+    "babel*",
-    "@babel/plugin-proposal-class-properties",
+    "eslint*",
-    "@babel/plugin-transform-runtime",
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript",
-    "babel-loader",
-    "babel-plugin-syntax-dynamic-import",
-    "babel-plugin-tsconfig-paths",
     "file-loader",
     "ts-node",
-    "webpack-cli"
+    "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,37 @@
 # 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)
+
+
+### Features
+
+* add light node upgrade top up methods ([#372](https://github.com/ethersphere/bee-dashboard/issues/372)) ([a768b4e](https://github.com/ethersphere/bee-dashboard/commit/a768b4ea0675596f6fe49771ef9d0755af00db56))
+* allow for the port to be configured ([#370](https://github.com/ethersphere/bee-dashboard/issues/370)) ([b6f138b](https://github.com/ethersphere/bee-dashboard/commit/b6f138b423cbe18b078fd38ea64b4c7a839d4e6e))
+* recognize ens domains ([#351](https://github.com/ethersphere/bee-dashboard/issues/351)) ([5917a13](https://github.com/ethersphere/bee-dashboard/commit/5917a133172c9e2fc0a81fb2fa19ea29ff976d03))
+
 ## [0.15.0](https://github.com/ethersphere/bee-dashboard/compare/v0.14.0...v0.15.0) (2022-05-16)
 
 

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.
@@ -13,7 +13,7 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.5.1-d0a77598<!-- SUPPORTED_BEE_END -->**.
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.6.0-6ceadd35<!-- SUPPORTED_BEE_END -->**.
 Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
 [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
@@ -60,6 +60,15 @@ bee-dashboard
 
 This should open the webpage on [`http://localhost:8080`](http://localhost:8080)
 
+You can also define your own port with the `PORT` environment variable. E.g.
+
+```sh
+export PORT=3005
+bee-dashboard
+```
+
+Will start the bee-dashboard on [`http://localhost:3005`](http://localhost:3005)
+
 ### Docker
 
 To build Docker image and run it, execute the following from inside project directory:
@@ -87,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:

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.15.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",
@@ -26,15 +26,21 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^3.3.4",
+    "@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"
   }
 }

serve.js

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

src/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'
@@ -11,8 +12,12 @@ import { Provider as FileProvider } from './providers/File'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
 import { Provider as StampsProvider } from './providers/Stamps'
+import { 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
@@ -20,33 +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}>
-                  <SnackbarProvider>
+        <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
-                    <Router>
+          <TopUpProvider>
-                      <>
+            <BeeProvider>
-                        <CssBaseline />
+              <StampsProvider>
-                        <Dashboard>
+                <FileProvider>
-                          <BaseRouter />
+                  <FeedsProvider>
-                        </Dashboard>
+                    <PlatformProvider>
-                      </>
+                      <SnackbarProvider>
-                    </Router>
+                        <Router>
-                  </SnackbarProvider>
+                          <>
-                </PlatformProvider>
+                            <CssBaseline />
-              </FeedsProvider>
+                            <Dashboard>
-            </FileProvider>
+                              <BaseRouter />
-          </StampsProvider>
+                            </Dashboard>
-        </BeeProvider>
+                          </>
-      </SettingsProvider>
+                        </Router>
-    </ThemeProvider>
+                      </SnackbarProvider>
-  </div>
+                    </PlatformProvider>
-)
+                  </FeedsProvider>
+                </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/AlertVersion.tsx

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

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

@@ -6,7 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState, useContext } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
@@ -61,7 +61,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   return (
     <div>
       <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cash out peer {peerId.substr(0, 8)}[…]
+        Cash out peer {peerId.slice(0, 8)}[…]
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>

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

@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface Props {
   label: string
   value: string
+  expanded?: boolean
 }
 
 const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
@@ -54,9 +55,9 @@ const split = (s: string): string[] => {
   return s.match(/(0x|.{1,8})/gi) || []
 }
 
-export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
   const classes = useStyles()
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(expanded || false)
   const [copied, setCopied] = useState(false)
   const toggleOpen = () => setOpen(!open)
 

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, DollarSign, FileText, 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,21 +25,19 @@ 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',
@@ -60,6 +63,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
       backgroundColor: '#212121',
+      zIndex: 988,
     },
     logo: {
       marginLeft: theme.spacing(8),
@@ -93,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>
@@ -127,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/SwarmDivider.tsx

@@ -0,0 +1,17 @@
+import { Box, Divider } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  my?: number
+  mt?: number
+  mb?: number
+  color?: string
+}
+
+export function SwarmDivider({ my, mt, mb, color = '#cbcbcb' }: Props): ReactElement {
+  return (
+    <Box my={my} mt={mt} mb={mb}>
+      <Divider style={{ borderColor: color }} />
+    </Box>
+  )
+}

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,13 +1,12 @@
-import { useContext, ReactElement } from 'react'
+import { CircularProgress, Container } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import React, { ReactElement, useContext } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
-import AlertVersion from '../components/AlertVersion'
-import { Container, CircularProgress } from '@material-ui/core'
-
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-
 import SideBar from '../components/SideBar'
-
 import { Context } from '../providers/Bee'
+import config from '../config'
+import * as Sentry from '@sentry/react'
+import ItsBroken from './ItsBroken'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -26,24 +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>
-          <>
-            <AlertVersion />
-            {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

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

src/models/DaiToken.ts

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

src/models/Token.ts

@@ -10,10 +10,12 @@ 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)) throw new TypeError('Not a valid token values')
+    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
+      throw new TypeError(`Not a valid token values: ${amount} ${decimals}`)
+    }
 
     this.amount = a
     this.decimals = decimals
@@ -29,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
@@ -38,7 +40,7 @@ export class Token {
     return new Token(t, decimals)
   }
 
-  get toBigInt(): BigInt {
+  get toBigInt(): bigint {
     return BigInt(this.amount.toFixed(0))
   }
 
@@ -59,7 +61,7 @@ export class Token {
   }
 
   toSignificantDigits(digits = 4): string {
-    const asString = this.toDecimal.toFixed(16)
+    const asString = this.toDecimal.toFixed(this.decimals)
 
     let indexOfSignificantDigit = -1
     let reachedDecimalPoint = false
@@ -78,4 +80,11 @@ export class Token {
 
     return asString.slice(0, indexOfSignificantDigit + digits)
   }
+
+  minusBaseUnits(amount: string): Token {
+    return new Token(
+      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+      this.decimals,
+    )
+  }
 }

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

@@ -1,11 +1,9 @@
 import type { ReactElement } from 'react'
-
+import CashoutModal from '../../components/CashoutModal'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
-
-import CashoutModal from '../../components/CashoutModal'
 import { Accounting } from '../../hooks/accounting'
 import type { Token } from '../../models/Token'
 
@@ -25,7 +23,7 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
       {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
         <ExpandableList
           key={peer}
-          label={`Peer ${peer.substr(0, 8)}[…]`}
+          label={`Peer ${peer.slice(0, 8)}[…]`}
           level={1}
           info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
         >

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

@@ -1,25 +1,32 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { Utils } from '@ethersphere/bee-js'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import ExpandableListItemLink from '../../components/ExpandableListItemLink'
 
 interface Props {
   isWebsite?: boolean
-  hash: string
+  reference: string
 }
 
-export function AssetSummary({ isWebsite, hash }: Props): ReactElement {
+export function AssetSummary({ isWebsite, reference }: Props): ReactElement {
+  const isHash = Utils.isHexString(reference) && reference.length === 64
+
   return (
     <>
       <Box mb={4}>
-        <ExpandableListItemKey label="Swarm hash" value={hash} />
+        {isHash && <ExpandableListItemKey label="Swarm hash" value={reference} />}
-        <ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
+        {!isHash && <ExpandableListItemLink label="ENS" value={reference} />}
-        {isWebsite && (
+        <ExpandableListItemLink
+          label="Share on Swarm Gateway"
+          value={`https://gateway.ethswarm.org/access/${reference}`}
+        />
+        {isWebsite && isHash && (
           <ExpandableListItemLink
             label="BZZ Link"
-            value={`https://${swarmCid.encodeManifestReference(hash).toString()}.bzz.link`}
+            value={`https://${swarmCid.encodeManifestReference(reference).toString()}.bzz.link`}
           />
         )}
       </Box>

src/pages/files/Download.tsx

@@ -8,7 +8,7 @@ import { History } from '../../components/History'
 import { Context, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
-import { recognizeSwarmHash } from '../../utils'
+import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FileNavigation } from './FileNavigation'
 
@@ -23,10 +23,17 @@ export function Download(): ReactElement {
   const navigate = useNavigate()
 
   const validateChange = (value: string) => {
-    if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
+    if (
+      Utils.isHexString(value, 64) ||
+      Utils.isHexString(value, 128) ||
+      !value.trim().length ||
+      regexpEns.test(value)
+    ) {
       setReferenceError(undefined)
     } else {
-      setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
+      setReferenceError(
+        'Incorrect format of swarm hash. Expected 64 or 128 hexstring characters, bzz.link url or ENS domain.',
+      )
     }
   }
 
@@ -83,7 +90,7 @@ export function Download(): ReactElement {
         confirmLabelDisabled={Boolean(referenceError) || loading}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
-        mapperFn={value => recognizeSwarmHash(value)}
+        mapperFn={value => recognizeEnsOrSwarmHash(value)}
         loading={loading}
       />
       <History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />

src/pages/files/SelectStamp.tsx

@@ -1,5 +1,5 @@
+import { Button, ListItemIcon, Menu, MenuItem, Typography } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { Button, ListItemIcon, Typography, Menu, MenuItem } from '@material-ui/core'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
@@ -35,7 +35,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
             selected={stamp.batchID === selectedStamp?.batchID}
           >
             <ListItemIcon>{stamp.usageText}</ListItemIcon>
-            <Typography variant="body2">{stamp.batchID.substr(0, 8)}[…]</Typography>
+            <Typography variant="body2">{stamp.batchID.slice(0, 8)}[…]</Typography>
           </MenuItem>
         ))}
       </Menu>

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(() => {
@@ -151,7 +151,7 @@ export function Share(): ReactElement {
         <AssetPreview metadata={metadata} previewUri={preview} />
       </Box>
       <Box mb={4}>
-        <AssetSummary isWebsite={metadata?.isWebsite} hash={reference} />
+        <AssetSummary isWebsite={metadata?.isWebsite} reference={reference} />
       </Box>
       <DownloadActionBar
         onOpen={onOpen}

src/pages/files/Upload.tsx

@@ -6,12 +6,14 @@ import { DocumentationText } from '../../components/DocumentationText'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as IdentityContext, Identity } from '../../providers/Feeds'
 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'
@@ -21,7 +23,6 @@ import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
-import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 
 export function Upload(): ReactElement {
   const [step, setStep] = useState(0)
@@ -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
     }
@@ -83,9 +86,9 @@ export function Upload(): ReactElement {
         // The website is in some directory, remove it
         if (idx.commonPrefix) {
           const substrStart = idx.commonPrefix.length
-          indexDocument = idx.indexPath.substr(substrStart)
+          indexDocument = idx.indexPath.slice(substrStart)
           fls = files.map(f => {
-            const path = (f.path as string).substr(substrStart)
+            const path = (f.path as string).slice(substrStart)
 
             return packageFile(f, path)
           })
@@ -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

@@ -0,0 +1,98 @@
+import { Box, Typography } from '@material-ui/core'
+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'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+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 { ResolvedWallet } from '../../utils/wallet'
+
+export default function Index(): ReactElement {
+  const { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
+  const { balance } = useContext(BeeContext)
+
+  const [loading, setLoading] = useState(false)
+  const [balances, setBalances] = useState<ResolvedWallet[]>([])
+
+  useEffect(() => {
+    async function mapGiftWallets() {
+      const results = []
+      for (const giftWallet of giftWallets) {
+        results.push(await ResolvedWallet.make(giftWallet, provider))
+      }
+      setBalances(results)
+    }
+
+    mapGiftWallets()
+  }, [giftWallets, provider])
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  async function onCreate() {
+    enqueueSnackbar('Sending funds to gift wallet...')
+    setLoading(true)
+    try {
+      const wallet = Wallet.createRandom()
+      addGiftWallet(wallet)
+      await createGiftWallet(wallet.address)
+      enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
+    } catch (error) {
+      enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function onCancel() {
+    navigate(-1)
+  }
+
+  if (!balance) {
+    return <Loading />
+  }
+
+  return (
+    <>
+      <HistoryHeader>Invite to Swarm...</HistoryHeader>
+      <Box mb={4}>
+        <Typography>
+          Generate and share a gift wallet that anyone can use to set-up their light node with Swarm Desktop. This will
+          use 1 XDAI and 5 BZZ from your node wallet.
+        </Typography>
+      </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>
+      <Box mb={4}>
+        {balances.map((x, i) => (
+          <Box mb={2} key={i}>
+            <ExpandableListItemKey label={`swarm${String(i).padStart(3, '0')}`} value={x.privateKey} />
+            <ExpandableListItemKey label="Address" value={x.address} />
+            <ExpandableListItem label="XDAI balance" value={`${x.dai.toSignificantDigits(4)} XDAI`} />
+            <ExpandableListItem label="BZZ balance" value={`${x.bzz.toSignificantDigits(4)} BZZ`} />
+          </Box>
+        ))}
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton onClick={onCreate} iconType={Check} loading={loading} disabled={loading}>
+          Generate gift wallet
+        </SwarmButton>
+        <SwarmButton onClick={onCancel} cancel iconType={X} disabled={loading}>
+          Cancel
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}

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/restart/LightModeRestart.tsx

@@ -0,0 +1,32 @@
+import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Loading } from '../../components/Loading'
+import { Context } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export default function Settings(): ReactElement {
+  const [startedAt] = useState(Date.now())
+  const { apiHealth, nodeInfo } = useContext(Context)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (Date.now() - startedAt < 45_000) {
+      return
+    }
+
+    if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      navigate(ROUTES.INFO)
+    }
+  }, [startedAt, navigate, nodeInfo, apiHealth])
+
+  return (
+    <>
+      <Box mb={4}>
+        <Loading />
+      </Box>
+      <Typography>Your node is being upgraded to light mode... postage syncing may take up to 10 minutes.</Typography>
+    </>
+  )
+}

src/pages/restart/Restart.tsx

@@ -0,0 +1,41 @@
+import { Box, Typography } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Loading } from '../../components/Loading'
+import { Context } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export default function Settings(): ReactElement {
+  const [waited, setWaited] = useState(false)
+  const { apiHealth } = useContext(Context)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (waited) {
+      return
+    }
+
+    const timeout = setTimeout(() => setWaited(true), 5_000)
+
+    return () => clearTimeout(timeout)
+  }, [waited])
+
+  useEffect(() => {
+    if (!waited) {
+      return
+    }
+
+    if (apiHealth) {
+      navigate(ROUTES.INFO)
+    }
+  }, [navigate, waited, apiHealth])
+
+  return (
+    <>
+      <Box mb={4}>
+        <Loading />
+      </Box>
+      <Typography>You will be redirected automatically once your node is up and running.</Typography>
+    </>
+  )
+}

src/pages/rpc/Confirmation.tsx

@@ -0,0 +1,61 @@
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { SwarmButton } from '../../components/SwarmButton'
+import { ROUTES } from '../../routes'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    checkWrapper: {
+      background: 'rgba(0, 230, 118, 0.25)',
+      borderRadius: 99999,
+      width: '180px',
+      height: '180px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  }),
+)
+
+export default function Confirmation(): ReactElement {
+  const navigate = useNavigate()
+
+  const styles = useStyles()
+
+  return (
+    <>
+      <HistoryHeader>Connect to the blockchain</HistoryHeader>
+      <Grid container direction="column" alignItems="center">
+        <Box mb={6}>
+          <div className={styles.checkWrapper}>
+            <Check size={100} color="#ededed" />
+          </div>
+        </Box>
+        <Box mb={1}>
+          <Typography style={{ fontWeight: 'bold' }}>Your node&apos;s RPC endpoint is set up correctly!</Typography>
+        </Box>
+        <Box mb={4}>
+          <Typography align="center">Lastly, you will need to top-up your node wallet.</Typography>
+          <Typography align="center">
+            If you&apos;re not familiar with cryptocurrencies, you can start with a bank card.
+          </Typography>
+        </Box>
+        <ExpandableListItemActions>
+          <SwarmButton iconType={Battery} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
+            Get started with bank card
+          </SwarmButton>
+          <SwarmButton iconType={BatteryCharging} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
+            Use DAI
+          </SwarmButton>
+          <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>
+            Use a gift code
+          </SwarmButton>
+        </ExpandableListItemActions>
+      </Grid>
+    </>
+  )
+}

src/pages/rpc/index.tsx

@@ -0,0 +1,61 @@
+import { Box, Typography } from '@material-ui/core'
+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'
+import { Context } from '../../providers/TopUp'
+import { ROUTES } from '../../routes'
+import { Rpc } from '../../utils/rpc'
+
+export default function Index(): ReactElement {
+  const { providerUrl, setProviderUrl } = useContext(Context)
+  const [localProviderUrl, setLocalProviderUrl] = useState(providerUrl)
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  async function onSubmit() {
+    try {
+      await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
+      enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
+      setProviderUrl(localProviderUrl)
+      navigate(ROUTES.CONFIRMATION)
+    } catch (error) {
+      enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>Connect to the blockchain</HistoryHeader>
+      <Box mb={1}>
+        <Typography style={{ fontWeight: 'bold' }}>Set up RPC endpoint</Typography>
+      </Box>
+      <Box mb={4}>
+        <Typography>
+          To connect to and retrieve data from the blockchain, you&apos;ll need to connect to a publicly-provided node
+          via the node&apos;s RPC endpoint. If you&apos;re not familiar with this, you may use{' '}
+          <a href="https://getblock.io/" target="_blank" rel="noreferrer">
+            https://getblock.io/
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput
+          name="rpc-endpoint"
+          label="RPC Endpoint"
+          onChange={event => setLocalProviderUrl(event.target.value)}
+          defaultValue={providerUrl}
+        />
+      </Box>
+      <SwarmButton iconType={Check} onClick={onSubmit}>
+        Connect
+      </SwarmButton>
+    </>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import Index from '.'
+import { ROUTES } from '../../routes'
+
+export function BankCardTopUpIndex(): ReactElement {
+  return (
+    <Index
+      header={'Top-up with bank card'}
+      title={'Use a bank card to buy xDAI to the funding wallet address below'}
+      p={
+        <Typography>
+          It&apos;s recommended to buy an amount equivalent to 5 to 10 EUR maximum. If you&apos;re not familiar with
+          cryptocurrencies, you may use{' '}
+          <a href="https://ramp.network/buy/" rel="noreferrer" target="_blank">
+            https://ramp.network/buy/
+          </a>
+          .
+        </Typography>
+      }
+      next={ROUTES.TOP_UP_BANK_CARD_SWAP}
+    />
+  )
+}

src/pages/top-up/CryptoTopUpIndex.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import Index from '.'
+import { ROUTES } from '../../routes'
+
+export function CryptoTopUpIndex(): ReactElement {
+  return (
+    <Index
+      header={'Top-up with cryptocurrencies'}
+      title={'Send xDAI to the funding wallet below'}
+      p={
+        <Typography>
+          For security reasons it is recommended to send maximum 5 to 10 xDAI. To get xDAI from DAI you may use{' '}
+          <a href="https://bridge.xdaichain.com/" rel="noreferrer" target="_blank">
+            https://bridge.xdaichain.com/
+          </a>
+          .
+        </Typography>
+      }
+      next={ROUTES.TOP_UP_CRYPTO_SWAP}
+    />
+  )
+}

src/pages/top-up/GiftCardFund.tsx

@@ -0,0 +1,107 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import { ArrowDown, Check } from 'react-feather'
+import { useNavigate, useParams } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { ROUTES } from '../../routes'
+import { sleepMs } from '../../utils'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { ResolvedWallet } from '../../utils/wallet'
+
+export function GiftCardFund(): ReactElement {
+  const { nodeAddresses, balance } = useContext(BeeContext)
+  const { provider, providerUrl } = useContext(TopUpContext)
+
+  const [loading, setLoading] = useState(false)
+  const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
+
+  const { privateKeyString } = useParams()
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!privateKeyString) {
+      return
+    }
+
+    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
+  }, [privateKeyString, provider])
+
+  if (!wallet || !balance) {
+    return <Loading />
+  }
+
+  async function onFund() {
+    if (!wallet || !nodeAddresses) {
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
+      enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
+      await sleepMs(5_000)
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to fund/restart node: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>Top-up with gift code</HistoryHeader>
+      <Box mb={4}>
+        <ProgressIndicator index={1} steps={['Paste gift code', 'Fund your node']} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>Send funds to your Bee node</Typography>
+      </Box>
+      <Box mb={4}>
+        <Typography>
+          Deposit all the funds from the gift wallet to your node wallet address. You can use the button below to
+          transfer all funds to your node.
+        </Typography>
+      </Box>
+      <SwarmDivider mb={4} />
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Gift wallet address" value={wallet.address || 'N/A'} />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${wallet.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItem label="BZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <Box mb={4}>
+        <ArrowDown size={24} color="#aaaaaa" />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses?.ethereum || 'N/A'} 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>
+      <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
+        Send all funds to your node
+      </SwarmButton>
+    </>
+  )
+}

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -0,0 +1,73 @@
+import { Box, Typography } from '@material-ui/core'
+import { Wallet } from 'ethers'
+import { useSnackbar } from 'notistack'
+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'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { BzzToken } from '../../models/BzzToken'
+import { DaiToken } from '../../models/DaiToken'
+import { ROUTES } from '../../routes'
+import { Rpc } from '../../utils/rpc'
+
+export function GiftCardTopUpIndex(): ReactElement {
+  const { provider } = useContext(TopUpContext)
+  const [loading, setLoading] = useState(false)
+  const [giftCode, setGiftCode] = useState('')
+
+  const { enqueueSnackbar } = useSnackbar()
+  const navigate = useNavigate()
+
+  async function onProceed() {
+    setLoading(true)
+    try {
+      const wallet = new Wallet(giftCode, provider)
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
+      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')
+      }
+      enqueueSnackbar('Successfully verified gift wallet', { variant: 'success' })
+      navigate(ROUTES.TOP_UP_GIFT_CODE_FUND.replace(':privateKeyString', giftCode))
+    } catch (error) {
+      enqueueSnackbar(`Gift wallet could not be verified: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>Top-up with gift code</HistoryHeader>
+      <Box mb={4}>
+        <ProgressIndicator index={0} steps={['Paste gift code', 'Fund your node']} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>Please paste your gift code below</Typography>
+      </Box>
+      <Box mb={4}>
+        A gift code is a unique key to a gift wallet that you can use to fund your node. Please don&apos;t share your
+        gift code as it can only be used once.
+      </Box>
+      <SwarmDivider mb={4} />
+      <Box mb={2}>
+        <SwarmTextInput
+          label="Gift code"
+          name="gift-code"
+          onChange={event => {
+            setGiftCode(event.target.value)
+          }}
+        />
+      </Box>
+      <SwarmButton iconType={ArrowRight} loading={loading} disabled={loading} onClick={onProceed}>
+        Proceed
+      </SwarmButton>
+    </>
+  )
+}

src/pages/top-up/Swap.tsx

@@ -0,0 +1,127 @@
+import { Box, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { ArrowDown, Check } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { BzzToken } from '../../models/BzzToken'
+import { DaiToken } from '../../models/DaiToken'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { ROUTES } from '../../routes'
+import { sleepMs } from '../../utils'
+import { performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+
+interface Props {
+  header: string
+}
+
+export function Swap({ header }: Props): ReactElement {
+  const [loading, setLoading] = useState(false)
+  const [hasSwapped, setSwapped] = useState(false)
+
+  const { providerUrl } = useContext(TopUpContext)
+  const { balance, nodeAddresses } = useContext(BeeContext)
+
+  const navigate = useNavigate()
+  const { enqueueSnackbar } = useSnackbar()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  const daiToSwap = balance.dai.minusBaseUnits('1')
+
+  const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
+  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200))
+
+  async function onSwap() {
+    if (hasSwapped) {
+      return
+    }
+    setLoading(true)
+    setSwapped(true)
+    try {
+      await performSwap(daiToSwap.toString)
+      enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
+      await sleepMs(5_000)
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      navigate(ROUTES.RESTART_LIGHT)
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+    } catch (error) {
+      enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <HistoryHeader>{header}</HistoryHeader>
+      <Box mb={4}>
+        <TopUpProgressIndicator index={1} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to BZZ</Typography>
+      </Box>
+      <Box mb={4}>
+        <Typography>
+          You need to swap xDAI to BZZ in order to use Swarm. Make sure to keep at least 1 xDAI in order to pay for
+          transaction costs on the network.
+        </Typography>
+      </Box>
+      <SwarmDivider mb={4} />
+      <Box mb={4}>
+        <Typography>
+          Your current balance is {balance.dai.toSignificantDigits(4)} xDAI and {balance.bzz.toSignificantDigits(4)}{' '}
+          BZZ.
+        </Typography>
+      </Box>
+      <Box mb={4}>
+        <SwarmTextInput
+          label="Amount to swap"
+          defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
+          name="x"
+          onChange={() => false}
+        />
+      </Box>
+      <Box mb={4}>
+        <ArrowDown size={24} color="#aaaaaa" />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem
+          label="Resulting XDAI balance after swap"
+          value={`${daiAfterSwap.toSignificantDigits(4)} XDAI`}
+        />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem
+          label="Resulting BZZ balance after swap"
+          value={`${bzzAfterSwap.toSignificantDigits(4)} BZZ`}
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton
+          iconType={Check}
+          onClick={onSwap}
+          disabled={hasSwapped || loading || balance.dai.toDecimal.lte(1)}
+          loading={loading}
+        >
+          Swap Now
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}

src/pages/top-up/TopUpProgressIndicator.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react'
+import { ProgressIndicator } from '../../components/ProgressIndicator'
+
+interface Props {
+  index: number
+}
+
+export function TopUpProgressIndicator({ index }: Props): ReactElement {
+  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap BZZ']} />
+}

src/pages/top-up/index.tsx

@@ -0,0 +1,56 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { Check } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { Context } from '../../providers/Bee'
+import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+
+interface Props {
+  header: string
+  title: string
+  p: ReactElement
+  next: string
+}
+
+export default function Index({ header, title, p, next }: Props): ReactElement {
+  const { nodeAddresses, balance } = useContext(Context)
+  const navigate = useNavigate()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  const disabled = balance.dai.toDecimal.lte(1)
+
+  return (
+    <>
+      <HistoryHeader>{header}</HistoryHeader>
+      <Box mb={4}>
+        <TopUpProgressIndicator index={0} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
+      </Box>
+      <Box mb={4}>{p}</Box>
+      <SwarmDivider mb={4} />
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
+      </Box>
+      <Grid container direction="row" justifyContent="space-between">
+        <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
+          Proceed
+        </SwarmButton>
+        {disabled ? <Typography>Please deposit xDAI to the address above in order to proceed.</Typography> : null}
+      </Grid>
+    </>
+  )
+}

src/providers/Bee.tsx

@@ -11,17 +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 { Rpc } from '../utils/rpc'
+import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
-
+import { Context as TopUpContext } from './TopUp'
-interface RpcBalance {
-  bzz: Token
-  xdai: Token
-}
 
 export enum CheckState {
   OK = 'OK',
@@ -46,7 +42,7 @@ interface Status {
 
 interface ContextInterface {
   status: Status
-  balance: RpcBalance
+  balance: WalletAddress | null
   latestPublishedVersion?: string
   latestUserVersion?: string
   latestUserVersionExact?: string
@@ -84,10 +80,7 @@ const initialValues: ContextInterface = {
     topology: { isEnabled: false, checkState: CheckState.ERROR },
     chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
-  balance: {
+  balance: null,
-    bzz: new Token('0', 16),
-    xdai: new Token('0', 18),
-  },
   latestPublishedVersion: undefined,
   latestUserVersion: undefined,
   latestUserVersionExact: undefined,
@@ -138,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
@@ -192,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)
@@ -204,8 +198,7 @@ export function Provider({ children }: Props): ReactElement {
   const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
   const [settlements, setSettlements] = useState<Settlements | null>(null)
   const [chainState, setChainState] = useState<ChainState | null>(null)
-  const [bzz, setBzz] = useState<Token>(initialValues.balance.bzz)
+  const [walletAddress, setWalletAddress] = useState<WalletAddress | null>(initialValues.balance)
-  const [xdai, setXdai] = useState<Token>(initialValues.balance.xdai)
 
   const { latestBeeRelease } = useLatestBeeRelease()
 
@@ -247,19 +240,15 @@ export function Provider({ children }: Props): ReactElement {
 
   useEffect(() => {
     if (nodeAddresses?.ethereum) {
-      // debounced calls
+      WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
-      const xdai = Rpc.eth_getBalance(nodeAddresses.ethereum)
-      const bzz = Rpc.eth_getBalanceERC20(nodeAddresses.ethereum)
-
-      if (xdai?.then) {
-        xdai.then(balance => setXdai(new Token(balance, 18)))
-      }
-
-      if (bzz?.then) {
-        bzz.then(balance => setBzz(new Token(balance, 16)))
-      }
     }
-  }, [nodeAddresses])
+  }, [nodeAddresses, provider])
+
+  useEffect(() => {
+    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
+
+    return () => clearInterval(interval)
+  }, [walletAddress])
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
@@ -417,10 +406,7 @@ export function Provider({ children }: Props): ReactElement {
           chequebookBalance,
           error,
         ),
-        balance: {
+        balance: walletAddress,
-          xdai,
-          bzz,
-        },
         latestUserVersion,
         latestUserVersionExact,
         latestPublishedVersion,

src/providers/Settings.tsx

@@ -55,8 +55,16 @@ export function Provider({
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
   const { config, isLoading, error } = useGetBeeConfig()
 
-  const url = config?.['api-addr'] || beeApiUrl || apiUrl
+  function makeHttpUrl(string: string): string {
-  const debugUrl = config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl
+    if (!string.startsWith('http')) {
+      return `http://${string}`
+    }
+
+    return string
+  }
+
+  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
+  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl)
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)

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

@@ -0,0 +1,75 @@
+import { providers, Wallet } from 'ethers'
+import { createContext, ReactElement, useEffect, useState } from 'react'
+import { setJsonRpcInDesktop } from '../utils/desktop'
+
+const LocalStorageKeys = {
+  providerUrl: 'json-rpc-provider',
+  depositWallet: 'deposit-wallet',
+  giftWallets: 'gift-wallets',
+  invitation: 'invitation',
+}
+
+interface ContextInterface {
+  providerUrl: string
+  provider: providers.JsonRpcProvider
+  giftWallets: Wallet[]
+  setProviderUrl: (providerUrl: string) => void
+  addGiftWallet: (wallet: Wallet) => void
+}
+
+const initialValues: ContextInterface = {
+  providerUrl: '',
+  provider: new providers.JsonRpcProvider(),
+  giftWallets: [],
+  setProviderUrl: () => {}, // eslint-disable-line
+  addGiftWallet: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactElement
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl)
+  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((privateKey: string) => new Wallet(privateKey, provider)))
+    }
+  }, [provider])
+
+  function setAndPersistJsonRpcProvider(providerUrl: string) {
+    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+    setProviderUrl(providerUrl)
+    setProvider(new providers.JsonRpcProvider(providerUrl))
+    // eslint-disable-next-line no-console
+    setJsonRpcInDesktop(providerUrl).catch(console.error)
+  }
+
+  function addGiftWallet(wallet: Wallet) {
+    const newArray = [...giftWallets, wallet]
+    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
+    setGiftWallets(newArray)
+  }
+
+  return (
+    <Context.Provider
+      value={{
+        providerUrl,
+        provider,
+        giftWallets,
+        setProviderUrl: setAndPersistJsonRpcProvider,
+        addGiftWallet,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}

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'
@@ -9,11 +11,20 @@ import { Download } from './pages/files/Download'
 import { Share } from './pages/files/Share'
 import { Upload } from './pages/files/Upload'
 import { UploadLander } from './pages/files/UploadLander'
+import GiftCards from './pages/gift-code'
 import Info from './pages/info'
+import LightModeRestart from './pages/restart/LightModeRestart'
+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'
+import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
+import { GiftCardFund } from './pages/top-up/GiftCardFund'
+import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
+import { Swap } from './pages/top-up/Swap'
 
 export enum ROUTES {
   INFO = '/',
@@ -22,33 +33,64 @@ 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',
+  WALLET = '/wallet',
-  FEEDS_NEW = '/feeds/new',
+  CONFIRMATION = '/wallet/confirmation',
-  FEEDS_UPDATE = '/feeds/update/:hash',
+  TOP_UP_CRYPTO = '/top-up/crypto',
-  FEEDS_PAGE = '/feeds/:uuid',
+  TOP_UP_CRYPTO_SWAP = '/top-up/crypto/swap',
+  TOP_UP_BANK_CARD = '/top-up/bank-card',
+  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',
+  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.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 />} />
+    <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
+    <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
+    <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',
     },
   },
 })