feat(rgbpp-list): add others

src/components/FilterButton/index.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { Popover } from 'antd'
+import { ReactNode } from 'react'
 import { ReactComponent as FilterIcon } from '../../assets/filter_icon.svg'
 import { ReactComponent as SelectedCheckIcon } from '../../assets/selected_check_icon.svg'
 import { useSearchParams } from '../../hooks'
@@ -11,7 +12,7 @@ export function FilterButton({
   filterName,
 }: {
   filterName: string
-  filteredList: Record<'key' | 'title' | 'value' | 'to', string>[]
+  filteredList: (Record<'key' | 'value' | 'to', string> & Record<'title', ReactNode | string>)[]
   isMobile?: boolean
 }) {
   const { type } = useSearchParams('type')

src/locales/en.json

@@ -466,6 +466,12 @@
         "multiple_warning": "The current UTXO contains multiple assets. Please ensure that the assets are not lost when consuming the UTXO."
       },
       "transaction": {
+        "direction": {
+          "other": "Others",
+          "description": {
+            "other": "Others include CKB transactions that do not strictly adhere to RGB++ rules"
+          }
+        },
         "ckb_tx": "CKB Tx",
         "btc_tx": "BTC Tx",
         "block_number": "Block Number",

src/locales/zh.json

@@ -466,6 +466,12 @@
         "multiple_warning": "当前 UTXO 下有多个资产，消耗 UTXO 时请确保资产不会丢失"
       },
       "transaction": {
+        "direction": {
+          "other": "Others",
+          "description": {
+            "other": "Others 包括了不严格遵循 RGB++ 规则的 CKB 交易"
+          }
+        },
         "ckb_tx": "CKB 交易",
         "btc_tx": "BTC 交易",
         "block_number": "区块序号",

src/pages/RGBPP/TransactionList/List/index.tsx

@@ -1,9 +1,11 @@
 import { TFunction, useTranslation } from 'react-i18next'
+import { ReactNode } from 'react'
 import styles from './styles.module.scss'
 import SortButton from '../../../../components/SortButton'
 import FilterButton from '../../../../components/FilterButton'
 import { useIsMobile } from '../../../../hooks'
 import Item, { type Transaction } from './item'
+import { HelpTip } from '../../../../components/HelpTip'
 
 const RGBTransactionList: React.FC<{ list: Transaction[] }> = ({ list }) => {
   const [t] = useTranslation()
@@ -86,7 +88,9 @@ const RGBTransactionList: React.FC<{ list: Transaction[] }> = ({ list }) => {
 export default RGBTransactionList
 export { Transaction }
 
-const getFilterList = (t: TFunction): Record<'key' | 'title' | 'value' | 'to', string>[] => {
+const getFilterList = (
+  t: TFunction,
+): (Record<'key' | 'value' | 'to', string> & Record<'title', string | ReactNode>)[] => {
   return [
     {
       key: 'leap_in',
@@ -106,6 +110,17 @@ const getFilterList = (t: TFunction): Record<'key' | 'title' | 'value' | 'to', s
       title: t('address.leap_with_in_btc'),
       to: '',
     },
+    {
+      key: 'other',
+      value: 'other',
+      title: (
+        <div>
+          <span>{t('rgbpp.transaction.direction.other')}</span>
+          <HelpTip title={t('rgbpp.transaction.direction.description.other')} />
+        </div>
+      ),
+      to: '',
+    },
   ]
 }
 

src/pages/RGBPP/TransactionList/List/item.tsx

@@ -11,6 +11,7 @@ import { TransactionLeapDirection } from '../../../../components/RGBPP/types'
 import styles from './styles.module.scss'
 import { getBtcChainIdentify } from '../../../../services/BTCIdentifier'
 import { IS_MAINNET } from '../../../../constants/common'
+import { HelpTip } from '../../../../components/HelpTip'
 
 export type Transaction = {
   ckbTxId: string
@@ -36,7 +37,7 @@ const Item = ({ item }: { item: Transaction }) => {
 
   return (
     <tr key={item.ckbTxId}>
-      <td className={styles.hash} title={t('rgbpp.transaction.ckb_txid')}>
+      <td className={styles.hash} title={t('rgbpp.transaction.ckb_tx')}>
         <div className={styles.transactionHash}>
           <AddressText
             disableTooltip
@@ -62,8 +63,15 @@ const Item = ({ item }: { item: Transaction }) => {
       <td className={styles.time} title={t('rgbpp.transaction.time')}>
         {dayjs(item.time).fromNow()}
       </td>
-      <td className={styles.type} title={t('rgbpp.transaction.type')}>
-        {item.type === TransactionLeapDirection.NONE ? '/' : t(`address.leap_${item.type}`)}
+      <td title={t('rgbpp.transaction.type')}>
+        {item.type === TransactionLeapDirection.NONE ? (
+          <div className={styles.type}>
+            <span>{t('rgbpp.transaction.direction.other')}</span>
+            <HelpTip title={t('rgbpp.transaction.direction.description.other')} />
+          </div>
+        ) : (
+          t(`address.leap_${item.type}`)
+        )}
       </td>
       <td className={styles.cellChange} title={t('rgbpp.transaction.rgbpp_cell_change')}>
         {`${item.cellChange > 0 ? '+' : ''}${item.cellChange}`}{' '}

src/pages/RGBPP/TransactionList/List/styles.module.scss

@@ -86,6 +86,11 @@
         &:not(:last-child) {
           border-bottom: 1px solid #f5f5f5;
         }
+
+        .type {
+          display: flex;
+          align-items: center;
+        }
       }
     }
   }