Web3-wallets-kit NPM

Web3 Wallets Kit

This package is for connecting to Ethereum wallets, for example, to Metamask.

Supported wallets:

Installation

npm install --save web3-wallets-kit

Creation and managing wallets

// Create instance
const web3Manager = new Web3WalletsManager({
  network: 'kovan',
  infuraAccessToken: 'INFURA_TOKEN',
  walletConfigs: {
    'wallet-connect': {
      infuraId: 'INFURA_TOKEN',
      chainId: 42,
    },
    bitski: {
      clientId: 'CLIENT_ID',
      redirectUri: 'http://localhost:8080/bitski-callback.html',
    },
  },
});

// Connect to wallet
await web3Manager.connect('metamask');

// 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 });

wallets manager API

class Web3WalletsManager {
    /** Web3 instance for reading; constructor option should be wsRpcUrl, httpRpcUrl or infuraAccessToken */
    web3: Web3;
    /** Web3 instance for sending transactions. Instance is created after connecting with wallet */
    txWeb3: BehaviorSubject<Web3 | null>;
    /** active account address */
    account: BehaviorSubject<string | null>;
    /** current connected wallet’s */
    wallet: BehaviorSubject<WalletType | null>;
    /** status of the connection */
    status: BehaviorSubject<ConnectionStatus>;

    constructor(options: Options);

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

interface Options {
    wsRpcUrl?: string;
    httpRpcUrl?: string;
    infuraAccessToken?: string;
    /** @default: 'mainnet' */
    network?: InfuraNetwork;
    /** It automatically connects to last used wallet
     * @default: true
     */
    autoConnectToPreviousWallet?: boolean;
    /** additional options for connecting to wallets */
    walletConfigs: WalletConfigs;
}

Connecting to wallet guide

Metamask

await web3Manager.connect('metamask');

It does not need additional configuration. The user must have a browser extension installed.

ConnectWallet

await web3Manager.connect('wallet-connect');

You need to pass the config Options['walletConfigs']['wallet-connect'] when creating instance Web3WalletsManager. Minimal config:

{ infuraId: 'INFURA_TOKEN' }

Fortmatic

await web3Manager.connect('fortmatic');

You need to pass the config Options['walletConfigs']['fortmatic'] when creating instance Web3WalletsManager. Minimal config:

{
  apiKey: 'API_KEY or TEST_API_KEY',
}

You can create API_KEY in Fortmatic dashboard.

Bitski

await web3Manager.connect('bitski');

You need to pass the config Options['walletConfigs']['bitski'] when creating instance Web3WalletsManager. Minimal config:

{
  clientId: 'CLIENT_ID',
  redirectUri: 'https://my-dapp-doma.in/bitski-callback.html',
}

This provider uses OAuth

user must be registered with Bitski
the application must be registered in Bitski. In the config you need to specify CLIENT_ID which can be found in your account
DApp must host the redirect page. An example on webpack.
you need to set redirect settings in your personal account. On the OAuth page in the list of "Authorized Redirect URLs" you need to add the URL for the redirect, which we specified in the config.