chore(master): release 0.18.0 (#408)

* fix: increase waitUntilStampUsable timeout

* fix: wait for stamp to exist after buying

.github/workflows/publish_npmjs.yaml

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

CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## [0.18.0](https://github.com/ethersphere/bee-dashboard/compare/v0.17.0...v0.18.0) (2022-07-04)
+
+
+### Features
+
+* add postage stamp guide ([#455](https://github.com/ethersphere/bee-dashboard/issues/455)) ([fb8775d](https://github.com/ethersphere/bee-dashboard/commit/fb8775d0a7a2bb3525467cec98584009c167700f))
+* add real price calculation to swap page ([#459](https://github.com/ethersphere/bee-dashboard/issues/459)) ([a9a5d76](https://github.com/ethersphere/bee-dashboard/commit/a9a5d76e45d3a31f05f814fe6cd2c823317f1e2d))
+* add updated sidebar icons ([#407](https://github.com/ethersphere/bee-dashboard/issues/407)) ([8b3ea52](https://github.com/ethersphere/bee-dashboard/commit/8b3ea5249ee48e7a2403e00339fd51977b93fb56))
+* add upgrade guide link from medium ([#434](https://github.com/ethersphere/bee-dashboard/issues/434)) ([cfcc859](https://github.com/ethersphere/bee-dashboard/commit/cfcc859303f4fb931e07f9037a7ba0972f8fb8ba))
+* reduce the minimal dai amount for the topup ([#444](https://github.com/ethersphere/bee-dashboard/issues/444)) ([2a5c598](https://github.com/ethersphere/bee-dashboard/commit/2a5c598ece3ba5f88c53c87db52b10422a37aae7))
+* refresh frequency changes if the bee is in error state ([#409](https://github.com/ethersphere/bee-dashboard/issues/409)) ([ce44ef7](https://github.com/ethersphere/bee-dashboard/commit/ce44ef78f4d322a458c1e8dd1f5a0b87d3a45b85))
+* set title to swarm ([#413](https://github.com/ethersphere/bee-dashboard/issues/413)) ([d664400](https://github.com/ethersphere/bee-dashboard/commit/d664400a7e3427fd30c47b59ef9c0dccda061720))
+* transfer everything out of the gift wallet ([#456](https://github.com/ethersphere/bee-dashboard/issues/456)) ([7225c5c](https://github.com/ethersphere/bee-dashboard/commit/7225c5ca11a62e40f06e7b08d558b390e326bcaf))
+* ultra-light mode block not supported features that are not available in this mode ([#438](https://github.com/ethersphere/bee-dashboard/issues/438)) ([83aab3b](https://github.com/ethersphere/bee-dashboard/commit/83aab3be62d73b5a539aab8f9c2bbfad56c86bbf))
+* version check and info ([#425](https://github.com/ethersphere/bee-dashboard/issues/425)) ([8f4a4eb](https://github.com/ethersphere/bee-dashboard/commit/8f4a4ebaa951fdbbe9f697e2cb4dc34838ed5df7))
+
+
+### Bug Fixes
+
+* add guide link to bank card top up ([#439](https://github.com/ethersphere/bee-dashboard/issues/439)) ([2221d0e](https://github.com/ethersphere/bee-dashboard/commit/2221d0e7c89a9631e3d95dd71cde3eacb964f3b5))
+* add troubleshooting checks ([#435](https://github.com/ethersphere/bee-dashboard/issues/435)) ([a756eed](https://github.com/ethersphere/bee-dashboard/commit/a756eedc4995cad6c5cafd302f7d7d7d44656f6d))
+* bee data auto-refresh ([#436](https://github.com/ethersphere/bee-dashboard/issues/436)) ([4cd580c](https://github.com/ethersphere/bee-dashboard/commit/4cd580ca7f497104eb97ae5676f3d5334384f4dc))
+* change topup button ordering ([#453](https://github.com/ethersphere/bee-dashboard/issues/453)) ([56f207d](https://github.com/ethersphere/bee-dashboard/commit/56f207d6a63ee0a486a4e00770fd8342fa92a7b5))
+* change wording from deposit to top up wallet ([#440](https://github.com/ethersphere/bee-dashboard/issues/440)) ([21df01c](https://github.com/ethersphere/bee-dashboard/commit/21df01c9241bcdfd072b0f080a46823beb1a751a))
+* check desktop version only once ([#441](https://github.com/ethersphere/bee-dashboard/issues/441)) ([3986320](https://github.com/ethersphere/bee-dashboard/commit/398632001a589a20cecb4416dfd261be21e18959))
+* disable bee update button in desktop mode ([#452](https://github.com/ethersphere/bee-dashboard/issues/452)) ([c54170b](https://github.com/ethersphere/bee-dashboard/commit/c54170b18538f7d15181a87a556f7fb2954ed49d))
+* display account wallet partially while loading ([#420](https://github.com/ethersphere/bee-dashboard/issues/420)) ([f43de77](https://github.com/ethersphere/bee-dashboard/commit/f43de77294e86df4bb023cd19afe6327ace5e83c))
+* don't display buy new stamp button when already in process of buying one ([#422](https://github.com/ethersphere/bee-dashboard/issues/422)) ([807af12](https://github.com/ethersphere/bee-dashboard/commit/807af122f7743fc9d13120eef81cd3f55b51eb5a))
+* generate gift wallet is disabled if there is not enough funds ([#451](https://github.com/ethersphere/bee-dashboard/issues/451)) ([f2824b7](https://github.com/ethersphere/bee-dashboard/commit/f2824b749b950e5b401af1de2973f13ad95d0a2f))
+* info page card and map error states ([#412](https://github.com/ethersphere/bee-dashboard/issues/412)) ([b969d8c](https://github.com/ethersphere/bee-dashboard/commit/b969d8caeef8d0e6f6eb664b380228bccb498795))
+* make deposit go to top up selector page ([#419](https://github.com/ethersphere/bee-dashboard/issues/419)) ([aa99e01](https://github.com/ethersphere/bee-dashboard/commit/aa99e0153e20524c5b047e90803543cbb13bb625))
+* provider is by default null and account page redirect to provider setup ([#437](https://github.com/ethersphere/bee-dashboard/issues/437)) ([2e0eeb7](https://github.com/ethersphere/bee-dashboard/commit/2e0eeb7a1b86be091fbd4bc266aa2fcbfc271ca3))
+* remove expired stamps ([#463](https://github.com/ethersphere/bee-dashboard/issues/463)) ([eb51dbb](https://github.com/ethersphere/bee-dashboard/commit/eb51dbb090a22d398c13e355de26c229c79d4a6f))
+* replace feather icons with remix icons on swarm button ([#414](https://github.com/ethersphere/bee-dashboard/issues/414)) ([f238c43](https://github.com/ethersphere/bee-dashboard/commit/f238c433078b09ac034c4bc66a434f8a91422827))
+* sensible deposit and swap ([#448](https://github.com/ethersphere/bee-dashboard/issues/448)) ([26ce0ef](https://github.com/ethersphere/bee-dashboard/commit/26ce0efc0b5e441863d8991af6121f105f8c7981))
+* sentry trace only Bee Desktop API ([#421](https://github.com/ethersphere/bee-dashboard/issues/421)) ([7c39e27](https://github.com/ethersphere/bee-dashboard/commit/7c39e2741c87b1ca75fcb1a72a5d7c12b826e950))
+* show update notifications only on non-auto-updating Swarm Desktops ([#460](https://github.com/ethersphere/bee-dashboard/issues/460)) ([d12f86b](https://github.com/ethersphere/bee-dashboard/commit/d12f86b9fac047f7c62edaca4fa818dbac27e894))
+* text in the info page cards ([#411](https://github.com/ethersphere/bee-dashboard/issues/411)) ([5e31c21](https://github.com/ethersphere/bee-dashboard/commit/5e31c21f49e6418b3cf36a75076eff2234ab2e8c))
+* the topup urls are now under `/account` which fixes highlighting ([#424](https://github.com/ethersphere/bee-dashboard/issues/424)) ([d345059](https://github.com/ethersphere/bee-dashboard/commit/d345059048efdf7226b7bc26e6514792a0a4cbff))
+* use xDAI and xBZZ on Gnosis chain ([#454](https://github.com/ethersphere/bee-dashboard/issues/454)) ([a3c02db](https://github.com/ethersphere/bee-dashboard/commit/a3c02dbf8a063fd69f4b4c1b4ff058a35710d0bc))
+* users can now upgrade to light node if they have enough funds ([#458](https://github.com/ethersphere/bee-dashboard/issues/458)) ([8c182ca](https://github.com/ethersphere/bee-dashboard/commit/8c182cafd537e508384efcf9c52febcd47f14a67))
+
 ## [0.17.0](https://github.com/ethersphere/bee-dashboard/compare/v0.16.0...v0.17.0) (2022-06-20)
 
 

desktop.mjs

@@ -6,7 +6,7 @@ import open  from 'open'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 
-const paths = envPaths('bee-desktop')
+const paths = envPaths('Swarm Desktop', { suffix: '' })
 const apiKey = await readFile(join(paths.data, 'api-key.txt'), {encoding: 'utf-8'})
 const url = `http://localhost:3001/?v=${apiKey}#/`
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ethersphere/bee-dashboard",
-      "version": "0.17.0",
+      "version": "0.18.0",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@ethersphere/bee-js": "^4.1.1",
@@ -36,11 +36,11 @@
         "react": ">= 17.0.2",
         "react-copy-to-clipboard": "5.0.4",
         "react-dom": ">= 17.0.2",
-        "react-feather": "2.0.9",
         "react-identicons": "1.2.5",
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
         "react-syntax-highlighter": "15.4.4",
+        "remixicon-react": "^1.0.0",
         "semver": "7.3.5",
         "serve-handler": "6.1.3",
         "stream": "npm:stream-browserify",
@@ -16814,17 +16814,6 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
-    "node_modules/react-feather": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.9.tgz",
-      "integrity": "sha512-yMfCGRkZdXwIs23Zw/zIWCJO3m3tlaUvtHiXlW+3FH7cIT6fiK1iJ7RJWugXq7Fso8ZaQyUm92/GOOHXvkiVUw==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "react": "^16.8.6 || ^17"
-      }
-    },
     "node_modules/react-identicons": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/react-identicons/-/react-identicons-1.2.5.tgz",
@@ -17254,6 +17243,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/remixicon-react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz",
+      "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==",
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -32617,14 +32614,6 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
-    "react-feather": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.9.tgz",
-      "integrity": "sha512-yMfCGRkZdXwIs23Zw/zIWCJO3m3tlaUvtHiXlW+3FH7cIT6fiK1iJ7RJWugXq7Fso8ZaQyUm92/GOOHXvkiVUw==",
-      "requires": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-identicons": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/react-identicons/-/react-identicons-1.2.5.tgz",
@@ -32959,6 +32948,12 @@
       "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
       "dev": true
     },
+    "remixicon-react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz",
+      "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==",
+      "requires": {}
+    },
     "renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -53,11 +53,11 @@
     "react": ">= 17.0.2",
     "react-copy-to-clipboard": "5.0.4",
     "react-dom": ">= 17.0.2",
-    "react-feather": "2.0.9",
     "react-identicons": "1.2.5",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
     "react-syntax-highlighter": "15.4.4",
+    "remixicon-react": "^1.0.0",
     "semver": "7.3.5",
     "serve-handler": "6.1.3",
     "stream": "npm:stream-browserify",
@@ -122,11 +122,11 @@
     "react-dom": ">= 17.0.2"
   },
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "npm run build && npm run build:component",
     "start": "react-scripts start",
     "desktop": "node ./desktop.mjs",
     "build": "react-scripts build",
-    "build:component": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --mode=production",
+    "build:component": "webpack --mode=production",
     "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
     "test": "react-scripts test",
     "serve": "node ./serve.js",

public/index.html

@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Bee Dashboard</title>
+    <title>Swarm</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.tsx

@@ -41,7 +41,7 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
                 <FileProvider>
                   <FeedsProvider>
                     <PlatformProvider>
-                      <SnackbarProvider>
+                      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
                         <Router>
                           <>
                             <CssBaseline />

src/components/Card.tsx

@@ -1,6 +1,7 @@
 import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { AlertCircle, Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 
 interface Props {
@@ -60,11 +61,7 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
       <div className={classes.wrapper}>
         <div className={classes.iconWrapper}>
           {icon}
-          {status === 'ok' ? (
+          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
-            <Check size="13" stroke="#09ca6c" />
-          ) : (
-            <AlertCircle size="13" fill="#f44336" stroke="white" />
-          )}
         </div>
         <Typography variant="h2" style={{ marginBottom: '8px' }}>
           {title}

src/components/CashoutModal.tsx

@@ -7,7 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Zap } from 'react-feather'
+import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 
@@ -79,7 +79,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
             )}
             {!loadingCashout && (
               <span>
-                Are you sure you want to cashout <strong>{uncashedAmount} BZZ</strong> from Peer{' '}
+                Are you sure you want to cashout <strong>{uncashedAmount} xBZZ</strong> from Peer{' '}
                 <strong>{peerId}</strong>?
               </span>
             )}

src/components/ClipboardCopy.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Clipboard } from 'react-feather'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { useSnackbar } from 'notistack'
 
 interface Props {

src/components/ExpandableListItem.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Info } from 'react-feather'
+import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'
 
 const useStyles = makeStyles((theme: Theme) =>

src/components/ExpandableListItemInput.tsx

@@ -2,10 +2,14 @@ import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Edit, Minus, Search, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Edit from 'remixicon-react/PencilLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -53,6 +57,7 @@ interface Props {
   expandedOnly?: boolean
   confirmLabel?: string
   confirmLabelDisabled?: boolean
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
   loading?: boolean
   onChange?: (value: string) => void
   onConfirm?: (value: string) => void
@@ -67,6 +72,7 @@ export default function ExpandableListItemKey({
   onChange,
   confirmLabel,
   confirmLabelDisabled,
+  confirmIcon,
   expandedOnly,
   helperText,
   placeholder,
@@ -137,7 +143,7 @@ export default function ExpandableListItemKey({
               (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
             }
             loading={loading}
-            iconType={Search}
+            iconType={confirmIcon ?? Check}
             onClick={() => {
               if (onConfirm) onConfirm(inputValue)
             }}

src/components/ExpandableListItemKey.tsx

@@ -3,7 +3,8 @@ import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Eye, Minus } from 'react-feather'
+import Eye from 'remixicon-react/EyeLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/Feedback.tsx

@@ -2,7 +2,7 @@ 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 MessageSquare from 'remixicon-react/Message2LineIcon'
 
 import config from '../config'
 import SideBarItem from './SideBarItem'

src/components/Map.tsx

@@ -7,6 +7,7 @@ import mapData from '../assets/data/map-data.json'
 
 interface Props {
   style?: CSSProperties
+  error?: boolean
 }
 
 interface MapRecord {
@@ -47,22 +48,27 @@ function addPins(map: DottedMap, pins: MapRecord[], color: string) {
 }
 
 const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
+const mapNoPins = 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 {
+export default function Card({ style, error }: Props): ReactElement {
   const { peers } = useContext(Context)
   const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
 
   useEffect(() => {
+    // Display error map
+    if (error) setMap(mapNoPins.getSVG({ ...mapSvgOptions, color: '#eaeaea' }))
+
+    // Display just the base map without any connections
     if (!peers) return
 
     const points = findIntersection(fullMapDb, peers)
     const mapNew = Object.create(mapPrecomputed)
     addPins(mapNew, points, '#09CA6C')
     setMap(mapNew.getSVG(mapSvgOptions))
-  }, [peers])
+  }, [peers, error])
 
   return (
     <div
@@ -74,6 +80,7 @@ export default function Card({ style }: Props): ReactElement {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        position: 'relative',
       })}
     >
       <img
@@ -81,6 +88,23 @@ export default function Card({ style }: Props): ReactElement {
         src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', flex: 1 }}
       />
+      {error && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="60"
+          height="60"
+          viewBox="0 0 24 24"
+          fill="#f44336"
+          strokeWidth="0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.25 }}
+        >
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="9" x2="12" y2="13"></line>
+          <line stroke="#f3f3f3" strokeWidth="2" x1="12" y1="17" x2="12.01" y2="17"></line>
+        </svg>
+      )}
     </div>
   )
 }

src/components/SideBar.tsx

@@ -1,50 +1,24 @@
-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 { ReactElement, useContext } from 'react'
-import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
+import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
+import DocsIcon from 'remixicon-react/BookOpenLineIcon'
+import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import HomeIcon from 'remixicon-react/Home3LineIcon'
+import SettingsIcon from 'remixicon-react/Settings2LineIcon'
+import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as TopUpContext } from '../providers/TopUp'
 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 Feedback from './Feedback'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-import Feedback from './Feedback'
+import { BeeModes } from '@ethersphere/bee-js'
-
-const navBarItems = [
-  {
-    label: 'Info',
-    path: ROUTES.INFO,
-    icon: Home,
-  },
-  {
-    label: 'Files',
-    path: ROUTES.UPLOAD,
-    icon: FileText,
-    pathMatcherSubstring: '/files/',
-  },
-  {
-    label: 'Account',
-    path: ROUTES.ACCOUNT_WALLET,
-    icon: Briefcase,
-    pathMatcherSubstring: '/account/',
-  },
-  {
-    label: 'Top Up',
-    path: ROUTES.WALLET,
-    icon: DollarSign,
-    requiresMode: BeeModes.ULTRA_LIGHT,
-  },
-  {
-    label: 'Settings',
-    path: ROUTES.SETTINGS,
-    icon: Settings,
-  },
-]
 
 const drawerWidth = 300
 
@@ -72,9 +46,6 @@ const useStyles = makeStyles((theme: Theme) =>
     icon: {
       height: theme.spacing(4),
     },
-    iconSmall: {
-      height: theme.spacing(2),
-    },
     divider: {
       backgroundColor: '#2c2c2c',
       marginLeft: theme.spacing(4),
@@ -97,8 +68,34 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
-  const { nodeInfo } = useContext(Context)
   const { isBeeDesktop } = useIsBeeDesktop()
+  const { providerUrl } = useContext(TopUpContext)
+  const { nodeInfo } = useContext(BeeContext)
+
+  const navBarItems = [
+    {
+      label: 'Info',
+      path: ROUTES.INFO,
+      icon: HomeIcon,
+    },
+    {
+      label: 'Files',
+      path: nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT ? ROUTES.DOWNLOAD : ROUTES.UPLOAD,
+      icon: FilesIcon,
+      pathMatcherSubstring: '/files/',
+    },
+    {
+      label: 'Account',
+      path: providerUrl === null ? ROUTES.WALLET : ROUTES.ACCOUNT_WALLET,
+      icon: AccountIcon,
+      pathMatcherSubstring: '/account/',
+    },
+    {
+      label: 'Settings',
+      path: ROUTES.SETTINGS,
+      icon: SettingsIcon,
+    },
+  ]
 
   return (
     <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
@@ -110,9 +107,7 @@ export default function SideBar(): ReactElement {
         </Grid>
         <Grid>
           <List>
-            {navBarItems
+            {navBarItems.map(p => (
-              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
-              .map(p => (
               <Link to={p.path} key={p.path} className={classes.link}>
                 <SideBarItem
                   key={p.path}
@@ -128,8 +123,8 @@ export default function SideBar(): ReactElement {
           <List>
             <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
               <SideBarItem
-                iconStart={<BookOpen className={classes.icon} />}
+                iconStart={<DocsIcon className={classes.icon} />}
-                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
                 label={<span>Docs</span>}
               />
             </MUILink>

src/components/SideBarStatus.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useContext } from 'react'
 import { useLocation, matchPath } from 'react-router-dom'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'

src/components/SwarmButton.tsx

@@ -1,9 +1,9 @@
 import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { IconProps } from 'react-feather'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 
 export interface SwarmButtonProps extends ButtonProps {
-  iconType: React.ComponentType<IconProps>
+  iconType: React.ComponentType<RemixiconReactIconProps>
   loading?: boolean
   cancel?: boolean
   variant?: 'text' | 'contained' | 'outlined'
@@ -18,7 +18,7 @@ const useStyles = makeStyles(() =>
       color: '#242424',
       '&:hover, &:focus': {
         '& svg': {
-          stroke: '#fff',
+          fill: '#fff',
           transition: '0.1s',
         },
       },

src/components/SwarmTextInput.tsx

@@ -10,6 +10,7 @@ interface Props {
   formik?: boolean
   optional?: boolean
   defaultValue?: string
+  placeholder?: string
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }
 
@@ -41,6 +42,7 @@ export function SwarmTextInput({
   formik,
   onChange,
   defaultValue,
+  placeholder,
 }: Props): ReactElement {
   const classes = useStyles()
 
@@ -57,6 +59,7 @@ export function SwarmTextInput({
         className={classes.field}
         defaultValue={defaultValue || ''}
         InputProps={{ disableUnderline: true }}
+        placeholder={placeholder}
       />
     )
   }
@@ -72,6 +75,7 @@ export function SwarmTextInput({
       defaultValue={defaultValue || ''}
       onChange={onChange}
       InputProps={{ disableUnderline: true }}
+      placeholder={placeholder}
     />
   )
 }

src/components/TroubleshootConnectionCard.tsx

@@ -1,7 +1,7 @@
 import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import { Activity } from 'react-feather'
+import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
 import { config } from '../config'
 import { ROUTES } from '../routes'

src/components/Waiting.tsx

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

src/components/WithdrawDepositModal.tsx

@@ -96,7 +96,7 @@ export default function WithdrawDepositModal({
           />
           {amountError && (
             <FormHelperText error>
-              Please provide valid BZZ amount (max 16 decimals). Error: {amountError.message}
+              Please provide valid xBZZ amount (max 16 decimals). Error: {amountError.message}
             </FormHelperText>
           )}
         </DialogContent>

src/containers/DepositModal.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -12,7 +12,7 @@ export default function DepositModal(): ReactElement {
     <WithdrawDepositModal
       successMessage="Successful deposit."
       errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
+      dialogMessage="Specify the amount of xBZZ you would like to deposit to your node."
       label="Deposit"
       icon={<Download size="1rem" />}
       min={new BigNumber(0)}

src/containers/WithdrawModal.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
-import { Upload } from 'react-feather'
+import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as SettingsContext } from '../providers/Settings'
 
@@ -11,7 +11,7 @@ export default function WithdrawModal(): ReactElement {
     <WithdrawDepositModal
       successMessage="Successful withdrawal."
       errorMessage="Error with withdrawing."
-      dialogMessage="Specify the amount of BZZ you would like to withdraw from your node."
+      dialogMessage="Specify the amount of xBZZ you would like to withdraw from your node."
       label="Withdraw"
       icon={<Upload size="1rem" />}
       min={new BigNumber(0)}

src/hooks/apiHooks.tsx

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { config } from '../config'
 import { getJson } from '../utils/net'
+import { getLatestBeeDesktopVersion } from '../utils/desktop'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -12,6 +13,12 @@ export interface LatestBeeReleaseHook {
 export interface IsBeeDesktopHook {
   isBeeDesktop: boolean
   isLoading: boolean
+  beeDesktopVersion: string
+  desktopAutoUpdateEnabled: boolean
+}
+
+export interface NewDesktopVersionHook {
+  newBeeDesktopVersion: string
 }
 
 interface Config {
@@ -25,14 +32,19 @@ interface Config {
  */
 export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
   const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+  const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
+  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
   const [isLoading, setLoading] = useState<boolean>(true)
 
   useEffect(() => {
     axios
       .get(`${conf.BEE_DESKTOP_URL}/info`)
       .then(res => {
-        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        if (res.data?.name === 'bee-desktop') {
-        else setIsBeeDesktop(false)
+          setIsBeeDesktop(true)
+          setBeeDesktopVersion(res.data?.version)
+          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+        } else setIsBeeDesktop(false)
       })
       .catch(() => {
         setIsBeeDesktop(false)
@@ -42,7 +54,37 @@ export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
       })
   }, [conf])
 
-  return { isBeeDesktop, isLoading }
+  return { isBeeDesktop, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+}
+
+async function checkNewVersion(conf: Config): Promise<string> {
+  const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json()
+  const currentVersion = resJson.version
+  const latestVersion = await getLatestBeeDesktopVersion()
+
+  if (currentVersion !== latestVersion) {
+    return latestVersion
+  }
+
+  return ''
+}
+
+export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook {
+  const [newBeeDesktopVersion, setNewNewBeeDesktopVersion] = useState<string>('')
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      return
+    }
+
+    checkNewVersion(conf).then(version => {
+      if (version !== '') {
+        setNewNewBeeDesktopVersion(version)
+      }
+    })
+  }, [isBeeDesktop, conf])
+
+  return { newBeeDesktopVersion }
 }
 
 export interface BeeConfig {

src/layout/Dashboard.tsx

@@ -1,12 +1,16 @@
-import { CircularProgress, Container } from '@material-ui/core'
+import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import React, { ReactElement, useContext } from 'react'
+import React, { ReactElement, useContext, useEffect } from 'react'
+import { useSnackbar } from 'notistack'
+import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
 import { Context } from '../providers/Bee'
 import config from '../config'
 import * as Sentry from '@sentry/react'
 import ItsBroken from './ItsBroken'
+import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -25,6 +29,40 @@ const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
   const { isLoading } = useContext(Context)
+  const { isBeeDesktop, desktopAutoUpdateEnabled } = useIsBeeDesktop()
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  useEffect(() => {
+    if (!desktopAutoUpdateEnabled && newBeeDesktopVersion !== '') {
+      enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
+        variant: 'warning',
+        preventDuplicate: true,
+        key: 'desktopNewVersion',
+        persist: true,
+        action: key => (
+          <React.Fragment>
+            <Button
+              onClick={() => {
+                window.open(BEE_DESKTOP_LATEST_RELEASE_PAGE)
+                closeSnackbar(key)
+              }}
+            >
+              Download release
+            </Button>
+            <IconButton
+              onClick={() => {
+                closeSnackbar(key)
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        ),
+      })
+    }
+  }, [enqueueSnackbar, closeSnackbar, newBeeDesktopVersion, desktopAutoUpdateEnabled])
+
   const content = (
     <>
       {isLoading ? (

src/pages/account/chequebook/AccountChequebook.tsx

@@ -22,30 +22,37 @@ export function AccountChequebook(): ReactElement {
 
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
+  const showChequebook = chequebookBalance?.totalBalance !== undefined
+
   return (
     <>
       <Header />
       <AccountNavigation active="CHEQUEBOOK" />
       <div>
+        {showChequebook && (
           <ExpandableList label="Chequebook" defaultOpen>
-          <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
+            <ExpandableListItem
+              label="Total Balance"
+              value={`${chequebookBalance?.totalBalance.toFixedDecimal()} xBZZ`}
+            />
             <ExpandableListItem
               label="Available Uncommitted Balance"
-            value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
+              value={`${chequebookBalance?.availableBalance.toFixedDecimal()} xBZZ`}
             />
             <ExpandableListItem
               label="Total Cheques Amount Sent"
-            value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
+              value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
             />
             <ExpandableListItem
               label="Total Cheques Amount Received"
-            value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
+              value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
             />
             <ExpandableListItemActions>
               <WithdrawModal />
               <DepositModal />
             </ExpandableListItemActions>
           </ExpandableList>
+        )}
         <ExpandableList label="Blockchain" defaultOpen>
           <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
           <ExpandableListItemKey

src/pages/account/feeds/AccountFeeds.tsx

@@ -1,6 +1,9 @@
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/Download2LineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
@@ -16,9 +19,12 @@ import { ExportFeedDialog } from '../../feeds/ExportFeedDialog'
 import { ImportFeedDialog } from '../../feeds/ImportFeedDialog'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 
 export function AccountFeeds(): ReactElement {
   const { identities, setIdentities } = useContext(IdentityContext)
+  const { status } = useContext(BeeContext)
 
   const navigate = useNavigate()
 
@@ -59,6 +65,8 @@ export function AccountFeeds(): ReactElement {
     setShowDelete(true)
   }
 
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
   return (
     <>
       <Header />

src/pages/account/stamps/AccountStamps.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'

src/pages/account/wallet/AccountWallet.tsx

@@ -1,7 +1,10 @@
+import { BeeModes } from '@ethersphere/bee-js'
 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 Download from 'remixicon-react/DownloadLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
@@ -13,14 +16,10 @@ import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
 export function AccountWallet(): ReactElement {
-  const { balance, nodeAddresses } = useContext(Context)
+  const { balance, nodeAddresses, nodeInfo } = useContext(Context)
 
   const navigate = useNavigate()
 
-  if (!balance || !nodeAddresses) {
-    return <Loading />
-  }
-
   function onCheckTransactions() {
     window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
   }
@@ -30,30 +29,38 @@ export function AccountWallet(): ReactElement {
   }
 
   function onDeposit() {
-    navigate(ROUTES.WALLET)
+    navigate(ROUTES.CONFIRMATION)
   }
 
   return (
     <>
       <Header />
-      <AccountNavigation active="WALLET" />
+      {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <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
+            Top up wallet
           </SwarmButton>
         </Grid>
       </Box>
+      {balance && nodeAddresses ? (
+        <>
           <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`} />
+            <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
           </Box>
           <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+            <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
           </Box>
+        </>
+      ) : (
+        <Box mb={8}>
+          <Loading />
+        </Box>
+      )}
       <ExpandableListItemActions>
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
           Check transactions on Blockscout

src/pages/accounting/PeerBalances.tsx

@@ -17,26 +17,26 @@ export default function PeerBalances({ accounting, isLoadingUncashed, totalUncas
   return (
     <ExpandableList
       label={`Peers (${accounting?.length || 0})`}
-      info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
+      info={`${totalUncashed.toFixedDecimal()} xBZZ (uncashed)`}
     >
-      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
+      <ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} xBZZ`} />
       {accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
         <ExpandableList
           key={peer}
           label={`Peer ${peer.slice(0, 8)}[…]`}
           level={1}
-          info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
+          info={`${uncashedAmount.toFixedDecimal()} xBZZ (uncashed)`}
         >
           <ExpandableListItemKey label="Peer ID" value={peer} />
-          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} xBZZ`} />
           <ExpandableListItem
             label="Settlements Sent / Received"
-            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} BZZ`}
+            value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} xBZZ`}
           />
-          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} BZZ`} />
+          <ExpandableListItem label="Total" value={`${total.toFixedDecimal()} xBZZ`} />
           <ExpandableListItem
             label="Uncashed Amount"
-            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} BZZ`}
+            value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} xBZZ`}
           />
           {uncashedAmount.toBigNumber.isGreaterThan('0') && (
             <ExpandableListItemActions>

src/pages/feeds/CreateNewFeed.tsx

@@ -2,7 +2,8 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/feeds/DeleteFeedDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Trash, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/ExportFeedDialog.tsx

@@ -2,7 +2,8 @@ import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import { useSnackbar } from 'notistack'
 import { ReactElement } from 'react'
-import { Clipboard, Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { Code } from '../../components/Code'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/feeds/FeedPasswordDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/FeedSubpage.tsx

@@ -1,7 +1,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 X from 'remixicon-react/CloseLineIcon'
 import { useNavigate, useParams } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/feeds/ImportFeedDialog.tsx

@@ -1,7 +1,8 @@
 import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useRef, useState } from 'react'
-import { Check, Upload } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/UpdateFeed.tsx

@@ -1,7 +1,8 @@
 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 X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'

src/pages/feeds/index.tsx

@@ -1,6 +1,9 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'

src/pages/files/AssetPreview.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { File, Folder } from 'react-feather'
+import File from 'remixicon-react/FileLineIcon'
+import Folder from 'remixicon-react/FolderLineIcon'
 import { FitImage } from '../../components/FitImage'
 import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'

src/pages/files/Download.tsx

@@ -1,12 +1,14 @@
-import { Utils } from '@ethersphere/bee-js'
+import { BeeModes, Utils } from '@ethersphere/bee-js'
 import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import Search from 'remixicon-react/SearchLineIcon'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
-import { Context, defaultUploadOrigin } from '../../providers/File'
+import { Context as FileContext, defaultUploadOrigin } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
 import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
@@ -16,8 +18,9 @@ export function Download(): ReactElement {
   const [loading, setLoading] = useState(false)
   const { beeApi } = useContext(SettingsContext)
   const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
+  const { nodeInfo } = useContext(BeeContext)
 
-  const { setUploadOrigin } = useContext(Context)
+  const { setUploadOrigin } = useContext(FileContext)
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
@@ -80,7 +83,7 @@ export function Download(): ReactElement {
 
   return (
     <>
-      <FileNavigation active="DOWNLOAD" />
+      {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <FileNavigation active="DOWNLOAD" />}
       <ExpandableListItemInput
         label="Swarm Hash"
         onConfirm={value => onSwarmIdentifier(value)}
@@ -88,6 +91,7 @@ export function Download(): ReactElement {
         helperText={referenceError}
         confirmLabel={'Find'}
         confirmLabelDisabled={Boolean(referenceError) || loading}
+        confirmIcon={Search}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
         mapperFn={value => recognizeEnsOrSwarmHash(value)}

src/pages/files/DownloadActionBar.tsx

@@ -1,6 +1,9 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Bookmark, Download, Link, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 

src/pages/files/UploadActionBar.tsx

@@ -1,6 +1,10 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
+import ArrowLeft from 'remixicon-react/ArrowLeftLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Layers from 'remixicon-react/StackLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -45,7 +49,17 @@ export function UploadActionBar({
             </SwarmButton>
           </ExpandableListItemActions>
         </Box>
-        <DocumentationText>You need a postage stamp to upload.</DocumentationText>
+        <DocumentationText>
+          You need a postage stamp to upload. Find out more in{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </DocumentationText>
       </>
     )
   }
@@ -63,6 +77,7 @@ export function UploadActionBar({
             Back To Preview
           </SwarmButton>
         </ExpandableListItemActions>
+        {hasAnyStamps && (
           <SwarmButton
             disabled={stampMode === 'BUY' && !hasAnyStamps}
             onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
@@ -70,6 +85,7 @@ export function UploadActionBar({
           >
             {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
           </SwarmButton>
+        )}
       </Grid>
     )
   }

src/pages/files/UploadArea.tsx

@@ -2,7 +2,9 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import PlusCircle from 'remixicon-react/AddCircleLineIcon'
+import FilePlus from 'remixicon-react/FileAddLineIcon'
+import FolderPlus from 'remixicon-react/FolderAddLineIcon'
 import { useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/files/UploadLander.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useContext } from 'react'
 import { History } from '../../components/History'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { defaultUploadOrigin } from '../../providers/File'
 import { HISTORY_KEYS } from '../../utils/local-storage'
 import { FileNavigation } from './FileNavigation'
@@ -10,7 +10,7 @@ import { UploadArea } from './UploadArea'
 export function UploadLander(): ReactElement {
   const { status } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   return (
     <>

src/pages/gift-code/index.tsx

@@ -1,7 +1,8 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Tooltip, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate } from 'react-router'
 import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'
@@ -14,6 +15,10 @@ import { Context as BeeContext } from '../../providers/Bee'
 import { Context as TopUpContext } from '../../providers/TopUp'
 import { createGiftWallet } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
+import { Token } from '../../models/Token'
+
+const GIFT_WALLET_FUND_DAI_AMOUNT = Token.fromDecimal('0.1', 18)
+const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16)
 
 export default function Index(): ReactElement {
   const { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
@@ -24,6 +29,7 @@ export default function Index(): ReactElement {
 
   useEffect(() => {
     async function mapGiftWallets() {
+      if (!provider) return
       const results = []
       for (const giftWallet of giftWallets) {
         results.push(await ResolvedWallet.make(giftWallet, provider))
@@ -60,35 +66,49 @@ export default function Index(): ReactElement {
     return <Loading />
   }
 
+  const notEnoughFundsCheck =
+    balance.dai.toBigNumber.isLessThanOrEqualTo(GIFT_WALLET_FUND_DAI_AMOUNT.toBigNumber) ||
+    balance.bzz.toBigNumber.isLessThan(GIFT_WALLET_FUND_BZZ_AMOUNT.toBigNumber)
+
   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.
+          use {GIFT_WALLET_FUND_DAI_AMOUNT.toSignificantDigits(2)} xDAI and{' '}
+          {GIFT_WALLET_FUND_BZZ_AMOUNT.toSignificantDigits(2)} xBZZ from your node wallet.
         </Typography>
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
       </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="xDAI balance" value={`${x.dai.toSignificantDigits(4)} xDAI`} />
-            <ExpandableListItem label="BZZ balance" value={`${x.bzz.toSignificantDigits(4)} BZZ`} />
+            <ExpandableListItem label="xBZZ balance" value={`${x.bzz.toSignificantDigits(4)} xBZZ`} />
           </Box>
         ))}
       </Box>
       <ExpandableListItemActions>
-        <SwarmButton onClick={onCreate} iconType={Check} loading={loading} disabled={loading}>
+        <Tooltip title={'Not enough funds'} placement="top" open={notEnoughFundsCheck} arrow>
+          <div>
+            <SwarmButton
+              onClick={onCreate}
+              iconType={Check}
+              loading={loading}
+              disabled={loading || notEnoughFundsCheck}
+            >
               Generate gift wallet
             </SwarmButton>
+          </div>
+        </Tooltip>
         <SwarmButton onClick={onCancel} cancel iconType={X} disabled={loading}>
           Cancel
         </SwarmButton>

src/pages/info/NodeInfoCard.tsx

@@ -0,0 +1,48 @@
+import { ReactElement, useContext } from 'react'
+import Search from 'remixicon-react/SearchLineIcon'
+import Globe from 'remixicon-react/GlobalLineIcon'
+import Settings from 'remixicon-react/Settings2LineIcon'
+
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import Card from '../../components/Card'
+import { useNavigate } from 'react-router'
+import { ROUTES } from '../../routes'
+
+export default function NodeInfoCard(): ReactElement {
+  const { status } = useContext(BeeContext)
+  const navigate = useNavigate()
+
+  if (status.all === CheckState.ERROR) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Your node is not connected…"
+        subtitle="You are not connected to Swarm."
+        status="error"
+      />
+    )
+  }
+
+  if (status.all === CheckState.WARNING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Your node is running…"
+        subtitle="Connection to Swarm might not be optimal."
+        status="error"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
+      icon={<Globe />}
+      title="Your node is connected."
+      subtitle="You are connected to Swarm."
+      status="ok"
+    />
+  )
+}

src/pages/info/index.tsx

@@ -1,6 +1,8 @@
 import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
-import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
+import Wallet from 'remixicon-react/Wallet3LineIcon'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 
 import { Context as BeeContext } from '../../providers/Bee'
 import Card from '../../components/Card'
@@ -8,6 +10,9 @@ import Map from '../../components/Map'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import { useNavigate } from 'react-router'
 import { ROUTES } from '../../routes'
+import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop'
+import NodeInfoCard from './NodeInfoCard'
 
 export default function Status(): ReactElement {
   const {
@@ -20,37 +25,23 @@ export default function Status(): ReactElement {
     balance,
     chequebookBalance,
   } = useContext(BeeContext)
+  const { isBeeDesktop, beeDesktopVersion } = useIsBeeDesktop()
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
   const navigate = useNavigate()
 
   return (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
-        {status.all ? (
+        <NodeInfoCard />
-          <Card
-            buttonProps={{ iconType: Search, children: 'Access Content', onClick: () => navigate(ROUTES.DOWNLOAD) }}
-            icon={<Globe />}
-            title="Your node is connected."
-            subtitle="You can now access content hosted on Swarm."
-            status="ok"
-          />
-        ) : (
-          <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,
+              iconType: Wallet,
               children: 'Manage your wallet',
               onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
             }}
-            icon={<Briefcase />}
+            icon={<Wallet />}
             title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
             subtitle="Current wallet balance."
             status="ok"
@@ -58,11 +49,11 @@ export default function Status(): ReactElement {
         ) : (
           <Card
             buttonProps={{
-              iconType: Settings,
+              iconType: Wallet,
               children: 'Setup wallet',
               onClick: () => navigate(ROUTES.WALLET),
             }}
-            icon={<ArrowUp />}
+            icon={<Upload />}
             title="Your wallet is not setup."
             subtitle="To share content on Swarm, please setup your wallet."
             status="error"
@@ -75,29 +66,29 @@ export default function Status(): ReactElement {
             chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
               <Card
                 buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                   children: 'View chequebook',
                   onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                 }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                 title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-                subtitle="Your chequebook is setup and has balance"
+                subtitle="Current chequebook balance."
                 status="ok"
               />
             ) : (
               <Card
                 buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                   children: 'View chequebook',
                   onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                 }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                 title={
                   chequebookBalance?.availableBalance
                     ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
-                    : 'No available balance'
+                    : 'No available balance.'
                 }
-                subtitle="Your chequebook is not setup or has no balance."
+                subtitle="Chequebook not setup."
                 status="error"
               />
             )}
@@ -105,11 +96,30 @@ export default function Status(): ReactElement {
         )}
       </div>
       <div style={{ height: '16px' }} />
-      <Map />
+      <Map error={status.topology.checkState !== 'OK'} />
       <div style={{ height: '2px' }} />
       <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
       <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
       <div style={{ height: '16px' }} />
+      {isBeeDesktop && (
+        <ExpandableListItem
+          label="Desktop version"
+          value={
+            <div>
+              {`${beeDesktopVersion} `}
+              <Button
+                size="small"
+                variant="outlined"
+                href={BEE_DESKTOP_LATEST_RELEASE_PAGE}
+                target="_blank"
+                style={{ height: '26px' }}
+              >
+                {newBeeDesktopVersion === '' ? 'latest' : 'update'}
+              </Button>
+            </div>
+          }
+        />
+      )}
       <ExpandableListItem
         label="Bee version"
         value={
@@ -118,7 +128,7 @@ export default function Status(): ReactElement {
               Bee
             </a>
             {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && (
+            {latestUserVersion && !isBeeDesktop && (
               <Button
                 size="small"
                 variant="outlined"

src/pages/restart/LightModeRestart.tsx

@@ -1,32 +1,46 @@
 import { BeeModes } from '@ethersphere/bee-js'
-import { Box, Typography } from '@material-ui/core'
+import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Loading } from '../../components/Loading'
+import { Waiting } from '../../components/Waiting'
 import { Context } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
-export default function Settings(): ReactElement {
+const STARTED_UPGRADE_AT = 'started-upgrade-at'
-  const [startedAt] = useState(Date.now())
+
+export default function LightModeRestart(): ReactElement {
+  const [startedAt] = useState(Number.parseInt(localStorage.getItem(STARTED_UPGRADE_AT) ?? Date.now().toFixed()))
   const { apiHealth, nodeInfo } = useContext(Context)
   const navigate = useNavigate()
 
+  useEffect(() => {
+    localStorage.setItem(STARTED_UPGRADE_AT, startedAt.toFixed())
+  }, [startedAt])
+
   useEffect(() => {
     if (Date.now() - startedAt < 45_000) {
       return
     }
 
     if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      localStorage.removeItem(STARTED_UPGRADE_AT)
       navigate(ROUTES.INFO)
     }
   }, [startedAt, navigate, nodeInfo, apiHealth])
 
   return (
-    <>
+    <Grid container direction="column" justifyContent="center" alignItems="center">
-      <Box mb={4}>
+      <Box mb={9}>
-        <Loading />
+        <Waiting />
       </Box>
-      <Typography>Your node is being upgraded to light mode... postage syncing may take up to 10 minutes.</Typography>
+      <Box mb={1}>
-    </>
+        <Typography>
+          <strong>Upgrading Bee</strong>
+        </Typography>
+      </Box>
+      <Typography>
+        You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
+      </Typography>
+    </Grid>
   )
 }

src/pages/restart/Restart.tsx

@@ -1,41 +0,0 @@
-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

@@ -1,11 +1,21 @@
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ReactElement } from 'react'
+import { ReactElement, useContext, useState } from 'react'
-import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { ROUTES } from '../../routes'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as TopUpContext } from '../../providers/TopUp'
+import { useIsBeeDesktop } from '../../hooks/apiHooks'
+import { BeeModes } from '@ethersphere/bee-js'
+import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import { Loading } from '../../components/Loading'
+import { useSnackbar } from 'notistack'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -21,10 +31,43 @@ const useStyles = makeStyles(() =>
   }),
 )
 
+const MINIMUM_XDAI = '0.05'
+const MINIMUM_XBZZ = '0.1'
+
 export default function Confirmation(): ReactElement {
   const navigate = useNavigate()
-
   const styles = useStyles()
+  const { isBeeDesktop } = useIsBeeDesktop()
+  const { balance, nodeInfo } = useContext(BeeContext)
+  const { providerUrl } = useContext(TopUpContext)
+  const [loading, setLoading] = useState(false)
+  const { enqueueSnackbar } = useSnackbar()
+
+  const canUpgradeToLightNode =
+    isBeeDesktop &&
+    nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
+    balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
+    balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
+
+  async function restart() {
+    if (!providerUrl) {
+      return
+    }
+    setLoading(true)
+    try {
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+    setLoading(false)
+  }
+
+  if (!balance) {
+    return <Loading />
+  }
 
   return (
     <>
@@ -45,16 +88,32 @@ export default function Confirmation(): ReactElement {
           </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>
+          <SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
+            Use DAI
+          </SwarmButton>
+          <SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
+            Get started with bank card
+          </SwarmButton>
         </ExpandableListItemActions>
+        {canUpgradeToLightNode && (
+          <>
+            <Box mt={8} mb={2}>
+              <Typography align="center">
+                It seems that you have enough balance to upgrade your bee node to light node. By upgrading you will gain
+                access to file upload and faster downloads.
+              </Typography>
+            </Box>
+            <ExpandableListItemActions>
+              <SwarmButton iconType={Check} onClick={restart} disabled={loading} loading={loading}>
+                Upgrade now
+              </SwarmButton>
+              <div />
+            </ExpandableListItemActions>
+          </>
+        )}
       </Grid>
     </>
   )

src/pages/rpc/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { useNavigate } from 'react-router'
 import { providers } from 'ethers'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -19,6 +19,8 @@ export default function Index(): ReactElement {
   const navigate = useNavigate()
 
   async function onSubmit() {
+    if (!localProviderUrl) return
+
     try {
       await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
       enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
@@ -38,9 +40,13 @@ export default function Index(): ReactElement {
       <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{' '}
+          via the node&apos;s RPC endpoint. If you&apos;re not familiar with this, please read{' '}
-          <a href="https://getblock.io/" target="_blank" rel="noreferrer">
+          <a
-            https://getblock.io/
+            href="https://medium.com/ethereum-swarm/upgrading-swarm-deskotp-app-beta-from-an-ultra-light-to-a-light-node-65d52cab7f2c"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
           </a>
           .
         </Typography>
@@ -50,7 +56,7 @@ export default function Index(): ReactElement {
           name="rpc-endpoint"
           label="RPC Endpoint"
           onChange={event => setLocalProviderUrl(event.target.value)}
-          defaultValue={providerUrl}
+          defaultValue={providerUrl || ''}
         />
       </Box>
       <SwarmButton iconType={Check} onClick={onSubmit}>

src/pages/stamps/PostageStampCreation.tsx

@@ -3,13 +3,19 @@ import BigNumber from 'bignumber.js'
 import { Form, Formik, FormikHelpers } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { SwarmButton } from '../../components/SwarmButton'
 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 { calculateStampPrice, convertAmountToSeconds, convertDepthToBytes, secondsToTimeString } from '../../utils'
+import {
+  calculateStampPrice,
+  convertAmountToSeconds,
+  convertDepthToBytes,
+  secondsToTimeString,
+  waitUntilStampExists,
+} from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 
 interface FormValues {
@@ -66,10 +72,25 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
 
     const price = calculateStampPrice(depth, amount)
 
-    return `${price.toSignificantDigits()} BZZ`
+    return `${price.toSignificantDigits()} xBZZ`
   }
 
   return (
+    <>
+      <Box mb={4}>
+        <Typography>
+          To upload data to Swarm network, you will need to purchase a postage stamp. If you&apos;re not familiar with
+          this, please read{' '}
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
       <Formik
         initialValues={initialFormValues}
         onSubmit={async (values: FormValues, actions: FormikHelpers<FormValues>) => {
@@ -82,7 +103,8 @@ 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
-          await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+            const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+            await waitUntilStampExists(batchId, beeDebugApi)
             actions.resetForm()
             await refresh()
             onFinished()
@@ -123,7 +145,9 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
               <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
                 <Grid container justifyContent="space-between">
                   <Typography>Corresponding file size</Typography>
-                <Typography>{!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}</Typography>
+                  <Typography>
+                    {!errors.depth && values.depth ? getFileSize(parseInt(values.depth, 10)) : '-'}
+                  </Typography>
                 </Grid>
               </Box>
             </Box>
@@ -162,5 +186,6 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
           </Form>
         )}
       </Formik>
+    </>
   )
 }

src/pages/stamps/index.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -24,23 +24,23 @@ const ChequebookDeployFund = (): ReactElement | null => {
       text = (
         <>
           Your chequebook is not funded. Please deposit some xBZZ to your chequebook address. You may need to aquire BZZ
-          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the xDai network through the{' '}
+          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network through the{' '}
-          <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
+          <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
-          xDAI token. You can purchase DAI on the network and bridge it to xDai network through the{' '}
+          xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain network through
-          <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
-          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          <a href="https://www.gnosischain.com">official Gnosis Chain website</a> for more information.
         </>
       )
       break
     default:
       text = (
         <>
-          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the xDai
+          Your chequebook is either not deployed nor funded. To run the node you will need xDAI and xBZZ on the Gnosis
-          network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to
+          chain network. You may need to aquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge
-          the xDai network through the <a href="https://omni.xdaichain.com/bridge">omni bridge</a>. To pay the
+          it to the Gnosis Chain network through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To
-          transaction fees, you will also need xDAI token. You can purchase DAI on the network and bridge it to xDai
+          pay the transaction fees, you will also need xDAI token. You can purchase DAI on the Ethereum mainnet network
-          network through the <a href="https://bridge.xdaichain.com/">xDai Bridge</a>. See the{' '}
+          and bridge it to Gnosis Chain network through the <a href="https://bridge.gnosischain.com">xDai Bridge</a>.
-          <a href="https://www.xdaichain.com/#xdai-stable-chain">official xDai website</a> for more information.
+          See the <a href="https://www.gnosischain.com">official Gnosis Chain website</a> for more information.
         </>
       )
   }

src/pages/top-up/BankCardTopUpIndex.tsx

@@ -10,10 +10,14 @@ export function BankCardTopUpIndex(): ReactElement {
       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
+          It is recommended to buy an amount equivalent 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">
+          <a
-            https://ramp.network/buy/
+            href="https://medium.com/ethereum-swarm/upgrading-swarm-deskotp-app-beta-from-an-ultra-light-to-a-light-node-65d52cab7f2c"
+            rel="noreferrer"
+            target="_blank"
+          >
+            this guide
           </a>
           .
         </Typography>

src/pages/top-up/CryptoTopUpIndex.tsx

@@ -11,8 +11,8 @@ export function CryptoTopUpIndex(): ReactElement {
       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">
+          <a href="https://bridge.gnosischain.com" rel="noreferrer" target="_blank">
-            https://bridge.xdaichain.com/
+            https://bridge.gnosischain.com
           </a>
           .
         </Typography>

src/pages/top-up/GiftCardFund.tsx

@@ -1,7 +1,8 @@
 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 Check from 'remixicon-react/CheckLineIcon'
+import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -16,9 +17,12 @@ import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
+import { useIsBeeDesktop } from '../../hooks/apiHooks'
+import { BeeModes } from '@ethersphere/bee-js'
 
 export function GiftCardFund(): ReactElement {
-  const { nodeAddresses, balance } = useContext(BeeContext)
+  const { isBeeDesktop } = useIsBeeDesktop()
+  const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext)
   const { provider, providerUrl } = useContext(TopUpContext)
 
   const [loading, setLoading] = useState(false)
@@ -30,7 +34,7 @@ export function GiftCardFund(): ReactElement {
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (!privateKeyString) {
+    if (!privateKeyString || !provider) {
       return
     }
 
@@ -41,8 +45,26 @@ export function GiftCardFund(): ReactElement {
     return <Loading />
   }
 
+  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
+    if (!providerUrl) {
+      return
+    }
+
+    try {
+      await sleepMs(5_000)
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+  }
+
   async function onFund() {
-    if (!wallet || !nodeAddresses) {
+    if (!wallet || !nodeAddresses || !providerUrl) {
       return
     }
 
@@ -50,13 +72,11 @@ export function GiftCardFund(): ReactElement {
 
     try {
       await wallet.transfer(nodeAddresses.ethereum, providerUrl)
-      enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
+      enqueueSnackbar('Successfully funded node', { variant: 'success' })
-      await sleepMs(5_000)
+
-      await upgradeToLightNode(providerUrl)
+      if (canUpgradeToLightNode) await restart()
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
-      enqueueSnackbar(`Failed to fund/restart node: ${error}`, { variant: 'error' })
+      enqueueSnackbar(`Failed to fund: ${error}`, { variant: 'error' })
     } finally {
       setLoading(false)
     }
@@ -82,10 +102,10 @@ export function GiftCardFund(): ReactElement {
         <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`} />
+        <ExpandableListItem label="xDAI balance" value={`${wallet.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={4}>
-        <ExpandableListItem label="BZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <Box mb={4}>
         <ArrowDown size={24} color="#aaaaaa" />
@@ -94,13 +114,13 @@ export function GiftCardFund(): ReactElement {
         <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`} />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
-        Send all funds to your node
+        {canUpgradeToLightNode ? 'Send all funds to your node and Upgrade' : 'Send all funds to your node'}
       </SwarmButton>
     </>
   )

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -2,7 +2,7 @@ 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 ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 import { useNavigate } from 'react-router'
 import { Context as TopUpContext } from '../../providers/TopUp'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -24,6 +24,8 @@ export function GiftCardTopUpIndex(): ReactElement {
   const navigate = useNavigate()
 
   async function onProceed() {
+    if (!provider) return
+
     setLoading(true)
     try {
       const wallet = new Wallet(giftCode, provider)

src/pages/top-up/Swap.tsx

@@ -1,8 +1,11 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Typography } from '@material-ui/core'
+import BigNumber from 'bignumber.js'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useContext, useState } from 'react'
+import { ReactElement, useContext, useEffect, useState } from 'react'
-import { ArrowDown, Check } from 'react-feather'
 import { useNavigate } from 'react-router'
+import ArrowDown from 'remixicon-react/ArrowDownCircleLineIcon'
+import Check from 'remixicon-react/CheckLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -11,15 +14,19 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { useIsBeeDesktop } from '../../hooks/apiHooks'
 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 { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'
 
+const MINIMUM_XDAI = '0.1'
+const MINIMUM_XBZZ = '0.1'
+
 interface Props {
   header: string
 }
@@ -27,36 +34,76 @@ interface Props {
 export function Swap({ header }: Props): ReactElement {
   const [loading, setLoading] = useState(false)
   const [hasSwapped, setSwapped] = useState(false)
+  const [userInputSwap, setUserInputSwap] = useState<string | null>(null)
+  const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))
 
   const { providerUrl } = useContext(TopUpContext)
-  const { balance, nodeAddresses } = useContext(BeeContext)
+  const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
+  const { isBeeDesktop } = useIsBeeDesktop()
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
 
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    getBzzPriceAsDai().then(setPrice).catch(console.error)
+  }, [])
+
   if (!balance || !nodeAddresses) {
     return <Loading />
   }
 
-  const daiToSwap = balance.dai.minusBaseUnits('1')
+  const optimalSwap = balance.dai.minusBaseUnits('1')
+  const lowAmountSwap = new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2))
+
+  let daiToSwap: DaiToken
+
+  function isPositiveDecimal(value: string): boolean {
+    try {
+      return new BigNumber(value).isPositive()
+    } catch {
+      return false
+    }
+  }
+
+  if (userInputSwap && isPositiveDecimal(userInputSwap)) {
+    daiToSwap = DaiToken.fromDecimal(userInputSwap, 18)
+  } else {
+    daiToSwap = lowAmountSwap.toBigNumber.gt(optimalSwap.toBigNumber) ? lowAmountSwap : optimalSwap
+  }
 
   const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
-  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200))
+  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedBy(100).dividedToIntegerBy(price.toDecimal))
+
+  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+
+  async function restart() {
+    if (!providerUrl) {
+      return
+    }
+
+    try {
+      await sleepMs(5_000)
+      await upgradeToLightNode(providerUrl)
+      await restartBeeNode()
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      navigate(ROUTES.RESTART_LIGHT)
+    } catch (error) {
+      enqueueSnackbar(`Failed to upgrade: ${error}`, { variant: 'error' })
+    }
+  }
 
   async function onSwap() {
-    if (hasSwapped) {
+    if (hasSwapped || !providerUrl) {
       return
     }
     setLoading(true)
     setSwapped(true)
     try {
       await performSwap(daiToSwap.toString)
-      enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
+      enqueueSnackbar('Successfully swapped', { variant: 'success' })
-      await sleepMs(5_000)
+
-      await upgradeToLightNode(providerUrl)
+      if (canUpgradeToLightNode) await restart()
-      await restartBeeNode()
-      navigate(ROUTES.RESTART_LIGHT)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
     } catch (error) {
       enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
     } finally {
@@ -71,28 +118,35 @@ export function Swap({ header }: Props): ReactElement {
         <TopUpProgressIndicator index={1} />
       </Box>
       <Box mb={2}>
-        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to BZZ</Typography>
+        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to xBZZ</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
+          You need to swap xDAI to xBZZ in order to use Swarm. Make sure to keep at least {MINIMUM_XDAI} xDAI in order
-          transaction costs on the network.
+          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.
+          xBZZ.
         </Typography>
       </Box>
       <Box mb={4}>
         <SwarmTextInput
           label="Amount to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
+          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
           name="x"
-          onChange={() => false}
+          onChange={event => setUserInputSwap(event.target.value)}
         />
+        {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? (
+          <Typography>Must keep at least {MINIMUM_XDAI} xDAI after swap!</Typography>
+        ) : null}
+        {bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ) ? (
+          <Typography>Must have at least {MINIMUM_XBZZ} xBZZ after swap!</Typography>
+        ) : null}
       </Box>
       <Box mb={4}>
         <ArrowDown size={24} color="#aaaaaa" />
@@ -102,24 +156,26 @@ export function Swap({ header }: Props): ReactElement {
       </Box>
       <Box mb={0.25}>
         <ExpandableListItem
-          label="Resulting XDAI balance after swap"
+          label="Resulting xDAI balance after swap"
-          value={`${daiAfterSwap.toSignificantDigits(4)} XDAI`}
+          value={`${daiAfterSwap.toSignificantDigits(4)} xDAI`}
         />
       </Box>
       <Box mb={2}>
         <ExpandableListItem
-          label="Resulting BZZ balance after swap"
+          label="Resulting xBZZ balance after swap"
-          value={`${bzzAfterSwap.toSignificantDigits(4)} BZZ`}
+          value={`${bzzAfterSwap.toSignificantDigits(4)} xBZZ`}
         />
       </Box>
       <ExpandableListItemActions>
         <SwarmButton
           iconType={Check}
           onClick={onSwap}
-          disabled={hasSwapped || loading || balance.dai.toDecimal.lte(1)}
+          disabled={
+            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
+          }
           loading={loading}
         >
-          Swap Now
+          {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}
         </SwarmButton>
       </ExpandableListItemActions>
     </>

src/pages/top-up/TopUpProgressIndicator.tsx

@@ -6,5 +6,5 @@ interface Props {
 }
 
 export function TopUpProgressIndicator({ index }: Props): ReactElement {
-  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap BZZ']} />
+  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap xBZZ']} />
 }

src/pages/top-up/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
 import { useNavigate } from 'react-router'
+import Check from 'remixicon-react/CheckLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -11,6 +11,8 @@ import { SwarmDivider } from '../../components/SwarmDivider'
 import { Context } from '../../providers/Bee'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'
 
+const MINIMUM_XDAI = '0.5'
+
 interface Props {
   header: string
   title: string
@@ -26,7 +28,7 @@ export default function Index({ header, title, p, next }: Props): ReactElement {
     return <Loading />
   }
 
-  const disabled = balance.dai.toDecimal.lte(1)
+  const disabled = balance.dai.toDecimal.lt(MINIMUM_XDAI)
 
   return (
     <>
@@ -49,7 +51,9 @@ export default function Index({ header, title, p, next }: Props): ReactElement {
         <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}
+        {disabled ? (
+          <Typography>Please deposit at least {MINIMUM_XDAI} xDAI to the address above in order to proceed.</Typography>
+        ) : null}
       </Grid>
     </>
   )

src/providers/Bee.tsx

@@ -19,6 +19,9 @@ import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
 import { Context as TopUpContext } from './TopUp'
 
+const REFRESH_WHEN_OK = 30_000
+const REFRESH_WHEN_ERROR = 5_000
+
 export enum CheckState {
   OK = 'OK',
   WARNING = 'Warning',
@@ -63,7 +66,6 @@ interface ContextInterface {
   chainState: ChainState | null
   latestBeeRelease: LatestBeeRelease | null
   isLoading: boolean
-  isRefreshing: boolean
   lastUpdate: number | null
   start: (frequency?: number) => void
   stop: () => void
@@ -101,7 +103,6 @@ const initialValues: ContextInterface = {
   chainState: null,
   latestBeeRelease: null,
   isLoading: true,
-  isRefreshing: false,
   lastUpdate: null,
   start: () => {}, // eslint-disable-line
   stop: () => {}, // eslint-disable-line
@@ -183,6 +184,9 @@ function getStatus(
   return status
 }
 
+// This does not need to be exposed and works much better as variable than state variable which may trigger some unnecessary re-renders
+let isRefreshing = false
+
 export function Provider({ children }: Props): ReactElement {
   const { beeApi, beeDebugApi } = useContext(SettingsContext)
   const { provider } = useContext(TopUpContext)
@@ -204,7 +208,6 @@ export function Provider({ children }: Props): ReactElement {
 
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
-  const [isRefreshing, setIsRefreshing] = useState<boolean>(initialValues.isRefreshing)
   const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
   const [frequency, setFrequency] = useState<number | null>(30000)
 
@@ -217,7 +220,7 @@ export function Provider({ children }: Props): ReactElement {
 
     setApiHealth(false)
 
-    refresh()
+    if (beeApi !== null) refresh()
   }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -235,17 +238,17 @@ export function Provider({ children }: Props): ReactElement {
     setSettlements(null)
     setChainState(null)
 
-    refresh()
+    if (beeDebugApi !== null) refresh()
   }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (nodeAddresses?.ethereum) {
+    if (nodeAddresses?.ethereum && provider) {
       WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
     }
   }, [nodeAddresses, provider])
 
   useEffect(() => {
-    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
+    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), REFRESH_WHEN_OK)
 
     return () => clearInterval(interval)
   }, [walletAddress])
@@ -262,7 +265,7 @@ export function Provider({ children }: Props): ReactElement {
     }
 
     try {
-      setIsRefreshing(true)
+      isRefreshing = true
       setError(null)
 
       // Wrap the chequebook balance call to return BZZ values as Token object
@@ -371,20 +374,40 @@ export function Provider({ children }: Props): ReactElement {
       await Promise.allSettled(promises)
     } catch (e) {
       setError(e as Error)
-    } finally {
-      setIsLoading(false)
-      setIsRefreshing(false)
-      setLastUpdate(Date.now())
-    }
     }
 
-  const start = (freq = 30000) => setFrequency(freq)
+    setIsLoading(false)
+    isRefreshing = false
+    setLastUpdate(Date.now())
+  }
+
+  const start = (freq = REFRESH_WHEN_OK) => {
+    refresh()
+    setFrequency(freq)
+  }
   const stop = () => setFrequency(null)
 
+  const status = getStatus(
+    debugApiHealth,
+    nodeAddresses,
+    nodeInfo,
+    apiHealth,
+    topology,
+    chequebookAddress,
+    chequebookBalance,
+    error,
+  )
+
+  useEffect(() => {
+    let newFrequency = REFRESH_WHEN_OK
+
+    if (status.all !== 'OK') newFrequency = REFRESH_WHEN_ERROR
+
+    if (newFrequency !== frequency) setFrequency(newFrequency)
+  }, [status.all, frequency])
+
   // Start the update loop
   useEffect(() => {
-    refresh()
-
     // Start autorefresh only if the frequency is set
     if (frequency) {
       const interval = setInterval(refresh, frequency)
@@ -396,16 +419,7 @@ export function Provider({ children }: Props): ReactElement {
   return (
     <Context.Provider
       value={{
-        status: getStatus(
+        status,
-          debugApiHealth,
-          nodeAddresses,
-          nodeInfo,
-          apiHealth,
-          topology,
-          chequebookAddress,
-          chequebookBalance,
-          error,
-        ),
         balance: walletAddress,
         latestUserVersion,
         latestUserVersionExact,
@@ -433,7 +447,6 @@ export function Provider({ children }: Props): ReactElement {
         chainState,
         latestBeeRelease,
         isLoading,
-        isRefreshing,
         lastUpdate,
         start,
         stop,

src/providers/Stamps.tsx

@@ -65,7 +65,7 @@ export function Provider({ children }: Props): ReactElement {
       setIsLoading(true)
       const stamps = await beeDebugApi.getAllPostageBatch()
 
-      setStamps(stamps.map(enrichStamp))
+      setStamps(stamps.filter(x => x.exists).map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
       setError(e as Error)

src/providers/TopUp.tsx

@@ -10,16 +10,18 @@ const LocalStorageKeys = {
 }
 
 interface ContextInterface {
-  providerUrl: string
+  providerUrl: string | null
-  provider: providers.JsonRpcProvider
+  provider: providers.JsonRpcProvider | null
   giftWallets: Wallet[]
   setProviderUrl: (providerUrl: string) => void
   addGiftWallet: (wallet: Wallet) => void
 }
 
+const providerUrl = localStorage.getItem('json-rpc-provider') || null
+
 const initialValues: ContextInterface = {
-  providerUrl: '',
+  providerUrl,
-  provider: new providers.JsonRpcProvider(),
+  provider: providerUrl ? new providers.JsonRpcProvider(providerUrl) : null,
   giftWallets: [],
   setProviderUrl: () => {}, // eslint-disable-line
   addGiftWallet: () => {}, // eslint-disable-line
@@ -33,11 +35,13 @@ interface Props {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl)
+  const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
-  const [provider, setProvider] = useState(new providers.JsonRpcProvider(providerUrl))
+  const [provider, setProvider] = useState(initialValues.provider)
   const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
 
   useEffect(() => {
+    if (provider === null) return
+
     const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
 
     if (existingGiftWallets) {

src/routes.tsx

@@ -14,7 +14,6 @@ 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'
@@ -35,15 +34,14 @@ export enum ROUTES {
   HASH = '/files/hash/:hash',
   SETTINGS = '/settings',
   STATUS = '/status',
-  WALLET = '/wallet',
+  WALLET = '/account/wallet/top-up',
-  CONFIRMATION = '/wallet/confirmation',
+  CONFIRMATION = '/account/wallet/top-up/confirmation',
-  TOP_UP_CRYPTO = '/top-up/crypto',
+  TOP_UP_CRYPTO = '/account/wallet/top-up/crypto',
-  TOP_UP_CRYPTO_SWAP = '/top-up/crypto/swap',
+  TOP_UP_CRYPTO_SWAP = '/account/wallet/top-up/crypto/swap',
-  TOP_UP_BANK_CARD = '/top-up/bank-card',
+  TOP_UP_BANK_CARD = '/account/wallet/top-up/bank-card',
-  TOP_UP_BANK_CARD_SWAP = '/top-up/bank-card/swap',
+  TOP_UP_BANK_CARD_SWAP = '/account/wallet/top-up/bank-card/swap',
-  TOP_UP_GIFT_CODE = '/top-up/gift-code',
+  TOP_UP_GIFT_CODE = '/account/wallet/top-up/gift-code',
-  TOP_UP_GIFT_CODE_FUND = '/top-up/gift-code/fund/:privateKeyString',
+  TOP_UP_GIFT_CODE_FUND = '/account/wallet/top-up/gift-code/fund/:privateKeyString',
-  RESTART = '/restart',
   RESTART_LIGHT = '/light-mode-restart',
   ACCOUNT_WALLET = '/account/wallet',
   ACCOUNT_CHEQUEBOOK = '/account/chequebook',
@@ -80,7 +78,6 @@ const BaseRouter = (): ReactElement => (
     <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 />} />

src/utils/bzz-abi.ts

@@ -0,0 +1,45 @@
+export const BZZ_TOKEN_ADDRESS = '0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da'
+export const bzzABI = [
+  {
+    type: 'function',
+    stateMutability: 'view',
+    payable: false,
+    outputs: [
+      {
+        type: 'uint256',
+        name: '',
+      },
+    ],
+    name: 'balanceOf',
+    inputs: [
+      {
+        type: 'address',
+        name: '_owner',
+      },
+    ],
+    constant: true,
+  },
+  {
+    type: 'function',
+    stateMutability: 'nonpayable',
+    payable: false,
+    outputs: [
+      {
+        type: 'bool',
+        name: '',
+      },
+    ],
+    name: 'transfer',
+    inputs: [
+      {
+        type: 'address',
+        name: '_to',
+      },
+      {
+        type: 'uint256',
+        name: '_value',
+      },
+    ],
+    constant: false,
+  },
+]

src/utils/bzz-contract-interface.ts

@@ -1,25 +0,0 @@
-export const bzzContractInterface = [
-  {
-    type: 'function',
-    stateMutability: 'nonpayable',
-    payable: false,
-    outputs: [
-      {
-        type: 'bool',
-        name: '',
-      },
-    ],
-    name: 'transfer',
-    inputs: [
-      {
-        type: 'address',
-        name: '_to',
-      },
-      {
-        type: 'uint256',
-        name: '_value',
-      },
-    ],
-    constant: false,
-  },
-]

src/utils/desktop.ts

@@ -1,4 +1,6 @@
 import axios from 'axios'
+import { DaiToken } from '../models/DaiToken'
+import { Token } from '../models/Token'
 import { getJson, postJson, sendRequest } from './net'
 
 interface DesktopStatus {
@@ -8,14 +10,18 @@ interface DesktopStatus {
   config: Record<string, any>
 }
 
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+
 export async function getDesktopStatus(): Promise<DesktopStatus> {
   const response = await getJson(`${getDesktopHost()}/status`)
 
   return response as DesktopStatus
 }
 
-export async function getGasFromFaucet(address: string): Promise<void> {
+export async function getBzzPriceAsDai(): Promise<Token> {
-  await axios.post(`http://getxdai.co/${address}/0.1`)
+  const response = await axios.get(`${getDesktopHost()}/price`)
+
+  return DaiToken.fromDecimal(response.data, 18)
 }
 
 export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
@@ -60,6 +66,12 @@ export async function getBeeLogs(): Promise<string> {
   return response as unknown as string
 }
 
+export async function getLatestBeeDesktopVersion(): Promise<string> {
+  const response = await (await fetch('https://api.github.com/repos/ethersphere/bee-desktop/releases/latest')).json()
+
+  return response.tag_name.replace('v', '') // We get for example "v0.12.1"
+}
+
 function getDesktopHost(): string {
   if (process.env.REACT_APP_BEE_DESKTOP_URL) {
     return process.env.REACT_APP_BEE_DESKTOP_URL

src/utils/index.ts

@@ -1,8 +1,8 @@
-import { BigNumber } from 'bignumber.js'
-import { Token } from '../models/Token'
-import { decodeCid } from '@ethersphere/swarm-cid'
-import { BZZ_LINK_DOMAIN } from '../constants'
 import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
+import { decodeCid } from '@ethersphere/swarm-cid'
+import { BigNumber } from 'bignumber.js'
+import { BZZ_LINK_DOMAIN } from '../constants'
+import { Token } from '../models/Token'
 
 /**
  * Test if value is an integer
@@ -229,16 +229,25 @@ export function shortenText(text: string, length = 20, separator = '[…]'): str
 }
 
 const DEFAULT_POLLING_FREQUENCY = 1_000
-const DEFAULT_STAMP_USABLE_TIMEOUT = 120_000
+const DEFAULT_STAMP_USABLE_TIMEOUT = 240_000
 
 interface Options {
   pollingFrequency?: number
   timeout?: number
 }
 
-export async function waitUntilStampUsable(
+export function waitUntilStampUsable(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+  return waitForStamp(batchId, beeDebug, 'usable', options)
+}
+
+export function waitUntilStampExists(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+  return waitForStamp(batchId, beeDebug, 'exists', options)
+}
+
+async function waitForStamp(
   batchId: BatchId,
   beeDebug: BeeDebug,
+  field: 'exists' | 'usable',
   options?: Options,
 ): Promise<PostageBatch> {
   const timeout = options?.timeout || DEFAULT_STAMP_USABLE_TIMEOUT
@@ -247,7 +256,7 @@ export async function waitUntilStampUsable(
   for (let i = 0; i < timeout; i += pollingFrequency) {
     const stamp = await beeDebug.getPostageBatch(batchId)
 
-    if (stamp.usable) return stamp
+    if (stamp[field]) return stamp
     await sleepMs(pollingFrequency)
   }
 

src/utils/rpc.ts

@@ -1,6 +1,6 @@
 import { debounce } from '@material-ui/core'
-import { Contract, providers, Wallet } from 'ethers'
+import { Contract, providers, Wallet, BigNumber as BN } from 'ethers'
-import { bzzContractInterface } from './bzz-contract-interface'
+import { bzzABI, BZZ_TOKEN_ADDRESS } from './bzz-abi'
 
 async function eth_getBalance(address: string, provider: providers.JsonRpcProvider): Promise<string> {
   if (!address.startsWith('0x')) {
@@ -17,36 +17,15 @@ async function eth_getBlockByNumber(provider: providers.JsonRpcProvider): Promis
   return blockNumber.toString()
 }
 
-const partialERC20tokenABI = [
-  {
-    constant: true,
-    inputs: [
-      {
-        name: '_owner',
-        type: 'address',
-      },
-    ],
-    name: 'balanceOf',
-    outputs: [
-      {
-        name: 'balance',
-        type: 'uint256',
-      },
-    ],
-    payable: false,
-    type: 'function',
-  },
-]
-
 async function eth_getBalanceERC20(
   address: string,
   provider: providers.JsonRpcProvider,
-  tokenAddress = '0xdbf3ea6f5bee45c02255b2c26a16f300502f68da',
+  tokenAddress = BZZ_TOKEN_ADDRESS,
 ): Promise<string> {
   if (!address.startsWith('0x')) {
     address = `0x${address}`
   }
-  const contract = new Contract(tokenAddress, partialERC20tokenABI, provider)
+  const contract = new Contract(tokenAddress, bzzABI, provider)
   const balance = await contract.balanceOf(address)
 
   return balance.toString()
@@ -57,14 +36,26 @@ interface TransferResponse {
   receipt: providers.TransactionReceipt
 }
 
+export async function estimateNativeTransferTransactionCost(
+  privateKey: string,
+  jsonRpcProvider: string,
+): Promise<{ gasPrice: BN; totalCost: BN }> {
+  const signer = await makeReadySigner(privateKey, jsonRpcProvider)
+  const gasLimit = '21000'
+  const gasPrice = await signer.getGasPrice()
+
+  return { gasPrice, totalCost: gasPrice.mul(gasLimit) }
+}
+
 export async function sendNativeTransaction(
   privateKey: string,
   to: string,
   value: string,
   jsonRpcProvider: string,
+  externalGasPrice?: BN,
 ): Promise<TransferResponse> {
   const signer = await makeReadySigner(privateKey, jsonRpcProvider)
-  const gasPrice = await signer.getGasPrice()
+  const gasPrice = externalGasPrice ?? (await signer.getGasPrice())
   const transaction = await signer.sendTransaction({ to, value, gasPrice })
   const receipt = await transaction.wait(1)
 
@@ -79,7 +70,7 @@ export async function sendBzzTransaction(
 ): Promise<TransferResponse> {
   const signer = await makeReadySigner(privateKey, jsonRpcProvider)
   const gasPrice = await signer.getGasPrice()
-  const bzz = new Contract('0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da', bzzContractInterface, signer)
+  const bzz = new Contract(BZZ_TOKEN_ADDRESS, bzzABI, signer)
   const transaction = await bzz.transfer(to, value, { gasPrice })
   const receipt = await transaction.wait(1)
 

src/utils/sentry.ts

@@ -23,8 +23,8 @@ export async function initSentry(): Promise<void> {
     release: packageJson.version,
     environment: config.SENTRY_ENVIRONMENT,
     tunnel: tunnelAvailable ? `${config.BEE_DESKTOP_URL}/sentry` : undefined,
-    integrations: [new BrowserTracing({ tracingOrigins: ['localhost'] })],
+    integrations: [new BrowserTracing({ tracingOrigins: [config.BEE_DESKTOP_URL] })],
-    tracesSampleRate: 0.3,
+    tracesSampleRate: 0.4,
     beforeSend: async (event, hint) => {
       hint.attachments = []
 

src/utils/wallet.ts

@@ -2,7 +2,7 @@ import { providers, Wallet } from 'ethers'
 import { sleepMs } from '.'
 import { BzzToken } from '../models/BzzToken'
 import { DaiToken } from '../models/DaiToken'
-import { Rpc } from './rpc'
+import { estimateNativeTransferTransactionCost, Rpc } from './rpc'
 
 export class WalletAddress {
   private constructor(
@@ -59,19 +59,20 @@ export class ResolvedWallet {
   }
 
   public async transfer(destination: string, jsonRpcProvider: string): Promise<void> {
-    const DUMMY_GAS_PRICE = '300000000000000'
+    if (this.bzz.toDecimal.gt(0.05)) {
-
-    if (this.bzz.toDecimal.gt(0.1)) {
       await Rpc.sendBzzTransaction(this.privateKey, destination, this.bzz.toString, jsonRpcProvider)
       await sleepMs(5_000)
     }
 
-    if (this.dai.toBigNumber.gt(DUMMY_GAS_PRICE)) {
+    const { gasPrice, totalCost } = await estimateNativeTransferTransactionCost(this.privateKey, jsonRpcProvider)
+
+    if (this.dai.toBigNumber.gt(totalCost.toString())) {
       await Rpc.sendNativeTransaction(
         this.privateKey,
         destination,
-        this.dai.toBigNumber.minus(DUMMY_GAS_PRICE).toString(),
+        this.dai.toBigNumber.minus(totalCost.toString()).toString(),
         jsonRpcProvider,
+        gasPrice,
       )
     }
   }

webpack.config.js

@@ -1,8 +1,8 @@
-import Path from 'path'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
-import { Configuration } from 'webpack'
+const Path = require('path')
 
 // eslint-disable-next-line import/no-anonymous-default-export
-export default (): Configuration => {
+module.exports = () => {
   const entry = Path.resolve(__dirname, 'src', 'App.tsx')
 
   return {