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) {