chore(master): release 0.22.0 (#604 )

feat: add node connecting status (#603 )
chore(master): release 0.21.1 (#600 )
2023-01-19 12:17:25 +01:00 · 2023-01-19 12:05:24 +01:00 · 2022-12-21 14:49:34 +01:00 · 2022-12-21 14:36:24 +01:00 · 2022-12-02 12:39:02 +01:00 · 2022-12-01 12:36:15 +01:00
46 changed files with 1451 additions and 365 deletions
@@ -1,7 +1 @@
-PORT=3001
-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
+PORT=3002
@@ -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
@@ -61,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
@@ -71,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 }}
@@ -1,5 +1,55 @@
 # Changelog

+## [0.22.0](https://github.com/ethersphere/bee-dashboard/compare/v0.21.1...v0.22.0) (2023-01-19)
+
+
+### Features
+
+* add node connecting status ([#603](https://github.com/ethersphere/bee-dashboard/issues/603)) ([90f9f91](https://github.com/ethersphere/bee-dashboard/commit/90f9f91ddbefb47b40c7e567125972b800d81972))
+
+## [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)


@@ -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).
@@ -101,15 +101,16 @@ 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_API_URL` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
- - `REACT_APP_BEE_DEBUG_API_URL` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+ - `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
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.20.0",
+  "version": "0.22.0",
  "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.8.2",
+    "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"
  }
 }
@@ -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,6 +19,7 @@ import { theme } from './theme'
 interface Props {
  beeApiUrl?: string
  beeDebugApiUrl?: string
+  defaultRpcUrl?: string
  lockedApiSettings?: boolean
  isDesktop?: boolean
  desktopUrl?: string
@@ -28,6 +29,7 @@ interface Props {
 const App = ({
  beeApiUrl,
  beeDebugApiUrl,
+  defaultRpcUrl,
  lockedApiSettings,
  isDesktop,
  desktopUrl,
@@ -39,12 +41,13 @@ const App = ({
        <SettingsProvider
          beeApiUrl={beeApiUrl}
          beeDebugApiUrl={beeDebugApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
          lockedApiSettings={lockedApiSettings}
          isDesktop={isDesktop}
          desktopUrl={desktopUrl}
        >
          <TopUpProvider>
-            <BeeProvider>
+            <BeeProvider isDesktop={isDesktop}>
              <BalanceProvider>
                <StampsProvider>
                  <FileProvider>
@@ -2,6 +2,8 @@ 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 Connecting from 'remixicon-react/LinksLineIcon'
+import RefreshLine from 'remixicon-react/RefreshLineIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'

 interface Props {
@@ -9,7 +11,7 @@ interface Props {
  title: string
  subtitle: string
  buttonProps: SwarmButtonProps
-  status: 'ok' | 'error'
+  status: 'ok' | 'error' | 'loading' | 'connecting'
 }

 const useStyles = (backgroundColor: string) =>
@@ -56,12 +58,24 @@ 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" />
+  } else if (status === 'connecting') {
+    statusIcon = <Connecting size="13" color="#0074D9" />
+  }
+
  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}
@@ -1,9 +1,9 @@
 import { ReactElement, useContext } from 'react'
-import { useLocation, matchPath } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import ArrowRight from 'remixicon-react/ArrowRightLineIcon'

-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
+import { ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Context } from '../providers/Bee'
 import StatusIcon from './StatusIcon'

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    smallerText: {
      fontSize: '0.9rem',
+      whiteSpace: 'nowrap',
    },
  }),
 )
@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react'
 import { CircularProgress } from '@material-ui/core'
+import type { ReactElement } from 'react'
 import { CheckState } from '../providers/Bee'

 interface Props {
@@ -25,6 +25,12 @@ export default function StatusIcon({ checkState, size, className, isLoading }: P
    case CheckState.ERROR:
      backgroundColor = '#ff3a52'
      break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
+    case CheckState.CONNECTING:
+      backgroundColor = '#0074D9'
+      break
    default:
      // Default is error
      backgroundColor = '#ff3a52'
@@ -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
      }}
    />
  )
@@ -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
      }}
    />
  )
@@ -1,8 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { getLatestBeeDesktopVersion } from '../utils/desktop'
-import { getJson } from '../utils/net'
 import { GITHUB_REPO_URL } from '../constants'
+import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'

 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
@@ -22,11 +22,34 @@ export interface NewDesktopVersionHook {
 }

 export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
+  const [reachable, setReachable] = useState(false)
  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)
@@ -48,7 +71,7 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
    }
  }, [desktopUrl, isBeeDesktop])

-  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }

 async function checkNewVersion(desktopUrl: string): Promise<string> {
@@ -85,25 +108,6 @@ export function useNewBeeDesktopVersion(
  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
@@ -116,7 +120,7 @@ export const useGetBeeConfig = (desktopUrl: string): GetBeeConfig => {
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
-    getJson<BeeConfig>(`${desktopUrl}/config`)
+    getDesktopConfiguration(desktopUrl)
      .then(beeConf => {
        setBeeConfig(beeConf)
        setError(null)
@@ -6,12 +6,19 @@ 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_API_URL
-const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_API_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 isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} />
+    <App
+      isDesktop={desktopEnabled}
+      desktopUrl={desktopUrl}
+      beeApiUrl={beeApiUrl}
+      beeDebugApiUrl={beeDebugApiUrl}
+      defaultRpcUrl={defaultRpcUrl}
+    />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -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) {
-    super(amount, 16)
+  constructor(value: BigNumber | string | bigint) {
+    super(value, BZZ_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): BzzToken {
+    return Token.fromDecimal(value, BZZ_DECIMAL_PLACES)
  }
 }
@@ -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) {
-    super(amount, 18)
+  constructor(value: BigNumber | string | bigint) {
+    super(value, DAI_DECIMAL_PLACES)
+  }
+
+  static fromDecimal(value: BigNumber | string | bigint): DaiToken {
+    return Token.fromDecimal(value, DAI_DECIMAL_PLACES)
  }
 }
@@ -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,
+    )
+  }
 }
@@ -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}>
-            Top up wallet
-          </SwarmButton>
+          {isDesktop && (
+            <SwarmButton onClick={onDeposit} iconType={Download}>
+              Top up wallet
+            </SwarmButton>
+          )}
        </Grid>
      </Box>
      {balance && nodeAddresses ? (
@@ -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, desktopUrl } = 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()
@@ -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"
+    />
+  )
+}
@@ -1,17 +1,41 @@
 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.CONNECTING) {
+    return (
+      <Card
+        buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}
+        icon={<Globe />}
+        title="Connecting..."
+        subtitle="Attempting to establish connection to your Bee node."
+        status="connecting"
+      />
+    )
+  }
+
+  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
@@ -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"
+    />
+  )
+}
@@ -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 { ChequebookInfoCard } from './ChequebookInfoCard'
 import NodeInfoCard from './NodeInfoCard'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
+import { WalletInfoCard } from './WalletInfoCard'

 export default function Status(): ReactElement {
  const {
+    debugApiReadiness,
    status,
    latestUserVersion,
    isLatestBeeVersion,
    latestBeeVersionUrl,
    topology,
    nodeInfo,
-    chequebookBalance,
    chainId,
  } = useContext(BeeContext)
  const { isDesktop, desktopUrl } = useContext(SettingsContext)
-  const { balance, error } = useContext(BalanceProvider)
  const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
-  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>
-        {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) && (
+        {debugApiReadiness && (
          <>
-            <div style={{ width: '8px' }} />
-            {chequebookBalance?.availableBalance !== undefined &&
-            chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
-              <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"
-              />
-            ) : (
-              <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 style={{ width: '8px' }}></div>
+            <WalletInfoCard />
+            <div style={{ width: '8px' }}></div>
+            <ChequebookInfoCard />
          </>
        )}
      </div>
@@ -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>
  )
 }
@@ -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">
@@ -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,
    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 (
@@ -49,20 +76,10 @@ export default function SettingsPage(): ReactElement {
        />
        <ExpandableListItemInput
          label="Blockchain RPC URL"
-          value={providerUrl}
+          value={rpcProviderUrl}
          helperText="Changing the value will restart your bee node."
          confirmLabel="Save and restart"
-          onConfirm={value => {
-            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' })
-              })
-          }}
+          onConfirm={handleSetRpcUrl}
        />
      </ExpandableList>
      {isDesktop && (
@@ -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
-          (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network through the{' '}
-          <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you will also need
-          xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain network through
-          the <a href="https://bridge.gnosischain.com">xDai Bridge</a>. See the{' '}
+          Your chequebook is deployed. You may deposit some xBZZ to your chequebook to afford more traffic. You can
+          acquire BZZ (e.g. <a href="https://bzz.exchange/">bzz.exchange</a>) and bridge it to the Gnosis Chain network
+          through the <a href="https://omni.gnosischain.com/bridge">omni bridge</a>. To pay the transaction fees, you
+          will also need xDAI token. You can purchase DAI on the Ethereum mainnet network and bridge it to Gnosis Chain
+          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.
        </>
      )
@@ -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'
-          : 'We cannot connect to your nodes debug API. Please check the following to troubleshoot your issue.'}
+          ? 'The connection to the Bee node debug API has been successful'
+          : '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={
@@ -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>
+  )
+}
@@ -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'
-          : 'Could not connect to your Bee nodes API. Please check the troubleshoot below on how you may resolve it.'}
+          ? 'The connection to the Bee node API has been successful'
+          : '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={
@@ -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) {
@@ -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>
  )
@@ -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 { isDesktop, desktopUrl, provider, providerUrl } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl, rpcProvider, rpcProviderUrl } = useContext(SettingsContext)
  const { balance } = useContext(BalanceProvider)

  const [loading, setLoading] = useState(false)
@@ -34,12 +34,12 @@ export function GiftCardFund(): ReactElement {
  const navigate = useNavigate()

  useEffect(() => {
-    if (!privateKeyString || !provider) {
+    if (!privateKeyString || !rpcProvider) {
      return
    }

-    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
-  }, [privateKeyString, provider])
+    ResolvedWallet.make(privateKeyString, rpcProvider).then(setWallet)
+  }, [privateKeyString, rpcProvider])

  if (!wallet || !balance) {
    return <Loading />
@@ -50,9 +50,8 @@ export function GiftCardFund(): ReactElement {
  async function restart() {
    try {
      await sleepMs(5_000)
-      await upgradeToLightNode(desktopUrl, providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
      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()
@@ -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 dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
+      const wallet = new Wallet(giftCode, rpcProvider)
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, rpcProvider))
+      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')
@@ -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,76 +13,121 @@ 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
 }

-function isPositiveDecimal(value: string): boolean {
-  try {
-    return new BigNumber(value).isPositive()
-  } catch {
-    return false
-  }
-}
-
 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, isDesktop, desktopUrl } = 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(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 lowAmountSwap = new DaiToken(balance.dai.toBigNumber.dividedToIntegerBy(2))
-
-  let daiToSwap: DaiToken
-
-  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 = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT

  async function restart() {
    try {
      await sleepMs(5_000)
-      await upgradeToLightNode(desktopUrl, providerUrl)
      await restartBeeNode(desktopUrl)

-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
      console.error(error) // eslint-disable-line
@@ -91,21 +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(desktopUrl, daiToSwap.toString)
-      enqueueSnackbar('Successfully swapped', { variant: 'success' })
+      await performSwapWithChecks(daiToSwap)
+      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
-      enqueueSnackbar(`Failed to swap: ${error}`, { variant: 'error' })
+      if (isSwapError(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)
@@ -136,18 +230,13 @@ export function Swap({ header }: Props): ReactElement {
      </Box>
      <Box mb={4}>
        <SwarmTextInput
-          label="Amount to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
-          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          label="xDAI to swap"
+          defaultValue={daiToSwap.toSignificantDigits(4)}
+          placeholder={daiToSwap.toSignificantDigits(4)}
          name="x"
          onChange={event => setUserInputSwap(event.target.value)}
        />
-        {daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) ? (
-          <Typography>Must keep at least {MINIMUM_XDAI} xDAI after swap!</Typography>
-        ) : null}
-        {bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ) ? (
-          <Typography>Must have at least {MINIMUM_XBZZ} xBZZ after swap!</Typography>
-        ) : null}
+        {error && <Typography>{error}</Typography>}
      </Box>
      <Box mb={4}>
        <ArrowDown size={24} color="#aaaaaa" />
@@ -171,9 +260,7 @@ export function Swap({ header }: Props): ReactElement {
        <SwarmButton
          iconType={Check}
          onClick={onSwap}
-          disabled={
-            hasSwapped || loading || daiAfterSwap.toDecimal.lt(MINIMUM_XDAI) || bzzAfterSwap.toDecimal.lt(MINIMUM_XBZZ)
-          }
+          disabled={hasSwapped || loading || error !== null}
          loading={loading}
        >
          {canUpgradeToLightNode ? 'Swap Now and Upgrade' : 'Swap Now'}
@@ -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({
@@ -42,7 +42,7 @@ export default function TopUp(): ReactElement {
  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()

@@ -55,9 +55,8 @@ export default function TopUp(): ReactElement {
  async function restart() {
    setLoading(true)
    try {
-      await upgradeToLightNode(desktopUrl, providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
      await restartBeeNode(desktopUrl)
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
      console.error(error) // eslint-disable-line
@@ -17,14 +17,17 @@ import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
 import { Context as SettingsContext } from './Settings'

+const LAUNCH_GRACE_PERIOD = 15_000
 const REFRESH_WHEN_OK = 30_000
 const REFRESH_WHEN_ERROR = 5_000
 const TIMEOUT = 3_000

 export enum CheckState {
+  CONNECTING = 'Connecting',
  OK = 'OK',
  WARNING = 'Warning',
  ERROR = 'Error',
+  STARTING = 'Starting',
 }

 interface StatusItem {
@@ -52,6 +55,7 @@ interface ContextInterface {
  error: Error | null
  apiHealth: boolean
  debugApiHealth: Health | null
+  debugApiReadiness: boolean
  nodeAddresses: NodeAddresses | null
  nodeInfo: NodeInfo | null
  topology: Topology | null
@@ -89,6 +93,7 @@ const initialValues: ContextInterface = {
  error: null,
  apiHealth: false,
  debugApiHealth: null,
+  debugApiReadiness: false,
  nodeAddresses: null,
  nodeInfo: null,
  topology: null,
@@ -117,25 +122,27 @@ 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,
+  startedAt: number,
 ): 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 +166,59 @@ function getStatus(
  if (error || (nodeInfo && [BeeModes.FULL, BeeModes.LIGHT].includes(nodeInfo.beeMode))) {
    status.chequebook.isEnabled = true

-    if (
-      chequebookAddress?.chequebookAddress &&
-      chequebookBalance !== null &&
-      chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)
-    ) {
+    if (chequebookAddress?.chequebookAddress && chequebookBalance !== null) {
      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
-  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
-    status.all = CheckState.ERROR
-  } else if (
-    Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
-  ) {
-    status.all = CheckState.WARNING
-  } else {
-    status.all = CheckState.OK
-  }
+  status.all = determineOverallStatus(debugApiHealth, debugApiReadiness, status, startedAt)

  return status
 }

+function determineOverallStatus(
+  debugApiHealth: Health | null,
+  debugApiReadiness: boolean,
+  status: Status,
+  startedAt: number,
+): CheckState {
+  const hasErrors = Object.values(status).some(
+    ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR,
+  )
+  const hasWarnings = Object.values(status).some(
+    ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING,
+  )
+  const isInGracePeriod = Date.now() - startedAt < LAUNCH_GRACE_PERIOD
+
+  if (debugApiHealth?.status === 'ok' && !debugApiReadiness) {
+    return CheckState.STARTING
+  } else if (hasErrors && isInGracePeriod) {
+    return CheckState.CONNECTING
+  } else if (hasErrors) {
+    return CheckState.ERROR
+  } else if (hasWarnings) {
+    return CheckState.WARNING
+  } else {
+    return CheckState.OK
+  }
+}
+
 // 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)
@@ -201,6 +230,7 @@ export function Provider({ children }: Props): ReactElement {
  const [settlements, setSettlements] = useState<Settlements | null>(null)
  const [chainState, setChainState] = useState<ChainState | null>(null)
  const [chainId, setChainId] = useState<number | null>(null)
+  const [startedAt] = useState(Date.now())

  const { latestBeeRelease } = useLatestBeeRelease()

@@ -299,6 +329,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 +417,15 @@ export function Provider({ children }: Props): ReactElement {

  const status = getStatus(
    debugApiHealth,
-    nodeAddresses,
+    debugApiReadiness,
    nodeInfo,
    apiHealth,
    topology,
    chequebookAddress,
    chequebookBalance,
    error,
+    Boolean(isDesktop),
+    startedAt,
  )

  useEffect(() => {
@@ -426,6 +464,7 @@ export function Provider({ children }: Props): ReactElement {
        error,
        apiHealth,
        debugApiHealth,
+        debugApiReadiness,
        nodeAddresses,
        nodeInfo,
        topology,
@@ -2,15 +2,12 @@ import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
 import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react'
 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') || DEFAULT_RPC_URL
-
 interface ContextInterface {
  apiUrl: string
  apiDebugUrl: string
@@ -20,14 +17,14 @@ interface ContextInterface {
  desktopApiKey: string
  isDesktop: boolean
  desktopUrl: string
-  providerUrl: string
-  provider: providers.JsonRpcProvider
+  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
  isLoading: boolean
  error: Error | null
 }
@@ -44,8 +41,8 @@ const initialValues: ContextInterface = {
  desktopApiKey: '',
  desktopUrl: window.location.origin,
  setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
-  providerUrl,
-  provider: new providers.JsonRpcProvider(providerUrl),
+  rpcProviderUrl: '',
+  rpcProvider: new providers.JsonRpcProvider(''),
  cors: null,
  dataDir: null,
  ensResolver: null,
@@ -62,6 +59,7 @@ interface InitialSettings {
  lockedApiSettings?: boolean
  isDesktop?: boolean
  desktopUrl?: string
+  defaultRpcUrl?: string
 }

 interface Props extends InitialSettings {
@@ -71,14 +69,16 @@ interface Props extends InitialSettings {
 export function Provider({ children, ...propsSettings }: Props): ReactElement {
  const desktopUrl = propsSettings.desktopUrl ?? initialValues.desktopUrl
  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 [provider, setProvider] = useState(initialValues.provider)
+  const [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
+  const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
  const { config, isLoading, error } = useGetBeeConfig(desktopUrl)

  const url = makeHttpUrl(
@@ -133,17 +133,12 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
        desktopApiKey,
        isDesktop,
        desktopUrl,
-        provider,
-        providerUrl,
+        rpcProvider,
+        rpcProviderUrl,
        cors: config?.['cors-allowed-origins'] ?? null,
        dataDir: config?.['data-dir'] ?? null,
        ensResolver: config?.['resolver-options'] ?? null,
-        setAndPersistJsonRpcProvider: setAndPersistJsonRpcProviderClosure(
-          isDesktop,
-          desktopUrl,
-          setProviderUrl,
-          setProvider,
-        ),
+        setAndPersistJsonRpcProvider: setAndPersistJsonRpcProviderClosure(setRpcProviderUrl, setRpcProvider),
        isLoading,
        error,
      }}
@@ -162,23 +157,12 @@ function makeHttpUrl(string: string): string {
 }

 function setAndPersistJsonRpcProviderClosure(
-  isDesktop: boolean,
-  desktopUrl: string,
  setProviderUrl: (url: string) => void,
  setProvider: (prov: providers.JsonRpcProvider) => void,
 ) {
-  return async (providerUrl: string) => {
-    try {
-      localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
-      setProviderUrl(providerUrl)
-      setProvider(new providers.JsonRpcProvider(providerUrl))
-
-      if (isDesktop) {
-        await setJsonRpcInDesktop(desktopUrl, providerUrl)
-        await restartBeeNode(desktopUrl)
-      }
-    } catch (error) {
-      console.error(error) // eslint-disable-line
-    }
+  return (providerUrl: string) => {
+    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+    setProviderUrl(providerUrl)
+    setProvider(new providers.JsonRpcProvider(providerUrl))
  }
 }
@@ -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]
@@ -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) {
-      WalletAddress.make(nodeAddresses.ethereum, provider).then(setBalance)
+    if (nodeAddresses?.ethereum && rpcProvider) {
+      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
@@ -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'
+}
@@ -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)
+  })
+}
@@ -1,18 +1,33 @@
 import axios from 'axios'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'
 import { DaiToken } from '../models/DaiToken'
 import { Token } from '../models/Token'
-import { postJson } from './net'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'
+import { getJson, postJson } from './net'
+
+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
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  'swap-endpoint'?: string
+}

 export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
  const response = await axios.get(`${desktopUrl}/price`)

-  return DaiToken.fromDecimal(response.data, 18)
+  return DaiToken.fromDecimal(response.data)
 }

-export async function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<void> {
-  await updateDesktopConfiguration(desktopUrl, {
-    'chain-enable': true,
+export function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<BeeConfig> {
+  return updateDesktopConfiguration(desktopUrl, {
    'swap-enable': true,
    'swap-endpoint': rpcProvider,
  })
@@ -24,8 +39,12 @@ export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Pr
  })
 }

-async function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<void> {
-  await postJson(`${desktopUrl}/config`, values)
+export function getDesktopConfiguration(desktopUrl: string): Promise<BeeConfig> {
+  return getJson(`${desktopUrl}/config`)
+}
+
+function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<BeeConfig> {
+  return postJson(`${desktopUrl}/config`, values)
 }

 export async function restartBeeNode(desktopUrl: string): Promise<void> {
@@ -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)
  }

@@ -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
@@ -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,
Author	SHA1	Message	Date
bee-worker	e780b971d9	chore(master): release 0.22.0 (#604 )	2023-01-19 12:17:25 +01:00
Cafe137	90f9f91ddb	feat: add node connecting status (#603 )	2023-01-19 12:05:24 +01:00
bee-worker	01838dccd1	chore(master): release 0.21.1 (#600 )	2022-12-21 14:49:34 +01:00
Cafe137	42b7f080b0	fix: do not require chequebook funding (#599 ) * fix: do not require chequebook funding * chore: revert import sorting	2022-12-21 14:36:24 +01:00
bee-worker	a88e78e748	chore(master): release 0.21.0 (#579 )	2022-12-02 12:39:02 +01:00
Cafe137	665ae063fa	fix: handle auth and server error during swap (#593 ) * fix: change execution order for light node upgrade * refactor: grab new configuration from post config request * fix: only print successful light node upgrade when it really happens * fix: log full desktop side swap error (#596) * refactor: try to make the auth error in swap nicer * refactor: make error instruction consistent * fix: avoid overwriting daiToSwap when it is set manually	2022-12-01 12:36:15 +01:00
Cafe137	dc04e26db4	fix: change version mismatch to a warning (#594 )	2022-11-30 12:36:34 +01:00
Cafe137	b798fa0e68	fix: always set rpc to newly provided value in desktop (#591 ) * fix: always set rpc to newly provided value in desktop * fix: always set new rpc and restart node * fix: disable version check in desktop mode * fix: only set rpc in desktop when in light mode * refactor: simplify code	2022-11-24 14:06:00 +01:00
Cafe137	4e564dd5c0	feat: add prerequisite checks before swap (#588 ) * feat: add prerequisite checks before swap * fix: add missing authentication on desktop config call * refactor(wip): introduce swap error * refactor: use wrapWithSwapError * fix: log originalError instead of error * fix: show snackbar when error is unexpected	2022-11-23 14:20:55 +01:00
Adam Uhlíř	1c53364fcd	chore: add Bee Factory support (#592 )	2022-11-22 15:55:04 +01:00
Cafe137	848e61a7a0	feat: add starting state to sidebar indicator (#587 )	2022-11-22 10:33:38 +01:00
bee-worker	c3a940c8d7	docs: update supported bee (#586 )	2022-11-15 15:23:30 +01:00
Cafe137	02469046b0	fix: add loading state to info page (#584 ) * fix: add loading state to info page * refactor: use bee-js for readiness check	2022-11-14 14:22:49 +01:00
Cafe137	1ce4a47495	fix: fix conditional rendering for blockchain network (#583 )	2022-11-14 11:16:14 +01:00
Cafe137	9a8520eb6f	fix: hide swap in standalone mode (#582 )	2022-11-14 11:15:40 +01:00
Cafe137	ec8fdf0315	fix: always consider user input when performing swap (#572 ) * fix: always consider user input when performing swap * refactor: extract decimal places constants * refactor: extract minimumOptimalValue * fix: handle bzz precision and tweak message	2022-11-09 14:21:34 +01:00
Cafe137	a4b8e7ca25	fix: change status page depending on desktop mode (#573 ) * fix: change status page depending on desktop mode * refactor: check desktop reachability periodically	2022-11-07 14:02:22 +01:00
Cafe137	693609810d	fix: refresh after chequebook withdraw deposit (#576 ) * fix: refresh after chequebook withdraw deposit * refactor: remove extra catch	2022-11-07 14:02:11 +01:00
Adam Uhlíř	73f845a73a	docs: desktop development (#539 )	2022-10-05 09:27:28 +02:00
Adam Uhlíř	b6419297f4	ci: make preview check step optional (#548 )	2022-10-05 09:26:57 +02:00
bee-worker	9d2d271c20	chore(master): release 0.20.2 (#552 )	2022-09-15 17:05:48 +02:00
Adam Uhlíř	c0456a3bf6	fix: stamp purchasing (#551 )	2022-09-15 17:02:11 +02:00
bee-worker	463622c297	chore(master): release 0.20.1 (#549 )	2022-09-15 05:46:11 -07:00
Adam Uhlíř	e2dd077118	fix: rpc endpoint setting ultra-light mode logic (#547 )	2022-09-15 14:42:53 +02:00
Adam Uhlíř	5295bd5b01	fix: revert bee env. variable names and add default rpc var (#545 )	2022-09-15 14:29:19 +02:00
dependabot[bot]	0592995564	build(deps-dev): bump typescript from 4.8.2 to 4.8.3 (#532 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-09-14 12:44:55 +02:00