🎨
@portal-hq/components

Browser dApp List
Browser Wallet Preview
Sending a Transaction
Success Message
Portal React Native Components
The @portal-hq/components package exports a set of 3 core components (Browser, Setup, and Wallet).
Dependency linking
Because this package uses the react-native-svg and react-native-webview packages (which contain native modules) there is some additional linking required to make it work with your React Native project.
Explicitly install the react-native-svg and react-native-webview package in your project.
yarn
npm
yarn add react-native-svg react-native-webview
npm install --save react-native-svg react-native-webview
Component Scopes
These components can be broken up into two main groups: dApp Browsing and Wallet Management.
dApp Browsing
The dApp Browsing scope is encompassed by a single component:
Browser the Portal-recommended dApp browser based on your Portal configuration
Implementing the Browser component
The Browser component makes the assumption that the component has access to the PortalContext.
There are two recommended ways to do this, both involving the withPortalContext higher order function:
Use withPortalContext to wrap the component rendering the Browser component (this is an easy way to limit the scope of Portal to this specific View)
Use withPortalContext to wrap your app component (this is an easy way to give any View in your app access to the context)
You can also manually pass down the Portal instance using the PortalContextProvider directly.
Regardless of your preferred implementation strategy, if this requirement is not met, features like auto-connect and signing/sending transactions will not work within the Browser components webview when navigating to dApps.
Example implementations
An example of a simple wrapper component using withPortalContext could looks something like this:
MyBrowserView.tsx
1
​
2
import { Browser, Portal, withPortalContext } from '@portal-hq/react-native'
3
​
4
const MyBrowserView = () => {
5
  // TODO: Add the correct `Browser` props once they're sorted out
6
  return <Browser />
7
}
8
​
9
export default withPortalContext(MyBrowserView)(
10
  new Portal({
11
    // TODO: Add all of the appropriate config options
12
  }),
13
)
And example of a wrapper component using the PortalContextProvider could look something like this:
MyBrowserView.tsx
1
​
2
import { useEffect, useState } from 'react'
3
import { Browser, Portal, PortalContextProvider } from '@portal-hq/react-native'
4
​
5
const MyBrowserView = () => {
6
  const [portal, setPortal] = useState<Portal>(null)
7
​
8
  useEffect(() => {
9
    if (!portal) {
10
      setPortal(
11
        new Portal({
12
          // TODO: Add all of the appropriate config options
13
        }),
14
      )
15
    }
16
  }, [portal])
17
​
18
  // TODO: Add the correct `Browser` props once they're sorted out
19
  return (
20
    <PortalContextProvider value={portal}>
21
      <Browser />
22
    </PortalContextProvider>
23
  )
24
}
Wallet Management
This section is under development
The Wallet Management scope is encompassed by two components:
Setup the Portal-recommended account setup flow handles MPC wallet generation and biometric auth encryption, as well as the creating and storing of backup shares
Wallet the Portal-recommended wallet management view to handle funding and transferring based on an MPC wallet generated in either the Setup component or your own custom native implementation of the Portal context.
Npm Packages - Previous
@portal-hq/core
Setup Component
Last modified 5mo ago