feat(neuron-ui): limit the times of guide bubble to 3

Author: Keith-CY

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 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 { NeuronWalletContext } from 'states/stateProvider'
 import { ConnectionStatus, FULL_SCREENS, RUN_NODE_GUIDE_URL, Routes } from 'utils/const'
@@ -79,8 +80,9 @@ const Footer = ({
   const [showGuide, setShowGuide] = useState(false)
 
   useEffect(() => {
-    if (connectionStatus !== ConnectionStatus.Online) {
+    if (connectionStatus !== ConnectionStatus.Online && guideBubbleTimes.getRemaining()) {
       setShowGuide(true)
+      guideBubbleTimes.reduce()
     } else {
       setShowGuide(false)
     }

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,
 }