Integrate Web3Modal into a dApp
Introduction
Web3Modal is a simple-to-use library that helps developers add support for multiple providers in their dApps with a simple, customizable configuration. It makes connecting wallets, performing transactions, and managing accounts easy.
In this guide, you will use the web3Modal library to integrate multiple wallets such as Kaia Wallet, Klip, Metamask, Coinbase Wallet, etc. into your dApp built on the Kaia Network.
Prerequisite
- A working react project (by executing
npx create-react-app project-name
) - Install the necessary wallets (Kaia Wallet, Coinbase Wallet, and Metamask).
- RPC Endpoint: you can get this from one of the supported endpoint providers.
- Test KAIA from Faucet: fund your account with sufficient KAIA.
Setting up Web3Modal and Wallet Provider Options
Step 1: Installing Web3Modal and an Ethereum library
Install web3Modal and your preferred library for interacting with the blockchain. In this tutorial, we will be installing @klaytn/web3modal which was derived from Web3Modal and modified to add Kaia Wallet and Klip wallet. Also, this tutorial will use ethers.js to interact with the Kaia blockchain.
npm install @klaytn/web3modalnpm install --save ethers
Step 2: Instantiating Web3Modal with wallet provider options
Install the wallet providers of your choice. Here we install Kaia Wallet, Klip and Coinbase wallet providers.
npm install --save @coinbase/wallet-sdknpm install --save @klaytn/kaikas-web3-providernpm install --save @klaytn/klip-web3-provider
In your App.js
file, import CoinbaseWalletSDK, KaikasWeb3Provider, and KlipWeb3Provider, and instantiate the various provider options to integrate with your dapp.
import CoinbaseWalletSDK from '@coinbase/wallet-sdk';import { KaikasWeb3Provider } from "@klaytn/kaikas-web3-provider";import { KlipWeb3Provider } from "@klaytn/klip-web3-provider";export const providerOptions = { coinbasewallet: { package: CoinbaseWalletSDK, options: { appName: "Web 3 Modal Demo", infuraId: process.env.INFURA_KEY } }, walletconnect: { package: WalletConnect, options: { infuraId: process.env.INFURA_KEY } }};const providerOptions = { coinbasewallet: { package: CoinbaseWalletSDK, // required options: { appName: "Web3Modal Kaia dApp", // required infuraId: "NFURA_KEY", // required rpc: "https://public-en.node.kaia.io", // Optional if `infuraId` is provided; otherwise it's required chainId: 1001, // Optional. It defaults to 1 if not provided darkMode: false // Optional. Use dark theme, defaults to false } }, klip: { package: KlipWeb3Provider, //required options: { bappName: "Web3Modal Kaia dApp", //required rpcUrl: "https://public-en.node.kaia.io" //required }}, kaikas: { package: KaikasWeb3Provider // required }};
Step 3: Instantiate web3modal
Then, instantiate Web3Modal by passing in the provider options.
import Web3Modal from "@klaytn/web3modal";const web3Modal = new Web3Modal( { cacheProvider: true, providerOptions, } )