Comment on page
React Native
Follow this guide to integrate Portal in your app.
Portal provides MPC wallets and dApp connections for organizations and their users.
To integrate Portal, an organization adds a client library to their mobile app and a few server API endpoints.
The Portal library connects your mobile app and server with the web3 ecosystem.
The basic Portal setup consists of three packages:
@portal-hq/core- The core Portal library@portal-hq/keychain- An adapter for storing MPC signing shares on-device@portal-hq/gdrive-storage- An adapter for storing MPC backup shares off-device
These pieces allow you to initialize
Portal in your app.yarn
npm
yarn add @portal-hq/core @portal-hq/keychain @portal-hq/gdrive-storage
npm install --save @portal-hq/core @portal-hq/keychain @portal-hq/gdrive-storage
Because these packages have native module dependencies there is some additional linking required to make it work with your React Native project.
Explicitly install the native module packages in your project.
yarn
npm
yarn add react-native-keychain react-native-rsa-native
npm install --save react-native-keychain react-native-rsa-native
Expo apps will need to be ejected to be usable with our React Native sdk because we include native iOS and Android modules.
The core Portal library relies on a native module to support MPC behaviors. In order to enable this functionality, you must properly link Portal's MPC client to your React Native project.
Android
iOS
app/build.gradle
dependencies {
...
runtimeOnly files("../../node_modules/@portal-hq/core/android/libs/mpc.aar")
...
}
cd ios && pod install && cd ..
MyAppComponent.tsx
1
import { useEffect, useState } from 'react'
2
3
// Portal imports
4
import { BackupMethods, Portal, PortalContextProvider } from '@portal-hq/core'
5
import Keychain from '@portal-hq/keychain'
6
import Storage from '@portal-hq/gdrive-storage'
7
8
const MyAppComponent = () => {
9
// Store the Portal instance in the state
10
const [portal, setPortal] = useState<Portal>(null)
11
12
useEffect(() => {
13
if (!portal) {
14
// Initialize storage providers
15
const keychain = new Keychain()
16
const gDriveStorage = new Storage({
17
androidClientId: 'YOUR_ANDROID_CLIENT_ID',
18
iosClientId: 'YOUR_IOS_CLIENT_ID',
19
})
20
const passwordStorage = new PasswordStorage()
21
// Create a Portal instance
22
setPortal(
23
new Portal({
24
apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
25
backup: {
26
[BackupMethods.GoogleDrive]: gDriveStorage,
27
[BackupMethods.Password] : passwordStorage
28
},
29
chainId: 1,
30
gatewayConfig: 'https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY',
31
isSimulator: true,
32
keychain,
33
}),
34
)
35
}
36
}, [portal])
37
38
return (
39
{/* Expose your Portal instance to your app */}
40
<PortalContextProvider value={portal as Portal}>
41
{/**
42
* Now all children rendered in this scope
43
* will have access to the `Portal` instance
44
* via the `usePortal` hook
45
*/}
46
</PortalContextProvider>
47
)
48
}
49
50
export default MyAppComponent
Last modified 1mo ago