Calculate flyover tx status based on quote hash

- Create FlyoverProgressBar for flyover txs
- Use StatusProgressBar only for native txs
- Add legend for INVALID_DATA & UNEXPECTED_ERROR cases
- Delete unused PegoutProgressBar

Pending: Check for flyover instance and avoid hardcoded LP

src/common/components/status/FlyoverProgressBar.vue

@@ -0,0 +1,127 @@
+<template>
+ <div class="w-100 flyover-progress">
+ <div class="content-edge d-flex flex-column align-center">
+ <v-img :src="fromChain.icon" width="32" height="32"></v-img>
+ <span class="text-center">{{ fromChain.name }}</span>
+ </div>
+ <div v-if="statusBadge.text" class="status-badge d-flex justify-center">
+ <v-chip variant="flat" :color="statusBadge.color">{{ statusBadge.text }}</v-chip>
+ </div>
+ <div class="content align-self-center">
+ <div v-if="isFailed" class="d-flex align-center">
+ <div class="progress-line flex-fill bg-error"></div>
+ <div class="px-1">
+ <v-img :src="require('@/assets/status/ellipse_error.svg')" width="32" height="32"></v-img>
+ </div>
+ <div class="progress-line flex-fill"></div>
+ </div>
+ <div v-else
+ class="progress-line align-self-center"
+ :class="[isPending ? 'pending' : 'bg-green']">
+ </div>
+ </div>
+ <div class="content-edge d-flex flex-column align-center">
+ <v-img :src="toChain.icon" width="32" height="32"></v-img>
+ <span class="text-center">{{ toChain.name }}</span>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+
+import { FlyoverStatus } from '@/common/store/constants';
+import { useStateAttribute } from '@/common/store/helper';
+import { TxStatusType } from '@/common/types';
+import {
+ defineComponent, onBeforeMount, ref, watch,
+} from 'vue';
+
+export default defineComponent({
+ name: 'FlyoverProgressBar',
+ setup() {
+ const flyoverStatus = useStateAttribute('status', 'flyoverStatus');
+ const txType = useStateAttribute('status', 'type');
+
+ const rootstock = {
+ name: 'Rootstock Network',
+ icon: require('@/assets/status/rbtc.svg'),
+ };
+ const bitcoin = {
+ name: 'Bitcoin Network',
+ icon: require('@/assets/status/btc.svg'),
+ };
+
+ const fromChain = ref(rootstock);
+ const toChain = ref(bitcoin);
+ const statusBadge = ref({
+ color: '',
+ text: '',
+ });
+ const isFailed = ref(false);
+ const isPending = ref(false);
+
+ watch(flyoverStatus, () => {
+ if (flyoverStatus.value === FlyoverStatus.FAILED) {
+ statusBadge.value = {
+ color: 'error',
+ text: 'Failed',
+ };
+ isFailed.value = true;
+ }
+ if (flyoverStatus.value === FlyoverStatus.SUCCESS) {
+ statusBadge.value = {
+ color: 'green',
+ text: 'Success',
+ };
+ }
+ if (flyoverStatus.value === FlyoverStatus.PENDING) {
+ statusBadge.value = {
+ color: '',
+ text: 'Pending',
+ };
+ isPending.value = true;
+ }
+ });
+
+ onBeforeMount(() => {
+ if (txType.value === TxStatusType.FLYOVER_PEGIN) {
+ fromChain.value = bitcoin;
+ toChain.value = rootstock;
+ }
+ });
+
+ return {
+ isFailed,
+ isPending,
+ statusBadge,
+ fromChain,
+ toChain,
+ };
+ },
+});
+</script>
+
+<style scoped>
+.progress-line {
+ height: 4px;
+ background-color: rgba(var(--v-theme-on-background), 0.5);
+}
+.flyover-progress {
+ display: grid;
+ grid-template-columns: 1fr 3fr 1fr;
+ grid-template-rows: 1fr 2fr 1fr;
+}
+.content-edge {
+ grid-row: 2 / 4;
+}
+.content {
+ grid-row: 2;
+}
+.pending {
+ background-image: linear-gradient(to right,
+ rgb(var(--v-theme-green)) 30%, rgba(var(--v-theme-on-background), 0.5));
+}
+.status-badge {
+ grid-column: 2;
+}
+</style>