/web3-wallets-kit

Package for connecting with Ethereum wallets for dApp

Primary LanguageTypeScriptMIT LicenseMIT

Web3 Wallets Kit Commitizen friendly

This kit will help connect you dApp to different Ethereum wallets, e.g. Metamask. With web3-wallets-kit, you can create Web3WalletsManager and connect your dApp to the wallet of your choice using one of the supported wallet integrations.

Wallet integrations:

Wallet Integration Package Size
Inpage (Extensions like Metamask or Web3 browsers like Cipher) @web3-wallets-kit/inpage-connector minzip
WalletConnect @web3-wallets-kit/connect-wallet-connector minzip
Bitsky @web3-wallets-kit/bitski-connector minzip
Fortmatic @web3-wallets-kit/fortmatic-connector minzip
Portis @web3-wallets-kit/portis-connector minzip
Squarelink @web3-wallets-kit/squarelink-connector minzip
Torus @web3-wallets-kit/torus-connector minzip
Ledger Coming soon

Installation

npm install --save @web3-wallets-kit/core

npm install --save @web3-wallets-kit/inpage-connector or another integration

Creating and managing wallets

import Web3 from 'web3';
import { Web3WalletsManager } from '@web3-wallets-kit/core';
import { InpageConnector } from '@web3-wallets-kit/inpage-connector';

// Create Web3WalletsManager instance
const web3Manager = new Web3WalletsManager<Web3>({
  defaultProvider: {
    network: 'kovan',
    infuraAccessToken: 'INFURA_API_KEY',
  },
  makeWeb3: provider => new Web3(provider), // you can use web3.js, ethers.js or another suitable library
});

// Create connector
const connector = new InpageConnector();

// Connect to wallet
await web3Manager.connect(connector);

// Get address and Web3 for sending transaction
const myAddress = web3Manager.account.value;
const txWeb3 = web3Manager.txWeb3.value;

// Create contract
const daiContract = txWeb3.eth.Contract(DAI_ABI, '0x5592ec0cfb4dbc12d3ab100b257153436a1f0fea');

// Send transaction
await daiContract.methods
  .transfer('0x0000000000000000000000000000000000000000', '1000000000000000000')
  .send({ from: myAddress });

Web3WalletsManager API

class Web3WalletsManager<W> {
    /** default Web3 instance for reading. Uses a provider created based on defaultProvider options */
    web3: W;
    /** Web3 instance for sending transactions. An instance is created after connecting to the wallet and uses the wallet provider */
    txWeb3: BehaviorSubject<W | null>;
    /** active account address */
    account: BehaviorSubject<string | null>;
    /** active network ID */
    chainId: BehaviorSubject<number | null>;
    /** status of the connection */
    status: BehaviorSubject<ConnectionStatus>;

    constructor(options: Options<W>);

    /** Connect to wallet; Returns account address and Web3 Instance for sending transactions */
    connect(connector: Connector): Promise<ConnectResult>;
    /** Disconnect wallet, close streams */
    disconnect(): Promise<void>;
}

interface Options<W> {
    defaultProvider: {
        httpRpcUrl?: string;
        wsRpcUrl?: string;
        infuraAccessToken?: string;
        /** default: 'mainnet' */
        network?: InfuraNetwork;
    };
    makeWeb3<W>(provider: Provider): W;
}