Connect your Cronos dapp with DeFi Wallet, MetaMask, and Trust Wallet
Cronos is an EVM-compatible chains and as such, it is supported by three of the leading EVM-compatible self-custodial crypto wallets: Crypto.com DeFi Wallet, MetaMask, and Trust Wallet.
Introducing Web3 Wallet
Many dapp developers are looking for a quick and easy to integrate with these three wallets at once, especially in the context of Web3 hackathons. To achieve this, we recommend the web3-wallet package.
Web3 Wallet is an open-source wrapper developed especially to simplify the workflow of Cronos app developers, but it also supports other EVM compatible networks. It is used by many of the leading dapps on Cronos.
There are many other Web3 wallet connection libraries out there. The main advantage of Web3 Wallet is that it delivers the smoothest integration with Crypto.com DeFi Wallet, the leading wallet used by Cronos chain users, while also supporting MetaMask, Trust Wallet , and several other wallets.
Getting started quickly
To get started quickly, you can use this boilerplate project using NextJS13 to demonstrate Web3 wallet connection on Cronos and basic interaction with the Cronos blockchain.
The `./app/chains.ts` and `./app/wallets.ts` files serve as configuration files
If you need to read data from the blockchain, you also need to enter a blockchain URL which is going to support your rate of requests in the .env file, under `NEXT_PUBLIC_BLOCKCHAIN_URL`.
The `./app/components/Navbar` demonstrates how the app manages the user's connection to their preferred wallet using a basic Modal interface (in this example, Crypto.com DeFi Wallet, Rabby / MetaMask, Trust Wallet, and Wallet Connect).
The `./app/components/ReadChain` demonstrates how to read information from the Cronos blockchain, such as the latest block number and the crypto asset balance of a user.
The `./app/components/WriteChain` demonstrates how to send a transaction to the Cronos blockchain (there are two examples: "send 1 CRO to myself" and "send 1 USDC to myself").
In order to enable users to interact with your smart contract:
Add your smart contract [ABI](https://docs.soliditylang.org/en/v0.8.19/abi-spec.html) to `./contracts/abis/[contractName].json`.
Run `npm run typechain` to generate all the typescript bindings for your smart contract.
Check `./app/components/ReadChain` or `./app/components/WriteChain` for how to create a contract object and interact with your smart contract through the contract object.
For more comprehensive documentation, visit https://docs.cronos.org.
Enjoy!