From 4bef418e53e7c82ed0646f6e76f692d828da90fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B8=83=E5=81=B6=E4=BB=80=E4=B9=88=E7=9A=84=E5=B0=B1?= =?UTF-8?q?=E6=98=AF=E5=B8=83=E5=81=B6?= Date: Tue, 20 Aug 2024 14:18:02 +0800 Subject: [PATCH] fix: xudt detail page tag button not working (#415) Co-authored-by: Chen Yu --- src/components/Search/HighlightText.tsx | 2 -- src/components/XUDTTag/index.tsx | 25 ++++++++++++++++--- src/components/XUDTTag/styles.module.scss | 29 +++++++++++++++++++++++ src/hooks/useCKBNode.tsx | 6 ----- src/locales/en.json | 14 +++++++++++ src/locales/zh.json | 14 +++++++++++ src/pages/Xudt/UDTComp.tsx | 2 +- 7 files changed, 80 insertions(+), 12 deletions(-) diff --git a/src/components/Search/HighlightText.tsx b/src/components/Search/HighlightText.tsx index bbd9f14d3..db7c66e5a 100644 --- a/src/components/Search/HighlightText.tsx +++ b/src/components/Search/HighlightText.tsx @@ -23,8 +23,6 @@ export const HighlightText: FC = ({ text, keyword, ...props const [originTextWidth, setOriginTextWidth] = useState(0) useEffect(() => { - // eslint-disable-next-line no-console - // console.log('HighlightText useEffect', text, keyword, resizedWidth) if (!ref.current || !text || !keyword) return const minSideLen = 3 const wrapperWidth = resizedWidth ?? ref.current.clientWidth diff --git a/src/components/XUDTTag/index.tsx b/src/components/XUDTTag/index.tsx index 755584800..d4c97195b 100644 --- a/src/components/XUDTTag/index.tsx +++ b/src/components/XUDTTag/index.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames' import { useTranslation } from 'react-i18next' import { useHistory } from 'react-router-dom' +import { Popover } from 'antd' import styles from './styles.module.scss' const HIDDEN_TAGS = ['duplicate', 'suspicious', 'utility', 'supply-unlimited', 'out-of-length-range'] -const XUDTTag = ({ tagName, to }: { tagName: string; to?: string }) => { - const { t } = useTranslation() +const XUDTTag = ({ tagName, to, tooltip = false }: { tagName: string; to?: string; tooltip?: boolean }) => { + const { t, i18n } = useTranslation() const { push } = useHistory() // FIXME: the tag should be updated in the backend @@ -39,7 +40,25 @@ const XUDTTag = ({ tagName, to }: { tagName: string; to?: string }) => { } else { search.set('tags', [...tags, tag].join(',')) } - push(`${to ?? window.location.pathname}?${search}`) + push(`${`/${i18n.language}${to ?? window.location.pathname}`}?${search}`) + } + + if (tooltip) { + return ( + +
{t(`xudt.tags_description.${tag}`)}
+ {t('xudt.tags_description.view_more')} + + } + > + + + ) } return ( diff --git a/src/components/XUDTTag/styles.module.scss b/src/components/XUDTTag/styles.module.scss index 790dcd43f..3aa4d64a3 100644 --- a/src/components/XUDTTag/styles.module.scss +++ b/src/components/XUDTTag/styles.module.scss @@ -90,3 +90,32 @@ .normal { border: 1px solid; } + +/* stylelint-disable selector-class-pattern */ +.tagPopover { + max-width: 320px; + + :global { + .ant-popover-content { + .ant-popover-arrow { + .ant-popover-arrow-content { + --antd-arrow-background-color: rgb(0 0 0 / 80%); + } + } + } + + .ant-popover-inner { + background-color: rgb(0 0 0 / 80%); + border-radius: 6px; + + .ant-popover-inner-content { + color: #fff; + + a { + color: var(--primary-color); + text-decoration: underline; + } + } + } + } +} diff --git a/src/hooks/useCKBNode.tsx b/src/hooks/useCKBNode.tsx index 58b13ac6c..144fbcb23 100644 --- a/src/hooks/useCKBNode.tsx +++ b/src/hooks/useCKBNode.tsx @@ -57,12 +57,6 @@ export const CKBNodeProvider = ({ children, defaultEndpoint }: PropsWithChildren const [nodes, setNodes] = useState>(new Map(Object.entries(loadEndpoints()))) const [isActivated, _setIsActivated] = useState(localStorage.getItem(NODE_CONNECT_MODE_KEY) === 'true') - // eslint-disable-next-line no-console - console.log('loadEndpoints', loadEndpoints()) - - // eslint-disable-next-line no-console - console.log('nodes', nodes) - const setIsActivated = (value: boolean) => { localStorage.setItem(NODE_CONNECT_MODE_KEY, value.toString()) _setIsActivated(value) diff --git a/src/locales/en.json b/src/locales/en.json index dbda0579d..83cea945c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -812,6 +812,20 @@ "rgb++": "RGB++", "unnamed": "Unnamed" }, + "tags_description": { + "invalid": "This tag marks an asset whose name contains invalid characters.", + "suspicious": "This tag marks an asset whose name contains multiple hidden character types.", + "out-of-length-range": "This tag marks an asset whose name exceeds 60 characters in length.", + "duplicate": "Under case-sensitive conditions, this tag marks an asset whose name duplicates an already issued asset.", + "rgb++": "This tag marks an asset that is compatible with the RGB++ protocol, allowing for transfers between BTC and CKB.", + "layer-1-asset": "This tag marks an asset that is issued on Layer 1.", + "layer-2-asset": "This tag marks an asset that is issued on Layer 2.", + "verified-on": "This tag marks an asset that has been verified by Cell Studio.", + "supply-limited": "This tag marks an asset that has a limited supply, with a maximum quantity limit.", + "supply-unlimited": "This tag marks an asset that has an unlimited supply, with no maximum quantity limit.", + "view_more": "View more items", + "unnamed": "This tag marks an asset whose name field is empty." + }, "category": "Category" }, "nft": { diff --git a/src/locales/zh.json b/src/locales/zh.json index b36ebc8d9..b08a552bb 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -813,6 +813,20 @@ "rgb++": "RGB++", "unnamed": "未命名" }, + "tags_description": { + "invalid": "此 Tag 标记的资产名称中含有无效字符。", + "suspicious": "此 Tag 标记的资产名称中含有大量隐藏字符类型。", + "out-of-length-range": "此 Tag 标记的资产名称长度超过 60 字符。", + "duplicate": "区分大小写前提下，此 Tag 标记的资产名称与已发行过的资产重复。", + "rgb++": "此 Tag 标记的资产是 RGB++ 协议兼容资产，可以在 BTC 和 CKB 之间相互转移。", + "layer-1-asset": "此 Tag 标记的资产是发行在 Layer1 上的资产。", + "layer-2-asset": "此 Tag 标记的资产是发行在 Layer2 上的资产。", + "verified-on": "此 Tag 标记的资产是经过 Cell Studio 校验的资产。", + "supply-limited": "此Tag标记的资产是有限供应的资产，有最大资产数量限制。", + "supply-unlimited": "此Tag标记的资产是无限供应的资产，无最大资产数量限制。", + "view_more": "查看更多", + "unnamed": "此Tag标记的资产名称字段为空。" + }, "category": "类别" }, "nft": { diff --git a/src/pages/Xudt/UDTComp.tsx b/src/pages/Xudt/UDTComp.tsx index 714d3e4ef..6218dbf1c 100644 --- a/src/pages/Xudt/UDTComp.tsx +++ b/src/pages/Xudt/UDTComp.tsx @@ -201,7 +201,7 @@ export const UDTOverviewCard = ({
{tags.map(tag => ( - + ))} {xudtCodeUrl ? (