Add left time for sync progress

packages/neuron-ui/src/components/ClearCache/clearCache.module.scss

@@ -5,26 +5,22 @@
   font-size: 12px;
 }
 
-.clearDialog {
-  height: 180px;
-  width: 360px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  p {
-    font-weight: 500;
-    font-size: 16px;
-    color: var(--main-text-color);
-  }
-}
-
 .clearBtn {
   &[disabled] {
     opacity: 0.5;
     box-shadow: none !important;
     cursor: not-allowed;
   }
+
+  .spinner {
+    width: 16px;
+    height: 16px;
+    vertical-align: sub;
+    margin-left: 4px;
+    & > path {
+      fill: var(--secondary-text-color);
+    }
+  }
 }
 
 .options {

packages/neuron-ui/src/components/ClearCache/index.tsx

@@ -1,15 +1,14 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Spinner from 'widgets/Spinner'
-import Dialog from 'widgets/Dialog'
 import Toast from 'widgets/Toast'
 import { StateDispatch, addPopup } from 'states'
 import { clearCellCache } from 'services/remote'
 import { cacheClearDate } from 'services/localCache'
 import { isSuccessResponse, uniformTimeFormatter } from 'utils'
 import styles from './clearCache.module.scss'
 
-const ClearCacheDialog = ({
+const ClearCache = ({
   dispatch,
   className,
   btnClassName,
@@ -50,20 +49,21 @@ const ClearCacheDialog = ({
           onClick={handleSubmit}
           disabled={isClearing}
         >
-          {t('settings.data.refresh')}
+          {isClearing ? (
+            <>
+              <Spinner className={styles.spinner} />
+              &nbsp;&nbsp;
+              {t('settings.data.clearing-cache')}
+            </>
+          ) : (
+            t('settings.data.refresh')
+          )}
         </button>
       </div>
-
-      <Dialog show={isClearing} showHeader={false} showFooter={false}>
-        <div className={styles.clearDialog}>
-          <Spinner size={3} />
-          <p>{t('settings.data.clearing-cache')}</p>
-        </div>
-      </Dialog>
       <Toast content={notice} onDismiss={() => setNotice('')} />
     </>
   )
 }
 
-ClearCacheDialog.displayName = 'ClearCacheDialog'
-export default ClearCacheDialog
+ClearCache.displayName = 'ClearCache'
+export default ClearCache

packages/neuron-ui/src/components/PageContainer/index.tsx

@@ -41,7 +41,7 @@ const PageContainer: React.FC<ComponentProps> = props => {
   const {
     app: { showWaitForFullySynced },
     chain: {
-      syncState: { bestKnownBlockNumber, cacheTipBlockNumber, syncStatus, isLookingValidTarget, validTarget },
+      syncState: { bestKnownBlockNumber, cacheTipBlockNumber, syncStatus, isLookingValidTarget, validTarget, estimate },
       connectionStatus,
       networkID,
     },
@@ -141,6 +141,7 @@ const PageContainer: React.FC<ComponentProps> = props => {
               isLightClient={isLightClient}
               onOpenSetStartBlock={openDialog}
               startBlockNumber={walletStartBlockNumber}
+              estimate={estimate}
             />
           </div>
         </div>

packages/neuron-ui/src/components/SyncStatus/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SyncStatus as SyncStatusEnum, ConnectionStatus, clsx, localNumberFormatter } from 'utils'
+import { SyncStatus as SyncStatusEnum, ConnectionStatus, clsx, localNumberFormatter, getSyncLeftTime } from 'utils'
 import { Confirming, NewTab } from 'widgets/Icons/icon'
 import { ReactComponent as UnexpandStatus } from 'widgets/Icons/UnexpandStatus.svg'
 import { ReactComponent as StartBlock } from 'widgets/Icons/StartBlock.svg'
@@ -14,13 +14,15 @@ const SyncDetail = ({
   isLightClient,
   onOpenSetStartBlock,
   startBlockNumber,
+  estimate,
 }: {
   syncBlockNumbers: string
   isLookingValidTarget: boolean
   onOpenValidTarget: (e: React.SyntheticEvent) => void
   isLightClient: boolean
   onOpenSetStartBlock: () => void
   startBlockNumber?: string
+  estimate?: number
 }) => {
   const [t] = useTranslation()
   return (
@@ -45,11 +47,15 @@ const SyncDetail = ({
         </div>
       )}
       {isLightClient && startBlockNumber ? (
-        <div className={styles.startBlockNumber}>
+        <div className={styles.item}>
           <div className={styles.title}>{t('network-status.tooltip.start-block-number')}:</div>
           <div className={styles.number}>{localNumberFormatter(startBlockNumber)}</div>
         </div>
       ) : null}
+      <div className={styles.item}>
+        <div className={styles.title}>{t('network-status.left-time')}</div>
+        <div className={styles.number}>{getSyncLeftTime(estimate)}</div>
+      </div>
       {isLightClient && (
         <div
           role="link"
@@ -79,6 +85,7 @@ const SyncStatus = ({
   isLightClient,
   onOpenSetStartBlock,
   startBlockNumber,
+  estimate,
 }: React.PropsWithoutRef<{
   syncStatus: SyncStatusEnum
   connectionStatus: State.ConnectionStatus
@@ -90,6 +97,7 @@ const SyncStatus = ({
   isLightClient: boolean
   onOpenSetStartBlock: () => void
   startBlockNumber?: string
+  estimate?: number
 }>) => {
   const [t] = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -127,6 +135,7 @@ const SyncStatus = ({
           isLightClient={isLightClient}
           onOpenSetStartBlock={onOpenSetStartBlock}
           startBlockNumber={startBlockNumber}
+          estimate={estimate}
         />
       }
       trigger="click"

packages/neuron-ui/src/components/SyncStatus/syncStatus.module.scss

@@ -46,6 +46,8 @@
 .tipContainer {
   .tip {
     padding: 12px;
+    // set left 40% to avoid horizontal scroll bar when find valid target
+    left: 40% !important;
   }
   .blockSynced {
     font-size: 12px;
@@ -92,7 +94,7 @@
     }
   }
 
-  .startBlockNumber {
+  .item {
     margin-top: 8px;
     .title {
       font-size: 12px;

packages/neuron-ui/src/locales/en.json

@@ -35,7 +35,8 @@
         "start-block-number": "Start block number",
         "set-start-block-number": "Set start block number"
       },
-      "migrating": "migrating..."
+      "migrating": "migrating...",
+      "left-time": "Left Time"
     },
     "import-hardware": {
       "title": {

packages/neuron-ui/src/locales/es.json

@@ -34,7 +34,8 @@
         "looking-valid-target": "Buscando objetivo válido asumido",
         "set-start-block-number": "Establecer el número de bloque inicial"
       },
-      "migrating": "migrando..."
+      "migrating": "migrando...",
+      "left-time": "Tiempo restante"
     },
     "import-hardware": {
       "title": {

packages/neuron-ui/src/locales/fr.json

@@ -35,7 +35,8 @@
         "start-block-number": "bloc de départ",
         "set-start-block-number": "Définir le numéro de bloc de départ"
       },
-      "migrating": "migration en cours..."
+      "migrating": "migration en cours...",
+      "left-time": "Temps restant"
     },
     "import-hardware": {
       "title": {

packages/neuron-ui/src/locales/zh-tw.json

@@ -35,7 +35,8 @@
         "start-block-number": "起始區塊",
         "set-start-block-number": "設置同步起始區塊"
       },
-      "migrating": "正在數據遷移..."
+      "migrating": "正在數據遷移...",
+      "left-time": "剩余時間"
     },
     "import-hardware": {
       "title": {

packages/neuron-ui/src/locales/zh.json

@@ -35,7 +35,8 @@
         "start-block-number": "起始区块",
         "set-start-block-number": "设置同步起始区块"
       },
-      "migrating": "正在数据迁移..."
+      "migrating": "正在数据迁移...",
+      "left-time": "剩余时间"
     },
     "import-hardware": {
       "title": {

packages/neuron-ui/src/tests/getSyncLeftTime/fixtures.json

@@ -3,20 +3,32 @@
     "estimate": null,
     "expected": "-"
   },
-  "should return 00:01 when estimate is 60_000": {
+  "should return 00:00:00 when estimate is less than 1_000": {
+    "estimate": 999,
+    "expected": "00:00:00"
+  },
+  "should return 00:00:01 when estimate is 1_000": {
+    "estimate": 1000,
+    "expected": "00:00:01"
+  },
+  "should return 00:01:00 when estimate is 60_000": {
     "estimate": 60000,
-    "expected": "00:01"
+    "expected": "00:01:00"
+  },
+  "should return 00:01:59 when estimate is 119_999": {
+    "estimate": 119999,
+    "expected": "00:01:59"
   },
   "should return 01:00 when estimate is 60 * 60_000": {
     "estimate": 3600000,
-    "expected": "01:00"
+    "expected": "01:00:00"
   },
-  "should return 00:00 when estimate is less than 30_000": {
-    "estimate": 29999,
-    "expected": "00:00"
+  "should return 01:59:59 when estimate is 60 * 60_000 + 59 * 60_000 + 59 * 1_000": {
+    "estimate": 7199000,
+    "expected": "01:59:59"
   },
   "should return 00:01 when estimate is less than 60_000 but greater than 30_000": {
     "estimate": 30001,
-    "expected": "00:01"
+    "expected": "00:00:30"
   }
 }

packages/neuron-ui/src/utils/getSyncLeftTime.ts

@@ -1,13 +1,15 @@
-const MINS_PER_HOUR = 60
+const MILLISECS_PER_SEC = 1_000
+const MILLISECS_PER_MIN = 60_000
 const MILLISECS_PER_HOUR = 3600_000
 
 export const getSyncLeftTime = (estimate: number | undefined) => {
   let leftTime = '-'
   if (typeof estimate === 'number') {
     const time = estimate / MILLISECS_PER_HOUR
     const hrs = Math.floor(time)
-    const mins = Math.round((time - hrs) * MINS_PER_HOUR)
-    leftTime = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`
+    const mins = Math.floor((estimate - hrs * MILLISECS_PER_HOUR) / MILLISECS_PER_MIN)
+    const secs = Math.floor((estimate - hrs * MILLISECS_PER_HOUR - mins * MILLISECS_PER_MIN) / MILLISECS_PER_SEC)
+    leftTime = [hrs, mins, secs].map(v => v.toString().padStart(2, '0')).join(':')
   }
   return leftTime
 }