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