refactor: status bar gradient

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,15 +38,15 @@
  </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 />
  <v-col class="pa-0">
  <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 />
@@ -76,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) {
@@ -97,18 +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(() => (props.txWithError ? 32 : 12));
+ const barColor = computed(() => (props.txWithError ? 'red' : 'green'));
  const timeLineData = computed(() => {
  let labelOne = 'Transaction Broadcasted';
  let labelTwo = 'Transaction Confirmed';
@@ -118,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
@@ -128,16 +121,16 @@ export default defineComponent({
  } else {
  switch (txDetails.value.status as PegoutStatus) {
  case PegoutStatus.PENDING:
- zero = 95;
+ zero = 70;
  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;
@@ -153,12 +146,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,43 +173,49 @@ export default defineComponent({
  labelThree = 'Confirming on Rootstock';
  switch (txDetailsPegIn.status as PegStatus) {
  case PegStatus.NOT_IN_BTC_YET:
- zero = 60;
+ zero = 50;
  break;
  case PegStatus.WAITING_CONFIRMATIONS:
  zero = 100;
- first = 60;
+ first = 50;
  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 = 50;
  break;
  case PegStatus.CONFIRMED:
  zero = 100;
  first = 100;
  second = 100;
+ third = 50;
  if (rsk.status === RskStatus.LOCKED) {
  third = 100;
  }
  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:
@@ -237,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');
  });
@@ -258,11 +260,38 @@ export default defineComponent({
  initialStepImage,
  finalStepImage,
  timeLineData,
- txWithError,
  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)) 30%, 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>

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

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 @@
  props: {
  txId: String,
  isFlyover: Boolean,
+ txWithErrorType: Boolean,
+ txWithError: Boolean,
  },
  setup(props, context) {
  const currentFee = ref(new SatoshiBig('0', 'btc'));
@@ -111,6 +115,7 @@
  federationAddress: status.btc.federationAddress,
  total: total.toBTCTrimmedString(),
  senderAddress: status.btc.senderAddress,
+ status: status.status,
  };
  });
 
@@ -172,7 +177,7 @@
  }
  context.emit('setMessage', msg);
  } catch (e) {
  console.log(e);
  }
  }
 

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