Link Ronin Wallet with Sky 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."

Prerequisites

Complete the steps in Get started.

First, you need to implement the "Sign-in with Ronin" flow following this guide: Sign-in with Ronin.

Step 2: Implement "Link Ronin Wallet"

The other flow is "Link Ronin Wallet". Have a look at how this flow is implemented in the example Next.js app.

The example code shows 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, Sky 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 account:
${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]}

the url metadata must be set 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,
}

Overview​

Prerequisites​

Step 1: Implement "Sign-in with Ronin"​

Step 2: Implement "Link Ronin Wallet"​

See also​

Overview

Prerequisites

Step 1: Implement "Sign-in with Ronin"

Step 2: Implement "Link Ronin Wallet"

See also