Add disconnection info in footer

packages/neuron-ui/src/containers/Footer/index.tsx

@@ -1,12 +1,14 @@
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback, useContext, useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, getTheme, Text, ProgressIndicator, Icon, TooltipHost } from 'office-ui-fabric-react'
+import { Stack, getTheme, Text, ProgressIndicator, Icon, TooltipHost, TeachingBubble } from 'office-ui-fabric-react'
 
+import { openExternal } from 'services/remote'
+import { guideBubbleTimes } from 'services/localCache'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import { ConnectionStatus, FULL_SCREENS, Routes } from 'utils/const'
 import { NeuronWalletContext } from 'states/stateProvider'
+import { ConnectionStatus, FULL_SCREENS, RUN_NODE_GUIDE_URL, Routes } from 'utils/const'
 
 const theme = getTheme()
 const stackStyles = {
@@ -55,7 +57,7 @@ export const SyncStatus = ({
 
 export const NetworkStatus = ({ name, online }: { name: string; online: boolean }) => {
   return (
-    <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 5 }} styles={stackItemStyles}>
+    <Stack id="network-status" horizontal verticalAlign="center" tokens={{ childrenGap: 5 }} styles={stackItemStyles}>
       <Icon
         iconName={online ? 'Connected' : 'Disconnected'}
         styles={{ root: { display: 'flex', alignItems: 'center' } }}
@@ -75,6 +77,24 @@ const Footer = ({
     settings: { networks = [] },
   } = useContext(NeuronWalletContext)
   const [t] = useTranslation()
+  const [showGuide, setShowGuide] = useState(false)
+
+  useEffect(() => {
+    if (connectionStatus !== ConnectionStatus.Online && guideBubbleTimes.getRemaining()) {
+      setShowGuide(true)
+      guideBubbleTimes.reduce()
+    } else {
+      setShowGuide(false)
+    }
+  }, [connectionStatus, setShowGuide])
+
+  const onDismissGuide = useCallback(() => {
+    setShowGuide(false)
+  }, [setShowGuide])
+
+  const onGuideLinkClick = useCallback(() => {
+    openExternal(RUN_NODE_GUIDE_URL)
+  }, [])
 
   const goToNetworksSetting = useCallback(() => {
     history.push(Routes.SettingsNetworks)
@@ -106,6 +126,27 @@ const Footer = ({
         ) : (
           <Text>{t('settings.setting-tabs.network')}</Text>
         )}
+        {showGuide ? (
+          <TeachingBubble
+            target="#network-status"
+            headline={t('messages.run-ckb-guide')}
+            hasSmallHeadline
+            primaryButtonProps={{
+              children: t('common.open'),
+              onClick: onGuideLinkClick,
+            }}
+            onDismiss={onDismissGuide}
+            styles={{
+              subText: {
+                fontSize: '14px',
+              },
+            }}
+          >
+            <Text as="span" variant="xSmall">
+              {t('messages.view-the-run-node-doc')}
+            </Text>
+          </TeachingBubble>
+        ) : null}
       </Stack>
     </Stack>
   )

packages/neuron-ui/src/locales/en.json

@@ -234,6 +234,7 @@
     "common": {
       "or": "or",
       "confirm": "Confirm",
+      "open": "Open",
       "cancel": "Cancel",
       "save": "Save",
       "toggle": {
@@ -258,6 +259,7 @@
       "update-network-successfully": "The network was updated",
       "addr-copied": "Address has been copied to the clipboard",
       "qrcode-copied": "QR Code has been copied to the clipboard",
+      "view-the-run-node-doc": "View the guide in browser",
       "fields": {
         "wallet": "Wallet",
         "name": "Name",

packages/neuron-ui/src/locales/zh.json

@@ -234,6 +234,7 @@
     "common": {
       "or": "或",
       "confirm": "确认",
+      "open": "打开",
       "cancel": "取消",
       "save": "保存",
       "toggle": {
@@ -258,6 +259,7 @@
       "update-network-successfully": "已更新节点信息",
       "addr-copied": "已复制地址到剪贴板",
       "qrcode-copied": "已复制二维码到剪贴板",
+      "view-the-run-node-doc": "打开浏览器查看文档",
       "fields": {
         "wallet": "钱包",
         "name": "名称",

packages/neuron-ui/src/services/localCache.ts

@@ -5,6 +5,7 @@ export enum LocalCacheKey {
   CurrentWallet = 'currentWallet',
   CurrentNetworkID = 'currentNetworkID',
   SystemScript = 'systemScript',
+  GuideBubbleTimes = 'guideBubbleTimes',
 }
 
 export const addresses = {
@@ -122,6 +123,18 @@ export const systemScript = {
   },
 }
 
+export const guideBubbleTimes = {
+  getRemaining: () => {
+    const t = window.localStorage.getItem(LocalCacheKey.GuideBubbleTimes)
+    const remaining = t === null ? 3 : +t
+    return remaining
+  },
+  reduce: () => {
+    const remaining = guideBubbleTimes.getRemaining()
+    window.localStorage.setItem(LocalCacheKey.GuideBubbleTimes, `${Math.max(remaining - 1, 0)}`)
+  },
+}
+
 export default {
   LocalCacheKey,
   addresses,
@@ -130,4 +143,5 @@ export default {
   currentWallet,
   currentNetworkID,
   systemScript,
+  guideBubbleTimes,
 }