Add coingecko and tweak list introduction screen

src/components/SearchModal/ListIntroduction.tsx

@@ -5,18 +5,30 @@ import { ButtonPrimary } from '../Button'
 import { OutlineCard } from '../Card'
 import Column, { AutoColumn } from '../Column'
 import { PaddedColumn } from './styleds'
+import { useDarkModeManager } from '../../state/user/hooks'
+
+import listLight from '../../assets/images/token-list/lists-light.png'
+import listDark from '../../assets/images/token-list/lists-dark.png'
 
 export default function ListIntroduction({ onSelectList }: { onSelectList: () => void }) {
+  const [isDark] = useDarkModeManager()
+
   return (
     <Column style={{ width: '100%', flex: '1 1' }}>
       <PaddedColumn>
         <AutoColumn gap="14px">
-          <Text fontWeight={600} fontSize={20}>
-            Token Lists
-          </Text>
-          <Text style={{ marginBottom: '8px' }}>
-            You can switch between lists of tokens, as well as add your own custom lists via IPFS, HTTPS and ENS.{' '}
-            <i>Start by choosing a list.</i>
+          <img
+            style={{ width: '120px', margin: '0 auto' }}
+            src={isDark ? listDark : listLight}
+            alt="token-list-preview"
+          />
+          <img
+            style={{ width: '100%', borderRadius: '12px' }}
+            src="https://cloudflare-ipfs.com/ipfs/QmRf1rAJcZjV3pwKTHfPdJh4RxR8yvRHkdLjZCsmp7T6hA"
+            alt="token-list-preview"
+          />
+          <Text style={{ marginBottom: '8px', textAlign: 'center' }}>
+            Uniswap now supports token lists. You can add your own custom lists via IPFS, HTTPS and ENS.{' '}
           </Text>
           <ButtonPrimary onClick={onSelectList} id="list-introduction-choose-a-list">
             Choose a list

src/constants/lists.ts

@@ -11,6 +11,7 @@ export const DEFAULT_LIST_OF_LISTS: string[] = [
   'erc20.cmc.eth',
   'stablecoin.cmc.eth',
   'tokenlist.zerion.eth',
+  'https://www.coingecko.com/tokens_list/uniswap/defi_100/v_0_0_0.json',
   'https://defiprime.com/defiprime.tokenlist.json',
   'https://umaproject.org/uma.tokenlist.json'
 ]