Merge pull request #29 from yamijuan/wallet-connect-2nd

Added disconnect and change wallet for eth

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

@@ -1,14 +1,28 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Dropdown, Menu } from 'antd';
 
 import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
 import { shortenAddress } from '@oyster/common';
 import { useEthereum } from '../../contexts';
 
 export const EthereumConnect = () => {
-  const { accounts, onConnectEthereum, connected, walletProvider } = useEthereum();
+  const {
+    accounts,
+    onConnectEthereum,
+    connected,
+    walletProvider,
+    select,
+  } = useEthereum();
   const { hasCorrespondingNetworks } = useCorrectNetwork();
 
+  const menu = (
+    <Menu>
+      <Menu.Item key="3" onClick={select}>
+        Change Eth Wallet
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
     <div style={{ marginRight: 8 }}>
       {connected ? (
@@ -28,6 +42,13 @@ export const EthereumConnect = () => {
             WRONG NETWORK
           </Button>
         )
+      ) : !!walletProvider ? (
+        <Dropdown.Button
+          onClick={() => onConnectEthereum && onConnectEthereum()}
+          overlay={menu}
+        >
+          Connect Ethereum
+        </Dropdown.Button>
       ) : (
         <Button onClick={() => onConnectEthereum && onConnectEthereum()}>
           Connect Ethereum

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

@@ -9,10 +9,12 @@ import { AppBar } from '@oyster/common';
 import Wormhole from '../Wormhole';
 import { Footer as AppFooter } from './../Footer';
 import { EthereumConnect } from '../EthereumConnect';
+import { useEthereum } from '../../contexts';
 
 const { Header, Content, Footer } = Layout;
 
 export const AppLayout = React.memo((props: any) => {
+  const { connected, disconnect } = useEthereum();
   const location = useLocation();
   const [wormholeReady, setWormholeReady] = useState(false);
 
@@ -41,7 +43,21 @@ export const AppLayout = React.memo((props: any) => {
                     <h2>WORMHOLE</h2>
                   </Link>
                 </div>
-                <AppBar useWalletBadge={true} left={<EthereumConnect />} />
+                <AppBar
+                  additionalSettings={
+                    connected ? (
+                      <Button
+                        type="primary"
+                        onClick={() => disconnect()}
+                        style={{ marginTop: '8px' }}
+                      >
+                        Disconnect ETH
+                      </Button>
+                    ) : undefined
+                  }
+                  useWalletBadge={true}
+                  left={<EthereumConnect />}
+                />
               </Header>
             )}
             <Content style={{ padding: '0 50px', flexDirection: 'column' }}>

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

@@ -119,7 +119,7 @@ export const TokenSelectModal = (props: {
         visible={isModalVisible}
         onCancel={() => hideModal()}
         footer={null}
-        className={"token-select-modal"}
+        className={'token-select-modal'}
       >
         <Input
           autoFocus

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

@@ -86,7 +86,12 @@ export const Transfer = () => {
 
   useEffect(() => {
     const asset = mintAddress;
-    if (!asset || (asset === request?.info?.address && request.from === from && request.toChain === toChain)) {
+    if (
+      !asset ||
+      (asset === request?.info?.address &&
+        request.from === from &&
+        request.toChain === toChain)
+    ) {
       return;
     }
 
@@ -99,7 +104,6 @@ export const Transfer = () => {
       try {
         const bridgeAddress = programIds().wormhole.bridge;
         if (from === ASSET_CHAIN.Ethereum) {
-
           let signer = provider.getSigner();
           let e = WrappedAssetFactory.connect(asset, provider);
           let addr = await signer.getAddress();

packages/bridge/src/contexts/bridge.tsx

@@ -1,8 +1,4 @@
-import React, {
+import React, { createContext, FunctionComponent, useContext } from 'react';
-  createContext,
-  FunctionComponent,
-  useContext,
-} from 'react';
 import { SolanaBridge } from '../core';
 import {
   useConnection,

packages/bridge/src/contexts/ethereum.tsx

@@ -14,13 +14,13 @@ import { useWallet as useEthereumWallet } from 'use-wallet';
 import WalletConnectProvider from '@walletconnect/web3-provider';
 // @ts-ignore
 import Fortmatic from 'fortmatic';
-import { useWallet, useLocalStorageState} from '@oyster/common';
+import { useWallet, useLocalStorageState } from '@oyster/common';
-import { WalletAdapter } from '@solana/wallet-base'
+import { WalletAdapter } from '@solana/wallet-base';
 import { TokenList, TokenInfo } from '@uniswap/token-lists';
 import { ethers } from 'ethers';
 import { MetamaskWalletAdapter } from '../wallet-adapters/metamask';
 import { Button, Modal } from 'antd';
-import {WalletConnectWalletAdapter} from "../wallet-adapters/wallet-connect";
+import { WalletConnectWalletAdapter } from '../wallet-adapters/wallet-connect';
 
 const ASSETS_URL =
   'https://raw.githubusercontent.com/solana-labs/oyster/main/assets/wallets/';
@@ -48,6 +48,8 @@ export interface EthereumContextState {
   connected: boolean;
   chainId: number;
   walletProvider: any;
+  select: () => void;
+  disconnect: () => void;
   onConnectEthereum?: () => void;
 }
 
@@ -57,6 +59,8 @@ export const EthereumContext = createContext<EthereumContextState>({
   accounts: [''],
   chainId: 0,
   connected: false,
+  select() {},
+  disconnect() {},
   walletProvider: null,
 });
 
@@ -142,12 +146,12 @@ export const EthereumProvider: FunctionComponent = ({ children }) => {
   }, [setTokens]);
 
   const onConnectEthereum = useCallback(() => {
-    if (wallet && providerUrl) {
+    if (wallet && providerUrl && !connected) {
       wallet.connect();
-    } else {
+    } else if (!connected) {
       select();
     }
-  }, [wallet, providerUrl]);
+  }, [wallet, connected, providerUrl]);
 
   useEffect(() => {
     if (wallet) {
@@ -162,6 +166,11 @@ export const EthereumProvider: FunctionComponent = ({ children }) => {
       });
       wallet.on('disconnect', error => {
         setConnected(false);
+        setAccounts([]);
+        // @ts-ignore
+        setChainId(0);
+        // @ts-ignore
+        setProvider(null);
       });
       // @ts-ignore
       wallet.on('accountsChanged', accounts => {
@@ -184,10 +193,10 @@ export const EthereumProvider: FunctionComponent = ({ children }) => {
   const close = useCallback(() => setIsModalVisible(false), []);
 
   useEffect(() => {
-    if (walletConnected && !connected) {
+    if (walletConnected) {
       onConnectEthereum();
     }
-  }, [walletConnected, connected, providerUrl]);
+  }, [walletConnected, providerUrl]);
 
   return (
     <EthereumContext.Provider
@@ -199,6 +208,8 @@ export const EthereumProvider: FunctionComponent = ({ children }) => {
         connected,
         chainId,
         walletProvider,
+        select,
+        disconnect: () => wallet?.disconnect(),
         onConnectEthereum: () => onConnectEthereum(),
       }}
     >

packages/bridge/src/views/home/index.tsx

@@ -81,7 +81,7 @@ export const HomeView = () => {
             style: {},
           },
           children: (
-            <a href={record.explorer} target="_blank" rel="noopener noreferrer" >
+            <a href={record.explorer} target="_blank" rel="noopener noreferrer">
               {shortenAddress(text, 6)}
             </a>
           ),
@@ -98,7 +98,11 @@ export const HomeView = () => {
             style: {},
           },
           children: (
-            <a href={record.wrappedExplorer} target="_blank" rel="noopener noreferrer" >
+            <a
+              href={record.wrappedExplorer}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {shortenAddress(text, 6)}
             </a>
           ),

packages/bridge/src/wallet-adapters/metamask.tsx

@@ -1,7 +1,7 @@
 import EventEmitter from 'eventemitter3';
 import { PublicKey, Transaction } from '@solana/web3.js';
 import { notify } from '@oyster/common';
-import { WalletAdapter } from '@solana/wallet-base'
+import { WalletAdapter } from '@solana/wallet-base';
 import { ethers } from 'ethers';
 
 export class MetamaskWalletAdapter
@@ -95,8 +95,9 @@ export class MetamaskWalletAdapter
   }
 
   disconnect() {
-    if (this._publicKey) {
+    if (this._provider) {
       this._publicKey = null;
+      this._provider = null;
       this.emit('disconnect');
     }
   }

packages/bridge/src/wallet-adapters/wallet-connect.tsx

@@ -1,9 +1,9 @@
 import EventEmitter from 'eventemitter3';
 import { PublicKey, Transaction } from '@solana/web3.js';
 import { notify } from '@oyster/common';
-import { WalletAdapter } from '@solana/wallet-base'
+import { WalletAdapter } from '@solana/wallet-base';
 import { ethers } from 'ethers';
-import WalletConnectProvider from "@walletconnect/web3-provider";
+import WalletConnectProvider from '@walletconnect/web3-provider';
 
 export class WalletConnectWalletAdapter
   extends EventEmitter
@@ -13,11 +13,13 @@ export class WalletConnectWalletAdapter
   _accounts: Array<any>;
   _chainID: number;
   _provider: any;
+  _walletProvider: any;
 
   constructor() {
     super();
     this._publicKey = null;
     this._provider = null;
+    this._walletProvider = null;
     this._accounts = [];
     this._chainID = 0;
     this._onProcess = false;
@@ -53,44 +55,52 @@ export class WalletConnectWalletAdapter
 
     //  Create WalletConnect Provider
     const walletConnectProvider = new WalletConnectProvider({
-      infuraId: "535ab8649e9f40cface13cbded7d647e",
+      infuraId: '535ab8649e9f40cface13cbded7d647e',
     });
-    walletConnectProvider.enable().then(()=>{
+    walletConnectProvider
-      const provider = new ethers.providers.Web3Provider(walletConnectProvider);
+      .enable()
-      const signer = provider.getSigner();
+      .then(() => {
-      signer.getAddress().then(account => {
+        const provider = new ethers.providers.Web3Provider(
-        this._accounts = [account];
+          walletConnectProvider,
-        provider.getNetwork().then(network => {
+        );
-          this._chainID = network.chainId;
+        const signer = provider.getSigner();
-          this._provider = provider;
+        signer.getAddress().then(account => {
-          this.emit('connect');
+          this._accounts = [account];
+          provider.getNetwork().then(network => {
+            this._chainID = network.chainId;
+            this._provider = provider;
+            this._walletProvider = walletConnectProvider;
+            this.emit('connect');
+          });
         });
+        // @ts-ignore
+        walletConnectProvider.on(
+          'disconnect',
+          (code: number, reason: string) => {
+            this.emit('disconnect', { code, reason });
+          },
+        );
+        // @ts-ignore
+        walletConnectProvider.on('accountsChanged', (accounts: string[]) => {
+          this.emit('accountsChanged', accounts);
+        });
+        // @ts-ignore
+        walletConnectProvider.on('chainChanged', (chainId: number) => {
+          this.emit('chainChanged', chainId);
+        });
+      })
+      .catch(() => {
+        this.disconnect();
+      })
+      .finally(() => {
+        this._onProcess = false;
       });
-      // @ts-ignore
-      walletConnectProvider.on('disconnect', (code: number, reason: string) => {
-        this.emit('disconnect', {code, reason});
-      });
-      // @ts-ignore
-      walletConnectProvider.on('accountsChanged', (accounts: string[]) => {
-        this.emit('accountsChanged', accounts);
-      });
-      // @ts-ignore
-      walletConnectProvider.on('chainChanged', (chainId: number) => {
-        this.emit('chainChanged', chainId);
-      });
-    })
-    .catch(() => {
-      this.disconnect();
-    })
-    .finally(() => {
-      this._onProcess = false;
-    });
-
   }
 
   disconnect() {
-    if (this._publicKey) {
+    if (this._provider) {
       this._publicKey = null;
+      this._walletProvider.disconnect();
       this.emit('disconnect');
     }
   }