Merge branch 'develop' into renovate/electron-builder-24.x

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

@@ -398,7 +398,7 @@ export const usePassword = () => {
 }
 
 export const useHardWallet = ({ wallet, t }: { wallet: State.WalletIdentity; t: TFunction }) => {
-  const isWin32 = useMemo(() => {
+  const isWin32 = useMemo<boolean>(() => {
     return getPlatform() === 'win32'
   }, [])
   const [error, setError] = useState<ErrorCode | string | undefined>()

packages/neuron-ui/src/components/GeneralSetting/LockWindowDialog/hooks.ts

@@ -71,7 +71,7 @@ export const useRepeatPassword = ({
   password: string
   t: TFunction
   encryptedPassword?: string
-  onCancel: () => void
+  onCancel: (success: boolean) => void
 }) => {
   const dispatch = useDispatch()
   const [errMsg, setErrMsg] = useState('')
@@ -89,7 +89,7 @@ export const useRepeatPassword = ({
           updateLockWindowInfo(
             encryptedPassword ? { password: updatedRepeatPassword } : { password: updatedRepeatPassword, locked: true }
           )(dispatch)
-          onCancel()
+          onCancel(true)
         }
       } else {
         setErrMsg('')

packages/neuron-ui/src/components/GeneralSetting/LockWindowDialog/index.tsx

@@ -13,7 +13,7 @@ const LockWindowDialog = ({
   encryptedPassword,
 }: {
   show: boolean
-  onCancel: () => void
+  onCancel: (success?: boolean) => void
   encryptedPassword?: string
 }) => {
   const [t] = useTranslation()

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

@@ -97,14 +97,15 @@ const UpdateDownloadStatus = ({
   }
 
   if (downloaded) {
+    const isWin = process.platform === 'win32'
     return (
       <Dialog
         show={show}
         onCancel={onCancel}
         showCancel={false}
         onConfirm={handleConfirm}
         disabled={!downloaded}
-        confirmText={t('updates.quit-and-install')}
+        confirmText={t(`updates.${isWin ? 'quit-and-install' : 'quit-and-install-restart'}`)}
         title={t('updates.update-available')}
         confirmProps={{
           'data-method': 'install',

packages/neuron-ui/src/components/ImportFailureDialog/importFailureDialog.module.scss

@@ -0,0 +1,23 @@
+@import '../../styles/mixin.scss';
+
+.container {
+  width: 680px;
+
+  .content {
+    max-width: 60%;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--main-text-color);
+
+    button {
+      border: none;
+      background: none;
+      color: var(--primary-color);
+      text-decoration: underline;
+      text-underline-offset: 4px;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Dialog from 'widgets/Dialog'
+import { openExternal } from 'services/remote'
+import styles from './importFailureDialog.module.scss'
+
+const ImportFailureDialog = ({ show, onClose }: { show: boolean; onClose: () => void }) => {
+  const [t] = useTranslation()
+
+  const onBtnClick = useCallback(() => {
+    openExternal(
+      'https://github.com/nervosnetwork/ckb-cli/wiki/Import-ckb-cli-keystore-from%26to-Neuron-wallet#ckb-cli-and-neuron-use-the-keystore-in-different-way'
+    )
+  }, [])
+
+  return (
+    <Dialog
+      show={show}
+      title={t('import-keystore.import-failure')}
+      onCancel={onClose}
+      onConfirm={onClose}
+      showCancel={false}
+    >
+      <div className={styles.container}>
+        <p className={styles.content}>
+          {t('import-keystore.import-failure-msg')}
+          <button type="button" onClick={onBtnClick}>
+            {t('navbar.learn-more')}
+          </button>
+        </p>
+      </div>
+    </Dialog>
+  )
+}
+
+ImportFailureDialog.displayName = 'ImportFailureDialog'
+
+export default ImportFailureDialog

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

@@ -19,6 +19,7 @@ import ReplaceDuplicateWalletDialog, { useReplaceDuplicateWallet } from 'compone
 import { FinishCreateLoading, CreateFirstWalletNav } from 'components/WalletWizard'
 import TextField from 'widgets/TextField'
 import { importedWalletDialogShown } from 'services/localCache'
+import ImportFailureDialog from '../ImportFailureDialog'
 import styles from './importKeystore.module.scss'
 
 const { MAX_WALLET_NAME_LENGTH, MAX_PASSWORD_LENGTH } = CONSTANTS
@@ -49,6 +50,7 @@ const ImportKeystore = () => {
   const navigate = useNavigate()
   const [fields, setFields] = useState(defaultFields)
   const [openingFile, setOpeningFile] = useState(false)
+  const [isImportFailureDialogShow, setIsImportFailureDialogShow] = useState(false)
   const { onImportingExitingWalletError, dialogProps } = useReplaceDuplicateWallet()
   const goBack = useGoBack()
 
@@ -122,6 +124,11 @@ const ImportKeystore = () => {
             return
           }
 
+          if (res.status === ErrorCode.UnsupportedCkbCliKeystore) {
+            setIsImportFailureDialogShow(true)
+            return
+          }
+
           if (res.message) {
             const msg = typeof res.message === 'string' ? res.message : res.message.content || ''
             if (msg) {
@@ -140,7 +147,18 @@ const ImportKeystore = () => {
           closeDialog()
         })
     },
-    [fields.name, fields.password, fields.path, navigate, openDialog, closeDialog, disabled, setFields, t]
+    [
+      fields.name,
+      fields.password,
+      fields.path,
+      navigate,
+      openDialog,
+      closeDialog,
+      disabled,
+      setFields,
+      t,
+      setIsImportFailureDialogShow,
+    ]
   )
 
   const handleChange = useCallback(
@@ -199,6 +217,10 @@ const ImportKeystore = () => {
     [setFields, wallets, t]
   )
 
+  const onCloseImportFailureDialog = useCallback(() => {
+    setIsImportFailureDialogShow(false)
+  }, [setIsImportFailureDialogShow])
+
   return (
     <>
       <form className={styles.container} onSubmit={handleSubmit}>
@@ -248,6 +270,8 @@ const ImportKeystore = () => {
       </form>
 
       <ReplaceDuplicateWalletDialog {...dialogProps} />
+
+      <ImportFailureDialog show={isImportFailureDialogShow} onClose={onCloseImportFailureDialog} />
     </>
   )
 }

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

@@ -1,17 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import {
   useOnLocaleChange,
   isMainnet as isMainnetUtil,
   shannonToCKBFormatter,
   useExitOnWalletChange,
   useGoBack,
+  useOnWindowResize,
 } from 'utils'
 import { useState as useGlobalState } from 'states'
 import MultisigAddressCreateDialog from 'components/MultisigAddressCreateDialog'
 import MultisigAddressInfo from 'components/MultisigAddressInfo'
 import SendFromMultisigDialog from 'components/SendFromMultisigDialog'
-import { MultisigConfig, changeMultisigSyncStatus } from 'services/remote'
+import { MultisigConfig, changeMultisigSyncStatus, openExternal } from 'services/remote'
 import ApproveMultisigTxDialog from 'components/ApproveMultisigTxDialog'
 import Dialog from 'widgets/Dialog'
 import Table from 'widgets/Table'
@@ -28,13 +29,15 @@ import {
   Upload,
   Edit,
   Confirming,
+  Question,
 } from 'widgets/Icons/icon'
 import AttentionCloseDialog from 'widgets/Icons/Attention.png'
 import { HIDE_BALANCE, NetworkType } from 'utils/const'
 import { onEnter } from 'utils/inputDevice'
 import getMultisigSignStatus from 'utils/getMultisigSignStatus'
 import Button from 'widgets/Button'
 import SetStartBlockNumberDialog from 'components/SetStartBlockNumberDialog'
+import { type TFunction } from 'i18next'
 import {
   useSearch,
   useConfigManage,
@@ -67,6 +70,19 @@ const tableActions = [
   },
 ]
 
+const LearnMore = React.memo(({ t }: { t: TFunction }) => (
+  <button
+    type="button"
+    onClick={() => {
+      openExternal(`https://neuron.magickbase.com/posts/issues/3193`)
+    }}
+    aria-label={t('multisig-address.learn-more')}
+    title={t('multisig-address.learn-more')}
+  >
+    {t('multisig-address.learn-more')}
+  </button>
+))
+
 const MultisigAddress = () => {
   const [t, i18n] = useTranslation()
   useOnLocaleChange(i18n)
@@ -192,12 +208,41 @@ const MultisigAddress = () => {
       }
     }
   }, [isLightClient])
+  const titleRef = useRef<HTMLDivElement | null>(null)
+  const [tipPosition, setTipPosition] = useState<{ left?: number; top?: number }>({})
+  const updateTipPosition = useCallback(() => {
+    if (titleRef.current) {
+      const boundingClientRect = titleRef.current.getBoundingClientRect()
+      setTipPosition({
+        left: boundingClientRect.left - 18,
+        top: boundingClientRect.top - boundingClientRect.height,
+      })
+    }
+  }, [titleRef.current, setTipPosition])
+  useEffect(() => {
+    updateTipPosition()
+  }, [updateTipPosition])
+  useOnWindowResize(updateTipPosition)
 
   return (
     <div>
       <Dialog
         show={showMainDialog}
-        title={t('multisig-address.window-title')}
+        title={
+          <div ref={titleRef} className={styles.title}>
+            {t('multisig-address.window-title')}
+            <Tooltip
+              className={styles.multiGuideTip}
+              tip={<Trans i18nKey="multisig-address.guide-tip" components={[<LearnMore t={t} />]} />}
+              placement="top"
+              showTriangle
+              tipClassName={styles.multiGuide}
+              tipStyles={tipPosition}
+            >
+              <Question />
+            </Tooltip>
+          </div>
+        }
         onCancel={isLightClient ? onCancelWithLight : onBack}
         showFooter={false}
       >
@@ -447,10 +492,8 @@ const MultisigAddress = () => {
         confirmProps={{ type: 'cancel', className: styles.confirmBtn }}
       >
         <img src={AttentionCloseDialog} alt="Synchronization Abort" />
-        <h4>Synchronization Abort</h4>
-        <p>
-          Leaving the current window will cause the multisig synchronization to be aborted, so please confirm to leave.
-        </p>
+        <h4>{t('multisig-address.synchronization-abort')}</h4>
+        <p>{t('multisig-address.synchronization-abort-msg')}</p>
       </Dialog>
 
       {sendAction.sendFromMultisig && sendAction.isDialogOpen ? (

packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss

@@ -228,3 +228,59 @@
     fill: var(--primary-color);
   }
 }
+
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.multiGuideTip {
+  display: inline-flex;
+  margin-left: 4px;
+
+  & > svg {
+    g {
+      fill: none;
+    }
+    path {
+      fill: none;
+      stroke: var(--secondary-text-color);
+    }
+    &:hover,
+    &:active {
+      path {
+        stroke: var(--primary-color);
+      }
+    }
+  }
+  .multiGuide {
+    position: fixed !important;
+    transform: translateX(0) translateY(-100%) !important;
+    width: 270px;
+    white-space: break-spaces !important;
+
+    button {
+      border: none;
+      background-color: transparent;
+      color: var(--primary-color);
+      padding: 0;
+      cursor: pointer;
+    }
+
+    &::after {
+      content: '';
+      width: 270px;
+      height: 50px;
+      background-color: rebeccapurple;
+      display: block;
+      position: absolute;
+      background-color: transparent;
+    }
+  }
+
+  &:hover {
+    .multiGuide {
+      display: table !important;
+    }
+  }
+}

packages/neuron-ui/src/components/SUDTReceiveDialog/sUDTReceiveDialog.module.scss

@@ -52,7 +52,6 @@
   justify-content: center;
   align-items: center;
   word-break: break-word;
-  margin: 0 4px;
   background-color: var(--warn-background-color);
 
   svg {