Merge pull request #3153 from yanguoyu/feat-add-prompt

nervosnetwork · May 21, 2024 · ea263b4 · ea263b4 · github-actions · May 21, 2024
2 parents 2fcc43d + beeb8fa
commit ea263b4
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 21 deletions.
diff --git 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
@@ -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 = ({
         </div>
       ) : null}
       <div className={styles.item}>
-        <div className={styles.title}>{t('network-status.left-time')}</div>
+        <div className={styles.title}>
+          {t('network-status.left-time')}:
+          <Tooltip
+            tip={<div className={styles.leftTimeTip}>{t('network-status.left-time-tip')}</div>}
+            className={styles.question}
+            tipClassName={styles.questionTip}
+            placement="right-bottom"
+          >
+            <Question />
+          </Tooltip>
+        </div>
         <div className={styles.number}>{getSyncLeftTime(estimate)}</div>
       </div>
       {isLightClient && (
@@ -114,7 +125,34 @@ const SyncStatus = ({
   }
 
   if (ConnectionStatus.Offline === connectionStatus) {
-    return <span className={styles.redDot}>{t('sync.sync-failed')}</span>
+    return (
+      <span className={styles.redDot}>
+        {t('sync.sync-failed')}
+        <Tooltip
+          tip={
+            <div className={styles.failedDetail}>
+              {t('sync.sync-failed-detail')}
+              &nbsp;&nbsp;
+              <button
+                type="button"
+                onClick={() => {
+                  openExternal(`https://neuron.magickbase.com/posts/issues/2893`)
+                }}
+                className={styles.openHelper}
+              >
+                {t('sync.learn-more')}
+              </button>
+            </div>
+          }
+          trigger="click"
+          placement="left-bottom"
+          showTriangle
+          tipClassName={styles.helpTip}
+        >
+          <Question />
+        </Tooltip>
+      </span>
+    )
   }
 
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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;
         }
       }