From a0f7f00e6e04ec078bbb0ebd3bc350ea7846f4fc Mon Sep 17 00:00:00 2001
From: yanguoyu <841185308@qq.com>
Date: Thu, 20 Jun 2024 18:02:25 +0800
Subject: [PATCH] feat: Add guide for multisig address
---
.../src/components/MultisigAddress/index.tsx | 53 ++++++++++++++++--
.../multisigAddress.module.scss | 56 +++++++++++++++++++
packages/neuron-ui/src/locales/en.json | 2 +
packages/neuron-ui/src/locales/es.json | 2 +
packages/neuron-ui/src/locales/fr.json | 2 +
packages/neuron-ui/src/locales/zh-tw.json | 2 +
packages/neuron-ui/src/locales/zh.json | 2 +
.../neuron-ui/src/widgets/Tooltip/index.tsx | 6 +-
8 files changed, 119 insertions(+), 6 deletions(-)
diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
index f0f3f4bbf0..d788190cf2 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/index.tsx
+++ b/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,6 +29,7 @@ import {
Upload,
Edit,
Confirming,
+ Question,
} from 'widgets/Icons/icon'
import AttentionCloseDialog from 'widgets/Icons/Attention.png'
import { HIDE_BALANCE, NetworkType } from 'utils/const'
@@ -35,6 +37,7 @@ 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 }) => (
+
+))
+
const MultisigAddress = () => {
const [t, i18n] = useTranslation()
useOnLocaleChange(i18n)
@@ -192,12 +208,41 @@ const MultisigAddress = () => {
}
}
}, [isLightClient])
+ const titleRef = useRef(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 (
+ }
onCancel={isLightClient ? onCancelWithLight : onBack}
showFooter={false}
>
diff --git a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss b/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss
index 7508e4f9a1..f93d2bea0d 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss
+++ b/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;
+ }
+ }
+}
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index ad0395e53d..1d50063f11 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/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.",
+ "learn-more": "learn more",
"search": {
"placeholder": "search by multisig address,alias"
},
diff --git a/packages/neuron-ui/src/locales/es.json b/packages/neuron-ui/src/locales/es.json
index a032e20bec..6b6a185a3d 100644
--- a/packages/neuron-ui/src/locales/es.json
+++ b/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.",
+ "learn-more": "más información",
"search": {
"placeholder": "buscar por dirección de multifirma, alias"
},
diff --git a/packages/neuron-ui/src/locales/fr.json b/packages/neuron-ui/src/locales/fr.json
index e38beafccc..0817d30c83 100644
--- a/packages/neuron-ui/src/locales/fr.json
+++ b/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.",
+ "learn-more": "en savoir plus",
"search": {
"placeholder": "recherche par adresse multisig, alias"
},
diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
index 90a8d7670f..8d68fe1ee5 100644
--- a/packages/neuron-ui/src/locales/zh-tw.json
+++ b/packages/neuron-ui/src/locales/zh-tw.json
@@ -1076,6 +1076,8 @@
},
"multisig-address": {
"window-title": "多簽地址",
+ "guide-tip": "對於首次使用您可以查看文檔以 <0>了解更多。",
+ "learn-more": "了解更多",
"search": {
"placeholder": "使用地址或者别名搜索"
},
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index 8e19bf5c8e..dc258e3c92 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -1075,6 +1075,8 @@
},
"multisig-address": {
"window-title": "多签地址",
+ "guide-tip": "对于首次使用您可以查看文档以 <0>了解更多。",
+ "learn-more": "了解更多",
"search": {
"placeholder": "使用地址或者别名搜索"
},
diff --git a/packages/neuron-ui/src/widgets/Tooltip/index.tsx b/packages/neuron-ui/src/widgets/Tooltip/index.tsx
index 8b6563cba4..8bc66d8f57 100644
--- a/packages/neuron-ui/src/widgets/Tooltip/index.tsx
+++ b/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> = ({
tip,
className = '',
tipClassName = '',
+ tipStyles,
placement = 'bottom',
center = true,
trigger = 'hover',
@@ -88,7 +90,7 @@ const Tooltip: React.FC> = ({
data-has-trigger={showTriangle}
data-trigger-next-to-child={isTriggerNextToChild}
>
-