feat: remove scroll of cell list (#341)

Ref: Magickbase/ckb-explorer-public-issues#559
Magickbase · May 27, 2024 · 1da63f5 · 1da63f5
1 parent 6715164
commit 1da63f5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 60 deletions.
diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -6,7 +6,6 @@ export const BLOCKCHAIN_ALERT_POLLING_TIME = 10000
 export const FLUSH_CHART_CACHE_POLLING_TIME = 300000 // 5 minutes
 export const LOADING_WAITING_TIME = 500
 export const DELAY_BLOCK_NUMBER = 11
-export const PAGE_CELL_COUNT = 200
 export const NEXT_HARD_FORK_EPOCH = 5414
 export const EPOCH_HOURS = 4
 export const ONE_DAY_SECOND = 24 * 60 * 60

diff --git a/src/pages/Transaction/TransactionCellList/index.tsx b/src/pages/Transaction/TransactionCellList/index.tsx
@@ -1,21 +1,16 @@
-import { useState, useCallback } from 'react'
 import { Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
-import { CellType, PAGE_CELL_COUNT } from '../../../constants/common'
+import { CellType } from '../../../constants/common'
 import TransactionCell from '../TransactionCell'
 import { TransactionCellListPanel, TransactionCellListTitlePanel, TransactionCellsPanel } from './styled'
-import SmallLoading from '../../../components/Loading/SmallLoading'
 import { ReactComponent as DeprecatedAddrOn } from './deprecated_addr_on.svg'
 import { ReactComponent as DeprecatedAddrOff } from './deprecated_addr_off.svg'
 import { ReactComponent as Warning } from './warning.svg'
 import styles from './styles.module.scss'
 import { Cell } from '../../../models/Cell'
 import { useSearchParams, useUpdateSearchParams } from '../../../hooks'
 
-const SCROLL_BOTTOM_OFFSET = 5
-const SCROLL_LOADING_TIME = 400
-
 function useIsDeprecatedAddressesDisplayed() {
   const { addr_format } = useSearchParams('addr_format')
   const updateSearchParams = useUpdateSearchParams<'addr_format'>()
@@ -49,28 +44,8 @@ export default ({
   startIndex: number
 }) => {
   const { t } = useTranslation()
-  const [offset, setOffset] = useState(PAGE_CELL_COUNT)
-  const [isEnd, setIsEnd] = useState(false)
   const cells = inputs || outputs || []
   const isCellbaseInput = inputs && inputs.length > 0 && inputs[0].fromCellbase
-  const isScroll = cells.length > PAGE_CELL_COUNT
-
-  const handleScroll = useCallback(
-    (event: React.UIEvent<HTMLDivElement, UIEvent>) => {
-      if (cells.length <= offset) {
-        setIsEnd(true)
-        return
-      }
-      const element = event.target as HTMLDivElement
-      const { scrollHeight, scrollTop, offsetHeight } = element
-      if (scrollHeight - scrollTop - offsetHeight < SCROLL_BOTTOM_OFFSET) {
-        setTimeout(() => {
-          setOffset(offset + PAGE_CELL_COUNT)
-        }, SCROLL_LOADING_TIME)
-      }
-    },
-    [offset, cells.length],
-  )
 
   const [isDeprecatedAddressesDisplayed, addrFormatToggleURL] = useIsDeprecatedAddressesDisplayed()
 
@@ -116,24 +91,20 @@ export default ({
           <div>{isCellbaseInput ? '' : t('transaction.capacity_amount')}</div>
         </div>
       </TransactionCellListTitlePanel>
-      <TransactionCellsPanel isScroll={isScroll}>
+      <TransactionCellsPanel>
         <div className="transactionCellTitle">{cellTitle()}</div>
-        <div className="transactionCellListContainer" onScroll={event => handleScroll(event)}>
-          {cells &&
-            cells
-              .slice(0, offset)
-              .map((cell, index) => (
-                <TransactionCell
-                  key={cell.id}
-                  cell={cell}
-                  cellType={inputs ? CellType.Input : CellType.Output}
-                  index={index + startIndex}
-                  txHash={txHash}
-                  showReward={showReward}
-                  isAddrNew={!isDeprecatedAddressesDisplayed}
-                />
-              ))}
-          {isScroll && !isEnd && <SmallLoading />}
+        <div className="transactionCellListContainer">
+          {cells?.map((cell, index) => (
+            <TransactionCell
+              key={cell.id}
+              cell={cell}
+              cellType={inputs ? CellType.Input : CellType.Output}
+              index={index + startIndex}
+              txHash={txHash}
+              showReward={showReward}
+              isAddrNew={!isDeprecatedAddressesDisplayed}
+            />
+          ))}
         </div>
       </TransactionCellsPanel>
     </TransactionCellListPanel>

diff --git a/src/pages/Transaction/TransactionCellList/styled.tsx b/src/pages/Transaction/TransactionCellList/styled.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import variables from '../../../styles/variables.module.scss'
 
 export const TransactionCellListTitlePanel = styled.div`
@@ -65,21 +65,6 @@ export const TransactionCellListPanel = styled.div`
 `
 
 export const TransactionCellsPanel = styled.div`
-  ${(props: { isScroll: boolean }) =>
-    props.isScroll &&
-    css`
-      padding-top: 10px;
-
-      .transactionCellListContainer {
-        max-height: 600px;
-        overflow-y: scroll;
-
-        @media (min-width: ${variables.mobileBreakPoint}) {
-          max-height: 400px;
-        }
-      }
-    `};
-
   .transactionCellTitle {
     color: #000;
     font-weight: 600;