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

Step 1. Get a WalletConnect project ID

To use WalletConnect, you need a WalletConnect project ID. Follow these steps:

1. Visit cloud.walletconnect.com.
2. Sign up for a WalletConnect account or sign in if you already have an account.
3. Create a new project or use an existing one.
4. Locate and copy the project ID.

Step 2. Initialize the SDK with the project ID

1. In your preferred code editor, open the page.tsx file.

2. To initialize the SDK, pass your WalletConnect project ID using mobileOptions:

   page.tsx

   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.

1. Open Ronin Wallet and go to Settings.
2. Scroll down to You are a developer?, then select Tap here.
3. Turn on Developer Mode.
4. 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.

caution

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.

Step 6. Connect Ronin Wallet

Let's add 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 using a deep link.

Live Editor

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}` 
  }
}

Result

Loading...

See also

• Connect to Ronin Wallet using an injected provider
• Ronin Wallet JS SDK