From def939d725e60717910bdced569154c5329a2b7f Mon Sep 17 00:00:00 2001
From: Anni Piragauta <anni.piragauta@iovlabs.org>
Date: Thu, 31 Oct 2024 12:44:04 -0500
Subject: [PATCH] refactor: adding new design to pegout flow

---
 .../exchange/SelectBitcoinWallet.vue          |   2 +-
 .../components/status/StatusSummary.vue       | 106 +++----
 src/common/components/status/TxPegin.vue      |   2 +-
 src/common/components/status/TxPegout.vue     |   2 +-
 src/common/services/FlyoverService.ts         |  10 +-
 src/common/store/constants.ts                 |   9 +
 src/common/styles/_cards.scss                 |  14 +-
 src/common/styles/_home.scss                  |   2 +-
 src/common/types/Flyover/FlyoverPegout.ts     |   1 +
 src/common/utils/common.ts                    |   1 +
 src/common/views/Home.vue                     |  27 +-
 src/common/views/SuccessTx.vue                |  60 +++-
 src/pegin/components/create/SendBitcoin.vue   |  11 +-
 src/pegout/components/PegoutForm.vue          | 123 ++++++---
 src/pegout/components/PegoutOption.vue        | 259 ++++++++++--------
 src/pegout/components/RbtcInputAmount.vue     |  45 +--
 src/pegout/store/FlyoverPegout/actions.ts     |   4 +
 src/pegout/store/FlyoverPegout/mutations.ts   |   3 +
 src/status/views/Status.vue                   |   2 +-
 19 files changed, 396 insertions(+), 287 deletions(-)

diff --git a/src/common/components/exchange/SelectBitcoinWallet.vue b/src/common/components/exchange/SelectBitcoinWallet.vue
index 44fc3dfa0..738036680 100644
--- a/src/common/components/exchange/SelectBitcoinWallet.vue
+++ b/src/common/components/exchange/SelectBitcoinWallet.vue
@@ -66,7 +66,7 @@ export default {
     const wallets = computed(() => walletConf.wallets.filter((wallet) => {
       const walletConfJsonConstant = wallet.constant as BtcWallet;
       const flag = getFeature.value(FeatureNames[walletConfJsonConstant]);
-      return flag?.value === 'enabled';
+      return flag?.value === constants.ENABLED;
     }));
 
     const bitcoinWallet = useStateAttribute<BtcWallet>('pegInTx', 'bitcoinWallet');
diff --git a/src/common/components/status/StatusSummary.vue b/src/common/components/status/StatusSummary.vue
index 177ee49df..81f27d987 100644
--- a/src/common/components/status/StatusSummary.vue
+++ b/src/common/components/status/StatusSummary.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-row>
-    <h2 class="mt-4 mb-2 w-100 text-center">Summary</h2>
+  <v-row class="ml-2">
+    <span class="mt-4 mb-2 w-100 text-left">Summary</span>
   </v-row>
-  <v-row class="rounded-lg py-8 px-4 border-md">
+  <v-row class="rounded-lg py-8 px-4 border-md ml-2">
     <v-col :order="columnOrder.btc" cols="6" class="d-flex flex-column ga-4">
       <div class="pb-4">
         <h3 class="text-h3 pa-1 pb-2 bg-orange d-inline-block">
@@ -10,9 +10,9 @@
         </h3>
       </div>
       <div v-for="({title, value, ticker, link}) in btcSide" :key="title"
-        class="d-flex flex-column ga-1">
+        class="d-flex flex-column ga-1 custom-input">
         <span>{{ title }}</span>
-        <div class="d-flex align-center bg-surface py-2 px-4 rounded-lg border">
+        <div class="d-flex align-center py-2 px-4 rounded-lg border-md">
           <span class="text-h4">{{ value?.length > 18 ? truncateString(value) : value }}</span>
           <v-spacer />
           <v-chip v-if="ticker" :prepend-icon="mdiBitcoin" class="btc-icon">
@@ -37,10 +37,9 @@
         </h3>
       </div>
       <div v-for="({title, value, ticker, link}) in rskSide" :key="title"
-        class="d-flex flex-column ga-1">
+        class="d-flex flex-column ga-1 custom-input">
         <span>{{ title }}</span>
-        <div class="d-flex align-center bg-surface py-2 px-4
-          rounded-lg border">
+        <div class="d-flex align-center py-2 px-4 rounded-lg border-md">
           <span class="text-h4">{{ value?.length > 18 ? truncateString(value) : value }}</span>
           <v-spacer />
           <v-chip v-if="ticker" class="pl-2 pr-3">
@@ -110,6 +109,16 @@ export default defineComponent({
       if (props.type === TxStatusType.PEGOUT || props.type === TxStatusType.FLYOVER_PEGOUT) {
         const fee = props.details.fee === 0 ? props.details.estimatedFee : props.details.fee;
         return [
+          {
+            title: 'You receive',
+            value: props.txWithError ? '-' : props.details.amountReceivedString,
+            ticker: true,
+          },
+          {
+            title: props.details.fee === 0 ? 'Estimated Fee' : 'Fee',
+            value: status.value.type === TxStatusType.FLYOVER_PEGOUT || props.txWithError ? '-' : fee,
+            ticker: true,
+          },
           {
             title: 'Recipient Address',
             value: props.details.recipientAddress && !props.txWithError
@@ -122,29 +131,14 @@ export default defineComponent({
               ? props.details.btcTxId : '-',
             link: getBtcTxExplorerUrl(props.details.btcTxId),
           },
-          {
-            title: props.details.fee === 0 ? 'Estimated Fee' : 'Fee',
-            value: status.value.type === TxStatusType.FLYOVER_PEGOUT || props.txWithError ? '-' : fee,
-            ticker: true,
-          },
-          {
-            title: 'You receive',
-            value: props.txWithError ? '-' : props.details.amountReceivedString,
-            ticker: true,
-          },
         ];
       }
       return [
         {
-          title: 'Sender Address',
-          value: props.details.senderAddress || '-',
-          link: getBtcAddressExplorerUrl(props.details.senderAddress),
+          title: 'You send',
+          value: props.details.total,
+          ticker: true,
         },
-        ...(props.withTxIds ? [{
-          title: 'Transaction ID',
-          value: props.details.txId || '-',
-          link: getBtcTxExplorerUrl(props.details.txId),
-        }] : []),
         {
           title: props.details && props.type === TxStatusType.FLYOVER_PEGIN
             ? 'Fee (includes provider and network fees)' : 'Fee',
@@ -152,10 +146,15 @@ export default defineComponent({
           ticker: true,
         },
         {
-          title: 'You send',
-          value: props.details.total,
-          ticker: true,
+          title: 'Sender Address',
+          value: props.details.senderAddress || '-',
+          link: getBtcAddressExplorerUrl(props.details.senderAddress),
         },
+        ...(props.withTxIds ? [{
+          title: 'Transaction ID',
+          value: props.details.txId || '-',
+          link: getBtcTxExplorerUrl(props.details.txId),
+        }] : []),
       ];
     });
 
@@ -164,14 +163,9 @@ export default defineComponent({
         const gasFee = props.details.gas?.gt(0) ? props.details.gas.toRBTCTrimmedString() : '-';
         return [
           {
-            title: 'Sender Address',
-            value: props.details.senderAddress || '-',
-            link: getRskAddressExplorerUrl(props.details.senderAddress),
-          },
-          {
-            title: 'Transaction ID',
-            value: props.details.txId || '-',
-            link: getRskTxExplorerUrl(props.details.txId),
+            title: 'You send',
+            value: props.details.amountFromString,
+            ticker: true,
           },
           {
             title: props.type === TxStatusType.FLYOVER_PEGOUT
@@ -182,12 +176,28 @@ export default defineComponent({
             ticker: true,
           },
           {
-            title: 'You send',
-            value: props.details.amountFromString,
-            ticker: true,
+            title: 'Sender Address',
+            value: props.details.senderAddress || '-',
+            link: getRskAddressExplorerUrl(props.details.senderAddress),
+          },
+          {
+            title: 'Transaction ID',
+            value: props.details.txId || '-',
+            link: getRskTxExplorerUrl(props.details.txId),
           }];
       }
       return [
+        {
+          title: 'You receive',
+          value: props.details.amountReceivedString && !props.txWithError
+            ? props.details.amountReceivedString : '-',
+          ticker: true,
+        },
+        {
+          title: 'Fee',
+          value: '-',
+          ticker: true,
+        },
         {
           title: 'Recipient Address',
           value: props.details.recipientAddress && !props.txWithError
@@ -200,17 +210,6 @@ export default defineComponent({
             ? props.details.rskTxId : '-',
           link: getRskTxExplorerUrl(props.details.rskTxId),
         }] : []),
-        {
-          title: 'Fee',
-          value: '-',
-          ticker: true,
-        },
-        {
-          title: 'You receive',
-          value: props.details.amountReceivedString && !props.txWithError
-            ? props.details.amountReceivedString : '-',
-          ticker: true,
-        },
       ];
     });
 
@@ -238,4 +237,9 @@ export default defineComponent({
 .v-col.order-1 {
   padding-right: 20px;
 }
+.custom-input {
+  .border-md {
+    border-color: rgb(var(--v-theme-bw-500)) !important;
+  }
+}
 </style>
diff --git a/src/common/components/status/TxPegin.vue b/src/common/components/status/TxPegin.vue
index e21b36017..994c4c76b 100644
--- a/src/common/components/status/TxPegin.vue
+++ b/src/common/components/status/TxPegin.vue
@@ -10,7 +10,7 @@
         <span class="text-center text-bw-400 text-body-2">Confirmations</span>
       </v-row>
     </template>
-    <v-row>
+    <v-row class="mb-4">
       <status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
                            :txWithError="txWithError" />
     </v-row>
diff --git a/src/common/components/status/TxPegout.vue b/src/common/components/status/TxPegout.vue
index 0266fc2a9..3c3661dc3 100644
--- a/src/common/components/status/TxPegout.vue
+++ b/src/common/components/status/TxPegout.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-row>
+    <v-row class="mb-4">
       <status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
                            :txWithError="txWithError"/>
     </v-row>
diff --git a/src/common/services/FlyoverService.ts b/src/common/services/FlyoverService.ts
index ca0745dc6..de405d7ae 100644
--- a/src/common/services/FlyoverService.ts
+++ b/src/common/services/FlyoverService.ts
@@ -17,7 +17,7 @@ import { isValidSiteKey, ServiceError } from '../utils';
 export default class FlyoverService {
   flyover?: Flyover;
 
-  flyovernetwork: Network;
+  flyoverNetwork: Network;
 
   private lbcAddress = EnvironmentAccessorService.getEnvironmentVariables().lbcAddress;
 
@@ -40,13 +40,13 @@ export default class FlyoverService {
     const appNetwork = EnvironmentAccessorService.getEnvironmentVariables().vueAppCoin;
     switch (appNetwork) {
       case constants.BTC_NETWORK_MAINNET:
-        this.flyovernetwork = 'Mainnet';
+        this.flyoverNetwork = 'Mainnet';
         break;
       case constants.BTC_NETWORK_TESTNET:
-        this.flyovernetwork = 'Testnet';
+        this.flyoverNetwork = 'Testnet';
         break;
       default:
-        this.flyovernetwork = 'Regtest';
+        this.flyoverNetwork = 'Regtest';
         break;
     }
   }
@@ -58,7 +58,7 @@ export default class FlyoverService {
       BlockchainConnection.createUsingStandard(provider)
         .then((connection: BlockchainConnection) => {
           this.flyover = new Flyover({
-            network: this.flyovernetwork,
+            network: this.flyoverNetwork,
             rskConnection: connection,
             captchaTokenResolver: this.tokenResolver.bind(this),
             disableChecksum: true,
diff --git a/src/common/store/constants.ts b/src/common/store/constants.ts
index 44cf33ca4..bf824c097 100644
--- a/src/common/store/constants.ts
+++ b/src/common/store/constants.ts
@@ -160,6 +160,7 @@ export const FLYOVER_PEGOUT_SET_BTC_ADDRESS = 'FLYOVER_PEGOUT_SET_BTC_ADDRESS';
 export const FLYOVER_PEGOUT_SET_TX_HASH = 'FLYOVER_PEGOUT_SET_TX_HASH';
 export const FLYOVER_PEGOUT_SET_SELECTED_QUOTE = 'FLYOVER_PEGOUT_SET_SELECTED_QUOTE';
 export const FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES = 'FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES';
+export const FLYOVER_PEGOUT_SET_RESPONDING = 'FLYOVER_PEGOUT_SET_RESPONDING';
 
 // Flyover PegIn mutations
 export const FLYOVER_PEGIN_SET_PROVIDERS = 'FLYOVER_PEGIN_SET_PROVIDERS';
@@ -345,11 +346,19 @@ export const POWPEG_RSKT_HEADER = '52534b5401';
 export const PEGIN_OUTPUTS = 3;
 export const COOKIE_EXPIRATION_HOURS = 12;
 
+export const ENABLED = 'enabled';
+export const DISABLED = 'disabled';
+
 export enum peginType {
   POWPEG = 'POWPEG',
   FLYOVER = 'FLYOVER'
 }
 
+export enum pegoutType {
+  POWPEG = 'POWPEG',
+  FLYOVER = 'FLYOVER'
+}
+
 export const BTC_AVG_BLOCK_TIME_IN_SECONDS = 600;
 export const RSK_AVG_BLOCK_TIME_IN_SECONDS = 30;
 export const FULFILLED = 'fulfilled';
diff --git a/src/common/styles/_cards.scss b/src/common/styles/_cards.scss
index 26a07caf5..a7a5918bc 100644
--- a/src/common/styles/_cards.scss
+++ b/src/common/styles/_cards.scss
@@ -14,11 +14,11 @@
 .not-available {
   position: relative;
   .not-available-text {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(var(--v-theme-background), 0.5);
-  backdrop-filter: blur(4px);
-  opacity: 1;
-  z-index: 1;
+    position: absolute;
+    inset: 0;
+    background-color: rgba(var(--v-theme-background), 0.5);
+    backdrop-filter: blur(4px);
+    opacity: 1;
+    z-index: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/src/common/styles/_home.scss b/src/common/styles/_home.scss
index e29a23333..7112b2268 100644
--- a/src/common/styles/_home.scss
+++ b/src/common/styles/_home.scss
@@ -1,6 +1,6 @@
 .home {
   input[type="checkbox"] {
-    accent-color: rgb(var(--v-theme-on-background));
+    accent-color: rgb(var(--v-theme-green));
   }
   .border-box {
     color: rgb(var(--v-theme-background));
diff --git a/src/common/types/Flyover/FlyoverPegout.ts b/src/common/types/Flyover/FlyoverPegout.ts
index 2527edada..ca46a21e6 100644
--- a/src/common/types/Flyover/FlyoverPegout.ts
+++ b/src/common/types/Flyover/FlyoverPegout.ts
@@ -14,4 +14,5 @@ export interface FlyoverPegoutState {
     flyoverService: FlyoverService;
     txHash?: string;
     selectedQuoteHash: string;
+    isResponding: boolean;
 }
diff --git a/src/common/utils/common.ts b/src/common/utils/common.ts
index a672ed62d..8f7e5dd67 100644
--- a/src/common/utils/common.ts
+++ b/src/common/utils/common.ts
@@ -108,6 +108,7 @@ export const getClearFlyoverPegoutState = (): FlyoverPegoutState => ({
   flyoverService: markRaw(new FlyoverService()),
   selectedQuoteHash: '',
   differences: [],
+  isResponding: false,
 });
 
 export const getClearFlyoverPeginState = (): FlyoverPeginState => ({
diff --git a/src/common/views/Home.vue b/src/common/views/Home.vue
index 063d3ab0e..25c189a0d 100644
--- a/src/common/views/Home.vue
+++ b/src/common/views/Home.vue
@@ -12,25 +12,25 @@
           <span class="mx-1 my-2 pa-4 bg-green">Rootstock</span>
         </div>
       </v-col>
-      <v-col lg="4" xl="3" xxl="2" class="d-flex flex-column ga-6">
+      <v-col lg="4" xl="3" xxl="2" class="d-flex flex-column">
         <template v-if="termsAndConditionsEnabled">
-          <v-row class="d-flex justify-center">
+          <v-row class="d-flex justify-center mb-6">
             <label for="termscheck" class="pa-0 d-flex align-center mx-3">
               {{ '' }}
               <input id="termscheck" type="checkbox"
                      :checked="areTermsAccepted" @click="setTermsAccepted">
             </label>
             <span>I acknowledge and accept
-              <a href="#" rel="noopener" @key-press="toggleCheck" class="px-1 text-bw-500"
+              <a href="#" rel="noopener" @key-press="toggleCheck" class="px-1 text-orange"
                  @click.prevent="$emit('update:showDialog', true)">
-                terms and conditions
+                Terms and conditions
               </a>
             </span>
           </v-row>
         </template>
         <v-btn @click="selectConversion(constants.PEG_IN_TRANSACTION_TYPE)"
           :disabled="!isAllowedBrowser || (!areTermsAccepted && !!termsAndConditionsEnabled)"
-          class="border-box d-block pa-6 rounded-lg h-auto">
+          class="border-box d-block pa-6 rounded-lg h-auto mb-6">
           <v-row no-gutters align="center" justify="space-between">
             <v-col cols="4">
               <div class="d-flex text-h3 ga-1 flex-wrap">
@@ -46,7 +46,7 @@
         </v-btn>
         <v-btn @click="selectConversion(constants.PEG_OUT_TRANSACTION_TYPE)"
           :disabled="!areTermsAccepted && !!termsAndConditionsEnabled"
-          class="border-box d-block pa-6 rounded-lg h-auto">
+          class="border-box d-block pa-6 rounded-lg h-auto mb-6">
           <v-row no-gutters align="center" justify="space-between">
             <v-col cols="4">
               <div class="d-flex text-h3 ga-1 flex-wrap">
@@ -60,18 +60,19 @@
             </v-col>
           </v-row>
         </v-btn>
-        <div class="d-flex justify-center gc-2 align-baseline flex-wrap">
-          <span>Already made a transaction?</span>
-          <v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1"
+        <div class="d-flex justify-start align-baseline flex-wrap ml-6">
+          <span class="text-body-1">Already made a transaction?</span>
+          <v-btn variant="text" color="orange" density="compact"
+            class="pa-0 text-body-1 ml-2"
             @click="toStatusSearch">
             Transaction Status
           </v-btn>
         </div>
-        <div class="d-flex justify-center gc-2 align-baseline flex-wrap">
-          <span class="text-center">To learn about the various RBTC access methods, visit</span>
-          <v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1"
+        <div class="d-flex justify-start align-baseline flex-wrap ml-6">
+          <span class="text-body-1">To learn about the various RBTC access methods, visit </span>
+          <v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1 mr-2"
              href="https://rootstock.io/rbtc/" target="_blank">
-            RBTC Webpage
+              RBTC Webpage
           </v-btn>
         </div>
       </v-col>
diff --git a/src/common/views/SuccessTx.vue b/src/common/views/SuccessTx.vue
index c561394a5..76503e729 100644
--- a/src/common/views/SuccessTx.vue
+++ b/src/common/views/SuccessTx.vue
@@ -5,12 +5,15 @@
         <v-row no-gutters>
           <div class="text-h1 mb-2 pa-4 bg-teal">You are</div>
         </v-row>
-        <v-row no-gutters>
+        <v-row no-gutters class="mb-8">
           <div class="text-h1 pa-4 bg-yellow">Done!</div>
         </v-row>
         <v-row no-gutters>
-          <div class="pt-4">
-            <span>{{ willReceiveText }}</span>
+          <div>
+            <span>{{ amountToReceive }}</span><br>
+            on your address
+            <span v-if="estimatedTime">within the next</span><br>
+            <span>{{ estimatedTime }}</span>
           </div>
         </v-row>
       </v-col>
@@ -18,7 +21,7 @@
         <v-row no-gutters>
           <p class="text-subtitle-1">Transaction ID</p>
         </v-row>
-        <v-row no-gutters class="mb-4">
+        <v-row no-gutters class="mb-8">
           <v-text-field
             density="comfortable"
             variant="outlined"
@@ -30,7 +33,7 @@
             </template>
           </v-text-field>
         </v-row>
-        <v-row no-gutters class="my-4">
+        <v-row no-gutters class="my-4 mt-8">
           <v-btn-rsk block @click="toTxStatus">See Transaction</v-btn-rsk>
         </v-row>
         <v-row no-gutters>
@@ -48,9 +51,10 @@ import { useAction, useGetter, useState } from '@/common/store/helper';
 import * as constants from '@/common/store/constants';
 import { useRouter } from 'vue-router';
 import {
-  PegInTxState, PegOutTxState, SatoshiBig, TxStatusType,
+  PegInTxState, PegOutTxState, SatoshiBig, TxStatusType, PeginQuote, QuotePegOut2WP,
 } from '@/common/types';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
+import { blockConfirmationsToTimeString } from '@/common/utils';
 
 export default defineComponent({
   name: 'SuccessTx',
@@ -71,15 +75,46 @@ export default defineComponent({
     const pegOutTxState = useState<PegOutTxState>('pegOutTx');
     const environmentContext = EnvironmentContextProviderService.getEnvironmentContext();
     const estimatedBtcToReceive = useGetter<SatoshiBig>('pegOutTx', constants.PEGOUT_TX_GET_ESTIMATED_BTC_TO_RECEIVE);
+    const peginSelectedQuote = useGetter<PeginQuote>('flyoverPegin', constants.FLYOVER_PEGIN_GET_SELECTED_QUOTE);
+    const pegoutSelectedQuote = useGetter<QuotePegOut2WP>('flyoverPegout', constants.FLYOVER_PEGOUT_GET_SELECTED_QUOTE);
+
+    const amountToReceive = computed(() => {
+      let amountText;
+      switch (props.type.toUpperCase()) {
+        case TxStatusType.PEGIN:
+          amountText = `${pegInTxState.value.amountToTransfer.toBTCTrimmedString()}
+            ${environmentContext.getBtcTicker()}`;
+          break;
+        case TxStatusType.PEGOUT:
+          amountText = `${estimatedBtcToReceive.value.toBTCTrimmedString()}
+            ${environmentContext.getBtcTicker()}`;
+          break;
+        case TxStatusType.FLYOVER_PEGIN:
+          amountText = `${pegOutTxState.value.amountToTransfer.toRBTCTrimmedString()}
+            ${environmentContext.getBtcTicker()}`;
+          break;
+        case TxStatusType.FLYOVER_PEGOUT:
+          amountText = `${pegOutTxState.value.amountToTransfer.toRBTCTrimmedString()}
+            ${environmentContext.getBtcTicker()}`;
+          break;
+        default:
+          amountText = '';
+      }
+      return `You will receive ${amountText}`;
+    });
 
-    const willReceiveText = computed(() => {
+    const estimatedTime = computed(() => {
       switch (props.type.toUpperCase()) {
-        case TxStatusType.PEGIN || TxStatusType.FLYOVER_PEGIN:
-          return `You will receive ${pegInTxState.value.amountToTransfer.toBTCTrimmedString()} ${environmentContext.getRbtcTicker()}`;
+        case TxStatusType.PEGIN:
+          return '17 hours';
         case TxStatusType.PEGOUT:
-          return `You will receive approximately ${estimatedBtcToReceive.value.toBTCTrimmedString()} ${environmentContext.getBtcTicker()}`;
+          return '34 hours';
+        case TxStatusType.FLYOVER_PEGIN:
+          return `${blockConfirmationsToTimeString(peginSelectedQuote
+            .value.quote.confirmations ?? 0, 'btc')}`;
         case TxStatusType.FLYOVER_PEGOUT:
-          return `You will receive ${pegOutTxState.value.amountToTransfer.toRBTCTrimmedString()} ${environmentContext.getBtcTicker()}`;
+          return `${blockConfirmationsToTimeString(pegoutSelectedQuote
+            .value.quote.depositConfirmations ?? 0, 'btc')}`;
         default:
           return '';
       }
@@ -100,7 +135,8 @@ export default defineComponent({
 
     return {
       mdiContentCopy,
-      willReceiveText,
+      amountToReceive,
+      estimatedTime,
       pegInTxState,
       copyToClipboard,
       goHome,
diff --git a/src/pegin/components/create/SendBitcoin.vue b/src/pegin/components/create/SendBitcoin.vue
index 14f948f46..209841390 100644
--- a/src/pegin/components/create/SendBitcoin.vue
+++ b/src/pegin/components/create/SendBitcoin.vue
@@ -38,7 +38,8 @@ import PegInForm from '@/pegin/components/create/PegInForm.vue';
 import ConfirmTx from '@/pegin/components/create/ConfirmTx.vue';
 import * as constants from '@/common/store/constants';
 import {
-  SendBitcoinState, SatoshiBig, BtcWallet, Utxo, TxStatusType,
+  SendBitcoinState, SatoshiBig, BtcWallet, Utxo,
+  TxStatusType,
 } from '@/common/types';
 import { Machine, getClearPeginTxState } from '@/common/utils';
 import { useAction, useGetter, useStateAttribute } from '@/common/store/helper';
@@ -98,6 +99,7 @@ export default defineComponent({
     const getChangeAddress = useGetter<string>('pegInTx', constants.PEGIN_TX_GET_CHANGE_ADDRESS);
     const selectedUtxoList = useGetter<Utxo[]>('pegInTx', constants.PEGIN_TX_GET_SELECTED_UTXO_LIST);
     const selectedFee = useGetter<SatoshiBig>('pegInTx', constants.PEGIN_TX_GET_SAFE_TX_FEE);
+    const type = useStateAttribute<string>('pegInTx', 'peginType');
 
     async function toConfirmTx({
       amountToTransferInSatoshi,
@@ -144,7 +146,12 @@ export default defineComponent({
       } else if (txHash) {
         router.push({
           name: 'SuccessTx',
-          params: { txId: txHash, type: (TxStatusType.PEGIN).toLowerCase() },
+          params: {
+            txId: txHash,
+            type: type.value === constants.peginType.FLYOVER
+              ? TxStatusType.FLYOVER_PEGIN
+              : TxStatusType.PEGIN,
+          },
         });
       }
     }
diff --git a/src/pegout/components/PegoutForm.vue b/src/pegout/components/PegoutForm.vue
index a529a962f..122b44082 100644
--- a/src/pegout/components/PegoutForm.vue
+++ b/src/pegout/components/PegoutForm.vue
@@ -15,19 +15,47 @@
           :willReceive="amountToReceive" />
       </v-col>
     </v-row>
-    <v-row v-if="showStep && !loadingQuotes">
+    <template v-if="showStep && !loadingQuotes">
+      <v-row>
+        <span class="text-bold ma-4 mb-2
+        ">Select Mode</span>
+      </v-row>
+      <v-row>
+        <v-col cols="6" v-if="pegoutQuotes.length === 0" >
+        <pegout-option class="mr-2" flyover-not-available
+          :option-type="pegoutType.FLYOVER">
+        <template v-slot>
+          <h4>
+            <span class="text-orange">Fast Mode</span> is unavailable at this time.
+          </h4>
+        </template>
+        </pegout-option>
+      </v-col>
       <v-col cols="6" v-for="(quote, index) in pegoutQuotes" :key="index" >
         <pegout-option
-        :class="index === 0 ? 'mr-2' : 'ml-2'"
-        :quote="quote"
-        :isWalletAuthorizedToSign="isWalletAuthorizedToSign"
-        @openAddressDialog="showAddressDialog = true"
-        @changeSelectedOption="changeSelectedOption"
-        :selectedOption="selectedOption === quote.quoteHash"
-        :quote-differences="quoteDifferences"
-        />
+          :option-type="pegoutType.FLYOVER"
+          :class="index === 0 ? 'mr-2' : 'ml-2'"
+          :quote="quote"
+          :isWalletAuthorizedToSign="isWalletAuthorizedToSign"
+          @openAddressDialog="showAddressDialog = true"
+          @changeSelectedOption="changeSelectedOption"
+          :selectedOption="selectedOption === quote.quoteHash"
+          :quote-differences="quoteDifferences"
+          />
       </v-col>
-    </v-row>
+      <v-col cols="6">
+        <pegout-option class="ml-2"
+          :option-type="pegoutType.POWPEG"
+          :quote="nativeQuote"
+          :isWalletAuthorizedToSign="isWalletAuthorizedToSign"
+          @openAddressDialog="showAddressDialog = true"
+          @changeSelectedOption="changeSelectedOption"
+          :selectedOption="selectedOption === ''"
+          :quote-differences="quoteDifferences"
+          />
+      </v-col>
+      </v-row>
+    </template>
     <v-row v-else-if="loadingQuotes" class="pt-4 justify-center">
       <v-progress-circular
         :size="250"
@@ -41,8 +69,7 @@
         <v-col cols="auto">
             <v-btn-rsk v-if="!pegOutFormState.matches(['loading'])"
             @click="executeRecaptcha"
-            :disabled="!isReadyToCreate
-              || !isFlyoverReady
+            :disabled="!isValid
               || pegOutFormState.matches(['goingHome'])"
             >
             <template #append>
@@ -151,6 +178,7 @@ export default defineComponent({
     const flyoverPegoutState = useState<FlyoverPegoutState>('flyoverPegout');
     const flyoverService = useStateAttribute<FlyoverService>('flyoverPegout', 'flyoverService');
     const account = useStateAttribute<string>('web3Session', 'account');
+    const balance = useStateAttribute<WeiBig>('web3Session', 'balance');
     const sendTx = useAction('pegOutTx', constants.PEGOUT_TX_SEND);
     const sendFlyoverTx = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_ACCEPT_AND_SEND_QUOTE);
     const initFlyoverTx = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_INIT);
@@ -161,6 +189,7 @@ export default defineComponent({
     const getFlyoverProviders = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_GET_PROVIDERS);
     const quotes = useStateAttribute<Record<number, QuotePegOut2WP[]>>('flyoverPegout', 'quotes');
     const quoteDifferences = useStateAttribute<Array<ObjectDifference>>('flyoverPegout', 'differences');
+    const isFlyoverResponding = useStateAttribute<boolean>('flyoverPegout', 'isResponding');
     const selectedQuote = useGetter<QuotePegOut2WP>('flyoverPegout', constants.FLYOVER_PEGOUT_GET_SELECTED_QUOTE);
     const estimatedBtcToReceive = useGetter<SatoshiBig>('pegOutTx', constants.PEGOUT_TX_GET_ESTIMATED_BTC_TO_RECEIVE);
     const isEnoughBalance = useGetter<boolean>('pegOutTx', constants.PEGOUT_TX_IS_ENOUGH_BALANCE);
@@ -180,33 +209,6 @@ export default defineComponent({
         });
       });
 
-      quoteList.push({
-        quote: {
-          agreementTimestamp: 0,
-          btcRefundAddress: '',
-          callFee: new WeiBig(0, 'wei'),
-          depositAddr: '', // Must be derived
-          depositConfirmations: 0,
-          depositDateLimit: 0,
-          expireBlocks: 0,
-          expireDate: 0,
-          gasFee: pegOutTxState.value.calculatedFee,
-          lbcAddress: '',
-          liquidityProviderRskAddress: '',
-          lpBtcAddr: '',
-          nonce: 0n,
-          penaltyFee: new WeiBig(0, 'wei'),
-          productFeeAmount: new WeiBig(pegOutTxState.value.btcEstimatedFee.toBTCString(), 'rbtc'),
-          rskRefundAddress: account.value ?? '',
-          transferConfirmations: 0,
-          transferTime: 0,
-          value: pegOutTxState.value.amountToTransfer,
-        },
-        quoteHash: '',
-      });
-
-      quoteList.sort((q1, q2) => q1.quote.depositConfirmations - q2.quote.depositConfirmations);
-
       return quoteList;
     });
 
@@ -233,13 +235,18 @@ export default defineComponent({
         && selectedOption.value !== undefined);
 
     const isFlyoverReady = computed(() => {
-      if (selectedOption.value) {
+      if (selectedOption.value && selectedQuote.value) {
         const { btcRecipientAddress } = flyoverPegoutState.value;
         const { bridgeContractAddress } = pegOutTxState.value.pegoutConfiguration;
         const { valid, addressType } = validateAddress(btcRecipientAddress);
         const allowedAdressType = (addressType === constants.BITCOIN_LEGACY_ADDRESS
           || addressType === constants.BITCOIN_SEGWIT_ADDRESS);
-        return valid
+        const amountPlusFees = selectedQuote.value.quote.value
+          .plus(selectedQuote.value.quote.gasFee)
+          .plus(selectedQuote.value.quote.productFeeAmount)
+          .plus(selectedQuote.value.quote.callFee);
+        const enoughBalance = balance.value.gt(amountPlusFees);
+        return valid && enoughBalance
           && btcRecipientAddress !== bridgeContractAddress
           && allowedAdressType;
       }
@@ -248,6 +255,36 @@ export default defineComponent({
 
     const sendingPegout = computed(():boolean => pegOutFormState.value.matches(['loading']));
 
+    const nativeQuote = computed(() => ({
+      quote: {
+        agreementTimestamp: 0,
+        btcRefundAddress: '',
+        callFee: new WeiBig(0, 'wei'),
+        depositAddr: '', // Must be derived
+        depositConfirmations: 0,
+        depositDateLimit: 0,
+        expireBlocks: 0,
+        expireDate: 0,
+        gasFee: pegOutTxState.value.calculatedFee,
+        lbcAddress: '',
+        liquidityProviderRskAddress: '',
+        lpBtcAddr: '',
+        nonce: 0n,
+        penaltyFee: new WeiBig(0, 'wei'),
+        productFeeAmount: new WeiBig(pegOutTxState.value.btcEstimatedFee.toBTCString(), 'rbtc'),
+        rskRefundAddress: account.value ?? '',
+        transferConfirmations: 0,
+        transferTime: 0,
+        value: pegOutTxState.value.amountToTransfer,
+      },
+      quoteHash: '',
+    }));
+
+    const isValid = computed(() => {
+      if (selectedOption.value === '') return isReadyToCreate.value;
+      return isFlyoverReady.value;
+    });
+
     function handlePegoutError(error: ServiceError) {
       txError.value = error;
       showTxErrorDialog.value = true;
@@ -426,6 +463,10 @@ export default defineComponent({
       continueHandler,
       flyoverService,
       executeRecaptcha,
+      nativeQuote,
+      isFlyoverResponding,
+      pegoutType: constants.pegoutType,
+      isValid,
     };
   },
 });
diff --git a/src/pegout/components/PegoutOption.vue b/src/pegout/components/PegoutOption.vue
index 66c81ec80..009bdf2e4 100644
--- a/src/pegout/components/PegoutOption.vue
+++ b/src/pegout/components/PegoutOption.vue
@@ -1,8 +1,12 @@
 <template>
   <v-card :ripple="false" rounded="lg" flat variant="outlined"
-    @click="selectOption"
-    :class="selectedOption && 'selected'"
-    class="d-flex flex-column ga-4 pa-8 fill-height">
+    @click="selectOption" height="450px" :disabled="flyoverNotAvailable"
+    :class="{ 'selected': selectedOption, 'not-available': flyoverNotAvailable }"
+    class="d-flex flex-column ga-4 pa-8">
+    <div v-if="flyoverNotAvailable"
+      class="not-available-text d-flex align-center justify-center pa-8 text-center">
+      <slot />
+    </div>
     <v-row no-gutters class="my-2">
       <div class='text-h3'>
         <span :class='`pa-1 bg-${header.subtitleBgColor}`'>
@@ -10,7 +14,7 @@
         </span>
       </div>
     </v-row>
-    <v-row no-gutters>
+    <v-row  no-gutters>
       <v-col cols="auto">
         <span class="text-right"> {{ header.label }}</span>
       </v-col>
@@ -19,9 +23,54 @@
             <v-icon :icon="mdiOpenInNew"></v-icon>
         </v-btn>
       </v-col>
+      <v-spacer />
+      <v-col class="d-flex justify-end ml-0" :style='`color: ${header.color}`'>
+        <v-tooltip :text="tooltipText" location="top" max-width="200">
+        <template v-slot:activator="{ props }">
+            <div v-bind="props" class="d-flex align-center ga-1">
+              <v-icon :icon="mdiClockTimeThreeOutline" />
+              <span :class='`ml-2 ${header.subtitleBgColor}`'>
+                {{ estimatedTimeToReceive }}
+              </span>
+            </div>
+        </template>
+      </v-tooltip>
+      </v-col>
+    </v-row>
+    <v-divider thickness="1" :style='`color: ${header.color}; opacity: 1;`' />
+    <v-row>
+      <v-col>
+        <div class="d-flex flex-column">
+          <span>
+            {{ isFlyover ? 'Value to receive' : 'Estimated value to receive' }}
+          </span>
+          <span class="text-bw-400">
+            {{ estimatedValueToReceive }}
+            {{ environmentContext.getBtcTicker() }}
+          </span>
+          <span class="text-bw-400" :class="{ 'font-weight-bold': hasChanged(['gasFee'])}">
+            USD {{ toUSD(estimatedValueToReceive) }}
+          </span>
+        </div>
+      </v-col>
+      <v-col>
+        <div class="d-flex flex-column">
+          <span>
+            {{ isFlyover ? 'Total Fee (Network & Provider)' : 'Total Fee (Network)' }}
+          </span>
+          <span class="text-bw-400"
+                :class="{ 'font-weight-bold': hasChanged(['productFeeAmount', 'callFee'])}">
+            {{ totalFee }}
+            {{ environmentContext.getBtcTicker() }}
+          </span>
+          <span class="text-bw-400" :class="{ 'font-weight-bold': hasChanged(['gasFee'])}">
+            USD {{ toUSD(totalFee) }}
+          </span>
+        </div>
+      </v-col>
     </v-row>
-    <div class="d-flex flex-column ga-2 py-4">
-      <span>Destination Address</span>
+    <div class="ga-2 pt-4">
+      <div class="mb-4">Destination Bitcoin Address</div>
       <div v-if="isFlyover">
         <v-text-field
           v-model="btcAddress"
@@ -32,97 +81,47 @@
           variant="solo"
           :class="showAddressWarning && 'input-error'"
           :placeholder="btcAddressPlaceholder"
-          @update:model-value="updateStore"/>
+          @update:model-value="updateStore"
+          class="pb-0"/>
         <v-alert v-show="showAddressWarning"
-          variant="text" type="warning" density="compact" class="text-body-1 px-0" prominent>
+          variant="text" type="warning" density="compact"
+          class="text-body-1 px-0 pt-1 mb-0" prominent>
           <template #prepend>
             <v-icon size="small" :icon="mdiInformationOutline" />
           </template>
           Invalid address. Please note that native segwit is not supported at this time.
         </v-alert>
       </div>
-      <div v-else>
-        <div class="d-flex align-center justify-space-between
-          bg-surface py-2 px-4 rounded-lg border">
-          <p class="text-bw-400">
-            {{ session.btcDerivedAddress || 'Address needs to be generated' }}
-          </p>
-          <v-chip v-if="isWalletAuthorizedToSign && !session.btcDerivedAddress" variant="outlined"
-            @click="$emit('openAddressDialog')">
+      <template v-else>
+        <v-text-field
+          :v-model="session.btcDerivedAddress || 'Address needs to be generated'"
+          flat
+          hide-details
+          density="compact"
+          rounded="lg"
+          variant="solo"
+          :placeholder="session.btcDerivedAddress || 'Address needs to be generated'">
+          <template v-slot:append-inner>
+            <v-chip v-if="isWalletAuthorizedToSign && !session.btcDerivedAddress"
+            variant="outlined" @click="$emit('openAddressDialog')">
             Generate
           </v-chip>
-        </div>
+          </template>
+        </v-text-field>
         <v-alert
-          variant="text" type="warning" density="compact" class="text-body-1 px-0" prominent>
+          variant="text" type="warning" density="compact" class="text-body-1 px-0 pt-1" prominent>
           <template #prepend>
             <v-icon size="small" :icon="mdiInformationOutline" />
           </template>
-          <p>Follow
-            <span>
-              <a :href=constants.DERIVE_BTC_ADDRESS_DOCUMENTATION_URL
-                class="d-inline a" target='_blank'>this documentation</a>
-            </span>
-            to get the destination address.
-          </p>
+          <span>Follow
+            <a :href=constants.DERIVE_BTC_ADDRESS_DOCUMENTATION_URL
+              class="d-inline a" target='_blank'>
+              this steps
+            </a>
+            to view and access your {{ environmentContext.getBtcTicker() }} funds.
+          </span>
         </v-alert>
-      </div>
-    </div>
-    <v-spacer class="fill-height" />
-    <span class="text-h4">Features</span>
-
-    <div class="d-flex flex-column">
-      <span>Estimated Time to Receive</span>
-      <span class="text-bw-400">
-        {{ estimatedTimeToReceive }}
-      </span>
-    </div>
-
-    <div class="d-flex flex-column">
-      <span >Gas</span>
-      <span :class="{ 'font-weight-bold': hasChanged(['gasFee'])}" class="text-bw-400">
-        {{ quote.quote.gasFee.toRBTCTrimmedString() }}
-        {{ environmentContext.getRbtcTicker() }}
-      </span>
-      <span class="text-bw-400" :class="{ 'font-weight-bold': hasChanged(['gasFee'])}">
-        USD {{ toUSD(quote.quote.gasFee.toRBTCString()) }}
-      </span>
-    </div>
-
-    <div class="d-flex flex-column">
-      <span>
-        {{ isFlyover ? 'Provider fee' : 'Estimated BTC network fee' }}
-      </span>
-      <span class="text-bw-400"
-            :class="{ 'font-weight-bold': hasChanged(['productFeeAmount', 'callFee'])}">
-        {{ quote.quote.callFee.plus(quote.quote.productFeeAmount).toRBTCTrimmedString() }}
-        {{ environmentContext.getBtcTicker() }}
-      </span>
-      <span class="text-bw-400"
-            :class="{ 'font-weight-bold': hasChanged(['productFeeAmount', 'callFee'])}">
-        USD {{ toUSD(quote.quote.callFee.plus(quote.quote.productFeeAmount).toRBTCString()) }}
-      </span>
-    </div>
-
-    <div class="d-flex flex-column">
-      <span>Amount to send</span>
-      <span class="text-bw-400"
-      :class="{ 'font-weight-bold': hasChanged(['gasFee', 'productFeeAmount', 'callFee'])}">
-        {{ amountToSend }} {{ environmentContext.getBtcTicker() }}
-      </span>
-      <span class="text-bw-400"
-      :class="{ 'font-weight-bold': hasChanged(['gasFee', 'productFeeAmount', 'callFee'])}">
-        USD {{ toUSD(amountToSend) }}
-      </span>
-    </div>
-
-    <div class="d-flex flex-column">
-      <span>
-        {{ isFlyover ? 'Value to receive' : 'Estimated value to receive' }}
-      </span>
-      <span class="text-bw-400">
-        {{ estimatedValueToReceive }} {{ environmentContext.getBtcTicker() }}
-      </span>
-      <span class="text-bw-400">USD {{ toUSD(estimatedValueToReceive) }}</span>
+      </template>
     </div>
   </v-card>
 </template>
@@ -131,7 +130,12 @@
 import {
   computed, defineComponent, PropType, ref,
 } from 'vue';
-import { mdiSendOutline, mdiInformationOutline, mdiOpenInNew } from '@mdi/js';
+import {
+  mdiSendOutline,
+  mdiInformationOutline,
+  mdiOpenInNew,
+  mdiClockTimeThreeOutline,
+} from '@mdi/js';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
 import { useAction, useState, useStateAttribute } from '@/common/store/helper';
 import {
@@ -143,13 +147,21 @@ import { blockConfirmationsToTimeString, validateAddress } from '@/common/utils'
 export default defineComponent({
   name: 'PegoutOption',
   props: {
+    optionType: {
+      type: String as PropType<constants.pegoutType>,
+      required: true,
+    },
+    flyoverNotAvailable: {
+      type: Boolean,
+      required: false,
+    },
     quote: {
       type: Object as PropType<QuotePegOut2WP>,
-      required: true,
+      required: false,
     },
     isWalletAuthorizedToSign: {
       type: Boolean,
-      required: true,
+      required: false,
     },
     selectedOption: {
       type: Boolean,
@@ -157,7 +169,7 @@ export default defineComponent({
     },
     quoteDifferences: {
       type: Array<ObjectDifference>,
-      required: true,
+      required: false,
     },
   },
   setup(props, context) {
@@ -167,43 +179,36 @@ export default defineComponent({
     const setBtcAddress = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_ADD_BTC_ADDRESS);
     const fixedUSDDecimals = 2;
     const btcAddress = ref('');
-    const isFlyover = computed(() => props.quote.quoteHash.length > 0);
-
-    const amountToSend = computed(() => {
-      if (isFlyover.value) {
-        return new SatoshiBig(props.quote.quote.value
-          .plus(props.quote.quote.productFeeAmount)
-          .plus(props.quote.quote.gasFee)
-          .plus(props.quote.quote.callFee)
-          .toRBTCTrimmedString(), 'btc')
-          .toBTCTrimmedString();
-      }
-
-      return new SatoshiBig(props.quote.quote.value
-        .toRBTCTrimmedString(), 'btc')
-        .toBTCTrimmedString();
-    });
+    const isFlyover = computed(() => props.optionType === constants.pegoutType.FLYOVER);
+    const tooltipText = 'Time is approximate and may vary due to block confirmation times and network congestion.';
 
     const estimatedValueToReceive = computed(() => {
-      if (isFlyover.value) {
+      if (props.quote) {
+        if (isFlyover.value) {
+          return new SatoshiBig(props.quote.quote.value
+            .toRBTCTrimmedString(), 'btc')
+            .toBTCTrimmedString();
+        }
+
+        // TODO: SHOW THE AMOUNT WITHOUT FEES AFTER TESTNET GAS GOES DOWN
         return new SatoshiBig(props.quote.quote.value
+          // .minus(props.quote.quote.gasFee)
+          // .minus(props.quote.quote.productFeeAmount)
           .toRBTCTrimmedString(), 'btc')
           .toBTCTrimmedString();
       }
-
-      return new SatoshiBig(props.quote.quote.value
-        .minus(props.quote.quote.productFeeAmount)
-        .minus(props.quote.quote.gasFee)
-        .toRBTCTrimmedString(), 'btc')
-        .toBTCTrimmedString();
+      return '';
     });
 
     const estimatedTimeToReceive = computed(() => {
-      const { depositConfirmations } = props.quote.quote;
-      if (depositConfirmations === 0) {
-        return '33 hours';
+      if (props.quote) {
+        const { depositConfirmations } = props.quote.quote;
+        if (depositConfirmations === 0) {
+          return '34 hours';
+        }
+        return blockConfirmationsToTimeString(depositConfirmations);
       }
-      return blockConfirmationsToTimeString(depositConfirmations);
+      return '';
     });
 
     const header = computed(() => {
@@ -213,6 +218,7 @@ export default defineComponent({
           label: 'Powered by PowPeg + Flyover',
           subtitleBgColor: 'orange',
           link: 'https://dev.rootstock.io/concepts/rif-suite/#meet-the-suite',
+          color: '#FF9100',
         };
       }
       return {
@@ -220,9 +226,26 @@ export default defineComponent({
         label: 'Powered by PowPeg',
         subtitleBgColor: 'purple',
         link: 'https://dev.rootstock.io/rsk/architecture/powpeg/',
+        color: '#9E75FF',
       };
     });
 
+    const totalFee = computed(() => {
+      if (props.quote) {
+        let fee;
+        if (isFlyover.value) {
+          fee = props.quote.quote.callFee
+            .plus(props.quote.quote.gasFee)
+            .plus(props.quote.quote.productFeeAmount);
+        } else {
+          fee = props.quote.quote.gasFee
+            .plus(props.quote.quote.productFeeAmount);
+        }
+        return fee.toRBTCTrimmedString();
+      }
+      return '';
+    });
+
     const btcAddressPlaceholder = `Paste your (Legacy or Segwit) ${environmentContext.getBtcTicker()} address`;
 
     const isValidBtcAddress = computed(() => {
@@ -245,7 +268,7 @@ export default defineComponent({
     }
 
     function selectOption() {
-      context.emit('change-selected-option', props.quote.quoteHash);
+      context.emit('change-selected-option', props.quote ? props.quote.quoteHash : '');
     }
 
     function hasChanged(keys: string[]): boolean {
@@ -253,7 +276,7 @@ export default defineComponent({
       if (!isFlyover.value) {
         return false;
       }
-      props.quoteDifferences.forEach((diff) => {
+      props.quoteDifferences?.forEach((diff) => {
         if (keys.includes(diff.key)) {
           changed = true;
         }
@@ -272,7 +295,6 @@ export default defineComponent({
       constants,
       toUSD,
       blockConfirmationsToTimeString,
-      amountToSend,
       estimatedValueToReceive,
       isFlyover,
       header,
@@ -287,6 +309,9 @@ export default defineComponent({
       mdiOpenInNew,
       openLink,
       btcAddressPlaceholder,
+      mdiClockTimeThreeOutline,
+      totalFee,
+      tooltipText,
     };
   },
 });
diff --git a/src/pegout/components/RbtcInputAmount.vue b/src/pegout/components/RbtcInputAmount.vue
index 315eabaa6..dc200b520 100644
--- a/src/pegout/components/RbtcInputAmount.vue
+++ b/src/pegout/components/RbtcInputAmount.vue
@@ -1,18 +1,10 @@
 <template>
   <v-row no-gutters>
-  <v-col>
     <span class="d-inline-block font-weight-bold my-3">
-      I will send
+      Amount to send
     </span>
-  </v-col>
-  <v-col>
-    <span class="d-inline-block font-weight-bold my-3 ml-6">
-      I will receive
-    </span>
-  </v-col>
-</v-row>
-<v-row no-gutters align="center">
-  <v-col>
+  </v-row>
+  <v-row no-gutters align="center">
     <v-text-field
       hide-details
       hide-spin-buttons
@@ -47,29 +39,14 @@
           </div>
         </template>
     </v-text-field>
-  </v-col>
-  <v-icon class="mx-2" :icon="mdiArrowRight" color="bw-600" />
-  <v-col>
-    <div class="d-flex justify-space-between align-center flex-grow-1
-      bg-surface pa-3 rounded-lg border">
-    <div class="d-flex ga-2 align-center">
-      <v-chip :prepend-icon="mdiBitcoin" class="btc-icon">
-        {{ environmentContext.getBtcTicker() }}
-      </v-chip>
-      <span class="text-h4">
-        {{ stepState === 'valid' ? willReceive : '' }}
-      </span>
-    </div>
-  </div>
-  </v-col>
-</v-row>
-<v-row class="my-0" v-if="stepState === 'error'">
-  <v-col cols="6" align-self="start">
-    <v-alert :text="amountErrorMessage" class="pa-2 mr-2"
-        type="warning" color="orange">
-      </v-alert>
-  </v-col>
-</v-row>
+  </v-row>
+  <v-row class="my-0" v-if="stepState === 'error'">
+    <v-col cols="6" align-self="start">
+      <v-alert :text="amountErrorMessage" class="pa-2 mr-2"
+          type="warning" color="orange">
+        </v-alert>
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="ts">
diff --git a/src/pegout/store/FlyoverPegout/actions.ts b/src/pegout/store/FlyoverPegout/actions.ts
index 93e76c151..107ed55fe 100644
--- a/src/pegout/store/FlyoverPegout/actions.ts
+++ b/src/pegout/store/FlyoverPegout/actions.ts
@@ -23,8 +23,10 @@ export const actions: ActionTree<FlyoverPegoutState, RootState> = {
       const providers: LiquidityProvider2WP[] = await state.flyoverService.getProviders();
       commit(constants.FLYOVER_PEGOUT_SET_PROVIDERS, providers);
       result = constants.FlyoverCallResult.SUCCESS;
+      commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, true);
     } catch (e) {
       console.error(`Error getting flyover providers: ${e}`);
+      commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, false);
     } finally {
       try {
         await ApiService.registerFlyoverCall({ ...flyoverCallPayload, result } as FlyoverCall);
@@ -79,8 +81,10 @@ export const actions: ActionTree<FlyoverPegoutState, RootState> = {
           });
           result = constants.FlyoverCallResult.SUCCESS;
           commit(constants.FLYOVER_PEGOUT_SET_QUOTES, quotesByProvider);
+          commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, true);
           resolve();
         } catch (e) {
+          commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, false);
           reject();
         } finally {
           try {
diff --git a/src/pegout/store/FlyoverPegout/mutations.ts b/src/pegout/store/FlyoverPegout/mutations.ts
index a93444717..e9ed2fff2 100644
--- a/src/pegout/store/FlyoverPegout/mutations.ts
+++ b/src/pegout/store/FlyoverPegout/mutations.ts
@@ -32,4 +32,7 @@ export const mutations: MutationTree<FlyoverPegoutState> = {
   [constants.FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES]: (state, differences) => {
     state.differences = differences;
   },
+  [constants.FLYOVER_PEGOUT_SET_RESPONDING]: (state, isResponding) => {
+    state.isResponding = isResponding;
+  },
 };
diff --git a/src/status/views/Status.vue b/src/status/views/Status.vue
index 1edf6c62a..b2c219bc2 100644
--- a/src/status/views/Status.vue
+++ b/src/status/views/Status.vue
@@ -23,7 +23,7 @@
                 :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
       <tx-pegout v-if="isPegOut" :txId="txId" :isFlyover="isFlyover"
                 :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
-      <status-progress-bar v-if="txWithErrorType" :isFlyover="isFlyover"
+      <status-progress-bar class="mt-4" v-if="txWithErrorType" :isFlyover="isFlyover"
                 :txWithErrorType="txWithErrorType" :txWithError="txWithError" />
     </v-row>
     <v-row v-else>