wallet-ext: dapp <-> content script messaging

* use window message events to pass messages between the web page and the content script

wallet/configs/ts/tsconfig.common.json

@@ -28,7 +28,10 @@
             "_hooks": ["./src/ui/app/hooks/"],
             "_components/*": ["./src/ui/app/components/*"],
             "_messaging/*": ["./src/shared/messaging/*"],
-            "_messages/*": ["./src/shared/messaging/messages/*"]
+            "_messages": ["./src/shared/messaging/messages/"],
+            "_messages/*": ["./src/shared/messaging/messages/*"],
+            "_payloads": ["./src/shared/messaging/messages/payloads/"],
+            "_payloads/*": ["./src/shared/messaging/messages/payloads/*"]
         }
     },
     "include": ["../../src"],

wallet/package.json

@@ -37,6 +37,7 @@
         "@types/node": "^17.0.31",
         "@types/react": "^18.0.8",
         "@types/react-dom": "^18.0.3",
+        "@types/uuid": "^8.3.4",
         "@types/webextension-polyfill": "^0.8.3",
         "@types/webpack": "^5.28.0",
         "concurrently": "^7.1.0",
@@ -86,6 +87,7 @@
         "rxjs": "^7.5.5",
         "stream-browserify": "^3.0.0",
         "tweetnacl": "^1.0.3",
+        "uuid": "^8.3.2",
         "webextension-polyfill": "^0.9.0",
         "yup": "^0.32.11"
     }

wallet/src/content-script/index.ts

@@ -2,5 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { injectDappInterface } from './interface-inject';
+import { setupMessagesProxy } from './messages-proxy';
 
 injectDappInterface();
+setupMessagesProxy();

wallet/src/content-script/messages-proxy.ts

@@ -0,0 +1,16 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { WindowMessageStream } from '_messaging/WindowMessageStream';
+
+export function setupMessagesProxy() {
+    const windowMsgStream = new WindowMessageStream(
+        'sui_content-script',
+        'sui_in-page'
+    );
+    windowMsgStream.messages.subscribe((msg) => {
+        // TODO implement
+        // eslint-disable-next-line no-console
+        console.log('[ContentScriptProxy] message from inPage', msg);
+    });
+}

wallet/src/dapp-interface/DAppInterface.ts

@@ -1,10 +1,56 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { filter, lastValueFrom, map, take } from 'rxjs';
+
+import { createMessage } from '_messages';
+import { WindowMessageStream } from '_messaging/WindowMessageStream';
+import { isErrorPayload } from '_payloads';
+
+import type { SuiAddress } from '@mysten/sui.js';
+import type { Payload } from '_payloads';
+import type { GetAccount } from '_payloads/account/GetAccount';
+import type { GetAccountResponse } from '_payloads/account/GetAccountResponse';
+import type { Observable } from 'rxjs';
+
 export class DAppInterface {
-    private _window: Window;
+    private _messagesStream: WindowMessageStream;
+
+    constructor() {
+        this._messagesStream = new WindowMessageStream(
+            'sui_in-page',
+            'sui_content-script'
+        );
+    }
+
+    public getAccounts(): Promise<SuiAddress[]> {
+        const stream = this.send<GetAccount, GetAccountResponse>({
+            type: 'get-account',
+        }).pipe(
+            take(1),
+            map((response) => {
+                if (isErrorPayload(response)) {
+                    // TODO: throw proper error
+                    throw new Error(response.message);
+                }
+                return response.accounts;
+            })
+        );
+        return lastValueFrom(stream);
+    }
 
-    constructor(theWindow: Window) {
-        this._window = window;
+    private send<
+        RequestPayload extends Payload,
+        ResponsePayload extends Payload | void = void
+    >(
+        payload: RequestPayload,
+        responseForID?: string
+    ): Observable<ResponsePayload> {
+        const msg = createMessage(payload, responseForID);
+        this._messagesStream.send(msg);
+        return this._messagesStream.messages.pipe(
+            filter(({ id }) => id === msg.id),
+            map((msg) => msg.payload as ResponsePayload)
+        );
     }
 }

wallet/src/dapp-interface/index.ts

@@ -6,5 +6,5 @@ import { DAppInterface } from './DAppInterface';
 Object.defineProperty(window, 'suiWallet', {
     enumerable: false,
     configurable: false,
-    value: new DAppInterface(window),
+    value: new DAppInterface(),
 });

wallet/src/shared/messaging/WindowMessageStream.ts

@@ -0,0 +1,49 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { filter, fromEvent, map } from 'rxjs';
+
+import type { Message } from '_messages';
+import type { Observable } from 'rxjs';
+
+export type ClientType = 'sui_in-page' | 'sui_content-script';
+
+type WindowMessage = {
+    target: ClientType;
+    payload: Message;
+};
+
+export class WindowMessageStream {
+    public readonly messages: Observable<Message>;
+    private _name: ClientType;
+    private _target: ClientType;
+
+    constructor(name: ClientType, target: ClientType) {
+        if (name === target) {
+            throw new Error(
+                '[WindowMessageStream] name and target must be different'
+            );
+        }
+        this._name = name;
+        this._target = target;
+        this.messages = fromEvent<MessageEvent<WindowMessage>>(
+            window,
+            'message'
+        ).pipe(
+            filter(
+                (message) =>
+                    message.source === window &&
+                    message.data.target === this._name
+            ),
+            map((message) => message.data.payload)
+        );
+    }
+
+    public send(payload: Message) {
+        const msg: WindowMessage = {
+            target: this._target,
+            payload,
+        };
+        window.postMessage(msg);
+    }
+}

wallet/src/shared/messaging/messages/Message.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { v4 as uuidV4 } from 'uuid';
+
+import type { Payload } from './payloads/Payload';
+
+export type Message = {
+    id: string;
+    payload: Payload;
+};
+
+export function createMessage<MsgPayload extends Payload>(
+    payload: MsgPayload,
+    id?: string
+): Message {
+    return {
+        id: id || uuidV4(),
+        payload,
+    };
+}

wallet/src/shared/messaging/messages/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Message';

wallet/src/shared/messaging/messages/payloads/BasePayload.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Payload } from './Payload';
+
+export type PayloadType =
+    | 'permission-request'
+    | 'permission-response'
+    | 'get-permission-requests'
+    | 'get-account'
+    | 'get-account-response';
+
+export interface BasePayload {
+    type: PayloadType;
+}
+
+export function isBasePayload(payload: Payload): payload is BasePayload {
+    return 'type' in payload && typeof payload.type !== 'undefined';
+}

wallet/src/shared/messaging/messages/payloads/ErrorPayload.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Payload } from './Payload';
+
+export interface ErrorPayload {
+    error: true;
+    code: number;
+    message: string;
+}
+
+export function isErrorPayload(payload: Payload): payload is ErrorPayload {
+    return 'error' in payload && payload.error === true;
+}

wallet/src/shared/messaging/messages/payloads/Payload.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BasePayload } from './BasePayload';
+import type { ErrorPayload } from './ErrorPayload';
+
+export type Payload = BasePayload | ErrorPayload;

wallet/src/shared/messaging/messages/payloads/account/GetAccount.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BasePayload } from '_payloads';
+
+export interface GetAccount extends BasePayload {
+    type: 'get-account';
+}

wallet/src/shared/messaging/messages/payloads/account/GetAccountResponse.ts

@@ -0,0 +1,10 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SuiAddress } from '@mysten/sui.js';
+import type { BasePayload } from '_payloads';
+
+export interface GetAccountResponse extends BasePayload {
+    type: 'get-account-response';
+    accounts: SuiAddress[];
+}

wallet/src/shared/messaging/messages/payloads/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './BasePayload';
+export * from './ErrorPayload';
+export * from './Payload';