Provides a modal window with buttons for connection with various crypto wallets.
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 "@rnb-web3/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>
The package provides the modal variant with the predefined list of wallets, which work with the Ethereum network.
Import the component:
import { WalletsModalForEth } from "@rnb-web3/connect-wallet-modal";
Use it like this:
<WalletsModalForEth {...props} />
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"]} />