@dcentralab/web3-wallet-connector v7.2.2
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
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago