feat: initial bnbchainlist

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: GitHub Pages deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2.3.1
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: create env file
+        run: |
+          touch .env
+          echo ON_GITHUB_PAGES=${{ secrets.ON_GITHUB_PAGES }} >> .env
+
+      - name: Installing my packages
+        run: npm ci
+
+      - name: Build my App
+        run: npm run build && npm run export && touch ./out/.nojekyll
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@4.1.0
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: out # The folder the action should deploy.

components/chain/chain.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { Typography, Paper, Button, Tooltip, withStyles } from '@material-ui/core';
+import { useRouter } from 'next/router';
 import classes from './chain.module.css';
 import stores, { useAccount, useChain } from '../../stores/index.js';
 import { ACCOUNT_CONFIGURED } from '../../stores/constants';
-import Image from 'next/image';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import RPCList from '../RPCList';
 import { addToNetwork, renderProviderText } from '../../utils';
@@ -17,6 +17,7 @@ const ExpandButton = withStyles((theme) => ({
 }))(Button);
 
 export default function Chain({ chain }) {
+  const router = useRouter();
   const account = useAccount((state) => state.account);
   const setAccount = useAccount((state) => state.setAccount);
 
@@ -37,7 +38,7 @@ export default function Chain({ chain }) {
   }, []);
 
   const icon = useMemo(() => {
-    return chain.chainSlug ? `https://defillama.com/chain-icons/rsz_${chain.chainSlug}.jpg` : '/unknown-logo.png';
+    return chain.chainSlug ? `${router.basePath}/images/rsz_${chain.chainSlug}.svg` : '/unknown-logo.png';
   }, [chain]);
 
   const chainId = useChain((state) => state.id);
@@ -61,12 +62,8 @@ export default function Chain({ chain }) {
     <>
       <Paper elevation={1} className={classes.chainContainer} key={chain.chainId}>
         <div className={classes.chainNameContainer}>
-          <Image
+          <img
             src={icon}
-            onError={(e) => {
-              e.target.onerror = null;
-              e.target.src = '/chains/unknown-logo.png';
-            }}
             width={28}
             height={28}
             className={classes.avatar}

components/chain/chain.module.css

@@ -26,7 +26,7 @@
 }
 
 .avatar {
-  margin-right: 24px;
+  margin-right: 0;
   border-radius: 50%;
 }
 

components/chains.js

@@ -1,58 +1,5 @@
 export const chainIds = {
-    '0': 'kardia',
-    '1': 'ethereum',
-    '8': 'ubiq',
-    '10': 'optimism',
-    '19': 'songbird',
-    '20': 'elastos',
-    '25': 'cronos',
-    '30': 'rsk',
-    '40': 'telos',
-    '52': 'csc',
-    '55': 'zyx',
-    '56': 'binance',
-    '57': 'syscoin',
-    '60': 'gochain',
-    '61': 'ethclassic',
-    '66': 'okexchain',
-    '70': 'hoo',
-    '82': 'meter',
-    '88': 'tomochain',
-    '100': 'xdai',
-    '106': 'velas',
-    '108': 'thundercore',
-    '122': 'fuse',
-    '128': 'heco',
-    '137': 'polygon',
-    '200': 'xdaiarb',
-    '246': 'energyweb',
-    '250': 'fantom',
-    '269': 'hpb',
-    '288': 'boba',
-    '321': 'kucoin',
-    '336': 'shiden',
-    '361': 'theta',
-    '592': 'astar',
-    '820': 'callisto',
-    '888': 'wanchain',
-    '1088': 'metis',
-    '1284': 'moonbeam',
-    '1285': 'moonriver',
-    '2020': 'ronin',
-    '4689': 'iotex',
-    '5050': 'xlc',
-    '5551': 'nahmii',
-    '8217': 'klaytn',
-    '10000': 'smartbch',
-    '32659': 'fusion',
-    '42161': 'arbitrum',
-    '42220': 'celo',
-    '42262': 'oasis',
-    '43114': 'avalanche',
-    '71394': 'godwoken',
-    '333999': 'polis',
-    '1313161554': 'aurora',
-    '1666600000': 'harmony',
-    '11297108109': 'palm',
-    '836542336838601': 'curio'
+    '56': 'bnbchain',
+    '97': 'bnbchain',
+    '117': 'bas',
 }

components/header/header.js

@@ -71,7 +71,7 @@ const searchTheme = createTheme({
   palette: {
     type: 'light',
     primary: {
-      main: '#2F80ED',
+      main: '#f0b90b',
     },
   },
   shape: {
@@ -122,7 +122,7 @@ const searchTheme = createTheme({
 const TestnetSwitch = withStyles({
   switchBase: {
     '&$checked': {
-      color: '#2f80ed',
+      color: '#f0b90b',
     },
   },
   checked: {},
@@ -192,7 +192,7 @@ function Header(props) {
       handleSearch('');
     }
   }, [debouncedSearchTerm]);
-  
+
   const router = useRouter();
   useEffect(()=>{
     if (!router.isReady) return;
@@ -211,7 +211,7 @@ function Header(props) {
               fullWidth
               className={classes.searchContainer}
               variant="outlined"
-              placeholder="ETH, Fantom, ..."
+              placeholder=""
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               InputProps={{

components/snackbar/snackbarController.jsx

@@ -29,7 +29,7 @@ class SnackbarController extends Component {
     }
   }
 
-  componentWillMount() {
+  componentDidMount() {
     emitter.on(ERROR, this.showError);
     emitter.on(TX_SUBMITTED, this.showHash);
   }

components/unlock/unlock.js

@@ -21,6 +21,7 @@ import {
 } from '../../stores/constants'
 
 import stores from '../../stores'
+import { useRouter } from "next/router";
 
 const styles = theme => ({
   root: {
@@ -158,7 +159,7 @@ function onDeactivateClicked(deactivate, connector) {
 }
 
 function MyComponent(props) {
-
+  const router = useRouter();
   const context = useWeb3React();
   const localContext = stores.accountStore.getStore('web3context');
   var localConnector = null;
@@ -207,38 +208,38 @@ function MyComponent(props) {
         let display = name;
         let descriptor = ''
         if (name === 'MetaMask') {
-          url = '/connectors/icn-metamask.svg'
+          url = `${router.basePath}/connectors/icn-metamask.svg`;
           descriptor= 'Connect to your MetaMask wallet'
         } else if (name === 'WalletConnect') {
-          url = '/connectors/walletConnectIcon.svg'
+          url = `${router.basePath}/connectors/walletConnectIcon.svg`
           descriptor= 'Scan with WalletConnect to connect'
         } else if (name === 'TrustWallet') {
-          url = '/connectors/trustWallet.png'
+          url = `${router.basePath}/connectors/trustWallet.png`
           descriptor= 'Connect to your TrustWallet'
         } else if (name === 'Portis') {
-          url = '/connectors/portisIcon.png'
+          url = `${router.basePath}/connectors/portisIcon.png`
           descriptor= 'Connect with your Portis account'
         } else if (name === 'Fortmatic') {
-          url = '/connectors/fortmaticIcon.png'
+          url = `${router.basePath}/connectors/fortmaticIcon.png`
           descriptor= 'Connect with your Fortmatic account'
         } else if (name === 'Ledger') {
-          url = '/connectors/icn-ledger.svg'
+          url = `${router.basePath}/connectors/icn-ledger.svg`
           descriptor= 'Connect with your Ledger Device'
         } else if (name === 'Squarelink') {
-          url = '/connectors/squarelink.png'
+          url = `${router.basePath}/connectors/squarelink.png`
           descriptor= 'Connect with your Squarelink account'
         } else if (name === 'Trezor') {
-          url = '/connectors/trezor.png'
+          url = `${router.basePath}/connectors/trezor.png`
           descriptor= 'Connect with your Trezor Device'
         } else if (name === 'Torus') {
-          url = '/connectors/torus.jpg'
+          url = `${router.basePath}/connectors/torus.jpg`
           descriptor= 'Connect with your Torus account'
         } else if (name === 'Authereum') {
-          url = '/connectors/icn-aethereum.svg'
+          url = `${router.basePath}/connectors/icn-aethereum.svg`
           descriptor= 'Connect with your Authereum account'
         } else if (name === 'WalletLink') {
           display = 'Coinbase Wallet'
-          url = '/connectors/coinbaseWalletIcon.svg'
+          url = `${router.basePath}/connectors/coinbaseWalletIcon.svg`
           descriptor= 'Connect to your Coinbase wallet'
         } else if (name === 'Frame') {
           return ''

next.config.js

@@ -1,7 +1,12 @@
+const {
+  ON_GITHUB_PAGES,
+} = process.env;
+
+const basePath = ON_GITHUB_PAGES ? '/bnbchainlist' : '';
+const assetPrefix = ON_GITHUB_PAGES ? '/bnbchainlist/' : '';
+
 module.exports = {
-    reactStrictMode: true,
-    images: {
-      domains: ['defillama.com'],
-    },
-  }
-
+  reactStrictMode: true,
+  basePath,
+  assetPrefix,
+}