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, };