Proton
Search…
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

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:
1
yarn add @proton/react-native-sdk
2
yarn add rn-nodeify
Copied!
Use rn-nodefy to convert the node-modules, in the libraries, to compatible libraries in react-native:
1
./node_modules/.bin/rn-nodeify --hack --install
Copied!
To make things easier, this script can be added in the package.json:
1
{
2
...
3
"scripts": {
4
...
5
"postinstall": "./node_modules/.bin/rn-nodeify --yarn --hack 'assert,buffer,crypto,dns,domain,events,stream'; node ./bin/postInstall",
6
}
7
}
Copied!

Usage

Initialization

To use the package, import the class ConnectWallet from @proton/react-native-sdk
1
import {
2
ConnectWallet,
3
LinkSession,
4
ProtonLink,
5
} from '@proton/react-native-sdk';
6
7
class ProtonSDK {
8
chainId: string;
9
endpoints: string[];
10
requestAccount: string;
11
session: LinkSession;
12
link: ProtonLink;
13
14
15
constructor() {
16
this.chainId =
17
'71ee83bcf52142d61019d95f9cc5427ba6a0d7ff8accd9e2088ae2abeaf3d3dd';
18
this.endpoints = ['https://testnet.protonchain.com']; // Multiple for fault tolerance
19
this.requestAccount = 'taskly'; // optional
20
this.session = null;
21
this.link = null;
22
}
23
...
24
}
Copied!

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.
1
login = async () => {
2
const { session, link } = await ConnectWallet({
3
linkOptions: { chainId: this.chainId, endpoints: this.endpoints },
4
transportOptions: {
5
requestAccount: this.requestAccount,
6
getReturnUrl: () => 'taskly://main',
7
},
8
});
9
10
this.link = link;
11
this.session = session;
12
return { auth: session.auth, accountData: session.accountData[0] };
13
};
Copied!
The login function can be added to a ProtonSDK class constructed in the initialization above and login can be called like so:
1
// Usage
2
const protonSDK = new ProtonSDK();
3
4
// usage login()
5
try {
6
const { auth, accountData } = await protonSDK.login();
7
rootStore.setActor(auth.actor);
8
rootStore.setPermission(auth.permission);
9
rootStore.setName(accountData.name);
10
rootStore.setAvatar(accountData.avatar);
11
12
// do something like go to a subscription page
13
navigation.navigate('subscription');
14
} catch (ex) {
15
// login failed
16
Alert.alert('Error', ex.message);
17
}
Copied!
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:
1
sendTransaction = async (actions: Action) => {
2
return this.session.transact({ actions: actions }, { broadcast: true });
3
};
Copied!
The following code shows a small example on how to send 5 XUSDT to an account:
1
try {
2
const actions = [
3
{
4
account: 'xtokens',
5
name: 'transfer',
6
authorization: [
7
{
8
actor: rootStore.actor, // auth.actor that was saved before
9
permission: rootStore.permission, // auth.permission that was saved before
10
},
11
],
12
data: {
13
from: rootStore.actor, // auth.actor that was saved before
14
to: protonSDK.requestAccount, // the account the transaction is send to
15
quantity: '5.000000 XUSDT', // the amount of the transaction
16
memo: 'Taskly',
17
},
18
},
19
];
20
21
const tx = await protonSDK.sendTransaction(actions);
22
23
// navigate to the subscribed page
24
navigation.navigate('subscribed');
25
} catch (ex) {
26
// the transaction failed
27
Alert.alert('Error', ex.message);
28
}
Copied!
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.
1
logout = async () => {
2
await this.link.removeSession(this.requestAccount, this.session.auth);
3
this.session = null;
4
this.link = null;
5
};
Copied!
In the application, once you have instantiated the ProtonSDK class, you can use it like this:
1
// usage logout
2
protonSDK.logout();
3
navigation.navigate('welcome');
Copied!

Restore session

To restore a previous session, call the ConnectWallet function similar to login, but set the restoreSession key as true in linkOptions.
1
restoreSession = async () => {
2
try {
3
const { link, session } = await ConnectWallet({
4
linkOptions: {
5
chainId: this.chainId,
6
endpoints: this.endpoints,
7
restoreSession: true,
8
},
9
transportOptions: {
10
requestAccount: this.requestAccount,
11
getReturnUrl: () => 'taskly://main',
12
},
13
});
14
this.link = link;
15
this.session = session;
16
console.log('session', this.session);
17
if (session) {
18
return {
19
auth: this.session.auth,
20
accountData: this.session.accountData[0],
21
};
22
} else {
23
return { auth: { actor: '', permission: '' }, accountData: {} };
24
}
25
} catch (e) {
26
return e;
27
}
28
};
29
}
Copied!
The code below shows how restoreSession might be used:
1
try {
2
await protonSDK.restoreSession();
3
} catch (ex) {
4
console.warn(ex.message);
5
}
6
7
if (protonSDK.session !== null) {
8
console.log('session still exists');
9
} else {
10
console.log('session does not exits anymore');
11
}
Copied!
Last modified 8mo ago