Use flyover feature flag

src/common/store/constants.ts

@@ -309,3 +309,6 @@ export const MAINNET_ADDRESS_NSEGWIT = '^[bc1][0-9A-HJ-NP-Za-z]{41,62}';
 export const POWPEG_RSKT_HEADER = '52534b5401';
 export const PEGIN_OUTPUTS = 3;
 export const COOKIE_EXPIRATION_HOURS = 12;
+
+export const POWPEG = 'powpeg';
+export const FLYOVER = 'flyover';

src/common/styles/_exchange-form.scss

@@ -425,4 +425,9 @@
 
 .form-footer {
   margin-top: 80px !important;
+}
+
+.label {
+  font-size: 13px !important;
+  color: rgba(0,0,0,0.33) !important;
 }

src/pegout/components/FlyoverPegout.vue

@@ -339,7 +339,7 @@ export default defineComponent({
     }));
 
     async function send(quoteHash: string) {
-      const type = quoteHash ? 'flyover' : 'powpeg';
+      const type = quoteHash ? constants.FLYOVER : constants.POWPEG;
       pegOutFormState.value.send('loading');
       try {
         if (quoteHash) {

src/pegout/components/PegOutForm.vue

@@ -240,6 +240,7 @@ export default defineComponent({
         name: 'PegOutSuccess',
         params: {
           wallet: currentWallet.value,
+          type: constants.POWPEG,
         },
       });
       context.emit('changePage', nextPage);

src/pegout/components/RskWalletConnection.vue

@@ -5,66 +5,41 @@
         <div v-bind:class="[focus ?
               'number-filled' : 'number']">1</div>
       </v-col>
-      <v-col class="pl-0 pb-0">
+      <v-col class="px-0 pb-0">
         <p v-bind:class="{'boldie': focus}">
           Connect your Rootstock wallet:
         </p>
-        <v-row class="ma-0 mt-4">
+        <v-row class="ma-0 mt-4 pl-1 py-3 d-flex justify-space-between align-center">
           <template v-if="useWeb3Wallet && web3Address">
-            <v-col cols="5" class="pl-1">
-              <v-row class="ma-0">
-                <p class="account">
-                  {{ address }}
-                  {{ balance.toRBTCTrimmedString() }}
-                  {{ environmentContext.getRbtcTicker() }}
-                </p>
-              </v-row>
-            </v-col>
-            <v-col cols="2" class="d-flex justify-center">
-              <div class="divider" style="height: 38px;"></div>
-            </v-col>
-            <v-col cols="3" class="pa-0 align-self-center">
-              <v-row class="derive-button ma-0 pl-4">
-                <v-btn
-                  @click="disconnectWallet"
-                  variant="outlined" rounded
-                  height="38">
-                  <span>
-                    Disconnect wallet
-                  </span>
-                </v-btn>
-              </v-row>
-            </v-col>
+            <div class="d-flex flex-column">
+              <p class="account">{{ address }}</p>
+              <p class="account">
+                {{ balance.toRBTCTrimmedString() }}
+                {{ environmentContext.getRbtcTicker() }}
+              </p>
+            </div>
+            <div class="flex-grow-1 d-flex justify-center">
+              <v-btn
+              @click="disconnectWallet"
+              variant="outlined" rounded
+              height="38">
+              <span>
+                Disconnect wallet
+              </span>
+            </v-btn>
+          </div>
           </template>
           <template v-else>
-            <v-col cols="5" class="wallet-label-container">
-              <v-row class="ma-0 pa-0 pl-1" >
-                <v-text-field
-                  class="wallet-address-input"
-                  density="compact"
-                  variant="solo"
-                  disabled
-                  flat
-                  hide-details
-                  :placeholder="
-                  `Connect your wallet to select the ${environmentContext.getRbtcTicker()} address`
-                  "
-                  @focus="focus = true"
-                  @blur="focus = false"/>
-              </v-row>
-            </v-col>
-            <v-col cols="2" class="d-flex justify-center">
-              <div class="divider"></div>
-            </v-col>
-            <v-col cols="3" class="pa-0 align-self-center">
-              <v-row class="ma-0 pl-4">
-                <v-btn variant="outlined" rounded color="#000000" height="38"
-                  class="select-wallet-button"
-                  @click="connectWallet" id="wallet-connection">
-                  <span class="blackish">Connect wallet</span>
-                </v-btn>
-              </v-row>
-            </v-col>
+            <p class="label">
+              Connect your wallet to select the {{environmentContext.getRbtcTicker()}} address
+            </p>
+            <div class="flex-grow-1 d-flex justify-center">
+              <v-btn variant="outlined" rounded color="#000000" height="38"
+                class="select-wallet-button"
+                @click="connectWallet" id="wallet-connection">
+                <span class="blackish">Connect wallet</span>
+              </v-btn>
+            </div>
           </template>
         </v-row>
       </v-col>

src/pegout/views/PegOut.vue

@@ -7,12 +7,13 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent } from 'vue';
+import { ref, defineComponent, onBeforeMount } from 'vue';
 import * as constants from '@/common/store/constants';
 import PegOutForm from '@/pegout/components/PegOutForm.vue';
 import FlyoverPegout from '@/pegout/components/FlyoverPegout.vue';
 import { Machine } from '@/common/utils';
 import { useAction } from '@/common/store/helper';
+import { ApiService } from '@/common/services';
 import Confirmation from '../components/Confirmation.vue';
 
 export default defineComponent({
@@ -23,7 +24,7 @@ export default defineComponent({
     FlyoverPegout,
   },
   setup() {
-    const currentComponent = ref('FlyoverPegout');
+    const currentComponent = ref('');
     const confirmTxState = ref<Machine<
       'idle'
       | 'loading'
@@ -38,8 +39,23 @@ export default defineComponent({
       window.scrollTo(0, 0);
     }
 
+    onBeforeMount(() => {
+      ApiService.getFeatures()
+        .then((features) => {
+          const flag = features.find((feature) => feature.name === 'flyover_pegout');
+          if (flag?.value === 'enabled') {
+            initFlyover();
+            currentComponent.value = 'FlyoverPegout';
+          } else {
+            currentComponent.value = 'PegOutForm';
+          }
+        })
+        .catch(() => {
+          currentComponent.value = 'PegOutForm';
+        });
+    });
+
     init();
-    initFlyover();
 
     return {
       currentComponent,