add GLIP Token List

src/components/card.js

@@ -5,7 +5,6 @@ import styled from 'styled-components'
 const StyledCard = styled(Link)`
   border-radius: 8px;
   padding: 1.5rem;
-  height: 264px;
   max-width: 172px;
   display: flex;
   justify-content: space-between;
@@ -22,7 +21,7 @@ const StyledCard = styled(Link)`
     max-width: initial;
   }
   @media screen and (max-width: 414px) {
-    width: 100%;
+    width: 320px;
     box-sizing: border-box;
   }
   :hover {
@@ -52,6 +51,10 @@ const TokensListed = styled.span`
   line-height: 150%;
 `
 
+const NameText = styled.h3`
+  word-wrap: break-word;
+`
+
 function getLogoURL(logoURI) {
   if (logoURI?.startsWith('ipfs://')) {
     return `https://ipfs.io/ipfs/${logoURI.split('//')[1]}`
@@ -77,7 +80,7 @@ export default function Card({ id, list, name }) {
         }}
       />
       <section>
-        <h3>{actualName}</h3>
+        <NameText>{actualName}</NameText>
         <TokensListed>
           {list?.tokens?.length > 0 ? `${list.tokens.length} tokens` : list === null ? 'Error' : 'Loading...'}
         </TokensListed>

src/components/hero.js

@@ -93,6 +93,9 @@ export default function Header() {
       >
         {'->'} Make your own
       </HoverLink>
+      <HoverLink target="_blank" rel="noopener noreferrer" href="https://github.com/Uniswap/token-list-bridge-utils">
+        {'->'} Convert to multi-chain list
+      </HoverLink>
       <HoverLink target="_blank" rel="noopener noreferrer" href="http://community.tokenlists.org/">
         {'->'} Community
       </HoverLink>

src/components/list-tokens.js

@@ -2,6 +2,7 @@ import React, { useState, memo } from 'react'
 import styled from 'styled-components'
 import Search from './search'
 import CopyHelper from './copy'
+import { lookUpchain, lookupScanner } from '../utils/getChainId'
 
 import { toChecksumAddress } from 'ethereumjs-util'
 import FilterResults from 'react-filter-search'
@@ -10,7 +11,7 @@ const TokenItem = styled.section`
   display: grid;
   max-width: 960px;
   grid-gap: 1rem;
-  grid-template-columns: 1fr 128px 96px 148px;
+  grid-template-columns: 1fr 100px 120px 96px 148px;
   margin-bottom: 1rem;
   a {
     color: #131313;
@@ -73,7 +74,21 @@ const TokenAddress = styled.span`
   align-items: center;
 `
 
+const Chain = styled.span`
+  display: grid;
+  grid-template-columns: auto 16px;
+  grid-gap: 0.5rem;
+  height: fit-content;
+  align-items: center;
+  @media screen and (max-width: 960px) {
+    display: none;
+  }
+`
+
 export const ListItem = memo(function ListItem({ token }) {
+  const scanner = lookupScanner(token.chainId); 
+  const tokenAddress = toChecksumAddress(token.address); 
+  const scannerUrl = scanner == "" ? "" : scanner + tokenAddress; 
   return (
     <TokenItem>
       <TokenInfo>
@@ -96,11 +111,12 @@ export const ListItem = memo(function ListItem({ token }) {
         />
 
         <span className="hide-small">
-          <a style={{ textAlign: 'right' }} href={`https://etherscan.io/address/${toChecksumAddress(token.address)}`}>
+          <a style={{ textAlign: 'right' }} href={scannerUrl}>
             {token.name}
           </a>
         </span>
       </TokenInfo>
+      <Chain>{lookUpchain(token.chainId)}</Chain>
       <span>{token.symbol}</span>
       <TokenTagWrapper className="hide-small">
         {token?.tags?.length > 0 && (
@@ -111,8 +127,8 @@ export const ListItem = memo(function ListItem({ token }) {
         )}
       </TokenTagWrapper>
       <TokenAddress>
-        <a style={{ textAlign: 'right' }} href={`https://etherscan.io/address/${toChecksumAddress(token.address)}`}>
-          {`${toChecksumAddress(token.address)?.slice(0, 6)}...${toChecksumAddress(token.address)?.slice(38, 42)}`}
+        <a style={{ textAlign: 'right' }} href={scannerUrl}>
+          {`${tokenAddress?.slice(0, 6)}...${tokenAddress?.slice(38, 42)}`}
         </a>
         <CopyHelper toCopy={token.address} />
       </TokenAddress>
@@ -148,7 +164,7 @@ const ListTitle = styled.div`
   display: grid;
   max-width: 960px;
   grid-gap: 1rem;
-  grid-template-columns: 1fr 128px 96px 148px;
+  grid-template-columns: 1fr 100px 120px 96px 148px;
   margin-bottom: 1rem;
   @media screen and (max-width: 414px) {
     display: none;
@@ -166,6 +182,10 @@ const ListHeader = styled.div`
 
 export default function Tokens({ tokens }) {
   const [value, setValue] = useState('')
+  const sortedTokens = tokens.sort((a,b) =>{ 
+    return a.symbol > b.symbol ? 1 : 
+      a.symbol < b.symbol ? -1 : 0; 
+  })
 
   function handleChange(e) {
     const { value } = e.target
@@ -182,17 +202,17 @@ export default function Tokens({ tokens }) {
       <TokenWrapper>
         <ListTitle>
           <p className="hide-small">Name</p>
+          <p className="hide-small">Chain</p>
           <p className="hide-small">Symbol</p>
           <p className="hide-small">Tags</p>
-
           <p className="hide-small" style={{ textAlign: 'right' }}>
             Address
           </p>
         </ListTitle>
 
         <FilterResults
           value={value}
-          data={tokens}
+          data={sortedTokens}
           renderResults={(results) =>
             results.length === 0 ? 'None found!' : results.map((data, i) => <ListItem key={i} token={data} />)
           }

src/token-lists.json

@@ -11,6 +11,10 @@
     "name": "Agora dataFi Tokens",
     "homepage": ""
   },
+  "https://raw.githubusercontent.com/The-Blockchain-Association/sec-notice-list/master/ba-sec-list.json": {
+    "name": "Blockchain Association SEC Non Compliant List",
+    "homepage": ""
+  },
   "defi.cmc.eth": {
     "name": "CMC DeFi",
     "homepage": ""
@@ -79,6 +83,10 @@
     "name": "Opyn Token List",
     "homepage": ""
   },
+  "https://static.optimism.io/optimism.tokenlist.json": {
+    "name": "Optimism",
+    "homepage": "https://optimism.io/"
+  },
   "https://app.tryroll.com/tokens.json": {
     "name": "Roll Social Money",
     "homepage": ""
@@ -95,7 +103,11 @@
     "name": "Testnet Tokens",
     "homepage": ""
   },
-  "https://gateway.ipfs.io/ipns/tokens.uniswap.org": {
+  "list.tkn.eth": {
+    "name": "TokenDao",
+    "homepage": "https://tkn.eth.limo"
+  },
+  "https://ipfs.io/ipns/tokens.uniswap.org": {
     "name": "Uniswap Default List",
     "homepage": ""
   },
@@ -111,6 +123,10 @@
     "name": "Wrapped Tokens",
     "homepage": ""
   },
+  "https://yearn.science/static/tokenlist.json": {
+    "name": "Yearn",
+    "homepage": "https://yearn.finance/"
+  },
   "https://zapper.fi/api/token-list": {
     "name": "Zapper Token List",
     "homepage": ""

src/utils/chain_list.json

@@ -0,0 +1 @@
+{"1":"Ethereum","2":"Expanse Network","3":"Ropsten","4":"Rinkeby","5":"Görli","6":"Ethereum Classic Testnet Kotti","7":"ThaiChain","8":"Ubiq","9":"Ubiq Network Testnet","10":"Optimism","11":"Metadium Mainnet","12":"Metadium Testnet","13":"Diode Testnet Staging","14":"Flare Mainnet","15":"Diode Prenet","16":"Flare Testnet Coston","17":"ThaiChain 2.0 ThaiFi","18":"ThunderCore Testnet","19":"Songbird Canary-Network","20":"Elastos Smart Chain","21":"ELA-ETH-Sidechain Testnet","22":"ELA-DID-Sidechain Mainnet","23":"ELA-DID-Sidechain Testnet","24":"Dithereum Mainnet","25":"Cronos Mainnet Beta","26":"Genesis L1 testnet","27":"ShibaChain","28":"Boba Network Rinkeby Testnet","29":"Genesis L1","30":"RSK Mainnet","31":"RSK Testnet","32":"GoodData Testnet","33":"GoodData Mainnet","34":"Dithereum Testnet","35":"TBWG Chain","38":"Valorbit","40":"Telos EVM Mainnet","41":"Telos EVM Testnet","42":"Kovan","43":"Darwinia Pangolin Testnet","44":"Darwinia Crab Network","45":"Darwinia Pangoro Testnet","50":"XinFin Network Mainnet","51":"XinFin Apothem Testnet","52":"CoinEx Smart Chain Mainnet","53":"CoinEx Smart Chain Testnet","54":"Openpiece Mainnet","55":"Zyx Mainnet","56":"Binance Smart Chain Mainnet","57":"Syscoin Mainnet","58":"Ontology Mainnet","59":"EOS Mainnet","60":"GoChain","61":"Ethereum Classic Mainnet","62":"Ethereum Classic Testnet Morden","63":"Ethereum Classic Testnet Mordor","64":"Ellaism","65":"OKExChain Testnet","66":"OKXChain Mainnet","67":"DBChain Testnet","68":"SoterOne Mainnet","69":"Optimism Kovan","70":"Hoo Smart Chain","71":"Conflux eSpace (Testnet)","74":"IDChain Mainnet","76":"Mix","77":"POA Network Sokol","78":"PrimusChain mainnet","79":"Zenith Mainnet","80":"GeneChain","81":"Zenith Testnet (Vilnius)","82":"Meter Mainnet","83":"Meter Testnet","85":"GateChain Testnet","86":"GateChain Mainnet","87":"Nova Network","88":"TomoChain","89":"TomoChain Testnet","90":"Garizon Stage0","91":"Garizon Stage1","92":"Garizon Stage2","93":"Garizon Stage3","95":"CryptoKylin Testnet","96":"NEXT Smart Chain","97":"Binance Smart Chain Testnet","99":"POA Network Core","100":"Gnosis","101":"EtherInc","102":"Web3Games Testnet","105":"Web3Games Devnet","106":"Velas EVM Mainnet","107":"Nebula Testnet","108":"ThunderCore Mainnet","110":"Proton Testnet","111":"EtherLite Chain","122":"Fuse Mainnet","123":"Fuse Sparknet","124":"Decentralized Web Mainnet","125":"OYchain Testnet","126":"OYchain Mainnet","127":"Factory 127 Mainnet","128":"Huobi ECO Chain Mainnet","137":"Polygon Mainnet","141":"Openpiece Testnet","142":"DAX CHAIN","162":"Lightstreams Testnet","163":"Lightstreams Mainnet","168":"AIOZ Network","170":"HOO Smart Chain Testnet","172":"Latam-Blockchain Resil Testnet","186":"Seele Mainnet","188":"BMC Mainnet","189":"BMC Testnet","199":"BitTorrent Chain Mainnet","200":"Arbitrum on xDai","211":"Freight Trust Network","218":"SoterOne Mainnet old","222":"Permission","225":"LACHAIN Mainnet","226":"LACHAIN Testnet","239":"Aitd Testnet","246":"Energy Web Chain","250":"Fantom Opera","256":"Huobi ECO Chain Testnet","258":"Setheum","262":"SUR Blockchain Network","269":"High Performance Blockchain","288":"Boba Network","300":"Optimism on Gnosis Chain","321":"KCC Mainnet","322":"KCC Testnet","333":"Web3Q Mainnet","335":"DFK Chain Test","336":"Shiden","338":"Cronos Testnet","361":"Theta Mainnet","363":"Theta Sapphire Testnet","364":"Theta Amber Testnet","365":"Theta Testnet","369":"PulseChain Mainnet","385":"Lisinski","420":"Optimistic Ethereum Testnet Goerli","499":"Rupaya","512":"Double-A Chain Mainnet","513":"Double-A Chain Testnet","534":"Candle Mainnet","555":"Vela1 Chain Mainnet","558":"Tao Network","588":"Metis Stardust Testnet","592":"Astar","595":"Acala Mandala Testnet","596":"Karura Network Testnet","597":"Acala Network Testnet","600":"Meshnyan testnet","666":"Pixie Chain Testnet","686":"Karura Network","700":"Star Social Testnet","707":"BlockChain Station Mainnet","708":"BlockChain Station Testnet","721":"Factory 127 Testnet","776":"OpenChain Testnet","777":"cheapETH","787":"Acala Network","788":"Aerochain Testnet","803":"Haic","820":"Callisto Mainnet","821":"Callisto Testnet","880":"Ambros Chain Mainnet","888":"Wanchain","900":"Garizon Testnet Stage0","901":"Garizon Testnet Stage1","902":"Garizon Testnet Stage2","903":"Garizon Testnet Stage3","940":"PulseChain Testnet","941":"PulseChain Testnet v2b","942":"PulseChain Testnet v3","977":"Nepal Blockchain Network","998":"Lucky Network","999":"Wanchain Testnet","1001":"Klaytn Testnet Baobab","1007":"Newton Testnet","1008":"Eurus Mainnet","1010":"Evrice Network","1012":"Newton","1022":"Sakura","1023":"Clover Testnet","1024":"CLV Parachain","1028":"BitTorrent Chain Testnet","1030":"Conflux eSpace","1088":"Metis Andromeda Mainnet","1139":"MathChain","1140":"MathChain Testnet","1197":"Iora Chain","1201":"Evanesco Testnet","1202":"World Trade Technical Chain Mainnet","1213":"Popcateum Mainnet","1214":"EnterChain Mainnet","1280":"HALO Mainnet","1284":"Moonbeam","1285":"Moonriver","1286":"Moonrock old","1287":"Moonbase Alpha","1288":"Moonrock","1337":"CENNZnet old","1506":"Sherpax Mainnet","1507":"Sherpax Testnet","1618":"Catecoin Chain Mainnet","1620":"Atheios","1657":"Btachain","1688":"LUDAN Mainnet","1819":"Cube Chain Testnet","1856":"Teslafunds","1898":"BON Network","1984":"Eurus Testnet","1987":"EtherGem","2001":"Milkomeda C1 Mainnet","2008":"CloudWalk Testnet","2009":"CloudWalk Mainnet","2020":"420coin","2021":"Edgeware Mainnet","2022":"Beresheet Testnet","2023":"Taycan Testnet","2025":"Rangers Protocol Mainnet","2100":"Ecoball Mainnet","2101":"Ecoball Testnet Espuma","2152":"Findora Mainnet","2153":"Findora Testnet","2213":"Evanesco Mainnet","2221":"Kava EVM Testnet","2223":"VChain Mainnet","2559":"Kortho Mainnet","2569":"TechPay Mainnet","2612":"EZChain C-Chain Mainnet","2613":"EZChain C-Chain Testnet","3000":"Echelon","3001":"CENNZnet Nikau","3331":"ZCore Testnet","3333":"Web3Q Testnet","3334":"Web3Q Galileo","3400":"Paribu Net Mainnet","3500":"Paribu Net Testnet","3690":"Bittex Mainnet","3966":"DYNO Mainnet","3967":"DYNO Testnet","4002":"Fantom Testnet","4102":"AIOZ Network Testnet","4181":"PHI Network","4689":"IoTeX Network Mainnet","4690":"IoTeX Network Testnet","4918":"Venidium Testnet","5197":"EraSwap Mainnet","5315":"Uzmi Network Mainnet","5551":"Nahmii Mainnet","5553":"Nahmii Testnet","5700":"Syscoin Tanenbaum Testnet","5777":"Digest Swarm Chain","5851":"Ontology Testnet","5869":"Wegochain Rubidium Mainnet","6626":"Pixie Chain Mainnet","7341":"Shyft Mainnet","7878":"Hazlor Testnet","8000":"Teleport","8001":"Teleport Testnet","8029":"MDGL Testnet","8080":"GeneChain Adenine Testnet","8217":"Klaytn Mainnet Cypress","8285":"KorthoTest","8723":"TOOL Global Mainnet","8724":"TOOL Global Testnet","8888":"Ambros Chain Testnet","8898":"Mammoth Mainnet","8995":"bloxberg","9000":"Evmos Testnet","9001":"Evmos","9100":"Genesis Coin","9527":"Rangers Protocol Testnet Robin","9999":"myOwn Testnet","10000":"Smart Bitcoin Cash","10001":"Smart Bitcoin Cash Testnet","10101":"Blockchain Genesis Mainnet","10823":"CryptoCoinPay","10946":"Quadrans Blockchain","10947":"Quadrans Blockchain Testnet","11111":"WAGMI","11437":"Shyft Testnet","12051":"Singularity ZERO Testnet","12052":"Singularity ZERO Mainnet","13381":"Phoenix Mainnet","16000":"MetaDot Mainnet","16001":"MetaDot Testnet","19845":"BTCIX Network","21337":"CENNZnet Azalea","21816":"omChain Mainnet","22023":"Taycan","24484":"Webchain","24734":"MintMe.com Coin","26863":"OasisChain Mainnet","30067":"Piece testnet","31102":"Ethersocial Network","31337":"GoChain Testnet","32520":"Bitgert Mainnet","32659":"Fusion Mainnet","39797":"Energi Mainnet","42069":"pegglecoin","42161":"Arbitrum One","42220":"Celo Mainnet","42261":"Emerald Paratime Testnet","42262":"Emerald Paratime Mainnet","43110":"Athereum","43113":"Avalanche Fuji Testnet","43114":"Avalanche C-Chain","44787":"Celo Alfajores Testnet","45000":"Autobahn Network","47805":"REI Network","49797":"Energi Testnet","53935":"DFK Chain","55555":"REI Chain Mainnet","55556":"REI Chain Testnet","60000":"Thinkium Testnet Chain 0","60001":"Thinkium Testnet Chain 1","60002":"Thinkium Testnet Chain 2","60103":"Thinkium Testnet Chain 103","62320":"Celo Baklava Testnet","62621":"MultiVAC Mainnet","63000":"eCredits Mainnet","63001":"eCredits Testnet","69420":"Condrieu","70000":"Thinkium Mainnet Chain 0","70001":"Thinkium Mainnet Chain 1","70002":"Thinkium Mainnet Chain 2","70103":"Thinkium Mainnet Chain 103","71393":"Polyjuice Testnet","71401":"Godwoken Testnet (V1.1)","71402":"Godwoken Mainnet","73799":"Energy Web Volta Testnet","78110":"Firenze test network","80001":"Mumbai","99998":"UB Smart Chain(testnet)","99999":"UB Smart Chain","100000":"QuarkChain Mainnet Root","100001":"QuarkChain Mainnet Shard 0","100002":"QuarkChain Mainnet Shard 1","100003":"QuarkChain Mainnet Shard 2","100004":"QuarkChain Mainnet Shard 3","100005":"QuarkChain Mainnet Shard 4","100006":"QuarkChain Mainnet Shard 5","100007":"QuarkChain Mainnet Shard 6","100008":"QuarkChain Mainnet Shard 7","108801":"BROChain Mainnet","110000":"QuarkChain Devnet Root","110001":"QuarkChain Devnet Shard 0","110002":"QuarkChain Devnet Shard 1","110003":"QuarkChain Devnet Shard 2","110004":"QuarkChain Devnet Shard 3","110005":"QuarkChain Devnet Shard 4","110006":"QuarkChain Devnet Shard 5","110007":"QuarkChain Devnet Shard 6","110008":"QuarkChain Devnet Shard 7","200101":"Milkomeda C1 Testnet","200625":"Akroma","201018":"Alaya Mainnet","201030":"Alaya Dev Testnet","210425":"PlatON Mainnet","234666":"Haymo Testnet","246529":"ARTIS sigma1","246785":"ARTIS Testnet tau1","281121":"Social Smart Chain Mainnet","333888":"Polis Testnet","333999":"Polis Mainnet","421611":"Arbitrum Rinkeby","432201":"Dexalot Testnet","444900":"Weelink Testnet","474142":"OpenChain Mainnet","512512":"CMP-Testnet","666666":"Vision - Vpioneer Test Chain","888888":"Vision - Mainnet","955305":"Eluvio Content Fabric","1313114":"Etho Protocol","1313500":"Xerom","1337702":"Kintsugi","1337802":"Kiln","2203181":"PlatON Dev Testnet","7762959":"Musicoin","11155111":"Sepolia","13371337":"PepChain Churchill","18289463":"IOLite","20180430":"SmartMesh Mainnet","20181205":"quarkblockchain","28945486":"Auxilium Network Mainnet","35855456":"Joys Digital Mainnet","61717561":"Aquachain","99415706":"Joys Digital TestNet","192837465":"Gather Mainnet Network","245022926":"Neon EVM DevNet","245022934":"Neon EVM MainNet","245022940":"Neon EVM TestNet","311752642":"OneLedger Mainnet","356256156":"Gather Testnet Network","486217935":"Gather Devnet Network","1122334455":"IPOS Network","1313161554":"Aurora Mainnet","1313161555":"Aurora Testnet","1313161556":"Aurora Betanet","1666600000":"Harmony Mainnet Shard 0","1666600001":"Harmony Mainnet Shard 1","1666600002":"Harmony Mainnet Shard 2","1666600003":"Harmony Mainnet Shard 3","1666700000":"Harmony Testnet Shard 0","1666700001":"Harmony Testnet Shard 1","1666700002":"Harmony Testnet Shard 2","1666700003":"Harmony Testnet Shard 3","2021121117":"DataHopper","3125659152":"Pirl","4216137055":"OneLedger Testnet Frankenstein","11297108099":"Palm Testnet","11297108109":"Palm","197710212030":"Ntity Mainnet","197710212031":"Haradev Testnet","6022140761023":"Molereum Network","868455272153094":"Godwoken Testnet (V1)"}

src/utils/getChainId.ts

@@ -0,0 +1,42 @@
+//TODO: Should probably make this dynamic
+// const list =  require("./chain_list.json"); 
+import list from "./chain_list.json"; 
+const typedList : any = list; 
+
+export function lookUpchain(chainId: string) {
+    return typedList[chainId] || chainId; 
+}
+
+export function lookupScanner(chainId: number) {
+    switch(chainId) {
+        // Mainnet
+        case 1: 
+            return "https://etherscan.io/address/"; 
+        // Polygon
+        case 137: 
+            return "https://polygonscan.com/address/"; 
+        // Rinkeby
+        case 4:
+            return "https://rinkeby.etherscan.io/address/"; 
+        // Kovan
+        case 42: 
+            return "https://kovan.etherscan.io/address/"; 
+        // goerli
+        case 420: 
+            return "https://goerli.etherscan.io/address/"; 
+        // ropsten
+        case 3: 
+            return "https://ropsten.etherscan.io/address/"; 
+        // arbitrum
+        case 42161: 
+            return "https://arbiscan.io/address/"; 
+        // Optimism
+        case 10:
+            return "https://optimistic.etherscan.io/address/";
+        // Optimistic Kovan
+        case 69: 
+            return "https://kovan-optimistic.etherscan.io/address/"
+        default:
+            return "" ;
+    }
+}