diff --git a/packages/bridge/src/components/EthereumConnect/index.tsx b/packages/bridge/src/components/EthereumConnect/index.tsx index 0c52d6f..9bfa1c3 100644 --- a/packages/bridge/src/components/EthereumConnect/index.tsx +++ b/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 = ( + + + Change Eth Wallet + + + ); + return (
{connected ? ( @@ -28,6 +42,13 @@ export const EthereumConnect = () => { WRONG NETWORK ) + ) : !!walletProvider ? ( + onConnectEthereum && onConnectEthereum()} + overlay={menu} + > + Connect Ethereum + ) : (
- } /> + disconnect()} + style={{ marginTop: '8px' }} + > + Disconnect ETH + + ) : undefined + } + useWalletBadge={true} + left={} + /> )} diff --git a/packages/bridge/src/components/TokenSelectModal/index.tsx b/packages/bridge/src/components/TokenSelectModal/index.tsx index e6406e4..0132deb 100644 --- a/packages/bridge/src/components/TokenSelectModal/index.tsx +++ b/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'} > { 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(); diff --git a/packages/bridge/src/contexts/bridge.tsx b/packages/bridge/src/contexts/bridge.tsx index 68c6833..5993077 100644 --- a/packages/bridge/src/contexts/bridge.tsx +++ b/packages/bridge/src/contexts/bridge.tsx @@ -1,8 +1,4 @@ -import React, { - createContext, - FunctionComponent, - useContext, -} from 'react'; +import React, { createContext, FunctionComponent, useContext } from 'react'; import { SolanaBridge } from '../core'; import { useConnection, diff --git a/packages/bridge/src/contexts/ethereum.tsx b/packages/bridge/src/contexts/ethereum.tsx index e69685b..62e2d13 100644 --- a/packages/bridge/src/contexts/ethereum.tsx +++ b/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 { WalletAdapter } from '@solana/wallet-base' +import { useWallet, useLocalStorageState } from '@oyster/common'; +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({ 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 ( { connected, chainId, walletProvider, + select, + disconnect: () => wallet?.disconnect(), onConnectEthereum: () => onConnectEthereum(), }} > diff --git a/packages/bridge/src/views/home/index.tsx b/packages/bridge/src/views/home/index.tsx index e1504a0..31c9a0f 100644 --- a/packages/bridge/src/views/home/index.tsx +++ b/packages/bridge/src/views/home/index.tsx @@ -81,7 +81,7 @@ export const HomeView = () => { style: {}, }, children: ( - + {shortenAddress(text, 6)} ), @@ -98,7 +98,11 @@ export const HomeView = () => { style: {}, }, children: ( - + {shortenAddress(text, 6)} ), diff --git a/packages/bridge/src/wallet-adapters/metamask.tsx b/packages/bridge/src/wallet-adapters/metamask.tsx index 44843fa..0fa1d03 100644 --- a/packages/bridge/src/wallet-adapters/metamask.tsx +++ b/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'); } } diff --git a/packages/bridge/src/wallet-adapters/wallet-connect.tsx b/packages/bridge/src/wallet-adapters/wallet-connect.tsx index bcb6592..002e9c9 100644 --- a/packages/bridge/src/wallet-adapters/wallet-connect.tsx +++ b/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; _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(()=>{ - const provider = new ethers.providers.Web3Provider(walletConnectProvider); - const signer = provider.getSigner(); - signer.getAddress().then(account => { - this._accounts = [account]; - provider.getNetwork().then(network => { - this._chainID = network.chainId; - this._provider = provider; - this.emit('connect'); + walletConnectProvider + .enable() + .then(() => { + const provider = new ethers.providers.Web3Provider( + walletConnectProvider, + ); + const signer = provider.getSigner(); + signer.getAddress().then(account => { + 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'); } }