Skip to main content

Connect to Ronin Wallet using Reown

Overview​

This tutorial shows how to connect your decentralized app to the Ronin Wallet mobile app using Reown. By the end of this tutorial, your app can connect with Ronin Wallet, enabling you to make requests to the wallet.

Prerequisites​

Steps​

Step 1. Get Reown project ID​

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

  1. Visit cloud.reown.com.
  2. Sign up for a Reown 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. Install dependencies​

First, install the Sky Mavis Tanto connect package by running the following command in your terminal.

npm install @sky-mavis/tanto-connect

In your preferred code editor, open the file where you want to connect to Ronin Wallet mobile, and then add the following imports:

import { useState } from 'react';
import { 
  ConnectorEvent,
  requestRoninWalletConnector
} from '@sky-mavis/tanto-connect';

Step 3. Set up connecting component​

Create a new component called ConnectRoninWalletMobile that will handle the connection to Ronin Mobile wallet. This component will contain a button that, when clicked, will display a QR code that the user can scan with the Ronin Wallet mobile app (if the user is on a desktop) or a deep link that the user can click to open the Ronin Wallet mobile app (if the user is on a mobile device).

import { useState } from 'react';
import { 
  ConnectorEvent,
  requestRoninWalletConnector
} from '@sky-mavis/tanto-connect';

function ConnectRoninWalletMobile(props) {
  const [connector, setConnector] = useState(null);
  const [connectedAddress, setConnectedAddress] = useState();

  const [displayUri, setDisplayUri] = useState<string | null>(null);

  return <button>Connect Ronin Wallet</button>
}

export default ConnectRoninWalletMobile;

Step 4. Configure Reown​

Add a configuration object for Reown. If you haven't completed step 1 yet, don't worry, the @sky-mavis/tanto-connect package has already provided a default configuration for you. However, if you want to use your own configuration, you can define it as follows:

const wcOptions = {
  projectId: 'YOUR_PROJECT_ID',
  metadata: {
    name: 'YOUR_APP_NAME',
    description: 'YOUR_APP_DESCRIPTION',
    icons: ['YOUR_APP_ICON_URL'],
    url: 'https://wallet.roninchain.com',
  }
}

Step 5. Request Ronin connector when component mounts​

We will use a useEffect hook that runs when the component mounts. This hook will call the requestRoninWalletConnectConnector function from the @sky-mavis/tanto-connect package to obtain the WalletConnect connector.

import { useState } from 'react';
import { 
  ConnectorEvent,
  requestRoninWalletConnectConnector,
} from '@sky-mavis/tanto-connect';

function ConnectRoninWalletMobile(props) {
  const [connector, setConnector] = useState(null);
  const [connectedAddress, setConnectedAddress] = useState();

  const [displayUri, setDisplayUri] = useState<string | null>(null);

  useEffect(() => {
    requestRoninWalletConnectConnector(wcOptions)
      .then((wcConnector) => {
        setConnector(wcConnector);
      })
  }, [])

  return <button>Connect Ronin Wallet</button>
}

export default ConnectRoninWalletMobile;

Step 6. Get URI to connect to Ronin Wallet​

When connecting to Ronin Wallet mobile, a Reown session is established 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 ConnectorEvent.DISPLAY_URI event emitted after the connection is established. The connector.on method listens for the event and sets the URI to the state.

import { useState } from 'react';
import { 
  ConnectorEvent,
  requestRoninWalletConnectConnector,
} from '@sky-mavis/tanto-connect';

function ConnectRoninWalletMobile(props) {
  const [connector, setConnector] = useState(null);
  const [connectedAddress, setConnectedAddress] = useState();

  const [displayUri, setDisplayUri] = useState<string | null>(null);

  useEffect(() => {
    requestRoninWalletConnectConnector(wcOptions)
      .then((wcConnector) => {
        setConnector(wcConnector);
        wcConnector.on(ConnectorEvent.DISPLAY_URI, uri => setUri(uri));
      })
  }, [])

  return <button>Connect Ronin Wallet</button>
}

export default ConnectRoninWalletMobile;

You can show the URI to the user by using a QR code or attaching a deep link to a clickable component. In this example, we will use both methods. We will use an external QR code component from qrcode.react to display the QR code.

<QRCode value={uri} />

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

Let's add a Connect Ronin Wallet button. To do this, combine the code from the preceding steps, as shown in the following example.

This example implements the button by rendering the URI in a QR code. The code can be scanned by the Ronin Wallet mobile app or opened in the mobile app using a deep link.

Live Editor
function ConnectRoninWalletMobile(props) {
  const [connector, setConnector] = useState(null);
  const [connectedAddress, setConnectedAddress] = useState();

  const [displayUri, setDisplayUri] = useState<string | null>(null);

  useEffect(() => {
    requestRoninWalletConnectConnector()
      .then((wcConnector) => {
        setConnector(wcConnector);
        wcConnector.on(ConnectorEvent.DISPLAY_URI, uri => setDisplayUri(uri));
      });
  }, [])

  async function connectRoninWallet() {
    if (!connector) {
      alert('Connector is not ready')
    }

    const connectResult = await connector?.connect();

    if (connectResult) {
      setConnectedAddress(connectResult.account);
    }
  }

  if (connectedAddress === undefined) {
    return (
      <div>
        {displayUri && isMobile() && connector && (<a href={displayUri}>Open mobile app</a>)}
        {displayUri && !isMobile() && (
          <>
            <div>Scan me:</div>
            <QRCode value={displayUri} />
          </>
        )}
        {!displayUri && <button onClick={connectRoninWallet}>Connect Ronin Wallet</button>}
      </div>
    )
  }

  if (connectedAddress) {
    return `🎉 Ronin Wallet is connected, current address: ${connectedAddress}` 
  }
}
Result
Loading...

See also​