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.

1. Visit cloud.walletconnect.com.
2. Sign up for a WalletConnect account.
3. Create a new project.
4. 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.

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 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.

caution

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.

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 with Ronin Wallet using an injected provider
• Ronin Wallet JS SDK