Merge branch 'develop' of https://github.com/magickbase/ckb-explorer-…

…frontend into develop

src/components/Search/HighlightText.tsx

@@ -23,8 +23,6 @@ export const HighlightText: FC<HighlightTextProps> = ({ 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

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 (
+      <Popover
+        overlayClassName={styles.tagPopover}
+        content={
+          <>
+            <div>{t(`xudt.tags_description.${tag}`)}</div>
+            <a href={`/${i18n.language}${to}?tags=${tag}`}>{t('xudt.tags_description.view_more')}</a>
+          </>
+        }
+      >
+        <button type="button" className={classNames(styles.container, styles.normal)} data-type={tagName}>
+          {content}
+        </button>
+      </Popover>
+    )
   }
 
   return (

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

src/hooks/useCKBNode.tsx

@@ -57,12 +57,6 @@ export const CKBNodeProvider = ({ children, defaultEndpoint }: PropsWithChildren
   const [nodes, setNodes] = useState<Map<string, string>>(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)

src/locales/en.json

@@ -813,6 +813,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": {

src/locales/zh.json

@@ -814,6 +814,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": {

src/pages/Xudt/UDTComp.tsx

@@ -201,7 +201,7 @@ export const UDTOverviewCard = ({
 
         <div className={styles.tags}>
           {tags.map(tag => (
-            <XUDTTag tagName={tag} />
+            <XUDTTag tagName={tag} to="/xudts" tooltip />
           ))}
           {xudtCodeUrl ? (
             <Link className={styles.openSource} to={xudtCodeUrl}>