diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index b1312d2c42..03b73d1c20 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -15,8 +15,9 @@ import GlobalStyle from '@polkadot/react-components/styles'; import { useApi, useCall } from '@polkadot/react-hooks'; import Signer from '@polkadot/react-signer'; -import ConnectingOverlay from './overlays/Connecting'; import AccountsOverlay from './overlays/Accounts'; +import ConnectingOverlay from './overlays/Connecting'; +import UpgradeOverlay from './overlays/Upgrade'; import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants'; import Content from './Content'; import SideBar from './SideBar'; @@ -93,6 +94,7 @@ function Apps ({ className }: Props): React.ReactElement { + diff --git a/packages/apps/src/overlays/Upgrade.tsx b/packages/apps/src/overlays/Upgrade.tsx new file mode 100644 index 0000000000..681a7bf3ea --- /dev/null +++ b/packages/apps/src/overlays/Upgrade.tsx @@ -0,0 +1,68 @@ +// Copyright 2017-2020 @polkadot/apps authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { RuntimeVersion } from '@polkadot/types/interfaces'; + +import React, { useEffect, useState } from 'react'; +import { Button } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; + +import { useTranslation } from '../translate'; +import BaseOverlay from './Base'; + +interface Props { + className?: string; +} + +let lastVersion = -1; + +export default function Upgrade ({ className }: Props): React.ReactElement | null { + const { t } = useTranslation(); + const { api, isApiReady, isApiConnected } = useApi(); + const runtimeVersion = useCall(api.rpc.state.subscribeRuntimeVersion, []); + const [hasUpgraded, setHasUpgraded] = useState(false); + + useEffect((): void => { + if (!hasUpgraded && runtimeVersion) { + const version = runtimeVersion.specVersion.toNumber(); + + if (lastVersion === -1) { + lastVersion = version; + } + + const newStatus = lastVersion !== version; + + if (newStatus !== hasUpgraded) { + setHasUpgraded(newStatus); + } + + lastVersion = version; + } + }, [hasUpgraded, runtimeVersion]); + + if (!isApiReady || !isApiConnected || !hasUpgraded || !runtimeVersion) { + return null; + } + + const _onReload = (): void => { + window.location.reload(); + }; + + return ( + +

{t(`The runtime has been upgraded to ${runtimeVersion.specVersion.toNumber()}, your current interface would need to be refreshed to take advantage of the new features.`)}

+

+