Skip to main content

Ronin Waypoint Web SDK

Overview​

The Ronin Waypoint Web SDK lets developers integrate the account and wallet features of the Ronin Waypoint service into browser-based games developed with JavaScript or TypeScript. After the integration, users can sign in to your game with their Ronin Waypoint account and connect their keyless wallet for instant in-game transactions.

The SDK provides the RoninWaypointWallet, an EIP-1193-compatible wallet provider, letting developers use the standard JavaScript Ethereum libraries, such as Ethers.js, web3.js, or viem.

GitHub repository: skymavis/waypoint-js.

Features​

  • Authorize users: let users sign in to your app with Ronin Waypoint and connect their 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​

Tools and libraries:

Permissions:

  • 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​

Experience Ronin Waypoint in the Ronin Waypoint playground built with Next.js and the Ronin Waypoint Web SDK. The playground demonstrates how to authorize users, connect their keyless wallet, and interact with the wallet provider. After creating a keyless wallet, fund it with testnet RON tokens from the Ronin Faucet. For a more detailed explanation, see the User journey page.

Setup​

Installation​

To install the SDK, use the following command:

npm install @sky-mavis/waypoint
# or
yarn add @sky-mavis/waypoint
# or
pnpm install @sky-mavis/waypoint

Initialization​

From the SDK, import RoninWaypointWallet and pass the required parameters to create a wallet provider for interacting with Ronin Waypoint.

import { RoninWaypointWallet } from "@sky-mavis/waypoint"

const idWalletProvider = RoninWaypointWallet.create({
  // Replace with the client ID from the Developer Console
  clientId: "<YOUR_CLIENT_ID>",
  // Specify the chain ID: 2021 for Saigon testnet, 2020 for Ronin mainnet
  chainId: chainId,
})

Parameters:

  • clientId: the client ID registered in the Developer Console.
  • chainId: the ID of the Ronin chain you want to connect to. Use 2021 for the Saigon testnet and 2020 for the Ronin mainnet.

Usage​

User authorization and wallet connection​

Initializes the authorization process, allowing a user to sign in or sign up for a Ronin Waypoint account, and connect their wallet.

Returns an ID token and the user's wallet addresses, which includes the keyless wallet address and optional EOA (externally owned account) wallet address, if the user connected one on the account management site. For projects with a backend system, you can use this function for authorization. If you only need to interact with the user's keyless wallet, you can skip this step.

Ronin Waypoint provides two methods for authorization:

  • Popup: open Ronin Waypoint in a new window and communicate between the two tabs. See the popup code example.
  • Redirect: open Ronin Waypoint in the current window and redirect back to the app after authorization. See the redirect code example.
import { authorize } from "@sky-mavis/waypoint"

const result = await authorize({
  clientId: "<YOUR_CLIENT_ID>",
  /* redirectUrl: "http://localhost/authorize/waypoint" // If you use the redirect flow */
})

console.debug(result); // { accessToken: '<id_token>', address: '<user_address>' }

Parameters:

Returns a promise that resolves to an object containing:

  • accessToken: the ID token that contains encoded user information.
  • address: the user's keyless wallet address.
  • secondaryAddress: the user's EOA wallet address, if connected.

Wallet interactions​

After the user connects their wallet, you can interact with it using the wallet provider. The provider is compatible with the EIP-1193 standard, allowing you to use common Ethereum libraries to interact with the blockchain.

import * as ethers from "ethers"

const provider = new ethers.providers.Web3Provider(provider)

Contract function calls​

You can use the wallet provider to call functions on smart contracts for in-game transactions. The provider is compatible with the EIP-1193 standard, allowing you to use common Ethereum libraries to interact with the blockchain: