@sky-mavis/waypoint-native

Mavis ID SDK for React Native

Prerequisites

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://'; // My deeplink: 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

yarn add @sky-mavis/waypoint-native

Usage

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

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

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

// Parse the response
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
const authorizeResult = await waypoint.authorize(state, redirectUri);
showDialogResult(authorizeResult);

// Personal sign
const state = uuidv4();
const message = 'Hello Axie';
const signature = await waypoint.personalSign(state, redirectUri, message);
showDialogResult(signature);