feat: Show tip for first sync and show dialog when disk is not enough

.github/workflows/update_valid_target.yml → .github/workflows/update_wallet_env.yml

@@ -14,13 +14,13 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          branch: 'chore-update-valid-target/${{github.ref_name}}'
+          branch: 'chore-update-wallet-env/${{github.ref_name}}'
           sha: '${{ github.event.create.head.sha }}'
 
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: 'chore-update-valid-target/${{github.ref_name}}'
+          ref: 'chore-update-wallet-env/${{github.ref_name}}'
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -29,7 +29,7 @@ jobs:
 
       - name: Write env file
         run: |
-          npm run update:valid-target
+          npm run update:wallet-env
 
       - name: Commit env file
         uses: actions/github-script@v7
@@ -41,7 +41,7 @@ jobs:
             const fs = require('node:fs')
             const { BASE, HEAD } = process.env
             const envFilePath = 'packages/neuron-wallet/.env'
-            const destinationBranch = `chore-update-valid-target/${BASE}`
+            const destinationBranch = `chore-update-wallet-env/${BASE}`
             const { data } = await github.rest.repos.getContent({
               owner: context.repo.owner,
               repo: context.repo.repo,
@@ -63,7 +63,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BASE: ${{github.ref}}
-          HEAD: chore-update-valid-target/${{github.ref_name}}
+          HEAD: chore-update-wallet-env/${{github.ref_name}}
           REPO: ${{github.repository}}
         with:
           script: |

package.json

@@ -36,7 +36,7 @@
     "lint": "lerna run --stream lint",
     "postinstall": "husky install",
     "db:chain": "node ./node_modules/.bin/typeorm",
-    "update:valid-target": "node ./scripts/update-valid-target.js",
+    "update:wallet-env": "node ./scripts/update-wallet-env.js",
     "update:neuron-compatible": "node ./scripts/add-neuron-version-in-compatibility-table.js",
     "update:client-versions": "node ./scripts/update-ckb-client-versions.js"
   },

packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss

@@ -160,71 +160,3 @@
   word-break: normal;
   white-space: normal;
 }
-
-.dialogContainer {
-  max-width: 700px;
-  color: var(--main-text-color);
-  font-size: 14px;
-  line-height: 24px;
-
-  .attention {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 8px;
-    width: 80%;
-    margin: 32px auto 0;
-    background: var(--warn-background-color);
-    border: 1px solid rgba(252, 136, 0, 0.2);
-    border-radius: 4px;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 24px;
-    color: var(--warn-text-color);
-
-    @media (prefers-color-scheme: dark) {
-      border: none;
-    }
-
-    svg {
-      margin-right: 4px;
-      width: 14px;
-    }
-  }
-}
-
-.footer {
-  padding: 24px 0;
-  @include dialog-footer;
-  --footer-background-color: #ecf9f0;
-  @media (prefers-color-scheme: dark) {
-    --footer-background-color: #2d3534;
-  }
-
-  .footerBtn {
-    padding: 0 20px;
-    background: var(--footer-background-color);
-    color: var(--primary-color);
-    &:not([disabled]) {
-      &:hover,
-      &:focus {
-        background-color: var(--footer-background-color);
-        color: color-mix(in srgb, #000000 20%, var(--primary-color));
-      }
-
-      &:active {
-        background-color: var(--footer-background-color);
-        color: color-mix(in srgb, #000000 20%, var(--primary-color));
-      }
-    }
-    &:last-of-type {
-      margin-left: 24px;
-    }
-    svg {
-      g,
-      path {
-        fill: var(--primary-color);
-      }
-    }
-  }
-}

packages/neuron-ui/src/components/DataSetting/hooks.ts

@@ -1,24 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  getCkbNodeDataPath,
-  invokeShowOpenDialog,
-  startProcessMonitor,
-  stopProcessMonitor,
-  setCkbNodeDataPath,
-} from 'services/remote'
+import { getCkbNodeDataPath, invokeShowOpenDialog, startProcessMonitor, stopProcessMonitor } from 'services/remote'
 import { isSuccessResponse } from 'utils'
 
 const type = 'ckb'
 
 export const useDataPath = (network?: State.Network) => {
   const [t] = useTranslation()
-  const [isSaving, setIsSaving] = useState(false)
-  const [savingType, setSavingType] = useState<string | null>()
-  const [prevPath, setPrevPath] = useState<string>()
-  const [currentPath, setCurrentPath] = useState<string | undefined>()
+  const [prevPath, setPrevPath] = useState('')
+  const [currentPath, setCurrentPath] = useState('')
   const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const [faidMessage, setFaidMessage] = useState('')
 
   useEffect(() => {
     getCkbNodeDataPath().then(res => {
@@ -50,41 +41,19 @@ export const useDataPath = (network?: State.Network) => {
     })
   }, [setIsDialogOpen, type])
   const onConfirm = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      setFaidMessage('')
-      const { dataset } = e.currentTarget
-      setIsSaving(true)
-      setSavingType(dataset.syncType)
-      setCkbNodeDataPath({
-        dataPath: currentPath!,
-        clearCache: type === 'ckb' && dataset?.resync === 'true',
-      })
-        .then(res => {
-          if (isSuccessResponse(res)) {
-            setPrevPath(currentPath)
-            setIsDialogOpen(false)
-          } else {
-            setFaidMessage(typeof res.message === 'string' ? res.message : res.message.content!)
-          }
-        })
-        .finally(() => {
-          setIsSaving(false)
-          setSavingType(null)
-        })
+    (dataPath: string) => {
+      setPrevPath(dataPath)
+      setIsDialogOpen(false)
     },
-    [currentPath, setIsDialogOpen, setPrevPath]
+    [setIsDialogOpen, setPrevPath]
   )
   return {
     prevPath,
     currentPath,
     onSetting,
     onCancel,
     onConfirm,
-    isSaving,
-    savingType,
     isDialogOpen,
-    faidMessage,
-    setFaidMessage,
   }
 }
 

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

@@ -1,14 +1,12 @@
-import React, { useCallback, useRef, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from 'widgets/Button'
 import ClearCache from 'components/ClearCache'
 import { useDispatch, useState as useGlobalState } from 'states'
 import { shell } from 'electron'
 import Tooltip from 'widgets/Tooltip'
-import Dialog from 'widgets/Dialog'
-import AlertDialog from 'widgets/AlertDialog'
 import { NetworkType } from 'utils/const'
 import { Attention } from 'widgets/Icons/icon'
+import MigrateCkbDataDialog from 'widgets/MigrateCkbDataDialog'
 import { useDataPath } from './hooks'
 
 import styles from './dataSetting.module.scss'
@@ -40,24 +38,12 @@ const PathItem = ({
 const DataSetting = () => {
   const dispatch = useDispatch()
   const [t] = useTranslation()
-  const resyncRef = useRef<HTMLButtonElement | null>(null)
   const {
     chain: { networkID },
     settings: { networks = [] },
   } = useGlobalState()
   const network = useMemo(() => networks.find(n => n.id === networkID), [networkID, networks])
-  const {
-    onSetting,
-    prevPath,
-    currentPath,
-    isDialogOpen,
-    onCancel,
-    onConfirm,
-    isSaving,
-    savingType,
-    faidMessage,
-    setFaidMessage,
-  } = useDataPath(network)
+  const { onSetting, prevPath, currentPath, isDialogOpen, onCancel, onConfirm } = useDataPath(network)
 
   const openPath = useCallback(() => {
     if (prevPath) {
@@ -100,50 +86,12 @@ const DataSetting = () => {
           <ClearCache className={styles.item} btnClassName={styles.itemBtn} dispatch={dispatch} />
         </div>
       </div>
-
-      <Dialog show={isDialogOpen} title={t('settings.data.ckb-node-storage')} onCancel={onCancel} showFooter={false}>
-        <div className={styles.dialogContainer}>
-          <div>{t('settings.data.remove-ckb-data-tip', { prevPath, currentPath })}</div>
-          <div className={styles.attention}>
-            <Attention />
-            {t('settings.data.resync-ckb-node-describe')}
-          </div>
-
-          <div className={styles.footer}>
-            <Button
-              ref={resyncRef}
-              disabled={isSaving}
-              className={styles.footerBtn}
-              data-sync-type="resync"
-              data-resync="true"
-              label={t('settings.data.re-sync')}
-              type="primary"
-              onClick={onConfirm}
-              loading={isSaving && savingType === 'resync'}
-            />
-
-            <Button
-              disabled={isSaving}
-              className={styles.footerBtn}
-              data-sync-type="move"
-              label={t('settings.data.move-data-finish')}
-              type="primary"
-              onClick={onConfirm}
-              loading={isSaving && savingType === 'move'}
-            />
-          </div>
-        </div>
-      </Dialog>
-
-      <AlertDialog
-        show={!!faidMessage}
-        title={t('settings.data.ckb-node-data')}
-        message={faidMessage}
-        type="warning"
-        onCancel={() => setFaidMessage('')}
-        onOk={() => {
-          resyncRef?.current?.click()
-        }}
+      <MigrateCkbDataDialog
+        show={isDialogOpen}
+        prevPath={prevPath}
+        currentPath={currentPath}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
       />
     </>
   )

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states'
 import {
   shannonToCKBFormatter,
@@ -34,6 +34,9 @@ import CopyZone from 'widgets/CopyZone'
 import { HIDE_BALANCE } from 'utils/const'
 import TransactionType from 'components/TransactionType'
 import { getLockedBalance } from 'services/remote/cellManage'
+import { getFirstSyncInfo, setCkbNodeDataPath, startSync } from 'services/remote'
+import FirstSync from 'widgets/Icons/FirstSync.png'
+import DataPathDialog from 'widgets/DataPathDialog'
 import styles from './overview.module.scss'
 
 const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS
@@ -128,6 +131,39 @@ const Overview = () => {
       }
     })
   }, [])
+  const [isFirstSyncDialogShow, setIsFirstSyncDialogShow] = useState(false)
+  const [ckbNodeDataInfo, setCkbNodeDataInfo] = useState<{ size?: number; dataPath?: string } | undefined>()
+  useEffect(() => {
+    getFirstSyncInfo().then(res => {
+      if (isSuccessResponse(res) && res.result) {
+        setIsFirstSyncDialogShow(res.result.isFirstSync)
+        setCkbNodeDataInfo({ size: res.result.needSize, dataPath: res.result.ckbNodeDataPath })
+      }
+    })
+  }, [])
+  const onChangeDataPath = useCallback((newDataPath: string) => {
+    setCkbNodeDataPath({
+      dataPath: newDataPath,
+      onlySetPath: true,
+    }).then(res => {
+      if (isSuccessResponse(res)) {
+        setCkbNodeDataInfo(v => ({
+          size: v?.size,
+          dataPath: newDataPath,
+        }))
+      }
+    })
+  }, [])
+  const onCancel = useCallback(() => {
+    setIsFirstSyncDialogShow(false)
+  }, [])
+  const onStartSync = useCallback(() => {
+    startSync().then(res => {
+      if (isSuccessResponse(res)) {
+        setIsFirstSyncDialogShow(false)
+      }
+    })
+  }, [])
   return (
     <PageContainer head={t('navbar.overview')} notice={pageNotice} isHomePage>
       <div className={styles.topContainer}>
@@ -264,6 +300,16 @@ const Overview = () => {
 
       {showReceive ? <Receive onClose={() => setShowReceive(false)} /> : null}
       {showAddressBook ? <AddressBook onClose={() => setShowAddressBook(false)} /> : null}
+      <DataPathDialog
+        show={isFirstSyncDialogShow}
+        confirmText={t('overview.start-sync')}
+        icon={<img className={styles.firstSyncIcon} src={FirstSync} alt="First Sync" />}
+        text={<Trans i18nKey="overview.first-sync-notice" values={{ size: ckbNodeDataInfo?.size }} />}
+        dataPath={ckbNodeDataInfo?.dataPath ?? ''}
+        onChangeDataPath={onChangeDataPath}
+        onCancel={onCancel}
+        onConfirm={onStartSync}
+      />
     </PageContainer>
   )
 }

packages/neuron-ui/src/components/Overview/overview.module.scss

@@ -210,3 +210,8 @@
     }
   }
 }
+
+.firstSyncIcon {
+  width: 64px;
+  height: 64px;
+}