diff --git a/src/common/components/status/StatusProgressBar.vue b/src/common/components/status/StatusProgressBar.vue
index 4aa37ec2..ede4f8df 100644
--- a/src/common/components/status/StatusProgressBar.vue
+++ b/src/common/components/status/StatusProgressBar.vue
@@ -6,9 +6,10 @@
+ :id="`indicator-${timeLineData[0][1]}${txFailed?'-error':txNotFound?'-warning':''}`">
+
-
+
@@ -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;
}
diff --git a/src/common/components/status/TxPegin.vue b/src/common/components/status/TxPegin.vue
index 61f30ab7..2e7c8b56 100644
--- a/src/common/components/status/TxPegin.vue
+++ b/src/common/components/status/TxPegin.vue
@@ -11,10 +11,10 @@
-
-
@@ -51,7 +51,7 @@ export default defineComponent({
props: {
txId: String,
isFlyover: Boolean,
- txWithErrorType: Boolean,
+ txNotFound: Boolean,
txWithError: Boolean,
},
setup(props, context) {
diff --git a/src/common/components/status/TxPegout.vue b/src/common/components/status/TxPegout.vue
index 3c3661dc..a3f3f0eb 100644
--- a/src/common/components/status/TxPegout.vue
+++ b/src/common/components/status/TxPegout.vue
@@ -1,10 +1,10 @@
-
-
@@ -33,7 +33,7 @@ export default defineComponent({
props: {
txId: String,
isFlyover: Boolean,
- txWithErrorType: Boolean,
+ txNotFound: Boolean,
txWithError: Boolean,
},
setup(props) {
diff --git a/src/common/views/Home.vue b/src/common/views/Home.vue
index 98a9a89d..d1c60e29 100644
--- a/src/common/views/Home.vue
+++ b/src/common/views/Home.vue
@@ -71,11 +71,10 @@
To learn about the various RBTC access methods, visit
+
+ RBTC Webpage
+
-
- RBTC Webpage
-
diff --git a/src/status/views/Status.vue b/src/status/views/Status.vue
index fbb96ec6..61c7f94c 100644
--- a/src/status/views/Status.vue
+++ b/src/status/views/Status.vue
@@ -23,11 +23,11 @@
+ :txNotFound="txNotFound" :txWithError="txWithError" />
-
+ :txNotFound="txNotFound" :txWithError="txWithError" />
+
!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,
};