feat: version check and info (#425)

src/App.tsx

@@ -41,7 +41,7 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
                 <FileProvider>
                   <FeedsProvider>
                     <PlatformProvider>
-                      <SnackbarProvider>
+                      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
                         <Router>
                           <>
                             <CssBaseline />

src/components/Feedback.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useEffect, useState } from 'react'
 import * as Sentry from '@sentry/react'
 import { Link } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import MessageSquare from 'remixicon-react/Chat4LineIcon'
+import MessageSquare from 'remixicon-react/Message2LineIcon'
 
 import config from '../config'
 import SideBarItem from './SideBarItem'

src/hooks/apiHooks.tsx

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { config } from '../config'
 import { getJson } from '../utils/net'
+import { getLatestBeeDesktopVersion } from '../utils/desktop'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -12,6 +13,11 @@ export interface LatestBeeReleaseHook {
 export interface IsBeeDesktopHook {
   isBeeDesktop: boolean
   isLoading: boolean
+  beeDesktopVersion: string
+}
+
+export interface NewDesktopVersionHook {
+  newBeeDesktopVersion: string
 }
 
 interface Config {
@@ -25,14 +31,17 @@ interface Config {
  */
 export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
   const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
+  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
   const [isLoading, setLoading] = useState<boolean>(true)
 
   useEffect(() => {
     axios
       .get(`${conf.BEE_DESKTOP_URL}/info`)
       .then(res => {
-        if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true)
+        if (res.data?.name === 'bee-desktop') {
-        else setIsBeeDesktop(false)
+          setIsBeeDesktop(true)
+          setBeeDesktopVersion(res.data?.version)
+        } else setIsBeeDesktop(false)
       })
       .catch(() => {
         setIsBeeDesktop(false)
@@ -42,7 +51,37 @@ export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
       })
   }, [conf])
 
-  return { isBeeDesktop, isLoading }
+  return { isBeeDesktop, isLoading, beeDesktopVersion }
+}
+
+async function checkNewVersion(conf: Config): Promise<string> {
+  const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json()
+  const currentVersion = resJson.version
+  const latestVersion = await getLatestBeeDesktopVersion()
+
+  if (currentVersion !== latestVersion) {
+    return latestVersion
+  }
+
+  return ''
+}
+
+export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook {
+  const [newBeeDesktopVersion, setNewNewBeeDesktopVersion] = useState<string>('')
+
+  useEffect(() => {
+    if (!isBeeDesktop) {
+      return
+    }
+
+    checkNewVersion(conf).then(version => {
+      if (version !== '') {
+        setNewNewBeeDesktopVersion(version)
+      }
+    })
+  }, [isBeeDesktop, conf])
+
+  return { newBeeDesktopVersion }
 }
 
 export interface BeeConfig {

src/layout/Dashboard.tsx

@@ -1,12 +1,16 @@
-import { CircularProgress, Container } from '@material-ui/core'
+import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import React, { ReactElement, useContext } from 'react'
+import { useSnackbar } from 'notistack'
+import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
 import { Context } from '../providers/Bee'
 import config from '../config'
 import * as Sentry from '@sentry/react'
 import ItsBroken from './ItsBroken'
+import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -25,6 +29,38 @@ const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
   const { isLoading } = useContext(Context)
+  const { isBeeDesktop } = useIsBeeDesktop()
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+
+  if (newBeeDesktopVersion !== '') {
+    enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, {
+      variant: 'warning',
+      preventDuplicate: true,
+      key: 'desktopNewVersion',
+      persist: true,
+      action: key => (
+        <React.Fragment>
+          <Button
+            onClick={() => {
+              window.open(BEE_DESKTOP_LATEST_RELEASE_PAGE)
+              closeSnackbar(key)
+            }}
+          >
+            Download release
+          </Button>
+          <IconButton
+            onClick={() => {
+              closeSnackbar(key)
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </React.Fragment>
+      ),
+    })
+  }
+
   const content = (
     <>
       {isLoading ? (

src/pages/info/index.tsx

@@ -13,6 +13,8 @@ import Map from '../../components/Map'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import { useNavigate } from 'react-router'
 import { ROUTES } from '../../routes'
+import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop'
 
 export default function Status(): ReactElement {
   const {
@@ -25,6 +27,8 @@ export default function Status(): ReactElement {
     balance,
     chequebookBalance,
   } = useContext(BeeContext)
+  const { isBeeDesktop, beeDesktopVersion } = useIsBeeDesktop()
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
   const navigate = useNavigate()
 
   return (
@@ -115,6 +119,25 @@ export default function Status(): ReactElement {
       <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
       <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
       <div style={{ height: '16px' }} />
+      {isBeeDesktop && (
+        <ExpandableListItem
+          label="Desktop version"
+          value={
+            <div>
+              {`${beeDesktopVersion} `}
+              <Button
+                size="small"
+                variant="outlined"
+                href={BEE_DESKTOP_LATEST_RELEASE_PAGE}
+                target="_blank"
+                style={{ height: '26px' }}
+              >
+                {newBeeDesktopVersion === '' ? 'latest' : 'update'}
+              </Button>
+            </div>
+          }
+        />
+      )}
       <ExpandableListItem
         label="Bee version"
         value={

src/utils/desktop.ts

@@ -8,6 +8,8 @@ interface DesktopStatus {
   config: Record<string, any>
 }
 
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+
 export async function getDesktopStatus(): Promise<DesktopStatus> {
   const response = await getJson(`${getDesktopHost()}/status`)
 
@@ -60,6 +62,12 @@ export async function getBeeLogs(): Promise<string> {
   return response as unknown as string
 }
 
+export async function getLatestBeeDesktopVersion(): Promise<string> {
+  const response = await (await fetch('https://api.github.com/repos/ethersphere/bee-desktop/releases/latest')).json()
+
+  return response.tag_name.replace('v', '') // We get for example "v0.12.1"
+}
+
 function getDesktopHost(): string {
   if (process.env.REACT_APP_BEE_DESKTOP_URL) {
     return process.env.REACT_APP_BEE_DESKTOP_URL