feat(nft-tags): add nft-tags (#394)

src/components/FilterSortContainer/index.module.scss

@@ -3,4 +3,23 @@
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 20px;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+
+    li {
+      width: 50%;
+      list-style-type: none;
+
+      &:nth-child(odd) {
+        text-align: left;
+      }
+
+      &:nth-child(even) {
+        text-align: right;
+      }
+    }
+  }
 }

src/components/FilterSortContainer/index.tsx

@@ -1,11 +1,19 @@
 import classNames from 'classnames'
-import { ComponentProps, FC } from 'react'
+import { ComponentProps, FC, ReactNode } from 'react'
 import styles from './index.module.scss'
 
 export const FilterSortContainerOnMobile: FC<ComponentProps<'div'>> = ({ children, ...elProps }) => {
+  const items = Array.from(children as Iterable<ReactNode>).map((child, index) => ({
+    child,
+    key: `${elProps.key}${index}`,
+  }))
   return (
     <div {...elProps} className={classNames(styles.filterSortContainerOnMobile, elProps.className)}>
-      {children}
+      <ul>
+        {items.map(({ child, key }) => (
+          <li key={key}>{child}</li>
+        ))}
+      </ul>
     </div>
   )
 }

src/components/MultiFilterButton/styles.module.scss

@@ -5,7 +5,6 @@
   background: none;
   display: inline-flex;
   vertical-align: text-top;
-  margin-left: 8px;
   cursor: pointer;
 }
 
@@ -25,7 +24,6 @@
 }
 
 .filter {
-  margin-left: 8px;
   color: #999;
 
   &[data-changed='true'] {

src/components/NFTTag/index.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { useHistory } from 'react-router-dom'
+import styles from './styles.module.scss'
+
+export const whiteList = ['invalid', 'suspicious', 'out-of-length-range', 'rgb++', 'layer-1-asset', 'layer-2-asset']
+
+const NFTTag = ({ tagName, to }: { tagName: string; to?: string }) => {
+  const { t } = useTranslation()
+  const { push } = useHistory()
+
+  let tag = tagName
+  let content = t(`xudt.tags.${tag}`)
+  if (tag.startsWith('verified-on-')) {
+    // FIXME: should be i18n
+    content = content.replace('Platform', tag.replace('verified-on-', ''))
+    tag = 'verified-on'
+  }
+  const handleClick = () => {
+    const search = new URLSearchParams(window.location.search)
+    const tags = search.get('tags')?.split(',') ?? []
+    if (tags.includes(tag)) {
+      const newTags = tags.filter(t => t !== tag)
+      if (newTags.length) {
+        search.set('tags', newTags.join(','))
+      } else {
+        search.delete('tags')
+      }
+    } else {
+      search.set('tags', [...tags, tag].join(','))
+    }
+    push(`${to ?? window.location.pathname}?${search}`)
+  }
+
+  return whiteList.includes(tagName) ? (
+    <button
+      type="button"
+      className={classNames(styles.container, styles.normal)}
+      data-type={tagName}
+      onClick={handleClick}
+    >
+      {content}
+    </button>
+  ) : null
+}
+
+export default NFTTag

src/components/NFTTag/styles.module.scss

@@ -0,0 +1,88 @@
+.container {
+  appearance: none;
+  font-size: 0.75rem;
+  line-height: 1;
+  border-radius: 4px;
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  outline: none;
+  cursor: pointer;
+
+  &[data-type='supply-limited'] {
+    border-color: #fcdeb0;
+    background: #fdf5d7;
+
+    span {
+      color: #caac0f;
+    }
+  }
+
+  &[data-type='out-of-length-range'] {
+    border-color: #b0cbfc;
+    background: #d7e5fd;
+    color: #346dff;
+  }
+
+  &[data-type='invalid'] {
+    border-color: #ccc;
+    background: #f0f0f0;
+    color: #666;
+  }
+
+  &[data-type='duplicate'] {
+    border-color: #ffdba6;
+    background: #fffcf2;
+    color: #ffa800;
+  }
+
+  &[data-type='layer-1-asset'] {
+    border-color: var(--btc-primary-dimmed-color);
+    background: var(--btc-secondary-color);
+    color: var(--btc-primary-color);
+  }
+
+  &[data-type='layer-2-asset'] {
+    border-color: var(--primary-dimmed-color);
+    background: var(--secondary-color);
+    color: var(--primary-color);
+  }
+
+  &[data-type='verified-on-platform'] {
+    border-color: #99e6ca;
+    background: #d7fdf2;
+    color: #00bb8e;
+  }
+
+  &[data-type='supply-unlimited'] {
+    border-color: #b0e1fc;
+    background: #d2f7ff;
+    color: #00a7cc;
+  }
+
+  &[data-type='rgb++'] {
+    border: none;
+    background: linear-gradient(90deg, #ffd176 0.23%, #ffdb81 6.7%, #84ffcb 99.82%);
+    color: #333;
+  }
+
+  &[data-type='suspicious'] {
+    background: #ffe8e8;
+    border-color: #ff9c9c;
+    color: #fa504f;
+  }
+
+  span {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+}
+
+.normal {
+  border: 1px solid;
+}

src/components/XUDTTag/index.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss'
 
 const HIDDEN_TAGS = ['duplicate', 'suspicious', 'utility', 'supply-unlimited', 'out-of-length-range']
 
-const XUDTTag = ({ tagName }: { tagName: string }) => {
+const XUDTTag = ({ tagName, to }: { tagName: string; to?: string }) => {
   const { t } = useTranslation()
   const { push } = useHistory()
 
@@ -22,7 +22,7 @@ const XUDTTag = ({ tagName }: { tagName: string }) => {
 
   // FIXME: data should be updated in the backend
   // issue: https://github.com/Magickbase/ckb-explorer-public-issues/issues/754
-  if (tag === 'rgbpp-compatible') {
+  if (tag === 'rgb++') {
     content = 'RGB++'
   }
 
@@ -39,7 +39,7 @@ const XUDTTag = ({ tagName }: { tagName: string }) => {
     } else {
       search.set('tags', [...tags, tag].join(','))
     }
-    push(`${window.location.pathname}?${search}`)
+    push(`${to ?? window.location.pathname}?${search}`)
   }
 
   return (

src/components/XUDTTag/styles.module.scss

@@ -66,7 +66,7 @@
     color: #00a7cc;
   }
 
-  &[data-type='rgbpp-compatible'] {
+  &[data-type='rgb++'] {
     border: none;
     background: linear-gradient(90deg, #ffd176 0.23%, #ffdb81 6.7%, #84ffcb 99.82%);
     color: #333;

src/locales/en.json

@@ -592,7 +592,7 @@
       "transaction_details": "Transaction Details",
       "unknown_assets": "Unknown Assets",
       "mint": "Mint",
-      "no_records": "No records",
+      "no_records": "No record",
       "data-being-processed": "Data is being processed, please wait...",
       "view-btc-utxos": "BTC UTXOs",
       "view-btc-tx": "View BTC Tx",
@@ -808,7 +808,7 @@
         "verified-on": "Verified On Platform",
         "supply-limited": "Supply Limited",
         "supply-unlimited": "Supply Unlimited",
-        "rgbpp-compatible": "RGB++ Compatible",
+        "rgb++": "RGB++",
         "unnamed": "Unnamed"
       },
       "category": "Category"
@@ -818,7 +818,7 @@
       "collection_name": "Collection Name",
       "standard": "Type",
       "minter_address": "Creator",
-      "no_record": "No records",
+      "no_record": "No record",
       "mnft": "M-NFT",
       "m_nft": "m-NFT",
       "nrc721": "NRC 721",

src/locales/zh.json

@@ -809,7 +809,7 @@
         "verified-on": "Platform 平台认证",
         "supply-limited": "有限供应资产",
         "supply-unlimited": "无限供应资产",
-        "rgbpp-compatible": "RGB++兼容",
+        "rgb++": "RGB++",
         "unnamed": "未命名"
       },
       "category": "类别"

src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx

@@ -7,6 +7,7 @@ import { explorerService } from '../../../services/ExplorerService'
 import styles from './styles.module.scss'
 import { handleNftImgError, patchMibaoImg } from '../../../utils/util'
 import { getPrimaryColor } from '../../../constants/common'
+import NFTTag from '../../../components/NFTTag'
 
 const primaryColor = getPrimaryColor()
 
@@ -50,6 +51,9 @@ const NftCollectionOverview = ({ id }: { id: string }) => {
         )}
         <span>{isLoading ? t(`nft.loading`) : info?.name}</span>
       </div>
+      <div className={styles.tags}>
+        {isLoading ? t('nft.loading') : info?.tags.map(tag => <NFTTag key={tag} tagName={tag} to="/nft-collections" />)}
+      </div>
       <div className={styles.desc}>{desc}</div>
       <dl>
         <dt>{t(`nft.standard`)}</dt>

src/pages/NftCollectionInfo/NftCollectionOverview/styles.module.scss

@@ -54,3 +54,16 @@
     margin: 40px 8px 24px;
   }
 }
+
+.tags {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+  width: 100%;
+  display: flex;
+  gap: 8px;
+
+  @media (width <= $mobileBreakPoint) {
+    margin-bottom: 16px;
+  }
+}