connect ethereum wallet improvements

packages/bridge/src/components/EthereumConnect/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from 'antd';
+
+import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
+import metamaskIcon from '../../assets/metamask.svg';
+import { shortenAddress } from '@oyster/common';
+import { useEthereum } from '../../contexts';
+
+export const EthereumConnect = () => {
+  const { accounts, onConnectEthereum, connected } = useEthereum();
+  const { hasCorrespondingNetworks } = useCorrectNetwork();
+
+  return (
+    <div style={{ marginRight: 8 }}>
+      {connected ? (
+        hasCorrespondingNetworks ? (
+          <>
+            <img
+              alt={'metamask-icon'}
+              width={20}
+              height={20}
+              src={metamaskIcon}
+            />
+            {shortenAddress(accounts[0], 4)}
+          </>
+        ) : (
+          <Button danger type={'primary'}>
+            WRONG NETWORK
+          </Button>
+        )
+      ) : (
+        <Button onClick={() => onConnectEthereum && onConnectEthereum()}>
+          <img
+            alt={'metamask-icon'}
+            width={20}
+            height={20}
+            src={metamaskIcon}
+          />
+          Connect Metamask
+        </Button>
+      )}
+    </div>
+  );
+};

packages/bridge/src/components/Layout/index.tsx

@@ -12,6 +12,7 @@ import { useEthereum } from '../../contexts';
 import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
 import { SecurityAuditButton } from '../SecurityAuditButton';
 import { Footer } from '../Footer';
+import { EthereumConnect } from '../EthereumConnect';
 
 const { Header, Content } = Layout;
 const { useConnectionConfig } = contexts.Connection;
@@ -19,8 +20,6 @@ const { useConnectionConfig } = contexts.Connection;
 export const AppLayout = React.memo((props: any) => {
   const location = useLocation();
   const [wormholeReady, setWormholeReady] = useState(false);
-  const { accounts, provider } = useEthereum();
-  const hasCorrespondingNetworks = useCorrectNetwork();
 
   const paths: { [key: string]: string } = {
     '/faucet': '7',
@@ -47,32 +46,7 @@ export const AppLayout = React.memo((props: any) => {
                     <h2>WORMHOLE</h2>
                   </Link>
                 </div>
-                <AppBar
-                  useWalletBadge={true}
-                  left={
-                    <>
-                      {accounts[0] && (
-                        <div style={{ marginRight: 8 }}>
-                          {hasCorrespondingNetworks ? (
-                            <>
-                              <img
-                                alt={'metamask-icon'}
-                                width={20}
-                                height={20}
-                                src={metamaskIcon}
-                              />
-                              {shortenAddress(accounts[0], 4)}
-                            </>
-                          ) : (
-                            <Button danger type={'primary'}>
-                              WRONG NETWORK
-                            </Button>
-                          )}
-                        </div>
-                      )}
-                    </>
-                  }
-                />
+                <AppBar useWalletBadge={true} left={<EthereumConnect />} />
               </Header>
             )}
             <Content style={{ padding: '0 50px', flexDirection: 'column' }}>

packages/bridge/src/components/SecurityAuditButton/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { Button } from 'antd';
 
 import './index.less';

packages/bridge/src/contexts/ethereum.tsx

@@ -13,7 +13,6 @@ import { useWallet as useEthereumWallet } from 'use-wallet';
 import WalletConnectProvider from '@walletconnect/web3-provider';
 // @ts-ignore
 import Fortmatic from 'fortmatic';
-import Torus from '@toruslabs/torus-embed';
 import { useConnectionConfig, useWallet, ENV } from '@oyster/common';
 import { TokenList, TokenInfo } from '@uniswap/token-lists';
 import { ethers } from 'ethers';
@@ -24,20 +23,27 @@ export interface EthereumContextState {
   tokens: TokenInfo[];
   tokenMap: Map<string, TokenInfo>;
   accounts: string[];
+  connected: boolean;
+  chainId: number;
+  onConnectEthereum?: () => void;
 }
 
 export const EthereumContext = createContext<EthereumContextState>({
   tokens: [],
   tokenMap: new Map<string, TokenInfo>(),
   accounts: [''],
+  chainId: 0,
+  connected: false,
 });
 
 export const EthereumProvider: FunctionComponent = ({ children }) => {
   const [accounts, setAccounts] = useState<string[]>(['']);
   const [provider, setProvider] = useState<ethers.providers.Web3Provider>();
-  const { env } = useConnectionConfig();
-  const { connected } = useWallet();
-  const wallet = useEthereumWallet();
+  const [connected, setConnected] = useState<boolean>(false);
+  const [chainId, setChainId] = useState<number>(0);
+  //const { env } = useConnectionConfig();
+  const { connected: walletConnected } = useWallet();
+  //const wallet = useEthereumWallet();
   const [tokens, setTokens] = useState<{
     map: Map<string, TokenInfo>;
     list: TokenInfo[];
@@ -94,26 +100,59 @@ export const EthereumProvider: FunctionComponent = ({ children }) => {
     })();
   }, [setTokens]);
 
+  const onConnectEthereum = () => {
+    // @ts-ignore
+    window.ethereum.request({ method: 'eth_requestAccounts' }).then(() => {
+      // @ts-ignore
+      const provider = new ethers.providers.Web3Provider(
+        (window as any).ethereum,
+      );
+      const signer = provider.getSigner();
+      signer.getAddress().then(account => {
+        setAccounts([account]);
+        setConnected(true);
+      });
+      provider.getNetwork().then(network => {
+        setChainId(network.chainId);
+      });
+      setProvider(provider);
+    });
+  };
+
   useEffect(() => {
     if (connected) {
       // @ts-ignore
-      window.ethereum.enable().then(() => {
-        // @ts-ignore
-        const provider = new ethers.providers.Web3Provider(
-          (window as any).ethereum,
-        );
-        const signer = provider.getSigner();
-        signer.getAddress().then(account => {
-          setAccounts([account]);
-        });
-        setProvider(provider);
+      window.ethereum.on('disconnect', error => {
+        setConnected(false);
+      });
+      // @ts-ignore
+      window.ethereum.on('accountsChanged', accounts => {
+        if (!accounts || !accounts[0]) setConnected(false);
+      });
+      // @ts-ignore
+      window.ethereum.on('chainChanged', (chainId: string) => {
+        setChainId(parseInt(chainId, 16));
       });
     }
   }, [connected]);
 
+  useEffect(() => {
+    if (walletConnected && !connected) {
+      onConnectEthereum();
+    }
+  }, [walletConnected]);
+
   return (
     <EthereumContext.Provider
-      value={{ tokens: tokens.list, tokenMap: tokens.map, accounts, provider }}
+      value={{
+        tokens: tokens.list,
+        tokenMap: tokens.map,
+        accounts,
+        provider,
+        connected,
+        chainId,
+        onConnectEthereum: () => onConnectEthereum(),
+      }}
     >
       {children}
     </EthereumContext.Provider>

packages/bridge/src/hooks/useCorrectNetwork.tsx

@@ -7,22 +7,21 @@ export const useCorrectNetwork = () => {
   const [hasCorrespondingNetworks, setHasCorrespondingNetworks] = useState(
     true,
   );
-  const { provider } = useEthereum();
+  const { connected, chainId } = useEthereum();
 
   useEffect(() => {
-    if (provider) {
-      provider.getNetwork().then(network => {
-        if (network.chainId === 5) {
-          setHasCorrespondingNetworks(env === 'testnet');
-        } else if (network.chainId === 1) {
-          setHasCorrespondingNetworks(env === 'mainnet-beta');
-        } else {
-          setHasCorrespondingNetworks(false);
-        }
-      });
+    if (connected) {
+      if (chainId === 5) {
+        setHasCorrespondingNetworks(env === 'testnet');
+      } else if (chainId === 1) {
+        setHasCorrespondingNetworks(env === 'mainnet-beta');
+      } else {
+        setHasCorrespondingNetworks(false);
+      }
+    } else {
+      setHasCorrespondingNetworks(true);
     }
-    setHasCorrespondingNetworks(true);
-  }, [provider, env]);
+  }, [connected, env, chainId]);
 
-  return hasCorrespondingNetworks;
+  return { hasCorrespondingNetworks };
 };