fix: Add learn more link for compatible table (#3023)

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: (
+          <Trans
+            i18nKey="navbar.ckb-node-compatible"
+            values={{ version: getVersion(), btnText: t('navbar.learn-more') }}
+            components={[
+              <button type="button" className={styles.learnMore} onClick={gotoCompatile}>
+                {t('navbar.learn-more')}
+              </button>,
+            ]}
+          />
+        ),
         action: 'ok',
       })(dispatch)
     } else if (!verifyCkbResult.withIndexer) {

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;
+}

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}}</0>)",
       "ckb-without-indexer": "Please add '--indexer' option to start local node"
     },
     "network-status": {

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}}</0>)",
       "ckb-without-indexer": "Por favor agregue la opción '--indexer' para iniciar el nodo local"
     },
     "network-status": {

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}}</0>)",
       "ckb-without-indexer": "Veuillez ajouter l'option '--indexer' pour démarrer le noeud local"
     },
     "network-status": {

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}}</0>)",
       "ckb-without-indexer": "請添加 '--indexer' 參數來啟動本地節點"
     },
     "network-status": {

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}}</0>)",
       "ckb-without-indexer": "请添加 '--indexer' 参数来启动本地节点"
     },
     "network-status": {

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

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;

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