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*",
@@ -17,4 +16,4 @@
     "open",
     "base64-inline-loader"
   ]
-}
+}

CHANGELOG.md

@@ -1,5 +1,46 @@
 # 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)
 
 

README.md

@@ -13,12 +13,8 @@
 **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
+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).
-<!-- SUPPORTED_BEE_START -->1.12.0-88c1d236<!-- SUPPORTED_BEE_END -->**. Using it with older or newer Bee versions is
-
-not recommended and may not work. Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and
-by keeping an eye on the [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 
 ![Status page](/ui_samples/info.png)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethersphere/bee-dashboard",
-  "version": "0.26.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,30 +26,29 @@
     "url": "https://github.com/ethersphere/bee-dashboard.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^7.0.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",
@@ -77,15 +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",
     "@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",
@@ -113,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/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/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

@@ -2,14 +2,14 @@ import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@materia
 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>

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

@@ -1,5 +1,5 @@
 import { BeeModes } from '@ethersphere/bee-js'
-import { Divider, Drawer, Grid, List, Link as MUILink } from '@material-ui/core'
+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'
@@ -133,10 +133,16 @@ export default function SideBar(): ReactElement {
               <SideBarItem
                 iconStart={<GithubIcon className={classes.icon} />}
                 iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
-                label={<span>Github repository</span>}
+                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/containers/DepositModal.tsx

@@ -13,7 +13,7 @@ export default function DepositModal(): ReactElement {
     <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)}

src/containers/WithdrawModal.tsx

@@ -13,7 +13,7 @@ export default function WithdrawModal(): ReactElement {
     <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)}

src/layout/Dashboard.tsx

@@ -4,6 +4,7 @@ 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'
@@ -81,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,4 @@
+import { Utils } from '@ethersphere/bee-js'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
@@ -57,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

@@ -2,6 +2,7 @@ import { CircularProgress, Container, createStyles, makeStyles } from '@material
 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'
@@ -57,7 +58,7 @@ export function AccountStamps(): ReactElement {
         {error && (
           <Container style={{ textAlign: 'center', padding: '50px' }}>
             <Loading />
-            {error.message}
+            <ChainSync />
           </Container>
         )}
         {!error && (

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'
@@ -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/files/Download.tsx

@@ -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/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,18 +13,24 @@ import NodeInfoCard from './NodeInfoCard'
 import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
-  const { status, topology, nodeInfo, chainId } = useContext(BeeContext)
+  const { beeVersion, status, 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 />
-        <div style={{ width: '8px' }}></div>
         <WalletInfoCard />
-        <div style={{ width: '8px' }}></div>
         <ChequebookInfoCard />
       </div>
       <div style={{ height: '16px' }} />
@@ -31,6 +38,9 @@ export default function Status(): ReactElement {
       <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
@@ -52,6 +62,7 @@ export default function Status(): ReactElement {
           }
         />
       )}
+      <ExpandableListItem label="Bee version" value={beeVersion} />
       <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/stamps/PostageStampAdvancedCreation.tsx

@@ -72,7 +72,7 @@ export function PostageStampAdvancedCreation({ onFinished }: Props): ReactElemen
 
     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 {

src/pages/stamps/PostageStampStandardCreation.tsx

@@ -67,7 +67,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
 
     return `${secondsToTimeString(
       convertAmountToSeconds(parseInt(amount, 10), 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 {
@@ -196,7 +196,7 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
         </Box>
         <Box display="flex" justifyContent={'right'} mt={0.5}>
           <Typography style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.26)' }}>
-            Current price of 24000 per block
+            Current price of 24000 PLUR per block
           </Typography>
         </Box>
       </Box>

src/providers/Bee.tsx

@@ -41,6 +41,7 @@ interface Status {
 }
 
 interface ContextInterface {
+  beeVersion: string | null
   status: Status
   error: Error | null
   apiHealth: boolean
@@ -65,6 +66,7 @@ interface ContextInterface {
 }
 
 const initialValues: ContextInterface = {
+  beeVersion: null,
   status: {
     all: CheckState.ERROR,
     apiConnection: { isEnabled: false, checkState: CheckState.ERROR },
@@ -164,6 +166,7 @@ interface Props {
 
 export function Provider({ children }: Props): ReactElement {
   const { beeApi } = useContext(SettingsContext)
+  const [beeVersion, setBeeVersion] = useState<string | null>(null)
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
   const [nodeInfo, setNodeInfo] = useState<NodeInfo | null>(null)
@@ -264,9 +267,13 @@ export function Provider({ children }: Props): ReactElement {
       const promises = [
         // API health
         beeApi
-          .isConnected({ timeout: TIMEOUT })
+          .getHealth({ timeout: TIMEOUT })
-          .then(setApiHealth)
+          .then(response => setBeeVersion(response.version))
-          .catch(() => setApiHealth(false)),
+          .then(() => setApiHealth(true))
+          .catch(() => {
+            setBeeVersion(null)
+            setApiHealth(false)
+          }),
 
         // Node Addresses
         beeApi
@@ -376,6 +383,7 @@ export function Provider({ children }: Props): ReactElement {
   return (
     <Context.Provider
       value={{
+        beeVersion,
         status,
         error,
         apiHealth,

src/providers/Stamps.tsx

@@ -70,6 +70,7 @@ export function Provider({ children }: Props): ReactElement {
 
       setStamps(stamps.filter(x => x.exists).map(enrichStamp))
       setLastUpdate(Date.now())
+      setError(null)
     } catch (e) {
       setError(e as Error)
     } finally {

src/utils/index.ts

@@ -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}`)
 }

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,