fix(list popup): big token list updates scroll issue (#1219)

src/components/Popups/ListUpdatePopup.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo } from 'react'
 import ReactGA from 'react-ga'
 import { useDispatch } from 'react-redux'
 import { Text } from 'rebass'
+import styled from 'styled-components'
 import { AppDispatch } from '../../state'
 import { useRemovePopup } from '../../state/application/hooks'
 import { acceptListUpdate } from '../../state/lists/actions'
@@ -12,6 +13,11 @@ import { ButtonSecondary } from '../Button'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
 
+export const ChangesList = styled.ul`
+  max-height: 400px;
+  overflow: auto;
+`
+
 export default function ListUpdatePopup({
   popKey,
   listUrl,
@@ -64,7 +70,7 @@ export default function ListUpdatePopup({
                 An update is available for the token list "{oldList.name}" (
                 {listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
               </Text>
-              <ul>
+              <ChangesList>
                 {tokensAdded.length > 0 ? (
                   <li>
                     {tokensAdded.map((token, i) => (
@@ -88,7 +94,7 @@ export default function ListUpdatePopup({
                   </li>
                 ) : null}
                 {numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
-              </ul>
+              </ChangesList>
             </div>
             <AutoRow>
               <div style={{ flexGrow: 1, marginRight: 12 }}>