mirror of https://github.com/certusone/oyster.git
Merge pull request #29 from yamijuan/wallet-connect-2nd
Added disconnect and change wallet for eth
This commit is contained in:
commit
ed660edc5d
|
@ -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
|
||||
|
|
|
@ -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' }}>
|
||||
|
|
|
@ -119,7 +119,7 @@ export const TokenSelectModal = (props: {
|
|||
visible={isModalVisible}
|
||||
onCancel={() => hideModal()}
|
||||
footer={null}
|
||||
className={"token-select-modal"}
|
||||
className={'token-select-modal'}
|
||||
>
|
||||
<Input
|
||||
autoFocus
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -1,8 +1,4 @@
|
|||
import React, {
|
||||
createContext,
|
||||
FunctionComponent,
|
||||
useContext,
|
||||
} from 'react';
|
||||
import React, { createContext, FunctionComponent, useContext } from 'react';
|
||||
import { SolanaBridge } from '../core';
|
||||
import {
|
||||
useConnection,
|
||||
|
|
|
@ -15,12 +15,12 @@ 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 { 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(),
|
||||
}}
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
),
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,23 +55,31 @@ export class WalletConnectWalletAdapter
|
|||
|
||||
// Create WalletConnect Provider
|
||||
const walletConnectProvider = new WalletConnectProvider({
|
||||
infuraId: "535ab8649e9f40cface13cbded7d647e",
|
||||
infuraId: '535ab8649e9f40cface13cbded7d647e',
|
||||
});
|
||||
walletConnectProvider.enable().then(()=>{
|
||||
const provider = new ethers.providers.Web3Provider(walletConnectProvider);
|
||||
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) => {
|
||||
walletConnectProvider.on(
|
||||
'disconnect',
|
||||
(code: number, reason: string) => {
|
||||
this.emit('disconnect', { code, reason });
|
||||
});
|
||||
},
|
||||
);
|
||||
// @ts-ignore
|
||||
walletConnectProvider.on('accountsChanged', (accounts: string[]) => {
|
||||
this.emit('accountsChanged', accounts);
|
||||
|
@ -85,12 +95,12 @@ export class WalletConnectWalletAdapter
|
|||
.finally(() => {
|
||||
this._onProcess = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
if (this._publicKey) {
|
||||
if (this._provider) {
|
||||
this._publicKey = null;
|
||||
this._walletProvider.disconnect();
|
||||
this.emit('disconnect');
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue