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.

Basic setup

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.

Authentication

Follow this guide to gather all of the credentials you need to Authenticate to Portal.

Installation

yarn

yarn add @portal-hq/core @portal-hq/keychain @portal-hq/gdrive-storage

npm

npm install --save @portal-hq/core @portal-hq/keychain @portal-hq/gdrive-storage

Dependency linking

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

yarn add react-native-keychain

npm

npm install --save react-native-keychain react-native-rsa-native

Expo Compatibility

Expo apps will need to be ejected to be usable with our React Native sdk because we include native iOS and Android modules.

MPC

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

app/build.gradle

dependencies {
  ...

  runtimeOnly files("../../node_modules/@portal-hq/core/android/libs/mpc.aar")

  ...
}

iOS

cd ios && pod install && cd ..

To learn more about how to use Portal MPC, see: @portal-hq/core

Initializing Portal

MyAppComponent.tsx

import { useEffect, useState } from 'react'

// Portal imports
import { BackupMethods, Portal, PortalContextProvider } from '@portal-hq/core'
import Keychain from '@portal-hq/keychain'
import Storage from '@portal-hq/gdrive-storage'

const MyAppComponent = () => {
  // Store the Portal instance in the state
  const [portal, setPortal] = useState<Portal>(null)

  useEffect(() => {
    if (!portal) {
      // Initialize storage providers
      const keychain = new Keychain()
      const gDriveStorage = new Storage({
        androidClientId: 'YOUR_ANDROID_CLIENT_ID',
        iosClientId: 'YOUR_IOS_CLIENT_ID',
      })
      const passwordStorage = new PasswordStorage()
      // Create a Portal instance
      setPortal(
        new Portal({
          apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
          backup: {
            [BackupMethods.GoogleDrive]: gDriveStorage,
            [BackupMethods.Password] : passwordStorage
          },
          chainId: 1,
          gatewayConfig: 'https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY',
          isSimulator: true,
          keychain,
        }),
      )
    }
  }, [portal])

  return (
    {/* Expose your Portal instance to your app */}
    <PortalContextProvider value={portal as Portal}>
      {/** 
        * Now all children rendered in this scope 
        * will have access to the `Portal` instance 
        * via the `usePortal` hook 
        */}
    </PortalContextProvider>
  )
}

export default MyAppComponent

For more information on how to use the Portal class, see: @portal-hq/core

Next Steps

Now that you've initialized your Portal instance, you can generate a wallet!