chore(master): release 0.29.0 (#668)

* fix: clear withdraw/deposit message

* fix: withdraw/deposit message shorten

.depcheckrc.json

@@ -9,7 +9,6 @@
     "file-loader",
     "ts-node",
     "webpack-cli",
-    "assert",
     "buffer",
     "crypto*",
     "stream*",

.github/workflows/check.yaml

@@ -18,7 +18,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/
 
     steps:
       - uses: actions/checkout@v2
@@ -77,7 +76,7 @@ jobs:
           bee-url: https://unlimited.gateway.ethswarm.org
           token: ${{ secrets.GHA_PAT_BASIC }}
           error-document: index.html
-          headers: "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"
+          headers: '${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}'
 
       - name: Upload to testnet
         uses: ethersphere/swarm-actions/upload-dir@v0

CHANGELOG.md

@@ -1,5 +1,82 @@
 # Changelog
 
+## [0.29.0](https://github.com/ethersphere/bee-dashboard/compare/v0.28.0...v0.29.0) (2024-07-17)
+
+
+### Features
+
+* clarify labels and syncing ([#670](https://github.com/ethersphere/bee-dashboard/issues/670)) ([01b1b39](https://github.com/ethersphere/bee-dashboard/commit/01b1b39c42cc5b68a0132c3696c3c42a27ea2ee4))
+* polish app ([#669](https://github.com/ethersphere/bee-dashboard/issues/669)) ([8558860](https://github.com/ethersphere/bee-dashboard/commit/8558860f0a3baa82c31c091a44c78bb8e97de70d))
+
+
+### Bug Fixes
+
+* clarify withdraw and deposit message ([#654](https://github.com/ethersphere/bee-dashboard/issues/654)) ([b4ebfc7](https://github.com/ethersphere/bee-dashboard/commit/b4ebfc7c3fd449807db47fa25763df464cc45618))
+
+## [0.28.0](https://github.com/ethersphere/bee-dashboard/compare/v0.27.0...v0.28.0) (2024-06-18)
+
+
+### Features
+
+* upgrade bee-js to 7.0.3 ([#666](https://github.com/ethersphere/bee-dashboard/issues/666)) ([e9ebe33](https://github.com/ethersphere/bee-dashboard/commit/e9ebe33d51aa525921eacfad683577605e591531))
+
+## [0.27.0](https://github.com/ethersphere/bee-dashboard/compare/v0.26.2...v0.27.0) (2024-06-11)
+
+
+### Features
+
+* add redeem shortcut to sidebar ([999399f](https://github.com/ethersphere/bee-dashboard/commit/999399fb08c1a47a671ba0ad50409624654a1082))
+
+## [0.26.2](https://github.com/ethersphere/bee-dashboard/compare/v0.26.1...v0.26.2) (2024-06-05)
+
+
+### Bug Fixes
+
+* merge version and health check ([#662](https://github.com/ethersphere/bee-dashboard/issues/662)) ([cae90c1](https://github.com/ethersphere/bee-dashboard/commit/cae90c1a82e16ee8c7908c43e2fd17f7130eb89d))
+
+## [0.26.1](https://github.com/ethersphere/bee-dashboard/compare/v0.26.0...v0.26.1) (2024-06-03)
+
+
+### Bug Fixes
+
+* add bee version ([#659](https://github.com/ethersphere/bee-dashboard/issues/659)) ([a5d4ecf](https://github.com/ethersphere/bee-dashboard/commit/a5d4ecf045f691b9059fcca925d0f30675d12db0))
+
+## [0.26.0](https://github.com/ethersphere/bee-dashboard/compare/v0.25.0...v0.26.0) (2024-06-03)
+
+
+### Features
+
+* display effective capacity ([#643](https://github.com/ethersphere/bee-dashboard/issues/643)) ([5871223](https://github.com/ethersphere/bee-dashboard/commit/58712232031e084195adf92c40cd41a98eaf16cf))
+* merge api ([#658](https://github.com/ethersphere/bee-dashboard/issues/658)) ([8cbd812](https://github.com/ethersphere/bee-dashboard/commit/8cbd812a2c04706f8f46de5355209b96783723b9))
+* show syncing info ([#647](https://github.com/ethersphere/bee-dashboard/issues/647)) ([cc91f1d](https://github.com/ethersphere/bee-dashboard/commit/cc91f1d64cd48a845fa9fa45ec4b58335eab3893))
+* wait for upload sync ([#649](https://github.com/ethersphere/bee-dashboard/issues/649)) ([79bb315](https://github.com/ethersphere/bee-dashboard/commit/79bb31540196b74f3bc0220b8c844fbd5aaaf488))
+
+
+### Bug Fixes
+
+* correct the bee version detection ([#645](https://github.com/ethersphere/bee-dashboard/issues/645)) ([b3f521c](https://github.com/ethersphere/bee-dashboard/commit/b3f521ca2055b91d7adddf96563cca6bf92e3d59))
+
+## [0.25.0](https://github.com/ethersphere/bee-dashboard/compare/v0.24.1...v0.25.0) (2023-12-04)
+
+
+### Features
+
+* improve topup and dilute ux ([0c2ac0c](https://github.com/ethersphere/bee-dashboard/commit/0c2ac0c454ad02200a2762958c5bc5abbdfe8005))
+* update postage stamp creation screen ([#641](https://github.com/ethersphere/bee-dashboard/issues/641)) ([4f9abc6](https://github.com/ethersphere/bee-dashboard/commit/4f9abc614eedd5ce3a279a4686cc832c4d1e62c7))
+
+
+### Bug Fixes
+
+* add missing stamp labels and fix inputs ([#634](https://github.com/ethersphere/bee-dashboard/issues/634)) ([7fa1cb0](https://github.com/ethersphere/bee-dashboard/commit/7fa1cb0ccf9f2a32263e84aa76732ebd2fc7fb22))
+* put stamp input error handling in state ([#640](https://github.com/ethersphere/bee-dashboard/issues/640)) ([20a051b](https://github.com/ethersphere/bee-dashboard/commit/20a051b6589c22397a7305d722a56df0604ff7a4))
+
+## [0.24.1](https://github.com/ethersphere/bee-dashboard/compare/v0.24.0...v0.24.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* update `swap-endpoint` to `blockchain-rpc-endpoint` ([#628](https://github.com/ethersphere/bee-dashboard/issues/628)) ([bce93ce](https://github.com/ethersphere/bee-dashboard/commit/bce93ce3cdc1ef4b1f50fcf274591ba00726be16))
+
 ## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
 
 

CODEOWNERS

@@ -1 +1 @@
-* @Cafe137 @vojtechsimetka
+* @Cafe137

README.md

@@ -13,15 +13,13 @@
 **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.12.0-88c1d236<!-- SUPPORTED_BEE_END -->**.
+Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
-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).
 
 ![Status page](/ui_samples/info.png)
 
-| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                           |
+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                              |
-| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ------------------------------------- |
 | ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Settings](/ui_samples/settings.png) |
 
 ## Table of Contents
@@ -45,9 +43,9 @@ npm install -g @ethersphere/bee-dashboard
 
 ## Usage
 
-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
+:warning: To successfully connect to the Bee node, you will need to enable CORS. You can do so by setting
-setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
+`cors-allowed-origins: ['*']` in the Bee config file and then restart the Bee node. To see where the config file is,
-To see where the config file is, consult the
+consult the
 [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
 
 ### Terminal
@@ -96,18 +94,22 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
 
 #### Environmental variables
 
-The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. 
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static
-We support following variables:
+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_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_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same
- - `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
+  origin under which the Dashboard is served.
- - `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_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the
- - `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.
+  `http://localhost:1633` 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 Desktop is initialized (eq. the splash screen disappear) 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:3054
@@ -128,7 +130,6 @@ There are some ways you can make this module better:
 
 ## Maintainers
 
-- [vojtechsimetka](https://github.com/vojtechsimetka)
 - [Cafe137](https://github.com/Cafe137)
 
 See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintainer).
@@ -137,5 +138,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 
 [BSD-3-Clause](./LICENSE)
 
-
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.24.0",
+  "version": "0.29.0",
   "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
   "keywords": [
     "bee",
@@ -26,37 +26,35 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^6.2.0",
+    "@ethersphere/bee-js": "^7.1.0",
     "@ethersphere/swarm-cid": "^0.1.0",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "assert": "^2.0.0",
+    "axios": "^0.28.1",
-    "axios": "0.24.0",
+    "bignumber.js": "^9.1.2",
-    "bignumber.js": "9.0.1",
     "buffer": "^6.0.3",
     "crypto": "npm:crypto-browserify",
     "crypto-browserify": "^3.12.0",
     "dotted-map": "^2.2.3",
-    "ethers": "^5.6.4",
+    "ethers": "^5.7.2",
     "file-saver": "^2.0.5",
     "formik": "2.2.9",
     "formik-material-ui": "3.0.1",
-    "jszip": "^3.7.1",
+    "jszip": "^3.10.1",
     "mantaray-js": "^1.0.3",
     "material-ui-dropzone": "3.5.0",
-    "notistack": "1.0.10",
+    "notistack": "^3.0.1",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
     "react": ">= 17.0.2",
-    "react-copy-to-clipboard": "5.0.4",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": ">= 17.0.2",
     "react-identicons": "1.2.5",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
     "react-syntax-highlighter": "15.4.4",
     "remixicon-react": "^1.0.0",
-    "semver": "7.3.5",
     "serve-handler": "6.1.3",
     "stream": "npm:stream-browserify",
     "stream-browserify": "^3.0.0"
@@ -78,16 +76,15 @@
     "@types/jest": "27.0.2",
     "@types/qrcode.react": "1.0.2",
     "@types/react": "17.0.34",
-    "@types/react-copy-to-clipboard": "5.0.2",
+    "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "17.0.11",
     "@types/react-router": "5.1.18",
     "@types/react-router-dom": "5.3.2",
     "@types/react-syntax-highlighter": "13.5.2",
-    "@types/semver": "7.3.9",
     "@typescript-eslint/eslint-plugin": "5.28.0",
     "@typescript-eslint/parser": "5.28.0",
-    "babel-eslint": "10.1.0",
+    "babel-eslint": "^10.1.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-tsconfig-paths": "1.0.2",
     "base64-inline-loader": "^2.0.1",
@@ -115,7 +112,7 @@
     "ts-node": "^10.8.1",
     "typescript": "4.8.3",
     "web-vitals": "2.1.2",
-    "webpack": "^5.73.0",
+    "webpack": "^5.93.0",
     "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {

src/App.tsx

@@ -18,7 +18,6 @@ import { theme } from './theme'
 
 interface Props {
   beeApiUrl?: string
-  beeDebugApiUrl?: string
   defaultRpcUrl?: string
   lockedApiSettings?: boolean
   isDesktop?: boolean
@@ -28,7 +27,6 @@ interface Props {
 
 const App = ({
   beeApiUrl,
-  beeDebugApiUrl,
   defaultRpcUrl,
   lockedApiSettings,
   isDesktop,
@@ -40,14 +38,13 @@ const App = ({
       <ThemeProvider theme={theme}>
         <SettingsProvider
           beeApiUrl={beeApiUrl}
-          beeDebugApiUrl={beeDebugApiUrl}
           defaultRpcUrl={defaultRpcUrl}
           lockedApiSettings={lockedApiSettings}
           isDesktop={isDesktop}
           desktopUrl={desktopUrl}
         >
           <TopUpProvider>
-            <BeeProvider isDesktop={isDesktop}>
+            <BeeProvider>
               <BalanceProvider>
                 <StampsProvider>
                   <FileProvider>

src/components/CashoutModal.tsx

@@ -19,8 +19,8 @@ interface Props {
 export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactElement {
   const [open, setOpen] = useState<boolean>(false)
   const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
+  const { beeApi } = useContext(SettingsContext)
   const { enqueueSnackbar } = useSnackbar()
-  const { beeDebugApi } = useContext(SettingsContext)
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -31,11 +31,9 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   }
 
   const handleCashout = () => {
-    if (!beeDebugApi) return
+    if (peerId && beeApi) {
-
-    if (peerId) {
       setLoadingCashout(true)
-      beeDebugApi
+      beeApi
         .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)

src/components/ChainSync.tsx

@@ -0,0 +1,25 @@
+import { ChainState } from '@ethersphere/bee-js'
+import { useContext, useEffect, useState } from 'react'
+import { Context } from '../providers/Settings'
+import ExpandableListItem from './ExpandableListItem'
+
+export function ChainSync() {
+  const { beeApi } = useContext(Context)
+  const [chainState, setChainState] = useState<ChainState | null>(null)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!beeApi) {
+        return
+      }
+
+      beeApi.getChainState().then(setChainState).catch(console.error) // eslint-disable-line
+    }, 3_000)
+
+    return () => clearInterval(interval)
+  })
+
+  return (
+    <ExpandableListItem label="Chain state" value={chainState ? `${chainState.block} / ${chainState.chainTip}` : '-'} />
+  )
+}

src/components/EthereumAddress.tsx

@@ -1,9 +1,11 @@
+import { Utils } from '@ethersphere/bee-js'
 import { Typography } from '@material-ui/core/'
 import { ReactElement } from 'react'
 import Identicon from 'react-identicons'
-import ClipboardCopy from './ClipboardCopy'
-import QRCodeModal from './QRCodeModal'
 import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
+import ClipboardCopy from './ClipboardCopy'
+import { Flex } from './Flex'
+import QRCodeModal from './QRCodeModal'
 
 interface Props {
   address: string | undefined
@@ -16,10 +18,10 @@ export default function EthereumAddress(props: Props): ReactElement {
   return (
     <Typography component="div" variant="subtitle1">
       {props.address ? (
-        <div style={{ display: 'flex' }}>
+        <Flex>
           {props.hideBlockie ? null : (
             <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={props.address} />
+              <Identicon size={20} string={Utils.capitalizeAddressERC55(props.address)} />
             </div>
           )}
           <div>
@@ -43,9 +45,9 @@ export default function EthereumAddress(props: Props): ReactElement {
               {props.address}
             </a>
           </div>
-          <QRCodeModal value={props.address} label={'Ethereum Address'} />
+          <QRCodeModal value={Utils.capitalizeAddressERC55(props.address)} label={'Ethereum Address'} />
-          <ClipboardCopy value={props.address} />
+          <ClipboardCopy value={Utils.capitalizeAddressERC55(props.address)} />
-        </div>
+        </Flex>
       ) : (
         '-'
       )}

src/components/ExpandableElement.tsx

@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     contentLevel12: {
       marginTop: theme.spacing(0.25),
+      '& > li:last-of-type': {
+        marginBottom: theme.spacing(2),
+      },
     },
     infoText: {
       color: '#c9c9c9',

src/components/ExpandableList.tsx

@@ -1,7 +1,8 @@
-import { ReactElement, ReactNode, useState } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ReactElement, ReactNode, useState } from 'react'
+import { Flex } from './Flex'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -65,14 +66,14 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
     <div className={`${classes.root} ${rootLevelClass}`}>
       <ListItem button onClick={handleClick} className={classes.header}>
         <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
-        <div style={{ display: 'flex' }}>
+        <Flex>
           {!open && (
             <Typography variant="body2" className={classes.infoText}>
               {info}
             </Typography>
           )}
           {open ? <ExpandLess /> : <ExpandMore />}
-        </div>
+        </Flex>
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <div className={contentLevelClass}>{children}</div>

src/components/ExpandableListItemInput.tsx

@@ -1,15 +1,15 @@
-import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import Edit from 'remixicon-react/PencilLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
-import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
-import type { RemixiconReactIconProps } from 'remixicon-react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -108,12 +108,8 @@ export default function ExpandableListItemKey({
               <div>
                 {!open && value}
                 {!expandedOnly && !locked && (
-                  <IconButton size="small" className={classes.copyValue}>
+                  <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
-                    {open ? (
+                    {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
-                      <Minus onClick={toggleOpen} strokeWidth={1} />
-                    ) : (
-                      <Edit onClick={toggleOpen} strokeWidth={1} />
-                    )}
                   </IconButton>
                 )}
               </div>
@@ -134,31 +130,33 @@ export default function ExpandableListItemKey({
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
-        <ExpandableListItemActions>
+        <Box mt={2}>
-          <SwarmButton
+          <ExpandableListItemActions>
-            disabled={
+            <SwarmButton
-              loading ||
+              disabled={
-              inputValue === value ||
+                loading ||
-              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+                inputValue === value ||
-              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
+                Boolean(confirmLabelDisabled) || // Disable if external validation is provided
-            }
+                (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
-            loading={loading}
+              }
-            iconType={confirmIcon ?? Check}
+              loading={loading}
-            onClick={() => {
+              iconType={confirmIcon ?? Check}
-              if (onConfirm) onConfirm(inputValue)
+              onClick={() => {
-            }}
+                if (onConfirm) onConfirm(inputValue)
-          >
+              }}
-            {confirmLabel || 'Save'}
+            >
-          </SwarmButton>
+              {confirmLabel || 'Save'}
-          <SwarmButton
+            </SwarmButton>
-            disabled={loading || inputValue === value || inputValue === ''}
+            <SwarmButton
-            iconType={X}
+              disabled={loading || inputValue === value || inputValue === ''}
-            onClick={() => setInputValue(value || '')}
+              iconType={X}
-            cancel
+              onClick={() => setInputValue(value || '')}
-          >
+              cancel
-            Cancel
+            >
-          </SwarmButton>
+              Cancel
-        </ExpandableListItemActions>
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
       </Collapse>
     </>
   )

src/components/ExpandableListItemKey.tsx

@@ -77,20 +77,18 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           {label && <Typography variant="body1">{label}</Typography>}
           <Typography variant="body2">
-            <div>
+            {!open && (
-              {!open && (
+              <span className={classes.copyValue}>
-                <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
-                    <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
+                  </CopyToClipboard>
-                    </CopyToClipboard>
+                </Tooltip>
-                  </Tooltip>
+              </span>
-                </span>
+            )}
-              )}
+            <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
-              <IconButton size="small" className={classes.copyValue}>
+              {open ? <Minus strokeWidth={1} /> : <Eye strokeWidth={1} />}
-                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
+            </IconButton>
-              </IconButton>
-            </div>
           </Typography>
         </Grid>
         <Collapse in={open} timeout="auto" unmountOnExit>

src/components/ExpandableListItemLink.tsx

@@ -82,22 +82,20 @@ export default function ExpandableListItemLink({
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           {label && <Typography variant="body1">{label}</Typography>}
           <Typography variant="body2">
-            <div>
+            {allowClipboard && (
-              {allowClipboard && (
+              <span className={classes.copyValue}>
-                <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
-                    <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{displayValue}</span>
-                      <span onClick={tooltipClickHandler}>{displayValue}</span>
+                  </CopyToClipboard>
-                    </CopyToClipboard>
+                </Tooltip>
-                  </Tooltip>
+              </span>
-                </span>
+            )}
-              )}
+            {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
-              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+            <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
-              <IconButton size="small" className={classes.openLinkIcon}>
+              {navigationType === 'NEW_WINDOW' && <OpenInNewSharp strokeWidth={1} />}
-                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
+              {navigationType === 'HISTORY_PUSH' && <ArrowForward strokeWidth={1} />}
-                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
+            </IconButton>
-              </IconButton>
-            </div>
           </Typography>
         </Grid>
       </Grid>

src/components/Flex.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+export function Flex({ children }: Props) {
+  return <div style={{ display: 'flex' }}>{children}</div>
+}

src/components/Map.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
 import type { Peer } from '@ethersphere/bee-js'
 import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
+import { CSSProperties, ReactElement, useContext, useEffect, useState } from 'react'
+import mapData from '../assets/data/map-data.json'
 import nodesDb from '../assets/data/nodes-db.json'
 import { Context } from '../providers/Bee'
-import mapData from '../assets/data/map-data.json'
 
 interface Props {
   style?: CSSProperties

src/components/ProgressBar.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react'
+import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+interface Props {
+  linearProgressProps?: LinearProgressProps
+  value: number
+}
+
+export function LinearProgressWithLabel(props: Props): ReactElement {
+  return (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box minWidth={35}>
+        <Typography variant="body2" color="textSecondary">{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}

src/components/SideBar.tsx

@@ -1,22 +1,23 @@
-import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
+import { BeeModes } from '@ethersphere/bee-js'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext } from 'react'
 import { Link } from 'react-router-dom'
 import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
 import DocsIcon from 'remixicon-react/BookOpenLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import GithubIcon from 'remixicon-react/GithubFillIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
-import { Context as BeeContext } from '../providers/Bee'
-import { Context as SettingsContext } from '../providers/Settings'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
+import { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL } from '../constants'
+import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 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
 
@@ -126,6 +127,22 @@ export default function SideBar(): ReactElement {
               />
             </MUILink>
           </List>
+          <Divider className={classes.divider} />
+          <List>
+            <MUILink href={GITHUB_BEE_DASHBOARD_URL} target="_blank" className={classes.link}>
+              <SideBarItem
+                iconStart={<GithubIcon className={classes.icon} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
+                label={<span>GitHub</span>}
+              />
+            </MUILink>
+          </List>
+          <Divider className={classes.divider} />
+          <Box mt={4}>
+            <Link to={ROUTES.TOP_UP_GIFT_CODE}>
+              <Typography align="center">Redeem gift code</Typography>
+            </Link>
+          </Box>
         </Grid>
         <Grid>
           <List>

src/components/StampExtensionModal.tsx

@@ -1,4 +1,5 @@
-import { BeeDebug } from '@ethersphere/bee-js'
+import { Bee } from '@ethersphere/bee-js'
+import { Box } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
@@ -7,20 +8,19 @@ import DialogTitle from '@material-ui/core/DialogTitle'
 import Input from '@material-ui/core/Input'
 import { useSnackbar } from 'notistack'
 import { ReactElement, ReactNode, useState } from 'react'
-import { SwarmSelect } from './SwarmSelect'
 
 interface Props {
-  label: string
+  type: 'Topup' | 'Dilute'
   icon: ReactNode
-  beeDebug: BeeDebug
+  bee: Bee
   stamp: string
 }
 
-export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Props): ReactElement {
+export default function StampExtensionModal({ type, icon, bee, stamp }: Props): ReactElement {
   const [open, setOpen] = useState(false)
   const [amount, setAmount] = useState('')
-  const [type, setType] = useState<'Topup' | 'Dilute'>('Topup')
   const { enqueueSnackbar } = useSnackbar()
+  const label = `${type} ${stamp.substring(0, 8)}`
 
   const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     setOpen(true)
@@ -34,7 +34,7 @@ export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Pr
   const handleAction = async () => {
     if (type === 'Topup') {
       try {
-        await beeDebug.topUpBatch(stamp, amount)
+        await bee.topUpBatch(stamp, amount)
         enqueueSnackbar(`Successfully topped up stamp, your changes will appear soon`, { variant: 'success' })
       } catch (error) {
         enqueueSnackbar(`Failed to topup stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
@@ -43,7 +43,7 @@ export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Pr
 
     if (type === 'Dilute') {
       try {
-        await beeDebug.diluteBatch(stamp, parseInt(amount, 10))
+        await bee.diluteBatch(stamp, parseInt(amount, 10))
         enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: 'success' })
       } catch (error) {
         enqueueSnackbar(`Failed to dilute stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
@@ -56,22 +56,13 @@ export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Pr
   }
 
   return (
-    <div>
+    <Box mb={2}>
       <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
-        {label}
+        {type}
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">{label}</DialogTitle>
         <DialogContent>
-          <SwarmSelect
-            label="Action"
-            defaultValue="Topup"
-            onChange={event => setType(event.target.value as 'Topup' | 'Dilute')}
-            options={[
-              { value: 'Topup', label: 'Topup' },
-              { value: 'Dilute', label: 'Dilute' },
-            ]}
-          />
           <Input
             autoFocus
             margin="dense"
@@ -87,11 +78,11 @@ export default function StampExtensionModal({ label, icon, beeDebug, stamp }: Pr
           <Button onClick={handleClose} color="primary">
             Cancel
           </Button>
-          <Button onClick={handleAction} color="primary">
+          <Button disabled={amount === ''} onClick={handleAction} color="primary">
             {type}
           </Button>
         </DialogActions>
       </Dialog>
-    </div>
+    </Box>
   )
 }

src/constants.ts

@@ -6,9 +6,9 @@ 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 GITHUB_BEE_DASHBOARD_URL = 'https://github.com/ethersphere/bee-dashboard.git'
 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

@@ -6,21 +6,23 @@ import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 
 export default function DepositModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { refresh } = useContext(BeeContext)
 
   return (
     <WithdrawDepositModal
       successMessage="Successful deposit."
       errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of xBZZ you would like to deposit to your node."
+      dialogMessage="Amount of xBZZ to deposit to the checkbook, from your node."
       label="Deposit"
       icon={<Download size="1rem" />}
       min={new BigNumber(0)}
       action={async (amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }
 
-        const transactionHash = await beeDebugApi.depositTokens(amount.toString())
+        const transactionHash = await beeApi.depositTokens(amount.toString())
         refresh()
 
         return transactionHash

src/containers/StakeModal.tsx

@@ -11,7 +11,7 @@ interface Props {
 }
 
 export default function StakeModal({ onStarted, onFinished }: Props): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { refresh } = useContext(BeeContext)
 
   return (
@@ -23,12 +23,14 @@ export default function StakeModal({ onStarted, onFinished }: Props): ReactEleme
       icon={<Download size="1rem" />}
       min={new BigNumber(0)}
       action={async (amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }
 
         onStarted()
 
         try {
-          await beeDebugApi.depositStake(amount.toString())
+          await beeApi.depositStake(amount.toString())
         } finally {
           refresh()
           onFinished()

src/containers/WithdrawModal.tsx

@@ -6,21 +6,23 @@ import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 
 export default function WithdrawModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { refresh } = useContext(BeeContext)
 
   return (
     <WithdrawDepositModal
       successMessage="Successful withdrawal."
       errorMessage="Error with withdrawing."
-      dialogMessage="Specify the amount of xBZZ you would like to withdraw from your node."
+      dialogMessage="Amount of xBZZ to withdraw from the checkbook to your node."
       label="Withdraw"
       icon={<Upload size="1rem" />}
       min={new BigNumber(0)}
       action={async (amount: bigint) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
+          throw new Error('Bee URL is not valid')
+        }
 
-        const transactionHash = await beeDebugApi.withdrawTokens(amount.toString())
+        const transactionHash = await beeApi.withdrawTokens(amount.toString())
         refresh()
 
         return transactionHash

src/hooks/accounting.ts

@@ -1,8 +1,8 @@
-import { LastCashoutActionResponse, BeeDebug } from '@ethersphere/bee-js'
+import { Bee, LastCashoutActionResponse } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
 import { Token } from '../models/Token'
+import { Balance, Settlement, Settlements } from '../types'
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
-import { Balance, Settlements, Settlement } from '../types'
 
 interface UseAccountingHook {
   isLoadingUncashed: boolean
@@ -79,7 +79,7 @@ function mergeAccounting(
 }
 
 export const useAccounting = (
-  beeDebugApi: BeeDebug | null,
+  beeApi: Bee | null,
   settlements: Settlements | null,
   balances: Balance[] | null,
 ): UseAccountingHook => {
@@ -88,19 +88,19 @@ export const useAccounting = (
 
   useEffect(() => {
     // We don't have any settlements loaded yet or we are already loading/have loaded the uncashed amounts
-    if (isLoadingUncashed || !beeDebugApi || !settlements || uncashedAmounts) return
+    if (isLoadingUncashed || !beeApi || !settlements || uncashedAmounts) return
 
     setIsloadingUncashed(true)
     const promises = settlements.settlements
       .filter(({ received }) => received.toBigNumber.gt('0'))
-      .map(({ peer }) => makeRetriablePromise(() => beeDebugApi.getLastCashoutAction(peer)))
+      .map(({ peer }) => makeRetriablePromise(() => beeApi.getLastCashoutAction(peer)))
 
     Promise.allSettled(promises).then(settlements => {
       const results = unwrapPromiseSettlements(settlements)
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 

src/index.tsx

@@ -1,24 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
 import App from './App'
+import './index.css'
 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} defaultRpcUrl={defaultRpcUrl} />
-      isDesktop={desktopEnabled}
-      desktopUrl={desktopUrl}
-      beeApiUrl={beeApiUrl}
-      beeDebugApiUrl={beeDebugApiUrl}
-      defaultRpcUrl={defaultRpcUrl}
-    />
   </React.StrictMode>,
   document.getElementById('root'),
 )

src/layout/Dashboard.tsx

@@ -1,14 +1,15 @@
 import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
-import React, { ReactElement, useContext, useEffect } from 'react'
 import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useEffect } from 'react'
 import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
+import { Flex } from '../components/Flex'
 import SideBar from '../components/SideBar'
+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 { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -27,53 +28,12 @@ interface Props {
 const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
-  const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } =
+  const { isLoading } = useContext(BeeContext)
-    useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
-  // New version of Bee client notification
-  useEffect(() => {
-    if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
-      enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, {
-        variant: 'warning',
-        preventDuplicate: true,
-        key: 'beeNewVersion',
-        persist: true,
-        action: key => (
-          <React.Fragment>
-            <Button
-              onClick={() => {
-                window.open(latestBeeVersionUrl)
-                closeSnackbar(key)
-              }}
-            >
-              Download release
-            </Button>
-            <IconButton
-              onClick={() => {
-                closeSnackbar(key)
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
-          </React.Fragment>
-        ),
-      })
-    }
-  }, [
-    closeSnackbar,
-    enqueueSnackbar,
-    isLatestBeeVersion,
-    isDesktop,
-    latestBeeRelease,
-    latestBeeVersionUrl,
-    isLoading,
-    latestUserVersion,
-  ])
-
   useEffect(() => {
     // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
     if (desktopAutoUpdateEnabled) {
@@ -122,13 +82,13 @@ const Dashboard = (props: Props): ReactElement => {
   )
 
   return (
-    <div style={{ display: 'flex' }}>
+    <Flex>
       <SideBar />
       <Container className={classes.content}>
         {' '}
         <ErrorBoundary errorReporting={props.errorReporting}>{content}</ErrorBoundary>
       </Container>
-    </div>
+    </Flex>
   )
 }
 

src/models/Token.ts

@@ -81,17 +81,18 @@ export class Token {
     return asString.slice(0, indexOfSignificantDigit + digits)
   }
 
-  minusBaseUnits(amount: string): Token {
+  minusBaseUnits(amount: string | BigNumber | bigint): Token {
+    const baseUnits = makeBigNumber(amount)
+
     return new Token(
-      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+      this.toBigNumber.minus(baseUnits.multipliedBy(new BigNumber(10).pow(this.decimals))),
       this.decimals,
     )
   }
 
-  plusBaseUnits(amount: string): Token {
+  plusBaseUnits(amount: string | BigNumber | bigint): Token {
-    return new Token(
+    const baseUnits = makeBigNumber(amount)
-      this.toBigNumber.plus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
+
-      this.decimals,
+    return new Token(this.toBigNumber.plus(baseUnits.multipliedBy(new BigNumber(10).pow(this.decimals))), this.decimals)
-    )
   }
 }

src/pages/account/chequebook/AccountChequebook.tsx

@@ -1,3 +1,5 @@
+import { Utils } from '@ethersphere/bee-js'
+import { Box } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
@@ -7,7 +9,7 @@ import TroubleshootConnectionCard from '../../../components/TroubleshootConnecti
 import DepositModal from '../../../containers/DepositModal'
 import WithdrawModal from '../../../containers/WithdrawModal'
 import { useAccounting } from '../../../hooks/accounting'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import PeerBalances from '../../accounting/PeerBalances'
 import { AccountNavigation } from '../AccountNavigation'
@@ -16,9 +18,9 @@ import { Header } from '../Header'
 export function AccountChequebook(): ReactElement {
   const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
     useContext(BeeContext)
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
 
-  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
+  const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeApi, settlements, peerBalances)
 
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
@@ -43,10 +45,12 @@ export function AccountChequebook(): ReactElement {
               label="Total Cheques Amount Sent"
               value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
             />
-            <ExpandableListItem
+            <Box mb={2}>
-              label="Total Cheques Amount Received"
+              <ExpandableListItem
-              value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
+                label="Total Cheques Amount Received"
-            />
+                value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
+              />
+            </Box>
             <ExpandableListItemActions>
               <WithdrawModal />
               <DepositModal />
@@ -54,7 +58,10 @@ export function AccountChequebook(): ReactElement {
           </ExpandableList>
         )}
         <ExpandableList label="Blockchain" defaultOpen>
-          <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+          <ExpandableListItemKey
+            label="Ethereum address"
+            value={nodeAddresses?.ethereum ? Utils.capitalizeAddressERC55(nodeAddresses.ethereum) : ''}
+          />
           <ExpandableListItemKey
             label="Chequebook contract address"
             value={chequebookAddress?.chequebookAddress || ''}

src/pages/account/stamps/AccountStamps.tsx

@@ -1,7 +1,8 @@
-import { CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
 import { useNavigate } from 'react-router'
 import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { ChainSync } from '../../../components/ChainSync'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
@@ -46,7 +47,7 @@ export function AccountStamps(): ReactElement {
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
-    navigate(ROUTES.ACCOUNT_STAMPS_NEW)
+    navigate(ROUTES.ACCOUNT_STAMPS_NEW_STANDARD)
   }
 
   return (
@@ -54,7 +55,12 @@ export function AccountStamps(): ReactElement {
       <Header />
       <AccountNavigation active="STAMPS" />
       <div className={classes.root}>
-        {error && <Loading />}
+        {error && (
+          <Container style={{ textAlign: 'center', padding: '50px' }}>
+            <Loading />
+            <ChainSync />
+          </Container>
+        )}
         {!error && (
           <>
             <div className={classes.actions}>

src/pages/account/wallet/AccountWallet.tsx

@@ -1,4 +1,4 @@
-import { BeeModes } from '@ethersphere/bee-js'
+import { BeeModes, Utils } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router'
@@ -11,7 +11,7 @@ import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import { Context as BalanceProvider } from '../../../providers/WalletBalance'
 import { ROUTES } from '../../../routes'
@@ -26,7 +26,7 @@ export function AccountWallet(): ReactElement {
   const navigate = useNavigate()
 
   function onCheckTransactions() {
-    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
+    window.open(`https://gnosisscan.io/address/${nodeAddresses?.ethereum}`, '_blank')
   }
 
   function onInvite() {
@@ -56,7 +56,11 @@ export function AccountWallet(): ReactElement {
       {balance && nodeAddresses ? (
         <>
           <Box mb={0.25}>
-            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+            <ExpandableListItemKey
+              label="Node wallet address"
+              value={Utils.capitalizeAddressERC55(nodeAddresses.ethereum)}
+              expanded
+            />
           </Box>
           <Box mb={0.25}>
             <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
@@ -72,7 +76,7 @@ export function AccountWallet(): ReactElement {
       )}
       <ExpandableListItemActions>
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
-          Check transactions on Blockscout
+          Check transactions
         </SwarmButton>
         {isDesktop && (
           <SwarmButton onClick={onInvite} iconType={Gift}>

src/pages/feeds/CreateNewFeed.tsx

@@ -2,9 +2,9 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
+import { useNavigate } from 'react-router'
 import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
-import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -30,7 +30,7 @@ const initialValues: FormValues = {
 }
 
 export default function CreateNewFeed(): ReactElement {
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { identities, setIdentities } = useContext(FeedsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
@@ -47,7 +47,7 @@ export default function CreateNewFeed(): ReactElement {
       return
     }
     const wallet = generateWallet()
-    const stamps = await beeDebugApi?.getAllPostageBatch()
+    const stamps = await beeApi.getAllPostageBatch()
 
     if (!stamps || !stamps.length) {
       enqueueSnackbar(<span>No stamp available</span>, { variant: 'error' })

src/pages/feeds/UpdateFeed.tsx

@@ -1,16 +1,16 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import X from 'remixicon-react/CloseLineIcon'
-import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SelectEvent, SwarmSelect } from '../../components/SwarmSelect'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as IdentityContext, Identity } from '../../providers/Feeds'
+import { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampContext } from '../../providers/Stamps'
 import { ROUTES } from '../../routes'
@@ -19,7 +19,7 @@ import { FeedPasswordDialog } from './FeedPasswordDialog'
 
 export default function UpdateFeed(): ReactElement {
   const { identities, setIdentities } = useContext(IdentityContext)
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { stamps, refresh } = useContext(StampContext)
   const { status } = useContext(BeeContext)
   const { hash } = useParams()
@@ -66,7 +66,7 @@ export default function UpdateFeed(): ReactElement {
   async function onFeedUpdate(identity: Identity, password?: string) {
     setLoading(true)
 
-    if (!beeApi || !beeDebugApi || !selectedStamp) {
+    if (!beeApi || !selectedStamp) {
       enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
       setLoading(false)
 
@@ -74,7 +74,7 @@ export default function UpdateFeed(): ReactElement {
     }
 
     try {
-      await updateFeed(beeApi, beeDebugApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
+      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
       persistIdentity(identities, identity)
       setIdentities([...identities])
       navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', identity.uuid))

src/pages/files/AssetSyncing.tsx

@@ -0,0 +1,85 @@
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Box } from '@material-ui/core'
+import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
+import { DocumentationText } from '../../components/DocumentationText'
+import { LinearProgressWithLabel } from '../../components/ProgressBar'
+
+interface Props {
+  reference: string
+}
+
+export function AssetSyncing({ reference }: Props): ReactElement {
+  const { beeApi } = useContext(SettingsContext)
+
+  const syncTimer = useRef<NodeJS.Timer>()
+  const [isRetrieveChecking, setIsRetrieveChecking] = useState<boolean>(false)
+  const [syncProgress, setSyncProgress] = useState<number>(0)
+
+  const syncCheck = async () => {
+    if (!beeApi) {
+      return
+    }
+
+    const tags = await beeApi.getAllTags()
+    const tag = tags.find(t => t.address === reference)
+
+    if (tag) {
+      const progress = ((tag.seen + tag.synced) / tag.split) * 100
+      setSyncProgress(progress)
+    }
+  }
+
+  useEffect(() => {
+    syncTimer.current = setInterval(syncCheck, 2000)
+
+    return () => {
+      if (syncTimer.current) {
+        clearInterval(syncTimer.current)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reference])
+
+  useEffect(() => {
+    if (syncProgress === 100 && syncTimer.current) {
+      clearInterval(syncTimer.current)
+    }
+  }, [syncProgress])
+
+  useEffect(() => {
+    /*   
+          There are instances when it seems that the content isn't synchronized, despite being already available.
+          To ensure it's not due to invalid synchronization data,
+          verify availability from at least 70% using one of the stewardship endpoints.
+          
+          TODO: is 70 a good number?
+    */
+    if (beeApi && !isRetrieveChecking && syncProgress > 10 && syncProgress < 100) {
+      // It's a long running task make sure only one run occurs at a time.
+      setIsRetrieveChecking(true)
+
+      beeApi.isReferenceRetrievable(reference).then(isRetriavable => {
+        if (isRetriavable) {
+          setSyncProgress(100)
+        }
+
+        setIsRetrieveChecking(false)
+      })
+    }
+  }, [syncProgress, isRetrieveChecking, beeApi, reference])
+
+  return (
+    <>
+      <Box mb={2}>
+        <DocumentationText>
+          Files are not immediately accessible on the Swarm network. Please wait until your upload is synced to the
+          network.{' '}
+          <a href="https://docs.ethswarm.org/docs/develop/access-the-swarm/syncing">Learn more about syncing</a>.
+        </DocumentationText>
+      </Box>
+      <Box mb={4}>
+        <LinearProgressWithLabel value={syncProgress}></LinearProgressWithLabel>
+      </Box>
+    </>
+  )
+}

src/pages/files/Download.tsx

@@ -10,7 +10,7 @@ import { Context as FileContext, defaultUploadOrigin } from '../../providers/Fil
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { recognizeEnsOrSwarmHash, regexpEns } from '../../utils'
-import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
+import { HISTORY_KEYS, determineHistoryName, putHistory } from '../../utils/local-storage'
 import { ManifestJs } from '../../utils/manifest'
 import { FileNavigation } from './FileNavigation'
 
@@ -84,7 +84,7 @@ export function Download(): ReactElement {
     <>
       {nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <FileNavigation active="DOWNLOAD" />}
       <ExpandableListItemInput
-        label="Swarm Hash"
+        label="Swarm Hash or ENS"
         onConfirm={value => onSwarmIdentifier(value)}
         onChange={validateChange}
         helperText={referenceError}

src/pages/files/Share.tsx

@@ -16,6 +16,7 @@ import { ManifestJs } from '../../utils/manifest'
 import { AssetPreview } from './AssetPreview'
 import { AssetSummary } from './AssetSummary'
 import { DownloadActionBar } from './DownloadActionBar'
+import { AssetSyncing } from './AssetSyncing'
 
 export function Share(): ReactElement {
   const { apiUrl, beeApi } = useContext(SettingsContext)
@@ -152,6 +153,9 @@ export function Share(): ReactElement {
       <Box mb={4}>
         <AssetSummary isWebsite={metadata?.isWebsite} reference={reference} />
       </Box>
+      <Box mb={4}>
+        <AssetSyncing reference={reference} />
+      </Box>
       <DownloadActionBar
         onOpen={onOpen}
         onCancel={onClose}

src/pages/files/Upload.tsx

@@ -18,7 +18,7 @@ import { detectIndexHtml, getAssetNameFromFiles, packageFile } from '../../utils
 import { persistIdentity, updateFeed } from '../../utils/identity'
 import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
 import { FeedPasswordDialog } from '../feeds/FeedPasswordDialog'
-import { PostageStampCreation } from '../stamps/PostageStampCreation'
+import { PostageStampAdvancedCreation } from '../stamps/PostageStampAdvancedCreation'
 import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
@@ -32,7 +32,7 @@ export function Upload(): ReactElement {
   const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
   const { stamps, refresh } = useContext(StampsContext)
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
   const { identities, setIdentities } = useContext(IdentityContext)
   const { status } = useContext(BeeContext)
@@ -125,9 +125,7 @@ export function Upload(): ReactElement {
 
     setUploading(true)
 
-    if (beeDebugApi) {
+    await waitUntilStampUsable(stamp.batchID, beeApi)
-      await waitUntilStampUsable(stamp.batchID, beeDebugApi)
-    }
 
     beeApi
       .uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
@@ -137,13 +135,11 @@ export function Upload(): ReactElement {
         if (uploadOrigin.origin === 'UPLOAD') {
           navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
         } else {
-          updateFeed(beeApi, beeDebugApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(
+          updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => {
-            () => {
+            persistIdentity(identities, identity as Identity)
-              persistIdentity(identities, identity as Identity)
+            setIdentities([...identities])
-              setIdentities([...identities])
+            navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
-              navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
+          })
-            },
-          )
         }
       })
       .catch(e => {
@@ -186,7 +182,7 @@ export function Upload(): ReactElement {
             {hasAnyStamps && stampMode === 'SELECT' ? (
               <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
             ) : (
-              <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
+              <PostageStampAdvancedCreation onFinished={() => setStampMode('SELECT')} />
             )}
           </Box>
           <Box mb={4}>
@@ -204,7 +200,16 @@ export function Upload(): ReactElement {
           </Box>
         </>
       )}
-      {step === 2 && stamp && <StampPreview stamp={stamp} />}
+      {step === 2 && stamp && (
+        <>
+          <StampPreview stamp={stamp} />
+          <Box mb={4}>
+            <DocumentationText>
+              Please do not close the application until your file is uploaded to your local node!
+            </DocumentationText>
+          </Box>
+        </>
+      )}
       <UploadActionBar
         step={step}
         onCancel={reset}

src/pages/info/ChequebookInfoCard.tsx

@@ -17,12 +17,12 @@ export function ChequebookInfoCard() {
       <Card
         buttonProps={{
           iconType: ExchangeFunds,
-          children: 'View chequebook',
+          children: 'Manage chequebook',
           onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
         }}
         icon={<ExchangeFunds />}
         title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
-        subtitle="Current chequebook balance."
+        subtitle="Network transfer balance."
         status="ok"
       />
     )
@@ -32,7 +32,7 @@ export function ChequebookInfoCard() {
     <Card
       buttonProps={{
         iconType: ExchangeFunds,
-        children: 'View chequebook',
+        children: 'Manage chequebook',
         onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
       }}
       icon={<ExchangeFunds />}

src/pages/info/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
+import { ChainSync } from '../../components/ChainSync'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import Map from '../../components/Map'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'
@@ -12,38 +13,34 @@ import NodeInfoCard from './NodeInfoCard'
 import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
-  const {
+  const { beeVersion, status, topology, nodeInfo, chainId } = useContext(BeeContext)
-    debugApiReadiness,
-    status,
-    latestUserVersion,
-    isLatestBeeVersion,
-    latestBeeVersionUrl,
-    topology,
-    nodeInfo,
-    chainId,
-  } = useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', alignContent: 'stretch' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'stretch',
+          alignContent: 'stretch',
+          gap: '8px',
+        }}
+      >
         <NodeInfoCard />
-        {debugApiReadiness && (
+        <WalletInfoCard />
-          <>
+        <ChequebookInfoCard />
-            <div style={{ width: '8px' }}></div>
-            <WalletInfoCard />
-            <div style={{ width: '8px' }}></div>
-            <ChequebookInfoCard />
-          </>
-        )}
       </div>
       <div style={{ height: '16px' }} />
       <Map error={status.topology.checkState !== 'OK'} />
       <div style={{ height: '2px' }} />
       <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
       <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
+      <ExpandableListItem label="Depth" value={topology?.depth ?? '-'} />
+      <ChainSync />
+
       <div style={{ height: '16px' }} />
       {isDesktop && (
         <ExpandableListItem
@@ -65,29 +62,7 @@ export default function Status(): ReactElement {
           }
         />
       )}
-      <ExpandableListItem
+      <ExpandableListItem label="Bee version" value={beeVersion} />
-        label="Bee version"
-        value={
-          <div>
-            <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-              Bee
-            </a>
-            {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && !isDesktop && (
-              <Button
-                size="small"
-                variant="outlined"
-                href={latestBeeVersionUrl}
-                disabled={isLatestBeeVersion}
-                target="_blank"
-                style={{ height: '26px' }}
-              >
-                {isLatestBeeVersion ? 'latest' : 'update'}
-              </Button>
-            )}
-          </div>
-        }
-      />
       <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
       {chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
     </div>

src/pages/restart/LightModeRestart.tsx

@@ -1,35 +1,37 @@
 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 { ReactElement, useContext, useEffect } from 'react'
 import { useNavigate } from 'react-router'
+import { ChainSync } from '../../components/ChainSync'
 import { Waiting } from '../../components/Waiting'
-import { Context } from '../../providers/Bee'
+import { Context } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 
-const STARTED_UPGRADE_AT = 'started-upgrade-at'
-
 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()
+  const { beeApi } = useContext(Context)
 
   useEffect(() => {
-    localStorage.setItem(STARTED_UPGRADE_AT, startedAt.toFixed())
+    if (!beeApi) {
-  }, [startedAt])
-
-  useEffect(() => {
-    if (Date.now() - startedAt < 45_000) {
       return
     }
 
-    if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
+    const interval = setInterval(() => {
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+      beeApi
-      localStorage.removeItem(STARTED_UPGRADE_AT)
+        .getNodeInfo()
-      navigate(ROUTES.INFO)
+        .then(nodeInfo => {
-    }
+          if (nodeInfo.beeMode === BeeModes.LIGHT) {
-  }, [startedAt, navigate, nodeInfo, apiHealth, enqueueSnackbar])
+            enqueueSnackbar('Upgraded to light node', { variant: 'success' })
+            navigate(ROUTES.INFO)
+          }
+        })
+        .catch(console.error) // eslint-disable-line
+    }, 3_000)
+
+    return () => clearInterval(interval)
+  }, [beeApi, enqueueSnackbar, navigate])
 
   return (
     <Grid container direction="column" justifyContent="center" alignItems="center">
@@ -41,9 +43,12 @@ export default function LightModeRestart(): ReactElement {
           <strong>Upgrading Bee</strong>
         </Typography>
       </Box>
-      <Typography>
+      <Box mb={1}>
-        You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
+        <Typography>
-      </Typography>
+          You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
+        </Typography>
+      </Box>
+      <ChainSync />
     </Grid>
   )
 }

src/pages/settings/index.tsx

@@ -10,9 +10,7 @@ import { getDesktopConfiguration, restartBeeNode, setJsonRpcInDesktop } from '..
 export default function SettingsPage(): ReactElement {
   const {
     apiUrl,
-    apiDebugUrl,
     setApiUrl,
-    setDebugApiUrl,
     lockedApiSettings,
     cors,
     dataDir,
@@ -30,7 +28,7 @@ export default function SettingsPage(): ReactElement {
     try {
       setAndPersistJsonRpcProvider(value)
 
-      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['swap-endpoint']
+      const shouldUpdateDesktop = isDesktop && (await getDesktopConfiguration(desktopUrl))['blockchain-rpc-endpoint']
 
       if (shouldUpdateDesktop) {
         await setJsonRpcInDesktop(desktopUrl, value)
@@ -68,12 +66,6 @@ export default function SettingsPage(): ReactElement {
           onConfirm={setApiUrl}
           locked={lockedApiSettings || isDesktop}
         />
-        <ExpandableListItemInput
-          label="Bee Debug API"
-          value={apiDebugUrl}
-          onConfirm={setDebugApiUrl}
-          locked={lockedApiSettings || isDesktop}
-        />
         <ExpandableListItemInput
           label="Blockchain RPC URL"
           value={rpcProviderUrl}

src/pages/stamps/CreatePostageStampAdvancedPage.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react'
 import { useNavigate } from 'react-router'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ROUTES } from '../../routes'
-import { PostageStampCreation } from './PostageStampCreation'
+import { PostageStampAdvancedCreation } from './PostageStampAdvancedCreation'
 
 export function CreatePostageStampPage(): ReactElement {
   const navigate = useNavigate()
@@ -13,8 +13,8 @@ export function CreatePostageStampPage(): ReactElement {
 
   return (
     <div>
-      <HistoryHeader>Buy new postage stamp</HistoryHeader>
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
-      <PostageStampCreation onFinished={onFinished} />
+      <PostageStampAdvancedCreation onFinished={onFinished} />
     </div>
   )
 }

src/pages/stamps/CreatePostageStampStandardPage.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { ROUTES } from '../../routes'
+import { PostageStampStandardCreation } from './PostageStampStandardCreation'
+
+export function CreatePostageStampBasicPage(): ReactElement {
+  const navigate = useNavigate()
+
+  function onFinished() {
+    navigate(ROUTES.ACCOUNT_STAMPS)
+  }
+
+  return (
+    <div>
+      <HistoryHeader>Buy new postage stamp batch</HistoryHeader>
+      <PostageStampStandardCreation onFinished={onFinished} />
+    </div>
+  )
+}

src/pages/stamps/PostageStampAdvancedCreation.tsx

@@ -1,50 +1,66 @@
-import { PostageBatchOptions } from '@ethersphere/bee-js'
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
-import { Box, Grid, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, Typography, createStyles, makeStyles } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactElement, useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
 import Check from 'remixicon-react/CheckLineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmSelect } from '../../components/SwarmSelect'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as StampsContext } from '../../providers/Stamps'
-import {
+import { ROUTES } from '../../routes'
-  calculateStampPrice,
+import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
-  convertAmountToSeconds,
-  convertDepthToBytes,
-  secondsToTimeString,
-  waitUntilStampExists,
-} from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 
 interface Props {
   onFinished: () => void
 }
 
-export function PostageStampCreation({ onFinished }: Props): ReactElement {
+const useStyles = makeStyles(() =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+    stampVolumeWrapper: {
+      width: 'fit-content',
+      '& button': {
+        marginLeft: 4,
+        width: 24,
+        padding: 2,
+      },
+    },
+  }),
+)
+
+export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
   const { chainState } = useContext(BeeContext)
   const { refresh } = useContext(StampsContext)
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
 
   const [depthInput, setDepthInput] = useState<string>('')
   const [amountInput, setAmountInput] = useState<string>('')
   const [labelInput, setLabelInput] = useState('')
   const [immutable, setImmutable] = useState(false)
-  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [depthError, setDepthError] = useState<string>('')
+  const [amountError, setAmountError] = useState<string>('')
   const [submitting, setSubmitting] = useState(false)
 
   const { enqueueSnackbar } = useSnackbar()
 
-  function getFileSize(depth: number): string {
-    if (isNaN(depth) || depth < 17 || depth > 255) {
-      return '-'
-    }
-
-    return `~${getHumanReadableFileSize(convertDepthToBytes(depth))}`
-  }
-
   function getTtl(amount: number): string {
     const isCurrentPriceAvailable = chainState && chainState.currentPrice
 
@@ -56,7 +72,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
 
     return `${secondsToTimeString(
       convertAmountToSeconds(amount, pricePerBlock),
-    )} (with price of ${pricePerBlock.toFixed(0)} per block)`
+    )} (with price of ${pricePerBlock.toFixed(0)} PLUR per block)`
   }
 
   function getPrice(depth: number, amount: bigint): string {
@@ -78,7 +94,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
         return
       }
 
-      if (!beeDebugApi) {
+      if (!beeApi) {
         return
       }
 
@@ -91,8 +107,8 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
         immutableFlag: immutable,
       }
 
-      const batchId = await beeDebugApi.createPostageBatch(amount.toString(), depth, options)
+      const batchId = await beeApi.createPostageBatch(amount.toString(), depth, options)
-      await waitUntilStampExists(batchId, beeDebugApi)
+      await waitUntilStampExists(batchId, beeApi)
       await refresh()
       onFinished()
     } catch (e) {
@@ -102,41 +118,83 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
     setSubmitting(false)
   }
 
-  useEffect(() => {
+  function validateAmountInput(amountInput: string) {
-    function validate() {
+    let validAmountInput = '0'
-      const errors: Record<string, string> = {}
 
-      if (!depthInput) {
+    if (!amountInput) {
-        errors.depth = 'Required field'
+      setAmountError('Required field')
-      } else {
+    } else {
-        const depth = new BigNumber(depthInput)
+      if (amountInput.indexOf('.') > -1) {
-
+        setAmountError('Amount must be an integer')
-        if (!depth.isInteger()) {
-          errors.depth = 'Depth must be an integer'
-        } else if (depth.isLessThan(17)) {
-          errors.depth = 'Minimal depth is 17'
-        } else if (depth.isGreaterThan(255)) {
-          errors.depth = 'Depth has to be at most 255'
-        }
-      }
-
-      if (!amountInput) {
-        errors.amount = 'Required field'
       } else {
         const amount = new BigNumber(amountInput)
 
-        if (!amount.isInteger()) {
+        if (amount.isNaN()) {
-          errors.amount = 'Amount must be an integer'
+          setAmountError('Amount must contain only digits')
         } else if (amount.isLessThanOrEqualTo(0)) {
-          errors.amount = 'Amount must be greater than 0'
+          setAmountError('Amount must be greater than 0')
+        } else {
+          setAmountError('')
+          validAmountInput = amountInput
         }
       }
-
-      return errors
     }
 
-    setErrors(validate())
+    setAmountInput(validAmountInput)
-  }, [depthInput, amountInput])
+  }
+
+  function validateDepthInput(depthInput: string) {
+    let validDepthInput = '0'
+
+    if (!depthInput) {
+      setDepthError('Required field')
+    } else {
+      const depth = new BigNumber(depthInput)
+
+      if (!depth.isInteger()) {
+        setDepthError('Depth must be an integer')
+      } else if (depth.isLessThan(17)) {
+        setDepthError('Minimal depth is 17')
+      } else if (depth.isGreaterThan(255)) {
+        setDepthError('Depth has to be at most 255')
+      } else {
+        setDepthError('')
+        validDepthInput = depthInput
+      }
+    }
+
+    setDepthInput(validDepthInput)
+  }
+
+  function renderStampVolumesInfo() {
+    const depth = parseInt(depthInput, 10)
+
+    if (depthError || isNaN(depth) || depth < 17 || depth > 255) {
+      return '-'
+    }
+
+    const theoreticalMaximumVolume = getHumanReadableFileSize(Utils.getStampMaximumCapacityBytes(depth))
+    const effectiveVolume = getHumanReadableFileSize(Utils.getStampEffectiveBytes(depth))
+
+    return (
+      <Grid item container alignItems="center" className={classes.stampVolumeWrapper}>
+        <Typography>
+          Theoretical: ~{theoreticalMaximumVolume} / Effective: ~{effectiveVolume}
+        </Typography>
+        <IconButton
+          onClick={() =>
+            window.open(
+              'https://docs.ethswarm.org/docs/learn/technology/contracts/postage-stamp/#effective-utilisation-table',
+              '_blank',
+              'noopener,noreferrer',
+            )
+          }
+        >
+          <Info />
+        </IconButton>
+      </Grid>
+    )
+  }
 
   return (
     <>
@@ -155,22 +213,24 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
         </Typography>
       </Box>
       <Box mb={2}>
-        <SwarmTextInput name="depth" label="Depth" onChange={event => setDepthInput(event.target.value)} />
+        <SwarmTextInput name="depth" label="Depth" onChange={event => validateDepthInput(event.target.value)} />
         <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
-          <Grid container justifyContent="space-between">
+          <Grid container justifyContent="space-between" alignItems="center">
             <Typography>Corresponding file size</Typography>
-            <Typography>{!errors.depth && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'}</Typography>
+            {renderStampVolumesInfo()}
           </Grid>
         </Box>
+        {depthError && <Typography>{depthError}</Typography>}
       </Box>
       <Box mb={2}>
-        <SwarmTextInput name="amount" label="Amount" onChange={event => setAmountInput(event.target.value)} />
+        <SwarmTextInput name="amount" label="Amount" onChange={event => validateAmountInput(event.target.value)} />
         <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
           <Grid container justifyContent="space-between">
             <Typography>Corresponding TTL (Time to live)</Typography>
-            <Typography>{!errors.amount && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
+            <Typography>{!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'}</Typography>
           </Grid>
         </Box>
+        {amountError && <Typography>{amountError}</Typography>}
       </Box>
       <Box mb={2}>
         <SwarmTextInput name="label" label="Label" optional onChange={event => setLabelInput(event.target.value)} />
@@ -206,20 +266,30 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
         <Grid container justifyContent="space-between">
           <Typography>Indicative Price</Typography>
           <Typography>
-            {!errors.amount && !errors.depth && amountInput && depthInput
+            {!amountError && !depthError && amountInput && depthInput
               ? getPrice(parseInt(depthInput, 10), BigInt(amountInput))
               : '-'}
           </Typography>
         </Grid>
       </Box>
-      <SwarmButton
+
-        disabled={submitting || Object.keys(errors).length > 0}
+      <Grid container justifyContent="space-between" alignItems="center">
-        onClick={submit}
+        <Grid item>
-        iconType={Check}
+          <SwarmButton
-        loading={submitting}
+            disabled={submitting || Boolean(depthError) || Boolean(amountError) || !depthInput || !amountInput}
-      >
+            onClick={submit}
-        Buy New Stamp
+            iconType={Check}
-      </SwarmButton>
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} className={classes.link}>
+            Standard mode
+          </Link>
+        </Grid>
+      </Grid>
     </>
   )
 }

src/pages/stamps/PostageStampSelector.tsx

@@ -23,7 +23,10 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
 
   return (
     <SwarmSelect
-      options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
+      options={(stamps || []).map(x => ({
+        label: x.label ? x.batchID.slice(0, 8) + ' - ' + x.label : x.batchID.slice(0, 8),
+        value: x.batchID,
+      }))}
       onChange={event => onChange(event.target.value as string)}
       defaultValue={defaultValue}
       placeholder="Please select a postage stamp..."

src/pages/stamps/PostageStampStandardCreation.tsx

@@ -0,0 +1,228 @@
+import { PostageBatchOptions, Utils } from '@ethersphere/bee-js'
+import { Box, Button, Grid, Slider, Typography } from '@material-ui/core'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { useSnackbar } from 'notistack'
+import { ReactElement, useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Check from 'remixicon-react/CheckLineIcon'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as StampsContext } from '../../providers/Stamps'
+import { ROUTES } from '../../routes'
+import { calculateStampPrice, convertAmountToSeconds, secondsToTimeString, waitUntilStampExists } from '../../utils'
+
+interface Props {
+  onFinished: () => void
+}
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#dd7700',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+    buttonSelected: {
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+    },
+  }),
+)
+
+const marks = [
+  { value: 1, label: '1 day' },
+  { value: 365, label: '365 days' },
+]
+
+export function PostageStampStandardCreation({ onFinished }: Props): ReactElement {
+  const classes = useStyles()
+  const { refresh } = useContext(StampsContext)
+  const { beeApi } = useContext(SettingsContext)
+
+  const [depthInput, setDepthInput] = useState<number>(Utils.getDepthForCapacity(4))
+  const [amountInput, setAmountInput] = useState<string>(Utils.getAmountForTtl(30))
+  const [labelInput, setLabelInput] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [buttonValue, setButtonValue] = useState(4)
+
+  function sliderValueChange(_: unknown, newValue: number | number[]) {
+    if (typeof newValue !== 'number') {
+      return
+    }
+    const amountValue = Utils.getAmountForTtl(newValue)
+    setAmountInput(amountValue)
+  }
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  function getTtl(amount: string): string {
+    const pricePerBlock = 24000
+
+    return `${secondsToTimeString(
+      convertAmountToSeconds(parseInt(amount, 10), pricePerBlock),
+    )} (with price of ${pricePerBlock.toFixed(0)} PLUR per block)`
+  }
+
+  function getPrice(depth: number, amount: bigint): string {
+    const price = calculateStampPrice(depth, amount)
+
+    return `${price.toSignificantDigits()} xBZZ`
+  }
+
+  async function submit() {
+    try {
+      // This is really just a typeguard, the validation pretty much guarantees these will have the right values
+      if (!depthInput || !amountInput) {
+        return
+      }
+
+      if (!beeApi) {
+        return
+      }
+
+      setSubmitting(true)
+      const amount = BigInt(amountInput)
+      const depth = depthInput
+      const options: PostageBatchOptions = {
+        waitForUsable: false,
+        label: labelInput || undefined,
+        immutableFlag: true,
+      }
+
+      const batchId = await beeApi.createPostageBatch(amount.toString(), depth, options)
+      await waitUntilStampExists(batchId, beeApi)
+      await refresh()
+      onFinished()
+    } catch (e) {
+      console.error(e) // eslint-disable-line
+      enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
+    }
+    setSubmitting(false)
+  }
+
+  function handleBatchSize(gigabytes: number) {
+    setButtonValue(gigabytes)
+    const capacity = Utils.getDepthForCapacity(gigabytes)
+    setDepthInput(capacity)
+  }
+
+  return (
+    <>
+      <Box mb={4}>
+        <Typography>
+          A postage stamp batch containes postage stamps that will give you the right to upload data to the Swarm
+          network. If you&apos;re not familiar with this, please read&nbsp;
+          <a
+            href="https://medium.com/ethereum-swarm/how-to-upload-data-to-the-swarm-network-c0766c3ae381"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this guide
+          </a>
+          .
+        </Typography>
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Batch name</Typography>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput name="depth" label="Label" onChange={e => setLabelInput(e.target.value)} />
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Batch size</Typography>
+      </Box>
+      <Box mb={2}>
+        <Grid container justifyContent="space-between" spacing={2}>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(4)}
+              className={buttonValue === 4 ? classes.buttonSelected : ''}
+            >
+              4 GB
+            </Button>
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(32)}
+              className={buttonValue === 32 ? classes.buttonSelected : ''}
+            >
+              32 GB
+            </Button>
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={() => handleBatchSize(256)}
+              className={buttonValue === 256 ? classes.buttonSelected : ''}
+            >
+              256 GB
+            </Button>
+          </Grid>
+        </Grid>
+      </Box>
+      <Box mb={1}>
+        <Typography variant="h2">Data persistence</Typography>
+      </Box>
+      <Box mb={2}>
+        <Slider
+          aria-label="Volume"
+          min={1}
+          max={365}
+          step={1}
+          marks={marks}
+          valueLabelDisplay="auto"
+          defaultValue={30}
+          onChange={sliderValueChange}
+        />
+      </Box>
+      <Box mb={2}>
+        <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
+          <Grid container justifyContent="space-between">
+            <Typography>Corresponding TTL (Time to live)</Typography>
+            <Typography>{amountInput ? getTtl(amountInput) : '-'}</Typography>
+          </Grid>
+        </Box>
+        <Box display="flex" justifyContent={'right'} mt={0.5}>
+          <Typography style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.26)' }}>
+            Current price of 24000 PLUR per block
+          </Typography>
+        </Box>
+      </Box>
+      <Box mb={4} sx={{ bgcolor: '#fcf2e8' }} p={2}>
+        <Grid container justifyContent="space-between">
+          <Typography>Indicative Price</Typography>
+          <Typography>{getPrice(depthInput, BigInt(amountInput))}</Typography>
+        </Grid>
+      </Box>
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <SwarmButton
+            disabled={submitting || !depthInput || !amountInput}
+            onClick={submit}
+            iconType={Check}
+            loading={submitting}
+          >
+            Buy New Stamp
+          </SwarmButton>
+        </Grid>
+        <Grid item>
+          <Link to={ROUTES.ACCOUNT_STAMPS_NEW_ADVANCED} className={classes.link}>
+            Advanced mode
+          </Link>
+        </Grid>
+      </Grid>
+    </>
+  )
+}

src/pages/stamps/StampsTable.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, useContext } from 'react'
-import TimerFlash from 'remixicon-react/TimerFlashFillIcon'
+import TimerFlashFill from 'remixicon-react/TimerFlashFillIcon'
+import TimerFlashLine from 'remixicon-react/TimerFlashLineIcon'
 import ExpandableElement from '../../components/ExpandableElement'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'
@@ -17,9 +18,9 @@ interface Props {
 }
 
 function StampsTable({ postageStamps }: Props): ReactElement | null {
-  const { beeDebugApi } = useContext(Context)
+  const { beeApi } = useContext(Context)
 
-  if (!postageStamps || !beeDebugApi) {
+  if (!postageStamps || !beeApi) {
     return null
   }
 
@@ -50,9 +51,15 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
               <ExpandableListItem label="Purchase Block Number" value={stamp.blockNumber} />
               <ExpandableListItemActions>
                 <StampExtensionModal
-                  label="Topup & Dilute"
+                  type="Topup"
-                  icon={<TimerFlash size="1rem" />}
+                  icon={<TimerFlashFill size="1rem" />}
-                  beeDebug={beeDebugApi}
+                  bee={beeApi}
+                  stamp={stamp.batchID}
+                />
+                <StampExtensionModal
+                  type="Dilute"
+                  icon={<TimerFlashLine size="1rem" />}
+                  bee={beeApi}
                   stamp={stamp.batchID}
                 />
               </ExpandableListItemActions>

src/pages/stamps/index.tsx

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

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,19 +1,20 @@
-import { useContext } from 'react'
-import DepositModal from '../../../containers/DepositModal'
 import type { ReactElement, ReactNode } from 'react'
+import { useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
 import StatusIcon from '../../../components/StatusIcon'
+import DepositModal from '../../../containers/DepositModal'
 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 || debugApiCheckState === CheckState.ERROR) return null
+  if (!isEnabled) {
+    return null
+  }
 
   let text: ReactNode
 

src/pages/status/SetupSteps/DebugConnectionCheck.tsx

@@ -1,88 +0,0 @@
-import MuiAlert from '@material-ui/lab/Alert'
-import { ReactElement, useContext } from 'react'
-import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItem from '../../../components/ExpandableListItem'
-import ExpandableListItemInput from '../../../components/ExpandableListItemInput'
-import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
-import StatusIcon from '../../../components/StatusIcon'
-import { CheckState, Context } from '../../../providers/Bee'
-import { Context as SettingsContext } from '../../../providers/Settings'
-
-export default function NodeConnectionCheck(): ReactElement | null {
-  const { status, isLoading } = useContext(Context)
-  const { setDebugApiUrl, apiDebugUrl, isDesktop } = useContext(SettingsContext)
-  const { checkState, isEnabled } = status.debugApiConnection
-
-  if (!isEnabled) return null
-
-  return (
-    <ExpandableList
-      label={
-        <>
-          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Bee Debug API
-        </>
-      }
-    >
-      <ExpandableListItemNote>
-        {checkState === CheckState.OK
-          ? '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 && !isDesktop && (
-        <ExpandableList level={1} label="Troubleshoot">
-          <ExpandableListItem
-            label={
-              <ol>
-                <li>Check the status of your node by running the below command to see if your node is running.</li>
-                <CodeBlockTabs showLineNumbers linux={`sudo systemctl status bee`} mac={`brew services list`} />
-                <li>
-                  If your node is running, check your firewall settings to make sure that port 1635 (or your custom
-                  specified port) is bound to localhost. If your node is not running try executing the below command to
-                  start your bee node
-                </li>
-                <MuiAlert
-                  style={{ marginTop: '10px', marginBottom: '10px' }}
-                  elevation={6}
-                  variant="filled"
-                  severity="error"
-                >
-                  Your debug node API should never be completely open to the internet. If you want to connect remotely,
-                  make sure your firewall settings are set to only allow specific trusted IP addresses and block all
-                  other ports. A simple google search for &quot;what is my ip&quot; will show you your computers public
-                  IP address to allow.
-                </MuiAlert>
-                <CodeBlockTabs
-                  showLineNumbers
-                  linux={`sudo systemctl start bee`}
-                  mac={`brew services start swarm-bee`}
-                />
-                <li>Run the commands to validate your node is running and see the log output.</li>
-                <CodeBlockTabs
-                  showLineNumbers
-                  linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
-                  mac={`brew services list \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
-                />
-                <li>
-                  Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross
-                  Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
-                  <strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
-                  <strong>cors-allowed-origins</strong> must be set to your host domain or IP (you can also use the
-                  wildcard <code>{"cors-allowed-origins: ['*']"}</code>). If edits are made to the configuration run the
-                  restart command below for changes to take effect.
-                </li>
-                <CodeBlockTabs
-                  showLineNumbers
-                  linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
-                  mac={`sudo vi /usr/local/etc/swarm-bee/bee.yaml \nbrew services restart swarm-bee`}
-                />
-              </ol>
-            }
-          />
-        </ExpandableList>
-      )}
-    </ExpandableList>
-  )
-}

src/pages/status/SetupSteps/EthereumConnectionCheck.tsx

@@ -1,44 +0,0 @@
-import { ReactElement, useContext } from 'react'
-import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
-import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
-import StatusIcon from '../../../components/StatusIcon'
-import { CheckState, Context } from '../../../providers/Bee'
-
-export default function EthereumConnectionCheck(): ReactElement | null {
-  const { status, isLoading, nodeAddresses } = useContext(Context)
-  const { checkState, isEnabled } = status.blockchainConnection
-
-  if (!isEnabled) return null
-
-  return (
-    <ExpandableList
-      label={
-        <>
-          <StatusIcon checkState={checkState} isLoading={isLoading} /> Connection to Blockchain
-        </>
-      }
-    >
-      <ExpandableListItemNote>
-        {checkState === CheckState.OK ? (
-          'Your node is connected to the xDai blockchain'
-        ) : (
-          <>
-            Your Bee node must have access to the xDai blockchain, so that it can interact and deploy your chequebook
-            contract. You can run{' '}
-            <a href="https://www.xdaichain.com/" rel="noreferrer" target="_blank">
-              your own xDai node
-            </a>
-            , or use a provider instead - we recommend{' '}
-            <a href="https://getblock.io/" rel="noreferrer" target="_blank">
-              Getblock
-            </a>
-            . By default, Bee expects a local node at http://localhost:8545. To use a provider instead, simply change
-            the <strong>swap-endpoint</strong> in your configuration file.
-          </>
-        )}
-      </ExpandableListItemNote>
-      {nodeAddresses?.ethereum && <ExpandableListItemKey label="Ethereum Address" value={nodeAddresses?.ethereum} />}
-    </ExpandableList>
-  )
-}

src/pages/status/SetupSteps/PeerConnection.tsx

@@ -1,16 +1,17 @@
 import { ReactElement, ReactNode, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
-import TopologyStats from '../../../components/TopologyStats'
 import StatusIcon from '../../../components/StatusIcon'
+import TopologyStats from '../../../components/TopologyStats'
 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 || debugApiCheckState === CheckState.ERROR) return null
+  if (!isEnabled) {
+    return null
+  }
 
   let text: ReactNode
   switch (checkState) {

src/pages/status/SetupSteps/VersionCheck.tsx

@@ -1,49 +0,0 @@
-import { ReactElement, useContext } from 'react'
-import CodeBlockTabs from '../../../components/CodeBlockTabs'
-import ExpandableList from '../../../components/ExpandableList'
-import ExpandableListItem from '../../../components/ExpandableListItem'
-import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
-import StatusIcon from '../../../components/StatusIcon'
-import { CheckState, Context } from '../../../providers/Bee'
-
-export default function VersionCheck(): ReactElement | null {
-  const { status, isLoading, latestUserVersion, latestPublishedVersion, latestBeeVersionUrl } = useContext(Context)
-  const { isEnabled, checkState } = status.version
-
-  if (!isEnabled) return null
-
-  return (
-    <ExpandableList
-      label={
-        <>
-          <StatusIcon checkState={checkState} isLoading={isLoading} /> Bee Version
-        </>
-      }
-    >
-      <ExpandableListItemNote>
-        {checkState === CheckState.OK ? (
-          'You are running the latest version of Bee.'
-        ) : (
-          <>
-            Your Bee version is out of date. Please update to the{' '}
-            <a href={latestBeeVersionUrl} rel="noreferrer" target="_blank">
-              latest
-            </a>{' '}
-            before continuing. Rerun the installation script below to upgrade. For more information please see the{' '}
-            <a href="https://docs.ethswarm.org/docs/installation/manual#upgrading-bee" rel="noreferrer" target="_blank">
-              Docs
-            </a>
-            .
-            <CodeBlockTabs
-              showLineNumbers
-              linux={`bee version\nwget https://github.com/ethersphere/bee/releases/download/${latestPublishedVersion}/bee_${latestPublishedVersion}_amd64.deb\nsudo dpkg -i bee_${latestPublishedVersion}_amd64.deb`}
-              mac={`bee version\nbrew tap ethersphere/tap\nbrew install swarm-bee\nbrew services start swarm-bee`}
-            />
-          </>
-        )}
-      </ExpandableListItemNote>
-      <ExpandableListItem label="Your Version" value={latestUserVersion || '-'} />
-      <ExpandableListItem label="Latest Version" value={latestPublishedVersion || '-'} />
-    </ExpandableList>
-  )
-}

src/pages/status/index.tsx

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

src/pages/top-up/Swap.tsx

@@ -13,13 +13,14 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
-import { BzzToken, BZZ_DECIMAL_PLACES } from '../../models/BzzToken'
+import { BZZ_DECIMAL_PLACES, BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 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 { SwapError, isSwapError, wrapWithSwapError } from '../../utils/SwapError'
 import {
   getBzzPriceAsDai,
   getDesktopConfiguration,
@@ -28,7 +29,6 @@ import {
   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'
@@ -162,12 +162,12 @@ export function Swap({ header }: Props): ReactElement {
       )
     }
 
-    if (!desktopConfiguration['swap-endpoint']) {
+    if (!desktopConfiguration['blockchain-rpc-endpoint']) {
-      throw new SwapError('Swap endpoint is not configured in Swarm Desktop')
+      throw new SwapError('Blockchain RPC endpoint is not configured in Swarm Desktop')
     }
     await wrapWithSwapError(
-      Rpc.getNetworkChainId(desktopConfiguration['swap-endpoint']),
+      Rpc.getNetworkChainId(desktopConfiguration['blockchain-rpc-endpoint']),
-      `Swap endpoint not reachable at ${desktopConfiguration['swap-endpoint']}`,
+      `Blockchain RPC endpoint not reachable at ${desktopConfiguration['blockchain-rpc-endpoint']}`,
     )
     await wrapWithSwapError(sendSwapRequest(daiToSwap), GENERIC_SWAP_FAILED_ERROR_MESSAGE)
   }

src/pages/top-up/index.tsx

@@ -13,7 +13,7 @@ import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../providers/Bee'
+import { Context as BeeContext, CheckState } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'

src/providers/Bee.tsx

@@ -2,7 +2,6 @@ import {
   BeeModes,
   ChainState,
   ChequebookAddressResponse,
-  Health,
   LastChequesResponse,
   NodeAddresses,
   NodeInfo,
@@ -10,8 +9,6 @@ import {
   Topology,
 } from '@ethersphere/bee-js'
 import { ReactChild, ReactElement, createContext, useContext, useEffect, useState } from 'react'
-import semver from 'semver'
-import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 import { BzzToken } from '../models/BzzToken'
 import { Token } from '../models/Token'
@@ -38,25 +35,16 @@ interface StatusItem {
 
 interface Status {
   all: CheckState
-  version: StatusItem
-  blockchainConnection: StatusItem
-  debugApiConnection: StatusItem
   apiConnection: StatusItem
   topology: StatusItem
   chequebook: StatusItem
 }
 
 interface ContextInterface {
+  beeVersion: string | null
   status: Status
-  latestPublishedVersion?: string
-  latestUserVersion?: string
-  latestUserVersionExact?: string
-  isLatestBeeVersion: boolean
-  latestBeeVersionUrl: string
   error: Error | null
   apiHealth: boolean
-  debugApiHealth: Health | null
-  debugApiReadiness: boolean
   nodeAddresses: NodeAddresses | null
   nodeInfo: NodeInfo | null
   topology: Topology | null
@@ -78,24 +66,15 @@ interface ContextInterface {
 }
 
 const initialValues: ContextInterface = {
+  beeVersion: null,
   status: {
     all: CheckState.ERROR,
-    version: { isEnabled: false, checkState: CheckState.ERROR },
-    blockchainConnection: { isEnabled: false, checkState: CheckState.ERROR },
-    debugApiConnection: { isEnabled: false, checkState: CheckState.ERROR },
     apiConnection: { isEnabled: false, checkState: CheckState.ERROR },
     topology: { isEnabled: false, checkState: CheckState.ERROR },
     chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
-  latestPublishedVersion: undefined,
-  latestUserVersion: undefined,
-  latestUserVersionExact: undefined,
-  isLatestBeeVersion: false,
-  latestBeeVersionUrl: 'https://github.com/ethersphere/bee/releases/latest',
   error: null,
   apiHealth: false,
-  debugApiHealth: null,
-  debugApiReadiness: false,
   nodeAddresses: null,
   nodeInfo: null,
   topology: null,
@@ -124,37 +103,16 @@ interface Props {
 }
 
 function getStatus(
-  debugApiHealth: Health | 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 = !isDesktop
-  status.version.checkState =
-    debugApiHealth &&
-    semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
-      includePrerelease: true,
-    })
-      ? CheckState.OK
-      : CheckState.WARNING
-
-  // Blockchain connection check
-  status.blockchainConnection.isEnabled = true
-  status.blockchainConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
-
-  // Debug API connection check
-  status.debugApiConnection.isEnabled = true
-  status.debugApiConnection.checkState = Boolean(debugApiHealth?.status === 'ok') ? CheckState.OK : CheckState.ERROR
-
   // API connection check
   status.apiConnection.isEnabled = true
   status.apiConnection.checkState = apiHealth ? CheckState.OK : CheckState.ERROR
@@ -174,17 +132,12 @@ function getStatus(
     } else status.chequebook.checkState = CheckState.OK
   }
 
-  status.all = determineOverallStatus(debugApiHealth, debugApiReadiness, status, startedAt)
+  status.all = determineOverallStatus(status, startedAt)
 
   return status
 }
 
-function determineOverallStatus(
+function determineOverallStatus(status: Status, startedAt: number): CheckState {
-  debugApiHealth: Health | null,
-  debugApiReadiness: boolean,
-  status: Status,
-  startedAt: number,
-): CheckState {
   const hasErrors = Object.values(status).some(
     ({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR,
   )
@@ -193,9 +146,7 @@ function determineOverallStatus(
   )
   const isInGracePeriod = Date.now() - startedAt < LAUNCH_GRACE_PERIOD
 
-  if (debugApiHealth?.status === 'ok' && !debugApiReadiness) {
+  if (hasErrors && isInGracePeriod) {
-    return CheckState.STARTING
-  } else if (hasErrors && isInGracePeriod) {
     return CheckState.CONNECTING
   } else if (hasErrors) {
     return CheckState.ERROR
@@ -209,19 +160,14 @@ function determineOverallStatus(
 // 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
 
-interface InitialSettings {
+interface Props {
-  isDesktop?: boolean
-}
-
-interface Props extends InitialSettings {
   children: ReactChild
 }
 
-export function Provider({ children, isDesktop }: Props): ReactElement {
+export function Provider({ children }: Props): ReactElement {
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
+  const [beeVersion, setBeeVersion] = useState<string | null>(null)
   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)
@@ -243,10 +189,6 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
   const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
   const [frequency, setFrequency] = useState<number | null>(30000)
 
-  const latestPublishedVersion = semver.coerce(latestBeeRelease?.name)?.version
-  const latestUserVersion = semver.coerce(debugApiHealth?.version)?.version
-  const latestUserVersionExact = debugApiHealth?.version
-
   useEffect(() => {
     setIsLoading(true)
 
@@ -257,8 +199,6 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
 
   useEffect(() => {
     setIsLoading(true)
-
-    setDebugApiHealth(null)
     setNodeAddresses(null)
     setNodeTopology(null)
     setNodeInfo(null)
@@ -270,15 +210,19 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
     setSettlements(null)
     setChainState(null)
 
-    if (beeDebugApi !== null) refresh()
+    if (beeApi !== null) {
-  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
+      refresh()
+    }
+  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
-    if (isRefreshing) return
+    if (isRefreshing) {
+      return
+    }
 
     // Not a valid bee api
-    if (!beeApi || !beeDebugApi) {
+    if (!beeApi) {
       setIsLoading(false)
 
       return
@@ -290,7 +234,7 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
 
       // Wrap the chequebook balance call to return BZZ values as Token object
       const chequeBalanceWrapper = async () => {
-        const { totalBalance, availableBalance } = await beeDebugApi.getChequebookBalance({ timeout: TIMEOUT })
+        const { totalBalance, availableBalance } = await beeApi.getChequebookBalance({ timeout: TIMEOUT })
 
         return {
           totalBalance: new Token(totalBalance),
@@ -300,14 +244,14 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
 
       // Wrap the balances call to return BZZ values as Token object
       const peerBalanceWrapper = async () => {
-        const { balances } = await beeDebugApi.getAllBalances({ timeout: TIMEOUT })
+        const { balances } = await beeApi.getAllBalances({ timeout: TIMEOUT })
 
         return balances.map(({ peer, balance }) => ({ peer, balance: new Token(balance) }))
       }
 
       // Wrap the settlements call to return BZZ values as Token object
       const settlementsWrapper = async () => {
-        const { totalReceived, settlements, totalSent } = await beeDebugApi.getAllSettlements({ timeout: TIMEOUT })
+        const { totalReceived, settlements, totalSent } = await beeApi.getAllSettlements({ timeout: TIMEOUT })
 
         return {
           totalReceived: new Token(totalReceived),
@@ -323,66 +267,58 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
       const promises = [
         // API health
         beeApi
-          .isConnected({ timeout: TIMEOUT })
-          .then(setApiHealth)
-          .catch(() => setApiHealth(false)),
-
-        // Debug API health
-        beeDebugApi
           .getHealth({ timeout: TIMEOUT })
-          .then(setDebugApiHealth)
+          .then(response => setBeeVersion(response.version))
-          .catch(() => setDebugApiHealth(null)),
+          .then(() => setApiHealth(true))
-
+          .catch(() => {
-        // Debug API readiness
+            setBeeVersion(null)
-        beeDebugApi
+            setApiHealth(false)
-          .getReadiness({ timeout: TIMEOUT })
+          }),
-          .then(setDebugApiReadiness)
-          .catch(() => setDebugApiReadiness(false)),
 
         // Node Addresses
-        beeDebugApi
+        beeApi
           .getNodeAddresses({ timeout: TIMEOUT })
           .then(setNodeAddresses)
           .catch(() => setNodeAddresses(null)),
 
         // NodeInfo
-        beeDebugApi
+        beeApi
           .getNodeInfo({ timeout: TIMEOUT })
           .then(setNodeInfo)
           .catch(() => setNodeInfo(null)),
 
         // Network Topology
-        beeDebugApi
+        beeApi
           .getTopology({ timeout: TIMEOUT })
           .then(setNodeTopology)
           .catch(() => setNodeTopology(null)),
 
         // Peers
-        beeDebugApi
+        beeApi
           .getPeers({ timeout: TIMEOUT })
           .then(setPeers)
           .catch(() => setPeers(null)),
 
         // Chequebook address
-        beeDebugApi
+        beeApi
           .getChequebookAddress({ timeout: TIMEOUT })
           .then(setChequebookAddress)
           .catch(() => setChequebookAddress(null)),
 
         // Cheques
-        beeDebugApi
+        beeApi
           .getLastCheques({ timeout: TIMEOUT })
           .then(setPeerCheques)
           .catch(() => setPeerCheques(null)),
 
         // Chain state
-        beeDebugApi
+        beeApi
           .getChainState({ timeout: TIMEOUT })
           .then(setChainState)
           .catch(() => setChainState(null)),
 
         // Wallet
-        beeDebugApi
+        beeApi
           .getWalletBalance({ timeout: TIMEOUT })
           .then(({ chainID }) => setChainId(chainID))
           .catch(() => setChainId(null)),
@@ -392,7 +328,7 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
           .then(setChequebookBalance)
           .catch(() => setChequebookBalance(null)),
 
-        beeDebugApi
+        beeApi
           .getStake({ timeout: TIMEOUT })
           .then(stake => setStake(new BzzToken(stake)))
           .catch(() => setStake(null)),
@@ -424,18 +360,7 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
   }
   const stop = () => setFrequency(null)
 
-  const status = getStatus(
+  const status = getStatus(nodeInfo, apiHealth, topology, chequebookAddress, chequebookBalance, error, startedAt)
-    debugApiHealth,
-    debugApiReadiness,
-    nodeInfo,
-    apiHealth,
-    topology,
-    chequebookAddress,
-    chequebookBalance,
-    error,
-    Boolean(isDesktop),
-    startedAt,
-  )
 
   useEffect(() => {
     let newFrequency = REFRESH_WHEN_OK
@@ -453,27 +378,15 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency, beeDebugApi, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [frequency, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider
       value={{
+        beeVersion,
         status,
-        latestUserVersion,
-        latestUserVersionExact,
-        latestPublishedVersion,
-        isLatestBeeVersion: Boolean(
-          latestPublishedVersion &&
-            latestUserVersion &&
-            semver.satisfies(latestPublishedVersion, latestUserVersion, {
-              includePrerelease: true,
-            }),
-        ),
-        latestBeeVersionUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
         error,
         apiHealth,
-        debugApiHealth,
-        debugApiReadiness,
         nodeAddresses,
         nodeInfo,
         topology,

src/providers/Settings.tsx

@@ -1,7 +1,7 @@
-import { Bee, BeeDebug } from '@ethersphere/bee-js'
+import { Bee } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
 import { ReactElement, ReactNode, createContext, useEffect, useState } from 'react'
-import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
+import { DEFAULT_BEE_API_HOST, DEFAULT_RPC_URL } from '../constants'
 import { useGetBeeConfig } from '../hooks/apiHooks'
 
 const LocalStorageKeys = {
@@ -10,9 +10,7 @@ const LocalStorageKeys = {
 
 interface ContextInterface {
   apiUrl: string
-  apiDebugUrl: string
   beeApi: Bee | null
-  beeDebugApi: BeeDebug | null
   lockedApiSettings: boolean
   desktopApiKey: string
   isDesktop: boolean
@@ -23,7 +21,6 @@ interface ContextInterface {
   dataDir: string | null
   ensResolver: string | null
   setApiUrl: (url: string) => void
-  setDebugApiUrl: (url: string) => void
   setAndPersistJsonRpcProvider: (url: string) => void
   isLoading: boolean
   error: Error | null
@@ -31,11 +28,8 @@ interface ContextInterface {
 
 const initialValues: ContextInterface = {
   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: '',
@@ -55,7 +49,6 @@ export const Consumer = Context.Consumer
 
 interface InitialSettings {
   beeApiUrl?: string
-  beeDebugApiUrl?: string
   lockedApiSettings?: boolean
   isDesktop?: boolean
   desktopUrl?: string
@@ -73,9 +66,7 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
     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 [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
   const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
@@ -84,12 +75,6 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
   const url = makeHttpUrl(
     config?.['api-addr'] ?? sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? apiUrl,
   )
-  const debugUrl = makeHttpUrl(
-    config?.['debug-api-addr'] ??
-      sessionStorage.getItem('debug_api_host') ??
-      propsSettings.beeDebugApiUrl ??
-      apiDebugUrl,
-  )
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
@@ -111,24 +96,12 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
     }
   }, [url])
 
-  useEffect(() => {
-    try {
-      setBeeDebugApi(new BeeDebug(debugUrl))
-      sessionStorage.setItem('debug_api_host', debugUrl)
-    } catch (e) {
-      setBeeDebugApi(null)
-    }
-  }, [debugUrl])
-
   return (
     <Context.Provider
       value={{
         apiUrl: url,
-        apiDebugUrl: debugUrl,
         beeApi,
-        beeDebugApi,
         setApiUrl,
-        setDebugApiUrl,
         lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
         desktopApiKey,
         isDesktop,

src/providers/Stamps.tsx

@@ -48,7 +48,7 @@ export function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
   const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
@@ -56,17 +56,21 @@ export function Provider({ children }: Props): ReactElement {
   const [frequency, setFrequency] = useState<number | null>(null)
 
   const refresh = async () => {
-    // Don't want to refresh when already refreshing
+    if (isLoading) {
-    if (isLoading) return
+      return
+    }
 
-    if (!beeDebugApi) return
+    if (!beeApi) {
+      return
+    }
 
     try {
       setIsLoading(true)
-      const stamps = await beeDebugApi.getAllPostageBatch()
+      const stamps = await beeApi.getAllPostageBatch()
 
       setStamps(stamps.filter(x => x.exists).map(enrichStamp))
       setLastUpdate(Date.now())
+      setError(null)
     } catch (e) {
       setError(e as Error)
     } finally {

src/routes.tsx

@@ -16,7 +16,7 @@ import GiftCards from './pages/gift-code'
 import Info from './pages/info'
 import LightModeRestart from './pages/restart/LightModeRestart'
 import Settings from './pages/settings'
-import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
+import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampAdvancedPage'
 import Status from './pages/status'
 import TopUp from './pages/top-up'
 import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
@@ -25,6 +25,7 @@ import { GiftCardFund } from './pages/top-up/GiftCardFund'
 import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
 import { Swap } from './pages/top-up/Swap'
 import { Context as SettingsContext } from './providers/Settings'
+import { CreatePostageStampBasicPage } from './pages/stamps/CreatePostageStampStandardPage'
 
 export enum ROUTES {
   INFO = '/',
@@ -46,7 +47,8 @@ export enum ROUTES {
   ACCOUNT_WALLET = '/account/wallet',
   ACCOUNT_CHEQUEBOOK = '/account/chequebook',
   ACCOUNT_STAMPS = '/account/stamps',
-  ACCOUNT_STAMPS_NEW = '/account/stamps/new',
+  ACCOUNT_STAMPS_NEW_STANDARD = '/account/stamps/new',
+  ACCOUNT_STAMPS_NEW_ADVANCED = '/account/stamps/new/advanced',
   ACCOUNT_FEEDS = '/account/feeds',
   ACCOUNT_FEEDS_NEW = '/account/feeds/new',
   ACCOUNT_FEEDS_UPDATE = '/account/feeds/update/:hash',
@@ -86,7 +88,8 @@ const BaseRouter = (): ReactElement => {
       <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
       <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
       <Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
-      <Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW_STANDARD} element={<CreatePostageStampBasicPage />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW_ADVANCED} element={<CreatePostageStampPage />} />
       <Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
       <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />

src/theme.tsx

@@ -159,6 +159,23 @@ const componentsOverrides = (theme: Theme) => ({
       backgroundColor: 'transparent',
     },
   },
+  MuiSlider: {
+    root: {
+      '& .MuiSlider-valueLabel': {
+        top: '-27px',
+        '& span': {
+          height: '20px',
+          borderRadius: '0px',
+          transform: 'none',
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+            transform: 'none',
+          },
+        },
+      },
+    },
+  },
 })
 
 const propsOverrides = {

src/utils/desktop.ts

@@ -6,8 +6,6 @@ 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
@@ -17,7 +15,7 @@ export interface BeeConfig {
   'resolver-options': string
   'use-postage-snapshot': boolean
   'data-dir': string
-  'swap-endpoint'?: string
+  'blockchain-rpc-endpoint'?: string
 }
 
 export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
@@ -29,13 +27,13 @@ export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
 export function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<BeeConfig> {
   return updateDesktopConfiguration(desktopUrl, {
     'swap-enable': true,
-    'swap-endpoint': rpcProvider,
+    'blockchain-rpc-endpoint': rpcProvider,
   })
 }
 
 export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Promise<void> {
   await updateDesktopConfiguration(desktopUrl, {
-    'swap-endpoint': value,
+    'blockchain-rpc-endpoint': value,
   })
 }
 

src/utils/file.ts

@@ -114,8 +114,8 @@ export function packageFile(file: FilePath, pathOverwrite?: string): FilePath {
     size: file.size,
     type: file.type,
     stream: file.stream,
-    slice: file.slice,
+    slice: (start: number, end: number) => file.slice(start, end),
     text: file.text,
-    arrayBuffer: async () => await file.arrayBuffer(), // This is needed for successful upload and can not simply be { arrayBuffer: file.arrayBuffer }
+    arrayBuffer: async () => await file.arrayBuffer(),
   }
 }

src/utils/identity.ts

@@ -1,4 +1,4 @@
-import { BatchId, Bee, BeeDebug, Reference } from '@ethersphere/bee-js'
+import { BatchId, Bee, Reference } from '@ethersphere/bee-js'
 import { Wallet } from 'ethers'
 import { uuidV4, waitUntilStampUsable } from '.'
 import { Identity, IdentityType } from '../providers/Feeds'
@@ -79,7 +79,6 @@ async function getWallet(type: IdentityType, data: string, password?: string): P
 
 export async function updateFeed(
   beeApi: Bee,
-  beeDebugApi: BeeDebug | null,
   identity: Identity,
   hash: string,
   stamp: string,
@@ -93,8 +92,6 @@ export async function updateFeed(
 
   const writer = beeApi.makeFeedWriter('sequence', '00'.repeat(32), wallet.privateKey)
 
-  if (beeDebugApi) {
+  await waitUntilStampUsable(stamp as BatchId, beeApi)
-    await waitUntilStampUsable(stamp as BatchId, beeDebugApi)
-  }
   await writer.upload(stamp, hash as Reference)
 }

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { BatchId, BeeDebug, PostageBatch } from '@ethersphere/bee-js'
+import { BatchId, Bee, PostageBatch } from '@ethersphere/bee-js'
 import { decodeCid } from '@ethersphere/swarm-cid'
 import { BigNumber } from 'bignumber.js'
 import { BZZ_LINK_DOMAIN } from '../constants'
@@ -31,8 +31,7 @@ export function makeBigNumber(value: BigNumber | bigint | number | string): BigN
 
   if (typeof value === 'bigint') return new BigNumber(value.toString())
 
-  // FIXME: bee-js still returns some values as numbers and even outside of SAFE INTEGER bounds
+  if (typeof value === 'number') return new BigNumber(value)
-  if (typeof value === 'number' /* && Number.isSafeInteger(value)*/) return new BigNumber(value)
 
   throw new TypeError(`Not a BigNumber or BigNumber convertible value. Type: ${typeof value} value: ${value}`)
 }
@@ -203,10 +202,6 @@ export function secondsToTimeString(seconds: number): string {
   return `${unit.toFixed(1)} years`
 }
 
-export function convertDepthToBytes(depth: number): number {
-  return 2 ** depth * 4096
-}
-
 export function convertAmountToSeconds(amount: number, pricePerBlock: number): number {
   // TODO: blocktime should come directly from the blockchain as it may differ between different networks
   const blockTime = 5 // On mainnet there is 5 seconds between blocks
@@ -236,17 +231,17 @@ interface Options {
   timeout?: number
 }
 
-export function waitUntilStampUsable(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+export function waitUntilStampUsable(batchId: BatchId, bee: Bee, options?: Options): Promise<PostageBatch> {
-  return waitForStamp(batchId, beeDebug, 'usable', options)
+  return waitForStamp(batchId, bee, 'usable', options)
 }
 
-export function waitUntilStampExists(batchId: BatchId, beeDebug: BeeDebug, options?: Options): Promise<PostageBatch> {
+export function waitUntilStampExists(batchId: BatchId, bee: Bee, options?: Options): Promise<PostageBatch> {
-  return waitForStamp(batchId, beeDebug, 'exists', options)
+  return waitForStamp(batchId, bee, 'exists', options)
 }
 
 async function waitForStamp(
   batchId: BatchId,
-  beeDebug: BeeDebug,
+  bee: Bee,
   field: 'exists' | 'usable',
   options?: Options,
 ): Promise<PostageBatch> {
@@ -255,7 +250,7 @@ async function waitForStamp(
 
   for (let i = 0; i < timeout; i += pollingFrequency) {
     try {
-      const stamp = await beeDebug.getPostageBatch(batchId)
+      const stamp = await bee.getPostageBatch(batchId)
 
       if (stamp[field]) return stamp
     } catch {

src/utils/manifest.ts

@@ -1,5 +1,5 @@
 import { Bee, Utils } from '@ethersphere/bee-js'
-import { loadAllNodes, MantarayNode, MetadataMapping, Reference } from 'mantaray-js'
+import { MantarayNode, MetadataMapping, Reference, loadAllNodes } from 'mantaray-js'
 
 interface ValueNode extends MantarayNode {
   getEntry: Reference

src/utils/net.ts

@@ -19,7 +19,7 @@ export async function sendRequest(
   const authorization = localStorage.getItem('apiKey')
 
   if (!authorization) {
-    throw Error('API key not found in local storage')
+    throw Error('API key not found in local storage. Please reopen via Swarm Desktop > Open Web UI.')
   }
   const headers = {
     authorization,