Proton React Native SDK

This SDK is a one-stop package to handle all communications with Proton Wallets through a React Native App.

Demo App

A demo app can be found under https://github.com/ProtonProtocol/taskly-demo-react-native

This demo app can be run for both Android and iOS and is a mobile version of our Taskly demo. Please view the README to get more information on how to get it set up.

Installation

The content of this library is currently under heavy development. Please be aware that all functionality is subject to change at any time. Documentation and examples are also being updated on a regular basis and these updates will be added over time.

This SDK relies on rn-nodeify (https://github.com/tradle/rn-nodeify). To install the project run the following commands:

yarn add @proton/react-native-sdk
yarn add rn-nodeify

Use rn-nodefy to convert the node-modules, in the libraries, to compatible libraries in react-native:

./node_modules/.bin/rn-nodeify --hack --install

To make things easier, this script can be added in the package.json:

{
...
"scripts": {
...
"postinstall": "./node_modules/.bin/rn-nodeify --yarn --hack 'assert,buffer,crypto,dns,domain,events,stream'; node ./bin/postInstall",
}
}

Usage

Initialization

To use the package, import the class ConnectWallet from @proton/react-native-sdk

import {
ConnectWallet,
LinkSession,
ProtonLink,
} from '@proton/react-native-sdk';
class ProtonSDK {
chainId: string;
endpoints: string[];
requestAccount: string;
session: LinkSession;
link: ProtonLink;
constructor() {
this.chainId =
'71ee83bcf52142d61019d95f9cc5427ba6a0d7ff8accd9e2088ae2abeaf3d3dd';
this.endpoints = ['https://testnet.protonchain.com']; // Multiple for fault tolerance
this.requestAccount = 'taskly'; // optional
this.session = null;
this.link = null;
}
...
}

Login

Using the return value from ConnectWallet, call the login method with the chainId, endpoints, the requestAccount and the getReturnUrl function. The getRetunUrl function returns the URL scheme of the app that the user will be redirected to after an interaction with the Proton App. ConnectWallet will return the user session (LinkSession) and a link (ProtonLink).

For more information on each of the arguments and keys, please refer to the Proton Web SDK documentation.

login = async () => {
const { session, link } = await ConnectWallet({
linkOptions: { chainId: this.chainId, endpoints: this.endpoints },
transportOptions: {
requestAccount: this.requestAccount,
getReturnUrl: () => 'taskly://main',
},
});
this.link = link;
this.session = session;
return { auth: session.auth, accountData: session.accountData[0] };
};

The login function can be added to a ProtonSDK class constructed in the initialization above and login can be called like so:

// Usage
const protonSDK = new ProtonSDK();
// usage login()
try {
const { auth, accountData } = await protonSDK.login();
rootStore.setActor(auth.actor);
rootStore.setPermission(auth.permission);
rootStore.setName(accountData.name);
rootStore.setAvatar(accountData.avatar);
// do something like go to a subscription page
navigation.navigate('subscription');
} catch (ex) {
// login failed
Alert.alert('Error', ex.message);
}

Note that login will throw an exception if the user does not authorize the login.

Transaction

To initialize a transaction, use the transact method of the session object in the Proton SDK class:

sendTransaction = async (actions: Action) => {
return this.session.transact({ actions: actions }, { broadcast: true });
};

The following code shows a small example on how to send 5 XUSDT to an account:

try {
const actions = [
{
account: 'xtokens',
name: 'transfer',
authorization: [
{
actor: rootStore.actor, // auth.actor that was saved before
permission: rootStore.permission, // auth.permission that was saved before
},
],
data: {
from: rootStore.actor, // auth.actor that was saved before
to: protonSDK.requestAccount, // the account the transaction is send to
quantity: '5.000000 XUSDT', // the amount of the transaction
memo: 'Taskly',
},
},
];
const tx = await protonSDK.sendTransaction(actions);
// navigate to the subscribed page
navigation.navigate('subscribed');
} catch (ex) {
// the transaction failed
Alert.alert('Error', ex.message);
}

Please note that if the user does not authorize the transaction, an exception will be thrown.

Logout

To logout call removeSession on the link object.

logout = async () => {
await this.link.removeSession(this.requestAccount, this.session.auth);
this.session = null;
this.link = null;
};

In the application, once you have instantiated the ProtonSDK class, you can use it like this:

// usage logout
protonSDK.logout();
navigation.navigate('welcome');

Restore session

To restore a previous session, call the ConnectWallet function similar to login, but set the restoreSession key as true in linkOptions.

restoreSession = async () => {
try {
const { link, session } = await ConnectWallet({
linkOptions: {
chainId: this.chainId,
endpoints: this.endpoints,
restoreSession: true,
},
transportOptions: {
requestAccount: this.requestAccount,
getReturnUrl: () => 'taskly://main',
},
});
this.link = link;
this.session = session;
console.log('session', this.session);
if (session) {
return {
auth: this.session.auth,
accountData: this.session.accountData[0],
};
} else {
return { auth: { actor: '', permission: '' }, accountData: {} };
}
} catch (e) {
return e;
}
};
}

The code below shows how restoreSession might be used:

try {
await protonSDK.restoreSession();
} catch (ex) {
console.warn(ex.message);
}
if (protonSDK.session !== null) {
console.log('session still exists');
} else {
console.log('session does not exits anymore');
}