From 5bc348a49c45eba31d3993aa36d217aab4224ef6 Mon Sep 17 00:00:00 2001
From: Anni Piragauta <anni.piragauta@iovlabs.org>
Date: Mon, 24 Jun 2024 09:55:39 -0500
Subject: [PATCH 1/2] refactor: gradient on progress bar

---
 src/assets/status/ellipse_empty.svg           |  2 +-
 .../components/status/StatusProgressBar.vue   | 67 +++++++++++++++----
 2 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/assets/status/ellipse_empty.svg b/src/assets/status/ellipse_empty.svg
index 33b5ad10..0de87939 100644
--- a/src/assets/status/ellipse_empty.svg
+++ b/src/assets/status/ellipse_empty.svg
@@ -1,3 +1,3 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="32" cy="32" r="32" fill="rgb(116, 189, 1, 0.3)"/>
+<circle cx="32" cy="32" r="32" fill="rgba(58, 58, 58, 0.5)"/>
 </svg>
diff --git a/src/common/components/status/StatusProgressBar.vue b/src/common/components/status/StatusProgressBar.vue
index 702aaeb7..3f120ac0 100644
--- a/src/common/components/status/StatusProgressBar.vue
+++ b/src/common/components/status/StatusProgressBar.vue
@@ -1,30 +1,31 @@
 <template>
-  <v-container class="px-0">
+  <v-container class="statusBar px-0">
     <v-row class="mx-2">
       <v-col cols="auto" class="pt-0">
         <v-img class="d-flex flex-0-0" :src="initialStepImage" width="32" height="32" contain/>
       </v-col>
       <v-col class="px-0">
-        <v-progress-linear color="green" :model-value="timeLineData[0][1]" />
+        <div class="progress-bar"
+             :id="`indicator-${timeLineData[0][1]}${txWithError?'-error':''}`"></div>
       </v-col>
       <template v-if="!isFlyover">
-        <v-col cols="auto" class="pt-2 px-1">
-          <v-img :src="imgStep1" width="12" height="12" contain/>
+        <v-col cols="auto" :class="[txWithError ? 'pt-0' : 'pt-2', 'px-1']">
+          <v-img :src="imgStep1" :width="initialImgSize" :height="initialImgSize" contain/>
         </v-col>
         <v-col class="px-0">
-          <v-progress-linear color="green" :model-value="timeLineData[1][1]" />
+          <div class="progress-bar" :id="`indicator-${timeLineData[1][1]}`"></div>
         </v-col>
         <v-col cols="auto" class="pt-2 px-1">
           <v-img :src="imgStep2" width="12" height="12" contain/>
         </v-col>
         <v-col class="px-0">
-          <v-progress-linear color="green" :model-value="timeLineData[2][1]" />
+          <div class="progress-bar" :id="`indicator-${timeLineData[2][1]}`"></div>
         </v-col>
         <v-col cols="auto" class="pt-2 px-1">
           <v-img :src="imgStep3" width="12" height="12" contain/>
         </v-col>
         <v-col class="px-0">
-          <v-progress-linear color="green" :model-value="timeLineData[3][1]" />
+          <div class="progress-bar" :id="`indicator-${timeLineData[3][1]}`"></div>
         </v-col>
       </template>
       <v-col cols="auto" class="pt-0 pr-0">
@@ -37,7 +38,7 @@
       </v-col>
       <v-spacer />
       <template v-if="!isFlyover">
-        <v-col class="pa-0 pr-4">
+        <v-col class="pa-0 pl-6">
           <p class="text-center text-bw-400">{{ timeLineData[1][0] }}</p>
         </v-col>
         <v-spacer />
@@ -45,7 +46,7 @@
           <p class="text-center text-bw-400">{{ timeLineData[2][0] }}</p>
         </v-col>
         <v-spacer />
-        <v-col class="pa-0 pl-4">
+        <v-col class="pa-0 pr-4">
           <p class="text-center text-bw-400">{{ timeLineData[3][0] }}</p>
         </v-col>
         <v-spacer />
@@ -109,6 +110,8 @@ export default defineComponent({
       || errorStatus as PegoutStatus === PegoutStatus.NOT_FOUND
       || errorStatus as PegoutStatus === PegoutStatus.REJECTED;
     });
+    const initialImgSize = computed(() => (txWithError.value ? 32 : 12));
+    const barColor = computed(() => (txWithError.value ? 'red' : 'green'));
     const timeLineData = computed(() => {
       let labelOne = 'Transaction Broadcasted';
       let labelTwo = 'Transaction Confirmed';
@@ -128,7 +131,7 @@ export default defineComponent({
         } else {
           switch (txDetails.value.status as PegoutStatus) {
             case PegoutStatus.PENDING:
-              zero = 95;
+              zero = 70;
               break;
             case PegoutStatus.RECEIVED:
               zero = 100;
@@ -153,12 +156,15 @@ export default defineComponent({
               fourth = 100;
               break;
             case PegoutStatus.NOT_PEGOUT_TX:
+              labelOne = 'Error occurred';
               zero = 100;
               break;
             case PegoutStatus.NOT_FOUND:
+              labelOne = 'Error occurred';
               zero = 100;
               break;
             case PegoutStatus.REJECTED:
+              labelOne = 'Error occurred';
               zero = 100;
               break;
             default:
@@ -177,21 +183,21 @@ export default defineComponent({
         labelThree = 'Confirming on Rootstock';
         switch (txDetailsPegIn.status as PegStatus) {
           case PegStatus.NOT_IN_BTC_YET:
-            zero = 60;
+            zero = 70;
             break;
           case PegStatus.WAITING_CONFIRMATIONS:
             zero = 100;
-            first = 60;
+            first = 70;
             if (btc.confirmations >= btc.requiredConfirmation) {
               first = 100;
-              second = 60;
+              second = 70;
             }
             break;
           case PegStatus.NOT_IN_RSK_YET:
             zero = 100;
             first = 100;
             second = 100;
-            third = 60;
+            third = 70;
             break;
           case PegStatus.CONFIRMED:
             zero = 100;
@@ -202,18 +208,23 @@ export default defineComponent({
             }
             break;
           case PegStatus.REJECTED_REFUND:
+            labelOne = 'Error occurred';
             zero = 100;
             break;
           case PegStatus.REJECTED_NO_REFUND:
+            labelOne = 'Error occurred';
             zero = 100;
             break;
           case PegStatus.ERROR_BELOW_MIN:
+            labelOne = 'Error occurred';
             zero = 100;
             break;
           case PegStatus.ERROR_NOT_A_PEGIN:
+            labelOne = 'Error occurred';
             zero = 100;
             break;
           case PegStatus.ERROR_UNEXPECTED:
+            labelOne = 'Error occurred';
             zero = 100;
             break;
           default:
@@ -262,7 +273,35 @@ export default defineComponent({
       imgStep1,
       imgStep2,
       imgStep3,
+      initialImgSize,
+      barColor,
     };
   },
 });
 </script>
+
+<style scoped>
+.progress-bar {
+  height: 4px;
+  background-color: rgba(58, 58, 58, 0.5);
+  width: 100%;
+}
+#indicator-50 {
+  background-image: linear-gradient(to right,
+    rgb(var(--v-theme-green)) 40%, rgba(58, 58, 58, 0.3));
+}
+#indicator-70 {
+  background-image: linear-gradient(to right,
+    rgb(var(--v-theme-green)) 60%, rgba(58, 58, 58, 0.3));
+}
+#indicator-100 {
+  background-color: rgb(var(--v-theme-green)) !important;
+}
+#indicator-100-error {
+  background-color: red !important;
+}
+#indicator-0 {
+  background-color: rgba(58, 58, 58, 0.5)  !important;
+}
+
+</style>

From 17e9eeff760d09d499c301bc495b71e7ceb90df8 Mon Sep 17 00:00:00 2001
From: Anni Piragauta <anni.piragauta@iovlabs.org>
Date: Wed, 26 Jun 2024 09:18:55 -0500
Subject: [PATCH 2/2] refactor: hiding receiver info on summary when error
 ocurred

---
 .../components/status/StatusProgressBar.vue   | 42 +++++++------------
 .../components/status/StatusSummary.vue       | 30 ++++++++-----
 src/common/components/status/TxPegin.vue      |  9 +++-
 src/common/components/status/TxPegout.vue     |  9 +++-
 src/common/types/Common.ts                    |  3 ++
 src/status/views/Status.vue                   | 40 ++++++++++++++----
 6 files changed, 84 insertions(+), 49 deletions(-)

diff --git a/src/common/components/status/StatusProgressBar.vue b/src/common/components/status/StatusProgressBar.vue
index 3f120ac0..01472465 100644
--- a/src/common/components/status/StatusProgressBar.vue
+++ b/src/common/components/status/StatusProgressBar.vue
@@ -77,14 +77,14 @@ export default defineComponent({
   name: 'StatusProgressBar',
   props: {
     isFlyover: Boolean,
+    txWithErrorType: Boolean,
+    txWithError: Boolean,
   },
   setup(props) {
     const status = useState<TxStatus>('status');
     const txDetails = useStateAttribute<PegoutStatusDataModel|PeginStatus>('status', 'txDetails');
     const isPegOut = computed((): boolean => status.value.type === TxStatusType.PEGOUT
       || status.value.type === TxStatusType.FLYOVER_PEGOUT);
-    const txWithErrorType = computed((): boolean => status.value.type === TxStatusType.INVALID_DATA
-      || status.value.type === TxStatusType.UNEXPECTED_ERROR);
 
     const initialStepImage = computed(() => {
       if (isPegOut.value) {
@@ -98,20 +98,8 @@ export default defineComponent({
       }
       return require('@/assets/status/rbtc.svg');
     });
-    const txWithError = computed(() => {
-      if (txWithErrorType.value) return true;
-      const { status: errorStatus } = txDetails.value;
-      return errorStatus as PegStatus === PegStatus.REJECTED_REFUND
-      || errorStatus as PegStatus === PegStatus.REJECTED_NO_REFUND
-      || errorStatus as PegStatus === PegStatus.ERROR_BELOW_MIN
-      || errorStatus as PegStatus === PegStatus.ERROR_NOT_A_PEGIN
-      || errorStatus as PegStatus === PegStatus.ERROR_UNEXPECTED
-      || errorStatus as PegoutStatus === PegoutStatus.NOT_PEGOUT_TX
-      || errorStatus as PegoutStatus === PegoutStatus.NOT_FOUND
-      || errorStatus as PegoutStatus === PegoutStatus.REJECTED;
-    });
-    const initialImgSize = computed(() => (txWithError.value ? 32 : 12));
-    const barColor = computed(() => (txWithError.value ? 'red' : 'green'));
+    const initialImgSize = computed(() => (props.txWithError ? 32 : 12));
+    const barColor = computed(() => (props.txWithError ? 'red' : 'green'));
     const timeLineData = computed(() => {
       let labelOne = 'Transaction Broadcasted';
       let labelTwo = 'Transaction Confirmed';
@@ -121,8 +109,10 @@ export default defineComponent({
       let second = 0;
       let third = 0;
       let fourth = 0;
-      if (txWithErrorType.value) zero = 100;
-      else if (isPegOut.value) {
+      if (props.txWithErrorType) {
+        zero = 100;
+        labelOne = 'Error occurred';
+      } else if (isPegOut.value) {
         labelThree = 'Sent to Bitcoin';
         if (props.isFlyover) {
           if ((txDetails.value.status as unknown as FlyoverPegoutStatus) === FlyoverPegoutStatus
@@ -135,12 +125,12 @@ export default defineComponent({
               break;
             case PegoutStatus.RECEIVED:
               zero = 100;
-              first = 70;
+              first = 50;
               break;
             case PegoutStatus.WAITING_FOR_CONFIRMATION:
               zero = 100;
               first = 100;
-              second = 70;
+              second = 50;
               break;
             case PegoutStatus.WAITING_FOR_SIGNATURE:
               zero = 100;
@@ -183,11 +173,11 @@ export default defineComponent({
         labelThree = 'Confirming on Rootstock';
         switch (txDetailsPegIn.status as PegStatus) {
           case PegStatus.NOT_IN_BTC_YET:
-            zero = 70;
+            zero = 50;
             break;
           case PegStatus.WAITING_CONFIRMATIONS:
             zero = 100;
-            first = 70;
+            first = 50;
             if (btc.confirmations >= btc.requiredConfirmation) {
               first = 100;
               second = 70;
@@ -197,12 +187,13 @@ export default defineComponent({
             zero = 100;
             first = 100;
             second = 100;
-            third = 70;
+            third = 50;
             break;
           case PegStatus.CONFIRMED:
             zero = 100;
             first = 100;
             second = 100;
+            third = 50;
             if (rsk.status === RskStatus.LOCKED) {
               third = 100;
             }
@@ -248,7 +239,7 @@ export default defineComponent({
       };
     });
     const imgStep1 = computed(() => {
-      if (txWithError.value) return require('@/assets/status/ellipse_error.svg');
+      if (props.txWithError) return require('@/assets/status/ellipse_error.svg');
       if (timeLineData.value[0][1] === 100) return require('@/assets/status/ellipse.svg');
       return require('@/assets/status/ellipse_empty.svg');
     });
@@ -269,7 +260,6 @@ export default defineComponent({
       initialStepImage,
       finalStepImage,
       timeLineData,
-      txWithError,
       imgStep1,
       imgStep2,
       imgStep3,
@@ -288,7 +278,7 @@ export default defineComponent({
 }
 #indicator-50 {
   background-image: linear-gradient(to right,
-    rgb(var(--v-theme-green)) 40%, rgba(58, 58, 58, 0.3));
+    rgb(var(--v-theme-green)) 30%, rgba(58, 58, 58, 0.3));
 }
 #indicator-70 {
   background-image: linear-gradient(to right,
diff --git a/src/common/components/status/StatusSummary.vue b/src/common/components/status/StatusSummary.vue
index 17b4d3b2..2a2a8d2d 100644
--- a/src/common/components/status/StatusSummary.vue
+++ b/src/common/components/status/StatusSummary.vue
@@ -78,6 +78,8 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    txWithErrorType: Boolean,
+    txWithError: Boolean,
   },
   setup(props) {
     const environmentContext = EnvironmentContextProviderService.getEnvironmentContext();
@@ -92,27 +94,31 @@ export default defineComponent({
         return [
           {
             title: 'Recipient Address',
-            value: props.details.recipientAddress || '-',
+            value: props.details.recipientAddress && !props.txWithError
+              ? props.details.recipientAddress : '-',
             link: getBtcAddressExplorerUrl(props.details.recipientAddress),
           },
           {
             title: 'Transaction ID',
-            value: props.details.btcTxId || '-',
+            value: props.details.btcTxId && !props.txWithError
+              ? props.details.btcTxId : '-',
             link: getBtcTxExplorerUrl(props.details.btcTxId),
           },
           {
             title: 'You will receive',
-            value: props.details.amountReceivedString,
+            value: props.details.amountReceivedString && !props.txWithError
+              ? props.details.amountReceivedString : '-',
             ticker: true,
           },
           {
             title: props.details.fee === 0 ? 'Estimated Fee' : 'Fee',
-            value: status.value.type === TxStatusType.FLYOVER_PEGOUT ? '-' : fee,
+            value: status.value.type === TxStatusType.FLYOVER_PEGOUT || props.txWithError
+              ? '-' : fee,
             ticker: true,
           },
           {
             title: 'Total',
-            value: status.value.type === TxStatusType.FLYOVER_PEGOUT
+            value: status.value.type === TxStatusType.FLYOVER_PEGOUT || props.txWithError
               ? '-' : props.details.amountFromString,
             ticker: true,
           },
@@ -180,27 +186,31 @@ export default defineComponent({
       return [
         {
           title: 'Recipient Address',
-          value: props.details.recipientAddress || '-',
+          value: props.details.recipientAddress && !props.txWithError
+            ? props.details.recipientAddress : '-',
           link: getRskAddressExplorerUrl(props.details.recipientAddress),
         },
         {
           title: 'Transaction ID',
-          value: props.details.rskTxId || '-',
+          value: props.details.rskTxId && !props.txWithError
+            ? props.details.rskTxId : '-',
           link: getRskTxExplorerUrl(props.details.rskTxId),
         },
         {
           title: 'You will receive',
-          value: props.details.amountReceivedString,
+          value: props.details.amountReceivedString && !props.txWithError
+            ? props.details.amountReceivedString : '-',
           ticker: true,
         },
         {
           title: 'Fee',
-          value: '0',
+          value: props.txWithError ? '-' : '0',
           ticker: true,
         },
         {
           title: 'Total',
-          value: props.details.amountReceivedString,
+          value: props.details.amountReceivedString && !props.txWithError
+            ? props.details.amountReceivedString : '-',
           ticker: true,
         },
       ];
diff --git a/src/common/components/status/TxPegin.vue b/src/common/components/status/TxPegin.vue
index 0461fb79..92e53645 100644
--- a/src/common/components/status/TxPegin.vue
+++ b/src/common/components/status/TxPegin.vue
@@ -1,9 +1,11 @@
 <template>
   <v-container>
     <v-row>
-      <status-progress-bar :isFlyover="isFlyover"/>
+      <status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
+                           :txWithError="txWithError" />
     </v-row>
-    <status-summary :details="summary" :type="typeSummary" />
+    <status-summary :details="summary" :type="typeSummary" :txWithErrorType="txWithErrorType"
+                    :txWithError="txWithError" />
   </v-container>
 </template>
 
@@ -37,6 +39,8 @@ export default defineComponent({
   props: {
     txId: String,
     isFlyover: Boolean,
+    txWithErrorType: Boolean,
+    txWithError: Boolean,
   },
   setup(props, context) {
     const currentFee = ref(new SatoshiBig('0', 'btc'));
@@ -111,6 +115,7 @@ export default defineComponent({
         federationAddress: status.btc.federationAddress,
         total: total.toBTCTrimmedString(),
         senderAddress: status.btc.senderAddress,
+        status: status.status,
       };
     });
 
diff --git a/src/common/components/status/TxPegout.vue b/src/common/components/status/TxPegout.vue
index ed05fe19..61834b16 100644
--- a/src/common/components/status/TxPegout.vue
+++ b/src/common/components/status/TxPegout.vue
@@ -1,9 +1,11 @@
 <template>
   <v-container>
     <v-row>
-      <status-progress-bar :isFlyover="isFlyover"/>
+      <status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
+                           :txWithError="txWithError"/>
     </v-row>
-      <status-summary :details="summary" :type="typeSummary" />
+      <status-summary :details="summary" :type="typeSummary" :txWithErrorType="txWithErrorType"
+                      :txWithError="txWithError" />
   </v-container>
 </template>
 
@@ -30,6 +32,8 @@ export default defineComponent({
   props: {
     txId: String,
     isFlyover: Boolean,
+    txWithErrorType: Boolean,
+    txWithError: Boolean,
   },
   setup(props) {
     const typeSummary = TxStatusType.PEGOUT;
@@ -61,6 +65,7 @@ export default defineComponent({
         senderAddress: status.rskSenderAddress,
         txId: status.rskTxHash ? status.rskTxHash : props.txId,
         estimatedFee: Number(pegOutEstimatedFee.value.toBTCTrimmedString()),
+        status: status.status,
       };
     });
 
diff --git a/src/common/types/Common.ts b/src/common/types/Common.ts
index b5e8310a..fa5c5b29 100644
--- a/src/common/types/Common.ts
+++ b/src/common/types/Common.ts
@@ -1,5 +1,7 @@
 import SatoshiBig from '@/common/types/SatoshiBig';
 import { Utxo } from '@/common/types/pegInTx';
+import { PegoutStatus } from '@/common/types/store';
+import { PegStatus } from '@/common/store/constants';
 import WeiBig from './WeiBig';
 
 export interface Tx {
@@ -122,6 +124,7 @@ export interface NormalizedSummary {
   selectedAccount?: string;
   federationAddress?: string;
   total?: string;
+  status?: PegStatus | PegoutStatus;
 }
 
 export type AddressType = 'BITCOIN_LEGACY_ADDRESS' | 'BITCOIN_SEGWIT_ADDRESS' | 'BITCOIN_NATIVE_SEGWIT_ADDRESS' |
diff --git a/src/status/views/Status.vue b/src/status/views/Status.vue
index 66a85598..27d0768a 100644
--- a/src/status/views/Status.vue
+++ b/src/status/views/Status.vue
@@ -19,9 +19,12 @@
       <p>Estimated time: {{ releaseTimeText }}</p>
     </v-row>
     <v-row no-gutters>
-      <tx-pegin v-if="isPegIn" :txId="txId" :isFlyover="isFlyover" />
-      <tx-pegout v-if="isPegOut" :txId="txId" :isFlyover="isFlyover"/>
-      <status-progress-bar v-if="txWithErrorType" :isFlyover="isFlyover"/>
+      <tx-pegin v-if="isPegIn" :txId="txId" :isFlyover="isFlyover"
+                :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
+      <tx-pegout v-if="isPegOut" :txId="txId" :isFlyover="isFlyover"
+                 :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
+      <status-progress-bar v-if="txWithErrorType" :isFlyover="isFlyover"
+                           :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
     </v-row>
   </v-container>
 </template>
@@ -36,11 +39,15 @@ import TxPegout from '@/common/components/status/TxPegout.vue';
 import TxPegin from '@/common/components/status/TxPegin.vue';
 import {
   PegoutStatus, TxStatusType,
-  PegoutStatusDataModel, TxStatus, TxStatusMessage,
+  PegoutStatusDataModel, TxStatus, TxStatusMessage, PeginStatus,
 } from '@/common/types';
 import * as constants from '@/common/store/constants';
-import { useAction, useGetter, useState } from '@/common/store/helper';
+import {
+  useAction, useGetter,
+  useState, useStateAttribute,
+} from '@/common/store/helper';
 import StatusProgressBar from '@/common/components/status/StatusProgressBar.vue';
+import { PegStatus } from '@/common/store/constants';
 
 export default defineComponent({
   name: 'StatusSearch',
@@ -67,6 +74,7 @@ export default defineComponent({
     const clearStatus = useAction('status', constants.STATUS_CLEAR);
     const activeMessage = useGetter<TxStatusMessage>('status', constants.STATUS_GET_ACTIVE_MESSAGE);
     const releaseTimeText = useGetter<string>('status', constants.STATUS_GET_RELEASE_TIME_TEXT);
+    const txDetails = useStateAttribute<PegoutStatusDataModel|PeginStatus>('status', 'txDetails');
 
     const showStatus = computed(() => !loading.value
         && !activeMessage.value.error
@@ -85,11 +93,24 @@ export default defineComponent({
       || status.value.type === TxStatusType.UNEXPECTED_ERROR);
 
     const showTimeLeft = computed((): boolean => {
-      const txDetails = status.value.txDetails as PegoutStatusDataModel;
+      const details = txDetails.value as PegoutStatusDataModel;
       return status.value.type === TxStatusType.PEGOUT
-          && (txDetails.status === PegoutStatus.WAITING_FOR_CONFIRMATION
-          || txDetails.status === PegoutStatus.RECEIVED
-          || txDetails.status === PegoutStatus.WAITING_FOR_SIGNATURE);
+          && (details.status === PegoutStatus.WAITING_FOR_CONFIRMATION
+          || details.status === PegoutStatus.RECEIVED
+          || details.status === PegoutStatus.WAITING_FOR_SIGNATURE);
+    });
+
+    const txWithError = computed(() => {
+      if (txWithErrorType.value) return true;
+      const { status: errorStatus } = txDetails.value;
+      return errorStatus as PegStatus === PegStatus.REJECTED_REFUND
+        || errorStatus as PegStatus === PegStatus.REJECTED_NO_REFUND
+        || errorStatus as PegStatus === PegStatus.ERROR_BELOW_MIN
+        || errorStatus as PegStatus === PegStatus.ERROR_NOT_A_PEGIN
+        || errorStatus as PegStatus === PegStatus.ERROR_UNEXPECTED
+        || errorStatus as PegoutStatus === PegoutStatus.NOT_PEGOUT_TX
+        || errorStatus as PegoutStatus === PegoutStatus.NOT_FOUND
+        || errorStatus as PegoutStatus === PegoutStatus.REJECTED;
     });
 
     const rules = {
@@ -180,6 +201,7 @@ export default defineComponent({
       mdiMagnify,
       rules,
       txWithErrorType,
+      txWithError,
     };
   },
 });