add haven storage window object and extension detection

package.json

@@ -23,6 +23,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "@react-spring/web": "^9.5.5",
     "@reduxjs/toolkit": "^1.9.1",
+    "@types/chrome": "^0.0.326",
     "@vitejs/plugin-react": "^4.3.4",
     "@windmillcode/quill-emoji": "^2.0.3000",
     "body-scroll-lock": "^4.0.0-beta.0",

src/components/common/WebAssemblyRunner/WebAssemblyRunner.tsx

@@ -6,6 +6,9 @@ import { FC, useEffect } from 'react';
 import { InitXXDK, setXXDKBasePath } from 'xxdk-wasm';
 
 import { useUtils } from 'src/contexts/utils-context';
+import { havenStorageExtension } from './haven-storage-extension';
+import { havenStorageLocal } from './local-storage';
+import { HavenStorage } from './type';
 
 type Logger = {
   StopLogging: () => void;
@@ -23,6 +26,7 @@ declare global {
     GetLogger: () => Logger;
     logger?: Logger;
     getCrashedLogFile: () => Promise<string>;
+    havenStorage: HavenStorage;
   }
 }
 
@@ -41,15 +45,32 @@ const WebAssemblyRunner: FC<WithChildren> = ({ children }) => {
       // symlinking your public directory:
       //   cd public && ln -s ../node_modules/xxdk-wasm xxdk-wasm && cd ..
       // Then override with this function here:
-      //setXXDKBasePath(window!.location.href + 'xxdk-wasm');
+      // setXXDKBasePath(window!.location.href + 'xxdk-wasm');
 
       // NOTE: NextJS hackery, since they can't seem to provide a helper to get a proper origin...
       setXXDKBasePath(basePath);
 
-      InitXXDK().then(async (result: any) => {
-        setUtils(result);
+      const initXXdk = async () => {
+        if (localStorage.getItem('🞮🞮speakeasyapp') === null) {
+          const isAvailable = await havenStorageExtension.init();
+          if (isAvailable) {
+            console.log('[HavenStorage] Using extension storage since extension is available');
+            window.havenStorage = havenStorageExtension;
+          } else {
+            console.log('[HavenStorage] Using localStorage since extension is not available');
+            window.havenStorage = havenStorageLocal;
+          }
+        } else {
+          console.log('[HavenStorage] Using localStorage due to existing keys');
+          window.havenStorage = havenStorageLocal;
+        }
+
+        const xxdkUtils = await InitXXDK();
+        setUtils(xxdkUtils);
         setUtilsLoaded(true);
-      });
+      };
+
+      initXXdk();
     }
   }, [basePath, setUtils, setUtilsLoaded, utilsLoaded]);
   return <>{children}</>;

src/components/common/WebAssemblyRunner/haven-storage-extension.ts

@@ -0,0 +1,180 @@
+import { HavenStorage } from './type';
+
+// type from Extension
+type BaseMessage<Api extends string> = {
+  api: Api;
+  requestId: string;
+};
+
+export type TRequest = BaseMessage<'LocalStorage:Request'> &
+  (
+    | {
+        action: 'clear' | 'keys';
+      }
+    | {
+        action: 'getItem' | 'removeItem';
+        key: string;
+      }
+    | {
+        action: 'setItem';
+        key: string;
+        value: string;
+      }
+  );
+
+export type TResponse = BaseMessage<'LocalStorage:Response'> &
+  (
+    | {
+        action: 'getItem';
+        result: unknown;
+      }
+    | {
+        action: 'keys';
+        result: string[];
+      }
+    | {
+        action: 'removeItem' | 'clear' | 'setItem';
+      }
+  );
+
+function generateRequestId(): string {
+  return Math.random().toString(36).slice(2, 11);
+}
+
+const promiseHandlers: Record<
+  string,
+  { resolve: (result: any) => void; reject: (error: any) => void }
+> = {};
+
+// establish a long-lived Port to extension
+const EXT_ID = 'ihilcflljgogpbkopcmkoaoildehaehc';
+let port: chrome.runtime.Port;
+
+function isValidResponse(msg: any): msg is TResponse {
+  return msg?.requestId && msg.api === 'LocalStorage:Response';
+}
+
+let status: 'disconnected' | 'not-installed' | 'ok' = 'disconnected';
+function setupPort(): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+    port = chrome.runtime.connect(EXT_ID, { name: 'LocalStorageChannel' });
+
+    let settled = false;
+    // incoming responses on that port
+    port.onMessage.addListener((msg) => {
+      // we want to settle only once
+      if (!settled) {
+        settled = true;
+        resolve(true);
+      }
+
+      if (msg?.requestId && msg.api === 'LocalStorage:Response') {
+        const handler = promiseHandlers[msg.requestId];
+
+        if (handler && isValidResponse(msg)) {
+          handler.resolve('result' in msg ? msg.result : undefined);
+          delete promiseHandlers[msg.requestId];
+        }
+      }
+    });
+
+    port.onDisconnect.addListener(() => {
+      if (chrome.runtime.lastError) {
+        if (
+          chrome.runtime.lastError.message ===
+          'Could not establish connection. Receiving end does not exist.'
+        ) {
+          status = 'not-installed';
+          resolve(false);
+        } else {
+          status = 'disconnected';
+          reject(chrome.runtime.lastError);
+        }
+      }
+    });
+
+    // send message to check if extension is responding to request
+    port.postMessage({
+      api: 'LocalStorage:Request',
+      action: 'getItem',
+      key: 'hello',
+      requestId: 'init'
+    } satisfies TRequest);
+  });
+}
+
+function sendViaPort<T>(action: 'clear' | 'keys'): Promise<T>;
+function sendViaPort<T>(action: 'getItem' | 'removeItem', key: string): Promise<T>;
+function sendViaPort<T>(action: 'setItem', key: string, value: any): Promise<T>;
+function sendViaPort<T>(
+  action: 'getItem' | 'setItem' | 'removeItem' | 'clear' | 'keys',
+  key?: string,
+  value?: any
+): Promise<T> {
+  const requestId = generateRequestId();
+
+  return new Promise<T>(async (resolve, reject) => {
+    promiseHandlers[requestId] = { resolve, reject };
+    let request: TRequest;
+
+    if (action === 'clear' || action === 'keys') {
+      // no key/value
+      request = { api: 'LocalStorage:Request', action, requestId };
+    } else if (action === 'getItem' || action === 'removeItem') {
+      // key is required here
+      request = { api: 'LocalStorage:Request', action, key: key!, requestId };
+    } else if (action === 'setItem') {
+      // setItem: both key and value are required
+      request = { api: 'LocalStorage:Request', action, key: key!, value: value!, requestId };
+    } else {
+      throw new Error(`Unknown action: ${action}`);
+    }
+
+    // ports get disconnected after inactivity
+    if (status === 'disconnected') {
+      await setupPort();
+    }
+
+    try {
+      port.postMessage(request);
+    } catch (err) {
+      console.error('postMessage failed, reconnecting port', err);
+      setupPort();
+      // retry once after reconnect
+      try {
+        port.postMessage({ api: 'LocalStorage:Request', action, key, value, requestId });
+      } catch (retryErr) {
+        delete promiseHandlers[requestId];
+        reject(retryErr);
+      }
+    }
+  });
+}
+
+export const havenStorageExtension = {
+  getItem(key) {
+    return sendViaPort('getItem', key);
+  },
+  setItem(key, value) {
+    return sendViaPort('setItem', key, value);
+  },
+  delete(key) {
+    return sendViaPort('removeItem', key);
+  },
+  clear() {
+    return sendViaPort('clear');
+  },
+  keys() {
+    return sendViaPort('keys');
+  },
+  key(_idx) {
+    // not implemented on SW side
+    return Promise.reject('not implemented');
+  },
+  isAvailable() {
+    return true;
+  },
+  init() {
+    return setupPort();
+  }
+} satisfies HavenStorage;

src/components/common/WebAssemblyRunner/local-storage.ts

@@ -0,0 +1,43 @@
+import { HavenStorage } from './type';
+
+export const havenStorageLocal: HavenStorage = {
+  async getItem(key) {
+    return localStorage.getItem(key);
+  },
+
+  async setItem(key, value) {
+    localStorage.setItem(key, value);
+  },
+
+  async delete(key) {
+    localStorage.removeItem(key);
+  },
+
+  async clear() {
+    localStorage.clear();
+  },
+
+  async keys() {
+    const keys: string[] = [];
+
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key !== null) {
+        keys.push(key);
+      }
+    }
+
+    return keys;
+  },
+
+  key(index) {
+    return new Promise((resolve, reject) => {
+      try {
+        const key = localStorage.key(index);
+        resolve(key);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+};

src/components/common/WebAssemblyRunner/type.ts

@@ -0,0 +1,12 @@
+export type HavenStorage = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: any) => Promise<void>;
+  delete: (key: string) => Promise<void>;
+  clear: () => Promise<void>;
+  keys: () => Promise<string[]>;
+  key: (index: number) => Promise<string | null>;
+  isAvailable?: () => boolean;
+
+  // boolean indicating if the storage is available
+  init?: () => Promise<boolean>;
+};

src/contexts/dm-client-context.tsx

@@ -135,7 +135,9 @@ export const DMContextProvider: FC<WithChildren> = ({ children }) => {
   useEffect(() => {
     if (client) {
       try {
-        dispatch(dms.actions.setUserNickname(client.GetNickname()));
+        client.GetNickname().then((nickname) => {
+          dispatch(dms.actions.setUserNickname(nickname));
+        });
       } catch (e) {
         // no nickname found
       }
@@ -149,8 +151,8 @@ export const DMContextProvider: FC<WithChildren> = ({ children }) => {
   }, [client, dmsDatabaseName, setDmsDatabaseName]);
 
   const createDatabaseCipher = useCallback(
-    (cmix: CMix, decryptedPassword: Uint8Array) => {
-      const cipher = utils.NewDatabaseCipher(
+    async (cmix: CMix, decryptedPassword: Uint8Array) => {
+      const cipher = await utils.NewDatabaseCipher(
         cmix.GetID(),
         decryptedPassword,
         MAXIMUM_PAYLOAD_BLOCK_SIZE
@@ -177,7 +179,7 @@ export const DMContextProvider: FC<WithChildren> = ({ children }) => {
       try {
         const workerPath = (await dmIndexedDbWorkerPath()).toString();
         //console.log('DMWORKERPATH: ' + workerPath);
-        const notifications = utils.LoadNotificationsDummy(cmix.GetID());
+        const notifications = await utils.LoadNotificationsDummy(cmix.GetID());
         NewDMClientWithIndexedDb(
           cmix.GetID(),
           notifications.GetID(),
@@ -206,8 +208,9 @@ export const DMContextProvider: FC<WithChildren> = ({ children }) => {
         rawPassword as string,
         channelManager.ExportPrivateIdentity(rawPassword as string)
       );
-      const cipher = createDatabaseCipher(cmix as CMix, decryptedPassword as Uint8Array);
-      createDMClient(cmix as CMix, cipher, privateIdentity);
+      createDatabaseCipher(cmix as CMix, decryptedPassword as Uint8Array).then((cipher) => {
+        createDMClient(cmix as CMix, cipher, privateIdentity);
+      });
     }
   }, [
     channelManager,