Skip to content
On this page

Connectors

source code

Connector Interface

ts
declare abstract class Connector<Provider = providers.ExternalProvider | CoinbaseWalletProvider, Options = any> {
    abstract readonly name: string;
    readonly options: Options;
    constructor(options: Options);
    abstract connect(): Promise<Required<ConnectorData>>;
    abstract getProvider(): Promise<Provider>;
    abstract disconnect(): Promise<void>;
    abstract onDisconnect(handler: (...args: any[]) => any): void;
    abstract onAccountsChanged(handler: (accounts: string[]) => any): void;
    abstract onChainChanged(handler: (chainId: number) => any): void;
    switchChain?(chainId: number): Promise<void>;
}
declare type ConnectorData<Provider = any> = {
    account: string;
    provider: Provider;
};

MetaMaskConnector

The MetaMaskConnector supports connecting with MetaMask.

Usage

ts
const connector = new MetaMaskConnector({
    appUrl: 'http://localhost:3000',
}),

Configuration

Types

ts
/**
 * MetaMask
 * Docs: https://docs.metamask.io/guide/ethereum-provider.html
 * JSON RPC API: https://metamask.github.io/api-playground/api-documentation
 */
interface MetaMaskProvider extends MetaMaskEthereumProvider {
    isMetaMask: boolean;
    providers?: MetaMaskProvider[];
    isConnected: () => boolean;
    request: (request: {
        method: string;
        params?: any[] | undefined;
    }) => Promise<any>;
    selectedAddress: string;
}
/**
 * source: @metamask/detect-provider
 * https://github.com/MetaMask/detect-provider/blob/main/src/index.ts
 */
interface MetaMaskEthereumProvider {
    isMetaMask?: boolean;
    once(eventName: string | symbol, listener: (...args: any[]) => void): this;
    on(eventName: string | symbol, listener: (...args: any[]) => void): this;
    off(eventName: string | symbol, listener: (...args: any[]) => void): this;
    addListener(eventName: string | symbol, listener: (...args: any[]) => void): this;
    removeListener(eventName: string | symbol, listener: (...args: any[]) => void): this;
    removeAllListeners(event?: string | symbol): this;
}
interface Window {
    ethereum?: MetaMaskProvider;
}
declare type MetaMaskConnectorOptions = {
    appUrl?: string;
};
declare class MetaMaskConnector extends Connector<MetaMaskProvider, MetaMaskConnectorOptions> {
    #private;
    readonly name = "metaMask";
    constructor(options?: MetaMaskConnectorOptions);
    static checkConnection(): Promise<boolean>;
    connect(): Promise<{
        account: any;
        provider: MetaMaskProvider;
    }>;
    getProvider(): Promise<MetaMaskProvider>;
    /**
     * MetaMask do not support programmatic disconnect.
     * @see https://github.com/MetaMask/metamask-extension/issues/10353
     */
    disconnect(): Promise<void>;
    /**
     * @note MetaMask disconnect event would be triggered when the specific chain changed (like L2 network),
     * and will not be triggered when a user clicked disconnect in wallet...
     */
    onDisconnect(handler: (error: ProviderRpcError) => void): void;
    onAccountsChanged(handler: (accounts: string[]) => void): void;
    onChainChanged(handler: (chainId: number) => void): void;
    switchChain(chainId: number): Promise<void>;
    addChain(networkDetails: AddEthereumChainParameter): Promise<void>;
}
interface AddEthereumChainParameter {
    chainId: string;
    chainName: string;
    nativeCurrency: {
        name?: string;
        symbol: string;
        decimals: number;
    };
    rpcUrls: string[];
    blockExplorerUrls?: string[];
    iconUrls?: string[];
}

WalletConnectConnector

The WalletConnectConnector supports connecting with WalletConnect.

For more details, see WalletConnect v1.0 docs

Usage

ts
const connector = new WalletConnectConnector({
  qrcode: true,
  rpc: {
    1: `https://mainnet.infura.io/v3/${infuraId}`,
    4: `https://rinkeby.infura.io/v3/${infuraId}`,
  },
})

Types

ts
/**
 * WalletConnect v1.0 \
 * Docs: https://docs.walletconnect.com/quick-start/dapps/web3-provider \
 * Test Wallet: https://test.walletconnect.org/ \
 * Source: https://github.com/WalletConnect/walletconnect-monorepo/blob/v1.0/packages/providers/web3-provider/src/index.ts
 */
interface IWalletConnectProvider extends WalletConnectProvider {
}
declare type WalletConnectOptions = ConstructorParameters<typeof WalletConnectProvider>[0];
declare class WalletConnectConnector extends Connector<WalletConnectProvider, WalletConnectOptions> {
    #private;
    readonly name = "walletConnect";
    constructor(options: WalletConnectOptions);
    connect(): Promise<{
        account: string;
        provider: WalletConnectProvider;
    }>;
    getProvider(): Promise<WalletConnectProvider>;
    disconnect(): Promise<void>;
    onDisconnect(handler: (code: number, reason: string) => void): void;
    onAccountsChanged(handler: (accounts: string[]) => void): void;
    onChainChanged(handler: (chainId: number) => void): void;
    /**
     * @error Not support for WalletConnect v1.0
     */
    switchChain(chainId: number): Promise<void>;
}

Coinbase Wallet

The CoinbaseWalletConnector supports connecting with Coinbase Wallet using the Coinbase Wallet SDK

Usage

ts
const connector = new CoinbaseWalletConnector({
  appName: 'Vue Dapp',
  jsonRpcUrl: `https://mainnet.infura.io/v3/${infuraId}`,
})

Types

ts
/**
 * Coinbase Wallet SDK
 * Docs: https://docs.cloud.coinbase.com/wallet-sdk/docs/
 */
interface ICoinbaseWalletProvider extends CoinbaseWalletProvider {
}
declare type CoinbaseWalletConnectorOptions = CoinbaseWalletSDKOptions & {
    jsonRpcUrl: string;
    chainId?: number;
};
declare class CoinbaseWalletConnector extends Connector<CoinbaseWalletProvider, CoinbaseWalletConnectorOptions> {
    #private;
    readonly name = "coinbaseWallet";
    constructor(options: CoinbaseWalletConnectorOptions);
    connect(): Promise<{
        account: string;
        provider: CoinbaseWalletProvider;
    }>;
    getProvider(): Promise<CoinbaseWalletProvider>;
    disconnect(): Promise<void>;
    /**
     * @note CoinbaseWallet will reload page if it disconnected by wallet app.
     * @todo experiment with the browser extension
     */
    onDisconnect(handler: () => void): void;
    onAccountsChanged(handler: (accounts: string[]) => void): void;
    onChainChanged(handler: (chainId: number) => void): void;
    /**
     * @todo: add addChain()
     */
    switchChain(chainId: number): Promise<void>;
}

Gnosis Safe

The SafeConnector supports running your Dapp inside the Safe App with Safe Apps SDK

Usage

ts
const safe = new SafeConnector()

Types

ts
declare const isServer: boolean;
declare const isIframe: boolean;
declare const isNotSafeApp: () => boolean;
declare class SafeConnector extends Connector<SafeAppProvider, Opts> {
    #private;
    readonly name = "safe";
    ready: boolean;
    constructor(options?: Opts);
    connect(): Promise<{
        account: string;
        provider: SafeAppProvider;
    }>;
    getProvider(): Promise<SafeAppProvider>;
    isSafeApp(): Promise<boolean>;
    disconnect(): Promise<void>;
    onDisconnect(handler: (error: ProviderRpcError) => void): void;
    onAccountsChanged(handler: (accounts: string[]) => void): void;
    onChainChanged(handler: (chainId: number) => void): void;
}