Links
Comment on page
🌄

Building a WebView

Our ready-to-use components help you quickly integrate Portal into your app.
Browser dApp List
Browser Wallet Preview
Sending a Transaction
Success Message
Before using the Portal mobile components, be sure you have run portal.mpc.generate() to generate a wallet.
For more information on generating MPC signing shares, see: Generating a wallet.

Installation

yarn
npm
yarn add @portal-hq/components
npm install --save @portal-hq/components

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
npm
yarn add react-native-svg react-native-webview
npm install --save react-native-svg react-native-webview

Basic Usage

MyBrowser.tsx
1
import React, { FC } from 'react'
2
3
// Portal imports
4
import { usePortal } from '@portal-hq/core'
5
import { Browser } from '@portal-hq/components'
6
7
const MyBrowser: FC = () => {
8
// Store the Portal instance in the state
9
const portal = usePortal()
10
11
return (
12
<>
13
{/* Ensure Portal has been initialized before rendering */}
14
{portal && <Browser />}
15
</>
16
)
17
}
18
19
export default MyBrowser

Webview

We expose the underlying Webview component that the above Browser component uses to give you the flexibility to pass a URL for any dapp.
import React, { FC } from 'react'
// Portal imports
import { usePortal } from '@portal-hq/core'
import { Webview } from '@portal-hq/components'
const MyBrowser: FC = () => {
// Store the Portal instance in the state
const portal = usePortal()
return (
<View style={{ width: '100%', height: '100%' }}>
{portal &&
<Webview
url="https://app.uniswap.org/#/swap" // Any URL for a dapp
onNavigationStateChange?: (event: WebViewNavigation) => void
onSigningRequested?: (approvalRequest: any) => void // only needed if auto-approve is set to false
/>}
</View>
)
}
export default MyBrowser

Next Steps

You now have a working dApp Browser example!