From f555d5bceedcbff72066e7e96102d0a08e3af5f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E5=9B=BD=E5=AE=87?= <841185308@qq.com> Date: Thu, 18 Jan 2024 07:56:32 +0000 Subject: [PATCH] fix: Add learn more link for compatible table (#3023) --- .../neuron-ui/src/containers/Navbar/index.tsx | 27 ++++++++++++++++--- .../src/containers/Navbar/navbar.module.scss | 8 ++++++ packages/neuron-ui/src/locales/en.json | 3 ++- packages/neuron-ui/src/locales/es.json | 3 ++- packages/neuron-ui/src/locales/fr.json | 3 ++- packages/neuron-ui/src/locales/zh-tw.json | 3 ++- packages/neuron-ui/src/locales/zh.json | 3 ++- packages/neuron-ui/src/types/App/index.d.ts | 2 +- .../AlertDialog/alertDialog.module.scss | 2 +- .../src/widgets/AlertDialog/index.tsx | 2 +- 10 files changed, 44 insertions(+), 12 deletions(-) diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx index 6c38bdbfe7..e7d2a9d14c 100644 --- a/packages/neuron-ui/src/containers/Navbar/index.tsx +++ b/packages/neuron-ui/src/containers/Navbar/index.tsx @@ -1,16 +1,21 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react' import { createPortal } from 'react-dom' import { useLocation, NavLink, useNavigate } from 'react-router-dom' -import { useTranslation } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { NeuronWalletActions, showGlobalAlertDialog, useDispatch, useState as useGlobalState } from 'states' -import { VerifyExternalCkbNodeRes, checkForUpdates, getVersion, verifyExternalCkbNode } from 'services/remote' +import { + VerifyExternalCkbNodeRes, + checkForUpdates, + getVersion, + openExternal, + verifyExternalCkbNode, +} from 'services/remote' import { AppUpdater as AppUpdaterSubject } from 'services/subjects' import Badge from 'widgets/Badge' import Logo from 'widgets/Icons/Logo.png' import { Overview, History, NervosDAO, Settings, Experimental, MenuExpand, ArrowNext } from 'widgets/Icons/icon' import { RoutePath, clsx, isSuccessResponse, useOnLocaleChange } from 'utils' import Tooltip from 'widgets/Tooltip' - import styles from './navbar.module.scss' export const FULL_SCREENS = [`/wizard/`, `/keystore/`, RoutePath.ImportHardware] @@ -107,6 +112,10 @@ const Navbar = () => { } }, [network?.readonly]) + const gotoCompatile = useCallback(() => { + openExternal(`https://neuron.magickbase.com${i18n.language.startsWith('zh') ? '/zh' : ''}/download`) + }, [i18n.language]) + useEffect(() => { // isUpdated is true or version is not empty means check update has return if (!verifyCkbResult || (isUpdated !== true && !version)) { @@ -121,7 +130,17 @@ const Navbar = () => { } else if (!verifyCkbResult.ckbIsCompatible) { showGlobalAlertDialog({ type: 'warning', - message: t('navbar.ckb-node-compatible', { version: getVersion() }), + message: ( + + {t('navbar.learn-more')} + , + ]} + /> + ), action: 'ok', })(dispatch) } else if (!verifyCkbResult.withIndexer) { diff --git a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss index c2ee9f8021..269bd4c26a 100644 --- a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss +++ b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss @@ -198,3 +198,11 @@ $hover-bg-color: #3cc68a4d; top: 0; right: 0; } + +.learnMore { + border: none; + background-color: transparent; + color: var(--primary-color); + padding: 0; + cursor: pointer; +} diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json index ebb212ab95..338f714db6 100644 --- a/packages/neuron-ui/src/locales/en.json +++ b/packages/neuron-ui/src/locales/en.json @@ -24,7 +24,8 @@ "experimental-functions": "Experimental", "s-udt": "Asset Accounts", "update-neuron-with-ckb": "The version of the CKB node does not match Neuron (v{{ version }}), which may cause compatibility issues. Please update to the latest version of Neuron.", - "ckb-node-compatible": "CKB node is not compatible with Neuron (v{{ version }}), please check before further operation.", + "learn-more": "Learn More", + "ckb-node-compatible": "CKB node is not compatible with Neuron (v{{ version }}), please check before further operation. (<0>{{btnText}})", "ckb-without-indexer": "Please add '--indexer' option to start local node" }, "network-status": { diff --git a/packages/neuron-ui/src/locales/es.json b/packages/neuron-ui/src/locales/es.json index 651e7d00e0..9909598ea0 100644 --- a/packages/neuron-ui/src/locales/es.json +++ b/packages/neuron-ui/src/locales/es.json @@ -24,7 +24,8 @@ "experimental-functions": "Experimental", "s-udt": "Cuentas de activos", "update-neuron-with-ckb": "La versión del nodo de CKB no coincide con Neuron (v{{ version }}), lo que puede causar problemas de compatibilidad. Por favor actualice a la última versión de Neuron.", - "ckb-node-compatible": "El nodo CKB no es compatible con Neuron (v{{ version }}), por favor compruébelo antes de continuar.", + "learn-more": "Saber más", + "ckb-node-compatible": "El nodo CKB no es compatible con Neuron (v{{ version }}), por favor compruébelo antes de continuar. (<0>{{btnText}})", "ckb-without-indexer": "Por favor agregue la opción '--indexer' para iniciar el nodo local" }, "network-status": { diff --git a/packages/neuron-ui/src/locales/fr.json b/packages/neuron-ui/src/locales/fr.json index 98e95bd3e6..a4fcb7e2c9 100644 --- a/packages/neuron-ui/src/locales/fr.json +++ b/packages/neuron-ui/src/locales/fr.json @@ -24,7 +24,8 @@ "experimental-functions": "Expérimental", "s-udt": "Comptes d'actifs", "update-neuron-with-ckb": "La version du noeud CKB ne correspond pas à Neuron (v{{ version }}), ce qui peut entraîner des problèmes de compatibilité. Veuillez mettre à jour vers la dernière version de Neuron.", - "ckb-node-compatible": "Le noeud CKB n'est pas compatible avec Neuron (v{{ version }}), veuillez vérifier avant toute opération ultérieure.", + "learn-more": "En savoir plus", + "ckb-node-compatible": "Le noeud CKB n'est pas compatible avec Neuron (v{{ version }}), veuillez vérifier avant toute opération ultérieure. (<0>{{btnText}})", "ckb-without-indexer": "Veuillez ajouter l'option '--indexer' pour démarrer le noeud local" }, "network-status": { diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json index ed8a420952..151d07d7dd 100644 --- a/packages/neuron-ui/src/locales/zh-tw.json +++ b/packages/neuron-ui/src/locales/zh-tw.json @@ -24,7 +24,8 @@ "experimental-functions": "實驗性功能", "s-udt": "資產賬戶", "update-neuron-with-ckb": "CKB 節點版本與 Neuron (v{{ version }}) 不匹配，可能導致兼容性問題。請更新到最新版 Neuron。", - "ckb-node-compatible": "CKB 節點版本與 Neuron (v{{ version }}) 不兼容，請謹慎使用。", + "learn-more": "了解更多", + "ckb-node-compatible": "CKB 節點版本與 Neuron (v{{ version }}) 不兼容，請謹慎使用。(<0>{{btnText}})", "ckb-without-indexer": "請添加 '--indexer' 參數來啟動本地節點" }, "network-status": { diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json index 4edaf921b0..05fdaf61bd 100644 --- a/packages/neuron-ui/src/locales/zh.json +++ b/packages/neuron-ui/src/locales/zh.json @@ -24,7 +24,8 @@ "experimental-functions": "实验性功能", "s-udt": "资产账户", "update-neuron-with-ckb": "CKB 节点版本与 Neuron (v{{ version }}) 不匹配，可能导致兼容性问题。请更新到最新版 Neuron。", - "ckb-node-compatible": "CKB 节点版本与 Neuron (v{{ version }}) 不兼容，请谨慎使用。", + "learn-more": "了解更多", + "ckb-node-compatible": "CKB 节点版本与 Neuron (v{{ version }}) 不兼容，请谨慎使用。(<0>{{btnText}})", "ckb-without-indexer": "请添加 '--indexer' 参数来启动本地节点" }, "network-status": { diff --git a/packages/neuron-ui/src/types/App/index.d.ts b/packages/neuron-ui/src/types/App/index.d.ts index 9c1ac509e2..dd3e99b739 100644 --- a/packages/neuron-ui/src/types/App/index.d.ts +++ b/packages/neuron-ui/src/types/App/index.d.ts @@ -138,7 +138,7 @@ declare namespace State { type GlobalAlertDialog = { show?: boolean title?: string - message?: string + message?: React.ReactNode type: 'success' | 'failed' | 'warning' action?: 'ok' | 'cancel' | 'all' onClose?: () => void diff --git a/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss b/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss index 28a879e2b2..b89b270757 100644 --- a/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss +++ b/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss @@ -4,7 +4,7 @@ @include dialog-container; padding: 28px 24px 24px; text-align: center; - width: 456px; + width: 480px; &::backdrop { @include overlay; diff --git a/packages/neuron-ui/src/widgets/AlertDialog/index.tsx b/packages/neuron-ui/src/widgets/AlertDialog/index.tsx index eaab451223..4955d0fac2 100644 --- a/packages/neuron-ui/src/widgets/AlertDialog/index.tsx +++ b/packages/neuron-ui/src/widgets/AlertDialog/index.tsx @@ -21,7 +21,7 @@ const AlertDialog = ({ }: { show?: boolean title?: string - message?: string + message?: React.ReactNode type: AlertType onOk?: () => void onCancel?: () => void