feat: clarify labels and syncing (#670)

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/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/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())
-  }, [startedAt])
-
-  useEffect(() => {
-    if (Date.now() - startedAt < 45_000) {
+    if (!beeApi) {
       return
     }
 
-    if (apiHealth && nodeInfo?.beeMode === BeeModes.LIGHT) {
-      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
-      localStorage.removeItem(STARTED_UPGRADE_AT)
-      navigate(ROUTES.INFO)
-    }
-  }, [startedAt, navigate, nodeInfo, apiHealth, enqueueSnackbar])
+    const interval = setInterval(() => {
+      beeApi
+        .getNodeInfo()
+        .then(nodeInfo => {
+          if (nodeInfo.beeMode === BeeModes.LIGHT) {
+            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>
-        You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
-      </Typography>
+      <Box mb={1}>
+        <Typography>
+          You will be redirected automatically once your node is up and running. This may take up to 10 minutes.
+        </Typography>
+      </Box>
+      <ChainSync />
     </Grid>
   )
 }