Merge pull request #1758 from nervosnetwork/testnet

src/components/AwesomeLoadings/SmallSpinner/index.tsx

@@ -0,0 +1,7 @@
+import styles from './styles.module.scss'
+import { ReactComponent as SmallSpinner } from '../../../assets/small-spinner.svg'
+
+const Loading = () => {
+  return <SmallSpinner className={styles.container} />
+}
+export default Loading

src/components/AwesomeLoadings/SmallSpinner/styles.module.scss

@@ -0,0 +1,6 @@
+@import '../../../styles/variables.module';
+
+.container {
+  margin: 40px auto;
+  color: var(--primary-color);
+}

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/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss

@@ -8,6 +8,14 @@
   }
 }
 
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex: 1;
+}
+
 .noRecords {
   display: flex;
   background: #fff;
@@ -25,7 +33,6 @@
   gap: 16px;
   font-size: 16px;
   white-space: nowrap;
-  overflow: hidden;
   margin-bottom: 1rem;
 
   @media screen and (max-width: $mobileBreakPoint) {
@@ -144,11 +151,9 @@
 }
 
 .list {
-  max-height: 540px;
+  height: 100%;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
-
-  & > div {
-    scroll-snap-align: center;
-  }
+  display: flex;
+  flex-direction: column;
 }

src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx

@@ -6,11 +6,12 @@ import CloseIcon from '../../../assets/modal_close.png'
 import { TransactionRGBPPDigestContent } from './TransactionRGBPPDigestContent'
 import { explorerService } from '../../../services/ExplorerService'
 import { TransactionLeapDirection } from '../../RGBPP/types'
+import SmallSpinner from '../../AwesomeLoadings/SmallSpinner'
 
 const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Function; hash: string }) => {
   const { t } = useTranslation()
 
-  const { data, isFetched } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
+  const { data, isFetched, isLoading } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
 
   const direction = useMemo(() => {
     switch (data?.data.leapDirection) {
@@ -25,25 +26,30 @@ const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Fun
     }
   }, [data])
 
-  if (isFetched && data?.data) {
-    return (
-      <div className={styles.container}>
-        <div className={styles.header}>
-          <div className={styles.left}>
-            <span>{t('address.transaction_rgbpp_digest')}</span>
-            {direction !== TransactionLeapDirection.NONE && (
-              <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
-            )}
-          </div>
-          <button onClick={() => onClickClose()} type="button" className={styles.buttonClose}>
-            <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
-          </button>
+  return (
+    <div className={styles.container}>
+      {isLoading ? (
+        <div style={{ margin: 'auto', width: '100%', display: 'flex' }}>
+          <SmallSpinner />
         </div>
-        <TransactionRGBPPDigestContent hash={hash} digest={data?.data} isFetched={isFetched} />
-      </div>
-    )
-  }
-  return null
+      ) : (
+        <>
+          <div className={styles.header}>
+            <div className={styles.left}>
+              <span>{t('address.transaction_rgbpp_digest')}</span>
+              {direction !== TransactionLeapDirection.NONE && (
+                <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
+              )}
+            </div>
+            <button onClick={() => onClickClose()} type="button" className={styles.buttonClose}>
+              <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
+            </button>
+          </div>
+          <TransactionRGBPPDigestContent hash={hash} digest={data?.data} isFetched={isFetched} />
+        </>
+      )}
+    </div>
+  )
 }
 
 export default TransactionRGBPPDigestModal

src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss

@@ -4,20 +4,25 @@
   background-color: #fff;
   padding: 20px 40px;
   width: 75%;
-  margin: 15% auto;
+  max-height: 80%;
+  top: 50%;
+  left: 50%;
+  gap: 10px;
+  transform: translate(-50%, -50%);
   border-radius: 4px;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
 
   @media screen and (max-width: $mobileBreakPoint) {
     width: 90%;
     padding: 16px;
-    margin: 178px auto;
   }
 }
 
 .header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
 
   .left {
     display: flex;

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/UDT/UDTComp.tsx

@@ -262,6 +262,15 @@ export const UDTComp = ({
       </UDTNoResultPanel>
     )
   }
+
+  if (transactions.length === 0) {
+    return (
+      <UDTNoResultPanel>
+        <span>{t('transaction.no_records')}</span>
+      </UDTNoResultPanel>
+    )
+  }
+
   return (
     <>
       <UDTTransactionsPanel>

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