@dcentralab/web3-wc-modal

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 WalletButton
    showBalance // boolean to show or hide balance of connected 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 modal
• closeModal(success?: boolean) - close wallets modal
• connect(connectingWalletType: string, options?: IConnectionOptions) - connect wallet and return wallet provider on success
• toggleLedgerModal(modalState: boolean) - open/close ledger modal
• toggleTrezorModal(modalState: boolean) - open/close trezor modal
• getHWWalletAccounts(connectingWalletType: string, opts: IGetHWAccounts) - get list of HD wallet addresses
• disconnectWallet(clearDerivationPath?: boolean) - disconnect currently connected wallet
• getBalance(address: string) - getBalance for address
• mounted - boolean that indicates if component was properly rendered

Connection types

• inPageProvider
• ledger
• trezor
• walletConnect
• portis
• fortmatic
• coinbase
• binance
• clover
• lace
• 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