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. |