feat: Add guide for multisig address (#3194)

Co-authored-by: Chen Yu <[email protected]>

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}
       >

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/locales/en.json

@@ -1083,6 +1083,8 @@
     },
     "multisig-address": {
       "window-title": "Multisig Addresses",
+      "guide-tip": "Refer to the Multisig documentation to <0>learn more</0>.",
+      "learn-more": "learn more",
       "search": {
         "placeholder": "search by multisig address,alias"
       },

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

@@ -1066,6 +1066,8 @@
     },
     "multisig-address": {
       "window-title": "Direcciones de Multifirma",
+      "guide-tip": "Para los usuarios nuevos, pueden consultar la documentación para obtener <0>más información</0>.",
+      "learn-more": "más información",
       "search": {
         "placeholder": "buscar por dirección de multifirma, alias"
       },

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

@@ -1073,6 +1073,8 @@
     },
     "multisig-address": {
       "window-title": "Adresses Multisig",
+      "guide-tip": "Pour les nouveaux utilisateurs, vous pouvez consulter la documentation pour <0>en savoir plus</0>.",
+      "learn-more": "en savoir plus",
       "search": {
         "placeholder": "recherche par adresse multisig, alias"
       },

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

@@ -1076,6 +1076,8 @@
     },
     "multisig-address": {
       "window-title": "多簽地址",
+      "guide-tip": "對於首次使用您可以查看文檔以 <0>了解更多</0>。",
+      "learn-more": "了解更多",
       "search": {
         "placeholder": "使用地址或者别名搜索"
       },

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

@@ -1075,6 +1075,8 @@
     },
     "multisig-address": {
       "window-title": "多签地址",
+      "guide-tip": "对于首次使用您可以查看文档以 <0>了解更多</0>。",
+      "learn-more": "了解更多",
       "search": {
         "placeholder": "使用地址或者别名搜索"
       },

packages/neuron-ui/src/widgets/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useRef } from 'react'
+import React, { useCallback, useState, useRef, type CSSProperties } from 'react'
 import { useDidMount } from 'utils'
 import styles from './tooltip.module.scss'
 
@@ -8,6 +8,7 @@ interface TooltipProps {
   tip: React.ReactNode
   className?: string
   tipClassName?: string
+  tipStyles?: CSSProperties
   placement?: Placement
   center?: boolean
   trigger?: 'hover' | 'click'
@@ -21,6 +22,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   tip,
   className = '',
   tipClassName = '',
+  tipStyles,
   placement = 'bottom',
   center = true,
   trigger = 'hover',
@@ -88,7 +90,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
       data-has-trigger={showTriangle}
       data-trigger-next-to-child={isTriggerNextToChild}
     >
-      <div className={`${styles.tip} ${tipClassName}`}>
+      <div className={`${styles.tip} ${tipClassName}`} style={tipStyles}>
         {tip}
         {showTriangle && <div className={styles.triangle} />}
       </div>