# Wallet Integration
# Pre-requisite Readings
# Implementation Checklist
The integration implementation checklist for dApp developers consists of three categories:
Make sure to create a wallet-connection button for Metamask and/or Keplr on the frontend of the application. For instance, consider the "Connect to a wallet" button on the interface of Diffusion Finance (opens new window) or the analagous button on the interface of EvmoSwap (opens new window).
Developers enabling transactions on their dApp have to determine wallet type of the user, create the transaction, request signatures from the corresponding wallet, and finally broadcast the transaction to the network.
# Determining Wallet Type
Developers should determine whether users are using Keplr or MetaMask. Whether MetaMask or Keplr is installed on the user device can be determined by checking the corresponding
- For MetaMask:
- For Keplr:
document.load, then MetaMask (or, correspondingly, Keplr) is not installed. There are several ways to wait for the load event to check the status: for instance, developers can register functions to
window.onload, or they can track the document's ready state through the document event listener.
After the user's wallet type has been determined, developers can proceed with creating, signing, and sending transactions.
# Create the Transaction
Note: The example below uses the Evmos Testnet
chainID. For more info, check the Evmos Chain IDs reference document here.
Developers can create
MsgSend transactions using the evmosjs library.
# Sign and Broadcast the Transaction
Note: The example below uses an Evmos Testnet RPC node.
After creating the transaction, developers need to send the payload to the appropriate wallet to be signed (
msg.signDirect (opens new window) is the transaction in Keplr format, and
msg.eipToSign is the
EIP712 (opens new window) data to sign with MetaMask).
With the signature, we add a Web3Extension to the transaction and broadcast it to the Evmos node.
For Ethereum RPC, Evmos gRPC, and/or REST queries, dApp developers should implement providers client-side, and store RPC details in the environment variable as secrets.