feat: Prompt to add BSC network to user wallet (#610)

src/hooks/useAuth.ts

@@ -1,8 +1,9 @@
 import { useCallback } from 'react'
-import { useWeb3React } from '@web3-react/core'
+import { useWeb3React, UnsupportedChainIdError } from '@web3-react/core'
 import { ConnectorNames } from '@pancakeswap-libs/uikit'
 import { useToast } from 'state/hooks'
 import { connectorsByName } from 'utils/web3React'
+import { setupNetwork } from 'utils/wallet'
 
 const useAuth = () => {
   const { activate, deactivate } = useWeb3React()
@@ -11,7 +12,16 @@ const useAuth = () => {
   const login = useCallback((connectorID: ConnectorNames) => {
     const connector = connectorsByName[connectorID]
     if (connector) {
-      activate(connector, (error: Error) => toastError(error.name, error.message))
+      activate(connector, async (error: Error) => {
+        if (error instanceof UnsupportedChainIdError) {
+          const hasSetup = await setupNetwork()
+          if (hasSetup) {
+            activate(connector)
+          }
+        } else {
+          toastError(error.name, error.message)
+        }
+      })
     } else {
       toastError("Can't find connector", 'The connector config is wrong')
     }

src/utils/getRpcUrl.ts

@@ -1,7 +1,7 @@
 import random from 'lodash/random'
 
 // Array of available nodes to connect to
-const nodes = [process.env.REACT_APP_NODE_1, process.env.REACT_APP_NODE_2, process.env.REACT_APP_NODE_3]
+export const nodes = [process.env.REACT_APP_NODE_1, process.env.REACT_APP_NODE_2, process.env.REACT_APP_NODE_3]
 
 const getNodeUrl = () => {
   const randomIndex = random(0, nodes.length - 1)

src/utils/wallet.ts

@@ -0,0 +1,37 @@
+import { nodes } from './getRpcUrl'
+
+export const setupNetwork = async () => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const provider = window.ethereum
+  if (provider) {
+    const chainId = parseInt(process.env.REACT_APP_CHAIN_ID, 10)
+    try {
+      await provider.request({
+        method: 'wallet_addEthereumChain',
+        params: [
+          {
+            chainId: `0x${chainId.toString(16)}`,
+            chainName: 'Binance Smart Chain',
+            nativeCurrency: {
+              name: 'BNB',
+              symbol: 'BNB',
+              decimals: 18,
+            },
+            rpcUrls: nodes,
+            blockExplorerUrls: ['https://bscscan.com/'],
+          },
+        ],
+      })
+      return true
+    } catch (error) {
+      console.error(error)
+      return false
+    }
+  } else {
+    console.error("Can't setup the BSC network on metamask because window.ethereum is undefined")
+    return false
+  }
+}
+
+export default null