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 Developer Console. For example, mydapp://callback.
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 Developer Console.
Permission to use the Sky Mavis Account service. Request in the Developer Console under your app > App Permission > Sky Mavis Account (OAuth 2.0) > Request Access.
A client ID that you can find in the Developer Console under Products > Waypoint Service > CLIENT ID (APPLICATION ID).
A redirect URI registered in the Developer Console under Products > Waypoint 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:

After this setup, your App.tsx file should look like this:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from './Home';

const prefix = 'mydapp://'; // Example: mydapp://callback
const Stack = createNativeStackNavigator();

export default function App() {
  const linking = {
    prefixes: [prefix],
    config: {
      screens: {
        Home: 'callback',
      },
    },
  };

  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Install the package

Run the following command to install the SDK:

npm install @sky-mavis/waypoint-native

Initialization

Initialize the client:

// Import the Waypoint class
import Waypoint from '@sky-mavis/waypoint-native';

// Initialize the client
const waypoint = new Waypoint(
  '<waypoint_origin>',
  '<client_id>',
  '<rpc_url>',
  <chain_id>
);

Parameters:

waypointOrigin: the base URL of Ronin Waypoint for all API calls as https://waypoint.roninchain.com.
client_id: the client ID registered in the Developer Console.
rpc_url: 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.
chain_id: 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, use the waypoint.onResponse method and Waypoint.parseCallbackMessage utility:

const route = useRoute();
useEffect(() => {
  if (route.path) waypoint.onResponse(route.path);
}, [route.path]);

const showDialogResult = async (url: string) => {
  const response = Waypoint.parseCallbackMessage(url);
  Alert.alert(
    'Response',
    `Success: ${response.success}\nState: ${response.state}\nMethod: ${response.method}\nAddress: ${response.address}\nData: ${response.data}`
  );
};

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, redirectUri: string): Promise<AuthorizationResult>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
redirectUri: the redirect URI registered in the Developer Console.

Example:

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

Wallet interactions

RON transfer

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

sendTransaction(state: string, redirectUri: string, to: string, value: string): Promise<TransactionResult>

Parameters:

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

Example: transfer 0.1 RON to another address.

const sendTransaction = async () => {
  const state = uuidv4();
  const to = '0xD36deD8E1927dCDD76Bfe0CC95a5C1D65c0a807a';
  const value = '100000000000000000';
  const result = await waypoint.sendTransaction(state, redirectUri, to, value);
  showDialogResult(result);
};

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, redirectUri: string, message: string): Promise<SignatureResult>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
redirectUri: the redirect URI registered in the Developer Console.
message: the message to sign.

Example: sign the message accepting the terms and conditions.

const personalSign = async () => {
  const state = uuidv4();
  const message = 'I accept the terms and conditions.';
  const result = await waypoint.personalSign(state, redirectUri, message);
  showDialogResult(result);
};

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, redirectUri: string, typedData: string): Promise<SignatureResult>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
redirectUri: the redirect URI registered in the Developer Console.
typedData: a JSON string that specifies the EIP-712 typed structured data to be signed by the user.

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, redirectUri, typedData);
  showDialogResult(result);
};

Contract function calls

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

callContract(state: string, redirectUri: string, contractAddress: string, data: string, value: string): Promise<TransactionResult>

Parameters:

state: a unique random identifier used to manage requests from the client to Ronin Waypoint.
redirectUri: the redirect URI registered in the Developer Console.
contractAddress: 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.

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

const callContract = async () => {
  const state = uuidv4();
  const contractAddress = '0x3c4e17b9056272ce1b49f6900d8cfd6171a1869d';
  const value = '0x0';
  const data =
    '0xa9059cbb000000000000000000000000edb40e7abaa613a0b06d86260dd55c7eb2df2447000000000000000000000000000000000000000000000000016345785d8a0000';
  const result = await waypoint.callContract(
    state,
    redirectUri,
    contractAddress,
    data,
    value
  );
  showDialogResult(result);
};

Utilities

Deep link parser

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

Waypoint.parseCallbackMessage(deeplink);

CallbackMessage type

The CallbackMessage 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 CallbackMessage = {
  success: boolean;
  state: string;
  method: string;
  address?: string;
  data?: string;
};

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.
`sendTransaction`	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.
`callContract`	Executes functions on smart contracts.	Supports in-game ERC-20 token transfers, approvals, and other contract interactions.

Was this helpful?

Happy React is loading...

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​

CallbackMessage type​

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

CallbackMessage type

Reference

Function summary