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/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 && (