@dcentralab/web3-wc-modal v1.3.34
Web3 Wallet Connector
CREATE-REACT-APP
To support hardware wallets in create-react-app
you need to use react-app-rewired
const NodePolyfill = require("node-polyfill-webpack-plugin");
module.exports = function override(config, env) {
console.log("override");
config.plugins.push(new NodePolyfill());
return config;
};
Instalation
npm install @dcentralab/web3-wc-modal
or
yarn add @dcentralab/web3-wc-modal
If you use webpack make sure that you have react
alias in resolve section (https://webpack.js.org/configuration/resolve/#resolvealias)
Component must be mounted and rendered before you can use it
Getting started
import { Web3WalletModal } from "@dcentralab/web3-wc-modal";
import evmProviders from "@dcentralab/evm-providers";
import cardanoProviders from "@dcentralab/cardano-providers";
import mmProvider from "@dcentralab/wc-mm";
import { NetworkSwitcherContextProvider } from "@dcentralab/wc-network-switcher";
<NetworkSwitcherContextProvider networks={appNetworks}>
<Web3WalletModal
networkId // required. netwrokId where app should connect
rpcUrl // required. rpcUrl where app should connect
blockchainType // required. BlockchainType where app should connect
// array of supported connectors
supportedWallets={evmProviders} // for ethereum based wallets only
supportedWallets={[mmProvider]} // for explicit set of wallets
supportedWallets={[...evmProviders, ...cardanoProviders]} // for all supported wallets
derivationPath // derivation path for HD wallets (ledzer and trezor)
pendingTx // count of pending transactions
onDisconnect // method that will be called when wallet dicsonnects
onConnectError // method that will be called at any error during wallet connection
onConnect // method that will be called when after wallet successfully connect
onConnectRequest // method that will be called when wallet connection started
onClick // additional method that will be called when user click on Button
showBalance // boolean to show or hide balance of connected wallet
externalBalance // if you need to pass balance from outside instead of getting it by wallet connector (Eternl Cardano wallet)
intl // react-intl
autoConnect // boolean - flag that indicate should wallet connector reconnect when one of prop (rpcUrl, networkId, blockchainType) was changed
modalRoot // div element for modal hosting
disableProviderFirst // to disable network switch by provider
/>
</NetworkSwitcherContextProvider>;
import { walletHelpers } from "@dcentralab/web3-wc-modals";
// example of imerative usage
await walletHelpers.connectWallet(state.accountType, {
rpcUrl: payload?.rpcUrl,
networkId: payload?.networkId,
...(state.additions || {}),
});
Methods & Getters of walletHelpers
interface IMethods { openModal: () => void closeModal: (success?: boolean) => void connectWallet: (connectingWalletType: string, options?: IConnectionOptions) => Promise<IConnectionResult | void> toggleLedgerModal: (modalState: boolean) => void toggleTrezorModal: (modalState: boolean) => void getHWWalletAccounts: (connectingWalletType: string, opts: IGetHWAccounts) => Promise<string[]> disconnectWallet: (clearDerivationPath?: boolean) => void getBalance: (address: string) => Promise mounted: boolean }
openModal()
- show connect wallets modalcloseModal(success?: boolean)
- close wallets modalconnect(connectingWalletType: string, options?: IConnectionOptions)
- connect wallet and return wallet provider on successtoggleLedgerModal(modalState: boolean)
- open/close ledger modaltoggleTrezorModal(modalState: boolean)
- open/close trezor modalgetHWWalletAccounts(connectingWalletType: string, opts: IGetHWAccounts)
- get list of HD wallet addressesdisconnectWallet(clearDerivationPath?: boolean)
- disconnect currently connected walletgetBalance(address: string)
- getBalance for addressmounted
- boolean that indicates if component was properly rendered
Connection types
inPageProvider
ledger
trezor
walletConnect
portis
fortmatic
coinbase
binance
clover
nami
eternl
yoroi
export type TConnect = (
connectingWalletType: string,
options?: IConnectionOptions
) => void;
export type TDisconnect = (clearDerivationPath?: boolean) => void;
export interface IConnectionOptions {
rpcUrl?: string;
networkId?: number;
derivationPath?: string;
blockchainType?: BLOCKCHAIN_TYPE;
connectionType?: TWalletType;
onConnectStart?: () => void;
savePath?: boolean;
removeLSKey?: boolean;
showModalOnError?: boolean;
showToast?: (msg: string, duration?: number) => any;
connectWallet?: TConnect;
disconnectWallet?: TDisconnect;
internal?: boolean;
}
export interface IGetHWAccounts {
derivationPath: string;
networkId?: number;
accountsLength?: number;
accountsOffset: number;
}
export interface IConnectionResult {
provider: any;
providerName?: string;
}
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
1 day ago
1 day ago
13 days ago
20 days ago
21 days ago
23 days ago
22 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
6 months ago
6 months ago
8 months ago
11 months ago
6 months ago
11 months ago
6 months ago
6 months ago
6 months ago
8 months ago
9 months ago
10 months ago
9 months ago
11 months ago
7 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
7 months ago
8 months ago
11 months ago
11 months ago
7 months ago
11 months ago
9 months ago
9 months ago
11 months ago
9 months ago
10 months ago
7 months ago
7 months ago
9 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
7 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
7 months ago
11 months ago
11 months ago
9 months ago
7 months ago
8 months ago
11 months ago
10 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 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
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
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
1 year ago
1 year ago