Skip to main content

Link Ronin Wallet with Mavis Account

Overview

This guide explains how you can let your users link Ronin Wallet to their account in your app. The user's account can be either a Sky Mavis Account or your app's internal account system. When the wallet is linked to the account, the user can sign transactions by using the Ronin Wallet extension or mobile app. You can also earn a commission from every eligible wallet linked to the app.

To let users link their Ronin Wallet, you need to implement the following two flows: "Sign-in with Ronin" and "Link Ronin Wallet."

YesIs usersigned in toSky Mavis Account?NoIs account linked with RoninWallet?StartEndGet user infoNoLink Ronin Wallet (step 2)Sign-in with Ronin (step 1)YesDisplay that walletis successfully connected

Prerequisites

Complete the steps in Get started.

Steps

Step 1. Implement "Sign-in with Ronin Wallet"

Implement the "Sign-in with Ronin" flow following this guide: Sign-in with Ronin.

Implement the "Link Ronin Wallet" flow. You can see how this flow is implemented in the sample Next.js app.

The sample app demonstrates that users can link the Ronin Wallet in three ways:

  • Using the Ronin Wallet browser extension
  • Using the Ronin Wallet mobile app
  • Using a QR code

Here's a detailed explanation of the app's code:

  • connectExtension() connects to the Ronin Wallet extension. If the extension is not installed, an error message is displayed.
  • connectMobileWallet(type:'app' | ‘qrcode') connects to the Ronin Wallet mobile app. Depending on the user’s device, two connection types are available:
    • For desktop devices, the type is qrcode. The function first generates a QR code in the app, which the user can scan with the Ronin Wallet mobile app. Upon scanning the QR code, Ronin Wallet opens a universal link, which the user taps to navigate to their Ronin Wallet app and connect the wallet.
    • For mobile devices, the type is app. The function opens a universal link directly.
  • signMessage() generates a signature for the user's Ronin address. The signature is used to verify that the user authorized the connection to their wallet.
  • loginROPC() links the user's wallet to their Ronin account. The function uses the signature generated by signMessage() to call the API to sign in with Ronin. The function returns the user's token response if the link is successful.
  • linkWallet() links the user's wallet to their Ronin account. The function uses the signature generated by signMessage() to call the API to link Ronin Wallet. The function returns the user's token response if the link is successful.

After the user connects their Ronin Wallet through the "Link Ronin Wallet" flow, Mavis Account also creates an account associated with that wallet. All messages must be generated following the ERC-4361 Sign-in with Ethereum in the Ronin format:

${domain} wants you to sign in with your Ronin Wallet:
${address}
${statement}
URI: ${uri}
Version: ${version}
Chain ID: ${chain-id}
Nonce: ${nonce}
Issued At: ${issued-at}
Expiration Time: ${expiration-time}
Not Before: ${not-before}
Request ID: ${request-id}
Resources:
- ${resources[0]}
- ${resources[1]}
...
- ${resources[n]}

Make sure to set the url metadata to your app's domain:

export const WC_METADATA = {
projectId: WC_DEFAULT_PROJECT_ID,
chains: WC_SUPPORTED_CHAIN_IDS,
rpcMap: WC_RPC_MAP,
methods: WC_SUPPORTED_METHODS,
metadata: {
name: 'Demo',
description: 'Demo',
icons: [],
url: 'http://localhost:3000',
},
showQrModal: false,
disableProviderPing: true,
}
Was this page helpful?
Happy React is loading...