From 2c1eb44cae218ddfce12e0bbf0b006d251eebad5 Mon Sep 17 00:00:00 2001
From: Andre Pimenta <andrepimenta7@gmail.com>
Date: Thu, 24 Nov 2022 16:42:01 +0000
Subject: [PATCH] Adding missing files

---
 .../Views/Wallet/WebviewPostMessageStream.ts  | 78 +++++++++++++++++++
 app/components/Views/Wallet/index.tsx         | 40 +++++++++-
 app/core/SnapsState.ts                        |  6 ++
 3 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Views/Wallet/WebviewPostMessageStream.ts
 create mode 100644 app/core/SnapsState.ts

diff --git a/app/components/Views/Wallet/WebviewPostMessageStream.ts b/app/components/Views/Wallet/WebviewPostMessageStream.ts
new file mode 100644
index 00000000000..40bd8595db0
--- /dev/null
+++ b/app/components/Views/Wallet/WebviewPostMessageStream.ts
@@ -0,0 +1,78 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import {
+  BasePostMessageStream,
+  PostMessageEvent,
+} from '@metamask/post-message-stream';
+
+interface WindowPostMessageStreamArgs {
+  name: string;
+  target: string;
+  targetOrigin?: string;
+  targetWindow?: Window;
+}
+
+/**
+ * A {@link Window.postMessage} stream.
+ */
+export default class WebviewPostMessageStream extends BasePostMessageStream {
+  private _name: string;
+
+  private _target: string;
+
+  private _targetOrigin: string;
+
+  private _targetWindow: Window;
+
+  /**
+   * Creates a stream for communicating with other streams across the same or
+   * different `window` objects.
+   *
+   * @param args - Options bag.
+   * @param args.name - The name of the stream. Used to differentiate between
+   * multiple streams sharing the same window object.
+   * @param args.target - The name of the stream to exchange messages with.
+   * @param args.targetOrigin - The origin of the target. Defaults to
+   * `location.origin`, '*' is permitted.
+   * @param args.targetWindow - The window object of the target stream. Defaults
+   * to `window`.
+   */
+  constructor({
+    name,
+    target,
+    targetOrigin,
+    targetWindow,
+  }: WindowPostMessageStreamArgs) {
+    super();
+
+    this._name = name;
+    this._target = target;
+    this._targetOrigin = targetOrigin;
+    this._targetWindow = targetWindow;
+    this._onMessage = this._onMessage.bind(this);
+
+    //this._targetWindow.onMessage = this._onMessage;
+
+    setTimeout(() => this._handshake(), 0);
+  }
+
+  protected _postMessage(data: unknown): void {
+    const message = {
+      target: this._target,
+      data,
+    };
+    this._targetWindow.postMessage(JSON.stringify(message), this._targetOrigin);
+  }
+
+  private _onMessage(event: PostMessageEvent): void {
+    const message = event.nativeEvent;
+    const data = JSON.parse(message.data);
+
+    this._onData(data.data);
+  }
+
+  _destroy(): void {
+    // eslint-disable-next-line no-console
+    console.log('destroy');
+  }
+}
diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
index f4aa485adcd..ac126c5b297 100644
--- a/app/components/Views/Wallet/index.tsx
+++ b/app/components/Views/Wallet/index.tsx
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import React, {
   useEffect,
   useRef,
@@ -35,7 +37,11 @@ import { shouldShowWhatsNewModal } from '../../../util/onboarding';
 import Logger from '../../../util/Logger';
 import Routes from '../../../constants/navigation/Routes';
 import generateTestId from '../../../../wdio/utils/generateTestId';
-
+import WebView from 'react-native-webview';
+import { Button } from 'react-native-share';
+import WebviewPostMessageStream from './WebviewPostMessageStream';
+import snapsState from '../../../core/SnapsState';
+let stream;
 const createStyles = (colors: any) =>
   StyleSheet.create({
     wrapper: {
@@ -74,6 +80,8 @@ const Wallet = ({ navigation }: any) => {
   const accountOverviewRef = useRef(null);
   const { colors } = useTheme();
   const styles = createStyles(colors);
+
+  const webviewRef = useRef();
   /**
    * Map of accounts to information objects including balances
    */
@@ -325,6 +333,29 @@ const Wallet = ({ navigation }: any) => {
     [navigation, wizardStep],
   );
 
+  const messageFromWebview = (data) => {
+    stream?._onMessage(data);
+  };
+
+  const setWebviewPostMessage = () => {
+    stream = new WebviewPostMessageStream({
+      name: 'rnside',
+      target: 'webview',
+      targetOrigin: '*',
+      targetWindow: webviewRef.current,
+    });
+
+    // eslint-disable-next-line no-console
+    stream.on('data', (data) => console.log('Message from webview ' + data));
+
+    snapsState.stream = stream;
+    snapsState.webview = webviewRef.current;
+  };
+
+  const sendMessageToWebview = () => {
+    stream.write('HELLO');
+  };
+
   return (
     <ErrorBoundary view="Wallet">
       <View style={baseStyles.flexGrow} {...generateTestId('wallet-screen')}>
@@ -341,6 +372,13 @@ const Wallet = ({ navigation }: any) => {
         >
           {selectedAddress ? renderContent() : renderLoader()}
         </ScrollView>
+        <Button onPress={sendMessageToWebview}>Send message to webview</Button>
+        <WebView
+          ref={webviewRef}
+          source={{ uri: 'http://localhost:3000/' }}
+          onMessage={messageFromWebview}
+          onLoadEnd={setWebviewPostMessage}
+        />
         {renderOnboardingWizard()}
       </View>
     </ErrorBoundary>
diff --git a/app/core/SnapsState.ts b/app/core/SnapsState.ts
new file mode 100644
index 00000000000..7d0153dddb4
--- /dev/null
+++ b/app/core/SnapsState.ts
@@ -0,0 +1,6 @@
+const snapsState = {
+  stream: null,
+  webview: null,
+};
+
+export default snapsState;