refactor: adding new design to pegout flow

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');

src/common/components/status/StatusSummary.vue

@@ -1,18 +1,18 @@
 <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">
           Bitcoin
         </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,40 +131,30 @@ 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',
           value: props.details.fee,
           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>

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>

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>

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,

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';

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

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

src/common/types/Flyover/FlyoverPegout.ts

@@ -14,4 +14,5 @@ export interface FlyoverPegoutState {
     flyoverService: FlyoverService;
     txHash?: string;
     selectedQuoteHash: string;
+    isResponding: boolean;
 }

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 => ({

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>