[ETCM-765] Remove infinite scroller + scroll tx history frame.

package.json

@@ -106,9 +106,9 @@
     "react-countup": "^4.3.3",
     "react-dom": "17.0.1",
     "react-i18next": "11.8.6",
-    "react-infinite-scroller": "^1.2.4",
     "react-inlinesvg": "^1.2.0",
     "react-scripts": "4.0.2",
+    "react-virtualized-auto-sizer": "^1.0.5",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.4",
     "semver": "^7.3.2",
@@ -152,7 +152,6 @@
     "@types/qrcode.react": "^1.0.0",
     "@types/react": "17.0.1",
     "@types/react-dom": "^16.9.8",
-    "@types/react-infinite-scroller": "^1.2.1",
     "@types/rimraf": "^3.0.0",
     "@types/semver": "^7.2.0",
     "@types/vfile-message": "^2.0.0",

src/wallets/TransactionHistory.tsx

@@ -1,6 +1,5 @@
 import React, {useState} from 'react'
 import {Button} from 'antd'
-import InfiniteScroll from 'react-infinite-scroller'
 import {fold, getOrElse, Option} from 'fp-ts/lib/Option'
 import {pipe} from 'fp-ts/lib/function'
 import {SendTransactionFlow} from './modals/SendTransaction'
@@ -30,7 +29,6 @@ export const TransactionHistory = ({
   generateAddress,
   accounts,
 }: TransactionHistoryProps): JSX.Element => {
-  const [shownTxNumber, setShownTxNumber] = useState(20)
   const [showSendModal, setShowSendModal] = useState(false)
   const [showReceiveModal, setShowReceiveModal] = useState(false)
 
@@ -97,20 +95,11 @@ export const TransactionHistory = ({
         </div>
       ) : (
         <div className="transactions-container">
-          <InfiniteScroll
-            initialLoad={false}
-            loadMore={() => setShownTxNumber(shownTxNumber + 10)}
-            hasMore={transactions.length > shownTxNumber}
-            useWindow={false}
-            getScrollParent={() => document.getElementById('main')}
-          >
-            <TransactionList
-              transactions={transactions}
-              shownTxNumber={shownTxNumber}
-              onSortChange={(sortBy) => setSortBy(sortBy)}
-              sortBy={sortBy}
-            />
-          </InfiniteScroll>
+          <TransactionList
+            transactions={transactions}
+            onSortChange={(sortBy) => setSortBy(sortBy)}
+            sortBy={sortBy}
+          />
         </div>
       )}
     </div>

src/wallets/TransactionList.scss

@@ -2,11 +2,11 @@
 
 .TransactionList {
   @extend %base-grid;
+  height: 55vh;
+  overflow-y: scroll;
 
   .header {
     display: contents;
-    position: sticky;
-    top: 0;
     padding-left: 1em;
     font-size: $font-size-s;
     font-weight: bold;

src/wallets/TransactionList.tsx

@@ -3,8 +3,7 @@ import _ from 'lodash/fp'
 import classnames from 'classnames'
 import {CaretDownFilled, CaretUpFilled} from '@ant-design/icons'
 import {pipe} from 'fp-ts/lib/pipeable'
-import {map} from 'fp-ts/lib/Array'
-import {sort} from 'fp-ts/lib/ReadonlyArray'
+import {sort, map} from 'fp-ts/lib/ReadonlyArray'
 import {getDualOrd, ord, Ord, ordNumber} from 'fp-ts/lib/Ord'
 import {fillActionHandlers} from '../common/util'
 import {
@@ -33,7 +32,6 @@ export interface SortBy {
 
 interface TransactionListProps {
   transactions: readonly Transaction[]
-  shownTxNumber?: number
   onSortChange?: (sortBy: SortBy) => void
   initialSortBy?: SortBy
   sortBy?: SortBy
@@ -153,7 +151,6 @@ const getOrd = ({direction, property}: SortBy): Ord<Transaction> => {
 
 export const TransactionList = ({
   transactions,
-  shownTxNumber,
   onSortChange,
   initialSortBy = {
     property: 'time',
@@ -207,7 +204,6 @@ export const TransactionList = ({
         {pipe(
           transactions,
           sort(getOrd(_sortBy)),
-          _.take(shownTxNumber || transactions.length),
           map((tx) => <TransactionRow transaction={tx} key={tx.hash} />),
         )}
       </div>

yarn.lock

@@ -3330,13 +3330,6 @@
   dependencies:
     "@types/react" "^16"
 
-"@types/react-infinite-scroller@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.1.tgz#1cd747ef8f50d3c883e375c0491a906e5436fcb2"
-  integrity sha512-64bpbqdSgtmy1zSZ2AQoFzguwZO7TyKjqJRTEnfNMCAQbnrX90kz+rYufZyY9CmzhwpXMwRO8xR9fMQnbYUkgQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/[email protected]":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -16457,13 +16450,6 @@ [email protected]:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
 
-react-infinite-scroller@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
-  integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-inlinesvg@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-1.2.0.tgz#fa63bda004ed941449a034574269ad4819cdbc8d"
@@ -16663,6 +16649,11 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized-auto-sizer@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
+  integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
+
 [email protected]:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"