Skip to main content

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​

Steps​

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:
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​