Connect using WalletConnect
Overview
This tutorial shows how to connect your decentralized app to the Ronin Wallet mobile app using WalletConnect. By the end of this tutorial, your app can connect with Ronin Wallet, enabling you to make requests to the connected user's wallet.
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.
Steps
Step 1. Get a WalletConnect project ID
To use WalletConnect, you need a WalletConnect project ID. Follow these steps:
- Visit cloud.walletconnect.com.
- Sign up for a WalletConnect account or sign in if you already have an account.
- Create a new project or use an existing one.
- Locate and copy the project ID.
Step 2. Initialize the SDK with the project ID
- In your preferred code editor, open the
page.tsx
file. - To initialize the SDK, pass your WalletConnect project ID using
mobileOptions
:
const walletSdk = new WalletSDK({
mobileOptions: { walletConnectProjectId: <projectID> }
})
Step 3. Handle the connection URI
To connect to Ronin Wallet mobile, establish a WalletConnect session between your app and the wallet. Your app initializes the session and requests the wallet to connect through a URI.
To handle the URI, process the display_uri
event emitted by the SDK:
sdk.on('display_uri', wcUri => {
handle(wcUri)
})
Step 4. Switch to the Saigon testnet
To bypass the domain allowlist in the Ronin Wallet mobile app, you need to switch network to the Saigon testnet.
- Open Ronin Wallet and go to Settings.
- Scroll down to You are a developer?, then select Tap here.
- Turn on Developer Mode.
- In Network, select Saigon Testnet.
Step 5. Connect the SDK to WalletConnect
Now that you have the project ID and the handler for the connection URI, you can connect the SDK to
WalletConnect using the connectMobile
method.
await sdk.connectMobile()
After connection, the SDK emits the display_uri
event. You can show the URI
to the user by using a QR code or attaching a deep link to a clickable component.
In the following example, we use an external QR code component from qrcode.react.
<QRCode value={wcUri}>
After the user scans the QR code with their Ronin Wallet mobile app, your app is connected to Ronin Wallet.
Using window.open()
to open deep links isn't reliable. You should instead attach the link to a clickable component, such as an <a>
tag.