Prompt receipt

* initial commit Optional post-accept receipt window popup TODO: Iterate through visualized params vs the result JSON * removing code * Implemented receipt prompt Receipt prompt functionality fully implemented * UX Show request header move example file * Update lang-select.vue Provide translated locale keys in the lang select component * Update BitShares.js Reject prompt if some of the prompt contents fail to render * Fixes Fix lang select Fix max url char limit bug via ipcrenderer data passthrough * Fixes Change script name Create documentation Fix type errors in popup & receipt components * Create bitshares beautify function Avoid bloating the Bitshares blockchain class --------- Co-authored-by: CM <grctestemail@gmail.com>
bitshares · Aug 29, 2023 · 36fa580 · 36fa580
1 parent 62330b6
commit 36fa580
Show file tree

Hide file tree

Showing 40 changed files with 8,146 additions and 3,405 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@ Thumbs.db
 /app/app.js
 /app/modal.js
 /app/background.js
+/app/receipt.js
 /app/**/*.map
 /app/*.ttf
 /app/*.woff

diff --git a/app/receipt.html b/app/receipt.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body class="text-center">
+  <div class="main" id="receipt">
+    <Receipt ref="receiptComp"></Receipt>
+  </div>
+  <script src="receipt.js"></script>
+</body>
+</html>
diff --git a/app/translations/operations/en.json b/app/translations/operations/en.json
@@ -44,7 +44,12 @@
         "accept_btn": "Sign & Broadcast",
         "sign_and_broadcast_btn": "Sign & Broadcast",
         "sign_btn": "Sign",
-        "reject_btn": "Ignore"
+        "reject_btn": "Ignore",
+        "receipt": {
+            "title": "Do you want a receipt?",
+            "yes": "Yes, I want a receipt.",
+            "no": "No, I don't want a receipt."
+        }
     },
     "whitelist": {
         "prompt": "Whitelist subsequent '{{method}}' requests from this app?"

diff --git a/build/webpack.app.config.js b/build/webpack.app.config.js
@@ -7,6 +7,7 @@ module.exports = env => {
     entry: {
       background: "./src/background.js",
       modal: "./src/modal.js",
+      receipt: "./src/receipt.js",
       app: "./src/app.js"
     },
     output: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "beet",
   "productName": "Beet Blockchain Companion",
-  "version": "0.16.0",
+  "version": "0.20.0",
   "apiversion": 3,
   "description": "Beet is a stand-alone key-manager and signing app for blockchains like BitShares, Bitcoin and others.",
   "author": "clockworkgr <alex@clockwork.gr>",

diff --git a/src/background.js b/src/background.js
@@ -36,6 +36,8 @@ import * as Actions from './lib/Actions';
 let mainWindow;
 let modalWindows = {};
 let modalRequests = {};
+
+let receiptWindows = {};
 var timeout;
 
 var isDevMode = process.execPath.match(/[\\/]electron/);
@@ -70,17 +72,14 @@ const createModal = async (arg, modalEvent) => {
     }
 
     modalRequests[id] = {request: request, event: modalEvent};
-
-    let targetURL = `file://${__dirname}/modal.html?`
-                    + `id=${encodeURIComponent(id)}`
-                    + `&type=${encodeURIComponent(type)}`
-                    + `&request=${encodeURIComponent(JSON.stringify(request))}`;
+    let targetURL = `file://${__dirname}/modal.html?id=${encodeURIComponent(id)}`;
+    let modalData = { id, type, request };
 
     if (type === Actions.REQUEST_LINK) {
         let existingLinks = arg.existingLinks;
         if (existingLinks) {
             modalRequests[id]['existingLinks'] = existingLinks;
-            targetURL += `&existingLinks=${encodeURIComponent(JSON.stringify(existingLinks))}`;
+            modalData['existingLinks'] = existingLinks;
         }
     }
 
@@ -92,8 +91,8 @@ const createModal = async (arg, modalEvent) => {
       }
       modalRequests[id]['visualizedAccount'] = visualizedAccount;
       modalRequests[id]['visualizedParams'] = visualizedParams;
-      targetURL += `&visualizedAccount=${encodeURIComponent(visualizedAccount)}`;
-      targetURL += `&visualizedParams=${encodeURIComponent(visualizedParams)}`;
+      modalData['visualizedAccount'] = visualizedAccount;
+      modalData['visualizedParams'] = visualizedParams;
     }
 
     if ([Actions.VOTE_FOR].includes(type)) {
@@ -102,7 +101,7 @@ const createModal = async (arg, modalEvent) => {
         throw 'Missing required payload field'
       }
       modalRequests[id]['payload'] = payload;
-      targetURL += `&payload=${encodeURIComponent(JSON.stringify(payload))}`;
+      modalData['payload'] = payload;
     }
 
     if ([
@@ -117,7 +116,7 @@ const createModal = async (arg, modalEvent) => {
         throw 'Missing required accounts field'
       }
       modalRequests[id]['accounts'] = accounts;
-      targetURL += `&accounts=${encodeURIComponent(JSON.stringify(accounts))}`;
+      modalData['accounts'] = accounts;
     }
 
     if ([Actions.TRANSFER].includes(type)) {
@@ -136,22 +135,27 @@ const createModal = async (arg, modalEvent) => {
       let target = arg.target;
       modalRequests[id]['target'] = target;
 
-      targetURL += `&chain=${encodeURIComponent(chain)}`;
-      targetURL += `&accountName=${encodeURIComponent(accountName)}`;
-      targetURL += `&target=${encodeURIComponent(target)}`;
-      targetURL += `&toSend=${encodeURIComponent(toSend)}`;
+      modalData['chain'] = chain;
+      modalData['accountName'] = accountName;
+      modalData['target'] = target;
+      modalData['toSend'] = toSend;
     }
 
     if ([Actions.INJECTED_CALL, Actions.TRANSFER].includes(type)) {
         if (arg.isBlockedAccount) {
             modalRequests[id]['warning'] = true;
-            targetURL += `&warning=blockedAccount`;
+            modalData['warning'] = "blockedAccount";
         } else if (arg.serverError) {
             modalRequests[id]['warning'] = true;
-            targetURL += `&warning=serverError`;
+            modalData['warning'] = "serverError";
         }
     }
 
+    ipcMain.on(`get:prompt:${id}`, (event) => {
+        // The modal window is ready to receive data
+        event.reply(`respond:prompt:${id}`, modalData);
+    });
+
     modalWindows[id] = new BrowserWindow({
         parent: mainWindow,
         title: 'Beet prompt',
@@ -193,6 +197,75 @@ const createModal = async (arg, modalEvent) => {
               }
           });
           delete modalRequests[id];
+          modalData = {};
+      }
+    });
+}
+
+/*
+ * Creating an optional receipt browser window popup
+ */
+const createReceipt = async (arg, modalEvent) => {
+    let modalHeight = 600;
+    let modalWidth = 800;
+    if (!mainWindow) {
+        logger.debug(`No window`);
+        throw 'No main window';
+    }
+
+    let request = arg.request;
+    let id = request.id;
+    let result = arg.result;
+    let receipt = arg.receipt;
+    let notifyTXT = arg.notifyTXT;
+    if (!request || !request.id || !result || !notifyTXT || !receipt) {
+        logger.debug(`No request`);
+        throw 'No request';
+    }
+
+    if (receiptWindows[id]) {
+        throw 'Receipt window exists already!';
+    }
+
+    let targetURL = `file://${__dirname}/receipt.html?id=${encodeURIComponent(id)}`;
+
+    ipcMain.on(`get:receipt:${id}`, (event) => {
+        // The modal window is ready to receive data
+        event.reply(
+            `respond:receipt:${id}`,
+            { id, request, result, receipt, notifyTXT }
+        );
+    });
+
+    receiptWindows[id] = new BrowserWindow({
+        parent: mainWindow,
+        title: 'Beet receipt',
+        width: modalWidth,
+        height: modalHeight,
+        minWidth: modalWidth,
+        minHeight: modalHeight,
+        maxWidth: modalWidth,
+        maximizable: true,
+        maxHeight: modalHeight,
+        useContentSize: true,
+        webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false,
+            enableRemoteModule: true
+        },
+        icon: __dirname + '/img/beet-taskbar.png'
+    });
+
+    receiptWindows[id].loadURL(targetURL);
+
+    receiptWindows[id].once('ready-to-show', () => {
+        console.log('ready to show modal')
+        receiptWindows[id].show();
+    })
+
+    receiptWindows[id].on('closed', () => {
+      if (receiptWindows[id]) {
+          delete receiptWindows[id];
       }
     });
 }
@@ -314,6 +387,17 @@ const createWindow = async () => {
       }
   })
 
+    /*
+   * Create receipt popup & wait for user response
+   */
+    ipcMain.on('createReceipt', async (event, arg) => {
+        try {
+          await createReceipt(arg, event);
+        } catch (error) {
+          console.log(error);
+        }
+    })
+
   ipcMain.on('notify', (event, arg) => {
       logger.debug("notify");
       const NOTIFICATION_TITLE = 'Beet wallet notification';

diff --git a/src/components/lang-select.vue b/src/components/lang-select.vue
@@ -1,7 +1,7 @@
 <script setup>
-    import { ref, onMounted, computed, inject } from 'vue';
+    import { ref, onMounted, computed, inject, defineProps } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { locales, defaultLocale, selectLocales, menuLocales } from "../config/i18n.js";
+    import { defaultLocale, selectLocales, menuLocales } from "../config/i18n.js";
     import RendererLogger from "../lib/RendererLogger";
     import store from '../store/index';
 
@@ -19,16 +19,12 @@
         }
     });
 
-    let localesRef = computed(() => {
-        return menuLocales;
-    });
-
     let location = computed(() => {
         return props.location;
     });
 
     let selected = ref(
-        store.state.SettingsStore.settings.locale.iso ?? defaultLocale.iso
+        store.state.SettingsStore.settings.locale?.iso ?? defaultLocale.iso
     );
 
     let open = ref(false);
@@ -42,14 +38,14 @@
     }
 
     function onSelected(locale) {
-        emitter.emit('i18n', locale.value);
-        store.dispatch("SettingsStore/setLocale", {locale: locale.value});
-        selected.value = locale.value;
+        const detectedLocale = selectLocales[locale.index].value
+        emitter.emit('i18n', detectedLocale);
+        store.dispatch("SettingsStore/setLocale", {locale: detectedLocale});
+        selected.value = detectedLocale;
         open.value = false;
     }
 </script>
 
-
 <template>
     <ui-menu-anchor
         v-if="location === 'prompt'"
@@ -64,11 +60,18 @@
         </ui-button>
         <ui-menu
             v-model="open"
-            style="border: 1px solid #C7088E;"
+            style="border: 1px solid #C7088E; color: black;"
             position="BOTTOM_START"
-            :items="localesRef"
             @selected="onSelected"
-        />
+        >
+            <ui-menuitem
+                v-for="item in selectLocales"
+                :key="item.value"
+                :value="item.value"
+            >
+                {{ item.label }}
+            </ui-menuitem>
+        </ui-menu>
     </ui-menu-anchor>
     <ui-menu-anchor
         v-else
@@ -89,11 +92,9 @@
             <ui-menuitem
                 v-for="locale in selectLocales"
                 :key="locale.value"
-                :value="locale.value"
+                :value="locale.label"
             >
-                <ui-menuitem-text>
-                    {{ locale.label }}
-                </ui-menuitem-text>
+                {{ locale.label }}
             </ui-menuitem>
         </ui-menu>
     </ui-menu-anchor>