refactor: tx not found message on status

src/common/components/status/StatusProgressBar.vue

@@ -6,9 +6,10 @@
       </v-col>
       <v-col class="px-0">
         <div class="progress-bar"
-          :id="`indicator-${timeLineData[0][1]}${txFailed?'-error':''}`"></div>
+          :id="`indicator-${timeLineData[0][1]}${txFailed?'-error':txNotFound?'-warning':''}`">
+        </div>
       </v-col>
-        <v-col cols="auto" :class="[txFailed ? 'pt-0' : 'pt-2', 'px-1']">
+        <v-col cols="auto" :class="[txFailed || txNotFound ? 'pt-0' : 'pt-2', 'px-1']">
           <v-img :src="imgStep1" :width="initialImgSize" :height="initialImgSize" contain/>
         </v-col>
         <v-col class="px-0">
@@ -76,7 +77,7 @@ export default defineComponent({
   name: 'StatusProgressBar',
   props: {
     isFlyover: Boolean,
-    txWithErrorType: Boolean,
+    txNotFound: Boolean,
     txWithError: Boolean,
   },
   setup(props) {
@@ -102,8 +103,7 @@ export default defineComponent({
       }
       return require('@/assets/status/rbtc.svg');
     });
-    const initialImgSize = computed(() => (txFailed.value ? 32 : 12));
-    const barColor = computed(() => (txFailed.value ? 'red' : 'green'));
+    const initialImgSize = computed(() => (txFailed.value || props.txNotFound ? 32 : 12));
     const timeLineData = computed(() => {
       let labelOne = 'Transaction Broadcasted';
       let labelTwo = 'Transaction Confirmed';
@@ -113,9 +113,9 @@ export default defineComponent({
       let second = 0;
       let third = 0;
       let fourth = 0;
-      if (props.txWithErrorType) {
+      if (props.txNotFound) {
         zero = 100;
-        labelOne = 'Error occurred';
+        labelOne = '';
       } else if (isPegOut.value) {
         labelThree = 'Sent to Bitcoin';
         if (props.isFlyover) {
@@ -306,6 +306,7 @@ export default defineComponent({
     });
     const imgStep1 = computed(() => {
       if (txFailed.value) return require('@/assets/status/ellipse_error.svg');
+      if (props.txNotFound) return require('@/assets/warning.svg');
       if (timeLineData.value[0][1] === 100) return require('@/assets/status/ellipse.svg');
       return require('@/assets/status/ellipse_empty.svg');
     });
@@ -334,7 +335,6 @@ export default defineComponent({
       imgStep2,
       imgStep3,
       initialImgSize,
-      barColor,
       txFailed,
       textClass,
     };
@@ -362,6 +362,9 @@ export default defineComponent({
 #indicator-100-error {
   background-color: red !important;
 }
+#indicator-100-warning {
+  background-color: orange !important;
+}
 #indicator-0 {
   background-color: rgba(58, 58, 58, 0.5)  !important;
 }

src/common/components/status/TxPegin.vue

@@ -11,10 +11,10 @@
       </v-row>
     </template>
     <v-row class="mb-4">
-      <status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
+      <status-progress-bar :isFlyover="isFlyover" :txNotFound="txNotFound"
                            :txWithError="txWithError" />
     </v-row>
-    <status-summary :details="summary" :type="typeSummary" :txWithErrorType="txWithErrorType"
+    <status-summary :details="summary" :type="typeSummary" :txNotFound="txNotFound"
                     :txWithError="txWithError" />
   </v-container>
 </template>
@@ -51,7 +51,7 @@ export default defineComponent({
   props: {
     txId: String,
     isFlyover: Boolean,
-    txWithErrorType: Boolean,
+    txNotFound: Boolean,
     txWithError: Boolean,
   },
   setup(props, context) {

src/common/components/status/TxPegout.vue

@@ -1,10 +1,10 @@
 <template>
   <v-container>
     <v-row class="mb-4">
-      <status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
+      <status-progress-bar :isFlyover="isFlyover" :txNotFound="txNotFound"
                            :txWithError="txWithError"/>
     </v-row>
-      <status-summary :details="summary" :type="typeSummary" :txWithErrorType="txWithErrorType"
+      <status-summary :details="summary" :type="typeSummary" :txNotFound="txNotFound"
                       :txWithError="txWithError" />
   </v-container>
 </template>
@@ -33,7 +33,7 @@ export default defineComponent({
   props: {
     txId: String,
     isFlyover: Boolean,
-    txWithErrorType: Boolean,
+    txNotFound: Boolean,
     txWithError: Boolean,
   },
   setup(props) {

src/common/views/Home.vue

@@ -71,11 +71,10 @@
         <div class="d-flex justify-start align-baseline flex-wrap ml-6">
           <span class="text-body-1 mr-2 mt-4">
             To learn about the various RBTC access methods, visit
+            <a target='_blank' href="https://rootstock.io/rbtc/" class="pa-0 text-body-1 text-orange">
+              <span >RBTC Webpage</span>
+            </a>
           </span>
-          <v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1"
-            href="https://rootstock.io/rbtc/" target="_blank">
-              RBTC Webpage
-          </v-btn>
         </div>
       </v-col>
     </v-row>

src/status/views/Status.vue

@@ -23,11 +23,11 @@
     </v-row>
     <v-row no-gutters v-if="showStatus">
       <tx-pegin v-if="isPegIn" :txId="txId" :isFlyover="isFlyover"
-                :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
+                :txNotFound="txNotFound" :txWithError="txWithError" />
       <tx-pegout v-if="isPegOut" :txId="txId" :isFlyover="isFlyover"
-                :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
-      <status-progress-bar class="mt-4" v-if="txWithErrorType" :isFlyover="isFlyover"
-                :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
+                :txNotFound="txNotFound" :txWithError="txWithError" />
+      <status-progress-bar class="mt-4" v-if="txNotFound" :isFlyover="isFlyover"
+                :txNotFound="txNotFound" :txWithError="txWithError" />
     </v-row>
     <v-row v-else>
     <v-progress-circular
@@ -91,11 +91,15 @@ export default defineComponent({
 
     const showStatus = computed(() => !loading.value);
 
-    const isRejected = computed(() => status.value.txDetails?.status === 'REJECTED');
+    const txNotFound = computed((): boolean => status.value.type === TxStatusType.INVALID_DATA
+    || status.value.type === TxStatusType.UNEXPECTED_ERROR);
+
+    const isRejected = computed(() => status.value.txDetails?.status === 'REJECTED' || txNotFound.value);
 
     const rejectionMsg = computed(() => {
       const details = txDetails.value as PegoutStatusDataModel;
       const { LOW_AMOUNT, CALLER_CONTRACT, FEE_ABOVE_VALUE } = constants.RejectedPegoutReasons;
+      if (txNotFound.value) return 'Your transaction is not processed yet, search again in a few minutes';
       switch (details.reason) {
         case LOW_AMOUNT:
           return 'The transaction was rejected because the amount is less than the minimum required.';
@@ -117,9 +121,6 @@ export default defineComponent({
     const isFlyover = computed((): boolean => status.value.type === TxStatusType.FLYOVER_PEGOUT
       || status.value.type === TxStatusType.FLYOVER_PEGIN);
 
-    const txWithErrorType = computed((): boolean => status.value.type === TxStatusType.INVALID_DATA
-      || status.value.type === TxStatusType.UNEXPECTED_ERROR);
-
     const showTimeLeft = computed((): boolean => {
       const details = txDetails.value as PegoutStatusDataModel;
       return status.value.type === TxStatusType.PEGOUT
@@ -130,7 +131,7 @@ export default defineComponent({
     });
 
     const txWithError = computed(() => {
-      if (txWithErrorType.value) return true;
+      if (txNotFound.value) return false;
       const { status: errorStatus } = txDetails.value;
       return errorStatus as PegStatus === PegStatus.REJECTED_REFUND
         || errorStatus as PegStatus === PegStatus.REJECTED_NO_REFUND
@@ -230,7 +231,7 @@ export default defineComponent({
       back,
       mdiMagnify,
       rules,
-      txWithErrorType,
+      txNotFound,
       txWithError,
       rejectionMsg,
     };