feat(neuron-ui): add a guide bubble in connection status

Author: Keith-CY

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

@@ -1,12 +1,13 @@
-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 { 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 +56,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 +76,23 @@ const Footer = ({
     settings: { networks = [] },
   } = useContext(NeuronWalletContext)
   const [t] = useTranslation()
+  const [showGuide, setShowGuide] = useState(false)
+
+  useEffect(() => {
+    if (connectionStatus !== ConnectionStatus.Online) {
+      setShowGuide(true)
+    } 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 +124,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": "名称",