Connect Wallet Modal

React components for Lido Finance projects.
Provides a modal window with buttons for connection with various crypto wallets.
Part of Lido UI Blocks.

Install

yarn add @lidofinance/blocks-connect-wallet-modal

Usage

Check out our Storybook at https://ui-blocks.lido.fi
Note that to use Connect Wallet Modal, you need to wrap your app with ProviderWeb3 from lido-js-sdk.

Custom

You can configure the list of wallets displayed in the modal. The package provides wallet connection buttons that are meant to be used inside the modal. You can use them, or you can make your own.

Import the basic WalletsModal component with required wallet connection buttons:

import { WalletsModal, ConnectMetamask, ConnectWalletConnect } from '@lidofinance/blocks-connect-wallet-modal'

Use it like this:

<WalletsModal
  open={isOpen}
  onClose={handleClose}
  shouldInvertWalletIcon={false} // set to true for the dark color theme
>
  {(commonProps) => (
    <>
      <ConnectMetamask key='Metamask' {...commonProps} />
      <ConnectWalletConnect key='WalletConnect' {...commonProps} />
    </>
  )}
</WalletsModal>

For Ethereum

The package provides the modal variant with the predefined list of wallets, which work with the Ethereum network.

Import the component:

import { WalletsModalForEth } from '@lidofinance/blocks-connect-wallet-modal'

Use it like this:

<WalletsModalForEth {...props} />

How to hide a wallet

You can hide one or several wallet connection buttons from the list of wallets in the modal.
Use the hiddenWallets property like this:

<WalletsModalForEth
  hiddenWallets={['Metamask', 'Mathwallet']}
/>

Available values are:

• 'Metamask'
• 'WalletConnect'
• 'Ledger'
• 'Coinbase'
• 'Trust'
• 'ImToken'
• 'Coin98'
• 'MathWallet'

This list will grow with the addition of new wallets. You can see the actual list by looking into the WalletsModalForEth component.