feat: use pagination in transaction inputs/outputs list

src/components/Pagination/index.module.scss

@@ -0,0 +1,11 @@
+.pageSize {
+  margin: 0 10px;
+}
+
+.pageSizeInput {
+  border-radius: 4px;
+  border: none;
+  width: 40px;
+  background: #f5f5f5;
+  padding: 4px 10px;
+}

src/components/Pagination/index.tsx

@@ -8,25 +8,31 @@ import RightGrey from './pagination_grey_right.png'
 import { useIsMobile } from '../../hooks'
 import SimpleButton from '../SimpleButton'
 import { HelpTip } from '../HelpTip'
+import styles from './index.module.scss'
 
 const Pagination = ({
   currentPage,
   totalPages,
   gotoPage = currentPage === totalPages ? totalPages : currentPage + 1,
-  onChange,
+  onPageNumberChange: onChange,
+  onPageSizeChange,
+  pageSize = 10,
   className,
   annotation,
 }: {
   currentPage: number
+  pageSize?: number
   totalPages: number
   gotoPage?: number
-  onChange: (page: number) => void
+  onPageNumberChange: (pageNumber: number) => void
+  onPageSizeChange?: (pageSize: number) => void
   className?: string
   annotation?: string
 }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   const [inputPage, setInputPage] = useState(gotoPage)
+  const [inputPageSize, setInputPageSize] = useState(pageSize)
 
   const total = Math.max(totalPages, 1)
   const current = Math.min(Math.max(currentPage, 1), totalPages)
@@ -45,6 +51,13 @@ const Pagination = ({
     }
   }
 
+  const changePageSize = (pageSize: number) => {
+    if (onPageSizeChange) {
+      onPageSizeChange(pageSize)
+    }
+    setInputPageSize(pageSize)
+  }
+
   return (
     <PaginationPanel className={className}>
       <PaginationLeftItem isFirstPage={current === 1} isLastPage={current === total}>
@@ -74,6 +87,28 @@ const Pagination = ({
         <SimpleButton className="paginationLastButton" onClick={() => changePage(total)}>
           {t('pagination.last')}
         </SimpleButton>
+        {!isMobile && (
+          <>
+            <span className={styles.pageSize}>{t('pagination.page_size')}</span>
+            <input
+              type="text"
+              pattern="[0-9]*"
+              className={styles.pageSizeInput}
+              value={inputPageSize}
+              onChange={event => {
+                const value = parseInt(event.target.value, 10)
+                if (!Number.isNaN(value)) {
+                  setInputPageSize(value)
+                }
+              }}
+              onKeyUp={event => {
+                if (event.keyCode === 13) {
+                  changePageSize(inputPageSize)
+                }
+              }}
+            />
+          </>
+        )}
       </PaginationLeftItem>
       <PaginationRightItem>
         <span className="paginationPageLabel">{t('pagination.page')}</span>

src/components/PaginationWithRear/index.tsx

@@ -8,11 +8,15 @@ const PaginationWithRear = ({
   totalPages,
   onChange,
   paginationClassName,
+  onPageSizeChange,
+  pageSize,
   rear,
 }: {
   currentPage: number
   totalPages: number
+  pageSize?: number
   onChange: (page: number) => void
+  onPageSizeChange?: (pageSize: number) => void
   paginationClassName?: string
   rear: ReactNode
 }) => {
@@ -22,7 +26,9 @@ const PaginationWithRear = ({
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}
-          onChange={onChange}
+          pageSize={pageSize}
+          onPageSizeChange={onPageSizeChange}
+          onPageNumberChange={onChange}
           className={classNames(styles.pagination, paginationClassName)}
         />
       )}

src/locales/en.json

@@ -552,7 +552,8 @@
       "end_page": "",
       "current_page": "Page",
       "of_page": "of",
-      "only_first_pages_visible": "Showing first {{pages}} pages"
+      "only_first_pages_visible": "Showing first {{pages}} pages",
+      "page_size": "Size"
     },
     "udt": {
       "sudt": "sUDT",

src/locales/zh.json

@@ -553,7 +553,8 @@
       "end_page": "页",
       "current_page": "第",
       "of_page": "页，共",
-      "only_first_pages_visible": "显示最近 {{pages}} 页"
+      "only_first_pages_visible": "显示最近 {{pages}} 页",
+      "page_size": "每页"
     },
     "udt": {
       "sudt": "sUDT",

src/pages/BlockDetail/BlockComp.tsx

@@ -354,7 +354,7 @@ export const BlockComp = ({
       )}
       {totalPages > 1 && (
         <BlockTransactionsPagination>
-          <Pagination currentPage={currentPage} totalPages={totalPages} onChange={onPageChange} />
+          <Pagination currentPage={currentPage} totalPages={totalPages} onPageNumberChange={onPageChange} />
         </BlockTransactionsPagination>
       )}
     </>

src/pages/NervosDao/DaoTransactions/index.tsx

@@ -59,7 +59,7 @@ export default ({
       )}
       {totalPages > 1 && (
         <TransactionsPagination>
-          <Pagination currentPage={currentPage} totalPages={totalPages} onChange={onPageChange} />
+          <Pagination currentPage={currentPage} totalPages={totalPages} onPageNumberChange={onPageChange} />
         </TransactionsPagination>
       )}
     </>

src/pages/NftCollectionInfo/index.tsx

@@ -206,14 +206,14 @@ const NftCollectionInfo = () => {
             <Pagination
               currentPage={+page}
               totalPages={Math.ceil((holderList?.length ?? 0) / PAGE_SIZE) ?? 1}
-              onChange={handlePageChange}
+              onPageNumberChange={handlePageChange}
             />
           </>
         ) : null}
         {tab === tabs[2] ? (
           <>
             <NftCollectionInventory collection={id} list={inventoryList?.data ?? []} isLoading={isInventoryLoading} />
-            <Pagination {...pages} onChange={handlePageChange} />
+            <Pagination {...pages} onPageNumberChange={handlePageChange} />
           </>
         ) : null}
       </div>

src/pages/NftCollections/index.tsx

@@ -62,7 +62,7 @@ const NftCollections = () => {
         <Pagination
           currentPage={data?.pagination.page ?? 1}
           totalPages={data?.pagination.last ?? 1}
-          onChange={handlePageChange}
+          onPageNumberChange={handlePageChange}
         />
       </div>
     </Content>

src/pages/NftInfo/index.tsx

@@ -140,7 +140,7 @@ const NftInfo = () => {
         <Pagination
           currentPage={transferListRes?.pagination.page ?? 1}
           totalPages={transferListRes?.pagination.last ?? 1}
-          onChange={handlePageChange}
+          onPageNumberChange={handlePageChange}
         />
       </div>
     </div>

src/pages/Script/ScriptsComp.tsx

@@ -81,7 +81,7 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
       </div>
       {totalPages > 1 && (
         <div className={styles.scriptPagination}>
-          <Pagination currentPage={page} totalPages={totalPages} onChange={onChange} />
+          <Pagination currentPage={page} totalPages={totalPages} onPageNumberChange={onChange} />
         </div>
       )}
     </>
@@ -217,7 +217,7 @@ export const ScriptCells = ({
       </div>
       {totalPages > 1 && (
         <div className={styles.scriptPagination}>
-          <Pagination currentPage={page} totalPages={totalPages} onChange={onChange} />
+          <Pagination currentPage={page} totalPages={totalPages} onPageNumberChange={onChange} />
         </div>
       )}
     </>

src/pages/Tokens/index.tsx

@@ -161,7 +161,7 @@ export default () => {
           )}
         </QueryResult>
 
-        <Pagination currentPage={currentPage} totalPages={totalPages} onChange={setPage} />
+        <Pagination currentPage={currentPage} totalPages={totalPages} onPageNumberChange={setPage} />
       </TokensPanel>
     </Content>
   )

src/pages/Transaction/TransactionCellList/index.tsx

@@ -20,11 +20,15 @@ export default ({
   outputs,
   txHash,
   showReward,
+  total,
+  indiceOffset,
 }: {
   inputs?: Cell[]
   outputs?: Cell[]
   txHash?: string
   showReward?: boolean
+  total?: number
+  indiceOffset?: number
 }) => {
   const { t } = useTranslation()
   const [offset, setOffset] = useState(PAGE_CELL_COUNT)
@@ -54,6 +58,9 @@ export default ({
   const toggleDeprecatedAddressesDisplayed = () => setIsDeprecatedAddressesDisplayed(value => !value)
 
   const cellsCount = () => {
+    if (total) {
+      return total
+    }
     if (inputs) {
       return inputs.length
     }
@@ -99,7 +106,7 @@ export default ({
                   key={cell.id}
                   cell={cell}
                   cellType={inputs ? CellType.Input : CellType.Output}
-                  index={index}
+                  index={index + (indiceOffset || 0)}
                   txHash={txHash}
                   showReward={showReward}
                   isAddrNew={!isDeprecatedAddressesDisplayed}

src/pages/Transaction/TransactionComp/TransactionComp.tsx

@@ -1,6 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { useHistory, useLocation } from 'react-router-dom'
 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'
+import { useSearchParams } from '../../../hooks'
 
 const handleCellbaseInputs = (inputs: Cell[], outputs: Cell[]) => {
   if (inputs[0] && inputs[0].fromCellbase && outputs[0] && outputs[0].baseReward) {
@@ -18,18 +24,108 @@ const handleCellbaseInputs = (inputs: Cell[], outputs: Cell[]) => {
 }
 
 export const TransactionComp = ({ transaction }: { transaction: Transaction }) => {
-  const { transactionHash, displayInputs, displayOutputs, blockNumber, isCellbase } = transaction
+  const DEFAULT_PAGE_SIZE = 10
+  const txHash = transaction.transactionHash
+  const location = useLocation()
+  const queryParams = new URLSearchParams(location.search)
+  const history = useHistory()
 
-  const inputs = handleCellbaseInputs(displayInputs, displayOutputs)
+  const {
+    inputCellsPageNumber = 1,
+    inputCellsPageSize = DEFAULT_PAGE_SIZE,
+    outputCellsPageNumber = 1,
+    outputCellsPageSize = DEFAULT_PAGE_SIZE,
+  } = useSearchParams('inputCellsPageNumber', 'inputCellsPageSize', 'outputCellsPageNumber', 'outputCellsPageSize')
 
+  const handleInputCellsPageChange = (page: number) => {
+    queryParams.set('inputCellsPageNumber', page.toString())
+    history.replace(`${location.pathname}?${queryParams.toString()}`)
+  }
+  const handleInputCellsPageSizeChange = (pageSize: number) => {
+    queryParams.set('inputCellsPageSize', pageSize.toString())
+    history.replace(`${location.pathname}?${queryParams.toString()}`)
+  }
+
+  const txInputsQuery = useQuery(['transactionInputs', txHash, inputCellsPageNumber, inputCellsPageSize], async () => {
+    const result = await explorerService.api.fetchTransactionInputsByHash(
+      txHash,
+      Number(inputCellsPageNumber),
+      Number(inputCellsPageSize),
+    )
+    return result
+  })
+  const handleOutputCellsPageChange = (page: number) => {
+    queryParams.set('outputCellsPageNumber', page.toString())
+    history.replace(`${location.pathname}?${queryParams.toString()}`)
+  }
+  const handleOutputCellsPageSizeChange = (pageSize: number) => {
+    queryParams.set('outputCellsPageSize', pageSize.toString())
+    history.replace(`${location.pathname}?${queryParams.toString()}`)
+  }
+
+  const txOutputsQuery = useQuery(
+    ['transactionOutputs', txHash, outputCellsPageNumber, outputCellsPageSize],
+    async () => {
+      const result = await explorerService.api.fetchTransactionOutputsByHash(
+        txHash,
+        Number(outputCellsPageNumber),
+        Number(outputCellsPageSize),
+      )
+      // 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(
+    txInputsQuery.isSuccess ? txInputsQuery.data.data : [],
+    txOutputsQuery.isSuccess ? txOutputsQuery.data.data : [],
+  )
+
+  const totalInputsCount = txInputsQuery.data?.meta?.total ?? 0
+  const totalOutputsCount = txOutputsQuery.data?.meta?.total ?? 0
   /// [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
+            total={totalInputsCount}
+            inputs={inputs}
+            showReward={Number(blockNumber) > 0 && isCellbase}
+            indiceOffset={(Number(inputCellsPageNumber) - 1) * Number(inputCellsPageSize)}
+          />
+        )}
+        <Pagination
+          currentPage={Number(inputCellsPageNumber)}
+          pageSize={Number(inputCellsPageSize)}
+          totalPages={txInputsQuery.isSuccess ? Math.ceil(totalInputsCount / Number(inputCellsPageSize)) : 1}
+          onPageNumberChange={handleInputCellsPageChange}
+          onPageSizeChange={handleInputCellsPageSizeChange}
+        />
       </div>
       <div className="transactionOutputs">
-        {displayOutputs && <TransactionCellList outputs={displayOutputs} txHash={transactionHash} />}
+        {txOutputsQuery.isFetching && <Loading show />}
+        {txOutputsQuery.isSuccess && (
+          <TransactionCellList
+            total={totalOutputsCount}
+            outputs={txOutputsQuery.data.data}
+            txHash={transactionHash}
+            indiceOffset={(Number(outputCellsPageNumber) - 1) * Number(outputCellsPageSize)}
+          />
+        )}
+        <Pagination
+          currentPage={Number(outputCellsPageNumber)}
+          pageSize={Number(outputCellsPageSize)}
+          totalPages={txOutputsQuery.isSuccess ? Math.ceil(totalOutputsCount / Number(outputCellsPageSize)) : 1}
+          onPageNumberChange={handleOutputCellsPageChange}
+          onPageSizeChange={handleOutputCellsPageSizeChange}
+        />
       </div>
     </>
   )

src/pages/Transaction/index.tsx

@@ -15,14 +15,7 @@ export default () => {
   const { Professional, Lite } = LayoutLiteProfessional
   const { hash: txHash } = useParams<{ hash: string }>()
 
-  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
-  })
+  const query = useQuery(['transaction', txHash], async () => explorerService.api.fetchTransactionByHash(txHash))
 
   const transaction = query.data ?? defaultTransactionInfo
   const searchParams = useSearchParams('layout')