diff --git a/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss b/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss index 92e5f8d34f..39881944b7 100644 --- a/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss +++ b/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss @@ -9,7 +9,7 @@ $action-button-width: 11.25rem; gap: 16px; .content { - width: 176px; + min-width: 176px; padding: 16px; background: var(--input-disabled-color); border-radius: 8px; diff --git a/packages/neuron-ui/src/components/SyncStatus/index.tsx b/packages/neuron-ui/src/components/SyncStatus/index.tsx index 5735881e07..d425869b0e 100644 --- a/packages/neuron-ui/src/components/SyncStatus/index.tsx +++ b/packages/neuron-ui/src/components/SyncStatus/index.tsx @@ -1,10 +1,11 @@ import React, { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' import { SyncStatus as SyncStatusEnum, ConnectionStatus, clsx, localNumberFormatter, getSyncLeftTime } from 'utils' -import { Confirming, NewTab } from 'widgets/Icons/icon' +import { Confirming, NewTab, Question } from 'widgets/Icons/icon' import { ReactComponent as UnexpandStatus } from 'widgets/Icons/UnexpandStatus.svg' import { ReactComponent as StartBlock } from 'widgets/Icons/StartBlock.svg' import Tooltip from 'widgets/Tooltip' +import { openExternal } from 'services/remote' import styles from './syncStatus.module.scss' const SyncDetail = ({ @@ -53,7 +54,17 @@ const SyncDetail = ({ ) : null}
-
{t('network-status.left-time')}
+
+ {t('network-status.left-time')}: + {t('network-status.left-time-tip')}
} + className={styles.question} + tipClassName={styles.questionTip} + placement="right-bottom" + > + + +
{getSyncLeftTime(estimate)}
{isLightClient && ( @@ -114,7 +125,34 @@ const SyncStatus = ({ } if (ConnectionStatus.Offline === connectionStatus) { - return {t('sync.sync-failed')} + return ( + + {t('sync.sync-failed')} + + {t('sync.sync-failed-detail')} +    + + + } + trigger="click" + placement="left-bottom" + showTriangle + tipClassName={styles.helpTip} + > + + + + ) } if (SyncStatusEnum.SyncNotStart === syncStatus) { diff --git a/packages/neuron-ui/src/components/SyncStatus/syncStatus.module.scss b/packages/neuron-ui/src/components/SyncStatus/syncStatus.module.scss index 0392091b75..130bb5597b 100755 --- a/packages/neuron-ui/src/components/SyncStatus/syncStatus.module.scss +++ b/packages/neuron-ui/src/components/SyncStatus/syncStatus.module.scss @@ -99,6 +99,37 @@ .title { font-size: 12px; font-weight: 400; + display: flex; + align-items: center; + + .question { + height: 14px; + flex: 1 1 auto; + svg { + margin-left: 4px; + cursor: pointer; + path { + stroke: var(--secondary-text-color); + } + &:hover { + path { + stroke: var(--primary-color); + } + } + } + } + + .questionTip { + top: calc(100% + 28px); + right: -36px; + width: 200px; + left: inherit; + } + + .leftTimeTip { + white-space: normal; + width: 200px; + } } .number { color: var(--third-text-color); @@ -110,8 +141,20 @@ .redDot { position: relative; - color: '#FF1E1E'; + color: var(--error-color); padding-left: 14px; + display: flex; + align-items: center; + + & > div { + height: 14px; + } + + svg { + margin-left: 4px; + cursor: pointer; + } + &::before { content: ''; height: 6px; @@ -122,4 +165,27 @@ top: calc(50% - 3px); background: var(--error-color); } + + .helpTip { + margin-top: 20px; + right: -10px !important; + + & > div:nth-last-child(1) { + right: 12px; + } + } + + .failedDetail { + white-space: normal; + min-width: 250px; + } + .openHelper { + font-weight: 500; + background: inherit; + color: var(--primary-color); + border: none; + padding: 0; + margin: 0; + cursor: pointer; + } } diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json index cb311cc300..2a90be36e6 100644 --- a/packages/neuron-ui/src/locales/en.json +++ b/packages/neuron-ui/src/locales/en.json @@ -36,7 +36,8 @@ "set-start-block-number": "Set start block number" }, "migrating": "migrating...", - "left-time": "Left Time" + "left-time": "Time Remaining", + "left-time-tip": "The time remaining is an estimate and is related to the current network and other factors, and is for reference only." }, "import-hardware": { "title": { @@ -688,7 +689,9 @@ "block-number": "block number", "syncing-balance": "Balance is updating", "slow": "Sync is slow", - "sync-failed": "Sync failed, please check network", + "sync-failed": "Synchronization failed", + "sync-failed-detail": "Synchronization failed due to network node or other problems.", + "learn-more": "Learn More", "sync-not-start": "Sync not started yet, please try to restart Neuron Wallet", "connecting": "Connecting" }, diff --git a/packages/neuron-ui/src/locales/es.json b/packages/neuron-ui/src/locales/es.json index bb7093c4e9..8c35cae3c0 100644 --- a/packages/neuron-ui/src/locales/es.json +++ b/packages/neuron-ui/src/locales/es.json @@ -35,7 +35,8 @@ "set-start-block-number": "Establecer el número de bloque inicial" }, "migrating": "migrando...", - "left-time": "Tiempo restante" + "left-time": "Tiempo restante", + "left-time-tip": "El tiempo restante es una estimación y está relacionado con la red actual y otros factores, y es solo para referencia." }, "import-hardware": { "title": { @@ -671,7 +672,9 @@ "block-number": "número de bloque", "syncing-balance": "El saldo se está actualizando", "slow": "La sincronización es lenta", - "sync-failed": "Error de sincronización, por favor compruebe la red", + "sync-failed": "sincronización fallida", + "sync-failed-detail": "Debido a nodos de red u otros problemas, la sincronización ha fallado.", + "learn-more": "Saber más", "sync-not-start": "La sincronización no se ha iniciado todavía, por favor intente reiniciar Neuron Wallet", "connecting": "Conectando" }, diff --git a/packages/neuron-ui/src/locales/fr.json b/packages/neuron-ui/src/locales/fr.json index 534e1fd1d2..ae9db42555 100644 --- a/packages/neuron-ui/src/locales/fr.json +++ b/packages/neuron-ui/src/locales/fr.json @@ -36,7 +36,8 @@ "set-start-block-number": "Définir le numéro de bloc de départ" }, "migrating": "migration en cours...", - "left-time": "Temps restant" + "left-time": "Temps restant", + "left-time-tip": "Le temps restant est une estimation et est lié au réseau actuel et à d'autres facteurs, et est fourni à titre indicatif seulement." }, "import-hardware": { "title": { @@ -678,7 +679,9 @@ "block-number": "numéro de bloc", "syncing-balance": "La balance est en cours de mise à jour", "slow": "La synchronisation est lente", - "sync-failed": "Échec de la synchronisation, veuillez vérifier le réseau", + "sync-failed": "échec de la synchronisation", + "sync-failed-detail": "En raison de nœuds réseau ou d'autres problèmes, la synchronisation a échoué.", + "learn-more": "En savoir plus", "sync-not-start": "La synchronisation n'a pas encore commencé, veuillez essayer de redémarrer le Wallet Neuron", "connecting": "Connexion en cours" }, diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json index 4350e2981a..76946f85f3 100644 --- a/packages/neuron-ui/src/locales/zh-tw.json +++ b/packages/neuron-ui/src/locales/zh-tw.json @@ -36,7 +36,8 @@ "set-start-block-number": "設置同步起始區塊" }, "migrating": "正在數據遷移...", - "left-time": "剩余時間" + "left-time": "剩余時間", + "left-time-tip": "剩余時間僅為估計值，與當前網絡和其他因素有關，僅供參考。" }, "import-hardware": { "title": { @@ -682,7 +683,9 @@ "block-number": "區塊高度", "syncing-balance": "區塊同步中, 正在獲取最新余額", "slow": "同步緩慢，請檢查網絡", - "sync-failed": "連接失敗, 請檢查網絡", + "sync-failed": "同步失敗", + "sync-failed-detail": "由於網絡節點或其他問題，同步失敗。", + "learn-more": "了解更多", "sync-not-start": "同步尚未開始, 請嘗試重啟", "connecting": "正在連接節點" }, diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json index 86b3a03864..55109b76e9 100644 --- a/packages/neuron-ui/src/locales/zh.json +++ b/packages/neuron-ui/src/locales/zh.json @@ -36,7 +36,8 @@ "set-start-block-number": "设置同步起始区块" }, "migrating": "正在数据迁移...", - "left-time": "剩余时间" + "left-time": "剩余时间", + "left-time-tip": "剩余时间仅为估计值，与当前网络和其他因素有关，仅供参考。" }, "import-hardware": { "title": { @@ -681,7 +682,9 @@ "block-number": "区块高度", "syncing-balance": "区块同步中, 正在获取最新余额", "slow": "同步缓慢，请检查网络", - "sync-failed": "连接失败, 请检查网络", + "sync-failed": "同步失败", + "sync-failed-detail": "由于网络节点或其他问题，同步失败。", + "learn-more": "了解更多", "sync-not-start": "同步尚未开始, 请尝试重启", "connecting": "正在连接节点" }, diff --git a/packages/neuron-ui/src/widgets/Icons/Question.svg b/packages/neuron-ui/src/widgets/Icons/Question.svg new file mode 100644 index 0000000000..c2e6b78f5c --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/Question.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx index 806510ad82..c8a1f9bd2e 100644 --- a/packages/neuron-ui/src/widgets/Icons/icon.tsx +++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx @@ -57,6 +57,7 @@ import { ReactComponent as DeleteSvg } from './Delete.svg' import { ReactComponent as ImportKeystoreSvg } from './SoftWalletImportKeystore.svg' import { ReactComponent as ImportHardwareSvg } from './HardWalletImport.svg' import { ReactComponent as DepositTimeSortSvg } from './DepositTimeSort.svg' +import { ReactComponent as QuestionSvg } from './Question.svg' import styles from './icon.module.scss' @@ -130,3 +131,4 @@ export const Delete = WrapSvg(DeleteSvg) export const ImportKeystore = WrapSvg(ImportKeystoreSvg) export const ImportHardware = WrapSvg(ImportHardwareSvg) export const DepositTimeSort = WrapSvg(DepositTimeSortSvg) +export const Question = WrapSvg(QuestionSvg) diff --git a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss index 6c4d88ffd1..111bd6d1d3 100644 --- a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss +++ b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss @@ -251,25 +251,25 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b .tipWithNode { position: relative; - .tip { + > .tip { @include tip; } &[data-type='always-dark'] { - .tip { + > .tip { background: #000000; color: #ffffff; } } &[data-trigger='click'] { - &[data-tip-show='true'] .tip { + &[data-tip-show='true'] > .tip { display: block; } } @each $placement in $placements { - @include tip-placement($placement, ' .tip'); + @include tip-placement($placement, '> .tip'); } &[data-trigger='hover'] { @@ -286,14 +286,14 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b &[data-has-trigger='true'] { &[data-placement='bottom'] { &:not([data-trigger-next-to-child='true']) { - & .tip { + & > .tip { top: calc(100% + 20px); } } } &[data-placement='top'] { &[data-trigger-next-to-child='true'] { - & .tip { + & > .tip { margin-bottom: 2px; } }