@portal-hq/webview 2.0.13

package/README.md

@@ -0,0 +1,49 @@
+# Portal React Native WebView
+
+The `@portal-hq/webview` package exports a single `WebView` component for loading dApps within your app with built-in Portal Provider injection.
+
+## Dependency linking
+
+Because this package uses the `react-native-webview` package (which contain native modules) there is some additional linking required to make it work with your React Native project.
+
+Explicitly install the `react-native-webview` package in your project.
+
+```bash
+yarn add react-native-webview
+
+# OR #
+
+npm install --save react-native-webview
+```
+
+## Using the WebView Component
+
+To use the WebView component, import it from the `@portal-hq/webview` package and use it as you would the `react-native-webview` package and render the component within your app.
+
+```jsx
+import WebView from '@portal-hq/webview'
+
+const App = () => {
+  return (
+    <WebView
+      url={'https://app.uniswap.com/'}
+    />
+  )
+}
+```
+
+### Optional Props
+
+The `WebView` component two optional props that can be used to customize the behavior of the WebView.
+
+#### `onNavigationStateChange`
+
+This allows you to provide a callback for when the navigation state changes. This allows you to manage loading states and other navigation events.
+
+#### `onSigningRequested`
+
+This allows you to provide a callback for when signing is requested. For the most part, this prop is not needed if you have already set up the `PortalProvider` in your app.
+
+
+
+

package/lib/commonjs/index.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Node modules.
+const react_1 = __importStar(require("react"));
+const react_native_webview_1 = __importDefault(require("react-native-webview"));
+const react_native_1 = require("react-native");
+const injected_provider_1 = require("@portal-hq/injected-provider");
+const core_1 = require("@portal-hq/core");
+// Relative modules.
+const loading_1 = __importDefault(require("./loading"));
+const Webview = (0, react_1.memo)((0, react_1.forwardRef)(({ onNavigationStateChange, onSigningRequested, url }, webViewRef) => {
+    const Webview = () => {
+        // Derive context.
+        const portal = (0, core_1.usePortal)();
+        // Derive refs.
+        const canGoBack = (0, react_1.useRef)(false);
+        const initialized = (0, react_1.useRef)(false);
+        const webView = (0, react_1.useRef)();
+        // Derive state.
+        const [currentUrl, setCurrentUrl] = (0, react_1.useState)(url);
+        const [walletAddress, setWalletAddress] = (0, react_1.useState)();
+        const source = (0, react_1.useMemo)(() => ({
+            uri: currentUrl,
+        }), [currentUrl]);
+        const scriptToInject = (0, injected_provider_1.injectionScript)({
+            address: walletAddress,
+            apiKey: portal.apiKey,
+            chainId: portal.chainId,
+            gatewayConfig: portal.gatewayConfig,
+        });
+        const handleBackPress = () => {
+            var _a;
+            if (react_native_1.Platform.OS === 'android' && canGoBack) {
+                (_a = webView.current) === null || _a === void 0 ? void 0 : _a.goBack();
+            }
+            else if (react_native_1.Platform.OS === 'ios') {
+                // Don't need to handle this on IOS I don't think
+            }
+            return true;
+        };
+        const handleNavigationStateChange = (event) => {
+            const { canGoBack: _canGoBack, loading, url } = event;
+            if (loading) {
+                if (onNavigationStateChange) {
+                    onNavigationStateChange(event);
+                }
+                // Set the source
+                setCurrentUrl(url);
+                canGoBack.current = _canGoBack;
+            }
+        };
+        const handlePostMessage = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            const { type, data } = JSON.parse(event.nativeEvent.data);
+            const { method, params } = data;
+            switch (type) {
+                case 'portal_sign':
+                    yield portal.request(method, params);
+                    break;
+            }
+        });
+        // Initialize Portal Bindings and set the wallet address
+        (0, react_1.useEffect)(() => {
+            if (portal && !initialized.current) {
+                // Prevent this from running again
+                initialized.current = true;
+                // Bind to signature messages after signing
+                portal.on('portal_signatureReceived', (data) => {
+                    var _a;
+                    (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+                        type: 'portal_signatureReceived',
+                        data,
+                    }));
+                });
+                // Bind to signing requests
+                if (onSigningRequested) {
+                    portal.on('portal_signingRequested', onSigningRequested);
+                }
+                // Store the wallet address in the state
+                const storeWalletAddress = () => __awaiter(void 0, void 0, void 0, function* () {
+                    const address = yield portal.address;
+                    setWalletAddress(address);
+                });
+                void storeWalletAddress();
+            }
+        }, [portal]);
+        // Clean up Portal Provider bindings
+        (0, react_1.useEffect)(() => {
+            return () => {
+                portal.provider.removeEventListener('portal_signatureReceived');
+                portal.provider.removeEventListener('portal_signingRequested', onSigningRequested);
+            };
+        }, []);
+        // Handle Android stuff
+        (0, react_1.useEffect)(() => {
+            react_native_1.BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+            return () => {
+                react_native_1.BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
+            };
+        }, []);
+        // Ensure that the webView ref gets forwarded to the parent component
+        (0, react_1.useImperativeHandle)(webViewRef, () => webView.current);
+        return (<react_native_1.View style={styles.container}>
+            {walletAddress && source && (<react_native_webview_1.default allowsBackForwardNavigationGestures allowsFullscreenVideo={false} allowsInlineMediaPlayback={true} incognito={true} injectedJavaScriptBeforeContentLoaded={scriptToInject} injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true} mediaPlaybackRequiresUserAction={true} onMessage={handlePostMessage} onNavigationStateChange={handleNavigationStateChange} ref={webView} renderLoading={() => <loading_1.default />} source={source} startInLoadingState={true} webviewDebuggingEnabled={true}/>)}
+          </react_native_1.View>);
+    };
+    return <Webview />;
+}), (prevProps, nextProps) => {
+    console.log(`prevProps:`, prevProps);
+    console.log(`nextProps:`, nextProps);
+    // return true
+    return prevProps.url === nextProps.url;
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+exports.default = Webview;

package/lib/commonjs/loading/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Node modules.
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Relative modules.
+const loader_1 = __importDefault(require("./loader"));
+const Loading = () => (<react_native_1.View style={styles.container}>
+    <loader_1.default />
+  </react_native_1.View>);
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        height: '100%',
+        justifyContent: 'center',
+        justifyItems: 'center',
+        width: '100%',
+    },
+});
+exports.default = Loading;

package/lib/commonjs/loading/loader.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Loader = ({ color = '#3E71F8', size = 'small' }) => {
+    return <react_native_1.ActivityIndicator color={color} size={size}/>;
+};
+exports.default = Loader;

package/lib/esm/index.js

@@ -0,0 +1,125 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Node modules.
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import WebView from 'react-native-webview';
+import { BackHandler, Platform, StyleSheet, View } from 'react-native';
+import { injectionScript, } from '@portal-hq/injected-provider';
+import { usePortal } from '@portal-hq/core';
+// Relative modules.
+import Loading from './loading';
+const Webview = memo(forwardRef(({ onNavigationStateChange, onSigningRequested, url }, webViewRef) => {
+    const Webview = () => {
+        // Derive context.
+        const portal = usePortal();
+        // Derive refs.
+        const canGoBack = useRef(false);
+        const initialized = useRef(false);
+        const webView = useRef();
+        // Derive state.
+        const [currentUrl, setCurrentUrl] = useState(url);
+        const [walletAddress, setWalletAddress] = useState();
+        const source = useMemo(() => ({
+            uri: currentUrl,
+        }), [currentUrl]);
+        const scriptToInject = injectionScript({
+            address: walletAddress,
+            apiKey: portal.apiKey,
+            chainId: portal.chainId,
+            gatewayConfig: portal.gatewayConfig,
+        });
+        const handleBackPress = () => {
+            var _a;
+            if (Platform.OS === 'android' && canGoBack) {
+                (_a = webView.current) === null || _a === void 0 ? void 0 : _a.goBack();
+            }
+            else if (Platform.OS === 'ios') {
+                // Don't need to handle this on IOS I don't think
+            }
+            return true;
+        };
+        const handleNavigationStateChange = (event) => {
+            const { canGoBack: _canGoBack, loading, url } = event;
+            if (loading) {
+                if (onNavigationStateChange) {
+                    onNavigationStateChange(event);
+                }
+                // Set the source
+                setCurrentUrl(url);
+                canGoBack.current = _canGoBack;
+            }
+        };
+        const handlePostMessage = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            const { type, data } = JSON.parse(event.nativeEvent.data);
+            const { method, params } = data;
+            switch (type) {
+                case 'portal_sign':
+                    yield portal.request(method, params);
+                    break;
+            }
+        });
+        // Initialize Portal Bindings and set the wallet address
+        useEffect(() => {
+            if (portal && !initialized.current) {
+                // Prevent this from running again
+                initialized.current = true;
+                // Bind to signature messages after signing
+                portal.on('portal_signatureReceived', (data) => {
+                    var _a;
+                    (_a = webView.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+                        type: 'portal_signatureReceived',
+                        data,
+                    }));
+                });
+                // Bind to signing requests
+                if (onSigningRequested) {
+                    portal.on('portal_signingRequested', onSigningRequested);
+                }
+                // Store the wallet address in the state
+                const storeWalletAddress = () => __awaiter(void 0, void 0, void 0, function* () {
+                    const address = yield portal.address;
+                    setWalletAddress(address);
+                });
+                void storeWalletAddress();
+            }
+        }, [portal]);
+        // Clean up Portal Provider bindings
+        useEffect(() => {
+            return () => {
+                portal.provider.removeEventListener('portal_signatureReceived');
+                portal.provider.removeEventListener('portal_signingRequested', onSigningRequested);
+            };
+        }, []);
+        // Handle Android stuff
+        useEffect(() => {
+            BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+            return () => {
+                BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
+            };
+        }, []);
+        // Ensure that the webView ref gets forwarded to the parent component
+        useImperativeHandle(webViewRef, () => webView.current);
+        return (<View style={styles.container}>
+            {walletAddress && source && (<WebView allowsBackForwardNavigationGestures allowsFullscreenVideo={false} allowsInlineMediaPlayback={true} incognito={true} injectedJavaScriptBeforeContentLoaded={scriptToInject} injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true} mediaPlaybackRequiresUserAction={true} onMessage={handlePostMessage} onNavigationStateChange={handleNavigationStateChange} ref={webView} renderLoading={() => <Loading />} source={source} startInLoadingState={true} webviewDebuggingEnabled={true}/>)}
+          </View>);
+    };
+    return <Webview />;
+}), (prevProps, nextProps) => {
+    console.log(`prevProps:`, prevProps);
+    console.log(`nextProps:`, nextProps);
+    // return true
+    return prevProps.url === nextProps.url;
+});
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default Webview;

package/lib/esm/loading/index.js

@@ -0,0 +1,20 @@
+// Node modules.
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+// Relative modules.
+import Loader from './loader';
+const Loading = () => (<View style={styles.container}>
+    <Loader />
+  </View>);
+const styles = StyleSheet.create({
+    container: {
+        alignContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        height: '100%',
+        justifyContent: 'center',
+        justifyItems: 'center',
+        width: '100%',
+    },
+});
+export default Loading;

package/lib/esm/loading/loader.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+const Loader = ({ color = '#3E71F8', size = 'small' }) => {
+    return <ActivityIndicator color={color} size={size}/>;
+};
+export default Loader;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@portal-hq/webview",
+  "version": "2.0.13",
+  "license": "MIT",
+  "main": "lib/commonjs/index",
+  "module": "lib/esm/index",
+  "source": "src/index",
+  "types": "src/index",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "scripts": {
+    "coverage": "jest --passWithNoTests --coverage",
+    "prepare": "yarn prepare:cjs && yarn prepare:esm",
+    "prepare:cjs": "tsc --outDir lib/commonjs --module commonjs",
+    "prepare:esm": "tsc --outDir lib/esm --module es2015 --target es2015",
+    "test": "jest --passWithNoTests"
+  },
+  "dependencies": {
+    "@portal-hq/core": "^2.0.13",
+    "@portal-hq/injected-provider": "^2.0.13",
+    "@portal-hq/utils": "^2.0.13"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "jest": "^29.2.1",
+    "jest-environment-jsdom": "^29.2.2",
+    "ts-jest": "^29.0.3",
+    "typescript": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "gitHead": "bd4ff2f92e936f51b1611083d42804980e96bf27"
+}

package/src/index.tsx

@@ -0,0 +1,196 @@
+// Node modules.
+import React, {
+  FC,
+  MutableRefObject,
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import WebView, {
+  WebViewMessageEvent,
+  WebViewNavigation,
+} from 'react-native-webview'
+import { BackHandler, Platform, StyleSheet, View } from 'react-native'
+import {
+  injectionScript,
+  type RequestArguments,
+} from '@portal-hq/injected-provider'
+import { type WebViewSourceUri } from 'react-native-webview/lib/WebViewTypes'
+import { usePortal } from '@portal-hq/core'
+// Relative modules.
+import Loading from './loading'
+
+interface WebviewProps {
+  onNavigationStateChange?: (event: WebViewNavigation) => void
+  onSigningRequested?: (approvalRequest: any) => void
+  url: string
+}
+
+const Webview = memo(
+  forwardRef<WebView, WebviewProps>(
+    ({ onNavigationStateChange, onSigningRequested, url }, webViewRef) => {
+      const Webview: FC = () => {
+        // Derive context.
+        const portal = usePortal()
+
+        // Derive refs.
+        const canGoBack = useRef<boolean>(false)
+        const initialized = useRef<boolean>(false)
+        const webView = useRef<WebView>()
+
+        // Derive state.
+        const [currentUrl, setCurrentUrl] = useState<string>(url)
+        const [walletAddress, setWalletAddress] = useState<string>()
+
+        const source = useMemo(
+          (): WebViewSourceUri => ({
+            uri: currentUrl,
+          }),
+          [currentUrl],
+        )
+
+        const scriptToInject = injectionScript({
+          address: walletAddress as string,
+          apiKey: portal.apiKey,
+          chainId: portal.chainId,
+          gatewayConfig: portal.gatewayConfig,
+        })
+
+        const handleBackPress = (): boolean => {
+          if (Platform.OS === 'android' && canGoBack) {
+            webView.current?.goBack()
+          } else if (Platform.OS === 'ios') {
+            // Don't need to handle this on IOS I don't think
+          }
+          return true
+        }
+
+        const handleNavigationStateChange = (event: WebViewNavigation) => {
+          const { canGoBack: _canGoBack, loading, url } = event
+
+          if (loading) {
+            if (onNavigationStateChange) {
+              onNavigationStateChange(event)
+            }
+
+            // Set the source
+            setCurrentUrl(url)
+
+            canGoBack.current = _canGoBack
+          }
+        }
+
+        const handlePostMessage = async (event: WebViewMessageEvent) => {
+          const { type, data } = JSON.parse(event.nativeEvent.data)
+          const { method, params } = data as RequestArguments
+
+          switch (type) {
+            case 'portal_sign':
+              await portal.request(method, params as unknown[])
+              break
+          }
+        }
+
+        // Initialize Portal Bindings and set the wallet address
+        useEffect(() => {
+          if (portal && !initialized.current) {
+            // Prevent this from running again
+            initialized.current = true
+
+            // Bind to signature messages after signing
+            portal.on('portal_signatureReceived', (data: any) => {
+              webView.current?.postMessage(
+                JSON.stringify({
+                  type: 'portal_signatureReceived',
+                  data,
+                }),
+              )
+            })
+
+            // Bind to signing requests
+            if (onSigningRequested) {
+              portal.on('portal_signingRequested', onSigningRequested)
+            }
+
+            // Store the wallet address in the state
+            const storeWalletAddress = async () => {
+              const address = await portal.address
+              setWalletAddress(address)
+            }
+
+            void storeWalletAddress()
+          }
+        }, [portal])
+
+        // Clean up Portal Provider bindings
+        useEffect(() => {
+          return () => {
+            portal.provider.removeEventListener('portal_signatureReceived')
+            portal.provider.removeEventListener(
+              'portal_signingRequested',
+              onSigningRequested,
+            )
+          }
+        }, [])
+
+        // Handle Android stuff
+        useEffect(() => {
+          BackHandler.addEventListener('hardwareBackPress', handleBackPress)
+
+          return () => {
+            BackHandler.removeEventListener(
+              'hardwareBackPress',
+              handleBackPress,
+            )
+          }
+        }, [])
+
+        // Ensure that the webView ref gets forwarded to the parent component
+        useImperativeHandle(webViewRef, () => webView.current as WebView)
+
+        return (
+          <View style={styles.container}>
+            {walletAddress && source && (
+              <WebView
+                allowsBackForwardNavigationGestures
+                allowsFullscreenVideo={false}
+                allowsInlineMediaPlayback={true}
+                incognito={true}
+                injectedJavaScriptBeforeContentLoaded={scriptToInject}
+                injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true}
+                mediaPlaybackRequiresUserAction={true}
+                onMessage={handlePostMessage}
+                onNavigationStateChange={handleNavigationStateChange}
+                ref={webView as MutableRefObject<WebView>}
+                renderLoading={() => <Loading />}
+                source={source}
+                startInLoadingState={true}
+                webviewDebuggingEnabled={true}
+              />
+            )}
+          </View>
+        )
+      }
+
+      return <Webview />
+    },
+  ),
+  (prevProps, nextProps) => {
+    console.log(`prevProps:`, prevProps)
+    console.log(`nextProps:`, nextProps)
+    // return true
+    return prevProps.url === nextProps.url
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+})
+
+export default Webview

package/src/loading/index.tsx

@@ -0,0 +1,25 @@
+// Node modules.
+import React, { FC } from 'react'
+import { StyleSheet, View } from 'react-native'
+// Relative modules.
+import Loader from './loader'
+
+const Loading: FC = () => (
+  <View style={styles.container}>
+    <Loader />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    height: '100%',
+    justifyContent: 'center',
+    justifyItems: 'center',
+    width: '100%',
+  },
+})
+
+export default Loading

package/src/loading/loader.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react'
+import { ActivityIndicator } from 'react-native'
+
+interface LoaderProps {
+  color?: string
+  size?: 'large' | 'small'
+}
+
+const Loader: FC<LoaderProps> = ({ color = '#3E71F8', size = 'small' }) => {
+  return <ActivityIndicator color={color} size={size} />
+}
+
+export default Loader