README.md

Connect Wallet Modal

Provides a modal window with buttons for connection with various crypto wallets.

Import the basic ReefKnotWalletsModal component, default config getter, and the union type of connector identifiers:

import { ReefKnotWalletsModal, getDefaultWalletsModalConfig } from '@reef-knot/connect-wallet-modal'
import type { WalletIdsEthereum } from '@reef-knot/wallets-list';

Use it like this:

const walletsModalDefaultConfig = getDefaultWalletsModalConfig();

<ReefKnotWalletsModal<WalletIdsEthereum>
  {...walletsModalDefaultConfig}
  darkThemeEnabled={false}
  walletsShown={[
    'metaMask',
    'walletconnect',
    'brave',
    'dappBrowserInjected',
  ]}
  walletsPinned={['dappBrowserInjected']}
/>

Note: The WalletIdsEthereum type being passed as a generic to the component will affect the type safety constrain of walletsShown, walletsPinned and metrics props.

Props configuration list

Prop	Description
darkThemeEnabled?	Set to true for the dark color theme. Default: false
buttonsFullWidth?	Specify connector buttons to render one per row. It could be handy if you are planning to use only few wallets in your dapp.
config	A config object, see the fields below.
config.buttonComponentsByConnectorId	A map of ConnectButtons associated with a certain connector id or type. Default: Get with getDefaultWalletsModalConfig()
config.walletsShown	Controls displayed wallet connection buttons from the list of wallets in the modal. Wallets will be displayed in the specified sequence. Default: Get with getDefaultWalletsModalConfig()
config.walletsPinned	Pins certain wallets to display it at the top of the list. Default: Get with getDefaultWalletsModalConfig()
config.walletsDisplayInitialCount?	Connection buttons count to render before the "More wallets" button. Default: 6
config.onClickTermsAccept({ isAccepted }) config.onClickWalletsMore() config.onClickWalletsLess() config.onConnectStart({ walletId }) config.onConnectSuccess({ walletId })	Event callbacks.
config.linkTerms? config.linkPrivacyNotice? config.linkDontHaveWallet?	UI links.