feat(xudt-tag): add xudt tag column in xudt page

src/components/MultiFilterButton/index.tsx

@@ -0,0 +1,92 @@
+import { Link, useLocation } from 'react-router-dom'
+import { Popover } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { ReactComponent as FilterIcon } from '../../assets/filter_icon.svg'
+import { ReactComponent as SelectedIcon } from '../../assets/selected-icon.svg'
+import { ReactComponent as NotSelectedIcon } from '../../assets/not-selected-icon.svg'
+import { ReactComponent as PartialSelectedIcon } from '../../assets/partial-selected-icon.svg'
+import { useSearchParams } from '../../hooks'
+import styles from './styles.module.scss'
+
+export function MultiFilterButton({
+  filterList,
+  isMobile,
+  filterName,
+}: {
+  filterName: string
+  filterList: { key: string; value: string; to: string; title: string | JSX.Element }[]
+  isMobile?: boolean
+}) {
+  const { t } = useTranslation()
+  const params = useSearchParams(filterName)
+  const filter = params[filterName]
+  let types = filterList.map(f => f.value)
+  if (filter !== undefined) {
+    types = filter.split(',').filter(t => !!t)
+  }
+
+  const isAllSelected = types.length === filterList.length
+  const isNoneSelected = types.length === 0
+  const search = new URLSearchParams(useLocation().search)
+  search.delete(filterName)
+  search.delete('page')
+
+  return (
+    <Popover
+      className={styles.container}
+      placement="bottomRight"
+      trigger={isMobile ? 'click' : 'hover'}
+      overlayClassName={styles.antPopover}
+      content={
+        <div className={styles.filterItems}>
+          <div className={styles.selectTitle}>
+            <h2>{t('components.multi_filter_button.select')}</h2>
+            <Link
+              key="all"
+              to={() => {
+                const newSearch = new URLSearchParams(search)
+                if (!isNoneSelected && isAllSelected) {
+                  newSearch.append(filterName, '')
+                }
+                return `${filterList[0].to}?${newSearch.toString()}`
+              }}
+            >
+              {types.length > 0 ? (
+                <>{isAllSelected ? <SelectedIcon /> : <PartialSelectedIcon />}</>
+              ) : (
+                <NotSelectedIcon />
+              )}
+            </Link>
+          </div>
+          {filterList.map(f => (
+            <Link
+              key={f.key}
+              to={() => {
+                const subTypes = new Set(types)
+                if (subTypes.has(f.value)) {
+                  subTypes.delete(f.value)
+                } else {
+                  subTypes.add(f.value)
+                }
+
+                const newSearch = new URLSearchParams(search)
+                newSearch.append(filterName, Array.from(subTypes).join(','))
+                return `${f.to}?${newSearch.toString()}`
+              }}
+              data-is-active={types.includes(f.value)}
+            >
+              {f.title}
+              {types.includes(f.value) ? <SelectedIcon /> : <NotSelectedIcon />}
+            </Link>
+          ))}
+        </div>
+      }
+    >
+      <FilterIcon className={styles.filter} />
+    </Popover>
+  )
+}
+
+MultiFilterButton.displayName = 'MultiFilterButton'
+
+export default MultiFilterButton

src/components/MultiFilterButton/styles.module.scss

@@ -0,0 +1,75 @@
+.container {
+  appearance: none;
+  border: none;
+  outline: none;
+  background: none;
+  display: inline-flex;
+  vertical-align: text-top;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.antPopover {
+  :global {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-popover-inner {
+      border-radius: 8px;
+      box-shadow: 0 2px 10px 0 #eee;
+    }
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-popover-inner-content {
+      padding: 14px 24px 14px 16px;
+    }
+  }
+}
+
+.filter {
+  margin-left: 8px;
+  color: #999;
+}
+
+.filterItems {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+
+  .selectTitle {
+    color: var(--primary-color);
+
+    h2 {
+      color: #333;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    border-radius: 8px;
+
+    a {
+      padding: 0;
+    }
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    border-radius: 8px;
+
+    svg {
+      color: var(--primary-color);
+    }
+
+    &:hover {
+      background: var(--primary-hover-bg-color);
+      cursor: pointer;
+    }
+  }
+}

src/components/XUDTTag/index.tsx

@@ -8,7 +8,7 @@ const XUDTTag = ({ tagName }: { tagName: string }) => {
   const { push } = useHistory()
 
   let tag = tagName
-  let content = t(`xudt.${tag}`)
+  let content = t(`xudt.tags.${tag}`)
   if (tag.startsWith('verified-on-')) {
     // FIXME: should be i18n
     content = content.replace('Platform', tag.replace('verified-on-', ''))

src/components/XUDTTag/styles.module.scss

@@ -15,37 +15,25 @@
   &[data-type='supply-limited'] {
     border-color: #fcdeb0;
     background: #fdf5d7;
-
-    span {
-      color: #caac0f;
-    }
+    color: #caac0f;
   }
 
   &[data-type='out-of-length-range'] {
     border-color: #b0cbfc;
     background: #d7e5fd;
-
-    span {
-      color: #346dff;
-    }
+    color: #346dff;
   }
 
   &[data-type='invalid'] {
     border-color: #ccc;
     background: #f0f0f0;
-
-    span {
-      color: #666;
-    }
+    color: #666;
   }
 
   &[data-type='duplicate'] {
     border-color: #ffdba6;
     background: #fffcf2;
-
-    span {
-      color: #ffa800;
-    }
+    color: #ffa800;
   }
 
   &[data-type='layer-1-asset'] {
@@ -63,37 +51,31 @@
   &[data-type='verified-on-platform'] {
     border-color: #99e6ca;
     background: #d7fdf2;
+    color: #00bb8e;
+  }
 
-    span {
-      color: #00bb8e;
-    }
+  &[data-type='unnamed'] {
+    border: 1px solid #e5e5e5;
+    background: #fafafa;
+    color: #999;
   }
 
   &[data-type='supply-unlimited'] {
     border-color: #b0e1fc;
     background: #d2f7ff;
-
-    span {
-      color: #00a7cc;
-    }
+    color: #00a7cc;
   }
 
   &[data-type='rgbpp-compatible'] {
     border: none;
     background: linear-gradient(90deg, #ffd176 0.23%, #ffdb81 6.7%, #84ffcb 99.82%);
-
-    span {
-      color: #333;
-    }
+    color: #333;
   }
 
   &[data-type='suspicious'] {
     background: #ffe8e8;
     border-color: #ff9c9c;
-
-    span {
-      color: #fa504f;
-    }
+    color: #fa504f;
   }
 
   span {

src/locales/en.json

@@ -159,6 +159,11 @@
       "handling-reorg": "Reorg detected at {{time}} so CKB Explorer is checking data thoroughly. It may take half an hour, please visit later",
       "migration-notice": "Service of CKB explorer will have a migration on {{time}}, and the server might be unavailable temporarily"
     },
+    "components": {
+      "multi_filter_button": {
+        "select": "Select"
+      }
+    },
     "navbar": {
       "wallet": "Wallet",
       "charts": "Charts",
@@ -208,6 +213,7 @@
       "estimated_epoch_time": "Estimated Epoch Time",
       "transactions_per_minute": "Transactions per Minute",
       "transactions_last_24hrs": "Transactions in Last 24hrs",
+      "tags": "Tags",
       "nervos_dao": "Nervos DAO",
       "mainnet": "Lina Mainnet",
       "testnet": "Testnet"
@@ -757,6 +763,9 @@
       "repeat_inscription_symbol": "This inscription is a duplicate with an earlier release of the same symbol."
     },
     "xudt": {
+      "title": {
+        "tags": "Tags"
+      },
       "holder_allocation": "Holder Allocation",
       "holder_allocation_description": "There are {{ckb}} CKB Holder and {{btc}} BTC holder of the current asset.",
       "lock_hash": "Lock Hash",
@@ -777,16 +786,19 @@
       "address_count": "Address Count",
       "created_time": "Created Time",
       "tokens_empty": "There are no xUDTs at this time.",
-      "invalid": "Invalid",
-      "suspicious": "Suspicious",
-      "out-of-length-range": "Out Of Length Range",
-      "duplicate": "Duplicate",
-      "layer-1-asset": "Layer 1 Asset",
-      "layer-2-asset": "Layer 2 Asset",
-      "verified-on": "Verified On Platform",
-      "supply-limited": "Supply Limited",
-      "supply-unlimited": "Supply Unlimited",
-      "rgbpp-compatible": "RGB++ Compatible",
+      "tags": {
+        "invalid": "Invalid",
+        "suspicious": "Suspicious",
+        "out-of-length-range": "Out Of Length Range",
+        "duplicate": "Duplicate",
+        "layer-1-asset": "Layer 1 Asset",
+        "layer-2-asset": "Layer 2 Asset",
+        "verified-on": "Verified On Platform",
+        "supply-limited": "Supply Limited",
+        "supply-unlimited": "Supply Unlimited",
+        "rgbpp-compatible": "RGB++ Compatible",
+        "unnamed": "Unnamed"
+      },
       "category": "Category"
     },
     "nft": {