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. yarn
npm
yarn add @portal-hq/components
npm install --save @portal-hq/components
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
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
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
You now have a working dApp Browser example!
Last modified 6mo ago