certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Added disconnect and change wallet for eth
This commit is contained in:
B 2021-03-19 18:24:48 -05:00 committed by GitHub
parent 4c2eca612e 985c372691
commit ed660edc5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 119 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/bridge/src/components/EthereumConnect/index.tsx
View File

@ -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

18
packages/bridge/src/components/Layout/index.tsx
View File

@ -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' }}>

2
packages/bridge/src/components/TokenSelectModal/index.tsx
View File

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

8
packages/bridge/src/components/Transfer/index.tsx
View File

@ -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();

6
packages/bridge/src/contexts/bridge.tsx
View File

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

27
packages/bridge/src/contexts/ethereum.tsx
View File

@ -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<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(),
}}
>

8
packages/bridge/src/views/home/index.tsx
View File

@ -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>
),

5
packages/bridge/src/wallet-adapters/metamask.tsx
View File

@ -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');
}
}

76
packages/bridge/src/wallet-adapters/wallet-connect.tsx
View File

@ -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(()=>{
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');
}
}