chore(master): release 0.21.1 (#600)

* fix: do not require chequebook funding

* chore: revert import sorting

.env.development

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

.env.production

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

.github/workflows/check.yaml

@@ -19,7 +19,6 @@ jobs:
     env:
       REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
       REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
-      REACT_APP_DEV_MODE: 1
 
     steps:
       - uses: actions/checkout@v2
@@ -62,6 +61,7 @@ jobs:
         uses: ethersphere/update-supported-bee-action@v1
         if: github.ref == 'refs/heads/master'
         with:
+          updateEngine: true
           token: ${{ secrets.GHA_PAT_BASIC }}
 
       - name: Build
@@ -72,6 +72,7 @@ jobs:
 
       - name: Create preview
         uses: ethersphere/swarm-actions/pr-preview@v0
+        continue-on-error: true
         with:
           bee-url: https://unlimited.gateway.ethswarm.org
           token: ${{ secrets.GHA_PAT_BASIC }}

CHANGELOG.md

@@ -1,5 +1,60 @@
 # Changelog
 
+## [0.21.1](https://github.com/ethersphere/bee-dashboard/compare/v0.21.0...v0.21.1) (2022-12-21)
+
+
+### Bug Fixes
+
+* do not require chequebook funding ([#599](https://github.com/ethersphere/bee-dashboard/issues/599)) ([42b7f08](https://github.com/ethersphere/bee-dashboard/commit/42b7f080b00a94f068d2fad4779d02ddcf58e27d))
+
+## [0.21.0](https://github.com/ethersphere/bee-dashboard/compare/v0.20.2...v0.21.0) (2022-12-01)
+
+
+### Features
+
+* add prerequisite checks before swap ([#588](https://github.com/ethersphere/bee-dashboard/issues/588)) ([4e564dd](https://github.com/ethersphere/bee-dashboard/commit/4e564dd5c08b938c95f07818bc60957a7df4f5bb))
+* add starting state to sidebar indicator ([#587](https://github.com/ethersphere/bee-dashboard/issues/587)) ([848e61a](https://github.com/ethersphere/bee-dashboard/commit/848e61a7a0fc9b31cae4f603473b37d467f9e914))
+
+
+### Bug Fixes
+
+* add loading state to info page ([#584](https://github.com/ethersphere/bee-dashboard/issues/584)) ([0246904](https://github.com/ethersphere/bee-dashboard/commit/02469046b05512d6617d8b21ca93b41d6a8a6827))
+* always consider user input when performing swap ([#572](https://github.com/ethersphere/bee-dashboard/issues/572)) ([ec8fdf0](https://github.com/ethersphere/bee-dashboard/commit/ec8fdf0315ed7ee75c7612780c602cba49a2321d))
+* always set rpc to newly provided value in desktop ([#591](https://github.com/ethersphere/bee-dashboard/issues/591)) ([b798fa0](https://github.com/ethersphere/bee-dashboard/commit/b798fa0e68b367fe324ef64507b1405b642da6e0))
+* change status page depending on desktop mode ([#573](https://github.com/ethersphere/bee-dashboard/issues/573)) ([a4b8e7c](https://github.com/ethersphere/bee-dashboard/commit/a4b8e7ca2596028e7c8192c92202c0361610e307))
+* change version mismatch to a warning ([#594](https://github.com/ethersphere/bee-dashboard/issues/594)) ([dc04e26](https://github.com/ethersphere/bee-dashboard/commit/dc04e26db4fe6beb9e76fad79c732794b0b7f77d))
+* fix conditional rendering for blockchain network ([#583](https://github.com/ethersphere/bee-dashboard/issues/583)) ([1ce4a47](https://github.com/ethersphere/bee-dashboard/commit/1ce4a474954a5ba4debee53b40bb66a46fb19ffc))
+* handle auth and server error during swap ([#593](https://github.com/ethersphere/bee-dashboard/issues/593)) ([665ae06](https://github.com/ethersphere/bee-dashboard/commit/665ae063fa49bc94762ea10a9098b57e95327d9c))
+* hide swap in standalone mode ([#582](https://github.com/ethersphere/bee-dashboard/issues/582)) ([9a8520e](https://github.com/ethersphere/bee-dashboard/commit/9a8520eb6fe9f40a77c4230ab79d3731ebdd4b42))
+* refresh after chequebook withdraw deposit ([#576](https://github.com/ethersphere/bee-dashboard/issues/576)) ([6936098](https://github.com/ethersphere/bee-dashboard/commit/693609810d735d1e54691b13ea0e4db33e678a53))
+
+## [0.20.2](https://github.com/ethersphere/bee-dashboard/compare/v0.20.1...v0.20.2) (2022-09-15)
+
+
+### Bug Fixes
+
+* stamp purchasing ([#551](https://github.com/ethersphere/bee-dashboard/issues/551)) ([c0456a3](https://github.com/ethersphere/bee-dashboard/commit/c0456a3bf6d541457b706670b1a757d2b1d70f10))
+
+## [0.20.1](https://github.com/ethersphere/bee-dashboard/compare/v0.20.0...v0.20.1) (2022-09-15)
+
+
+### Bug Fixes
+
+* revert bee env. variable names and add default rpc var ([#545](https://github.com/ethersphere/bee-dashboard/issues/545)) ([5295bd5](https://github.com/ethersphere/bee-dashboard/commit/5295bd5b012962846aa15ff12ca4234f0c8b37f7))
+* rpc endpoint setting ultra-light mode logic ([#547](https://github.com/ethersphere/bee-dashboard/issues/547)) ([e2dd077](https://github.com/ethersphere/bee-dashboard/commit/e2dd077118faf3b6071fc8327e37e317e0174975))
+
+## [0.20.0](https://github.com/ethersphere/bee-dashboard/compare/v0.19.3...v0.20.0) (2022-09-14)
+
+
+### Features
+
+* error reporting callback ([#530](https://github.com/ethersphere/bee-dashboard/issues/530)) ([0c74dae](https://github.com/ethersphere/bee-dashboard/commit/0c74dae4e88916cf54c3c0500b37203b865e48a7))
+
+
+### Bug Fixes
+
+* show update notifications only on non-auto-updating Swarm Desktops ([#543](https://github.com/ethersphere/bee-dashboard/issues/543)) ([528a810](https://github.com/ethersphere/bee-dashboard/commit/528a8106907ef176bcdb68b3386c2f3f9ea98a47))
+
 ## [0.19.3](https://github.com/ethersphere/bee-dashboard/compare/v0.19.2...v0.19.3) (2022-08-24)
 
 

README.md

@@ -13,7 +13,7 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
 
-This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.7.0-bbf13011<!-- SUPPORTED_BEE_END -->**.
+This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.9.0-13a47043<!-- SUPPORTED_BEE_END -->**.
 Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
 [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
@@ -94,14 +94,23 @@ npm start
 
 The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/)
 
-> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself.
+#### Environmental variables
+
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. 
+We support following variables:
+
+ - `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
+ - `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same origin under which the Dashboard is served.
+ - `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
+ - `REACT_APP_BEE_DEBUG_HOST` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+ - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
 
 #### Swarm Desktop development
 
-If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where you see Bee Dashboard (eq. install Bee etc.) and:
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where Desktop is initialized (eq. the splash screen disappear) and:
 
 ```sh
-echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3000
+echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
 REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
 
 npm start

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.19.3",
+  "version": "0.21.1",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -26,7 +26,7 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^5.0.0",
+    "@ethersphere/bee-js": "^5.1.0",
     "@ethersphere/manifest-js": "1.2.1",
     "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
@@ -113,7 +113,7 @@
     "react-scripts": "^5.0.1",
     "rimraf": "^3.0.2",
     "ts-node": "^10.8.1",
-    "typescript": "4.7.3",
+    "typescript": "4.8.3",
     "web-vitals": "2.1.2",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"
@@ -136,7 +136,8 @@
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
     "check:types": "tsc --project tsconfig.lib.json",
-    "update-map-data": "node ./utils/update-map-data.js"
+    "update-map-data": "node ./utils/update-map-data.js",
+    "bee": "bee-factory start"
   },
   "files": [
     "lib",
@@ -158,6 +159,6 @@
   "engines": {
     "node": ">=14.0.0",
     "npm": ">=6.9.0",
-    "bee": ">=0.6.0"
+    "bee": "1.9.0-13a47043"
   }
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
 import './App.css'
 import Dashboard from './layout/Dashboard'
@@ -19,22 +19,35 @@ import { theme } from './theme'
 interface Props {
   beeApiUrl?: string
   beeDebugApiUrl?: string
+  defaultRpcUrl?: string
   lockedApiSettings?: boolean
-  isBeeDesktop?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  errorReporting?: (err: Error) => void
 }
 
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Props): ReactElement => {
+const App = ({
+  beeApiUrl,
+  beeDebugApiUrl,
+  defaultRpcUrl,
+  lockedApiSettings,
+  isDesktop,
+  desktopUrl,
+  errorReporting,
+}: Props): ReactElement => {
   const mainApp = (
     <div className="App">
       <ThemeProvider theme={theme}>
         <SettingsProvider
           beeApiUrl={beeApiUrl}
           beeDebugApiUrl={beeDebugApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
           lockedApiSettings={lockedApiSettings}
-          isBeeDesktop={isBeeDesktop}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
         >
           <TopUpProvider>
-            <BeeProvider>
+            <BeeProvider isDesktop={isDesktop}>
               <BalanceProvider>
                 <StampsProvider>
                   <FileProvider>
@@ -44,7 +57,7 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Pro
                           <Router>
                             <>
                               <CssBaseline />
-                              <Dashboard>
+                              <Dashboard errorReporting={errorReporting}>
                                 <BaseRouter />
                               </Dashboard>
                             </>

src/components/Card.tsx

@@ -2,6 +2,7 @@ import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
 import Check from 'remixicon-react/CheckLineIcon'
 import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
+import RefreshLine from 'remixicon-react/RefreshLineIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 
 interface Props {
@@ -9,7 +10,7 @@ interface Props {
   title: string
   subtitle: string
   buttonProps: SwarmButtonProps
-  status: 'ok' | 'error'
+  status: 'ok' | 'error' | 'loading'
 }
 
 const useStyles = (backgroundColor: string) =>
@@ -56,12 +57,22 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
   const { className, ...rest } = buttonProps
   const classes = useStyles(backgroundColor)()
 
+  let statusIcon = null
+
+  if (status === 'ok') {
+    statusIcon = <Check size="13" color="#09ca6c" />
+  } else if (status === 'error') {
+    statusIcon = <AlertCircle size="13" color="#f44336" />
+  } else if (status === 'loading') {
+    statusIcon = <RefreshLine size="13" color="orange" />
+  }
+
   return (
     <div className={classes.root}>
       <div className={classes.wrapper}>
         <div className={classes.iconWrapper}>
           {icon}
-          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
+          {statusIcon}
         </div>
         <Typography variant="h2" style={{ marginBottom: '8px' }}>
           {title}

src/components/ErrorBoundary.tsx

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

src/components/EthereumAddress.tsx

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

src/components/SideBar.tsx

@@ -12,11 +12,11 @@ import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
-import { config } from '../config'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 import { BeeModes } from '@ethersphere/bee-js'
+import { BEE_DOCS_HOST } from '../constants'
 
 const drawerWidth = 300
 
@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop } = useContext(SettingsContext)
   const { nodeInfo } = useContext(BeeContext)
 
   const navBarItems = [
@@ -99,7 +99,7 @@ export default function SideBar(): ReactElement {
       <Grid container direction="column" justifyContent="space-between" className={classes.root}>
         <Grid className={classes.logo}>
           <Link to={ROUTES.INFO}>
-            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
+            <img alt="swarm" src={isDesktop ? DesktopLogo : DashboardLogo} />
           </Link>
         </Grid>
         <Grid>
@@ -118,7 +118,7 @@ export default function SideBar(): ReactElement {
           </List>
           <Divider className={classes.divider} />
           <List>
-            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
+            <MUILink href={BEE_DOCS_HOST} target="_blank" className={classes.link}>
               <SideBarItem
                 iconStart={<DocsIcon className={classes.icon} />}
                 iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}

src/components/StatusIcon.tsx

@@ -25,6 +25,9 @@ export default function StatusIcon({ checkState, size, className, isLoading }: P
     case CheckState.ERROR:
       backgroundColor = '#ff3a52'
       break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
     default:
       // Default is error
       backgroundColor = '#ff3a52'

src/components/TroubleshootConnectionCard.tsx

@@ -3,8 +3,8 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
 import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
-import { config } from '../config'
 import { ROUTES } from '../routes'
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
       <Grid item className={classes.content}>
         <Typography align="center">
           Please check your node status to fix the problem. You can also check out the{' '}
-          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
             Swarm Bee Docs
           </MuiLink>{' '}
           or ask for support on the{' '}
-          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
             Ethereum Swarm Discord
           </MuiLink>
           .

src/config.ts

@@ -1,29 +0,0 @@
-class Config {
-  public readonly BEE_API_HOST: string
-  public readonly BEE_DEBUG_API_HOST: string
-  public readonly BLOCKCHAIN_EXPLORER_URL: string
-  public readonly BEE_DOCS_HOST: string
-  public readonly BEE_DISCORD_HOST: string
-  public readonly GITHUB_REPO_URL: string
-  public readonly BEE_DESKTOP_ENABLED: boolean
-  public readonly BEE_DESKTOP_URL: string
-  public readonly DEFAULT_RPC_URL: string
-
-  constructor() {
-    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
-    this.BEE_DEBUG_API_HOST =
-      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
-    this.BLOCKCHAIN_EXPLORER_URL =
-      process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet'
-    this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/'
-    this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
-    this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
-    this.BEE_DESKTOP_ENABLED = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true'
-    this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin
-    this.DEFAULT_RPC_URL = process.env.REACT_APP_DEFAULT_RPC_URL ?? 'https://xdai.fairdatasociety.org'
-  }
-}
-
-export const config = new Config()
-
-export default config

src/constants.ts

@@ -1,4 +1,14 @@
 export const META_FILE_NAME = '.swarmgatewaymeta.json'
 export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
-export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'
+export const BZZ_LINK_DOMAIN = 'bzz.link'
+export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet'
+export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/'
+export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7'
+export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
+  'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
+export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
+export const DEFAULT_BEE_DEBUG_API_HOST = 'http://localhost:1635'
+export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'

src/containers/DepositModal.tsx

@@ -1,12 +1,13 @@
+import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import Download from 'remixicon-react/DownloadLineIcon'
-import { Context as SettingsContext } from '../providers/Settings'
-
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
-import { BigNumber } from 'bignumber.js'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 
 export default function DepositModal(): ReactElement {
   const { beeDebugApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
 
   return (
     <WithdrawDepositModal
@@ -16,10 +17,13 @@ export default function DepositModal(): ReactElement {
       label="Deposit"
       icon={<Download size="1rem" />}
       min={new BigNumber(0)}
-      action={(amount: bigint) => {
+      action={async (amount: bigint) => {
         if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
 
-        return beeDebugApi.depositTokens(amount.toString())
+        const transactionHash = await beeDebugApi.depositTokens(amount.toString())
+        refresh()
+
+        return transactionHash
       }}
     />
   )

src/containers/WithdrawModal.tsx

@@ -2,10 +2,12 @@ import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
 import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
+import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
   const { beeDebugApi } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
 
   return (
     <WithdrawDepositModal
@@ -15,10 +17,13 @@ export default function WithdrawModal(): ReactElement {
       label="Withdraw"
       icon={<Upload size="1rem" />}
       min={new BigNumber(0)}
-      action={(amount: bigint) => {
+      action={async (amount: bigint) => {
         if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
 
-        return beeDebugApi.withdrawTokens(amount.toString())
+        const transactionHash = await beeDebugApi.withdrawTokens(amount.toString())
+        refresh()
+
+        return transactionHash
       }}
     />
   )

src/hooks/apiHooks.test.ts

@@ -41,7 +41,7 @@ afterAll(async () => {
 
 describe('useBeeDesktop', () => {
   it('should not have error when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useBeeDesktop(true, { BEE_DESKTOP_URL: serverCorrectURL }))
+    const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))
 
     await waitFor(() => {
       expect(result.current.isLoading).toBe(false)

src/hooks/apiHooks.tsx

@@ -1,8 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { config } from '../config'
+import { GITHUB_REPO_URL } from '../constants'
-import { getLatestBeeDesktopVersion } from '../utils/desktop'
+import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'
-import { getJson } from '../utils/net'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -11,6 +10,7 @@ export interface LatestBeeReleaseHook {
 }
 
 export interface BeeDesktopHook {
+  reachable: boolean
   error: Error | null
   isLoading: boolean
   beeDesktopVersion: string
@@ -21,23 +21,42 @@ export interface NewDesktopVersionHook {
   newBeeDesktopVersion: string
 }
 
-interface Config {
+export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
-  BEE_DESKTOP_URL: string
+  const [reachable, setReachable] = useState(false)
-}
-
-export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeDesktopHook => {
   const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
   const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
   const [isLoading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
 
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      return
+    }
+
+    function runReachabilityCheck() {
+      axios
+        .get(`${desktopUrl}/info`)
+        .then(() => {
+          setReachable(true)
+        })
+        .catch(() => {
+          setReachable(false)
+        })
+    }
+
+    runReachabilityCheck()
+    const interval = setInterval(runReachabilityCheck, 10_000)
+
+    return () => clearInterval(interval)
+  }, [desktopUrl, isBeeDesktop])
+
   useEffect(() => {
     if (!isBeeDesktop) {
       setLoading(false)
       setError(null)
     } else {
       axios
-        .get(`${conf.BEE_DESKTOP_URL}/info`)
+        .get(`${desktopUrl}/info`)
         .then(res => {
           setBeeDesktopVersion(res.data?.version)
           setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
@@ -50,13 +69,13 @@ export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeD
           setLoading(false)
         })
     }
-  }, [conf, isBeeDesktop])
+  }, [desktopUrl, isBeeDesktop])
 
-  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }
 
-async function checkNewVersion(conf: Config): Promise<string> {
+async function checkNewVersion(desktopUrl: string): Promise<string> {
-  const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json()
+  const resJson = await (await fetch(`${desktopUrl}/info`)).json()
   const currentVersion = resJson.version
   const latestVersion = await getLatestBeeDesktopVersion()
 
@@ -67,56 +86,41 @@ async function checkNewVersion(conf: Config): Promise<string> {
   return ''
 }
 
-export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook {
+export function useNewBeeDesktopVersion(
+  isBeeDesktop: boolean,
+  desktopUrl: string,
+  desktopAutoUpdateEnabled: boolean,
+): NewDesktopVersionHook {
   const [newBeeDesktopVersion, setNewBeeDesktopVersion] = useState<string>('')
 
   useEffect(() => {
-    if (!isBeeDesktop) {
+    if (!isBeeDesktop || desktopAutoUpdateEnabled) {
       return
     }
 
-    checkNewVersion(conf).then(version => {
+    checkNewVersion(desktopUrl).then(version => {
       if (version !== '') {
         setNewBeeDesktopVersion(version)
       }
     })
-  }, [isBeeDesktop, conf])
+  }, [isBeeDesktop, desktopUrl, desktopAutoUpdateEnabled])
 
   return { newBeeDesktopVersion }
 }
 
-export interface BeeConfig {
-  'api-addr': string
-  'debug-api-addr': string
-  'debug-api-enable': boolean
-  password: string
-  'swap-enable': boolean
-  'swap-initial-deposit': bigint
-  mainnet: boolean
-  'full-node': boolean
-  'chain-enable': boolean
-  'cors-allowed-origins': string
-  'resolver-options': string
-  'use-postage-snapshot': boolean
-  'data-dir': string
-  transaction: string
-  'block-hash': string
-  'swap-endpoint'?: string
-}
-
 export interface GetBeeConfig {
   config: BeeConfig | null
   isLoading: boolean
   error: Error | null
 }
 
-export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+export const useGetBeeConfig = (desktopUrl: string): GetBeeConfig => {
   const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
   const [isLoading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
 
   useEffect(() => {
-    getJson<BeeConfig>(`${conf.BEE_DESKTOP_URL}/config`)
+    getDesktopConfiguration(desktopUrl)
       .then(beeConf => {
         setBeeConfig(beeConf)
         setError(null)
@@ -128,7 +132,7 @@ export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
       .finally(() => {
         setLoading(false)
       })
-  }, [conf])
+  }, [desktopUrl])
 
   return { config: beeConfig, isLoading, error }
 }
@@ -140,7 +144,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
 
   useEffect(() => {
     axios
-      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
+      .get(`${GITHUB_REPO_URL}/releases/latest`)
       .then(res => {
         setLatestBeeRelease(res.data)
       })

src/index.tsx

@@ -4,9 +4,21 @@ import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
+const desktopEnabled = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED)
+const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
+const beeApiUrl = process.env.REACT_APP_BEE_HOST
+const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_HOST
+const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App
+      isDesktop={desktopEnabled}
+      desktopUrl={desktopUrl}
+      beeApiUrl={beeApiUrl}
+      beeDebugApiUrl={beeDebugApiUrl}
+      defaultRpcUrl={defaultRpcUrl}
+    />
   </React.StrictMode>,
   document.getElementById('root'),
 )

src/layout/Dashboard.tsx

@@ -7,8 +7,8 @@ import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
-import { useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface Props {
   children?: ReactElement
+  errorReporting?: (err: Error) => void
 }
 
 const Dashboard = (props: Props): ReactElement => {
@@ -28,13 +29,14 @@ const Dashboard = (props: Props): ReactElement => {
 
   const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } =
     useContext(BeeContext)
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
-  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
+  const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
   // New version of Bee client notification
   useEffect(() => {
-    if (!isLoading && !isBeeDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
+    if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
       enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, {
         variant: 'warning',
         preventDuplicate: true,
@@ -65,7 +67,7 @@ const Dashboard = (props: Props): ReactElement => {
     closeSnackbar,
     enqueueSnackbar,
     isLatestBeeVersion,
-    isBeeDesktop,
+    isDesktop,
     latestBeeRelease,
     latestBeeVersionUrl,
     isLoading,
@@ -73,6 +75,11 @@ const Dashboard = (props: Props): ReactElement => {
   ])
 
   useEffect(() => {
+    // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
+    if (desktopAutoUpdateEnabled) {
+      return
+    }
+
     if (newBeeDesktopVersion !== '') {
       enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
         variant: 'warning',
@@ -100,7 +107,7 @@ const Dashboard = (props: Props): ReactElement => {
         ),
       })
     }
-  }, [enqueueSnackbar, closeSnackbar, newBeeDesktopVersion])
+  }, [enqueueSnackbar, closeSnackbar, newBeeDesktopVersion, desktopAutoUpdateEnabled])
 
   const content = (
     <>
@@ -119,7 +126,7 @@ const Dashboard = (props: Props): ReactElement => {
       <SideBar />
       <Container className={classes.content}>
         {' '}
-        <ErrorBoundary>{content}</ErrorBoundary>
+        <ErrorBoundary errorReporting={props.errorReporting}>{content}</ErrorBoundary>
       </Container>
     </div>
   )

src/models/BzzToken.ts

@@ -1,8 +1,14 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
+export const BZZ_DECIMAL_PLACES = 16
+
 export class BzzToken extends Token {
-  constructor(amount: BigNumber | string | bigint) {
+  constructor(value: BigNumber | string | bigint) {
-    super(amount, 16)
+    super(value, BZZ_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): BzzToken {
+    return Token.fromDecimal(value, BZZ_DECIMAL_PLACES)
   }
 }

src/models/DaiToken.ts

@@ -1,8 +1,14 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
+const DAI_DECIMAL_PLACES = 18
+
 export class DaiToken extends Token {
-  constructor(amount: BigNumber | string | bigint) {
+  constructor(value: BigNumber | string | bigint) {
-    super(amount, 18)
+    super(value, DAI_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): DaiToken {
+    return Token.fromDecimal(value, DAI_DECIMAL_PLACES)
   }
 }

src/models/Token.ts

@@ -87,4 +87,11 @@ export class Token {
       this.decimals,
     )
   }
+
+  plusBaseUnits(amount: string): Token {
+    return new Token(
+      this.toBigNumber.plus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+      this.decimals,
+    )
+  }
 }

src/pages/account/wallet/AccountWallet.tsx

@@ -20,7 +20,7 @@ import { Header } from '../Header'
 
 export function AccountWallet(): ReactElement {
   const { nodeAddresses, nodeInfo, status } = useContext(BeeContext)
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop } = useContext(SettingsContext)
   const { balance } = useContext(BalanceProvider)
 
   const navigate = useNavigate()
@@ -46,9 +46,11 @@ export function AccountWallet(): ReactElement {
       <Box mb={4}>
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           <Typography variant="h2">Wallet balance</Typography>
-          <SwarmButton onClick={onDeposit} iconType={Download}>
+          {isDesktop && (
-            Top up wallet
+            <SwarmButton onClick={onDeposit} iconType={Download}>
-          </SwarmButton>
+              Top up wallet
+            </SwarmButton>
+          )}
         </Grid>
       </Box>
       {balance && nodeAddresses ? (
@@ -72,7 +74,7 @@ export function AccountWallet(): ReactElement {
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
           Check transactions on Blockscout
         </SwarmButton>
-        {isBeeDesktop && (
+        {isDesktop && (
           <SwarmButton onClick={onInvite} iconType={Gift}>
             Invite to Swarm...
           </SwarmButton>

src/pages/files/Share.tsx

@@ -8,7 +8,6 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import config from '../../config'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
@@ -78,7 +77,7 @@ export function Share(): ReactElement {
     } catch (e) {} // eslint-disable-line no-empty
 
     if (previewFile) {
-      setPreview(`${config.BEE_API_HOST}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
+      setPreview(`${apiUrl}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
     }
 
     setMetadata(metadata)

src/pages/gift-code/index.tsx

@@ -23,7 +23,7 @@ const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16)
 
 export default function Index(): ReactElement {
   const { giftWallets, addGiftWallet } = useContext(TopUpContext)
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider, desktopUrl } = useContext(SettingsContext)
   const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
@@ -33,13 +33,13 @@ export default function Index(): ReactElement {
     async function mapGiftWallets() {
       const results = []
       for (const giftWallet of giftWallets) {
-        results.push(await ResolvedWallet.make(giftWallet, provider))
+        results.push(await ResolvedWallet.make(giftWallet, rpcProvider))
       }
       setBalances(results)
     }
 
     mapGiftWallets()
-  }, [giftWallets, provider])
+  }, [giftWallets, rpcProvider])
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
@@ -50,7 +50,7 @@ export default function Index(): ReactElement {
     try {
       const wallet = Wallet.createRandom()
       addGiftWallet(wallet)
-      await createGiftWallet(wallet.address)
+      await createGiftWallet(desktopUrl, wallet.address)
       enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
     } catch (error) {
       console.error(error) // eslint-disable-line

src/pages/info/ChequebookInfoCard.tsx

@@ -0,0 +1,48 @@
+import { useContext } from 'react'
+import { useNavigate } from 'react-router'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Card from '../../components/Card'
+import { Context as BeeContext } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export function ChequebookInfoCard() {
+  const { chequebookBalance } = useContext(BeeContext)
+  const navigate = useNavigate()
+
+  if (
+    chequebookBalance?.availableBalance !== undefined &&
+    chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0)
+  ) {
+    return (
+      <Card
+        buttonProps={{
+          iconType: ExchangeFunds,
+          children: 'View chequebook',
+          onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+        }}
+        icon={<ExchangeFunds />}
+        title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
+        subtitle="Current chequebook balance."
+        status="ok"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{
+        iconType: ExchangeFunds,
+        children: 'View chequebook',
+        onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+      }}
+      icon={<ExchangeFunds />}
+      title={
+        chequebookBalance?.availableBalance
+          ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
+          : 'No available balance.'
+      }
+      subtitle="Chequebook not setup."
+      status="error"
+    />
+  )
+}

src/pages/info/NodeInfoCard.tsx

@@ -1,17 +1,29 @@
 import { ReactElement, useContext } from 'react'
-import Search from 'remixicon-react/SearchLineIcon'
 import Globe from 'remixicon-react/GlobalLineIcon'
+import Search from 'remixicon-react/SearchLineIcon'
 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 Card from '../../components/Card'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
 export default function NodeInfoCard(): ReactElement {
   const { status } = useContext(BeeContext)
   const navigate = useNavigate()
 
+  if (status.all === CheckState.STARTING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Starting up..."
+        subtitle="Your Bee node is currently launching."
+        status="loading"
+      />
+    )
+  }
+
   if (status.all === CheckState.ERROR) {
     return (
       <Card

src/pages/info/WalletInfoCard.tsx

@@ -0,0 +1,53 @@
+import { useContext } from 'react'
+import { useNavigate } from 'react-router'
+import Upload from 'remixicon-react/UploadLineIcon'
+import Wallet from 'remixicon-react/Wallet3LineIcon'
+import Card from '../../components/Card'
+import { Context as BeeContext } from '../../providers/Bee'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
+import { ROUTES } from '../../routes'
+
+export function WalletInfoCard() {
+  const { nodeInfo } = useContext(BeeContext)
+  const { balance, error } = useContext(BalanceProvider)
+  const navigate = useNavigate()
+
+  let balanceText = 'Loading...'
+
+  if (error) {
+    balanceText = 'Could not load...'
+    console.error(error) // eslint-disable-line
+  } else if (balance) {
+    balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
+  }
+
+  if (nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode)) {
+    return (
+      <Card
+        buttonProps={{
+          iconType: Wallet,
+          children: 'Manage your wallet',
+          onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
+        }}
+        icon={<Wallet />}
+        title={balanceText}
+        subtitle="Current wallet balance."
+        status="ok"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{
+        iconType: Wallet,
+        children: 'Setup wallet',
+        onClick: () => navigate(ROUTES.TOP_UP),
+      }}
+      icon={<Upload />}
+      title="Your wallet is not setup."
+      subtitle="To share content on Swarm, please setup your wallet."
+      status="error"
+    />
+  )
+}

src/pages/info/index.tsx

@@ -1,110 +1,41 @@
 import { Button } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { useNavigate } from 'react-router'
-import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
-import Upload from 'remixicon-react/UploadLineIcon'
-import Wallet from 'remixicon-react/Wallet3LineIcon'
-import Card from '../../components/Card'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import Map from '../../components/Map'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
 import { useBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
-import { ROUTES } from '../../routes'
 import { chainIdToName } from '../../utils/chain'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop'
+import { ChequebookInfoCard } from './ChequebookInfoCard'
 import NodeInfoCard from './NodeInfoCard'
+import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
   const {
+    debugApiReadiness,
     status,
     latestUserVersion,
     isLatestBeeVersion,
     latestBeeVersionUrl,
     topology,
     nodeInfo,
-    chequebookBalance,
     chainId,
   } = useContext(BeeContext)
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
-  const { balance, error } = useContext(BalanceProvider)
+  const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
-  const { beeDesktopVersion } = useBeeDesktop(isBeeDesktop)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
-  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
-  const navigate = useNavigate()
-
-  let balanceText = 'Loading...'
-
-  if (error) {
-    balanceText = 'Could not load...'
-    console.error(error) // eslint-disable-line
-  } else if (balance) {
-    balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
-  }
 
   return (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
         <NodeInfoCard />
-        <div style={{ width: '8px' }}></div>
+        {debugApiReadiness && (
-        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
-          <Card
-            buttonProps={{
-              iconType: Wallet,
-              children: 'Manage your wallet',
-              onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
-            }}
-            icon={<Wallet />}
-            title={balanceText}
-            subtitle="Current wallet balance."
-            status="ok"
-          />
-        ) : (
-          <Card
-            buttonProps={{
-              iconType: Wallet,
-              children: 'Setup wallet',
-              onClick: () => navigate(ROUTES.TOP_UP),
-            }}
-            icon={<Upload />}
-            title="Your wallet is not setup."
-            subtitle="To share content on Swarm, please setup your wallet."
-            status="error"
-          />
-        )}
-        {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) && (
           <>
-            <div style={{ width: '8px' }} />
+            <div style={{ width: '8px' }}></div>
-            {chequebookBalance?.availableBalance !== undefined &&
+            <WalletInfoCard />
-            chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
+            <div style={{ width: '8px' }}></div>
-              <Card
+            <ChequebookInfoCard />
-                buttonProps={{
-                  iconType: ExchangeFunds,
-                  children: 'View chequebook',
-                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
-                }}
-                icon={<ExchangeFunds />}
-                title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-                subtitle="Current chequebook balance."
-                status="ok"
-              />
-            ) : (
-              <Card
-                buttonProps={{
-                  iconType: ExchangeFunds,
-                  children: 'View chequebook',
-                  onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
-                }}
-                icon={<ExchangeFunds />}
-                title={
-                  chequebookBalance?.availableBalance
-                    ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
-                    : 'No available balance.'
-                }
-                subtitle="Chequebook not setup."
-                status="error"
-              />
-            )}
           </>
         )}
       </div>
@@ -114,7 +45,7 @@ export default function Status(): ReactElement {
       <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
       <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
       <div style={{ height: '16px' }} />
-      {isBeeDesktop && (
+      {isDesktop && (
         <ExpandableListItem
           label="Desktop version"
           value={
@@ -142,7 +73,7 @@ export default function Status(): ReactElement {
               Bee
             </a>
             {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && !isBeeDesktop && (
+            {latestUserVersion && !isDesktop && (
               <Button
                 size="small"
                 variant="outlined"
@@ -158,7 +89,7 @@ export default function Status(): ReactElement {
         }
       />
       <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
-      {chainId && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
+      {chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
     </div>
   )
 }

src/pages/restart/LightModeRestart.tsx

@@ -1,5 +1,6 @@
 import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Waiting } from '../../components/Waiting'
@@ -12,6 +13,7 @@ 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()
+  const { enqueueSnackbar } = useSnackbar()
 
   useEffect(() => {
     localStorage.setItem(STARTED_UPGRADE_AT, startedAt.toFixed())
@@ -23,10 +25,11 @@ export default function LightModeRestart(): ReactElement {
     }
 
     if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       localStorage.removeItem(STARTED_UPGRADE_AT)
       navigate(ROUTES.INFO)
     }
-  }, [startedAt, navigate, nodeInfo, apiHealth])
+  }, [startedAt, navigate, nodeInfo, apiHealth, enqueueSnackbar])
 
   return (
     <Grid container direction="column" justifyContent="center" alignItems="center">

src/pages/settings/index.tsx

@@ -1,10 +1,11 @@
 import CircularProgress from '@material-ui/core/CircularProgress'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { useSnackbar } from 'notistack'
+import { getDesktopConfiguration, restartBeeNode, setJsonRpcInDesktop } from '../../utils/desktop'
 
 export default function SettingsPage(): ReactElement {
   const {
@@ -16,13 +17,39 @@ export default function SettingsPage(): ReactElement {
     cors,
     dataDir,
     ensResolver,
-    providerUrl,
+    rpcProviderUrl,
     isLoading,
-    isBeeDesktop,
+    isDesktop,
+    desktopUrl,
     setAndPersistJsonRpcProvider,
   } = useContext(SettingsContext)
   const { refresh } = useContext(BeeContext)
-  const { enqueueSnackbar } = useSnackbar()
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  async function handleSetRpcUrl(value: string) {
+    try {
+      setAndPersistJsonRpcProvider(value)
+
+      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['swap-endpoint']
+
+      if (shouldUpdateDesktop) {
+        await setJsonRpcInDesktop(desktopUrl, value)
+        const snackKey = enqueueSnackbar('RPC endpoint successfully changed, restarting Bee node...', {
+          variant: 'success',
+        })
+        await restartBeeNode(desktopUrl)
+        closeSnackbar(snackKey)
+        enqueueSnackbar('Bee node restarted', { variant: 'success' })
+      } else {
+        enqueueSnackbar('RPC endpoint successfully changed', { variant: 'success' })
+      }
+
+      await refresh()
+    } catch (e) {
+      console.error(e) //eslint-disable-line
+      enqueueSnackbar(`Failed to change RPC endpoint. ${e}`, { variant: 'error' })
+    }
+  }
 
   if (isLoading) {
     return (
@@ -39,33 +66,23 @@ export default function SettingsPage(): ReactElement {
           label="Bee API"
           value={apiUrl}
           onConfirm={setApiUrl}
-          locked={lockedApiSettings || isBeeDesktop}
+          locked={lockedApiSettings || isDesktop}
         />
         <ExpandableListItemInput
           label="Bee Debug API"
           value={apiDebugUrl}
           onConfirm={setDebugApiUrl}
-          locked={lockedApiSettings || isBeeDesktop}
+          locked={lockedApiSettings || isDesktop}
         />
         <ExpandableListItemInput
           label="Blockchain RPC URL"
-          value={providerUrl}
+          value={rpcProviderUrl}
           helperText="Changing the value will restart your bee node."
           confirmLabel="Save and restart"
-          onConfirm={value => {
+          onConfirm={handleSetRpcUrl}
-            setAndPersistJsonRpcProvider(value)
-              .then(() => {
-                refresh()
-                enqueueSnackbar('Settings changed, restarting bee node...', { variant: 'success' })
-              })
-              .catch(error => {
-                console.log(error) //eslint-disable-line
-                enqueueSnackbar(`Failed to change RPC endpoint. Error: ${error}`, { variant: 'success' })
-              })
-          }}
         />
       </ExpandableList>
-      {isBeeDesktop && (
+      {isDesktop && (
         <ExpandableList label="Desktop Settings" defaultOpen>
           <ExpandableListItemInput label="CORS" value={cors ?? '-'} locked />
           <ExpandableListItemInput label="Data DIR" value={dataDir ?? '-'} locked />

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -11,23 +11,21 @@ import { CheckState, Context } from '../../../providers/Bee'
 const ChequebookDeployFund = (): ReactElement | null => {
   const { status, isLoading, chequebookAddress } = useContext(Context)
   const { checkState, isEnabled } = status.chequebook
+  const { checkState: debugApiCheckState } = status.debugApiConnection
 
-  if (!isEnabled) return null
+  if (!isEnabled || debugApiCheckState === CheckState.ERROR) return null
 
   let text: ReactNode
 
   switch (checkState) {
     case CheckState.OK:
-      text = 'Your chequebook is deployed and funded'
-      break
-    case CheckState.WARNING:
       text = (
         <>
-          Your chequebook is not funded. Please deposit some xBZZ to your chequebook address. You may need to aquire BZZ
+          Your chequebook is deployed. You may deposit some xBZZ to your chequebook to afford more traffic. You can
-          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network through the{' '}
+          acquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network
-          <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
+          through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you
-          xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain network through
+          will also need xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain
-          the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
+          network through the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
           <a href="https://www.gnosischain.com">official Gnosis Chain website</a> for more information.
         </>
       )

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -11,7 +11,7 @@ import { Context as SettingsContext } from '../../../providers/Settings'
 
 export default function NodeConnectionCheck(): ReactElement | null {
   const { status, isLoading } = useContext(Context)
-  const { setDebugApiUrl, apiDebugUrl } = useContext(SettingsContext)
+  const { setDebugApiUrl, apiDebugUrl, isDesktop } = useContext(SettingsContext)
   const { checkState, isEnabled } = status.debugApiConnection
 
   if (!isEnabled) return null
@@ -26,12 +26,12 @@ export default function NodeConnectionCheck(): ReactElement | null {
     >
       <ExpandableListItemNote>
         {checkState === CheckState.OK
-          ? 'The connection to the Bee nodes debug API has been successful'
+          ? 'The connection to the Bee node debug API has been successful'
-          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+          : 'Could not connect to your Bee node debug API.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee Debug API" value={apiDebugUrl} onConfirm={setDebugApiUrl} />
 
-      {checkState === CheckState.ERROR && (
+      {checkState === CheckState.ERROR && !isDesktop && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/DesktopConnectionCheck.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, useContext } from 'react'
+
+import ExpandableList from '../../../components/ExpandableList'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
+import StatusIcon from '../../../components/StatusIcon'
+import { useBeeDesktop } from '../../../hooks/apiHooks'
+import { CheckState } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
+
+export default function DesktopConnectionCheck(): ReactElement | null {
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { reachable } = useBeeDesktop(isDesktop, desktopUrl)
+
+  return (
+    <ExpandableList
+      label={
+        <>
+          <StatusIcon checkState={reachable ? CheckState.OK : CheckState.ERROR} isLoading={false} /> Connection to Swarm
+          Desktop
+        </>
+      }
+    >
+      <ExpandableListItemNote>
+        {reachable
+          ? 'The connection to the Swarm Desktop API has been successful'
+          : 'Could not connect to the Swarm Desktop API'}
+      </ExpandableListItemNote>
+      <ExpandableListItem label="Swarm Desktop API" value={desktopUrl} />
+    </ExpandableList>
+  )
+}

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -10,7 +10,7 @@ import StatusIcon from '../../../components/StatusIcon'
 import { CheckState, Context } from '../../../providers/Bee'
 
 export default function NodeConnectionCheck(): ReactElement | null {
-  const { setApiUrl, apiUrl } = useContext(SettingsContext)
+  const { setApiUrl, apiUrl, isDesktop } = useContext(SettingsContext)
   const { status, isLoading } = useContext(Context)
   const { isEnabled, checkState } = status.apiConnection
 
@@ -26,11 +26,11 @@ export default function NodeConnectionCheck(): ReactElement | null {
     >
       <ExpandableListItemNote>
         {checkState === CheckState.OK
-          ? 'The connection to the Bee nodes API has been successful'
+          ? 'The connection to the Bee node API has been successful'
-          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+          : 'Could not connect to your Bee node API.'}
       </ExpandableListItemNote>
       <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} />
-      {checkState === CheckState.ERROR && (
+      {checkState === CheckState.ERROR && !isDesktop && (
         <ExpandableList level={1} label="Troubleshoot">
           <ExpandableListItem
             label={

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -8,8 +8,9 @@ import { CheckState, Context } from '../../../providers/Bee'
 export default function PeerConnection(): ReactElement | null {
   const { status, isLoading, topology } = useContext(Context)
   const { isEnabled, checkState } = status.topology
+  const { checkState: debugApiCheckState } = status.debugApiConnection
 
-  if (!isEnabled) return null
+  if (!isEnabled || debugApiCheckState === CheckState.ERROR) return null
 
   let text: ReactNode
   switch (checkState) {

src/pages/status/index.tsx

@@ -1,6 +1,8 @@
-import type { ReactElement } from 'react'
+import { Context } from '../../providers/Settings'
+import { ReactElement, useContext } from 'react'
 
 import DebugConnectionCheck from './SetupSteps/DebugConnectionCheck'
+import DesktopConnection from './SetupSteps/DesktopConnectionCheck'
 import NodeConnectionCheck from './SetupSteps/NodeConnectionCheck'
 import VersionCheck from './SetupSteps/VersionCheck'
 import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
@@ -8,13 +10,16 @@ import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
 import PeerConnection from './SetupSteps/PeerConnection'
 
 export default function NodeSetupWorkflow(): ReactElement {
+  const { isDesktop } = useContext(Context)
+
   return (
     <div>
+      {isDesktop && <DesktopConnection />}
+      <NodeConnectionCheck />
       <DebugConnectionCheck />
-      <VersionCheck />
+      {!isDesktop && <VersionCheck />}
       <EthereumConnectionCheck />
       <ChequebookDeployFund />
-      <NodeConnectionCheck />
       <PeerConnection />
     </div>
   )

src/pages/top-up/GiftCardFund.tsx

@@ -1,9 +1,10 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import Check from 'remixicon-react/CheckLineIcon'
-import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
 import { useNavigate, useParams } from 'react-router'
+import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
+import Check from 'remixicon-react/CheckLineIcon'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -18,11 +19,10 @@ import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
-import { BeeModes } from '@ethersphere/bee-js'
 
 export function GiftCardFund(): ReactElement {
   const { nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const { isBeeDesktop, provider, providerUrl } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl, rpcProvider, rpcProviderUrl } = useContext(SettingsContext)
   const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
@@ -34,25 +34,24 @@ export function GiftCardFund(): ReactElement {
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (!privateKeyString || !provider) {
+    if (!privateKeyString || !rpcProvider) {
       return
     }
 
-    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
+    ResolvedWallet.make(privateKeyString, rpcProvider).then(setWallet)
-  }, [privateKeyString, provider])
+  }, [privateKeyString, rpcProvider])
 
   if (!wallet || !balance) {
     return <Loading />
   }
 
-  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+  const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
 
   async function restart() {
     try {
       await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
-      await restartBeeNode()
+      await restartBeeNode(desktopUrl)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
       console.error(error) // eslint-disable-line
@@ -61,14 +60,14 @@ export function GiftCardFund(): ReactElement {
   }
 
   async function onFund() {
-    if (!wallet || !nodeAddresses || !providerUrl) {
+    if (!wallet || !nodeAddresses || !rpcProviderUrl) {
       return
     }
 
     setLoading(true)
 
     try {
-      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
+      await wallet.transfer(nodeAddresses.ethereum, rpcProviderUrl)
       enqueueSnackbar('Successfully funded node', { variant: 'success' })
 
       if (canUpgradeToLightNode) await restart()

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -16,7 +16,7 @@ import { ROUTES } from '../../routes'
 import { Rpc } from '../../utils/rpc'
 
 export function GiftCardTopUpIndex(): ReactElement {
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const [giftCode, setGiftCode] = useState('')
 
@@ -24,13 +24,13 @@ export function GiftCardTopUpIndex(): ReactElement {
   const navigate = useNavigate()
 
   async function onProceed() {
-    if (!provider) return
+    if (!rpcProvider) return
 
     setLoading(true)
     try {
-      const wallet = new Wallet(giftCode, provider)
+      const wallet = new Wallet(giftCode, rpcProvider)
-      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, rpcProvider))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
+      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, rpcProvider))
 
       if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
         throw Error('Gift wallet does not have enough funds')

src/pages/top-up/Swap.tsx

@@ -1,6 +1,5 @@
 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, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -14,19 +13,29 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
-import { BzzToken } from '../../models/BzzToken'
+import { BzzToken, BZZ_DECIMAL_PLACES } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
-import { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
+import {
+  getBzzPriceAsDai,
+  getDesktopConfiguration,
+  performSwap,
+  restartBeeNode,
+  upgradeToLightNode,
+} from '../../utils/desktop'
+import { Rpc } from '../../utils/rpc'
+import { isSwapError, SwapError, wrapWithSwapError } from '../../utils/SwapError'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'
 
 const MINIMUM_XDAI = '0.1'
 const MINIMUM_XBZZ = '0.1'
 
+const GENERIC_SWAP_FAILED_ERROR_MESSAGE = 'Failed to swap. The full error is printed to the console.'
+
 interface Props {
   header: string
 }
@@ -35,54 +44,90 @@ 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 [price, setPrice] = useState(DaiToken.fromDecimal('0.6'))
+  const [error, setError] = useState<string | null>(null)
+  const [daiToSwap, setDaiToSwap] = useState<DaiToken | null>(null)
+  const [bzzAfterSwap, setBzzAfterSwap] = useState<BzzToken | null>(null)
+  const [daiAfterSwap, setDaiAfterSwap] = useState<DaiToken | null>(null)
 
-  const { providerUrl, isBeeDesktop } = useContext(SettingsContext)
+  const { rpcProviderUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
   const { nodeAddresses, nodeInfo } = useContext(BeeContext)
   const { balance } = useContext(BalanceProvider)
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
 
+  // Fetch current price of BZZ
   useEffect(() => {
     // eslint-disable-next-line no-console
-    getBzzPriceAsDai().then(setPrice).catch(console.error)
+    getBzzPriceAsDai(desktopUrl).then(setPrice).catch(console.error)
-  }, [])
+  }, [desktopUrl])
 
-  if (!balance || !nodeAddresses) {
+  // Set the initial xDAI to swap
+  useEffect(() => {
+    if (!balance || userInputSwap) {
+      return
+    }
+
+    const minimumOptimalValue = DaiToken.fromDecimal('1').plusBaseUnits(MINIMUM_XDAI).toDecimal
+
+    if (balance.dai.toDecimal.isGreaterThanOrEqualTo(minimumOptimalValue)) {
+      // Balance has at least 1 + MINIMUM_XDAI xDai
+      setDaiToSwap(balance.dai.minusBaseUnits('1'))
+    } else {
+      // Balance is low, halve the amount
+      setDaiToSwap(new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2)))
+    }
+  }, [balance, userInputSwap])
+
+  // Set the xDAI to swap based on user input
+  useEffect(() => {
+    setError(null)
+    try {
+      if (userInputSwap) {
+        const dai = DaiToken.fromDecimal(userInputSwap)
+        setDaiToSwap(dai)
+
+        if (dai.toDecimal.lte(0)) {
+          setError('xDAI to swap must be a positive number')
+        }
+      }
+    } catch {
+      setError('Cannot parse xDAI amount')
+    }
+  }, [userInputSwap])
+
+  // Calculate the amount of tokens after swap
+  useEffect(() => {
+    if (!balance || !daiToSwap || error) {
+      return
+    }
+    const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
+    setDaiAfterSwap(daiAfterSwap)
+    const tokensConverted = BzzToken.fromDecimal(
+      daiToSwap.toBigNumber.dividedBy(price.toBigNumber).decimalPlaces(BZZ_DECIMAL_PLACES),
+    )
+    const bzzAfterSwap = new BzzToken(tokensConverted.toBigNumber.plus(balance.bzz.toBigNumber))
+    setBzzAfterSwap(bzzAfterSwap)
+
+    if (daiAfterSwap.toDecimal.lt(MINIMUM_XDAI)) {
+      setError(`Must keep at least ${MINIMUM_XDAI} xDAI after swap!`)
+    } else if (bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)) {
+      setError(`Must have at least ${MINIMUM_XBZZ} xBZZ after swap!`)
+    }
+  }, [error, balance, daiToSwap, price])
+
+  if (!balance || !nodeAddresses || !daiToSwap || !bzzAfterSwap || !daiAfterSwap) {
     return <Loading />
   }
 
-  const optimalSwap = balance.dai.minusBaseUnits('1')
+  const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
-  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.dividedBy(100).dividedToIntegerBy(price.toDecimal))
-
-  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
 
   async function restart() {
     try {
       await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
+      await restartBeeNode(desktopUrl)
-      await restartBeeNode()
+
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
       console.error(error) // eslint-disable-line
@@ -90,20 +135,71 @@ export function Swap({ header }: Props): ReactElement {
     }
   }
 
+  async function sendSwapRequest(daiToSwap: DaiToken) {
+    try {
+      await performSwap(desktopUrl, daiToSwap.toString)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      throw error
+    }
+  }
+
+  async function performSwapWithChecks(daiToSwap: DaiToken) {
+    if (!localStorage.getItem('apiKey')) {
+      throw new SwapError('API key is not set, reopen dashboard through Swarm Desktop')
+    }
+
+    let desktopConfiguration = await wrapWithSwapError(
+      getDesktopConfiguration(desktopUrl),
+      'Unable to reach Desktop API, Swarm Desktop may not be running',
+    )
+
+    if (canUpgradeToLightNode) {
+      desktopConfiguration = await wrapWithSwapError(
+        upgradeToLightNode(desktopUrl, rpcProviderUrl),
+        'Failed to update the configuration file with the new swap values using the Desktop API',
+      )
+    }
+
+    if (!desktopConfiguration['swap-endpoint']) {
+      throw new SwapError('Swap endpoint is not configured in Swarm Desktop')
+    }
+    await wrapWithSwapError(
+      Rpc.getNetworkChainId(desktopConfiguration['swap-endpoint']),
+      `Swap endpoint not reachable at ${desktopConfiguration['swap-endpoint']}`,
+    )
+    await wrapWithSwapError(sendSwapRequest(daiToSwap), GENERIC_SWAP_FAILED_ERROR_MESSAGE)
+  }
+
   async function onSwap() {
-    if (hasSwapped) {
+    if (hasSwapped || !daiToSwap) {
       return
     }
     setLoading(true)
     setSwapped(true)
+
     try {
-      await performSwap(daiToSwap.toString)
+      await performSwapWithChecks(daiToSwap)
-      enqueueSnackbar('Successfully swapped', { variant: 'success' })
+      const message = canUpgradeToLightNode
+        ? 'Successfully swapped. Beginning light node upgrade...'
+        : 'Successfully swapped. Balances will refresh soon. You may now navigate away.'
+      enqueueSnackbar(message, { variant: 'success' })
 
       if (canUpgradeToLightNode) await restart()
     } catch (error) {
-      console.error(error) // eslint-disable-line
+      if (isSwapError(error)) {
-      enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
+        // we have a custom and user friendly error message
+        enqueueSnackbar(error.snackbarMessage, { variant: 'error' })
+
+        if (error.originalError) {
+          console.error(error.originalError) // eslint-disable-line
+        }
+      } else {
+        // we have an unexpected error
+        enqueueSnackbar(`${GENERIC_SWAP_FAILED_ERROR_MESSAGE} ${error}`, { variant: 'error' })
+        console.error(error) // eslint-disable-line
+      }
     } finally {
       balance?.refresh()
       setLoading(false)
@@ -134,18 +230,13 @@ export function Swap({ header }: Props): ReactElement {
       </Box>
       <Box mb={4}>
         <SwarmTextInput
-          label="Amount to swap"
+          label="xDAI to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          defaultValue={daiToSwap.toSignificantDigits(4)}
-          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          placeholder={daiToSwap.toSignificantDigits(4)}
           name="x"
           onChange={event => setUserInputSwap(event.target.value)}
         />
-        {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? (
+        {error && <Typography>{error}</Typography>}
-          <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" />
@@ -169,9 +260,7 @@ export function Swap({ header }: Props): ReactElement {
         <SwarmButton
           iconType={Check}
           onClick={onSwap}
-          disabled={
+          disabled={hasSwapped || loading || error !== null}
-            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
-          }
           loading={loading}
         >
           {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}

src/pages/top-up/index.tsx

@@ -1,23 +1,23 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
+import { useNavigate } from 'react-router'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
 import Check from 'remixicon-react/CheckLineIcon'
 import Download from 'remixicon-react/DownloadLineIcon'
-import BankCard from 'remixicon-react/BankCard2LineIcon'
-import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
 import Gift from 'remixicon-react/GiftLineIcon'
-import { useNavigate } from 'react-router'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { ROUTES } from '../../routes'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as BalanceProvider } from '../../providers/WalletBalance'
-import { BeeModes } from '@ethersphere/bee-js'
+import { ROUTES } from '../../routes'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
-import { Loading } from '../../components/Loading'
-import { useSnackbar } from 'notistack'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -39,15 +39,15 @@ const MINIMUM_XBZZ = '0.1'
 export default function TopUp(): ReactElement {
   const navigate = useNavigate()
   const styles = useStyles()
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { nodeInfo, status } = useContext(BeeContext)
   const { balance } = useContext(BalanceProvider)
-  const { providerUrl } = useContext(SettingsContext)
+  const { rpcProviderUrl } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
 
   const canUpgradeToLightNode =
-    isBeeDesktop &&
+    isDesktop &&
     nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
     balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
     balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
@@ -55,9 +55,8 @@ export default function TopUp(): ReactElement {
   async function restart() {
     setLoading(true)
     try {
-      await upgradeToLightNode(providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
-      await restartBeeNode()
+      await restartBeeNode(desktopUrl)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
       console.error(error) // eslint-disable-line

src/providers/Bee.tsx

@@ -25,6 +25,7 @@ export enum CheckState {
   OK = 'OK',
   WARNING = 'Warning',
   ERROR = 'Error',
+  STARTING = 'Starting',
 }
 
 interface StatusItem {
@@ -52,6 +53,7 @@ interface ContextInterface {
   error: Error | null
   apiHealth: boolean
   debugApiHealth: Health | null
+  debugApiReadiness: boolean
   nodeAddresses: NodeAddresses | null
   nodeInfo: NodeInfo | null
   topology: Topology | null
@@ -89,6 +91,7 @@ const initialValues: ContextInterface = {
   error: null,
   apiHealth: false,
   debugApiHealth: null,
+  debugApiReadiness: false,
   nodeAddresses: null,
   nodeInfo: null,
   topology: null,
@@ -117,25 +120,26 @@ interface Props {
 
 function getStatus(
   debugApiHealth: Health | null,
-  nodeAddresses: NodeAddresses | null,
+  debugApiReadiness: boolean,
   nodeInfo: NodeInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
   chequebookAddress: ChequebookAddressResponse | null,
   chequebookBalance: ChequebookBalance | null,
   error: Error | null,
+  isDesktop: boolean,
 ): Status {
   const status: Status = { ...initialValues.status }
 
   // Version check
-  status.version.isEnabled = true
+  status.version.isEnabled = !isDesktop
   status.version.checkState =
     debugApiHealth &&
     semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
       includePrerelease: true,
     })
       ? CheckState.OK
-      : CheckState.ERROR
+      : CheckState.WARNING
 
   // Blockchain connection check
   status.blockchainConnection.isEnabled = true
@@ -159,37 +163,46 @@ function getStatus(
   if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
     status.chequebook.isEnabled = true
 
-    if (
+    if (chequebookAddress?.chequebookAddress && chequebookBalance !== null) {
-      chequebookAddress?.chequebookAddress &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)
-    ) {
       status.chequebook.checkState = CheckState.OK
-    } else if (chequebookAddress?.chequebookAddress) status.chequebook.checkState = CheckState.WARNING
+    } else status.chequebook.checkState = CheckState.OK
-    else status.chequebook.checkState = CheckState.OK
   }
 
-  // Determine overall status
+  status.all = determineOverallStatus(debugApiHealth, debugApiReadiness, status)
-  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
+
-    status.all = CheckState.ERROR
+  return status
+}
+
+function determineOverallStatus(debugApiHealth: Health | null, debugApiReadiness: boolean, status: Status): CheckState {
+  if (debugApiHealth?.status === 'ok' && !debugApiReadiness) {
+    return CheckState.STARTING
+  } else if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
+    return CheckState.ERROR
   } else if (
     Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
   ) {
-    status.all = CheckState.WARNING
+    return CheckState.WARNING
   } else {
-    status.all = CheckState.OK
+    return CheckState.OK
   }
-
-  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 {
+interface InitialSettings {
+  isDesktop?: boolean
+}
+
+interface Props extends InitialSettings {
+  children: ReactChild
+}
+
+export function Provider({ children, isDesktop }: Props): ReactElement {
   const { beeApi, beeDebugApi } = useContext(SettingsContext)
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
+  const [debugApiReadiness, setDebugApiReadiness] = useState(false)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
   const [nodeInfo, setNodeInfo] = useState<NodeInfo | null>(null)
   const [topology, setNodeTopology] = useState<Topology | null>(null)
@@ -299,6 +312,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setDebugApiHealth)
           .catch(() => setDebugApiHealth(null)),
 
+        // Debug API readiness
+        beeDebugApi
+          .getReadiness({ timeout: TIMEOUT })
+          .then(setDebugApiReadiness)
+          .catch(() => setDebugApiReadiness(false)),
+
         // Node Addresses
         beeDebugApi
           .getNodeAddresses({ timeout: TIMEOUT })
@@ -381,13 +400,14 @@ export function Provider({ children }: Props): ReactElement {
 
   const status = getStatus(
     debugApiHealth,
-    nodeAddresses,
+    debugApiReadiness,
     nodeInfo,
     apiHealth,
     topology,
     chequebookAddress,
     chequebookBalance,
     error,
+    Boolean(isDesktop),
   )
 
   useEffect(() => {
@@ -426,6 +446,7 @@ export function Provider({ children }: Props): ReactElement {
         error,
         apiHealth,
         debugApiHealth,
+        debugApiReadiness,
         nodeAddresses,
         nodeInfo,
         topology,

src/providers/Settings.tsx

@@ -1,16 +1,13 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
 import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react'
-import { config as appConfig } from '../config'
 import { useGetBeeConfig } from '../hooks/apiHooks'
-import { restartBeeNode, setJsonRpcInDesktop } from '../utils/desktop'
+import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
 
 const LocalStorageKeys = {
   providerUrl: 'json-rpc-provider',
 }
 
-const providerUrl = localStorage.getItem('json-rpc-provider') || appConfig.DEFAULT_RPC_URL
-
 interface ContextInterface {
   apiUrl: string
   apiDebugUrl: string
@@ -18,35 +15,37 @@ interface ContextInterface {
   beeDebugApi: BeeDebug | null
   lockedApiSettings: boolean
   desktopApiKey: string
-  providerUrl: string
+  isDesktop: boolean
-  provider: providers.JsonRpcProvider
+  desktopUrl: string
+  rpcProviderUrl: string
+  rpcProvider: providers.JsonRpcProvider
   cors: string | null
   dataDir: string | null
   ensResolver: string | null
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
-  setAndPersistJsonRpcProvider: (url: string) => Promise<void>
+  setAndPersistJsonRpcProvider: (url: string) => void
-  isBeeDesktop: boolean
   isLoading: boolean
   error: Error | null
 }
 
 const initialValues: ContextInterface = {
-  apiUrl: appConfig.BEE_API_HOST,
-  apiDebugUrl: appConfig.BEE_DEBUG_API_HOST,
   beeApi: null,
   beeDebugApi: null,
+  apiUrl: DEFAULT_BEE_API_HOST,
+  apiDebugUrl: DEFAULT_BEE_DEBUG_API_HOST,
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
+  isDesktop: false,
   desktopApiKey: '',
+  desktopUrl: window.location.origin,
   setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
-  providerUrl,
+  rpcProviderUrl: '',
-  provider: new providers.JsonRpcProvider(providerUrl),
+  rpcProvider: new providers.JsonRpcProvider(''),
   cors: null,
   dataDir: null,
   ensResolver: null,
-  isBeeDesktop: false,
   isLoading: true,
   error: null,
 }
@@ -54,57 +53,43 @@ const initialValues: ContextInterface = {
 export const Context = createContext<ContextInterface>(initialValues)
 export const Consumer = Context.Consumer
 
-interface Props {
+interface InitialSettings {
-  children: ReactNode
   beeApiUrl?: string
   beeDebugApiUrl?: string
   lockedApiSettings?: boolean
-  isBeeDesktop?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
+  defaultRpcUrl?: string
 }
 
-export function Provider({
+interface Props extends InitialSettings {
-  children,
+  children: ReactNode
-  beeApiUrl,
+}
-  beeDebugApiUrl,
+
-  lockedApiSettings: extLockedApiSettings,
+export function Provider({ children, ...propsSettings }: Props): ReactElement {
-  isBeeDesktop: extIsBeeDesktop,
+  const desktopUrl = propsSettings.desktopUrl ?? initialValues.desktopUrl
-}: Props): ReactElement {
+  const isDesktop = Boolean(propsSettings.isDesktop)
+  const propsProviderUrl =
+    localStorage.getItem(LocalStorageKeys.providerUrl) || propsSettings.defaultRpcUrl || DEFAULT_RPC_URL
+
   const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
-  const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
+  const [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
-  const [provider, setProvider] = useState(initialValues.provider)
+  const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
-  const { config, isLoading, error } = useGetBeeConfig()
+  const { config, isLoading, error } = useGetBeeConfig(desktopUrl)
 
-  const isBeeDesktop = Boolean(extIsBeeDesktop ?? appConfig.BEE_DESKTOP_ENABLED)
+  const url = makeHttpUrl(
-
+    config?.['api-addr'] ?? sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? apiUrl,
-  async function setAndPersistJsonRpcProvider(providerUrl: string) {
+  )
-    try {
+  const debugUrl = makeHttpUrl(
-      localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+    config?.['debug-api-addr'] ??
-      setProviderUrl(providerUrl)
+      sessionStorage.getItem('debug_api_host') ??
-      setProvider(new providers.JsonRpcProvider(providerUrl))
+      propsSettings.beeDebugApiUrl ??
-
+      apiDebugUrl,
-      if (isBeeDesktop) {
+  )
-        await setJsonRpcInDesktop(providerUrl)
-        await restartBeeNode()
-      }
-    } catch (error) {
-      console.error(error) // eslint-disable-line
-    }
-  }
-
-  function makeHttpUrl(string: string): string {
-    if (!string.startsWith('http')) {
-      return `http://${string}`
-    }
-
-    return string
-  }
-
-  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
-  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl)
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
@@ -144,15 +129,16 @@ export function Provider({
         beeDebugApi,
         setApiUrl,
         setDebugApiUrl,
-        lockedApiSettings: Boolean(extLockedApiSettings),
+        lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
         desktopApiKey,
-        provider,
+        isDesktop,
-        providerUrl,
+        desktopUrl,
+        rpcProvider,
+        rpcProviderUrl,
         cors: config?.['cors-allowed-origins'] ?? null,
         dataDir: config?.['data-dir'] ?? null,
         ensResolver: config?.['resolver-options'] ?? null,
-        setAndPersistJsonRpcProvider,
+        setAndPersistJsonRpcProvider: setAndPersistJsonRpcProviderClosure(setRpcProviderUrl, setRpcProvider),
-        isBeeDesktop,
         isLoading,
         error,
       }}
@@ -161,3 +147,22 @@ export function Provider({
     </Context.Provider>
   )
 }
+
+function makeHttpUrl(string: string): string {
+  if (!string.startsWith('http')) {
+    return `http://${string}`
+  }
+
+  return string
+}
+
+function setAndPersistJsonRpcProviderClosure(
+  setProviderUrl: (url: string) => void,
+  setProvider: (prov: providers.JsonRpcProvider) => void,
+) {
+  return (providerUrl: string) => {
+    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+    setProviderUrl(providerUrl)
+    setProvider(new providers.JsonRpcProvider(providerUrl))
+  }
+}

src/providers/TopUp.tsx

@@ -27,17 +27,17 @@ interface Props {
 
 export function Provider({ children }: Props): ReactElement {
   const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider } = useContext(SettingsContext)
 
   useEffect(() => {
-    if (provider === null) return
+    if (rpcProvider === null) return
 
     const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
 
     if (existingGiftWallets) {
-      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
+      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, rpcProvider)))
     }
-  }, [provider])
+  }, [rpcProvider])
 
   function addGiftWallet(wallet: Wallet) {
     const newArray = [...giftWallets, wallet]

src/providers/WalletBalance.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider } = useContext(SettingsContext)
   const { nodeAddresses } = useContext(BeeContext)
   const [balance, setBalance] = useState<WalletAddress | null>(initialValues.balance)
   const [error, setError] = useState<Error | null>(initialValues.error)
@@ -40,12 +40,12 @@ export function Provider({ children }: Props): ReactElement {
   const [frequency, setFrequency] = useState<number | null>(null)
 
   useEffect(() => {
-    if (nodeAddresses?.ethereum && provider) {
+    if (nodeAddresses?.ethereum && rpcProvider) {
-      WalletAddress.make(nodeAddresses.ethereum, provider).then(setBalance)
+      WalletAddress.make(nodeAddresses.ethereum, rpcProvider).then(setBalance)
     } else {
       setBalance(null)
     }
-  }, [nodeAddresses, provider])
+  }, [nodeAddresses, rpcProvider])
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing

src/routes.tsx

@@ -61,7 +61,7 @@ export const ACCOUNT_TABS = [
 ]
 
 const BaseRouter = (): ReactElement => {
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop } = useContext(SettingsContext)
 
   return (
     <Routes>
@@ -88,7 +88,7 @@ const BaseRouter = (): ReactElement => {
       <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_VIEW} element={<FeedSubpage />} />
-      {isBeeDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
+      {isDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
     </Routes>
   )
 }

src/utils/AuthError.ts

@@ -0,0 +1,10 @@
+export class AuthError extends Error {
+  constructor() {
+    super('Bad API key')
+    this.name = 'AuthError'
+  }
+}
+
+export function isAuthError(error: unknown): error is AuthError {
+  return error instanceof Error && error.name === 'AuthError'
+}

src/utils/SwapError.ts

@@ -0,0 +1,26 @@
+import { isAuthError } from './AuthError'
+
+export class SwapError extends Error {
+  snackbarMessage: string
+  originalError?: Error
+
+  constructor(snackbarMessage: string, error?: Error) {
+    super(error?.message || snackbarMessage)
+    this.name = 'SwapError'
+    this.originalError = error
+    this.snackbarMessage = snackbarMessage
+  }
+}
+
+export function isSwapError(error: unknown): error is SwapError {
+  return error instanceof Error && error.name === 'SwapError'
+}
+
+export function wrapWithSwapError<T>(promise: Promise<T>, snackbarMessage: string): Promise<T> {
+  return promise.catch((error: Error) => {
+    if (isAuthError(error)) {
+      throw new SwapError('Bad API key, reopen dashboard through Swarm Desktop', error)
+    }
+    throw new SwapError(snackbarMessage, error)
+  })
+}

src/utils/desktop.ts

@@ -1,81 +1,66 @@
 import axios from 'axios'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'
 import { DaiToken } from '../models/DaiToken'
 import { Token } from '../models/Token'
-import { getJson, postJson, sendRequest } from './net'
+import { getJson, postJson } from './net'
 
-interface DesktopStatus {
+export interface BeeConfig {
-  status: 0 | 1 | 2
+  'api-addr': string
-  address: string | null
+  'debug-api-addr': string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  'debug-api-enable': boolean
-  config: Record<string, any>
+  password: string
+  'swap-enable': boolean
+  'swap-initial-deposit': bigint
+  mainnet: boolean
+  'full-node': boolean
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  'swap-endpoint'?: string
 }
 
-export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
+  const response = await axios.get(`${desktopUrl}/price`)
 
-export async function getDesktopStatus(): Promise<DesktopStatus> {
+  return DaiToken.fromDecimal(response.data)
-  const response = await getJson(`${getDesktopHost()}/status`)
-
-  return response as DesktopStatus
 }
 
-export async function getBzzPriceAsDai(): Promise<Token> {
+export function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<BeeConfig> {
-  const response = await axios.get(`${getDesktopHost()}/price`)
+  return updateDesktopConfiguration(desktopUrl, {
-
-  return DaiToken.fromDecimal(response.data, 18)
-}
-
-export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
-  await updateDesktopConfiguration({
-    'chain-enable': true,
     'swap-enable': true,
     'swap-endpoint': rpcProvider,
   })
 }
 
-export async function setJsonRpcInDesktop(value: string): Promise<void> {
+export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Promise<void> {
-  await updateDesktopConfiguration({
+  await updateDesktopConfiguration(desktopUrl, {
     'swap-endpoint': value,
   })
 }
 
-async function updateDesktopConfiguration(values: Record<string, unknown>): Promise<void> {
+export function getDesktopConfiguration(desktopUrl: string): Promise<BeeConfig> {
-  await postJson(`${getDesktopHost()}/config`, values)
+  return getJson(`${desktopUrl}/config`)
 }
 
-export async function restartBeeNode(): Promise<void> {
+function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<BeeConfig> {
-  await postJson(`${getDesktopHost()}/restart`)
+  return postJson(`${desktopUrl}/config`, values)
 }
 
-export async function createGiftWallet(address: string): Promise<void> {
+export async function restartBeeNode(desktopUrl: string): Promise<void> {
-  await postJson(`${getDesktopHost()}/gift-wallet/${address}`)
+  await postJson(`${desktopUrl}/restart`)
 }
 
-export async function performSwap(daiAmount: string): Promise<void> {
+export async function createGiftWallet(desktopUrl: string, address: string): Promise<void> {
-  await postJson(`${getDesktopHost()}/swap`, { dai: daiAmount })
+  await postJson(`${desktopUrl}/gift-wallet/${address}`)
 }
 
-export async function getBeeDesktopLogs(): Promise<string> {
+export async function performSwap(desktopUrl: string, daiAmount: string): Promise<void> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee-desktop`, 'GET')
+  await postJson(`${desktopUrl}/swap`, { dai: daiAmount })
-
-  return response as unknown as string
-}
-
-export async function getBeeLogs(): Promise<string> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee`, 'GET')
-
-  return response as unknown as string
 }
 
 export async function getLatestBeeDesktopVersion(): Promise<string> {
-  const response = await (await fetch('https://api.github.com/repos/ethersphere/bee-desktop/releases/latest')).json()
+  const response = await (await fetch(BEE_DESKTOP_LATEST_RELEASE_PAGE_API)).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
-  }
-
-  return `http://${window.location.host}`
-}

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
+import { BatchId, BeeDebug, BeeResponseError, PostageBatch } from '@ethersphere/bee-js'
 import { decodeCid } from '@ethersphere/swarm-cid'
 import { BigNumber } from 'bignumber.js'
 import { BZZ_LINK_DOMAIN } from '../constants'
@@ -229,7 +229,7 @@ export function shortenText(text: string, length = 20, separator = '[…]'): str
 }
 
 const DEFAULT_POLLING_FREQUENCY = 1_000
-const DEFAULT_STAMP_USABLE_TIMEOUT = 240_000
+const DEFAULT_STAMP_USABLE_TIMEOUT = 5 * 60_000
 
 interface Options {
   pollingFrequency?: number
@@ -254,9 +254,17 @@ async function waitForStamp(
   const pollingFrequency = options?.pollingFrequency || DEFAULT_POLLING_FREQUENCY
 
   for (let i = 0; i < timeout; i += pollingFrequency) {
-    const stamp = await beeDebug.getPostageBatch(batchId)
+    try {
+      const stamp = await beeDebug.getPostageBatch(batchId)
+
+      if (stamp[field]) return stamp
+    } catch (e) {
+      // TODO: Workaround for https://github.com/ethersphere/bee/issues/3300
+      if ((e as BeeResponseError).message !== 'Bad Request: cannot get batch') {
+        throw e
+      }
+    }
 
-    if (stamp[field]) return stamp
     await sleepMs(pollingFrequency)
   }
 

src/utils/net.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import axios from 'axios'
+import { AuthError } from './AuthError'
 
 export function getJson<T extends Record<string, any>>(url: string): Promise<T> {
   return sendRequest(url, 'GET') as Promise<T>
 }
 
-export function postJson<T extends Record<string, any>>(url: string, data?: T): Promise<T> {
+export function postJson<T extends Record<string, any>>(url: string, data?: Record<string, any>): Promise<T> {
   return sendRequest(url, 'POST', data) as Promise<T>
 }
 
@@ -27,6 +28,15 @@ export async function sendRequest(
     method,
     headers,
     data,
+  }).catch(error => {
+    if (error?.response?.status === 401) {
+      throw new AuthError()
+    }
+
+    if (error?.response?.data) {
+      throw Error(`Request ${method} ${url} failed: ${JSON.stringify(error.response.data)}`)
+    }
+    throw error
   })
 
   return response.data

src/utils/rpc.ts

@@ -2,6 +2,16 @@ import { debounce } from '@material-ui/core'
 import { Contract, providers, Wallet, BigNumber as BN } from 'ethers'
 import { bzzABI, BZZ_TOKEN_ADDRESS } from './bzz-abi'
 
+const NETWORK_ID = 100
+
+async function getNetworkChainId(url: string): Promise<number> {
+  const provider = new providers.JsonRpcProvider(url, NETWORK_ID)
+  await provider.ready
+  const network = await provider.getNetwork()
+
+  return network.chainId
+}
+
 async function eth_getBalance(address: string, provider: providers.JsonRpcProvider): Promise<string> {
   if (!address.startsWith('0x')) {
     address = `0x${address}`
@@ -78,7 +88,7 @@ export async function sendBzzTransaction(
 }
 
 async function makeReadySigner(privateKey: string, jsonRpcProvider: string) {
-  const provider = new providers.JsonRpcProvider(jsonRpcProvider, 100)
+  const provider = new providers.JsonRpcProvider(jsonRpcProvider, NETWORK_ID)
   await provider.ready
   const signer = new Wallet(privateKey, provider)
 
@@ -86,6 +96,7 @@ async function makeReadySigner(privateKey: string, jsonRpcProvider: string) {
 }
 
 export const Rpc = {
+  getNetworkChainId,
   sendNativeTransaction,
   sendBzzTransaction,
   _eth_getBalance: eth_getBalance,