feat: use pagination in transaction inputs/outputs list

src/components/TransactionItem/index.tsx

@@ -1,5 +1,6 @@
-import { ReactNode, useEffect, useRef } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
 import RightArrowIcon from './input_arrow_output.png'
 import DownArrowIcon from './input_arrow_output_down.png'
 import { localeNumberString } from '../../utils/number'
@@ -11,6 +12,8 @@ import { CellType } from '../../constants/common'
 import AddressText from '../AddressText'
 import { useIsExtraLarge, useParsedDate } from '../../hooks'
 import { Transaction } from '../../models/Transaction'
+import { explorerService } from '../../services/ExplorerService'
+import Pagination from '../Pagination'
 
 export interface CircleCorner {
   top?: boolean
@@ -75,6 +78,19 @@ const TransactionItem = ({
   const isXL = useIsExtraLarge()
   const { t } = useTranslation()
   const ref = useRef<HTMLDivElement>(null)
+  const txHash = transaction.transactionHash
+  // refactor to configurable
+  const PAGE_SIZE = 10
+  const [inputCellsPage, setInputCellsPage] = useState(1)
+  const txInputsQuery = useQuery(['transactionInputs', txHash, inputCellsPage], async () => {
+    const result = await explorerService.api.fetchTransactionInputsByHash(txHash, inputCellsPage, PAGE_SIZE)
+    return result
+  })
+  const [outputCellsPage, setOutputCellsPage] = useState(1)
+  const txOutputsQuery = useQuery(['transactionOutputs', txHash, outputCellsPage], async () => {
+    const result = await explorerService.api.fetchTransactionOutputsByHash(txHash, outputCellsPage, PAGE_SIZE)
+    return result
+  })
 
   useEffect(() => {
     const el = ref.current
@@ -108,16 +124,23 @@ const TransactionItem = ({
       <TransactionCellPanel>
         <div className="transactionItemInput">
           <TransactionCellList
-            cells={transaction.displayInputs}
+            cells={txInputsQuery.isSuccess ? txInputsQuery.data.data : []}
             transaction={transaction}
             render={cell => <TransactionCell cell={cell} address={address} cellType={CellType.Input} key={cell.id} />}
           />
+          {txInputsQuery.isSuccess && txInputsQuery.data.total > PAGE_SIZE && (
+            <Pagination
+              currentPage={inputCellsPage}
+              totalPages={txInputsQuery.isSuccess ? Math.ceil(txInputsQuery.data.total / PAGE_SIZE) : 1}
+              onChange={setInputCellsPage}
+            />
+          )}
         </div>
         <img src={isXL ? DownArrowIcon : RightArrowIcon} alt="input and output" />
         <div className="transactionItemOutput">
-          {transaction.displayOutputs && transaction.displayOutputs.length !== 0 ? (
+          {txOutputsQuery.isSuccess && txOutputsQuery.data.total > 0 ? (
             <TransactionCellList
-              cells={transaction.displayOutputs}
+              cells={txOutputsQuery.data.data}
               transaction={transaction}
               render={cell => (
                 <FullPanel key={cell.id}>
@@ -128,6 +151,13 @@ const TransactionItem = ({
           ) : (
             <div className="transactionItemOutputEmpty">{t('transaction.empty_output')}</div>
           )}
+          {txOutputsQuery.isSuccess && txOutputsQuery.data.total > PAGE_SIZE && (
+            <Pagination
+              currentPage={outputCellsPage}
+              totalPages={txOutputsQuery.isSuccess ? Math.ceil(txOutputsQuery.data.total / PAGE_SIZE) : 1}
+              onChange={setOutputCellsPage}
+            />
+          )}
         </div>
       </TransactionCellPanel>
       {address && <TransactionIncome income={transaction.income} />}

src/pages/Transaction/TransactionComp/TransactionComp.tsx

@@ -1,6 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
 import TransactionCellList from '../TransactionCellList'
 import { Cell } from '../../../models/Cell'
 import { Transaction } from '../../../models/Transaction'
+import { explorerService } from '../../../services/ExplorerService'
+import Pagination from '../../../components/Pagination'
+import Loading from '../../../components/Loading'
 
 const handleCellbaseInputs = (inputs: Cell[], outputs: Cell[]) => {
   if (inputs[0] && inputs[0].fromCellbase && outputs[0] && outputs[0].baseReward) {
@@ -18,18 +23,57 @@ const handleCellbaseInputs = (inputs: Cell[], outputs: Cell[]) => {
 }
 
 export const TransactionComp = ({ transaction }: { transaction: Transaction }) => {
-  const { transactionHash, displayInputs, displayOutputs, blockNumber, isCellbase } = transaction
+  const txHash = transaction.transactionHash
+  // refactor to configurable
+  const PAGE_SIZE = 10
+  const [inputCellsPage, setInputCellsPage] = useState(1)
+  const txInputsQuery = useQuery(['transactionInputs', txHash, inputCellsPage], async () => {
+    const result = await explorerService.api.fetchTransactionInputsByHash(txHash, inputCellsPage, PAGE_SIZE)
+    return result
+  })
+  const [outputCellsPage, setOutputCellsPage] = useState(1)
+  const txOutputsQuery = useQuery(['transactionOutputs', txHash, outputCellsPage], async () => {
+    const result = await explorerService.api.fetchTransactionOutputsByHash(txHash, outputCellsPage, PAGE_SIZE)
+    // TODO: When will displayOutputs be empty? Its type description indicates that it will not be empty.
+    if (result.data.length > 0) {
+      result.data[0].isGenesisOutput = transaction.blockNumber === 0
+    }
+    return result
+  })
+
+  const { transactionHash, blockNumber, isCellbase } = transaction
 
-  const inputs = handleCellbaseInputs(displayInputs, displayOutputs)
+  const inputs = handleCellbaseInputs(
+    txInputsQuery.isSuccess ? txInputsQuery.data.data : [],
+    txOutputsQuery.isSuccess ? txOutputsQuery.data.data : [],
+  )
 
   /// [0, 11] block doesn't show block reward and only cellbase show block reward
   return (
     <>
       <div className="transactionInputs">
-        {inputs && <TransactionCellList inputs={inputs} showReward={blockNumber > 0 && isCellbase} />}
+        {txInputsQuery.isFetching && <Loading show />}
+        {inputs && <TransactionCellList inputs={inputs} showReward={Number(blockNumber) > 0 && isCellbase} />}
+        {txInputsQuery.isSuccess && txInputsQuery.data.total > PAGE_SIZE && (
+          <Pagination
+            currentPage={inputCellsPage}
+            totalPages={txInputsQuery.isSuccess ? Math.ceil(txInputsQuery.data.total / PAGE_SIZE) : 1}
+            onChange={setInputCellsPage}
+          />
+        )}
       </div>
       <div className="transactionOutputs">
-        {displayOutputs && <TransactionCellList outputs={displayOutputs} txHash={transactionHash} />}
+        {txOutputsQuery.isFetching && <Loading show />}
+        {txOutputsQuery.isSuccess && (
+          <TransactionCellList outputs={txOutputsQuery.data.data} txHash={transactionHash} />
+        )}
+        {txOutputsQuery.isSuccess && txOutputsQuery.data.total > PAGE_SIZE && (
+          <Pagination
+            currentPage={outputCellsPage}
+            totalPages={txOutputsQuery.isSuccess ? Math.ceil(txOutputsQuery.data.total / PAGE_SIZE) : 1}
+            onChange={setOutputCellsPage}
+          />
+        )}
       </div>
     </>
   )

src/pages/Transaction/index.tsx

@@ -17,10 +17,6 @@ export default () => {
 
   const query = useQuery(['transaction', txHash], async () => {
     const transaction = await explorerService.api.fetchTransactionByHash(txHash)
-    // TODO: When will displayOutputs be empty? Its type description indicates that it will not be empty.
-    if (transaction.displayOutputs && transaction.displayOutputs.length > 0) {
-      transaction.displayOutputs[0].isGenesisOutput = transaction.blockNumber === 0
-    }
     return transaction
   })
 

src/services/ExplorerService/fetcher.ts

@@ -41,6 +41,15 @@ const v1GetUnwrappedPagedList = <T>(...args: Parameters<typeof v1GetWrapped>) =>
     }
   })
 
+const v1GetPagedList = <T>(...args: Parameters<typeof v1GetWrapped>) =>
+  v1Get<T[]>(...args).then(res => {
+    assert(res.meta, 'Unexpected paged list response')
+    return {
+      data: res.data,
+      ...res.meta,
+    }
+  })
+
 export enum SearchResultType {
   Block = 'block',
   Transaction = 'ckb_transaction',
@@ -99,6 +108,20 @@ export const apiFetcher = {
   fetchTransactionRaw: (hash: string) => requesterV2.get<unknown>(`transactions/${hash}/raw`).then(res => res.data),
 
   fetchTransactionByHash: (hash: string) => v1GetUnwrapped<Transaction>(`transactions/${hash}`),
+  fetchTransactionInputsByHash: (hash: string, page: number, size: number) =>
+    v1GetPagedList<Cell>(`transactions/${hash}/display_inputs`, {
+      params: {
+        page,
+        page_size: size,
+      },
+    }),
+  fetchTransactionOutputsByHash: (hash: string, page: number, size: number) =>
+    v1GetPagedList<Cell>(`transactions/${hash}/display_outputs`, {
+      params: {
+        page,
+        page_size: size,
+      },
+    }),
 
   fetchTransactionLiteDetailsByHash: (hash: string) =>
     requesterV2