From aaa7d66a7773d797b295c524e65b62b55b0d71fb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 2 Apr 2024 02:44:41 +0900
Subject: [PATCH] Merge testnet into mainnet (#1531)

Co-authored-by: Chen Yu <keithwhisper@gmail.com>
---
 src/components/Header/MenusComp/index.tsx |   6 +
 src/locales/en.json                       |  15 ++
 src/locales/zh.json                       |  15 ++
 src/models/Xudt/index.ts                  |  16 ++
 src/pages/Xudt/UDTComp.tsx                | 165 ++++++++++++++
 src/pages/Xudt/index.tsx                  | 107 +++++++++
 src/pages/Xudt/styled.tsx                 | 104 +++++++++
 src/pages/Xudt/styles.module.scss         | 140 ++++++++++++
 src/pages/Xudts/index.tsx                 | 259 ++++++++++++++++++++++
 src/pages/Xudts/styled.tsx                |  70 ++++++
 src/pages/Xudts/styles.module.scss        | 252 +++++++++++++++++++++
 src/routes/index.tsx                      |  10 +
 src/services/ExplorerService/fetcher.ts   |  42 ++++
 13 files changed, 1201 insertions(+)
 create mode 100644 src/models/Xudt/index.ts
 create mode 100644 src/pages/Xudt/UDTComp.tsx
 create mode 100644 src/pages/Xudt/index.tsx
 create mode 100644 src/pages/Xudt/styled.tsx
 create mode 100644 src/pages/Xudt/styles.module.scss
 create mode 100644 src/pages/Xudts/index.tsx
 create mode 100644 src/pages/Xudts/styled.tsx
 create mode 100644 src/pages/Xudts/styles.module.scss

diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
index a5391a245..70afba563 100644
--- a/src/components/Header/MenusComp/index.tsx
+++ b/src/components/Header/MenusComp/index.tsx
@@ -37,6 +37,12 @@ const useMenuDataList = () => {
       type: LinkType.Inner,
       name: t('navbar.tokens'),
       children: [
+        // TODO: wait for API
+        // {
+        //   type: LinkType.Inner,
+        //   name: t('navbar.xUDT'),
+        //   url: '/xudts',
+        // },
         {
           type: LinkType.Inner,
           name: t('navbar.sUDT'),
diff --git a/src/locales/en.json b/src/locales/en.json
index c3b11fe1a..2b2e65222 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -647,6 +647,21 @@
       "view_original": "View Original",
       "repeat_inscription_symbol": "This inscription is a duplicate with an earlier release of the same symbol."
     },
+    "xudt": {
+      "xudt": "xUDT",
+      "xudts": "xUDTs",
+      "name": "Name",
+      "symbol": "Symbol",
+      "total_amount": "Total Amount",
+      "issuer": "Issuer",
+      "type_script": "Type Script",
+      "holder_addresses": "Holder Addresses",
+      "decimal": "Decimal",
+      "transactions": "24hr Transactions",
+      "address_count": "Address Count",
+      "created_time": "Created Time",
+      "tokens_empty": "There are no xUDTs at this time."
+    },
     "nft": {
       "nft_collection": "NFT Collection",
       "collection_name": "Collection Name",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 74addd64d..4d18dd265 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -648,6 +648,21 @@
       "view_original": "查看原铭文",
       "repeat_inscription_symbol": "此铭文与早期发布的铭文同名"
     },
+    "xudt": {
+      "xudt": "xUDT",
+      "xudts": "xUDTs",
+      "name": "名称",
+      "symbol": "符号",
+      "total_amount": "总量",
+      "issuer": "发行人",
+      "type_script": "Type Script",
+      "holder_addresses": "用户数",
+      "decimal": "小数位",
+      "transactions": "24小时交易数",
+      "address_count": "用户数",
+      "created_time": "创建时间",
+      "tokens_empty": "目前没有 xUDT。"
+    },
     "nft": {
       "nft_collection": "NFT 藏品",
       "collection_name": "藏品名称",
diff --git a/src/models/Xudt/index.ts b/src/models/Xudt/index.ts
new file mode 100644
index 000000000..9d5adb810
--- /dev/null
+++ b/src/models/Xudt/index.ts
@@ -0,0 +1,16 @@
+import { Script } from '../Script'
+
+export interface XUDT {
+  addressesCount: string
+  createdAt: string
+  h24CkbTransactionsCount: string
+  issuerAddress: string
+  published: boolean
+  decimal: string | null
+  fullName: string | null
+  symbol: string | null
+  totalAmount: string
+  typeHash: string
+  typeScript: Script
+  udtType: 'xudt'
+}
diff --git a/src/pages/Xudt/UDTComp.tsx b/src/pages/Xudt/UDTComp.tsx
new file mode 100644
index 000000000..60938543d
--- /dev/null
+++ b/src/pages/Xudt/UDTComp.tsx
@@ -0,0 +1,165 @@
+import { Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { FC, useState } from 'react'
+import { Link } from '../../components/Link'
+import TransactionItem from '../../components/TransactionItem/index'
+import { UDTTransactionsPagination, UDTTransactionsPanel, TypeScriptController, UDTNoResultPanel } from './styled'
+import { parseUDTAmount } from '../../utils/number'
+import { ReactComponent as OpenInNew } from '../../assets/open_in_new.svg'
+import { deprecatedAddrToNewAddr } from '../../utils/util'
+import styles from './styles.module.scss'
+import AddressText from '../../components/AddressText'
+import PaginationWithRear from '../../components/PaginationWithRear'
+import { Transaction } from '../../models/Transaction'
+import { Card, CardCellInfo, CardCellsLayout, HashCardHeader } from '../../components/Card'
+import { useIsMobile } from '../../hooks'
+import { isMainnet } from '../../utils/chain'
+// TODO: replaced to svg format
+import ArrowUpIcon from '../../assets/arrow_up.png'
+import ArrowDownIcon from '../../assets/arrow_down.png'
+import ArrowUpBlueIcon from '../../assets/arrow_up_blue.png'
+import ArrowDownBlueIcon from '../../assets/arrow_down_blue.png'
+import Script from '../../components/Script'
+import { RawBtcRPC } from '../../services/ExplorerService'
+import { XUDT } from '../../models/Xudt'
+
+const typeScriptIcon = (show: boolean) => {
+  if (show) {
+    return isMainnet() ? ArrowUpIcon : ArrowUpBlueIcon
+  }
+  return isMainnet() ? ArrowDownIcon : ArrowDownBlueIcon
+}
+
+const IssuerContent: FC<{ address: string }> = ({ address }) => {
+  const { t } = useTranslation()
+  if (!address) {
+    return t('address.unable_decode_address')
+  }
+  const newAddress = deprecatedAddrToNewAddr(address)
+
+  return (
+    <>
+      <AddressText
+        linkProps={{
+          to: `/address/${newAddress}`,
+        }}
+      >
+        {newAddress}
+      </AddressText>
+
+      {newAddress !== address && (
+        <Tooltip placement="top" title={t(`udt.view-deprecated-address`)}>
+          <Link to={`/address/${address}`} className={styles.openInNew} target="_blank">
+            <OpenInNew />
+          </Link>
+        </Tooltip>
+      )}
+    </>
+  )
+}
+
+export const UDTOverviewCard = ({ typeHash, xudt }: { typeHash: string; xudt: XUDT | undefined }) => {
+  const { t } = useTranslation()
+  const isMobile = useIsMobile()
+  // const { fullName, issuerAddress, symbol, addressesCount, decimal, totalAmount, typeScript } = xudt
+  const [showType, setShowType] = useState(false)
+
+  const items: CardCellInfo<'left' | 'right'>[] = [
+    {
+      title: t('xudt.name'),
+      content: xudt?.fullName ?? '-',
+    },
+    {
+      title: t('xudt.issuer'),
+      contentWrapperClass: styles.addressWidthModify,
+      content: xudt ? <IssuerContent address={xudt.issuerAddress} /> : '-',
+    },
+    {
+      title: t('xudt.holder_addresses'),
+      content: xudt?.addressesCount ?? '-',
+    },
+    {
+      title: t('xudt.symbol'),
+      content: xudt?.symbol ?? '-',
+    },
+    {
+      title: t('xudt.decimal'),
+      content: xudt?.decimal ?? '-',
+    },
+    {
+      title: t('xudt.total_amount'),
+      content: xudt?.totalAmount && xudt?.decimal ? parseUDTAmount(xudt.totalAmount, xudt.decimal) : '-',
+    },
+  ]
+
+  const cardTitle = <div className={styles.cardTitle}>{xudt?.symbol ?? t('xudt.xudt')}</div>
+
+  return (
+    <>
+      <Card className={styles.udtOverviewCard} style={{ marginBottom: 16 }}>
+        {/* When encountering more complex requirements, consider extracting the components within HashCardHeader
+      into smaller components. Then, implement a completely new variant or freely assemble them externally. */}
+        {isMobile && cardTitle}
+        <HashCardHeader className={styles.cardHeader} title={!isMobile && cardTitle} hash={typeHash} />
+
+        <CardCellsLayout type="left-right" cells={items} borderTop />
+
+        <TypeScriptController onClick={() => setShowType(!showType)}>
+          <div>{t('xudt.type_script')}</div>
+          <img alt="type script" src={typeScriptIcon(showType)} />
+        </TypeScriptController>
+        {showType && xudt?.typeScript && <Script script={xudt.typeScript} />}
+      </Card>
+    </>
+  )
+}
+
+export const UDTComp = ({
+  currentPage,
+  pageSize,
+  transactions,
+  total,
+  onPageChange,
+  filterNoResult,
+}: {
+  currentPage: number
+  pageSize: number
+  transactions: (Transaction & { btcTx: RawBtcRPC.BtcTx | null })[]
+  total: number
+  onPageChange: (page: number) => void
+  filterNoResult?: boolean
+}) => {
+  const { t } = useTranslation()
+  const totalPages = Math.ceil(total / pageSize)
+
+  if (filterNoResult) {
+    return (
+      <UDTNoResultPanel>
+        <span>{t('search.udt_filter_no_result')}</span>
+      </UDTNoResultPanel>
+    )
+  }
+  return (
+    <>
+      <UDTTransactionsPanel>
+        {transactions.map(
+          (transaction, index) =>
+            transaction && (
+              <TransactionItem
+                transaction={transaction}
+                key={transaction.transactionHash}
+                circleCorner={{
+                  bottom: index === transactions.length - 1 && totalPages === 1,
+                }}
+              />
+            ),
+        )}
+      </UDTTransactionsPanel>
+      <UDTTransactionsPagination>
+        <PaginationWithRear currentPage={currentPage} totalPages={totalPages} onChange={onPageChange} rear={null} />
+      </UDTTransactionsPagination>
+    </>
+  )
+}
+
+export default UDTComp
diff --git a/src/pages/Xudt/index.tsx b/src/pages/Xudt/index.tsx
new file mode 100644
index 000000000..d4908e94a
--- /dev/null
+++ b/src/pages/Xudt/index.tsx
@@ -0,0 +1,107 @@
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
+import Content from '../../components/Content'
+import { UDTContentPanel, UDTTransactionTitlePanel } from './styled'
+import UDTComp, { UDTOverviewCard } from './UDTComp'
+import { usePaginationParamsInPage, useSearchParams, useUpdateSearchParams } from '../../hooks'
+import Filter from '../../components/Filter'
+import { localeNumberString } from '../../utils/number'
+import { explorerService } from '../../services/ExplorerService'
+import { deprecatedAddrToNewAddr } from '../../utils/util'
+import { QueryResult } from '../../components/QueryResult'
+import styles from './styles.module.scss'
+import { Cell } from '../../models/Cell'
+import { assert } from '../../utils/error'
+
+export const Xudt = () => {
+  const { t } = useTranslation()
+  // The typeHash here could be either udtTypeHash or omigaInscriptionInfoTypeHash.
+  const { hash: typeHash } = useParams<{ hash: string }>()
+  const { currentPage, pageSize: _pageSize, setPage } = usePaginationParamsInPage()
+
+  const { filter } = useSearchParams('filter')
+
+  const updateSearchParams = useUpdateSearchParams<'filter' | 'page'>()
+
+  const queryXudt = useQuery(['xudt', typeHash], () => explorerService.api.fetchXudt(typeHash))
+  const xudt = queryXudt.data
+
+  const querySimpleUDTTransactions = useQuery(
+    ['xudt-transactions', typeHash, currentPage, _pageSize, filter],
+    async () => {
+      assert(typeHash)
+      const {
+        transactions,
+        total,
+        pageSize: resPageSize,
+      } = await explorerService.api.fetchUDTTransactions({
+        typeHash,
+        page: currentPage,
+        size: pageSize,
+        filter,
+      })
+
+      const ensureCellAddrIsNewFormat = (cell: Cell) => ({
+        ...cell,
+        addressHash: deprecatedAddrToNewAddr(cell.addressHash),
+      })
+
+      return {
+        transactions: transactions.map(tx => ({
+          ...tx,
+          displayInputs: tx.displayInputs.map(ensureCellAddrIsNewFormat),
+          displayOutputs: tx.displayOutputs.map(ensureCellAddrIsNewFormat),
+        })),
+        total,
+        pageSize: resPageSize,
+      }
+    },
+    {
+      enabled: typeHash != null,
+    },
+  )
+  const total = querySimpleUDTTransactions.data?.total ?? 0
+  const filterNoResult = !!filter && querySimpleUDTTransactions.isError
+  const pageSize: number = querySimpleUDTTransactions.data?.pageSize ?? _pageSize
+
+  return (
+    <Content>
+      <UDTContentPanel className="container">
+        <UDTOverviewCard typeHash={typeHash} xudt={xudt} />
+
+        <UDTTransactionTitlePanel>
+          <div className="udtTransactionContainer">
+            <div className="udtTransactionTitle">
+              {`${t('transaction.transactions')} (${localeNumberString(total)})`}
+            </div>
+            <div className={styles.searchAndfilter}>
+              <Filter
+                defaultValue={filter ?? ''}
+                showReset={!!filter}
+                placeholder={t('udt.search_placeholder')}
+                onFilter={filter => updateSearchParams(params => ({ ...params, filter }))}
+                onReset={() => updateSearchParams(params => ({ ...params, filter: null }))}
+              />
+            </div>
+          </div>
+        </UDTTransactionTitlePanel>
+
+        <QueryResult query={querySimpleUDTTransactions} delayLoading>
+          {data => (
+            <UDTComp
+              currentPage={currentPage}
+              pageSize={pageSize}
+              transactions={data?.transactions ?? []}
+              total={data?.total ?? 0}
+              onPageChange={setPage}
+              filterNoResult={filterNoResult}
+            />
+          )}
+        </QueryResult>
+      </UDTContentPanel>
+    </Content>
+  )
+}
+
+export default Xudt
diff --git a/src/pages/Xudt/styled.tsx b/src/pages/Xudt/styled.tsx
new file mode 100644
index 000000000..d8c28d3eb
--- /dev/null
+++ b/src/pages/Xudt/styled.tsx
@@ -0,0 +1,104 @@
+import styled from 'styled-components'
+import SimpleButton from '../../components/SimpleButton'
+import variables from '../../styles/variables.module.scss'
+
+export const UDTContentPanel = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 25px;
+  margin-bottom: 40px;
+
+  @media (max-width: ${variables.mobileBreakPoint}) {
+    margin: 0;
+    padding: 20px;
+  }
+`
+
+export const TypeScriptController = styled(SimpleButton)`
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  color: ${props => props.theme.primary};
+  display: flex;
+  align-items: center;
+
+  > img {
+    width: 12px;
+    height: 12px;
+    margin: 2px 0 0 5px;
+  }
+
+  @media (max-width: ${variables.mobileBreakPoint}) {
+    font-size: 14px;
+
+    > img {
+      margin: 0 0 0 5px;
+    }
+  }
+`
+
+export const UDTTransactionsPanel = styled.div`
+  width: 100%;
+`
+
+export const UDTTransactionsPagination = styled.div`
+  margin-top: 4px;
+  width: 100%;
+`
+
+export const UDTTransactionTitlePanel = styled.div`
+  width: 100%;
+  height: 58px;
+  padding: 0 40px;
+  background: white;
+  border-radius: 6px 6px 0 0;
+  box-shadow: 2px 2px 6px 0 #dfdfdf;
+
+  @media (max-width: ${variables.mobileBreakPoint}) {
+    height: 108px;
+    padding: 16px;
+  }
+
+  .udtTransactionContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+    margin-bottom: 5px;
+
+    @media (max-width: ${variables.mobileBreakPoint}) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .udtTransactionTitle {
+    font-size: 24px;
+    font-weight: 600;
+    font-style: normal;
+    line-height: 0.83;
+  }
+`
+
+export const UDTNoResultPanel = styled.div`
+  width: 100%;
+  height: 94px;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
+  background-color: #fff;
+  margin-top: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > span {
+    white-space: pre-wrap;
+    font-size: 14px;
+    letter-spacing: 0.2px;
+    color: #666;
+    text-align: center;
+  }
+`
diff --git a/src/pages/Xudt/styles.module.scss b/src/pages/Xudt/styles.module.scss
new file mode 100644
index 000000000..2912de523
--- /dev/null
+++ b/src/pages/Xudt/styles.module.scss
@@ -0,0 +1,140 @@
+@import '../../styles/variables.module';
+
+.udtOverviewCard:not(
+    [_='This `:not` selector is used to increase the specificity of the selector and serves no other purpose.']
+  ) {
+  padding-bottom: 20px;
+
+  @media (width <= $mobileBreakPoint) {
+    padding-bottom: 16px;
+  }
+}
+
+.cardTitle {
+  display: flex;
+  gap: 8px;
+
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  @media (width <= $mobileBreakPoint) {
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 16px;
+    color: #333;
+    font-size: 20px;
+    font-weight: 600;
+
+    .icon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+
+.cardHeader {
+  @media (width <= $mobileBreakPoint) {
+    height: min-content;
+    padding: 8px 0 12px;
+  }
+}
+
+.noneName {
+  color: #999;
+}
+
+.openInNew {
+  cursor: pointer;
+  margin-left: 4px;
+
+  svg {
+    pointer-events: none;
+
+    path {
+      fill: #999;
+    }
+  }
+
+  @media (width <= $mobileBreakPoint) {
+    margin-left: 2px;
+  }
+}
+
+.viewOriginal {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  &:hover {
+    color: var(--primary-color);
+  }
+}
+
+.addressWidthModify {
+  max-width: 80%;
+
+  @media (width <= $extraLargeBreakPoint) {
+    max-width: 40%;
+  }
+
+  @media (width <= $mobileBreakPoint) {
+    max-width: 100%;
+  }
+}
+
+.searchAndfilter {
+  display: flex;
+  align-items: center;
+
+  > div:last-child {
+    margin-left: 8px;
+  }
+
+  @media (width <= $mobileBreakPoint) {
+    width: 100%;
+  }
+}
+
+.modify {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  width: 10rem;
+  height: 2.5rem;
+  margin-left: 8px;
+  border-radius: 4px;
+  color: #333;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--primary-color);
+
+    path {
+      stroke: var(--primary-color);
+    }
+  }
+
+  @media (width <= $mobileBreakPoint) {
+    width: 9.5rem;
+    height: 2rem;
+    font-size: 0.875rem;
+  }
+}
+
+.loading {
+  background: #fff;
+  width: 100%;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
diff --git a/src/pages/Xudts/index.tsx b/src/pages/Xudts/index.tsx
new file mode 100644
index 000000000..3f0b29504
--- /dev/null
+++ b/src/pages/Xudts/index.tsx
@@ -0,0 +1,259 @@
+import { Table } from 'antd'
+import { useQuery, UseQueryResult } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { FC, ReactNode } from 'react'
+import { ColumnGroupType, ColumnType } from 'antd/lib/table'
+import type { XUDT } from '../../models/Xudt'
+import { Link } from '../../components/Link'
+import Content from '../../components/Content'
+import Pagination from '../../components/Pagination'
+import SortButton from '../../components/SortButton'
+import { TokensPanel, TokensContentEmpty, TokensLoadingPanel } from './styled'
+import { parseDateNoTime } from '../../utils/date'
+import { localeNumberString } from '../../utils/number'
+import Loading from '../../components/Loading'
+import SmallLoading from '../../components/Loading/SmallLoading'
+import styles from './styles.module.scss'
+import { usePaginationParamsInPage, useSortParam } from '../../hooks'
+import { explorerService } from '../../services/ExplorerService'
+import { QueryResult } from '../../components/QueryResult'
+import { FilterSortContainerOnMobile } from '../../components/FilterSortContainer'
+import { Card } from '../../components/Card'
+import { BooleanT } from '../../utils/array'
+
+type SortField = 'transactions' | 'addresses_count' | 'created_time' | 'mint_status'
+
+const TokenInfo: FC<{ token: XUDT }> = ({ token }) => {
+  const { t } = useTranslation()
+
+  const symbol = token.symbol || `#${token.typeHash.substring(token.typeHash.length - 4)}`
+
+  const fields: { name: string; value: ReactNode }[] = [
+    {
+      name: t('xudt.transactions'),
+      value: localeNumberString(token.h24CkbTransactionsCount),
+    },
+    {
+      name: t('xudt.address_count'),
+      value: localeNumberString(token.addressesCount),
+    },
+  ].filter(BooleanT())
+
+  return (
+    <div key={token.typeHash} className={styles.tokenInfo}>
+      <div className={styles.title}>
+        {token.published ? (
+          <>
+            <Link className={styles.link} to={`/xudt/${token.typeHash}`}>
+              {symbol}
+            </Link>
+            {token.fullName ? <span>{token.fullName}</span> : null}
+          </>
+        ) : (
+          symbol
+        )}
+      </div>
+      {fields.map(field => (
+        <dl key={field.name}>
+          <dt>{field.name}</dt>
+          <dd>{field.value}</dd>
+        </dl>
+      ))}
+    </div>
+  )
+}
+
+export function TokensCard({
+  query,
+  sortParam,
+}: {
+  query: UseQueryResult<
+    {
+      tokens: XUDT[]
+      total: number
+      pageSize: number
+    },
+    unknown
+  >
+  sortParam?: ReturnType<typeof useSortParam<SortField>>
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Card className={styles.filterSortCard} shadow={false}>
+        <FilterSortContainerOnMobile>
+          <span className={styles.sortOption}>
+            {t('xudt.transactions')}
+            <SortButton field="transactions" sortParam={sortParam} />
+          </span>
+          <span className={styles.sortOption}>
+            {t('xudt.address_count')}
+            <SortButton field="addresses_count" sortParam={sortParam} />
+          </span>
+          <span className={styles.sortOption}>
+            {t('xudt.created_time')}
+            <SortButton field="created_time" sortParam={sortParam} />
+          </span>
+        </FilterSortContainerOnMobile>
+      </Card>
+
+      <QueryResult
+        query={query}
+        errorRender={() => <TokensContentEmpty>{t('xudt.tokens_empty')}</TokensContentEmpty>}
+        loadingRender={() => (
+          <TokensLoadingPanel>
+            <SmallLoading />
+          </TokensLoadingPanel>
+        )}
+      >
+        {data => (
+          <Card className={styles.tokensCard}>
+            {data?.tokens.map(token => (
+              <TokenInfo key={token.typeHash} token={token} />
+            ))}
+          </Card>
+        )}
+      </QueryResult>
+    </>
+  )
+}
+
+const TokenTable: FC<{
+  query: UseQueryResult<
+    {
+      tokens: XUDT[]
+      total: number
+      pageSize: number
+    },
+    unknown
+  >
+  sortParam?: ReturnType<typeof useSortParam<SortField>>
+}> = ({ query, sortParam }) => {
+  const { t } = useTranslation()
+
+  const nullableColumns: (ColumnGroupType<XUDT> | ColumnType<XUDT> | false | undefined)[] = [
+    {
+      title: `${t('xudt.symbol')}&${t('xudt.name')}`,
+      className: styles.colName,
+      render: (_, token) => {
+        const symbol = token.symbol || `#${token.typeHash.substring(token.typeHash.length - 4)}`
+        return (
+          <div className={styles.container}>
+            <div className={styles.right}>
+              <div className={styles.symbolAndName}>
+                {token.published ? (
+                  <Link className={styles.link} to={`/xudt/${token.typeHash}`}>
+                    {symbol}
+                    <span className={styles.name}>{token.fullName}</span>
+                  </Link>
+                ) : (
+                  symbol
+                )}
+              </div>
+            </div>
+          </div>
+        )
+      },
+    },
+    {
+      title: (
+        <>
+          {t('xudt.transactions')}
+          <SortButton field="transactions" sortParam={sortParam} />
+        </>
+      ),
+      className: styles.colTransactions,
+      render: (_, token) => localeNumberString(token.h24CkbTransactionsCount),
+    },
+    {
+      title: (
+        <>
+          {t('xudt.address_count')}
+          <SortButton field="addresses_count" sortParam={sortParam} />
+        </>
+      ),
+      className: styles.colAddressCount,
+      render: (_, token) => localeNumberString(token.addressesCount),
+    },
+    {
+      title: (
+        <>
+          {t('xudt.created_time')}
+          <SortButton field="created_time" sortParam={sortParam} />
+        </>
+      ),
+      className: styles.colCreatedTime,
+      render: (_, token) => parseDateNoTime(Number(token.createdAt) / 1000, false, '-'),
+    },
+  ]
+  const columns = nullableColumns.filter(BooleanT())
+
+  return (
+    <Table
+      className={styles.tokensTable}
+      columns={columns}
+      dataSource={query.data?.tokens ?? []}
+      pagination={false}
+      loading={
+        query.isLoading
+          ? {
+              indicator: <Loading className={styles.loading} show />,
+            }
+          : false
+      }
+    />
+  )
+}
+
+const Xudts = () => {
+  const { t } = useTranslation()
+  const { currentPage, pageSize: _pageSize, setPage } = usePaginationParamsInPage()
+  const sortParam = useSortParam<SortField>(undefined, 'transactions.desc')
+  const { sort } = sortParam
+
+  const query = useQuery(['xudts', currentPage, _pageSize, sort], async () => {
+    const {
+      data: tokens,
+      total,
+      pageSize,
+    } = await explorerService.api.fetchXudts(currentPage, _pageSize, sort ?? undefined)
+    if (tokens.length === 0) {
+      throw new Error('Tokens empty')
+    }
+    return {
+      tokens,
+      total,
+      pageSize,
+    }
+  })
+  const total = query.data?.total ?? 0
+  const pageSize = query.data?.pageSize ?? _pageSize
+  const totalPages = Math.ceil(total / pageSize)
+
+  return (
+    <Content>
+      <TokensPanel className="container">
+        <div className="tokensTitlePanel">
+          <span>{t('xudt.xudts')}</span>
+        </div>
+
+        <div className={styles.cards}>
+          <TokensCard query={query} sortParam={sortParam} />
+        </div>
+        <div className={styles.table}>
+          <TokenTable query={query} sortParam={sortParam} />
+        </div>
+
+        <Pagination
+          className={styles.pagination}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={setPage}
+        />
+      </TokensPanel>
+    </Content>
+  )
+}
+
+export default Xudts
diff --git a/src/pages/Xudts/styled.tsx b/src/pages/Xudts/styled.tsx
new file mode 100644
index 000000000..4447a5bbd
--- /dev/null
+++ b/src/pages/Xudts/styled.tsx
@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+import variables from '../../styles/variables.module.scss'
+
+export const TokensPanel = styled.div`
+  margin-top: 40px;
+  margin-bottom: 60px;
+
+  @media (max-width: ${variables.mobileBreakPoint}) {
+    margin-top: 20px;
+    margin-bottom: 30px;
+  }
+
+  .tokensTitlePanel {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    @media (max-width: ${variables.mobileBreakPoint}) {
+      margin-bottom: 10px;
+    }
+
+    > span {
+      color: #000;
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    > a {
+      font-size: 14px;
+      color: ${props => props.theme.primary};
+    }
+  }
+`
+
+export const TokensContentEmpty = styled.div`
+  height: 100px;
+  line-height: 100px;
+  width: 100%;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
+  background-color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-top: 4px;
+  margin-bottom: 180px;
+
+  @media (max-width: ${variables.mobileBreakPoint}) {
+    font-size: 14px;
+    border-radius: 6px;
+    margin-bottom: 160px;
+  }
+`
+
+export const TokensLoadingPanel = styled.div`
+  width: 100%;
+  text-align: center;
+
+  @media (max-width: ${variables.mobileBreakPoint}) {
+    height: 100px;
+    line-height: 100px;
+    margin-bottom: 160px;
+    width: 100%;
+    text-align: center;
+    margin-top: 4px;
+    border-radius: 0 0 6px 6px;
+    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
+    background-color: #fff;
+  }
+`
diff --git a/src/pages/Xudts/styles.module.scss b/src/pages/Xudts/styles.module.scss
new file mode 100644
index 000000000..44104593a
--- /dev/null
+++ b/src/pages/Xudts/styles.module.scss
@@ -0,0 +1,252 @@
+@import '../../styles/variables.module';
+
+.link {
+  display: flex;
+  align-items: center;
+  color: var(--primary-color);
+
+  &:hover {
+    color: var(--primary-color);
+  }
+}
+
+.filterSortCard:not(
+    [_='This `:not` selector is used to increase the specificity of the selector and serves no other purpose.']
+  ) {
+  padding: 16px;
+}
+
+.sortOption {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: #333;
+}
+
+.table {
+  display: block;
+
+  @media screen and (width <= $mobileBreakPoint) {
+    display: none;
+  }
+}
+
+.cards {
+  display: none;
+
+  @media screen and (width <= $mobileBreakPoint) {
+    display: block;
+  }
+}
+
+.tokensCard {
+  margin-top: 10px;
+  padding: 0 24px;
+  font-size: 14px;
+  color: #333;
+}
+
+.tokenInfo {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 20px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #f5f5f5;
+  }
+
+  .title {
+    display: flex;
+    gap: 8px;
+    white-space: nowrap;
+    align-items: flex-end;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+
+  dl {
+    margin: 12px 0 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    white-space: nowrap;
+
+    // font-weight: 200;
+    gap: 16px;
+
+    dt,
+    dd {
+      font-weight: inherit;
+    }
+
+    dd {
+      margin: 0;
+    }
+  }
+}
+
+.tokensTable:not(
+    [_='This `:not` selector is used to increase the specificity of the selector and serves no other purpose.'][_='']
+  ) {
+  $paddingX: 40px;
+
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+  font-size: 14px;
+  color: #333;
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  :global(.ant-table-row) {
+    &:hover td {
+      background: unset;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+
+    thead tr {
+      border-bottom: 4px solid #e5e5e5;
+    }
+
+    tbody tr {
+      position: relative;
+
+      &:not(:last-child)::after {
+        content: ' ';
+        position: absolute;
+        bottom: 0;
+        left: $paddingX;
+        display: block;
+        width: calc(100% - $paddingX * 2);
+        height: 1px;
+        background: #e5e5e5;
+      }
+    }
+
+    th {
+      background: #fff;
+      font-weight: 600;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    th,
+    td {
+      border-bottom: 0;
+
+      &:first-child {
+        padding-left: $paddingX;
+      }
+
+      &:last-child {
+        padding-right: $paddingX;
+      }
+    }
+  }
+
+  .colName {
+    width: 40%;
+
+    .container {
+      display: flex;
+      position: relative;
+      align-items: center;
+      gap: 10px;
+
+      .warningIcon {
+        position: absolute;
+        right: 101%;
+      }
+
+      .icon {
+        width: 30px;
+        height: 30px;
+      }
+
+      .right {
+        .symbolAndName {
+          display: flex;
+          align-items: center;
+          line-height: normal;
+          font-size: 14px;
+          color: #333;
+
+          .name {
+            margin-left: 8px;
+            font-size: 12px;
+            color: #999;
+          }
+
+          .helpIcon {
+            width: 16px;
+            height: 16px;
+            margin-left: 4px;
+          }
+        }
+
+        .description {
+          line-height: normal;
+          font-size: 12px;
+          color: #666;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+
+  .colStatus {
+    min-width: 240px;
+
+    .container {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #000;
+
+      .mintStatus {
+        width: 88px;
+      }
+    }
+  }
+
+  .colTransactions {
+    min-width: 200px;
+  }
+
+  .colAddressCount {
+    min-width: 170px;
+  }
+
+  .colCreatedTime {
+    width: 1%;
+    white-space: nowrap;
+  }
+
+  .loading {
+    position: static;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin: 0;
+  }
+}
+
+.pagination {
+  border-top: 4px solid #e5e5e5;
+
+  @media (width <= $mobileBreakPoint) {
+    border-top: 0;
+    margin-top: 20px;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index e1fc0b824..d6b61cb66 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -33,6 +33,8 @@ const ErrorPage = lazy(() => import('../pages/Error'))
 const SearchFail = lazy(() => import('../pages/SearchFail'))
 const StatisticsChart = lazy(() => import('../pages/StatisticsChart'))
 const Tokens = lazy(() => import('../pages/Tokens'))
+const Xudts = lazy(() => import('../pages/Xudts'))
+const Xudt = lazy(() => import('../pages/Xudt'))
 const Halving = lazy(() => import('../pages/Halving'))
 const DifficultyHashRateChart = lazy(() => import('../pages/StatisticsChart/mining/DifficultyHashRate'))
 const DifficultyUncleRateEpochChart = lazy(() => import('../pages/StatisticsChart/mining/DifficultyUncleRateEpoch'))
@@ -106,6 +108,10 @@ const routes: RouteProps[] = [
     path: '/transaction/:hash',
     component: Transaction,
   },
+  {
+    path: '/xudt/:hash',
+    component: Xudt,
+  },
   {
     path: '/sudt/:hash',
     component: UDT,
@@ -132,6 +138,10 @@ const routes: RouteProps[] = [
     path: '/nervosdao',
     component: NervosDao,
   },
+  {
+    path: '/xudts',
+    component: Xudts,
+  },
   {
     path: '/tokens',
     component: Tokens,
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
index ce203d7e8..78f514f8e 100644
--- a/src/services/ExplorerService/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -22,6 +22,7 @@ import { Block } from '../../models/Block'
 import { BtcTx, Transaction } from '../../models/Transaction'
 import { Address, AddressType } from '../../models/Address'
 import { OmigaInscriptionCollection, UDT } from '../../models/UDT'
+import { XUDT } from '../../models/Xudt'
 import { HashType } from '../../constants/common'
 
 async function v1Get<T>(...args: Parameters<typeof requesterV1.get>) {
@@ -691,6 +692,47 @@ export const apiFetcher = {
       },
     }),
 
+  fetchXudt: (typeHash: string) => v1GetUnwrapped<XUDT>(`/xudts/${typeHash}`),
+
+  fetchXudts: (page: number, size: number, sort?: string) =>
+    v1GetUnwrappedPagedList<XUDT>(`/xudts`, {
+      params: {
+        page,
+        page_size: size,
+        sort,
+      },
+    }),
+
+  // TODO: This API is not supported yet, use fetchUDTTransactions instead
+  // fetchXudtTransactions: async ({
+  //   typeHash,
+  //   page,
+  //   size,
+  //   filter,
+  // }: {
+  //   typeHash: string
+  //   page: number
+  //   size: number
+  //   filter?: string | null
+  // }) => {
+  //   const res = await v1GetUnwrappedPagedList<Transaction>(`/xudt_transactions/${typeHash}`, {
+  //     params: {
+  //       page,
+  //       page_size: size,
+  //       address_hash: filter?.startsWith('0x') ? undefined : filter,
+  //       tx_hash: filter?.startsWith('0x') ? filter : undefined,
+  //     },
+  //   })
+
+  //   const transactions = await mergeBtcTxList(res.data)
+
+  //   return {
+  //     transactions,
+  //     pageSize: res.pageSize,
+  //     total: res.total,
+  //   }
+  // },
+
   fetchOmigaInscription: (typeHash: string, isViewOriginal: boolean) =>
     v1GetUnwrapped<OmigaInscriptionCollection>(
       `/omiga_inscriptions/${typeHash}${isViewOriginal ? '?status=closed' : ''}`,