576 ? 'space-between' : 'center'), alignItems: 'center' }}>
{Object.keys(connectorsByName).map(name => {
const currentConnector = connectorsByName[name];
const activating = currentConnector === activatingConnector;
const connected = (currentConnector === connector||currentConnector === localConnector);
const disabled =
!!activatingConnector || !!error;
let url;
let display = name;
let descriptor = ''
if (name === 'MetaMask') {
url = '/connectors/icn-metamask.svg'
descriptor= 'Connect to your MetaMask wallet'
} else if (name === 'WalletConnect') {
url = '/connectors/walletConnectIcon.svg'
descriptor= 'Scan with WalletConnect to connect'
} else if (name === 'TrustWallet') {
url = '/connectors/trustWallet.png'
descriptor= 'Connect to your TrustWallet'
} else if (name === 'Portis') {
url = '/connectors/portisIcon.png'
descriptor= 'Connect with your Portis account'
} else if (name === 'Fortmatic') {
url = '/connectors/fortmaticIcon.png'
descriptor= 'Connect with your Fortmatic account'
} else if (name === 'Ledger') {
url = '/connectors/icn-ledger.svg'
descriptor= 'Connect with your Ledger Device'
} else if (name === 'Squarelink') {
url = '/connectors/squarelink.png'
descriptor= 'Connect with your Squarelink account'
} else if (name === 'Trezor') {
url = '/connectors/trezor.png'
descriptor= 'Connect with your Trezor Device'
} else if (name === 'Torus') {
url = '/connectors/torus.jpg'
descriptor= 'Connect with your Torus account'
} else if (name === 'Authereum') {
url = '/connectors/icn-aethereum.svg'
descriptor= 'Connect with your Authereum account'
} else if (name === 'WalletLink') {
display = 'Coinbase Wallet'
url = '/connectors/coinbaseWalletIcon.svg'
descriptor= 'Connect to your Coinbase wallet'
} else if (name === 'Frame') {
return ''
}
return (
576 ? '12px 0px' : '0px') }}>
)
}) }
)
}
export default withStyles(styles)(Unlock);
================================================
FILE: components/unlock/unlockModal.js
================================================
import React, { Component } from "react";
import {
DialogContent,
Dialog,
Slide
} from '@material-ui/core';
import Unlock from './unlock.js';
function Transition(props) {
return ;
}
class UnlockModal extends Component {
render() {
const { closeModal, modalOpen } = this.props;
const fullScreen = window.innerWidth < 576;
return (
)
};
}
export default UnlockModal;
================================================
FILE: eslint.config.mjs
================================================
import jsonc from "eslint-plugin-jsonc";
import jsoncParser from "jsonc-eslint-parser";
export default [
{
files: ["chains.json"],
languageOptions: {
parser: jsoncParser,
},
plugins: {
jsonc,
},
rules: {
"jsonc/auto": "error",
"jsonc/comma-dangle": "error"
}
},
];
================================================
FILE: next.config.js
================================================
module.exports = {
// Use the CDN in production and localhost for development.
// assetPrefix: 'https://tp-lab.tokenpocket.pro/NetworkList/',
basePath: '',
}
================================================
FILE: package.json
================================================
{
"name": "networklist",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next export",
"build2": "next build && next export",
"start": "next start"
},
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"flux": "^4.0.1",
"next": "10.0.7",
"react": "17.0.1",
"react-dom": "17.0.1",
"swr": "^0.5.6",
"web3": "^1.3.4"
},
"devDependencies": {
"eslint-plugin-jsonc": "^2.16.0",
"jsonc-eslint-parser": "^2.4.0"
}
}
================================================
FILE: pages/_app.js
================================================
import React, { useState, useEffect } from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import SnackbarController from '../components/snackbar'
import stores from '../stores/index.js'
import {
CONFIGURE,
} from '../stores/constants'
import '../styles/globals.css'
import lightTheme from '../theme/light';
import darkTheme from '../theme/dark';
function MyApp({ Component, pageProps }) {
const [ themeConfig, setThemeConfig ] = useState(lightTheme);
const changeTheme = (dark) => {
setThemeConfig(dark ? darkTheme : lightTheme)
localStorage.setItem("yearn.finance-dark-mode", dark ? "dark" : "light");
}
useEffect(function() {
const localStorageDarkMode = window.localStorage.getItem(
"yearn.finance-dark-mode"
);
changeTheme(localStorageDarkMode ? localStorageDarkMode === "dark" : false);
}, []);
useEffect(function() {
stores.dispatcher.dispatch({ type: CONFIGURE })
},[]);
return (
)
}
export default MyApp
================================================
FILE: pages/_document.js
================================================
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
export default class MyDocument extends Document {
render() {
return (
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
================================================
FILE: pages/index.js
================================================
import React, { useState, useEffect } from 'react';
import Head from 'next/head'
import { useRouter } from 'next/router'
import styles from '../styles/Home.module.css'
import { withTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import path from 'path'
import {
Grid,
Typography,
Button,
TextField,
InputAdornment,
Paper
} from '@material-ui/core'
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import Chain from '../components/chain'
import MultiChain from '../components/multichain'
import Header from '../components/header'
import SearchIcon from '@material-ui/icons/Search';
import AppsIcon from '@material-ui/icons/Apps';
import ListIcon from '@material-ui/icons/List';
import AddIcon from '@material-ui/icons/Add';
import useSWR from 'swr'
import classes from './index.module.css'
// import data from '../chains.json'
const searchTheme = createMuiTheme({
palette: {
type: 'light',
primary: {
main: '#2F80ED',
},
},
shape: {
borderRadius: '10px'
},
typography: {
fontFamily: [
'Inter',
'Arial',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
body1: {
fontSize: '12px'
}
},
overrides: {
MuiPaper: {
elevation1: {
"box-shadow": '0px 7px 7px #0000000A;',
"-webkit-box-shadow": '0px 7px 7px #0000000A;',
"-moz-box-shadow": '0px 7px 7px #0000000A;',
}
},
MuiInputBase: {
input: {
fontSize: '14px'
},
},
MuiOutlinedInput: {
input: {
padding: '12.5px 14px'
},
notchedOutline: {
borderColor: "#FFF",
}
},
},
});
const fetcher = (...args) => fetch(...args).then(res => res.json())
function Home({ changeTheme, theme }) {
const { data, error } = useSWR('https://tp-statics.tokenpocket.pro/chains.json', fetcher)
const [layout, setLayout] = useState('grid')
const [search, setSearch] = useState('')
const [hideMultichain, setHideMultichain] = useState('1')
const router = useRouter()
if (router.query.search) {
setSearch(router.query.search)
delete router.query.search
}
const onSearchChanged = (event) => {
setSearch(event.target.value)
}
const handleLayoutChanged = (event, newVal) => {
if (newVal !== null) {
setLayout(newVal)
localStorage.setItem('yearn.finance-invest-layout', newVal ? newVal : '')
}
}
const addNetwork = () => {
window.open('https://github.com/TP-Lab/networklist-org/', '_blank')
}
const closeMultichain = (perma) => {
setHideMultichain('1')
localStorage.setItem('chainlist.org-hideMultichain', perma ? '1' : '0')
}
useEffect(() => {
const multi = localStorage.getItem('chainlist.org-hideMultichain')
if (multi) {
setHideMultichain(multi)
} else {
setHideMultichain('0')
}
}, [])
return (
Chainlist
ChainlistHelping users connect to EVM powered networksChainlist is a list of EVM networks. Users can use the information to connect their wallets and Web3 middleware providers to the appropriate Chain ID and Network ID to connect to the correct chain.
}
>
Add Your Network
{
// e.target.onerror = null;
// e.target.src = "/chains/unknown-logo.png";
// }}
src="/chains/unknown-logo.png"
width={28}
height={28}
className={classes.avatar}
/>
