From 4670e1061ba33282444c3831ffa0ef00e7e5cc74 Mon Sep 17 00:00:00 2001
From: Alexandros Kalogerakis <akalogerakis@unicorndomain.gr>
Date: Mon, 4 Nov 2024 11:54:38 +0200
Subject: [PATCH] feat: export error log and show error modals on transaction
 errors

---
 src/composables/addressBook.ts                |  28 +---
 src/constants/common.ts                       |   1 +
 src/lib/logger.ts                             |  39 ++++-
 .../AddressBook/AddressBookList.vue           |   1 +
 src/popup/components/InputField.vue           |   2 +-
 .../Modals/ConfirmDisableErrorLog.vue         | 148 ++++++++++++++++++
 src/popup/components/Modals/Default.vue       |  38 ++++-
 .../components/Modals/MultisigVaultCreate.vue |  15 +-
 src/popup/components/buttons/BtnSubheader.vue |   2 +-
 src/popup/locales/en.json                     |  13 +-
 src/popup/pages/ErrorLogSettings.vue          |  50 +++++-
 src/popup/pages/SignTransaction.vue           |  16 +-
 src/popup/router/modals.ts                    |  90 ++++++-----
 .../aeternity/components/TransferReview.vue   |  37 ++---
 .../components/TransferSignedTxReview.vue     |   9 +-
 .../aeternity/libs/AeAccountHdWallet.ts       |  11 +-
 .../bitcoin/components/TransferReview.vue     |  17 +-
 .../ethereum/components/TransferReview.vue    |  14 +-
 src/utils/common.ts                           |  26 +++
 19 files changed, 415 insertions(+), 142 deletions(-)
 create mode 100644 src/popup/components/Modals/ConfirmDisableErrorLog.vue

diff --git a/src/composables/addressBook.ts b/src/composables/addressBook.ts
index addbd5df7..89aed0e28 100644
--- a/src/composables/addressBook.ts
+++ b/src/composables/addressBook.ts
@@ -1,6 +1,4 @@
 import { computed, ref, watch } from 'vue';
-import { Directory, Filesystem } from '@capacitor/filesystem';
-import { Capacitor } from '@capacitor/core';
 
 import {
   AccountAddress,
@@ -10,12 +8,12 @@ import {
 import { STORAGE_KEYS, MODAL_ADDRESS_BOOK_IMPORT } from '@/constants';
 import { AddressBookEntryExists, AddressBookInvalidAddress, AddressBookRequiredFields } from '@/lib/errors';
 import {
-  convertBlobToBase64,
   createCustomScopedComposable,
   getProtocolByAddress,
   handleUnknownError,
   selectFiles,
   pipe,
+  exportFile,
 } from '@/utils';
 import { tg as t } from '@/popup/plugins/i18n';
 
@@ -170,29 +168,15 @@ export const useAddressBook = createCustomScopedComposable(() => {
   }
 
   async function exportAddressBook() {
-    const json = JSON.stringify(addressBook.value);
-    const blob = new Blob([json], { type: 'text/plain' });
-    const a = document.createElement('a');
-    const href = window.URL.createObjectURL(blob);
-    const filename = 'addressBookExport.json';
-
-    if (Capacitor.isNativePlatform()) {
-      const base64 = await convertBlobToBase64(blob);
-      const saveFile = await Filesystem.writeFile({
-        path: filename,
-        data: base64,
-        directory: Directory.Documents,
-      });
-      const path = saveFile.uri;
+    const path = await exportFile(
+      JSON.stringify(addressBook.value),
+      'addressBookExport.json',
+    );
+    if (path) {
       openDefaultModal({
         title: t('pages.addressBook.export.title'),
         msg: t('pages.addressBook.export.message') + path,
       });
-    } else {
-      a.download = filename;
-      a.href = href;
-      a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
-      a.click();
     }
   }
 
diff --git a/src/constants/common.ts b/src/constants/common.ts
index a1dd9c332..17703e000 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -326,6 +326,7 @@ export const MODAL_CONFIRM_RAW_SIGN = 'confirm-raw-sign';
 export const MODAL_CONFIRM_UNSAFE_SIGN = 'confirm-unsafe-sign';
 export const MODAL_CONFIRM_CONNECT = 'confirm-connect';
 export const MODAL_CONFIRM_ACCOUNT_LIST = 'confirm-account-list';
+export const MODAL_CONFIRM_DISABLE_ERROR_LOG = 'confirm-disable-error-log';
 export const MODAL_CONSENSUS_INFO = 'consensus-info';
 export const MODAL_DEFAULT = 'default';
 export const MODAL_ERROR_LOG = 'error-log';
diff --git a/src/lib/logger.ts b/src/lib/logger.ts
index 199ec9af6..4cb4b2589 100644
--- a/src/lib/logger.ts
+++ b/src/lib/logger.ts
@@ -2,10 +2,14 @@
 import { pick } from 'lodash-es';
 import { detect } from 'detect-browser';
 import { App, ComputedRef } from 'vue';
+
 import { IS_PRODUCTION, STORAGE_KEYS } from '@/constants';
-import { useModals, useUi } from '../composables';
-import { RejectedByUserError } from './errors';
+import { exportFile } from '@/utils';
+import { tg as t } from '@/popup/plugins/i18n';
+import { useModals, useUi } from '@/composables';
+
 import { WalletStorage } from './WalletStorage';
+import { RejectedByUserError } from './errors';
 
 interface ILoggerOptions {
   background?: boolean;
@@ -21,6 +25,7 @@ interface ILoggerEntry {
 }
 
 interface ILoggerInput {
+  title?: string;
   modal?: boolean;
   message: string;
   type: 'vue-error' | 'unhandledrejection' | 'window-error' | 'api-response';
@@ -87,6 +92,15 @@ export default class Logger {
   }
 
   static write({ modal = !IS_PRODUCTION, ...error }: ILoggerInput) {
+    if (!Logger.background && modal && error.message) {
+      const { openDefaultModal } = useModals();
+      openDefaultModal({
+        icon: 'critical',
+        title: error.title || t('modals.error-log.title'),
+        msg: error.message,
+        textCenter: true,
+      });
+    }
     if (!Logger.saveErrorLog.value) {
       return;
     }
@@ -99,10 +113,6 @@ export default class Logger {
       time: Date.now(),
     };
     WalletStorage.set(STORAGE_KEYS.errorLog, [...errorLog, logEntry]);
-    if (!Logger.background && modal && error.message) {
-      const { openErrorModal } = useModals();
-      openErrorModal(logEntry);
-    }
   }
 
   static get(): ILoggerEntry[] {
@@ -115,4 +125,21 @@ export default class Logger {
       // TODO: make call to backend here
     }
   }
+
+  static async exportErrorLog(clear: boolean = false) {
+    const path = await exportFile(
+      JSON.stringify(Logger.get()),
+      'errorLogExport.json',
+    );
+    if (path) {
+      const { openDefaultModal } = useModals();
+      openDefaultModal({
+        title: t('pages.addressBook.export.title'),
+        msg: t('pages.addressBook.export.message') + path,
+      });
+    }
+    if (clear) {
+      WalletStorage.set(STORAGE_KEYS.errorLog, []);
+    }
+  }
 }
diff --git a/src/popup/components/AddressBook/AddressBookList.vue b/src/popup/components/AddressBook/AddressBookList.vue
index 1ebdcbfee..eecd9e263 100644
--- a/src/popup/components/AddressBook/AddressBookList.vue
+++ b/src/popup/components/AddressBook/AddressBookList.vue
@@ -253,6 +253,7 @@ export default defineComponent({
   .address-book-item {
     background-color: var(--bg-color);
     border: var(--border-width) solid var(--bg-color);
+    padding: 8px 2px 8px 8px;
   }
 
   .search-field {
diff --git a/src/popup/components/InputField.vue b/src/popup/components/InputField.vue
index 76905118d..2e52b9a91 100644
--- a/src/popup/components/InputField.vue
+++ b/src/popup/components/InputField.vue
@@ -355,7 +355,7 @@ export default defineComponent({
   .input-wrapper {
     position: relative;
     display: block;
-    padding: 10px 8px 12px 10px; // Decides on the input size
+    padding: 10px 8px 10px 10px; // Decides on the input size
     background-color: var(--color-bg);
     border: none;
     border-radius: $border-radius-interactive;
diff --git a/src/popup/components/Modals/ConfirmDisableErrorLog.vue b/src/popup/components/Modals/ConfirmDisableErrorLog.vue
new file mode 100644
index 000000000..e796c3776
--- /dev/null
+++ b/src/popup/components/Modals/ConfirmDisableErrorLog.vue
@@ -0,0 +1,148 @@
+<template>
+  <Modal
+    class="confirm"
+    has-close-button
+    from-bottom
+    no-padding
+    @close="reject"
+  >
+    <div class="content">
+      <div class="icon-wrapper">
+        <IconBoxed>
+          <IconWrapper
+            :icon="ExportIcon"
+            icon-size="xl"
+            class="icon"
+          />
+        </IconBoxed>
+      </div>
+
+      <h2 class="text-heading-4 text-center">
+        {{ $t('pages.errors-log-settings.disableDialog.title') }}
+      </h2>
+
+      <div class="subtitle text-center">
+        {{ $t('pages.errors-log-settings.disableDialog.subtitle') }}
+      </div>
+
+      <div class="msg">
+        {{ $t('pages.errors-log-settings.disableDialog.msg') }}
+      </div>
+
+      <div class="question">
+        {{ $t('pages.errors-log-settings.disableDialog.question') }}
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="footer">
+        <BtnMain
+          variant="muted"
+          :text="$t('common.cancel')"
+          @click="reject"
+        />
+        <BtnMain
+          variant="primary"
+          extra-padded
+          :text="$t('pages.errors-log-settings.disableDialog.btnText')"
+          @click="resolve"
+        />
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+} from 'vue';
+import type {
+  RejectCallback,
+  ResolveCallback,
+} from '@/types';
+
+import IconBoxed from '@/popup/components/IconBoxed.vue';
+import IconWrapper from '@/popup/components/IconWrapper.vue';
+import Modal from '@/popup/components/Modal.vue';
+import BtnMain from '@/popup/components/buttons/BtnMain.vue';
+
+import ExportIcon from '@/icons/export-address-book.svg?vue-component';
+
+export default defineComponent({
+  components: {
+    IconWrapper,
+    Modal,
+    BtnMain,
+    IconBoxed,
+  },
+  props: {
+    resolve: {
+      type: Function as PropType<ResolveCallback<boolean>>,
+      required: true,
+    },
+    reject: { type: Function as PropType<RejectCallback>, required: true },
+  },
+  setup() {
+    return {
+      ExportIcon,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables' as *;
+@use '@/styles/typography';
+@use '@/styles/mixins';
+
+.confirm {
+  text-align: center;
+
+  .content {
+    padding: 8px 24px;
+  }
+
+  .text-heading-4 {
+    margin-bottom: 4px;
+  }
+
+  .subtitle {
+    @extend %face-sans-16-medium;
+
+    margin-bottom: 20px;
+  }
+
+  .msg {
+    @extend %face-sans-15-regular;
+
+    color: rgba($color-white, 0.85);
+    margin-bottom: 10px;
+  }
+
+  .question {
+    @extend %face-sans-15-semi-bold;
+
+    color: rgba($color-white, 0.85);
+    margin-bottom: 20px;
+  }
+
+  .icon-wrapper {
+    margin-bottom: 20px;
+
+    .icon {
+      background-color: rgba($color-primary, 0.4);
+      color: $color-primary;
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding-bottom: 24px;
+    padding-inline: 24px;
+  }
+}
+</style>
diff --git a/src/popup/components/Modals/Default.vue b/src/popup/components/Modals/Default.vue
index 3901adb9e..ab88206ac 100644
--- a/src/popup/components/Modals/Default.vue
+++ b/src/popup/components/Modals/Default.vue
@@ -37,6 +37,14 @@
 
     <template #footer>
       <slot name="footer">
+        <BtnMain
+          v-if="icon === 'critical' && saveErrorLogEnabled"
+          variant="muted"
+          :class="{ 'center-button': textCenter }"
+          :text="buttonMessage || $t('pages.errors-log-settings.exportErrorLog')"
+          :icon="ExportIcon"
+          @click="exportErrorLog"
+        />
         <BtnMain
           :class="{ 'center-button': textCenter }"
           :text="buttonMessage || $t('common.ok')"
@@ -48,13 +56,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import type { ResolveCallback, StatusIconType } from '@/types';
-import Modal from '../Modal.vue';
-import BtnMain from '../buttons/BtnMain.vue';
-import StatusIcon from '../StatusIcon.vue';
-import TemplateRenderer from '../TemplateRenderer.vue';
-import IconBoxed from '../IconBoxed.vue';
+import Logger from '@/lib/logger';
+
+import Modal from '@/popup/components/Modal.vue';
+import BtnMain from '@/popup/components/buttons/BtnMain.vue';
+import StatusIcon from '@/popup/components/StatusIcon.vue';
+import TemplateRenderer from '@/popup/components/TemplateRenderer.vue';
+import IconBoxed from '@/popup/components/IconBoxed.vue';
+
+import ExportIcon from '@/icons/export-address-book.svg?vue-component';
 
 export default defineComponent({
   components: {
@@ -74,6 +86,20 @@ export default defineComponent({
     textCenter: Boolean,
     fullScreen: Boolean,
   },
+  setup({ resolve }) {
+    const saveErrorLogEnabled = computed(() => Logger.saveErrorLog.value);
+
+    function exportErrorLog() {
+      Logger.exportErrorLog();
+      resolve();
+    }
+
+    return {
+      saveErrorLogEnabled,
+      exportErrorLog,
+      ExportIcon,
+    };
+  },
 });
 </script>
 
diff --git a/src/popup/components/Modals/MultisigVaultCreate.vue b/src/popup/components/Modals/MultisigVaultCreate.vue
index 9a98e247d..e3e33da1e 100644
--- a/src/popup/components/Modals/MultisigVaultCreate.vue
+++ b/src/popup/components/Modals/MultisigVaultCreate.vue
@@ -210,7 +210,8 @@ import { Encoded } from '@aeternity/aepp-sdk';
 
 import type { ICreateMultisigAccount, ObjectValues } from '@/types';
 import { MODAL_ADDRESS_BOOK_ACCOUNT_SELECTOR, PROTOCOLS } from '@/constants';
-import { excludeFalsy, handleUnknownError } from '@/utils';
+import { tg } from '@/popup/plugins/i18n';
+import { excludeFalsy } from '@/utils';
 import { ROUTE_MULTISIG_ACCOUNT } from '@/popup/router/routeNames';
 import {
   useAccounts,
@@ -240,6 +241,7 @@ import CircleCloseIcon from '@/icons/circle-close.svg?vue-component';
 import QrScanIcon from '@/icons/qr-scan.svg?vue-component';
 import AddressBookIcon from '@/icons/menu-card-fill.svg?vue-component';
 import PlusCircleIcon from '@/icons/plus-circle.svg?vue-component';
+import Logger from '@/lib/logger';
 
 const STEPS = {
   form: 'form',
@@ -426,12 +428,11 @@ export default defineComponent({
           signersAddressList.value,
         );
       } catch (error: any) {
-        handleUnknownError(error);
-        await openDefaultModal({
-          title: t('multisig.multisigVaultCreationFailed'),
-          icon: 'critical',
-          msg: error?.details?.reason,
-          textCenter: true,
+        Logger.write({
+          title: tg('multisig.multisigVaultCreationFailed'),
+          message: error?.details?.reason || '',
+          type: 'api-response',
+          modal: true,
         });
         currentStep.value = STEPS.form;
       }
diff --git a/src/popup/components/buttons/BtnSubheader.vue b/src/popup/components/buttons/BtnSubheader.vue
index 47ba8eb76..887417838 100644
--- a/src/popup/components/buttons/BtnSubheader.vue
+++ b/src/popup/components/buttons/BtnSubheader.vue
@@ -53,7 +53,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 12px;
+  padding: 20px 16px;
   border-radius: $border-radius-interactive;
   color: $color-white;
 
diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index 9903d8fa8..f1b52c4ee 100644
--- a/src/popup/locales/en.json
+++ b/src/popup/locales/en.json
@@ -617,7 +617,7 @@
       "txDetails": "Transaction details",
       "tokenDetails": "Token details",
       "coinDetails": "Coin details",
-      "saveErrorsLog": "Save error log",
+      "saveErrorsLog": "Error log",
       "resetWallet": "Reset wallet",
       "seedPhrase": "Seed phrase",
       "secureLogin": "Secure login",
@@ -631,7 +631,16 @@
       "addressBookAdd": "Add new address"
     },
     "errors-log-settings": {
-      "description": "This will help us to identify what causes the errors. Thank you for being a fellow Superhero!"
+      "description": "<p>Superhero Wallet is able of keeping an error log of the errors you encounter if you chose to do so. This will help us to identify what causes the errors and work on proper fixes.</p><p>You may export the error log in <strong>.json</strong> format and provide this information when requested by Support.</p><p>Thank you for being a fellow Superhero!</p>",
+      "keepErrorLog": "Keep error log",
+      "exportErrorLog": "Export error log",
+      "disableDialog": {
+        "title": "Disable error log",
+        "subtitle": "and export collected data",
+        "msg": "You are about to disable keeping an error log for Superhero Wallet. This will delete all previous error data saved in the storage.",
+        "question": "Would you like to export the error log and disable the feature?",
+        "btnText": "Export and disable"
+      }
     },
     "addressBook": {
       "addAddress": "Add",
diff --git a/src/popup/pages/ErrorLogSettings.vue b/src/popup/pages/ErrorLogSettings.vue
index c67b9cc28..5e4a014de 100644
--- a/src/popup/pages/ErrorLogSettings.vue
+++ b/src/popup/pages/ErrorLogSettings.vue
@@ -3,38 +3,75 @@
     <IonContent class="ion-padding ion-content-bg">
       <div class="errors-log-settings">
         <p class="text-description">
-          {{ $t('pages.errors-log-settings.description') }}
+          <TemplateRenderer :str="$t('pages.errors-log-settings.description')" />
         </p>
 
         <div class="options">
           <SwitchButton
-            :label="$t('pages.titles.saveErrorsLog')"
+            :label="$t('pages.errors-log-settings.keepErrorLog')"
             :model-value="saveErrorLog"
-            @update:modelValue="setSaveErrorLog"
+            @click.prevent="toggleSaveErrorLog"
           />
         </div>
+
+        <BtnMain
+          :disabled="!hasErrors || !saveErrorLog"
+          extend
+          class="account-select-options-item"
+          @click="exportErrorLog(false)"
+        >
+          {{ $t("pages.errors-log-settings.exportErrorLog") }}
+        </BtnMain>
       </div>
     </IonContent>
   </IonPage>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { IonPage, IonContent } from '@ionic/vue';
-import { useUi } from '@/composables';
+import { MODAL_CONFIRM_DISABLE_ERROR_LOG } from '@/constants';
+import { useModals, useUi } from '@/composables';
+import Logger from '@/lib/logger';
 
-import SwitchButton from '../components/SwitchButton.vue';
+import BtnMain from '@/popup/components/buttons/BtnMain.vue';
+import SwitchButton from '@/popup/components/SwitchButton.vue';
+import TemplateRenderer from '@/popup/components/TemplateRenderer.vue';
 
 export default defineComponent({
   components: {
+    TemplateRenderer,
+    BtnMain,
     SwitchButton,
     IonPage,
     IonContent,
   },
   setup() {
     const { saveErrorLog, setSaveErrorLog } = useUi();
+    const { openModal } = useModals();
+    const hasErrors = ref(Logger.get().length > 0);
+
+    async function exportErrorLog(clear: boolean = false) {
+      Logger.exportErrorLog(clear);
+    }
+
+    async function toggleSaveErrorLog() {
+      if (saveErrorLog.value && hasErrors.value) {
+        try {
+          await openModal<boolean>(MODAL_CONFIRM_DISABLE_ERROR_LOG);
+          exportErrorLog(true);
+          setSaveErrorLog(false);
+          hasErrors.value = false;
+        } catch (error) { /* NOOP */ }
+      } else {
+        setSaveErrorLog(!saveErrorLog.value);
+      }
+    }
 
     return {
+      hasErrors,
+      exportErrorLog,
+      toggleSaveErrorLog,
       saveErrorLog,
       setSaveErrorLog,
     };
@@ -51,6 +88,7 @@ export default defineComponent({
 
   .options {
     margin-top: 20px;
+    margin-bottom: 36px;
   }
 }
 </style>
diff --git a/src/popup/pages/SignTransaction.vue b/src/popup/pages/SignTransaction.vue
index 35830ebfd..1779d064a 100644
--- a/src/popup/pages/SignTransaction.vue
+++ b/src/popup/pages/SignTransaction.vue
@@ -22,6 +22,7 @@ import {
   useUi,
   useAccounts,
 } from '@/composables';
+import Logger from '@/lib/logger';
 
 export default defineComponent({
   name: 'SignTransaction',
@@ -98,16 +99,17 @@ export default defineComponent({
           openCallbackOrGoHome(true, { transaction: signedTransaction });
         }
       } catch (error: any) {
-        await openDefaultModal({
-          title: t('modals.transaction-failed.msg'),
-          icon: 'critical',
-          msg: error.message,
-        });
-        openCallbackOrGoHome(false);
-
         if (error instanceof RejectedByUserError) {
           handleUnknownError(error);
+        } else {
+          Logger.write({
+            title: t('modals.transaction-failed.title'),
+            message: error.message || t('modals.transaction-failed.msg'),
+            type: 'api-response',
+            modal: true,
+          });
         }
+        openCallbackOrGoHome(false);
       } finally {
         setLoaderVisible(false);
       }
diff --git a/src/popup/router/modals.ts b/src/popup/router/modals.ts
index 4cd74d3b2..ca48c7a83 100644
--- a/src/popup/router/modals.ts
+++ b/src/popup/router/modals.ts
@@ -11,6 +11,7 @@ import {
   MODAL_CONFIRM_RAW_SIGN,
   MODAL_CONFIRM_UNSAFE_SIGN,
   MODAL_CONFIRM_TRANSACTION_SIGN,
+  MODAL_CONFIRM_DISABLE_ERROR_LOG,
   MODAL_CONSENSUS_INFO,
   MODAL_DEFAULT,
   MODAL_ERROR_LOG,
@@ -50,49 +51,50 @@ import { useModals } from '@/composables';
 
 import NetworkSwitcherModal from '@/popup/components/Modals/NetworkSwitcherModal.vue';
 
-import AccountCreate from '../components/Modals/AccountCreate.vue';
-import Default from '../components/Modals/Default.vue';
-import ProtocolSpecificView from '../components/ProtocolSpecificView.vue';
-import ProtocolSelect from '../components/Modals/ProtocolSelect.vue';
-import AccountImport from '../components/Modals/AccountImport.vue';
-import AccountSelectOptions from '../components/Modals/AccountSelectOptions.vue';
-import ClaimSuccess from '../components/Modals/ClaimSuccess.vue';
-import Confirm from '../components/Modals/Confirm.vue';
-import ConfirmConnect from '../pages/Popups/Connect.vue';
-import ConfirmAccountList from '../pages/Popups/AccountList.vue';
+import ConfirmDisableErrorLog from '@/popup/components/Modals/ConfirmDisableErrorLog.vue';
+import AccountCreate from '@/popup/components/Modals/AccountCreate.vue';
+import Default from '@/popup/components/Modals/Default.vue';
+import ProtocolSpecificView from '@/popup/components/ProtocolSpecificView.vue';
+import ProtocolSelect from '@/popup/components/Modals/ProtocolSelect.vue';
+import AccountImport from '@/popup/components/Modals/AccountImport.vue';
+import AccountSelectOptions from '@/popup/components/Modals/AccountSelectOptions.vue';
+import ClaimSuccess from '@/popup/components/Modals/ClaimSuccess.vue';
+import Confirm from '@/popup/components/Modals/Confirm.vue';
+import ConfirmConnect from '@/popup/pages/Popups/Connect.vue';
+import ConfirmAccountList from '@/popup/pages/Popups/AccountList.vue';
 
-import ErrorLog from '../components/Modals/ErrorLog.vue';
-import PrivateKeyExport from '../components/Modals/PrivateKeyExport.vue';
-import FormSelectOptions from '../components/Modals/FormSelectOptions.vue';
-import ConfirmTransactionSign from '../components/Modals/ConfirmTransactionSign.vue';
-import ConfirmRawSign from '../components/Modals/ConfirmRawSign.vue';
-import ConfirmUnsafeSign from '../components/Modals/ConfirmUnsafeSign.vue';
-import QrCodeScanner from '../components/Modals/QrCodeScanner.vue';
-import Help from '../components/Modals/Help.vue';
-import AssetSelector from '../components/Modals/AssetSelector.vue';
-import ResetWallet from '../components/Modals/ResetWalletModal.vue';
-import RecipientHelper from '../components/Modals/RecipientHelper.vue';
-import RecipientInfo from '../components/Modals/RecipientInfo.vue';
-import ConsensusInfo from '../components/Modals/ConsensusInfo.vue';
-import PayloadForm from '../components/Modals/PayloadForm.vue';
-import ClaimGiftCard from '../components/Modals/ClaimGiftCard.vue';
-import MultisigVaultCreate from '../components/Modals/MultisigVaultCreate.vue';
-import WarningDappBrowser from '../components/Modals/WarningDappBrowser.vue';
-import MultisigProposalConfirmActions from '../components/Modals/MultisigProposalConfirmActions.vue';
-import MessageSign from '../pages/Popups/MessageSign.vue';
-import BrowserActions from '../components/Modals/BrowserActions.vue';
-import BiometricLogin from '../components/Modals/BiometricLogin.vue';
-import EnableBiometricLogin from '../components/Modals/EnableBiometricLogin.vue';
-import WalletConnect from '../components/Modals/WalletConnectModal.vue';
-import AirGapImportAccounts from '../components/Modals/AirGapImportAccounts.vue';
-import SignAirGapTransaction from '../components/Modals/SignAirGapTransaction.vue';
-import AddressBookImport from '../components/Modals/AddressBookImport.vue';
-import ShareAddress from '../components/ShareAddress.vue';
-import AddressBookAccountSelector from '../components/Modals/AddressBookAccountSelector.vue';
-import SetPassword from '../components/Modals/SetPassword.vue';
-import PasswordLogin from '../components/Modals/PasswordLogin.vue';
-import PrivateKeyImport from '../components/Modals/PrivateKeyImport.vue';
-import PermissionManager from '../components/Modals/PermissionManager.vue';
+import ErrorLog from '@/popup/components/Modals/ErrorLog.vue';
+import PrivateKeyExport from '@/popup/components/Modals/PrivateKeyExport.vue';
+import FormSelectOptions from '@/popup/components/Modals/FormSelectOptions.vue';
+import ConfirmTransactionSign from '@/popup/components/Modals/ConfirmTransactionSign.vue';
+import ConfirmRawSign from '@/popup/components/Modals/ConfirmRawSign.vue';
+import ConfirmUnsafeSign from '@/popup/components/Modals/ConfirmUnsafeSign.vue';
+import QrCodeScanner from '@/popup/components/Modals/QrCodeScanner.vue';
+import Help from '@/popup/components/Modals/Help.vue';
+import AssetSelector from '@/popup/components/Modals/AssetSelector.vue';
+import ResetWallet from '@/popup/components/Modals/ResetWalletModal.vue';
+import RecipientHelper from '@/popup/components/Modals/RecipientHelper.vue';
+import RecipientInfo from '@/popup/components/Modals/RecipientInfo.vue';
+import ConsensusInfo from '@/popup/components/Modals/ConsensusInfo.vue';
+import PayloadForm from '@/popup/components/Modals/PayloadForm.vue';
+import ClaimGiftCard from '@/popup/components/Modals/ClaimGiftCard.vue';
+import MultisigVaultCreate from '@/popup/components/Modals/MultisigVaultCreate.vue';
+import WarningDappBrowser from '@/popup/components/Modals/WarningDappBrowser.vue';
+import MultisigProposalConfirmActions from '@/popup/components/Modals/MultisigProposalConfirmActions.vue';
+import MessageSign from '@/popup/pages/Popups/MessageSign.vue';
+import BrowserActions from '@/popup/components/Modals/BrowserActions.vue';
+import BiometricLogin from '@/popup/components/Modals/BiometricLogin.vue';
+import EnableBiometricLogin from '@/popup/components/Modals/EnableBiometricLogin.vue';
+import WalletConnect from '@/popup/components/Modals/WalletConnectModal.vue';
+import AirGapImportAccounts from '@/popup/components/Modals/AirGapImportAccounts.vue';
+import SignAirGapTransaction from '@/popup/components/Modals/SignAirGapTransaction.vue';
+import AddressBookImport from '@/popup/components/Modals/AddressBookImport.vue';
+import ShareAddress from '@/popup/components/ShareAddress.vue';
+import AddressBookAccountSelector from '@/popup/components/Modals/AddressBookAccountSelector.vue';
+import SetPassword from '@/popup/components/Modals/SetPassword.vue';
+import PasswordLogin from '@/popup/components/Modals/PasswordLogin.vue';
+import PrivateKeyImport from '@/popup/components/Modals/PrivateKeyImport.vue';
+import PermissionManager from '@/popup/components/Modals/PermissionManager.vue';
 
 export default () => {
   const { registerModal } = useModals();
@@ -154,6 +156,10 @@ export default () => {
     component: ConfirmAccountList,
     showInPopupIfWebFrame: true,
   });
+  registerModal(MODAL_CONFIRM_DISABLE_ERROR_LOG, {
+    component: ConfirmDisableErrorLog,
+    showInPopupIfWebFrame: true,
+  });
   registerModal(MODAL_PRIVATE_KEY_EXPORT, {
     component: PrivateKeyExport,
   });
diff --git a/src/protocols/aeternity/components/TransferReview.vue b/src/protocols/aeternity/components/TransferReview.vue
index 9451a1c17..28515135f 100644
--- a/src/protocols/aeternity/components/TransferReview.vue
+++ b/src/protocols/aeternity/components/TransferReview.vue
@@ -156,7 +156,6 @@ import type { TransferFormModel, ITransaction, ITransferArgs } from '@/types';
 import { PROTOCOLS } from '@/constants';
 import {
   escapeSpecialChars,
-  handleUnknownError,
   toShiftedBigNumber,
 } from '@/utils';
 import { tg } from '@/popup/plugins/i18n';
@@ -166,7 +165,6 @@ import {
   useDeepLinkApi,
   useFungibleTokens,
   useLatestTransactionList,
-  useModals,
   useMultisigAccounts,
   useMultisigTransactions,
   useTippingContracts,
@@ -191,6 +189,7 @@ import AccountItem from '@/popup/components/AccountItem.vue';
 import DetailsItem from '@/popup/components/DetailsItem.vue';
 import TokenAmount from '@/popup/components/TokenAmount.vue';
 import BtnHelp from '@/popup/components/buttons/BtnHelp.vue';
+import Logger from '@/lib/logger';
 
 export default defineComponent({
   name: 'AeTransferReview',
@@ -218,7 +217,6 @@ export default defineComponent({
     const { t } = useI18n();
 
     const { homeRouteName } = useUi();
-    const { openDefaultModal } = useModals();
     const { openCallbackOrGoHome } = useDeepLinkApi();
     const { addAccountPendingTransaction } = useLatestTransactionList();
     const { activeAccount, isActiveAccountAirGap } = useAccounts();
@@ -270,10 +268,12 @@ export default defineComponent({
         : 0,
     );
 
-    function openTransactionFailedModal() {
-      openDefaultModal({
-        title: t('modals.transaction-failed.msg'),
-        icon: 'critical',
+    function openTransactionFailedModal(msg: string) {
+      Logger.write({
+        title: t('modals.transaction-failed.title'),
+        message: msg || t('modals.transaction-failed.msg'),
+        type: 'api-response',
+        modal: true,
       });
     }
 
@@ -297,7 +297,9 @@ export default defineComponent({
       );
     }
 
-    async function transfer({ amount, recipient, selectedAsset }: ITransferArgs) {
+    async function transfer(
+      { amount, recipient, selectedAsset }: ITransferArgs,
+    ): Promise<string | undefined> {
       const isSelectedAssetAeCoin = selectedAsset.contractId === AE_CONTRACT_ID;
 
       loading.value = true;
@@ -351,9 +353,9 @@ export default defineComponent({
         // TODO find out if emitting success in case falsy `actionResult` makes sense.
         emit('success');
         return actionResult?.hash;
-      } catch (error) {
-        openTransactionFailedModal();
-        throw error;
+      } catch (error: any) {
+        openTransactionFailedModal(error.message);
+        return undefined;
       } finally {
         loading.value = false;
       }
@@ -413,9 +415,8 @@ export default defineComponent({
         emit('success');
       } catch (error: any) {
         openCallbackOrGoHome(false);
-        openTransactionFailedModal();
+        openTransactionFailedModal(error.message);
         error.payload = { url: recipient };
-        throw error;
       } finally {
         loading.value = false;
       }
@@ -447,13 +448,13 @@ export default defineComponent({
 
           await postSpendTx(txToPropose, proposeTxHash);
           await updateMultisigAccounts();
+          emit('success');
           router.push({ name: ROUTE_MULTISIG_DETAILS_PROPOSAL_DETAILS });
         }
-      } catch (error) {
-        handleUnknownError(error);
+      } catch (error: any) {
+        openTransactionFailedModal(error.message);
       } finally {
-        emit('success');
-        loading.value = true;
+        loading.value = false;
       }
     }
 
@@ -493,7 +494,7 @@ export default defineComponent({
           recipient,
           selectedAsset,
         });
-        router.push({ name: homeRouteName.value, query: { latestTxHash: hash } });
+        if (hash) router.push({ name: homeRouteName.value, query: { latestTxHash: hash } });
       }
     }
 
diff --git a/src/protocols/aeternity/components/TransferSignedTxReview.vue b/src/protocols/aeternity/components/TransferSignedTxReview.vue
index 4f96d30cc..8f092cc39 100644
--- a/src/protocols/aeternity/components/TransferSignedTxReview.vue
+++ b/src/protocols/aeternity/components/TransferSignedTxReview.vue
@@ -125,6 +125,7 @@ import AvatarWithChainName from '@/popup/components/AvatarWithChainName.vue';
 import ModalHeader from '@/popup/components/ModalHeader.vue';
 import BtnHelp from '@/popup/components/buttons/BtnHelp.vue';
 import FormScanQrResult from '@/popup/components/form/FormScanQrResult.vue';
+import Logger from '@/lib/logger';
 
 export default defineComponent({
   name: 'TransferSignedTxReview',
@@ -231,10 +232,12 @@ export default defineComponent({
           },
         };
         addAccountPendingTransaction(activeAccount.value.address, tempTransaction);
-      } catch (e) {
-        openModal(MODAL_DEFAULT, {
+      } catch (error: any) {
+        Logger.write({
           title: tg('modals.transaction-failed.title'),
-          icon: 'critical',
+          message: error.message || tg('modals.transaction-failed.msg'),
+          type: 'api-response',
+          modal: true,
         });
       }
     }
diff --git a/src/protocols/aeternity/libs/AeAccountHdWallet.ts b/src/protocols/aeternity/libs/AeAccountHdWallet.ts
index cd6a2ab38..6c34f4111 100644
--- a/src/protocols/aeternity/libs/AeAccountHdWallet.ts
+++ b/src/protocols/aeternity/libs/AeAccountHdWallet.ts
@@ -27,6 +27,7 @@ import { useModals } from '@/composables/modals';
 import { useAccounts } from '@/composables/accounts';
 import { useAeMiddleware } from '@/protocols/aeternity/composables';
 import { usePermissions } from '@/composables/permissions';
+import Logger from '@/lib/logger';
 
 interface InternalOptions {
   fromAccount?: Encoded.AccountAddress;
@@ -114,13 +115,11 @@ export class AeAccountHdWallet extends MemoryAccount {
   ): Promise<Uint8Array> {
     const account = AeAccountHdWallet.getAccount(options?.fromAccount);
     if (account && isAccountAirGap(account)) {
-      const { openDefaultModal } = useModals();
-
-      openDefaultModal({
+      Logger.write({
         title: tg('airGap.signMessageErrorModal.title'),
-        msg: tg('airGap.signMessageErrorModal.msg'),
-        icon: 'critical',
-        textCenter: true,
+        message: tg('airGap.signMessageErrorModal.msg'),
+        type: 'api-response',
+        modal: true,
       });
     }
 
diff --git a/src/protocols/bitcoin/components/TransferReview.vue b/src/protocols/bitcoin/components/TransferReview.vue
index 0af2056a1..c54c0819b 100644
--- a/src/protocols/bitcoin/components/TransferReview.vue
+++ b/src/protocols/bitcoin/components/TransferReview.vue
@@ -37,7 +37,6 @@ import { useI18n } from 'vue-i18n';
 import {
   useAccounts,
   useLatestTransactionList,
-  useModals,
   useUi,
 } from '@/composables';
 import type { ITransaction, ITransferArgs, TransferFormModel } from '@/types';
@@ -49,6 +48,7 @@ import DetailsItem from '@/popup/components/DetailsItem.vue';
 import TokenAmount from '@/popup/components/TokenAmount.vue';
 import { BTC_SYMBOL } from '@/protocols/bitcoin/config';
 import BigNumber from 'bignumber.js';
+import Logger from '@/lib/logger';
 
 export default defineComponent({
   name: 'BtcTransferReview',
@@ -67,18 +67,17 @@ export default defineComponent({
     const { t } = useI18n();
     const router = useRouter();
     const { homeRouteName } = useUi();
-    const { openDefaultModal } = useModals();
     const { activeAccount, getLastActiveProtocolAccount } = useAccounts();
     const { addAccountPendingTransaction } = useLatestTransactionList();
 
     const loading = ref<boolean>(false);
 
     function openTransactionFailedModal(msg: string) {
-      openDefaultModal({
+      Logger.write({
         title: t('modals.transaction-failed.title'),
-        icon: 'critical',
-        msg,
-        textCenter: true,
+        message: msg || t('modals.transaction-failed.msg'),
+        type: 'api-response',
+        modal: true,
       });
     }
 
@@ -91,7 +90,9 @@ export default defineComponent({
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async function transfer({ amount, recipient, selectedAsset }: ITransferArgs) {
+    async function transfer(
+      { amount, recipient }: ITransferArgs,
+    ): Promise<string | undefined> {
       const bitcoinAdapter = ProtocolAdapterFactory.getAdapter(PROTOCOLS.bitcoin);
       try {
         loading.value = true;
@@ -107,7 +108,7 @@ export default defineComponent({
         } else {
           openTransactionFailedModal(processedErrorMessage);
         }
-        throw error;
+        return undefined;
       } finally {
         loading.value = false;
       }
diff --git a/src/protocols/ethereum/components/TransferReview.vue b/src/protocols/ethereum/components/TransferReview.vue
index de318273a..3177c699f 100644
--- a/src/protocols/ethereum/components/TransferReview.vue
+++ b/src/protocols/ethereum/components/TransferReview.vue
@@ -41,7 +41,6 @@ import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import {
   useAccounts,
   useLatestTransactionList,
-  useModals,
   useUi,
 } from '@/composables';
 import { PROTOCOLS } from '@/constants';
@@ -50,6 +49,7 @@ import { ETH_COIN_SYMBOL } from '@/protocols/ethereum/config';
 import TransferReviewBase from '@/popup/components/TransferSend/TransferReviewBase.vue';
 import DetailsItem from '@/popup/components/DetailsItem.vue';
 import TokenAmount from '@/popup/components/TokenAmount.vue';
+import Logger from '@/lib/logger';
 
 export default defineComponent({
   name: 'EthTransferReview',
@@ -68,7 +68,6 @@ export default defineComponent({
     const { t } = useI18n();
     const router = useRouter();
     const { homeRouteName } = useUi();
-    const { openDefaultModal } = useModals();
     const { getLastActiveProtocolAccount } = useAccounts();
     const { addAccountPendingTransaction } = useLatestTransactionList();
 
@@ -81,10 +80,11 @@ export default defineComponent({
     );
 
     function openTransactionFailedModal(msg: string) {
-      openDefaultModal({
-        title: t('modals.transaction-failed.msg'),
-        icon: 'critical',
-        msg,
+      Logger.write({
+        title: t('modals.transaction-failed.title'),
+        message: msg || t('modals.transaction-failed.msg'),
+        type: 'api-response',
+        modal: true,
       });
     }
 
@@ -148,7 +148,7 @@ export default defineComponent({
         }
       } catch (error: any) {
         openTransactionFailedModal(error.message);
-        throw error;
+        return;
       } finally {
         loading.value = false;
       }
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 97892c646..e3542b6a0 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -50,6 +50,8 @@ import {
 } from '@/constants';
 import { tg } from '@/popup/plugins/i18n';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
+import { Capacitor } from '@capacitor/core';
+import { Directory, Filesystem } from '@capacitor/filesystem';
 import { decrypt, encrypt } from './crypto';
 
 /**
@@ -694,3 +696,27 @@ export function decryptedComputed(
       set: setEncryptedState,
     });
 }
+
+export async function exportFile(
+  text: string,
+  filename: string,
+): Promise<string | undefined> {
+  const blob = new Blob([text], { type: 'text/plain' });
+  const a = document.createElement('a');
+  const href = window.URL.createObjectURL(blob);
+
+  if (Capacitor.isNativePlatform()) {
+    const base64 = await convertBlobToBase64(blob);
+    const saveFile = await Filesystem.writeFile({
+      path: filename,
+      data: base64,
+      directory: Directory.Documents,
+    });
+    return saveFile.uri;
+  }
+  a.download = filename;
+  a.href = href;
+  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
+  a.click();
+  return undefined;
+}