diff --git a/src/components/card.js b/src/components/card.js index 2452635..11fd9e5 100644 --- a/src/components/card.js +++ b/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 }) { }} />
-

{actualName}

+ {actualName} {list?.tokens?.length > 0 ? `${list.tokens.length} tokens` : list === null ? 'Error' : 'Loading...'} diff --git a/src/components/hero.js b/src/components/hero.js index 0e1bf80..99f87fd 100644 --- a/src/components/hero.js +++ b/src/components/hero.js @@ -93,6 +93,9 @@ export default function Header() { > {'->'} Make your own + + {'->'} Convert to multi-chain list + {'->'} Community diff --git a/src/components/list-tokens.js b/src/components/list-tokens.js index f669a8f..0072241 100644 --- a/src/components/list-tokens.js +++ b/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 ( @@ -96,11 +111,12 @@ export const ListItem = memo(function ListItem({ token }) { /> - + {token.name} + {lookUpchain(token.chainId)} {token.symbol} {token?.tags?.length > 0 && ( @@ -111,8 +127,8 @@ export const ListItem = memo(function ListItem({ token }) { )} - - {`${toChecksumAddress(token.address)?.slice(0, 6)}...${toChecksumAddress(token.address)?.slice(38, 42)}`} + + {`${tokenAddress?.slice(0, 6)}...${tokenAddress?.slice(38, 42)}`} @@ -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,9 +202,9 @@ export default function Tokens({ tokens }) {

Name

+

Chain

Symbol

Tags

-

Address

@@ -192,7 +212,7 @@ export default function Tokens({ tokens }) { results.length === 0 ? 'None found!' : results.map((data, i) => ) } diff --git a/src/token-lists.json b/src/token-lists.json index 6631677..40b9867 100644 --- a/src/token-lists.json +++ b/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": "" diff --git a/src/utils/chain_list.json b/src/utils/chain_list.json new file mode 100644 index 0000000..a1daf2c --- /dev/null +++ b/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)"} \ No newline at end of file diff --git a/src/utils/getChainId.ts b/src/utils/getChainId.ts new file mode 100644 index 0000000..e56575e --- /dev/null +++ b/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 "" ; + } +} \ No newline at end of file