2.0.32 • Published 10 months ago

@dcentralab/web3-wc-modal v2.0.32

Weekly downloads
-
License
ISC
Repository
-
Last release
10 months ago

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
  • 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
2.0.32

10 months ago

2.0.30

12 months ago

2.0.29

1 year ago

2.0.27

1 year ago

2.0.28

1 year ago

2.0.0-alpha.7

1 year ago

2.0.0-alpha.8

1 year ago

2.0.0-alpha.9

1 year ago

2.0.0-alpha.4

1 year ago

2.0.0-alpha.5

1 year ago

2.0.0-alpha.6

1 year ago

2.0.0-alpha.2

1 year ago

2.0.0-alpha.12

1 year ago

1.3.35

1 year ago

2.0.15

1 year ago

2.0.16

1 year ago

2.0.13

1 year ago

2.0.1-alpha.0

1 year ago

2.0.14

1 year ago

2.0.11

1 year ago

2.0.12

1 year ago

2.0.10

1 year ago

2.0.19

1 year ago

2.0.17

1 year ago

2.0.18

1 year ago

2.0.26

1 year ago

2.0.24

1 year ago

2.0.25

1 year ago

2.0.22

1 year ago

2.0.23

1 year ago

2.0.20

1 year ago

2.0.21

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.9

1 year ago

2.0.8

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

1.3.32

1 year ago

1.3.34

1 year ago

1.3.31

1 year ago

1.3.30

1 year ago

1.3.29

1 year ago

1.3.26

1 year ago

1.3.27

1 year ago

1.3.25

1 year ago

1.3.24

1 year ago

1.3.22

1 year ago

1.3.23

1 year ago

1.3.21

1 year ago

1.3.20

1 year ago

1.3.18

1 year ago

1.3.19

1 year ago

1.3.17

1 year ago

1.3.13

1 year ago

1.3.14

1 year ago

1.3.12

1 year ago

1.3.11

2 years ago

1.3.10

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

0.3.54

2 years ago

1.3.2

2 years ago

0.3.53

2 years ago

1.3.1

2 years ago

1.2.9

2 years ago

1.3.0

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

0.3.52

2 years ago

1.2.0

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.34

2 years ago

0.3.51

2 years ago

1.1.9-alpha.0

2 years ago

1.0.4-alpha.0

2 years ago

1.1.29

2 years ago

1.1.28

2 years ago

1.1.14-alpha.0

2 years ago

1.0.18-alpha.0

2 years ago

1.1.30

2 years ago

1.0.0-alpha.0

2 years ago

1.1.33

2 years ago

1.1.32

2 years ago

1.1.31

2 years ago

1.1.18-alpha.0

2 years ago

1.1.11-alpha.0

2 years ago

1.0.27-alpha.0

2 years ago

1.1.5-alpha.0

2 years ago

1.0.10-alpha.0

2 years ago

1.1.22-alpha.0

2 years ago

1.0.14-alpha.4

2 years ago

1.0.14-alpha.3

2 years ago

1.0.14-alpha.5

2 years ago

1.1.1-alpha.0

2 years ago

1.0.14-alpha.0

2 years ago

1.0.14-alpha.2

2 years ago

1.0.14-alpha.1

2 years ago

1.0.22-alpha.0

2 years ago

0.3.50

2 years ago

1.1.15-alpha.0

2 years ago

1.0.17-alpha.0

2 years ago

1.0.7-alpha.0

2 years ago

1.1.19-alpha.0

2 years ago

1.0.3-alpha.0

2 years ago

0.3.42

2 years ago

0.3.41

2 years ago

1.0.13-alpha.0

2 years ago

0.3.40

2 years ago

1.0.26-alpha.0

2 years ago

0.3.49

2 years ago

0.3.48

2 years ago

1.1.12-alpha.0

2 years ago

0.3.47

2 years ago

0.3.46

2 years ago

0.3.45

2 years ago

0.3.44

2 years ago

0.3.43

2 years ago

1.1.6-alpha.0

2 years ago

1.1.21-alpha.0

2 years ago

1.1.2-alpha.0

2 years ago

1.1.27

2 years ago

1.1.26

2 years ago

1.1.25-alpha.0

2 years ago

1.1.25

2 years ago

1.1.16-alpha.0

2 years ago

0.3.31

2 years ago

0.3.30

2 years ago

0.3.39

2 years ago

0.3.38

2 years ago

0.3.37

2 years ago

1.1.7-alpha.0

2 years ago

0.3.36

2 years ago

1.0.6-alpha.0

2 years ago

0.3.35

2 years ago

0.3.34

2 years ago

0.3.33

2 years ago

0.3.32

2 years ago

0.3.29

2 years ago

1.0.21-alpha.0

2 years ago

1.0.2-alpha.0

2 years ago

1.1.3-alpha.1

2 years ago

1.1.3-alpha.0

2 years ago

1.1.3-alpha.2

2 years ago

1.0.9-alpha.0

2 years ago

0.3.28

2 years ago

0.3.27

2 years ago

0.3.26

2 years ago

1.0.25-alpha.0

2 years ago

1.0.16-alpha.0

2 years ago

1.0.29-alpha.0

2 years ago

1.0.12-alpha.0

2 years ago

1.1.24-alpha.0

2 years ago

1.0.19-alpha.0

2 years ago

1.0.5-alpha.0

2 years ago

1.1.8-alpha.0

2 years ago

1.1.20-alpha.0

2 years ago

1.1.13-alpha.0

2 years ago

1.0.1-alpha.0

2 years ago

1.0.24-alpha.0

2 years ago

1.0.20-alpha.0

2 years ago

1.1.17-alpha.0

2 years ago

1.1.10-alpha.0

2 years ago

1.1.4-alpha.0

2 years ago

1.0.28-alpha.0

2 years ago

1.0.8-alpha.0

2 years ago

1.1.0-alpha.0

2 years ago

1.0.11-alpha.0

2 years ago

1.1.23-alpha.0

2 years ago

1.0.15-alpha.0

2 years ago

0.3.20

2 years ago

0.3.25

2 years ago

0.3.24

2 years ago

0.3.23

2 years ago

0.3.22

2 years ago

0.3.21

2 years ago

0.3.17

2 years ago

0.3.19

2 years ago

0.3.18

2 years ago

0.3.9

3 years ago

0.3.16

3 years ago

0.3.15

3 years ago

0.3.14

3 years ago

0.3.13

3 years ago

0.3.12

3 years ago

0.3.11

3 years ago

0.3.10

3 years ago

0.3.8

3 years ago

0.2.10

3 years ago

0.3.0

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.7

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.4

3 years ago

0.3.3

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.0.3

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago