npm package: @sky-mavis/waypoint-native
Description: Ronin Waypoint SDK for React Native
Author: nguyenhuugiatri
Latest version: 0.2.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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

- All functions of the SDK return a string in the format of the deep link schema that you registered in the [Ronin Developer Console](https://developers.roninchain.com/console/applications). For example, `mydapp://`.
- To parse deep links returned by the SDK, use the [Deep link parser](#deep-link-parser) utility or implement your own parser.

Package repository: [@sky-mavis/waypoint-native](https://www.npmjs.com/package/@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](https://reactnative.dev/) version 0.65 or later.
- To deploy to Android, [Android API level 24](https://developer.android.com/about/versions/nougat) or later.
- To deploy to iOS, [iOS 13.0](https://developer.apple.com/ios/) or later and [Xcode](https://developer.apple.com/xcode/) 15.4 or later.
- An app created in the [Ronin Developer Console](https://developers.roninchain.com/console/applications/).
- 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](../guides/get-started.mdx).

## Example app

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

1. Clone the [skymavis/waypoint-native](https://github.com/skymavis/waypoint-native) repository.
2. Run `yarn` to install the dependencies.
3. 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:

```gradle
WaypointNative_minSdkVersion=24
```

#### Set up navigation and deep linking

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:

- [React Navigation: Stack Navigator](https://reactnavigation.org/docs/stack-navigator)
- [React Navigation: Deep Linking](https://reactnavigation.org/docs/deep-linking/)

#### Install the package

Run the following command to install the SDK:

```bash npm2yarn
npm install @sky-mavis/waypoint-native
```

### Initialization

Initialize the client:

```tsx
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](https://developers.roninchain.com/console/applications).
- 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](../../../ronin/rpc/overview.mdx#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:

```tsx title="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.

```tsx
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:

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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](https://eips.ethereum.org/EIPS/eip-712) standard. The function returns a response containing the signature.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

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