Cronos developer series: connect your 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…

keyboard

Update: While this blog post and associated repository may now be slightly outdated, you can always refer to the Cronos Wallet Connections repository for up to date code and explanations.

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. Other wallets include imToken, Infinity Wallet, BC Vault and several others (see Cronos ecosystem page).

In this post, we describe how Cronos users can connect to your Dapp with either of these 3 crypto wallets. We share a repository that you can examine to better understand how the various connection methods work, and share some tips on what you need to do when your code is ready.

Please note that this is a guest post. It it is not endorsed by Cronos, Crypto.com, MetaMask or Trust Wallet.

What is the user experience?

The user experience is the same as on other EVM-compatible blockchains.

If you are a Dapp developer, the way that your users are going to connect their wallet to your application is going to vary depending on the wallet, device and browser that they are using.

All 3 wallets that support Cronos — Crypto.com DeFi Wallet, MetaMask, and Trust Wallet — have a mobile Dapp browser, which greatly enhances the mobile user experience.

For the Crypto.com DeFi Wallet:

• In the desktop browser: the user can connect via the DeFi Wallet’s browser extension or by scanning a Wallet Connect QR code.

• On mobile, within the web browser (Chrome, Safari): the user can connect by requesting a direct connection to the DeFi Wallet, or by requesting a Wallet Connect connection.

• On mobile, within the DeFi Wallet’s Dapp browser: if your Dapp has been allow-listed by the Crypto.com team, the user will be automatically connected to it when they open the Dapp in the mobile Dapp browser.

For MetaMask:

• In the desktop browser: the user will usually connect via the MetaMask browser extension.

• On mobile: the user will usually connect from within MetaMask’s mobile Dapp browser.

For Trust Wallet:

• In the desktop browser: the user will usually connect by scanning a Wallet Connect QR code.

• On mobile: the user will usually connect from within the Trust Wallet’s mobile Dapp browser.

How does it work under the hood?

Under the hood, your front-end application needs a Web3 provider.

Most Ethereum and Cronos developers use ReactJS for the front-end, and many of them use the ethers.js library to manage Web3 functionalities.

Ethers.js exposes the following objects:

• A Web3 Provider is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality.

• A Web3 Signer in ethers is an abstraction of an Ethereum Account, which can be used to sign messages and transactions and send signed transactions to the Ethereum Network to execute state changing operations.

In order to create these objects in your ReactJS app, you are going to need some SDKs:

• For the Crypto.com DeFi Wallet, you need the @deficonnect/web3-connector npm package which takes care of DeFi Wallet connections in the browser or on mobile.

• For the MetaMask (browser or mobile) and for Trust Wallet’s mobile Dapp browser, you don’t need any SDK. The Web3 provider is “injected” in the browser and accessible via window.ethereum.

• For the Trust Wallet via Wallet Connect (browser), you need the Wallet Connect SDK.

Demo time

Sounds complicated? In order to make it easier for you, here is a code repository where you can see all these connection methods in action, and the code required to make them happen.

Clone the repository to your machine, execute npm install and then npm start, and you should be able to play with the following connection methods by opening a web page at localhost:3000:

• Crypto.com DeFi Wallet browser extension: this is handled by the wallet-defiwallet.ts helper.

• Injected Web3 provider (MetaMask, Trust Wallet): this is handled by the wallet-metamask.ts helper.

• Wallet Connect (v1): this is handled by the wallet-connect.ts helper.

All these connection methods rely on the same configuration parameters in order to find the Cronos mainnet network (see config/config.ts):

You can also refer to the README.md file for more details.

How to request allow-listing by the Crypto.com DeFi Wallet team

Once you have followed the above steps, users should be able to connect to your Dapp via the Crypto.com DeFi Wallet browser extension (on desktop), via the Crypto.com DeFi Wallet’s in-app browser (on mobile) or via Wallet Connect (also on mobile).

Subsequently, you may request your Dapp to be featured in the DeFi Wallet’s Dapp ranking tab. Please refer to this form.

How to have your Dapp and/or token featured in Trust Wallet

Trust Wallet supports the Cronos mainnet from within the in-app Dapp browser (via the injected Web3 provider) and also via Wallet Connect.

Furthermore, you can request to have your Dapp and/or token featured in the Trust Wallet’s mobile Dapp browser. Refer to documentation for more details.

Next steps

Go ahead and clone the entire Github repository. You can review it in more details to fully understand the login and transaction signing flows!

Feel free to post an issue in Github if you would like to suggest improvements regarding this demo.