fix: report error iff users want to

- add a copy error button - errors get report if analytics is enabled or or if reportExperiment is turned on else they are sent to state
liquality · Nov 30, 2022 · 07e4e5a · 07e4e5a
1 parent 8ef81e3
commit 07e4e5a
Show file tree

Hide file tree

Showing 20 changed files with 158 additions and 27 deletions.
diff --git a/.env b/.env
@@ -20,5 +20,5 @@ VUE_APP_FIREBASE_MESSAGING_SENDER_ID=
 VUE_APP_FIREBASE_APP_ID=
 VUE_APP_FIREBASE_MEASUREMENT_ID=
 VUE_APP_FIREBASE_DATABASE_URL=
-VUE_APP_REPORT_TARGETS=Discord
-VUE_APP_DISCORD_WEBHOOK=https://discord.com/api/webhooks/1034115035603161188/sO2KOyAJakks1e9_Ae-OQFSMRb8rsgl-sZ93HRDGWRWFqNJwhDhGEDJl_SfxwgkxcQHU
+VUE_APP_MAX_ERROR_LOG_SIZE=100
+VUE_APP_REPORT_TARGETS=
diff --git a/src/components/CopyError.vue b/src/components/CopyError.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="copy-container">
+    <button class="copy-btn" @click="copyError">
+      <CopyIcon class="icon" v-if="!errorCopied" />
+      <CheckIcon class="icon" v-if="errorCopied" />
+      {{ errorCopied ? $t('common.copied') : $t('common.copyError') }}
+    </button>
+  </div>
+</template>
+
+<script>
+import CopyIcon from '@/assets/icons/copy.svg'
+import CheckIcon from '@/assets/icons/check-primary.svg'
+import { liqualityErrorStringToJson } from '@liquality/error-parser'
+
+export default {
+  props: ['translatedError', 'liqualityErrorString'],
+  components: {
+    CopyIcon,
+    CheckIcon
+  },
+  computed: {
+    jsonError() {
+      return {
+        error: liqualityErrorStringToJson(this.liqualityErrorString),
+        friendlyMessage: this.translatedError
+      }
+    }
+  },
+  data() {
+    return {
+      errorCopied: false
+    }
+  },
+  methods: {
+    async copyError() {
+      await navigator.clipboard.writeText(JSON.stringify(this.jsonError))
+      this.errorCopied = true
+      setTimeout(() => {
+        this.errorCopied = false
+      }, 4000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.copy-container {
+  text-align: right;
+  margin-left: auto;
+}
+
+.copy-btn {
+  display: flex;
+  align-items: center;
+  color: #9d4dfa;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  .icon {
+    width: 10px;
+    height: 10px;
+    font-size: 10px;
+    line-height: 12px;
+    margin-right: 5px;
+  }
+}
+</style>
diff --git a/src/components/OperationErrorModal.vue b/src/components/OperationErrorModal.vue
@@ -17,30 +17,36 @@
         <li>{{ $t('components.operationErrorModal.instructions4') }}</li>
       </ul>
       <p class="text-center text-break">
-        {{ error }}
+        {{ translatedError }}
       </p>
     </div>
     <div v-else class="justify-content-center">
-      <p class="text-center text-break">
-        {{ error }}
-      </p>
+      <p class="text-center text-break">{{ translatedError }}</p>
     </div>
     <template #footer>
-      <button class="btn btn-outline-clear" @click="onClose">
-        {{ $t('common.ok') }}
-      </button>
+      <div class="buttons">
+        <button class="ok-button btn btn-outline-clear" @click="onClose">
+          {{ $t('common.ok') }}
+        </button>
+        <CopyError
+          :translatedError="translatedError"
+          :liqualityErrorString="liqualityErrorString"
+        />
+      </div>
     </template>
   </Modal>
 </template>
 
 <script>
 import Modal from '@/components/Modal'
 import LedgerIcon from '@/assets/icons/ledger_icon.svg'
+import CopyError from './CopyError.vue'
 
 export default {
   components: {
     Modal,
-    LedgerIcon
+    LedgerIcon,
+    CopyError
   },
   props: {
     account: {
@@ -51,7 +57,7 @@ export default {
       type: Boolean,
       default: false
     },
-    error: {
+    liqualityErrorString: {
       type: String,
       default: ''
     }
@@ -60,8 +66,22 @@ export default {
     onClose() {
       this.$emit('close')
     }
+  },
+  computed: {
+    translatedError() {
+      return this.$tle(this.liqualityErrorString)
+    }
   }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ok-button {
+  flex-basis: 50%;
+  max-width: 20% !important;
+}
+</style>
diff --git a/src/locales/cb/common.json b/src/locales/cb/common.json
@@ -56,6 +56,7 @@
     "transactionFee": "Transaction Fee",
     "copied": "Gikopya!",
     "copyAddress": "Kopyaha ang Address",
+    "copyError": "Copy Error",
     "clickToCopy": "I-klick para copyahon",
     "viewInExplorer": "Tan-awa sa Explorer",
     "noItems": "Walay items",

diff --git a/src/locales/cb/pages.json b/src/locales/cb/pages.json
@@ -81,7 +81,9 @@
   "experiments": {
     "experiments": "Experiments",
     "multiaccounts": "Multi-Accounts",
-    "multiaccountsDescription": "Tugoti ang pagdumala sa account ug daghang mga account matag network"
+    "multiaccountsDescription": "Tugoti ang pagdumala sa account ug daghang mga account matag network",
+    "errorReporting": "Error Reporting",
+    "errorReportingDescription": "Allow auto reporting of errors to support"
   },
   "manageAssets": {
     "assetView": "Asset View",

diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -56,6 +56,7 @@
     "transactionFee": "Transaction Fee",
     "copied": "Copied!",
     "copyAddress": "Copy Address",
+    "copyError": "Copy Error",
     "clickToCopy": "Click to copy",
     "viewInExplorer": "View in Explorer",
     "noItems": "No items",

diff --git a/src/locales/en/pages.json b/src/locales/en/pages.json
@@ -81,7 +81,9 @@
   "experiments": {
     "experiments": "Experiments",
     "multiaccounts": "Multi-Accounts",
-    "multiaccountsDescription": "Allow account management and multiple accounts per network"
+    "multiaccountsDescription": "Allow account management and multiple accounts per network",
+    "errorReporting": "Error Reporting",
+    "errorReportingDescription": "Allow auto reporting of errors to support"
   },
   "manageAssets": {
     "assetView": "Asset View",

diff --git a/src/locales/es/common.json b/src/locales/es/common.json
@@ -56,6 +56,7 @@
     "transactionFee": "Comisión de Transacción",
     "copied": "¡Copiado!",
     "copyAddress": "Copiar Dirección",
+    "copyError": "Copy Error",
     "clickToCopy": "Click para copiar",
     "viewInExplorer": "Ver en el Explorador",
     "noItems": "Sin items",

diff --git a/src/locales/es/pages.json b/src/locales/es/pages.json
@@ -81,7 +81,9 @@
   "experiments": {
     "experiments": "Experimentos",
     "multiaccounts": "Multi-Accounts",
-    "multiaccountsDescription": "Permite gestionar cuentas y tener múltiples cuentas por red"
+    "multiaccountsDescription": "Permite gestionar cuentas y tener múltiples cuentas por red",
+    "errorReporting": "Error Reporting",
+    "errorReportingDescription": "Allow auto reporting of errors to support"
   },
   "manageAssets": {
     "assetView": "Vista de Activos",

diff --git a/src/locales/ph/common.json b/src/locales/ph/common.json
@@ -56,6 +56,7 @@
     "transactionFee": "Transaction Fee",
     "copied": "Kinopya!",
     "copyAddress": "Kopyahin ang Address",
+    "copyError": "Copy Error",
     "clickToCopy": "Click to copy",
     "viewInExplorer": "Tingnan sa Explorer",
     "noItems": "No items",

diff --git a/src/locales/ph/pages.json b/src/locales/ph/pages.json
@@ -81,7 +81,9 @@
   "experiments": {
     "experiments": "Mga eksperimento",
     "multiaccounts": "Mga Multi-Account",
-    "multiaccountsDescription": "Payagan ang pamamahala ng account at maraming account sa bawat network"
+    "multiaccountsDescription": "Payagan ang pamamahala ng account at maraming account sa bawat network",
+    "errorReporting": "Error Reporting",
+    "errorReportingDescription": "Allow auto reporting of errors to support"
   },
   "manageAssets": {
     "assetView": "Mga Assets",

diff --git a/src/locales/pt/common.json b/src/locales/pt/common.json
@@ -56,6 +56,7 @@
     "transactionFee": "Taxas da Transação",
     "copied": "Copiado!",
     "copyAddress": "Copiar Endereço",
+    "copyError": "Copy Error",
     "clickToCopy": "Clique para copiar",
     "viewInExplorer": "Veja no Explorador",
     "noItems": "Sem Itens",

diff --git a/src/locales/pt/pages.json b/src/locales/pt/pages.json
@@ -81,7 +81,9 @@
   "experiments": {
     "experiments": "Experimental",
     "multiaccounts": "Multi-Accounts",
-    "multiaccountsDescription": "Permite a gestão de contas e múltiplas contas em cada rede"
+    "multiaccountsDescription": "Permite a gestão de contas e múltiplas contas em cada rede",
+    "errorReporting": "Error Reporting",
+    "errorReportingDescription": "Allow auto reporting of errors to support"
   },
   "manageAssets": {
     "assetView": "Visão de Ativos",

diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json
@@ -56,6 +56,7 @@
     "transactionFee": "交易费用",
     "copied": "已复制",
     "copyAddress": "复制地址",
+    "copyError": "Copy Error",
     "clickToCopy": "点击复制",
     "viewInExplorer": "在浏览器查看",
     "noItems": "No items",

diff --git a/src/locales/zh/pages.json b/src/locales/zh/pages.json
@@ -81,7 +81,9 @@
   "experiments": {
     "experiments": "实验功能",
     "multiaccounts": "Multi-Accounts",
-    "multiaccountsDescription": "开启账户管理和多账户模式"
+    "multiaccountsDescription": "开启账户管理和多账户模式",
+    "errorReporting": "Error Reporting",
+    "errorReportingDescription": "Allow auto reporting of errors to support"
   },
   "manageAssets": {
     "assetView": "查看资产",

diff --git a/src/swaps/views/Timeline.vue b/src/swaps/views/Timeline.vue
@@ -293,7 +293,12 @@
           <tr v-if="item.error">
             <td class="text-danger text-left small-12">Error</td>
             <td class="text-danger" id="item_error">
-              <pre>{{ $tle(item.error) }}</pre>
+              <pre>{{ translatedItemError }} 
+                <CopyError
+                  :translatedError="translatedItemError"
+                  :liqualityErrorString="item.error"
+                />
+              </pre>
             </td>
           </tr>
           <tr>
@@ -338,13 +343,15 @@ import { getSwapProvider } from '@liquality/wallet-core/dist/src/factory'
 import { calculateQuoteRate } from '@liquality/wallet-core/dist/src/utils/quotes'
 import { shortenAddress } from '@liquality/wallet-core/dist/src/utils/address'
 import { isObject } from 'lodash-es'
+import CopyError from '../../components/CopyError.vue'
 
 export default {
   components: {
     SpinnerIcon,
     CopyIcon,
     ChevronDownIcon,
-    ChevronRightIcon
+    ChevronRightIcon,
+    CopyError
   },
   data() {
     return {
@@ -366,6 +373,9 @@ export default {
         (item) => item.id === this.id
       )
     },
+    translatedItemError() {
+      return this.$tle(this.item.error)
+    },
     reverseRate() {
       return BN(1).div(calculateQuoteRate(this.item)).dp(8)
     },

diff --git a/src/views/Experiments.vue b/src/views/Experiments.vue
@@ -28,6 +28,20 @@
             @change="toggleExperiment({ name: 'manageAccounts' })"
           />
         </div>
+        <div class="setting-item_title flex-fill mb-2">
+          {{ $t('pages.experiments.errorReporting') }}
+          <span class="setting-item_sub">
+            {{ $t('pages.experiments.errorReportingDescription') }}
+          </span>
+        </div>
+        <div class="setting-item_control">
+          <toggle-button
+            id="exp-reportErrors-toggle-switch"
+            :css-colors="true"
+            :value="experiments['reportErrors']"
+            @change="toggleExperiment({ name: 'reportErrors' })"
+          />
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/views/Send/Send.vue b/src/views/Send/Send.vue
@@ -239,7 +239,7 @@
       :open="sendErrorModalOpen"
       :account="account"
       @close="closeSendErrorModal"
-      :error="sendErrorMessage"
+      :liqualityErrorString="sendErrorMessage"
     />
     <LedgerSignRequestModal :open="signRequestModalOpen" @close="closeSignRequestModal" />
   </div>
@@ -576,7 +576,7 @@ export default {
         reportLiqualityError(error)
         this.loading = false
         this.signRequestModalOpen = false
-        this.sendErrorMessage = this.$tle(errorToLiqualityErrorString(error))
+        this.sendErrorMessage = errorToLiqualityErrorString(error)
         this.sendErrorModalOpen = true
       }
     },

diff --git a/src/views/Send/SendNFT.vue b/src/views/Send/SendNFT.vue
@@ -282,7 +282,7 @@
       :open="sendErrorModalOpen"
       :account="account"
       @close="closeSendErrorModal"
-      :error="sendErrorMessage"
+      :liqualityErrorString="sendErrorMessage"
     />
   </div>
 </template>
@@ -651,7 +651,7 @@ export default {
         this.$router.replace(`/wallet/nfts/activity/${this.account?.id}?tab=activity`)
       } catch (error) {
         this.loading = false
-        this.sendErrorMessage = this.$tle(errorToLiqualityErrorString(error))
+        this.sendErrorMessage = errorToLiqualityErrorString(error)
         this.sendErrorModalOpen = true
       }
     },

diff --git a/src/views/Swap/Swap.vue b/src/views/Swap/Swap.vue
@@ -213,7 +213,7 @@
               class="btn btn-primary btn-lg"
               id="swap_review_button"
               @click="review"
-              :disabled="!canSwap || cannotCoverNetworkFee"
+              :disabled="false"
             >
               {{
                 !canSwap || cannotCoverNetworkFee
@@ -488,7 +488,7 @@
       :open="swapErrorModalOpen"
       :account="account"
       @close="closeSwapErrorModal"
-      :error="swapErrorMessage"
+      :liqualityErrorString="swapErrorMessage"
     />
     <LedgerSignRequestModal :open="signRequestModalOpen" @close="closeSignRequestModal" />
   </div>
@@ -1396,7 +1396,7 @@ export default {
         reportLiqualityError(error)
         this.loading = false
         this.signRequestModalOpen = false
-        this.swapErrorMessage = this.$tle(errorToLiqualityErrorString(error))
+        this.swapErrorMessage = errorToLiqualityErrorString(error)
         this.swapErrorModalOpen = true
       }
     },