Skip to main content

Link Ronin Wallet to user account

Overview​

This guide explains how you can let your users link their Ronin Wallet to their account in your app. The user's account can be either a Sky Mavis Account or an existing account in your own system. Linking the wallet allows users to sign transactions with their Ronin Wallet and earn a commission from eligible wallets linked to the app.

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​

  • An app created in the Developer Console.
  • Permission to use the Sky Mavis Account service. Request in the Developer Console under your app > App Permission > Sky Mavis Account (OAuth 2.0) > Request Access.
  • Completed OAuth 2.0 configuration as described 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 or displays an error message if the extension isn't installed.
  • 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 wallet address. The signature is used to verify that the user authorized the connection to their wallet.
  • loginROPC() links the user's wallet to their 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 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.

Make sure to generate the message following the ERC-4361 Sign-in with Ethereum 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,
}