diff --git a/src/components/Waiting.tsx b/src/components/Waiting.tsx new file mode 100644 index 0000000..561e8a1 --- /dev/null +++ b/src/components/Waiting.tsx @@ -0,0 +1,10 @@ +import { CircularProgress, Grid } from '@material-ui/core' +import { ReactElement } from 'react' + +export function Waiting(): ReactElement { + return ( + + + + ) +} diff --git a/src/pages/restart/LightModeRestart.tsx b/src/pages/restart/LightModeRestart.tsx index da1cf44..99e12ef 100644 --- a/src/pages/restart/LightModeRestart.tsx +++ b/src/pages/restart/LightModeRestart.tsx @@ -1,8 +1,8 @@ import { BeeModes } from '@ethersphere/bee-js' -import { Box, Typography } from '@material-ui/core' +import { Box, Grid, Typography } from '@material-ui/core' import { ReactElement, useContext, useEffect, useState } from 'react' import { useNavigate } from 'react-router' -import { Loading } from '../../components/Loading' +import { Waiting } from '../../components/Waiting' import { Context } from '../../providers/Bee' import { ROUTES } from '../../routes' @@ -22,11 +22,18 @@ export default function Settings(): ReactElement { }, [startedAt, navigate, nodeInfo, apiHealth]) return ( - <> - - + + + - Your node is being upgraded to light mode... postage syncing may take up to 10 minutes. - + + + Upgrading Bee + + + + You will be redirected automatically once your node is up and running. This may take up to 10 minutes. + + ) } diff --git a/src/pages/restart/Restart.tsx b/src/pages/restart/Restart.tsx deleted file mode 100644 index c51fe9a..0000000 --- a/src/pages/restart/Restart.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Box, Typography } from '@material-ui/core' -import { ReactElement, useContext, useEffect, useState } from 'react' -import { useNavigate } from 'react-router' -import { Loading } from '../../components/Loading' -import { Context } from '../../providers/Bee' -import { ROUTES } from '../../routes' - -export default function Settings(): ReactElement { - const [waited, setWaited] = useState(false) - const { apiHealth } = useContext(Context) - const navigate = useNavigate() - - useEffect(() => { - if (waited) { - return - } - - const timeout = setTimeout(() => setWaited(true), 5_000) - - return () => clearTimeout(timeout) - }, [waited]) - - useEffect(() => { - if (!waited) { - return - } - - if (apiHealth) { - navigate(ROUTES.INFO) - } - }, [navigate, waited, apiHealth]) - - return ( - <> - - - - You will be redirected automatically once your node is up and running. - - ) -} diff --git a/src/routes.tsx b/src/routes.tsx index 1f1e7e8..b1f3452 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -14,7 +14,6 @@ import { UploadLander } from './pages/files/UploadLander' import GiftCards from './pages/gift-code' import Info from './pages/info' import LightModeRestart from './pages/restart/LightModeRestart' -import Restart from './pages/restart/Restart' import Wallet from './pages/rpc' import Confirmation from './pages/rpc/Confirmation' import Settings from './pages/settings' @@ -80,7 +79,6 @@ const BaseRouter = (): ReactElement => ( } /> } /> } /> - } /> } /> } /> } />