Connect with Ronin Wallet using WalletConnect
Overview
This tutorial shows how to connect your desktop or mobile app to the Ronin Wallet mobile app using WalletConnect.
By the end of the tutorial, your app will be connected to Ronin Wallet, after which you can start making requests to the user's wallet.
Before you start
Before you start the tutorial, make sure you have a Next.js app to experiment with. Follow the installation instruction.
Step 1. Obtain a WalletConnect project ID
To use WalletConnect, you need a project ID. To retrieve the project ID, your app must register a project with WalletConnect Cloud.
- Visit cloud.walletconnect.com.
- Sign up for a WalletConnect account.
- Create a new project.
- Locate and copy the project ID.
Step 2. Initialize the SDK with the project ID
To initialize the SDK, pass your WalletConnect project ID using mobileOptions
.
const walletSdk = new WalletSDK({
mobileOptions: { walletConnectProjectId: <project ID> }
})
Step 3. Handle the connection URI
To connect with Ronin Wallet mobile, a WalletConnect session has to be established between your app and the wallet.
Your app initializes the session and requests the wallet to connect with a URI.
The URI can be represented to Ronin Wallet in two ways:
- QR code
- Deep link
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 the SDK is connected, 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 mobile Ronin Wallet, your app is connected to Ronin Wallet.
Using window.open()
to open deep links is not reliable. The link should be attached to a clickable component, such as an <a>
tag.
Step 6. Implement the connect button
Let's implement a Connect Ronin Wallet button. To do this, you need to combine the code from the preceding steps, as shown in the following example.
The example implements the button by rendering the URI in a QR code. This code can be scanned by the Ronin Wallet mobile app or opened in the mobile app via a deep link.
function ConnectRoninWalletMobile() {const [userAddress, setUserAddress] = useState()const [uri, setUri] = useState()const sdk = useRef()useEffect(() => {sdk.current = new WalletSDK({mobileOptions: { walletConnectProjectId: 'd2ef97836db7eb390bcb2c1e9847ecdc' }})}, [])async function connectRoninWallet() {if(!sdk.current) {alert('SDK is not ready')}sdk.current.on('display_uri', wcUri => {setUri(wcUri)})await sdk.current.connectMobile()const accounts = await sdk.current.getAccounts()if (accounts) {setUserAddress(accounts[0])}}if (userAddress === undefined) {return (<div>{uri && isMobile() && sdk.current && (<a href={sdk.current.getDeeplink()}>Open mobile app</a>)}{uri && !isMobile() && (<><div>Scan me:</div> <QRCode value={uri} /></>)}{!uri && <button onClick={connectRoninWallet}>Connect Ronin Wallet</button>}</div>)}if (userAddress) {return `🎉 Ronin Wallet is connected, current address: ${userAddress}`}}