Merge branch 'develop' into fix-291

.ckb-light-version

@@ -1 +1 @@
-v0.3.4
+v0.3.5

_typos.toml

@@ -6,4 +6,4 @@ numer = "numer"
 lastest = "lastest"
 
 [files]
-extend-exclude = ["CHANGELOG.md", "**/migrations/*.ts", "**/fr.{ts,json}"]
+extend-exclude = ["CHANGELOG.md", "**/migrations/*.ts", "**/fr.{ts,json}", "**/es.{ts,json}"]

packages/neuron-ui/.storybook/electron.js

@@ -1,5 +1,5 @@
 const sendSyncValues = {
-  'get-locale': ('zh', 'fr'),
+  'get-locale': ('zh', 'fr', 'es'),
   'get-version': '0.103.1',
 }
 

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

@@ -73,12 +73,12 @@ export const useConfigManage = ({ walletId, isMainnet }: { walletId: string; isM
     [walletId, setEntities]
   )
   useEffect(() => {
-    getMultisigConfig(walletId).then(res => {
+    getMultisigConfig().then(res => {
       if (isSuccessResponse(res) && res.result) {
         setEntities(res.result)
       }
     })
-  }, [setEntities, walletId])
+  }, [setEntities])
   const updateConfig = useCallback(
     (id: number) => (e: React.SyntheticEvent<unknown>) => {
       const { value } = e.target as HTMLInputElement

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

@@ -28,10 +28,12 @@ import { ReactComponent as Edit } from 'widgets/Icons/Edit.svg'
 import { Download, Search } from 'widgets/Icons/icon'
 import { HIDE_BALANCE, NetworkType } from 'utils/const'
 import { onEnter } from 'utils/inputDevice'
+import getMultisigSignStatus from 'utils/getMultisigSignStatus'
 import { useSearch, useConfigManage, useExportConfig, useActions, useSubscription } from './hooks'
 
 import styles from './multisigAddress.module.scss'
 
+const ApproveKey = 'approve'
 const tableActions = [
   {
     key: 'info',
@@ -46,7 +48,7 @@ const tableActions = [
     icon: <Transfer />,
   },
   {
-    key: 'approve',
+    key: ApproveKey,
     icon: <Confirm />,
   },
 ]
@@ -56,7 +58,7 @@ const MultisigAddress = () => {
   useOnLocaleChange(i18n)
   useExitOnWalletChange()
   const {
-    wallet: { id: walletId },
+    wallet: { id: walletId, addresses },
     chain: { networkID },
     settings: { networks = [] },
   } = useGlobalState()
@@ -281,6 +283,7 @@ const MultisigAddress = () => {
                   dataIndex: 'action',
                   align: 'left',
                   render(_, __, item) {
+                    const { canSign } = getMultisigSignStatus({ multisigConfig: item, addresses })
                     return (
                       <div className={styles.action}>
                         <Tooltip
@@ -296,7 +299,7 @@ const MultisigAddress = () => {
                                   key={key}
                                   data-key={key}
                                   onClick={onClickItem(item)}
-                                  disabled={disabled}
+                                  disabled={key === ApproveKey ? !canSign || disabled : disabled}
                                 >
                                   {icon}
                                   <span>{t(label)}</span>

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

@@ -179,6 +179,7 @@ const NervosDAO = () => {
                 genesisBlockTimestamp,
                 connectionStatus,
                 isPrivacyMode,
+                hasCkbBalance: +wallet.balance > 0,
               }
               return <DAORecord key={key} {...props} />
             })}

packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss

@@ -249,5 +249,10 @@
       line-height: 56px;
       padding: 0;
     }
+
+    .tip {
+      width: 220px;
+      white-space: normal;
+    }
   }
 }

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

@@ -19,6 +19,7 @@ import { Clock } from 'widgets/Icons/icon'
 import { Link } from 'react-router-dom'
 import { HIDE_BALANCE } from 'utils/const'
 
+import Tooltip from 'widgets/Tooltip'
 import styles from './daoRecordRow.module.scss'
 import hooks from './hooks'
 
@@ -42,6 +43,7 @@ export interface DAORecordProps extends State.NervosDAORecord {
   tipBlockTimestamp: number // tip block timestamp, used to calculate apc, dovetails with current epoch
   genesisBlockTimestamp: number | undefined // genesis block timestamp, used to calculate apc
   isPrivacyMode?: boolean
+  hasCkbBalance?: boolean
 }
 
 export const DAORecord = ({
@@ -62,6 +64,7 @@ export const DAORecord = ({
   withdrawInfo,
   unlockInfo,
   isPrivacyMode,
+  hasCkbBalance,
 }: DAORecordProps) => {
   const [t] = useTranslation()
   const [withdrawEpoch, setWithdrawEpoch] = useState('')
@@ -143,8 +146,11 @@ export const DAORecord = ({
   const compensatedPeriod =
     withdrawInfo?.timestamp && depositInfo?.timestamp ? +withdrawInfo.timestamp - +depositInfo.timestamp : undefined
 
+  const isWithdrawnDisabled = CellStatus.Deposited === cellStatus && !hasCkbBalance
   const isActionAvailable =
-    connectionStatus === 'online' && [CellStatus.Deposited, CellStatus.Unlockable].includes(cellStatus)
+    connectionStatus === 'online' &&
+    [CellStatus.Deposited, CellStatus.Unlockable].includes(cellStatus) &&
+    !isWithdrawnDisabled
 
   const depositOutPointKey = depositOutPoint
     ? `${depositOutPoint.txHash}-${depositOutPoint.index}`
@@ -277,14 +283,31 @@ export const DAORecord = ({
           </div>
 
           <div className={styles.action}>
-            <Button
-              type="primary"
-              data-tx-hash={txHash}
-              data-index={index}
-              onClick={onClick}
-              disabled={!isActionAvailable}
-              label={t(`nervos-dao.deposit-record.${isWithdrawn ? 'unlock' : 'withdraw'}-action-label`)}
-            />
+            {isWithdrawnDisabled ? (
+              <Tooltip
+                tip={<div>{t('nervos-dao.deposit-record.insufficient-balance-to-unlock')}</div>}
+                placement="top"
+                tipClassName={styles.tip}
+              >
+                <Button
+                  type="primary"
+                  data-tx-hash={txHash}
+                  data-index={index}
+                  onClick={onClick}
+                  disabled={!isActionAvailable}
+                  label={t(`nervos-dao.deposit-record.${isWithdrawn ? 'unlock' : 'withdraw'}-action-label`)}
+                />
+              </Tooltip>
+            ) : (
+              <Button
+                type="primary"
+                data-tx-hash={txHash}
+                data-index={index}
+                onClick={onClick}
+                disabled={!isActionAvailable}
+                label={t(`nervos-dao.deposit-record.${isWithdrawn ? 'unlock' : 'withdraw'}-action-label`)}
+              />
+            )}
           </div>
         </div>
       )}

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

@@ -1,34 +1,77 @@
-import { useCallback, useEffect, useState } from 'react'
+import { TFunction } from 'i18next'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { importedWalletDialogShown } from 'services/localCache'
-import { isDark, openExternal, updateWallet, setTheme as setThemeAPI } from 'services/remote'
+import { isDark, openExternal, setTheme as setThemeAPI, updateWalletStartBlockNumber } from 'services/remote'
 import { Migrate } from 'services/subjects'
 import { getExplorerUrl, isSuccessResponse } from 'utils'
 
+const waitConfirmTime = 5
+
+const useCountDown = (second: number) => {
+  const [countdown, setCountdown] = useState(0)
+  const countDecreaseIntervalRef = useRef<ReturnType<typeof setInterval>>()
+  const resetCountDown = useCallback(() => {
+    clearInterval(countDecreaseIntervalRef.current)
+    setCountdown(second)
+    const decrement = () => {
+      countDecreaseIntervalRef.current = setInterval(() => {
+        setCountdown(v => {
+          if (v > 0) {
+            return v - 1
+          }
+          clearInterval(countDecreaseIntervalRef.current)
+          return v
+        })
+      }, 1_000)
+    }
+    decrement()
+  }, [setCountdown, countDecreaseIntervalRef])
+  return {
+    countdown,
+    resetCountDown,
+  }
+}
+
 export const useSetBlockNumber = ({
   firstAddress,
   walletID,
   isMainnet,
   isLightClient,
   isHomePage,
+  initStartBlockNumber,
+  headerTipNumber,
+  t,
 }: {
   firstAddress: string
   walletID: string
   isMainnet: boolean
   isLightClient: boolean
   isHomePage?: boolean
+  initStartBlockNumber?: number
+  headerTipNumber: number
+  t: TFunction
 }) => {
   const [isSetStartBlockShown, setIsSetStartBlockShown] = 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 isSetLessThanBefore = useMemo(
+    () => !!(startBlockNumber && initStartBlockNumber && +startBlockNumber < initStartBlockNumber),
+    [initStartBlockNumber, startBlockNumber]
+  )
+  const { countdown, resetCountDown } = useCountDown(waitConfirmTime)
+  const onChangeStartBlockNumber = useCallback(
+    (e: React.SyntheticEvent<HTMLInputElement>) => {
+      const { value } = e.currentTarget
+      const blockNumber = value.replaceAll(',', '')
+      if (Number.isNaN(+blockNumber)) {
+        return
+      }
+      setStartBlockNumber(+blockNumber > headerTipNumber ? headerTipNumber.toString() : blockNumber)
+      setBlockNumberErr(+blockNumber > headerTipNumber ? t('set-start-block-number.reset-to-header-tip-number') : '')
+      resetCountDown()
+    },
+    [resetCountDown, initStartBlockNumber, headerTipNumber, t]
+  )
   const onOpenAddressInExplorer = useCallback(() => {
     const explorerUrl = getExplorerUrl(isMainnet)
     openExternal(`${explorerUrl}/address/${firstAddress}`)
@@ -38,7 +81,10 @@ export const useSetBlockNumber = ({
     openExternal(`${explorerUrl}/block/${startBlockNumber}`)
   }, [startBlockNumber, isMainnet])
   const onConfirm = useCallback(() => {
-    updateWallet({ id: walletID, startBlockNumber: `0x${BigInt(startBlockNumber).toString(16)}` }).then(res => {
+    updateWalletStartBlockNumber({
+      id: walletID,
+      startBlockNumber: `0x${BigInt(startBlockNumber).toString(16)}`,
+    }).then(res => {
       if (isSuccessResponse(res)) {
         setIsSetStartBlockShown(false)
       } else {
@@ -48,9 +94,9 @@ export const useSetBlockNumber = ({
   }, [startBlockNumber, walletID])
   const openDialog = useCallback(() => {
     setIsSetStartBlockShown(true)
-    setStartBlockNumber('')
+    setStartBlockNumber(initStartBlockNumber?.toString() ?? '')
     setBlockNumberErr('')
-  }, [])
+  }, [initStartBlockNumber])
   useEffect(() => {
     if (isHomePage) {
       const needShow = importedWalletDialogShown.getStatus(walletID)
@@ -70,6 +116,8 @@ export const useSetBlockNumber = ({
     onViewBlock,
     onConfirm,
     blockNumberErr,
+    countdown,
+    isSetLessThanBefore,
   }
 }