Comment on page
🎨
@portal-hq/components

Browser dApp List

Browser Wallet Preview

Sending a Transaction

Success Message
The
@portal-hq/components
package exports a set of 3 core components (Browser, Setup, and Wallet).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
These components can be broken up into two main groups:
dApp Browsing
and Wallet Management
.The dApp Browsing scope is encompassed by a single component:
Browser
the Portal-recommended dApp browser based on your Portal configuration
Implementing the
Browser
componentThe
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 theBrowser
component (this is an easy way to limit the scope ofPortal
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 { Portal, withPortalContext } from '@portal-hq/core'
3
import { Browser } from '@portal-hq/components'
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 { Portal, PortalContextProvider } from '@portal-hq/core'
4
import { Browser } from '@portal-hq/components'
5
6
const MyBrowserView = () => {
7
const [portal, setPortal] = useState<Portal>(null)
8
9
useEffect(() => {
10
if (!portal) {
11
setPortal(
12
new Portal({
13
// TODO: Add all of the appropriate config options
14
}),
15
)
16
}
17
}, [portal])
18
19
// TODO: Add the correct `Browser` props once they're sorted out
20
return (
21
<PortalContextProvider value={portal}>
22
<Browser />
23
</PortalContextProvider>
24
)
25
}
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 sharesWallet
the Portal-recommended wallet management view to handle funding and transferring based on an MPC wallet generated in either theSetup
component or your own custom native implementation of the Portal context.
Last modified 7mo ago