feat: added tolerance to version check and warning if not exact to what we tested (#133)

* feat: added tolerance to version check and warning if not exact to what we expect

* chore: update to bee-js 0.10.0

* chore: updated interfaces that changed in bee-js 0.10.0

src/components/AlertVersion.tsx

@@ -0,0 +1,54 @@
+import { ReactElement, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import Collapse from '@material-ui/core/Collapse'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import { useStatusNodeVersion } from '../hooks/status'
+import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginBottom: theme.spacing(2),
+    },
+  }),
+)
+
+export default function VersionAlert(): ReactElement | null {
+  const classes = useStyles()
+  const { isLoading, userVersion } = useStatusNodeVersion()
+  const [open, setOpen] = useState<boolean>(true)
+
+  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === userVersion
+
+  if (isLoading) return null
+
+  return (
+    <Collapse in={!isExactlySupportedBeeVersion && open}>
+      <div className={classes.root}>
+        <Alert
+          severity="warning"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={() => {
+                setOpen(false)
+              }}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+        >
+          <AlertTitle>Warning</AlertTitle>
+          Your Bee node version (<code>{userVersion}</code>) does not exactly match the Bee version we tested the Bee
+          Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality may not
+          work properly.
+        </Alert>
+      </div>
+    </Collapse>
+  )
+}

src/components/CashoutModal.tsx

@@ -40,7 +40,7 @@ export default function DepositModal({ peerId, uncashedAmount }: Props): ReactEl
           enqueueSnackbar(
             <span>
               Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res.transactionHash} network={'goerli'} />
+              <EthereumAddress hideBlockie transaction address={res} network={'goerli'} />
             </span>,
             { variant: 'success' },
           )

src/components/WDModal.tsx

@@ -18,7 +18,7 @@ interface Props {
   label: string
   max?: BigNumber
   min?: BigNumber
-  action: (amount: bigint) => Promise<{ transactionHash: string }>
+  action: (amount: bigint) => Promise<string>
 }
 
 export default function WithdrawModal({
@@ -48,7 +48,7 @@ export default function WithdrawModal({
     if (amountToken === null) return
 
     try {
-      const { transactionHash } = await action(amountToken.toBigInt as bigint)
+      const transactionHash = await action(amountToken.toBigInt as bigint)
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {

src/hooks/status.ts

@@ -9,6 +9,8 @@ import {
   useDebugApiHealth,
   useLatestBeeRelease,
 } from './apiHooks'
+import semver from 'semver'
+import { engines } from '../../package.json'
 
 export interface StatusChequebookHook extends StatusHookCommon {
   chequebookBalance: ChequebookBalance | null
@@ -19,12 +21,29 @@ export const useStatusNodeVersion = (): StatusNodeVersionHook => {
   const { latestBeeRelease, isLoadingLatestBeeRelease } = useLatestBeeRelease()
   const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
 
+  const latestVersion = semver.coerce(latestBeeRelease?.name)?.version
+  const latestUserVersion = semver.coerce(nodeHealth?.version)?.version
+
+  const isLatestBeeVersion = Boolean(
+    latestVersion &&
+      latestUserVersion &&
+      semver.satisfies(latestVersion, latestUserVersion, {
+        includePrerelease: true,
+      }),
+  )
+
   return {
     isLoading: isLoadingNodeHealth || isLoadingLatestBeeRelease,
-    isOk: Boolean(latestBeeRelease && latestBeeRelease.name === `v${nodeHealth?.version?.split('-')[0]}`),
-    userVersion: nodeHealth?.version?.split('-')[0] || '-',
-    latestVersion: latestBeeRelease?.name.substring(1) || '-',
+    isOk: Boolean(
+      nodeHealth &&
+        semver.satisfies(nodeHealth.version, engines.bee, {
+          includePrerelease: true,
+        }),
+    ),
+    userVersion: nodeHealth?.version,
+    latestVersion,
     latestUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
+    isLatestBeeVersion,
   }
 }
 

src/layout/Dashboard.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, ReactElement } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
+import AlertVersion from '../components/AlertVersion'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 
@@ -11,7 +12,6 @@ import { RouteComponentProps } from 'react-router'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    toolbar: theme.mixins.toolbar,
     content: {
       marginLeft: '240px',
       flexGrow: 1,
@@ -19,20 +19,6 @@ const useStyles = makeStyles((theme: Theme) =>
       padding: theme.spacing(3),
       paddingBottom: '65px',
     },
-    footer: {
-      marginLeft: '240px',
-      backgroundColor: theme.palette.background.default,
-      position: 'fixed',
-      bottom: 0,
-      flexGrow: 1,
-      width: '-webkit-fill-available',
-      padding: theme.spacing(2),
-      textAlign: 'center',
-    },
-    logo: {
-      height: '20px',
-      marginRight: '7px',
-    },
   }),
 )
 
@@ -73,7 +59,10 @@ const Dashboard = (props: Props): ReactElement => {
       <SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
       <NavBar themeMode={themeMode} />
       <ErrorBoundary>
-        <main className={classes.content}>{props.children}</main>
+        <main className={classes.content}>
+          <AlertVersion />
+          {props.children}
+        </main>
       </ErrorBoundary>
     </div>
   )

src/pages/status/StatusCard.tsx

@@ -23,17 +23,19 @@ const useStyles = makeStyles(() =>
 interface Props {
   nodeAddresses: NodeAddresses | null
   nodeTopology: Topology | null
-  userBeeVersion: string | null
-  latestBeeVersion: string | null
+  userBeeVersion?: string
+  isLatestBeeVersion: boolean
   isOk: boolean
+  latestUrl: string
 }
 
 function StatusCard({
   userBeeVersion,
   nodeAddresses,
   nodeTopology,
-  latestBeeVersion,
   isOk,
+  isLatestBeeVersion,
+  latestUrl,
 }: Props): ReactElement | null {
   const classes = useStyles()
 
@@ -72,7 +74,7 @@ function StatusCard({
                   Bee
                 </a>{' '}
                 <span>{userBeeVersion || '-'}</span>
-                {userBeeVersion && latestBeeVersion && userBeeVersion === latestBeeVersion ? (
+                {isLatestBeeVersion ? (
                   <Chip
                     style={{ marginLeft: '7px', color: '#2145a0' }}
                     size="small"
@@ -80,7 +82,9 @@ function StatusCard({
                     className={classes.status}
                   />
                 ) : (
-                  <Typography variant="button">update</Typography>
+                  <Button size="small" variant="outlined" href={latestUrl}>
+                    update
+                  </Button>
                 )}
               </Typography>
               <Typography component="div" variant="subtitle2" gutterBottom>

src/pages/status/index.tsx

@@ -49,9 +49,10 @@ export default function Status(): ReactElement {
     <div className={classes.root}>
       <StatusCard
         userBeeVersion={nodeVersion.userVersion}
-        latestBeeVersion={nodeVersion.latestVersion}
+        isLatestBeeVersion={nodeVersion.isLatestBeeVersion}
         isOk={checks.every(c => c.isOk)}
         nodeTopology={topology.topology}
+        latestUrl={nodeVersion.latestUrl}
         nodeAddresses={ethereumConnection.nodeAddresses}
       />
       {ethereumConnection.nodeAddresses && chequebook.chequebookAddress && (

src/react-app-env.d.ts

@@ -11,9 +11,10 @@ interface StatusHookCommon {
 }
 
 interface StatusNodeVersionHook extends StatusHookCommon {
-  userVersion: string
-  latestVersion: string
+  userVersion?: string
+  latestVersion?: string
   latestUrl: string
+  isLatestBeeVersion: boolean
 }
 interface StatusEthereumConnectionHook extends StatusHookCommon {
   nodeAddresses: NodeAddresses | null

src/services/bee.tsx

@@ -4,11 +4,9 @@ import {
   BalanceResponse,
   Bee,
   BeeDebug,
-  CashoutResponse,
   ChequebookAddressResponse,
   ChequebookBalanceResponse,
   Data,
-  DepositTokensResponse,
   FileData,
   Health,
   LastCashoutActionResponse,
@@ -21,7 +19,6 @@ import {
   PostageBatchOptions,
   Reference,
   Topology,
-  WithdrawTokensResponse,
 } from '@ethersphere/bee-js'
 import { apiHost, debugApiHost } from '../constants'
 
@@ -88,7 +85,7 @@ export const beeDebugApi = {
     getLastCheques(): Promise<LastChequesResponse> {
       return beeJSDebugClient().getLastCheques()
     },
-    peerCashout(peerId: string): Promise<CashoutResponse> {
+    peerCashout(peerId: string): Promise<string> {
       return beeJSDebugClient().cashoutLastCheque(peerId)
     },
     getPeerLastCashout(peerId: string): Promise<LastCashoutActionResponse> {
@@ -97,10 +94,10 @@ export const beeDebugApi = {
     getPeerLastCheques(peerId: string): Promise<LastChequesForPeerResponse> {
       return beeJSDebugClient().getLastChequesForPeer(peerId)
     },
-    withdraw(amount: bigint): Promise<WithdrawTokensResponse> {
+    withdraw(amount: bigint): Promise<string> {
       return beeJSDebugClient().withdrawTokens(amount)
     },
-    deposit(amount: bigint): Promise<DepositTokensResponse> {
+    deposit(amount: bigint): Promise<string> {
       return beeJSDebugClient().depositTokens(amount)
     },
   },