From 59f2dd5250aba16ad7a2b54b487c9dcbc3ad396c Mon Sep 17 00:00:00 2001 From: Keith Date: Fri, 15 Nov 2019 20:17:44 +0800 Subject: [PATCH 1/2] feat(neuron-ui): add a guide bubble in connection status --- .../neuron-ui/src/containers/Footer/index.tsx | 47 +++++++++++++++++-- packages/neuron-ui/src/locales/en.json | 2 + packages/neuron-ui/src/locales/zh.json | 2 + 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/packages/neuron-ui/src/containers/Footer/index.tsx b/packages/neuron-ui/src/containers/Footer/index.tsx index 98bc9edd7c..f26bb01d25 100644 --- a/packages/neuron-ui/src/containers/Footer/index.tsx +++ b/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 ( - + { + 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 = ({ ) : ( {t('settings.setting-tabs.network')} )} + {showGuide ? ( + + + {t('messages.view-the-run-node-doc')} + + + ) : null} ) diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json index efeeccbdb9..eb738235f7 100644 --- a/packages/neuron-ui/src/locales/en.json +++ b/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", diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json index 7546c52831..61a8e0e30b 100644 --- a/packages/neuron-ui/src/locales/zh.json +++ b/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": "名称", From 9b85589e1167ec9b8859695a158ee28d913fef51 Mon Sep 17 00:00:00 2001 From: Keith Date: Fri, 15 Nov 2019 20:35:30 +0800 Subject: [PATCH 2/2] feat(neuron-ui): limit the times of guide bubble to 3 --- packages/neuron-ui/src/containers/Footer/index.tsx | 4 +++- packages/neuron-ui/src/services/localCache.ts | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/neuron-ui/src/containers/Footer/index.tsx b/packages/neuron-ui/src/containers/Footer/index.tsx index f26bb01d25..9c7e812ce5 100644 --- a/packages/neuron-ui/src/containers/Footer/index.tsx +++ b/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) } diff --git a/packages/neuron-ui/src/services/localCache.ts b/packages/neuron-ui/src/services/localCache.ts index 9458b47e83..497fa2dd17 100644 --- a/packages/neuron-ui/src/services/localCache.ts +++ b/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, }