Merge pull request #80 from brave/virtualize-token-list

fix(swap): Virtualize Token List
brave · Oct 27, 2022 · 9f5ae50 · 9f5ae50
2 parents bed3cb4 + 355b3fa
commit 9f5ae50
Show file tree

Hide file tree

Showing 7 changed files with 277 additions and 22 deletions.
diff --git a/interface/package-lock.json b/interface/package-lock.json
diff --git a/interface/package.json b/interface/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@brave/swap-interface",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Brave Swap - an open-source swap interface by Brave, focussed on usability and multi-chain support.",
   "type": "module",
   "license": "MPL-2.0",
@@ -46,11 +46,14 @@
   },
   "dependencies": {
     "@brave/leo": "github:brave-experiments/leo",
+    "@brave/react-virtualized-auto-sizer": "^1.0.4",
+    "@types/react-window": "^1.8.2",
     "@types/styled-components": "^5.1.25",
     "bignumber.js": "^9.1.0",
     "ethereum-blockies": "github:brave/blockies",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-window": "^1.8.5",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {

diff --git a/interface/src/components/buttons/token-list-button.tsx b/interface/src/components/buttons/token-list-button.tsx
@@ -54,18 +54,18 @@ export const TokenListButton = (props: Props) => {
 }
 
 const Button = styled(StyledButton)`
-  background-color: ${p => p.theme.color.legacy.background01};
+  background-color: none;
   border-radius: 8px;
   justify-content: space-between;
   padding: 16px 8px;
   white-space: nowrap;
-  width: 100%;
+  width: calc(100% - 24px);
+  margin-left: 12px;
   :disabled {
     opacity: 0.3;
   }
   &:hover:not([disabled]) {
     box-shadow: var(--token-list-button-shadow);
-    z-index: 20px;
-    position: relative;
+    background-color: ${(p) => p.theme.color.legacy.background01};
   }
 `
diff --git a/interface/src/components/swap/select-token-modal.tsx b/interface/src/components/swap/select-token-modal.tsx
@@ -17,9 +17,10 @@ import Amount from '~/utils/amount'
 import CloseIcon from '~/assets/close-icon.svg'
 
 // Components
-import { StandardButton, TokenListButton } from '~/components/buttons'
+import { StandardButton } from '~/components/buttons'
 import { SearchWithNetworkSelector } from './search-with-network-selector'
 import { StandardModal } from '~/components/modals'
+import { VirtualizedTokenList } from './virtualized-tokens-list'
 
 // Styled Components
 import { Column, Row, Text, VerticalDivider, IconButton } from '~/components/shared.styles'
@@ -117,22 +118,18 @@ export const SelectTokenModal = React.forwardRef<HTMLDivElement, Props>(
         <VerticalDivider />
         <ScrollContainer
           columnWidth='full'
-          horizontalPadding={12}
           verticalAlign='flex-start'
           verticalPadding={8}
         >
-          {filteredTokenList.map(token => (
-            <TokenListButton
-              key={token.contractAddress}
-              onClick={onSelectToken}
-              balance={getAssetBalance(token)}
+          {filteredTokenList.length !== 0 && (
+            <VirtualizedTokenList
+              disabledToken={disabledToken}
+              getAssetBalance={getAssetBalance}
               isWalletConnected={isWalletConnected}
-              token={token}
-              disabled={
-                disabledToken ? disabledToken.contractAddress === token.contractAddress : false
-              }
+              onSelectToken={onSelectToken}
+              tokenList={filteredTokenList}
             />
-          ))}
+          )}
         </ScrollContainer>
         {showZeroBalanceButton && (
           <Button
@@ -160,6 +157,4 @@ const Button = styled(StandardButton)`
 
 const ScrollContainer = styled(Column)`
   flex: 1;
-  overflow-x: hidden;
-  overflow-y: scroll;
 `