Connect to Ronin Wallet using an injected provider

Overview

This tutorial shows how to connect your decentralized web app to the Ronin Wallet browser extension using an injected provider. By the end of this tutorial, your app can connect with Ronin Wallet, enabling you to make requests to the connected user's wallet.

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

When a user accesses your app, the injected provider injects a web3 object into the app's JavaScript runtime environment. This web3 object allows the app 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 app to sign and send transactions on behalf of the user. This integration simplifies the user experience, because users don't need to manually enter their account details for each interaction with the app.

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.

Prerequisites

A simple Next.js app that you can install following the official instruction.
A Ronin chain address that you can sign up for at wallet.roninchain.com.

Step 1. Install the dependencies

From the directory with your example app, install the WalletConnect modal by running the following command:
```
yarn add @walletconnect/modal
```
Install the Ronin Wallet SDK:
```
yarn add @roninnetwork/wallet-sdk
```
In your preferred code editor, open the page.tsx file, and then import the SDK by adding the following line:
page.tsx
```
import { WalletSDK } from '@roninnetwork/wallet-sdk'
```

Step 2. Detect the Ronin Wallet provider

Before interacting with an injected provider, your app must verify the existence of this provider.

If a user already installed Ronin Wallet, a window.ronin object is available to access. If Ronin Wallet is not installed, 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()

In the following example, the connectRoninWallet function returns a promise that resolves only when the user unlocks their wallet, provided that they have the Ronin Wallet app 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 unlocks the wallet, 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. Connect Ronin Wallet

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 displayed.

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 the Connect Ronin Wallet button 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​

Prerequisites​

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. Connect Ronin Wallet​

See also​