Ronin Waypoint React Native SDK

The Ronin Waypoint React Native SDK enables developers to seamlessly integrate account and wallet functionalities from the Ronin Waypoint service into React Native apps. With this SDK, users can sign in with their Ronin Waypoint account and connect their keyless wallet for instant in-app transactions.

Features

• User Authorization: Enable users to sign in with Ronin Waypoint and connect their keyless or externally owned account (EOA) wallets.
• Send transactions: Transfer RON, ERC-20 tokens, and make contract calls for in-app transactions.
• Sign messages and typed data: Prove ownership of a wallet or sign structured data.

Prerequisites

• An app created in the Developer Console.

• Permission to use Ronin Waypoint. Request in Developer Console > your app > App Permission > Sky Mavis Account (OAuth 2.0) > Request Access.

• A client ID from Developer Console > Products > Waypoint Service > Client ID.

• A registered redirect URI from Developer Console > Products > Waypoint Service > Redirect URI.

• React Native 0.65 or later.

• Ensure minSdkVersion=24 (Android)

  //android/gradle.properties
  WaypointNative_minSdkVersion=24

• Set up your navigation and deeplink (Skip this step if you've already done it)

  • React Navigation: Stack Navigator
  • React Navigation: Deep Linking

  Once completed, it will look like this:

//App.tsx
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>
  );
}

Installation

npm install @sky-mavis/waypoint-native

Usage

Initialization

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

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

Use waypoint.onResponse and Waypoint.parseCallbackMessage to capture the response

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

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.

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

Send a transaction

Transfers 0.1 RON to another address, returning a transaction hash.

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 signature.

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

Sign typed data

Signs EIP-712 typed data for an order on Axie Marketplace, returning a signature.

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

Allows another contract to spend 1 RON on user's behalf, returning a transaction hash.

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

Parse a deeplink

Use to parse a deeplink to CallbackMessage object.

Waypoint.parseCallbackMessage(deeplink);

CallbackMessage type

type CallbackMessage = {
  success: boolean;
  state: string;
  method: string;
  address?: string;
  data?: string;
};

Documentation

For more information, see the Ronin Waypoint React Native SDK integration guide.