From a0243bc26e5cc5ab934559965287c8299cdb50f4 Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Tue, 16 Mar 2021 12:42:33 -0500
Subject: [PATCH 1/3] lint

---
 packages/bridge/src/components/Transfer/index.tsx    | 12 ++++++++----
 .../src/components/Wormhole/WormholeCanvas.tsx       |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/bridge/src/components/Transfer/index.tsx b/packages/bridge/src/components/Transfer/index.tsx
index 224b84f..dc79dc7 100644
--- a/packages/bridge/src/components/Transfer/index.tsx
+++ b/packages/bridge/src/components/Transfer/index.tsx
@@ -5,7 +5,12 @@ import { Input } from '../Input';
 
 import './style.less';
 import { ASSET_CHAIN, chainToName } from '../../utils/assets';
-import { fromSolana, ProgressUpdate, toSolana, TransferRequest } from '../../models/bridge';
+import {
+  fromSolana,
+  ProgressUpdate,
+  toSolana,
+  TransferRequest,
+} from '../../models/bridge';
 import { useEthereum } from '../../contexts';
 import { TokenDisplay } from '../TokenDisplay';
 import { WrappedAssetFactory } from '../../contracts/WrappedAssetFactory';
@@ -89,8 +94,7 @@ export const Transfer = () => {
         return;
       }
       try {
-
-        if(request.from === ASSET_CHAIN.Solana) {
+        if (request.from === ASSET_CHAIN.Solana) {
           const bridgeAddress = programIds().wormhole.bridge;
 
           let signer = provider.getSigner();
@@ -235,7 +239,7 @@ export const Transfer = () => {
               (async () => {
                 let steps: ProgressUpdate[] = [];
                 try {
-                  if(request.from === ASSET_CHAIN.Solana) {
+                  if (request.from === ASSET_CHAIN.Solana) {
                     debugger;
                     await fromSolana(
                       connection,
diff --git a/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx b/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx
index 987608a..f8e0666 100644
--- a/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx
+++ b/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx
@@ -20,7 +20,7 @@ const WormholeCanvas = ({
     <Canvas onCreated={onCreated} style={{ opacity: 0.4 }}>
       <Camera />
       <React.Suspense fallback={null}>
-        <WormholeGeometry rotate={rotate}/>
+        <WormholeGeometry rotate={rotate} />
       </React.Suspense>
     </Canvas>
   );

From 7ae00c9b6c3318c58bf72d5aa11f8ffdc9b61fcc Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Tue, 16 Mar 2021 12:42:54 -0500
Subject: [PATCH 2/3] fixed footer links

---
 packages/bridge/src/components/Footer/index.tsx   | 15 +++++++++------
 .../src/components/SecurityAuditButton/index.tsx  |  8 ++++++--
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/bridge/src/components/Footer/index.tsx b/packages/bridge/src/components/Footer/index.tsx
index 72f7202..8a1026d 100644
--- a/packages/bridge/src/components/Footer/index.tsx
+++ b/packages/bridge/src/components/Footer/index.tsx
@@ -12,14 +12,17 @@ export const Footer = () => {
       <SecurityAuditButton />
       <Button
         shape={'circle'}
+        target={'_blank'}
+        href={'https://github.com/solana-labs/oyster'}
         icon={<GithubOutlined />}
         style={{ marginRight: '20px' }}
-      >
-        <Link to={'https://github.com/solana-labs/oyster'}></Link>
-      </Button>
-      <Button shape={'circle'} icon={<TwitterOutlined />}>
-        <Link to={'https://twitter.com/solana'}></Link>
-      </Button>
+      ></Button>
+      <Button
+        shape={'circle'}
+        target={'_blank'}
+        href={'https://twitter.com/solana'}
+        icon={<TwitterOutlined />}
+      ></Button>
     </div>
   );
 };
diff --git a/packages/bridge/src/components/SecurityAuditButton/index.tsx b/packages/bridge/src/components/SecurityAuditButton/index.tsx
index 10c3d53..454781e 100644
--- a/packages/bridge/src/components/SecurityAuditButton/index.tsx
+++ b/packages/bridge/src/components/SecurityAuditButton/index.tsx
@@ -6,8 +6,12 @@ import './index.less';
 
 export const SecurityAuditButton = () => {
   return (
-    <Button className={'audit-button'}>
-      <Link to={'https://github.com/certusone/wormhole'}>Security Audit</Link>
+    <Button
+      className={'audit-button'}
+      target={'_blank'}
+      href={'https://github.com/certusone/wormhole'}
+    >
+      Security Audit
     </Button>
   );
 };

From 1eed7615aa54425db58b282461a0a65dd4953b8a Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Tue, 16 Mar 2021 17:26:25 -0500
Subject: [PATCH 3/3] connect ethereum wallet improvements

---
 .../src/components/EthereumConnect/index.tsx  | 44 ++++++++++++
 .../bridge/src/components/Layout/index.tsx    | 30 +-------
 .../components/SecurityAuditButton/index.tsx  |  1 -
 packages/bridge/src/contexts/ethereum.tsx     | 69 +++++++++++++++----
 .../bridge/src/hooks/useCorrectNetwork.tsx    | 27 ++++----
 5 files changed, 113 insertions(+), 58 deletions(-)
 create mode 100644 packages/bridge/src/components/EthereumConnect/index.tsx

diff --git a/packages/bridge/src/components/EthereumConnect/index.tsx b/packages/bridge/src/components/EthereumConnect/index.tsx
new file mode 100644
index 0000000..d8f651a
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/bridge/src/components/Layout/index.tsx b/packages/bridge/src/components/Layout/index.tsx
index 055c73b..4353dd9 100644
--- a/packages/bridge/src/components/Layout/index.tsx
+++ b/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' }}>
diff --git a/packages/bridge/src/components/SecurityAuditButton/index.tsx b/packages/bridge/src/components/SecurityAuditButton/index.tsx
index 454781e..3670076 100644
--- a/packages/bridge/src/components/SecurityAuditButton/index.tsx
+++ b/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';
diff --git a/packages/bridge/src/contexts/ethereum.tsx b/packages/bridge/src/contexts/ethereum.tsx
index 6514ced..0b91cb6 100644
--- a/packages/bridge/src/contexts/ethereum.tsx
+++ b/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>
diff --git a/packages/bridge/src/hooks/useCorrectNetwork.tsx b/packages/bridge/src/hooks/useCorrectNetwork.tsx
index f3a832f..f0108c6 100644
--- a/packages/bridge/src/hooks/useCorrectNetwork.tsx
+++ b/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 };
 };