simplifying the ConnectWidget

Author: wesrisenmay-mx

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<string | null>(null)
 
   useEffect(() => {
@@ -25,7 +27,7 @@ export default function Connect() {
   }, [clientRedirectUrl])
 
   return (
-    <SafeAreaView style={styles.page}>
+    <SafeAreaView style={{ ...styles.page, height, width }}>
       {url && (
         <ConnectWidget
           url={url}

src/components/ConnectWidgets.tsx

@@ -1,41 +1,63 @@
+import React from "react"
 import {
   dispatchConnectLocationChangeEvent,
   ConnectPostMessageCallbackProps,
   ConnectOAuthRequestedPayload,
 } from "@mxenabled/widget-post-message-definitions"
-
-import { Type, SsoUrlProps, ConnectWidgetConfigurationProps } from "../sso"
 import * as WebBrowser from "expo-web-browser"
-import { StylingProps, useWidgetRenderer } from "./renderer"
+import { WebView, WebViewProps } from "react-native-webview"
+import { sdkVersion } from "../version"
+import { makeRequestInterceptor } from "./request_interceptor"
+
+interface ExtraProps {
+  url: string
+  webViewProps?: WebViewProps
+}
 
-export type ConnectWidgetProps = SsoUrlProps &
-  StylingProps &
-  ConnectPostMessageCallbackProps<string> &
-  ConnectWidgetConfigurationProps &
-  JSX.IntrinsicAttributes
+export type ConnectWidgetProps = ConnectPostMessageCallbackProps<string> & ExtraProps
 
 export function ConnectWidget(props: ConnectWidgetProps) {
+  const { url: webviewUrl, webViewProps, ...callbacks } = props
+
   const onOAuthRequested = (payload: ConnectOAuthRequestedPayload) => {
     const { url } = payload
     WebBrowser.openAuthSessionAsync(url)
 
     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 (
+    <WebView
+      cacheMode="LOAD_NO_CACHE"
+      domStorageEnabled={true}
+      incognito={true}
+      injectedJavaScriptBeforeContentLoaded={setReactNativeSDKVersionOnWindow}
+      javaScriptEnabled={true}
+      onOpenWindow={(event) => {
+        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
 }