Ronin Waypoint React Native SDK

Overview

The Ronin Waypoint React Native SDK lets developers integrate the account and wallet features of the Ronin Waypoint service into Android and iOS apps developed with React Native. After the integration, users can sign in to your app with their Ronin Waypoint account and connect their keyless wallet for instant in-app transactions.

Usage

All functions of the SDK return a string in the format of the deep link schema that you registered in the Ronin Developer Console. For example, mydapp://.
To parse deep links returned by the SDK, use the Deep link parser utility or implement your own parser.

Package repository: @sky-mavis/waypoint-native.

Features

Authorize users: let users sign in to your app with Ronin Waypoint to connect their keyless wallet and an optional externally owned account (EOA) wallet.
Send transactions: transfer RON, ERC-20 tokens, and make contract calls for in-game transactions.
Sign messages and typed data: have users sign messages and structured data to prove ownership of their wallet and authorize transactions.

Prerequisites

React Native version 0.65 or later.
To deploy to Android, Android API level 24 or later.
To deploy to iOS, iOS 13.0 or later and Xcode 15.4 or later.
An app created in the Ronin Developer Console.
Permission to use the Ronin Waypoint Account Service. Request in the Ronin Developer Console under your app > App Permission > Waypoint Account Service > Request Access.
A client ID that you can find in the Ronin Developer Console under Ronin Services > Waypoint Account Service> CLIENT ID (PROJECT ID).
A redirect URI registered in the Ronin Developer Console under Ronin Services > Waypoint Account Service> REDIRECT URI.

For more information about the initial setup, see Get started.

Example app

The React Native SDK includes an example app that demonstrates the SDK features. To run the app, follow these steps:

Clone the skymavis/waypoint-native repository.
Run yarn to install the dependencies.
For Android example, run yarn example android to build and run the app on an Android emulator or device. For iOS, run yarn example ios.

Setup

Installation

Set Android SDK version

For Android apps, set the minimum Android SDK version to 24 in the gradle.properties file:

WaypointNative_minSdkVersion=24

To handle the deep links returned by the server, set up navigation and deep linking in your app. For more information, see the following guides:

Install the package

Run the following command to install the SDK:

npm
Yarn
pnpm

npm install @sky-mavis/waypoint-native

yarn add @sky-mavis/waypoint-native

pnpm add @sky-mavis/waypoint-native

Initialization

Initialize the client:

import Waypoint from "@sky-mavis/waypoint-native";

export const waypoint = new Waypoint({
  waypointOrigin: "https://waypoint.roninchain.com",
  clientId: "69359809-e7ab-4156-9a5f-bed4a6302cee",
  redirectUri: "mydapp://",
  rpcUrl: "https://api.roninchain.com/rpc",
  chainId: 2020,
});

Parameters:

waypointOrigin: the base URL of Ronin Waypoint for all API calls as https://waypoint.roninchain.com.
clientId: the client ID registered in the Ronin Developer Console.
redirectUri: the redirect URI registered in the Ronin Developer Console.
rpcUrl: the RPC endpoint through which you want to connect to Ronin. The example uses a public endpoint for the Saigon testnet: https://saigon-testnet.roninchain.com/rpc. For more information, see RPC endpoints.
chainId: the ID of the Ronin chain you want to connect to. Use 2021 for the Saigon testnet and 2020 for the Ronin mainnet.

To capture the response, put the waypoint.onResponse on your App.tsx method:

App.tsx
export default function App() {
  useEffect(() => {
    const handleDeepLink = async (event: { url: string }) => {
      waypoint.onResponse(event.url);
    };

    const unsubscribe = Linking.addEventListener("url", handleDeepLink);

    return () => {
      unsubscribe.remove();
    };
  }, []);
}

Usage

User authorization and wallet connection

Use the authorize function to sign in to a Ronin Waypoint account, connect the user's wallet, and return an ID token and the user's keyless wallet address.

authorize(state: string, scope?: string): Promise<string>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
scope: The OAuth 2.0 scope. Available values are openid, profile, email, and wallet.

Example:

const authorize = async () => {
  const state = uuidv4();
  const result = await waypoint.authorize(state);
};

Wallet interactions

RON transfer

Use the sendNativeToken function to send RON tokens to a recipient's address. The function returns a response containing the transaction hash.

sendNativeToken(state: string, to: string, value: string, from?: string): Promise<string>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
to: the recipient address.
value: the amount of RON to send, specified in wei (1 RON = 10^18 wei).
from: the sender address.

Example: transfer 0.1 RON to another address.

const sendNativeToken = async () => {
  const state = uuidv4();
  const to = "0xD36deD8E1927dCDD76Bfe0CC95a5C1D65c0a807a";
  const value = "100000000000000000";
  const result = await waypoint.sendNativeToken(state, to, value);
};

Message signing

Use the personalSign function to sign plain text messages with the user's wallet. The function returns a response containing the signature.

personalSign(state: string, message: string, from?: string): Promise<string>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
message: the message to sign.
from: the sender address.

Example: sign the message accepting the terms and conditions.

const personalSign = async () => {
  const state = uuidv4();
  const message = "Hello Axie";
  const result = await waypoint.personalSign(state, message);
};

Typed data signing

Use the signTypedData function to sign typed data structured according to the EIP-712 standard. The function returns a response containing the signature.

signTypedData(state: string, typedData: string, from?: string): Promise<string>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
typedData: a JSON string that specifies the EIP-712 typed structured data to be signed by the user.
from: the sender address.

Example: sign typed data for an order on Axie Marketplace.

const signTypedData = async () => {
  const state = uuidv4();
  const typedData = `{"types":{"Asset":[{"name":"erc","type":"uint8"},{"name":"addr","type":"address"},{"name":"id","type":"uint256"},{"name":"quantity","type":"uint256"}],"Order":[{"name":"maker","type":"address"},{"name":"kind","type":"uint8"},{"name":"assets","type":"Asset[]"},{"name":"expiredAt","type":"uint256"},{"name":"paymentToken","type":"address"},{"name":"startedAt","type":"uint256"},{"name":"basePrice","type":"uint256"},{"name":"endedAt","type":"uint256"},{"name":"endedPrice","type":"uint256"},{"name":"expectedState","type":"uint256"},{"name":"nonce","type":"uint256"},{"name":"marketFeePercentage","type":"uint256"}],"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}]},"domain":{"name":"MarketGateway","version":"1","chainId":2021,"verifyingContract":"0xfff9ce5f71ca6178d3beecedb61e7eff1602950e"},"primaryType":"Order","message":{"maker":"0xd761024b4ef3336becd6e802884d0b986c29b35a","kind":"1","assets":[{"erc":"1","addr":"0x32950db2a7164ae833121501c797d79e7b79d74c","id":"2730069","quantity":"0"}],"expiredAt":"1721709637","paymentToken":"0xc99a6a985ed2cac1ef41640596c5a5f9f4e19ef5","startedAt":"1705984837","basePrice":"500000000000000000","endedAt":"0","endedPrice":"0","expectedState":"0","nonce":"0","marketFeePercentage":"425"}}`;
  const result = await waypoint.signTypedData(state, typedData);
};

Contract function calls

Use the sendTransaction function to execute a function on a smart contract. The function returns a response containing the transaction hash.

sendTransaction(state: string, to: string, data?: string, value?: string, from?: string): Promise<string>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
to: the address of the smart contract on which to execute the transaction.
data: the transaction data to send to the smart contract, encoded as a hex string.
value: the amount of RON in wei (1 RON = 10^18 wei) to send along with the transaction. For non-payable smart contracts, the value is 0x0.
from: the sender address.

Example: allow another contract to spend 1 AXS on user's behalf.

const sendTransaction = async () => {
  const state = uuidv4();
  const contractAddress = "0x3c4e17b9056272ce1b49f6900d8cfd6171a1869d";
  const value = "0x0";
  const data =
    "0xa9059cbb000000000000000000000000edb40e7abaa613a0b06d86260dd55c7eb2df2447000000000000000000000000000000000000000000000000016345785d8a0000";
  const result = await waypoint.sendTransaction(
    state,
    contractAddress,
    data,
    value,
  );
};

Utilities

Deep link parser

Use the Waypoint.parseDeeplink(deeplink) utility to parse a deep link returned by a function, and assign it to a WaypointResponse object.

Waypoint.parseDeeplink(deeplink);

WaypointResponse

The WaypointResponse type represents the structure of the response returned by the SDK functions. It contains information about the response, including whether the operation was successful, the method called, and additional details such as the user's keyless wallet address, data like transaction hashes, and state.

type WaypointResponse = {
  state: string;
  success: boolean;
  error:
    | {
        code: number;
        message: string;
      }
    | undefined;
  data: Record<string, string> | undefined;
};

Reference

Function summary

Function	Description	Use case
`authorize`	Signs user in to Ronin Waypoint and returns their wallet address.	Used for user sign-in and wallet connection.
`sendNativeToken`	Sends RON tokens to a recipient address.	Supports in-game purchases or token transfers.
`signMessage`	Signs plain text messages with the user's wallet.	Proves wallet ownership or agreement to terms.
`signTypedData`	Signs structured data following the EIP-712 standard.	Useful for complex data structures, such as marketplace orders.
`sendTransaction`	Executes functions on smart contracts.	Supports in-game ERC-20 token transfers, approvals, and other contract interactions.

Overview​

Features​

Prerequisites​

Example app​

Setup​

Installation​

Set Android SDK version​

Set up navigation and deep linking​

Install the package​

Initialization​

Usage​

User authorization and wallet connection​

Wallet interactions​

RON transfer​

Message signing​

Typed data signing​

Contract function calls​

Utilities​

Deep link parser​

WaypointResponse​

Reference​

Function summary​

Overview

Features

Prerequisites

Example app

Setup

Installation

Set Android SDK version

Set up navigation and deep linking

Install the package

Initialization

Usage

User authorization and wallet connection

Wallet interactions

RON transfer

Message signing

Typed data signing

Contract function calls

Utilities

Deep link parser

WaypointResponse

Reference

Function summary