diff --git a/example/src/app/connect.tsx b/example/src/app/connect.tsx index 39744ab..7ab7a8a 100644 --- a/example/src/app/connect.tsx +++ b/example/src/app/connect.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react" -import { StyleSheet } from "react-native" +import { StyleSheet, useWindowDimensions } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import * as Linking from "expo-linking" @@ -16,6 +16,8 @@ const styles = StyleSheet.create({ export default function Connect() { const clientRedirectUrl = Linking.createURL("connect") + const { height, width } = useWindowDimensions() + const [url, setUrl] = useState(null) useEffect(() => { @@ -25,7 +27,7 @@ export default function Connect() { }, [clientRedirectUrl]) return ( - + {url && ( & - ConnectWidgetConfigurationProps & - JSX.IntrinsicAttributes +interface ExtraProps { + url: string + webViewProps?: WebViewProps +} -export const ConnectVerificationWidget = makeWidgetComponentWithDefaults(ConnectWidget, { - mode: "verification", - includeTransactions: false, -}) +export type ConnectWidgetProps = ConnectPostMessageCallbackProps & ExtraProps export function ConnectWidget(props: ConnectWidgetProps) { + const { url: webviewUrl, webViewProps, ...callbacks } = props + const onOAuthRequested = (payload: ConnectOAuthRequestedPayload) => { const { url } = payload WebBrowser.openAuthSessionAsync(url) @@ -28,20 +26,38 @@ export function ConnectWidget(props: ConnectWidgetProps) { props.onOAuthRequested?.(payload) } - props = { + const modifiedCallbacks = { + ...callbacks, onOAuthRequested, - ...props, } - const modifiedProps = { - ...props, - onOAuthRequested, - } - - const elem = useWidgetRenderer( - { ...modifiedProps, widgetType: Type.ConnectWidget }, - dispatchConnectLocationChangeEvent, + const handler = makeRequestInterceptor(webviewUrl, { + onIntercept: (url) => { + dispatchConnectLocationChangeEvent(url, modifiedCallbacks) + }, + }) + + const setReactNativeSDKVersionOnWindow = ` + window.MXReactNativeSDKVersion = "${sdkVersion}"; + ` + + return ( + { + WebBrowser.openBrowserAsync(event.nativeEvent.targetUrl) + }} + onShouldStartLoadWithRequest={handler} + originWhitelist={["*"]} + scrollEnabled={true} + source={{ uri: webviewUrl }} + testID="widget_webview" + {...webViewProps} + style={webViewProps?.style || { height: "100%", width: "100%" }} + /> ) - - return elem } diff --git a/src/components/widgets.test.tsx b/src/components/widgets.test.tsx index 1452723..046e5a0 100644 --- a/src/components/widgets.test.tsx +++ b/src/components/widgets.test.tsx @@ -4,7 +4,6 @@ import { act } from "react-test-renderer" import { BudgetsWidget, MasterWidget } from "./MoneyMapWidgets" import { PulseWidget, MiniPulseCarouselWidget } from "./PulseWidgets" -import { ConnectVerificationWidget } from "./ConnectWidgets" import { Props } from "./make_component" import TestingErrorBoundary from "../../test/helpers/TestingErrorBoundary" @@ -18,7 +17,6 @@ jest.mock("expo-web-browser", () => { }) describe("BudgetsWidget", () => fullWidgetComponentTestSuite(BudgetsWidget)) -describe("ConnectVerificationWidget", () => fullWidgetComponentTestSuite(ConnectVerificationWidget)) describe("MasterWidget", () => fullWidgetComponentTestSuite(MasterWidget)) describe("MiniPulseCarouselWidget", () => fullWidgetComponentTestSuite(MiniPulseCarouselWidget)) describe("PulseWidget", () => fullWidgetComponentTestSuite(PulseWidget))