Web3 Wallet Connector

Instalation

npm install @dcentralab/web3-wallet-connector

or

yarn add @dcentralab/web3-wallet-connector

If you use webpack make sure that you have react alias in resolve section (https://webpack.js.org/configuration/resolve/#resolvealias)

Getting started

import Web3WalletConnector from '@dcentralab/web3-wallet-connector';
import Web3 from 'web3';

const web3WalletConnector = new Web3WalletConnector({
  fortmaticKey: process.env.FORTMATIC_API_KEY, // if you want to use Fortmatic wallet
  portisDAppId: process.env.PORTIS_DAPP_ID, // if you want to use Portis wallet
});

// to open wallet selector modal
const { provider, account } = await web3WalletConnector.connect({
  rpcUrl: `https://ropsten.infura.io/v3/${YOUR_API_KEY}`, // rpcUrl is required parameter,
  networkId: 3, // networkId is require parameter
});
const web3 = new Web3(provider);

Methods & Getters

• openModal() - show connect wallets modal
• closeModal() - close wallets modal
• connect()
• setTheme(bool) - set dark:true/light:false theme
• connectionType: String - current connected provider type
• connector - instance of current connected connector (if different from provider)

Connection params

• rpcUrl: String - required parameter rpcUrl
• networkId: Number - required parameter network_id
• connectionType: String - for direct connection without opening modal
• ledgerPath: String - optional parameter for direct connection with ledger provider
• openModalOnError: Boolean - open modal if direct connection failed
• silent: Boolean - prevent error throwing if direct connection failed
• onConnectStart: (res) => res - callback when actually start connection

Connection types

• inPageProvider
• hardwareWallet
• walletConnect
• portis
• fortmatic
• coinbase

// for direct connection
const { provider } = await web3WalletConnector.connect({
  rpcUrl: `https://ropsten.infura.io/v3/${YOUR_API_KEY}`,
  networkId: 3,
  connectionType: 'inPageProvider',
  openModalOnError: true,
  silent: false
});
const web3 = new Web3(provider);

if you want to connect ledger device you can also provide additional params to skip wizard

const { provider } = await web3WalletConnector.connect({
  rpcUrl: `https://ropsten.infura.io/v3/${YOUR_API_KEY}`,
  networkId: 3,
  connectionType: 'hardwareWallet',
  ledgerPath: '44\'/60\'/0\'/0/0',
})
const web3 = new Web3();

Colors

if you want to change color schema define CSS variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

• --wallet-button-color
• --wallet-button__hover-color
• --wallet-text-color
• --loader-circle
• --ledger-error-text-color
• --ledger-warning-text-color
• --ledger-button-background
• --ledger-button-hover-background
• --ledger-derivation-border-color
• --ledger-derivation-background
• --ledger-derivation-text-color
• --ledger-derivation-active-border-color
• --ledger-derivation-active-background
• --ledger-derivation-active-text-color
• --overlay-color
• --modal-body-color
• --close-btn-color