feat: Add set light client start block number

packages/neuron-ui/src/components/ImportHardware/findDevice.module.scss

@@ -12,6 +12,10 @@
     flex-direction: column;
     align-items: center;
 
+    .name {
+      width: 480px;
+    }
+
     .selectDevice {
       display: flex;
       flex-direction: column;

packages/neuron-ui/src/components/ImportHardware/name-wallet.tsx

@@ -6,6 +6,7 @@ import { createHardwareWallet } from 'services/remote'
 import { CONSTANTS, isSuccessResponse, useDialogWrapper } from 'utils'
 import Alert from 'widgets/Alert'
 import { FinishCreateLoading, getAlertStatus } from 'components/WalletWizard'
+import { importedWalletDialogShown } from 'services/localCache'
 import { ImportStep, ActionType, ImportHardwareState } from './common'
 
 import styles from './findDevice.module.scss'
@@ -41,6 +42,9 @@ const NameWallet = ({
         .then(res => {
           if (isSuccessResponse(res)) {
             dispatch({ step: ImportStep.Success })
+            if (res.result) {
+              importedWalletDialogShown.init(res.result.id)
+            }
           } else {
             setErrorMsg(typeof res.message === 'string' ? res.message : res.message!.content!)
           }
@@ -60,7 +64,7 @@ const NameWallet = ({
   return (
     <form className={styles.container}>
       <header className={styles.title}>{t('import-hardware.title.name-wallet')}</header>
-      <section className={styles.main}>
+      <section className={styles.name}>
         <TextField
           required
           autoFocus

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

@@ -17,6 +17,7 @@ import {
 
 import { FinishCreateLoading, CreateFirstWalletNav } from 'components/WalletWizard'
 import TextField from 'widgets/TextField'
+import { importedWalletDialogShown } from 'services/localCache'
 import styles from './importKeystore.module.scss'
 
 const { MAX_WALLET_NAME_LENGTH, MAX_PASSWORD_LENGTH } = CONSTANTS
@@ -105,6 +106,7 @@ const ImportKeystore = () => {
       importKeystore({ name: fields.name!, keystorePath: fields.path, password: fields.password })
         .then(res => {
           if (isSuccessResponse(res)) {
+            importedWalletDialogShown.init(res.result.id)
             navigate(window.neuron.role === 'main' ? RoutePath.Overview : RoutePath.SettingsWallets)
             return
           }

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

@@ -197,7 +197,7 @@ const Overview = () => {
   }, [setShowBalance])
 
   return (
-    <PageContainer head={t('navbar.overview')} notice={pageNotice}>
+    <PageContainer head={t('navbar.overview')} notice={pageNotice} isHomePage>
       <div className={styles.mid}>
         <div className={styles.balance}>
           <span className={styles.balanceTitle}>

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

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useState } from 'react'
+import { importedWalletDialogShown } from 'services/localCache'
+import { isDark, openExternal, updateWallet, setTheme as setThemeAPI } from 'services/remote'
+import { Migrate } from 'services/subjects'
+import { getExplorerUrl, isSuccessResponse } from 'utils'
+
+export const useSetBlockNumber = ({
+  firstAddress,
+  walletID,
+  isMainnet,
+  isLightClient,
+  isHomePage,
+}: {
+  firstAddress: string
+  walletID: string
+  isMainnet: boolean
+  isLightClient: boolean
+  isHomePage?: boolean
+}) => {
+  const [showSetStartBlock, setShowSetStartBlock] = useState(false)
+  const [startBlockNumber, setStartBlockNumber] = useState('')
+  const [blockNumberErr, setBlockNumberErr] = useState('')
+  const onChangeStartBlockNumber = useCallback((e: React.SyntheticEvent<HTMLInputElement>) => {
+    const { value } = e.currentTarget
+    const blockNumber = value.replace(/,/g, '')
+    if (Number.isNaN(+blockNumber) || /[^\d]/.test(blockNumber)) {
+      return
+    }
+    setStartBlockNumber(blockNumber)
+    setBlockNumberErr('')
+  }, [])
+  const onOpenAddressInExplorer = useCallback(() => {
+    const explorerUrl = getExplorerUrl(isMainnet)
+    openExternal(`${explorerUrl}/address/${firstAddress}`)
+  }, [firstAddress])
+  const onViewBlock = useCallback(() => {
+    const explorerUrl = getExplorerUrl(isMainnet)
+    openExternal(`${explorerUrl}/block/${startBlockNumber}`)
+  }, [startBlockNumber, isMainnet])
+  const onConfirm = useCallback(() => {
+    updateWallet({ id: walletID, startBlockNumberInLight: `0x${BigInt(startBlockNumber).toString(16)}` }).then(res => {
+      if (isSuccessResponse(res)) {
+        setShowSetStartBlock(false)
+      } else {
+        setBlockNumberErr(typeof res.message === 'string' ? res.message : res.message.content!)
+      }
+    })
+  }, [startBlockNumber, walletID])
+  const openDialog = useCallback(() => {
+    setShowSetStartBlock(true)
+    setStartBlockNumber('')
+  }, [])
+  useEffect(() => {
+    if (isHomePage) {
+      const needShow = importedWalletDialogShown.needShow(walletID)
+      if (needShow && isLightClient) {
+        openDialog()
+      }
+      importedWalletDialogShown.setShown(walletID)
+    }
+  }, [walletID, isLightClient, isHomePage, openDialog])
+  return {
+    openDialog,
+    closeDialog: useCallback(() => setShowSetStartBlock(false), []),
+    showSetStartBlock,
+    startBlockNumber,
+    onChangeStartBlockNumber,
+    onOpenAddressInExplorer,
+    onViewBlock,
+    onConfirm,
+    blockNumberErr,
+  }
+}
+
+export const useTheme = () => {
+  const [theme, setTheme] = useState<'dark' | 'light'>()
+  useEffect(() => {
+    isDark().then(res => {
+      if (isSuccessResponse(res)) {
+        setTheme(res.result ? 'dark' : 'light')
+      }
+    })
+  }, [])
+  const onSetTheme = useCallback(() => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setThemeAPI(newTheme).then(res => {
+      if (isSuccessResponse(res)) {
+        setTheme(newTheme)
+      }
+    })
+  }, [theme])
+  return {
+    theme,
+    onSetTheme,
+  }
+}
+
+export const useMigrate = () => {
+  const [isMigrate, setIsMigrate] = useState(false)
+  useEffect(() => {
+    const migrateSubscription = Migrate.subscribe(migrateStatus => {
+      setIsMigrate(migrateStatus === 'migrating')
+    })
+    return () => {
+      migrateSubscription.unsubscribe()
+    }
+  }, [])
+  return isMigrate
+}