Skip to content

Commit

Permalink
fix: Add learn more link for compatible table
Browse files Browse the repository at this point in the history
  • Loading branch information
yanguoyu committed Jan 12, 2024
1 parent 4907867 commit 0fe68c1
Show file tree
Hide file tree
Showing 9 changed files with 42 additions and 11 deletions.
27 changes: 23 additions & 4 deletions packages/neuron-ui/src/containers/Navbar/index.tsx
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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)) {
Expand All @@ -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) {
Expand Down
8 changes: 8 additions & 0 deletions packages/neuron-ui/src/containers/Navbar/navbar.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 2 additions & 1 deletion packages/neuron-ui/src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion packages/neuron-ui/src/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion packages/neuron-ui/src/locales/zh-tw.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion packages/neuron-ui/src/locales/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion packages/neuron-ui/src/types/App/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@include dialog-container;
padding: 28px 24px 24px;
text-align: center;
width: 456px;
width: 480px;

&::backdrop {
@include overlay;
Expand Down
2 changes: 1 addition & 1 deletion packages/neuron-ui/src/widgets/AlertDialog/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const AlertDialog = ({
}: {
show?: boolean
title?: string
message?: string
message?: React.ReactNode
type: AlertType
onOk?: () => void
onCancel?: () => void
Expand Down

0 comments on commit 0fe68c1

Please sign in to comment.