@dcentralab/web3-wallet-connector
v7.2.2
Published
Wallet connector
Downloads
61
Readme
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 modalcloseModal()
- close wallets modalconnect()
setTheme(bool)
- set dark:true/light:false themeconnectionType: String
- current connected provider typeconnector
- instance of current connected connector (if different from provider)
Connection params
rpcUrl: String
- required parameter rpcUrlnetworkId: Number
- required parameter network_idconnectionType: String
- for direct connection without opening modalledgerPath: String
- optional parameter for direct connection with ledger provideropenModalOnError: Boolean
- open modal if direct connection failedsilent: Boolean
- prevent error throwing if direct connection failedonConnectStart: (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