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.
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:
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:
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:
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.
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:
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.
'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:
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}`}}