Optimizing Wallet Connectivity for Cosmos Dapps
A seamless and user-friendly wallet connection experience is essential for the success of any dapp. Users typically access dapps through desktop browsers, mobile browsers, or in-app browsers (browser inside a mobile wallet). To provide the best possible experience, it's crucial to address the challenges users face while connecting their wallets on these different platforms.
Common Challenges in Wallet Connection Experience Today
Limited number of wallet options
Lack of mobile wallet connection support, making it difficult to browse and use dapps on mobile devices
RECOMMENDED FLOW FOR USERS
To create an ideal wallet connection experience across all platforms, consider implementing the following user flows:
Desktop Browser:
Display multiple extension wallet connection options such as Leap, Keplr, and Cosmostation, and additionally include a Wallet Connect QR code option if you want to allow users to connect using their mobile wallets. If an extension wallet is not installed on the browser, provide an install link that redirects the user to the Chrome store for the particular extension.
Setup for Leap - Look out for a leap provider window.leap in your desktop experience and if you find one, enable a Connect to Leap option. In case you do not find a leap provider, use our dynamic link (that will handle both Desktop and mobile browser experiences)
Mobile Browser:
Display multiple mobile app wallet connection options (Leap, Keplr, Cosmostation, etc.) along with a Wallet Connect deep link option. If a mobile app wallet is not present, show an install link that redirects the user to the App/Play store for the particular app. Setup for Leap - Integrate Wallet Connect v2 which should manage all Cosmos wallets. Additionally, if you have added Leap dynamic link support from above, it should automatically handle mobile browser experience that will redirect to the dapp inside Leap in-app browser
In-app Browser:
For the best user experience, add a check for if the platform is an in-app browser and display a single "Connect your wallet" option, as opposed to showing individual wallet names (since the user is already accessing a particular wallet's mobile wallet). On clicking it, this should pop up the Wallet Connect modal and connect the current wallet to the dApp.
Note: The above experiences can also be achieved by integrating wallet adapters such as Cosmos Kit or Shuttle, instead of having to manage all the different states yourself. More details here.
Last updated
