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.

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

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.

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: prove ownership of a wallet or sign structured data.

Prerequisites

Android API level 24 or later.
React Native version 0.65 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.

Steps

Step 1. Configure the SDK

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>
  );
}

Step 2. Install the SDK

Run the following command to install the SDK:

npm install @sky-mavis/waypoint-native

Step 2. Initialize the SDK

Initialize the client:

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

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

Parameters:

id_origin: the base URL of Ronin Waypoint for all API calls. Use https://waypoint.roninchain.com for production and https://id.skymavis.one for staging.
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}`
  );
};

Step 3. Authorize a user

Initializes the authorization process, allowing a user to sign in or sign up for a Ronin Waypoint account, and connect their wallet. Returns an authorization response containing 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);
};

Step 4. Validate the ID token

After receiving the ID token from the authorization response, validate it and issue an access token to allow access to your server's resources. For more information, see Validate ID token.

Step 5. Interact with the wallet

Transfer the native token

Transfers RON tokens to a recipient's address, returning 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 the recipient address.

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

Sign a message

Signs a plain text message, returning 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 "Hello Axie."

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

Sign typed data

Signs typed data structured according to the EIP-712 standard, returning 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);
};

Call a contract

Executes a custom transaction on a smart contract, returning 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

FAQ

Where can I find the client ID?

To find your app's client ID, open the Developer Console, then click Waypoint Service, and then in the Client credentials section, locate the CLIENT ID (APPLICATION ID) field.

Where can I find the chain ID?

The chain ID is 2020 for the Ronin mainnet and 2021 for the Saigon testnet.

Was this helpful?

Happy React is loading...

Overview​

Usage​

Features​

Prerequisites​

Steps​

Step 1. Configure the SDK​

Set Android SDK version​

Set up navigation and deep linking​

Step 2. Install the SDK​

Step 2. Initialize the SDK​

Step 3. Authorize a user​

Step 4. Validate the ID token​

Step 5. Interact with the wallet​

Transfer the native token​

Sign a message​

Sign typed data​

Call a contract​

Utilities​

Deep link parser​

CallbackMessage type​

Reference​

FAQ​

Where can I find the client ID?​

Where can I find the chain ID?​

Overview

Usage

Features

Prerequisites

Steps

Step 1. Configure the SDK

Set Android SDK version

Set up navigation and deep linking

Step 2. Install the SDK

Step 2. Initialize the SDK

Step 3. Authorize a user

Step 4. Validate the ID token

Step 5. Interact with the wallet

Transfer the native token

Sign a message

Sign typed data

Call a contract

Utilities

Deep link parser

CallbackMessage type

Reference

FAQ

Where can I find the client ID?

Where can I find the chain ID?