Feature: add Ethereum to BSC Mainnet network switch

app/package.json

@@ -14,6 +14,7 @@
     "react-hook-form": "^7.6.6",
     "react-scripts": "4.0.3",
     "swr": "^0.5.6",
+    "@web3-react/injected-connector": "^6.0.7",
     "web-vitals": "^1.0.1",
     "web3": "^1.7.5"
   },

app/src/components/Header.js

@@ -5,9 +5,13 @@ import {blueGrey} from '@material-ui/core/colors'
 import logo from '../assets/images/logo.png'
 import {appTitle} from '../utils/config'
 import ConnectWallet from './ConnectWallet'
+import SwitchToBSCMainet from './SwitchToBSCMainet'
+import {useMetaMask} from 'metamask-react'
+
 
 function Header() {
   const classes = useStyles()
+  const {status, chainId, connect} = useMetaMask()
 
   return (
     <Box p={2} color="white" bgcolor={bgColor} className={classes.container}>
@@ -19,6 +23,7 @@ function Header() {
             </Link>
           </Typography>
           <ConnectWallet/>
+          {chainId != '0x38'? (<SwitchToBSCMainet/>): null}
         </Box>
       </Container>
     </Box>

app/src/components/SwitchToBSCMainet.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Button } from '@material-ui/core'
+import { InjectedConnector } from '@web3-react/injected-connector'
+
+import { BSC_MAINNET_PARAMS } from '../constants'
+
+const BSC_MAINNET_CHAIN_ID = 56
+
+export default function SwitchToBSCMainet({ chainId }) {
+  console.log(chainId)
+  const [open, setOpen] = React.useState(false)
+  const anchorRef = React.useRef(null)
+
+  async function switchToBSCNework() {
+    const abstractConnectorArgs = {
+      supportedChainIds: [BSC_MAINNET_CHAIN_ID],
+    }
+
+    const injectedConnector = new InjectedConnector(abstractConnectorArgs)
+    try {
+      const provider = await injectedConnector.getProvider()
+      await provider.request({
+        method: 'wallet_addEthereumChain',
+        params: [BSC_MAINNET_PARAMS],
+      })
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return (
+    <Button
+      onClick={async () => {
+        await switchToBSCNework()
+      }}
+      variant="contained"
+      color="secondary"
+    >
+      Switch to BSC Mainnet
+    </Button>
+  )
+}

app/src/constants.js

@@ -0,0 +1,11 @@
+export const BSC_MAINNET_PARAMS = {
+  chainId: "0x38", // 56
+  chainName: "BNB Smart Chain Mainnet",
+  nativeCurrency: {
+    name: "MATIC Token",
+    symbol: "BNB",
+    decimals: 18,
+  },
+  rpcUrls: ["https://bsc-dataseed.binance.org"],
+  blockExplorerUrls: ["https://bscscan.io/"],
+};