Connect with Ronin Wallet using an injected provider

Overview

This tutorial shows how to connect your web app to Ronin Wallet using an injected provider.

An injected provider acts as a bridge between a dApp and a user's web3-enabled browser, facilitating communication and accessing blockchain data and functionalities.

When a user accesses a dApp, the injected provider injects a web3 object into the dApp's JavaScript runtime environment. This web3 object allows the dApp to interact with the underlying blockchain network. An example of such interaction is managing the user's blockchain accounts. The provider provides access to the user's public and private keys, allowing the dApp to sign and send transactions on behalf of the user. This seamless integration simplifies the user experience, because users don't need to manually enter their account details for each interaction with the dApp.

An injected provider is available in these scenarios:

Users who use a web browser with the Ronin Wallet extension.
Users who use the in-app browser inside the Ronin Wallet mobile app.

By the end of this tutorial, your app will be connected with Ronin Wallet's injected provider. After this, you can start making requests to the user's wallet.

note

Throughout this tutorial, we'll be working with a Next.js app using Next.js v13.4.16.

Before you start

Before you start the tutorial, make sure you a Next.js app to experiment with. Follow the installation instruction.

Step 1. Install the dependencies

In your sample app, install walletconnect/modal:

yarn add @walletconnect/modal

Install the Ronin Wallet SDK:

yarn add @roninnetwork/wallet-sdk

Import the SDK in the file:

page.tsx
import { WalletSDK } from '@roninnetwork/wallet-sdk'

Step 2. Detect the Ronin Wallet provider

Before interacting with an injected provider, your app must check for the existence of such a provider.

If a user already installed Ronin Wallet, a window.ronin object is available to access. If Ronin Wallet is not installed, however, then your app must redirect the user to the Ronin Wallet's website for installation. You can implement this behavior using the following script:

page.tsx
import { WalletSDK } from '@roninnetwork/wallet-sdk'

const checkRoninInstalled = () => {
  if ('ronin' in window) {
    return true
  } 

  window.open('https://wallet.roninchain.com', '_blank') 
  return false
}

checkRoninInstalled()

Step 3. Initialize the SDK

Define a function to connect Ronin Wallet, and initialize the Ronin Wallet SDK:

page.tsx
import { WalletSDK } from '@roninnetwork/wallet-sdk'

const checkRoninInstalled = () => {
  if ('ronin' in window) {
    return true
  } 

  window.open('https://wallet.roninchain.com', '_blank') 
  return false
}

checkRoninInstalled()

async function connectRoninWallet(props) {
    const sdk = new WalletSDK()
  }

Step 4. Prompt the user to unlock the wallet

If the user's wallet is locked, call connectInjected to prompt them to unlock it.

await sdk.connectInjected()

The connectRoninWallet function in the example returns a promise that resolves only when the user unlocks their wallet, provided that they have Ronin Wallet installed.

page.tsx
import { WalletSDK } from '@roninnetwork/wallet-sdk'

const checkRoninInstalled = () => {
  if ('ronin' in window) {
    return true
  } 

  window.open('https://wallet.roninchain.com', '_blank') 
  return false
}

checkRoninInstalled()

async function connectRoninWallet(props) {
    const sdk = new WalletSDK()
    await sdk.connectInjected()

    const isInstalled = checkRoninInstalled()
    if (isInstalled === false) {
      return;
    }
  }

Step 5. Get user's current address

After the user's wallet is unlocked, use requestAccounts to get the user's addresses.

await sdk.requestAccounts()

Here's the example implementation:

page.tsx
import { WalletSDK } from '@roninnetwork/wallet-sdk'

const checkRoninInstalled = () => {
  if ('ronin' in window) {
    return true
  } 

  window.open('https://wallet.roninchain.com', '_blank') 
  return false
}

checkRoninInstalled()

async function connectRoninWallet(props) {
    const sdk = new WalletSDK()
    await sdk.connectInjected()

    const isInstalled = checkRoninInstalled()
    if (isInstalled === false) {
      return;
    }

    const accounts = await sdk.requestAccounts()
    if (accounts) {
      setUserAddress(accounts)
    }
  }

Step 6. Implement Connect Ronin Wallet button

Let's implement a Connect Ronin Wallet button that connects your app with the Ronin Wallet’s provider. To do this, you need to combine the code from the preceding steps, as shown in the following example.

Here, if the user’s wallet is locked, the button requests that they unlock it. After that's done, the user's address is printed out.

You can paste this example into your page.tsx file and run it locally.

page.tsx
'use client' // makes the useState hook a client component

import { useState } from 'react'
import { WalletSDK } from '@roninnetwork/wallet-sdk'

function ConnectRoninWalletButton(props) {
  const [userAddress, setUserAddress] = useState()

  function checkRoninInstalled() {
    if ('ronin' in window) {
      return true
    } 

    window.open('https://wallet.roninchain.com', '_blank') 
    return false
  }

  async function connectRoninWallet(props) {
    const sdk = new WalletSDK()
    await sdk.connectInjected()

    const isInstalled = checkRoninInstalled()
    if (isInstalled === false) {
      return;
    }

    const accounts = await sdk.requestAccounts()
    if (accounts) {
      setUserAddress(accounts)
    } 
  }

  if (userAddress === undefined) {
    return <button onClick={connectRoninWallet}>Connect Ronin Wallet</button> 
  }

  if (userAddress) {
    return `🎉 Ronin Wallet is connected, current address: ${userAddress}` 
  }
}

export default ConnectRoninWalletButton

Or try it right in the browser by clicking Connect Ronin Wallet at the bottom:

Live Editor

function ConnectRoninWalletButton(props) {
  const [userAddress, setUserAddress] = useState()

  function checkRoninInstalled() {
    if ('ronin' in window) {
      return true
    } 

    window.open('https://wallet.roninchain.com', '_blank') 
    return false
  }

  async function connectRoninWallet(props) {
    const sdk = new WalletSDK()
    await sdk.connectInjected()

    const isInstalled = checkRoninInstalled()
    if (isInstalled === false) {
      return;
    }

    const accounts = await sdk.requestAccounts()
    if (accounts) {
      setUserAddress(accounts)
    } 
  }

  if (userAddress === undefined) {
    return <button onClick={connectRoninWallet}>Connect Ronin Wallet</button> 
  }

  if (userAddress) {
    return `🎉 Ronin Wallet is connected, current address: ${userAddress}` 
  }
}

Result

Overview​

Before you start​

Step 1. Install the dependencies​

Step 2. Detect the Ronin Wallet provider​

Step 3. Initialize the SDK​

Step 4. Prompt the user to unlock the wallet​

Step 5. Get user's current address​

Step 6. Implement Connect Ronin Wallet button​

See also​