UI: 🎨 updates

.vscode/settings.json

@@ -4,5 +4,6 @@
       "directory": "./packages/extension",
       "changeProcessCWD": true
     }
-  ]
+  ],
+  "cSpell.words": ["enkrypt", "enkryptcom", "polkadot", "webextension"]
 }

packages/extension-bridge/src/internal.ts

@@ -223,8 +223,8 @@ const initIntercoms = () => {
         setTimeout(() => {
           if (incomingPort) {
             portMap.delete(portId);
-            incomingPort = null;
             incomingPort.disconnect();
+            incomingPort = null;
           }
         }, 250e3); // on chrome force reconnect as this is a way of keeping the background running forever //https://stackoverflow.com/questions/66618136/persistent-service-worker-in-chrome-extension
       }

packages/extension/.eslintrc.json

@@ -21,6 +21,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": "off",
     "vue/multi-word-component-names": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-non-null-assertion": "off"
   }
 }

packages/extension/configs/rollup.config.base.js

@@ -1,6 +1,7 @@
 import typescript from "@rollup/plugin-typescript";
 import commonjs from "@rollup/plugin-commonjs";
 import nodeResolve from "@rollup/plugin-node-resolve";
+import json from "@rollup/plugin-json"
 import nodePolyfills from "rollup-plugin-node-polyfills";
 import { uglify } from "rollup-plugin-uglify";
 const enableMinification = process.env.minify === "on";
@@ -14,6 +15,7 @@ const base = {
   plugins: [
     typescript(),
     commonjs(),
+    json(),
     nodePolyfills(),
     nodeResolve({ preferBuiltins: false }),
   ],

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/extension",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "zip": "cd dist; zip -r release.zip *;",
@@ -33,23 +33,27 @@
     "@types/less": "^3.0.3",
     "@types/lodash": "^4.14.182",
     "@types/utf-8-validate": "^5.0.0",
+    "@vueuse/core": "^8.7.5",
     "add": "^2.0.6",
     "bignumber.js": "^9.0.2",
     "bip39": "^3.0.4",
     "chai": "^4.3.6",
     "concurrently": "^7.0.0",
     "core-js": "^3.21.0",
+    "ethereumjs-abi": "^0.6.8",
     "ethereumjs-util": "^7.1.4",
     "eventemitter3": "^4.0.7",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "moment": "^2.29.1",
+    "nanoevents": "^6.0.2",
     "qrcode.vue": "^3.3.3",
     "rollup-plugin-node-builtins": "^2.1.2",
     "url-parse": "^1.5.10",
     "vue": "^3.2.31",
     "vue-router": "4",
     "vue3-lottie": "^2.1.0",
+    "vuedraggable": "next",
     "web3": "^1.7.3",
     "web3-utils": "^1.7.3",
     "zxcvbn": "^4.4.2"
@@ -60,8 +64,10 @@
     "@polkadot/rpc-provider": "^8.0.2",
     "@polkadot/types": "^8.0.2",
     "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.1",
+    "@types/ethereumjs-abi": "^0.6.3",
     "@types/mocha": "^9.1.0",
     "@types/url-parse": "^1.4.8",
     "@types/zxcvbn": "^4.4.1",

packages/extension/src/configs/constants.ts

@@ -1,3 +1,4 @@
-export const EXTENSION_VERSION = "0.0.1";
+import packagejson from "@/../package.json";
+export const EXTENSION_VERSION = packagejson.version;
 export const EXTENSION_NAMESPACE =
   "dfc62431af1c3c1258035e5ab4058b6440e507238cf0fe429ea39827a7ee43fc"; //keccak256("enkrypt")

packages/extension/src/libs/background/external/handle-persistent-events.ts

@@ -0,0 +1,53 @@
+import PersistentEvents from "@/libs/persistent-events";
+import Browser from "webextension-polyfill";
+import { sendToWindow } from "@/libs/messenger/extension";
+import { OnMessageResponse } from "@enkryptcom/types";
+import { EnkryptProviderEventMethods } from "@/types/provider";
+import type BackgroundHandler from "..";
+
+async function handlePersistentEvents(this: BackgroundHandler) {
+  const persistentEvents = new PersistentEvents();
+  const allPersistentEvents = await persistentEvents.getAllEvents();
+  const tabs = Object.keys(allPersistentEvents).map((s) => parseInt(s));
+  const persistentEventPromises: Promise<void>[] = [];
+  tabs.forEach((tab) => {
+    const tabPromise = Browser.tabs
+      .get(tab)
+      .then(() => {
+        const eventPromises: Promise<OnMessageResponse | undefined>[] = [];
+        allPersistentEvents[tab].forEach((persistentEvent) => {
+          const promise = this.externalHandler(persistentEvent.event, {
+            savePersistentEvents: false,
+          }).then((newResponse) => {
+            if (
+              !newResponse.error &&
+              newResponse.result !== persistentEvent.response.result
+            ) {
+              return sendToWindow(
+                {
+                  provider: persistentEvent.event.provider,
+                  message: JSON.stringify({
+                    method: EnkryptProviderEventMethods.persistentEvents,
+                    params: [
+                      JSON.parse(persistentEvent.event.message),
+                      persistentEvent.response.result,
+                      newResponse.result,
+                    ],
+                  }),
+                },
+                tab
+              );
+            }
+          });
+          eventPromises.push(promise);
+        });
+        return Promise.all(eventPromises);
+      })
+      .catch(() => {
+        persistentEvents.deleteEvents(tab);
+      });
+    persistentEventPromises.push(tabPromise as any);
+  });
+  await Promise.all(persistentEventPromises);
+}
+export default handlePersistentEvents;

packages/extension/src/libs/background/external/index.ts

@@ -0,0 +1,2 @@
+import handlePersistentEvents from "./handle-persistent-events";
+export { handlePersistentEvents };