fix: alternative path for changed conditions on quotes

src/common/store/constants.ts

@@ -81,6 +81,7 @@ export const FLYOVER_PEGOUT_CLEAR_QUOTES = 'FLYOVER_PEGOUT_CLEAR_QUOTES';
 export const FLYOVER_PEGOUT_SET_SELECTED_QUOTE_HASH = 'FLYOVER_PEGOUT_SET_SELECTED_QUOTE_HASH';
 export const FLYOVER_PEGOUT_CLEAR_QUOTE_DIFFERENCES = 'FLYOVER_PEGOUT_CLEAR_QUOTE_DIFFERENCES';
 export const FLYOVER_PEGOUT_GET_AVAILABLE_LIQUIDITY = 'FLYOVER_PEGOUT_GET_AVAILABLE_LIQUIDITY';
+export const FLYOVER_PEGOUT_ACCEPT_AND_SEND_QUOTE_WITH_CHANGED_CONDITIONS = 'FLYOVER_PEGOUT_ACCEPT_AND_SEND_QUOTE_WITH_CHANGED_CONDITIONS';
 
 // Flyover PegIn actions
 export const FLYOVER_PEGIN_INIT = 'FLYOVER_PEGIN_INIT';

src/common/types/Common.ts

@@ -132,12 +132,6 @@ export interface NormalizedSummary {
 export type AddressType = 'BITCOIN_LEGACY_ADDRESS' | 'BITCOIN_SEGWIT_ADDRESS' | 'BITCOIN_NATIVE_SEGWIT_ADDRESS' |
  'BITCOIN_MULTISIGNATURE_ADDRESS' | 'BITCOIN_UNKNOWN_ADDRESS_TYPE';
 
-export interface ObjectDifference {
-  key: string;
-  oldValue: unknown;
-  newValue: unknown;
-}
-
 export enum AppLocale {
   LOCALE_EN = 'en',
   LOCALE_ES = 'es',

src/common/types/Flyover/FlyoverPegout.ts

@@ -3,8 +3,20 @@ import { FlyoverService } from '../../services';
 import SatoshiBig from '../SatoshiBig';
 import WeiBig from '../WeiBig';
 
+export interface ReducedQuote {
+    gasFee: WeiBig;
+    callFee: WeiBig;
+    productFeeAmount: WeiBig;
+    value: WeiBig;
+}
+export interface ObjectDifference {
+    percentage: number;
+    previousQuote: ReducedQuote;
+    currentQuote: ReducedQuote;
+}
+
 export interface FlyoverPegoutState {
-    difference: number;
+    difference: ObjectDifference;
     amountToTransfer: WeiBig;
     validAmount: boolean;
     btcRecipientAddress: string;

src/common/types/environment-variables.ts

@@ -97,7 +97,7 @@ export class EnvironmentVariables {
     this.flyoverGetProvidersTimeout = Number(process.env.VUE_APP_FLYOVER_GET_PROVIDERS_TIMEOUT)
       || defaultValues.flyoverGetProvidersTimeout;
     this.flyoverPegoutDiffPercentage = Number(process.env
-      .VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE) || defaultValues.flyoverPegoutDiffPercentage;
+      .VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE) ?? defaultValues.flyoverPegoutDiffPercentage;
     this.grecaptchaTime = Number(process.env.VUE_APP_RECAPTCHA_NEW_TOKEN_TIME)
       || defaultValues.grecaptchaTime;
   }

src/common/utils/common.ts

@@ -4,6 +4,7 @@ import { BITCOIN_AVERAGE_FEE_LEVEL } from '@/common/store/constants';
 import {
   FlyoverPeginState,
   FlyoverPegoutState, ObjectDifference, PegOutTxState,
+  ReducedQuote,
   SessionState, WeiBig,
 } from '@/common/types';
 import { FlyoverService } from '@/common/services';
@@ -103,6 +104,19 @@ export const getClearSessionState = (): SessionState => (
   }
 );
 
+export const getClearReducedQuote = (): ReducedQuote => ({
+  gasFee: new WeiBig(0, 'wei'),
+  callFee: new WeiBig(0, 'wei'),
+  productFeeAmount: new WeiBig(0, 'wei'),
+  value: new WeiBig(0, 'wei'),
+});
+
+export const getClearObjectDifference = (): ObjectDifference => ({
+  percentage: 0,
+  previousQuote: getClearReducedQuote(),
+  currentQuote: getClearReducedQuote(),
+});
+
 export const getClearFlyoverPegoutState = (): FlyoverPegoutState => ({
   amountToTransfer: new WeiBig(0, 'wei'),
   validAmount: false,
@@ -112,7 +126,7 @@ export const getClearFlyoverPegoutState = (): FlyoverPegoutState => ({
   quotes: {},
   flyoverService: markRaw(new FlyoverService()),
   selectedQuoteHash: '',
-  difference: 0,
+  difference: getClearObjectDifference(),
 });
 
 export const getClearFlyoverPeginState = (): FlyoverPeginState => ({
@@ -126,31 +140,3 @@ export const getClearFlyoverPeginState = (): FlyoverPeginState => ({
   selectedQuoteHash: '',
   acceptedQuoteSignature: '',
 });
-
-export const compareObjects = (
-  obj1: { [key: string]: unknown },
-  obj2: { [key: string]: unknown },
-): Array<ObjectDifference> => {
-  if (Object.getPrototypeOf(obj1) !== Object.getPrototypeOf(obj2)) {
-    throw new Error('Objects has different prototype');
-  }
-  const differences: Array<ObjectDifference> = [];
-  Object.keys(obj1).forEach((key) => {
-    if (obj1[key] instanceof WeiBig && obj2[key] instanceof WeiBig) {
-      if (!(obj1[key] as WeiBig).eq(obj2[key] as WeiBig)) {
-        differences.push({
-          key,
-          oldValue: (obj1[key] as WeiBig).toRBTCString(),
-          newValue: (obj2[key] as WeiBig).toRBTCString(),
-        });
-      }
-    } else if (obj1[key] !== obj2[key]) {
-      differences.push({
-        key,
-        oldValue: obj1[key],
-        newValue: obj2[key],
-      });
-    }
-  });
-  return differences;
-};

src/pegout/components/PegoutForm.vue

@@ -116,7 +116,7 @@
       />
     </template>
     <quote-diff-dialog :show-dialog="showQuoteDiff"
-      :differences="quoteDifference" @continue="continueHandler"/>
+      :differences="quoteDifference" @continue="continueHandler" @cancel="clearForError" />
     <div id="recaptcha" class="g-recaptcha"
         :data-sitekey="flyoverService.siteKey"
         data-callback="onRecaptchaSuccess"
@@ -139,7 +139,8 @@ import {
 } from '@/common/store/helper';
 import { mdiArrowLeft, mdiArrowRight } from '@mdi/js';
 import {
-  FlyoverPegoutState, LiquidityProvider2WP, PegoutQuoteDbModel, PegOutTxState, QuotePegOut2WP,
+  FlyoverPegoutState, LiquidityProvider2WP, ObjectDifference,
+  PegoutQuoteDbModel, PegOutTxState, QuotePegOut2WP,
   SatoshiBig, TxInfo, TxStatusType, WeiBig,
 } from '@/common/types';
 import {
@@ -186,14 +187,15 @@ export default defineComponent({
     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 sendFlyoverTxWithConditionChanged = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_ACCEPT_AND_SEND_QUOTE_WITH_CHANGED_CONDITIONS);
     const initFlyoverTx = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_INIT);
     const initPegoutTx = useAction('pegOutTx', constants.PEGOUT_TX_INIT);
     const clearFlyoverState = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_CLEAR_STATE);
     const clearPegoutTx = useAction('pegOutTx', constants.PEGOUT_TX_CLEAR);
     const getPegoutQuotes = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_GET_QUOTES);
     const ethersProvider = useStateAttribute<providers.Web3Provider>('web3Session', 'ethersProvider');
     const quotes = useStateAttribute<Record<number, QuotePegOut2WP[]>>('flyoverPegout', 'quotes');
-    const quoteDifference = useStateAttribute<number>('flyoverPegout', 'difference');
+    const quoteDifference = useStateAttribute<ObjectDifference>('flyoverPegout', 'difference');
     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);
@@ -241,7 +243,7 @@ export default defineComponent({
       return '';
     });
 
-    const showQuoteDiff = computed(() => quoteDifference.value > quoteDiffPercentage
+    const showQuoteDiff = computed(() => quoteDifference.value.percentage > quoteDiffPercentage
       && diffShown.value);
 
     const validAmountToReceive = computed((): boolean => estimatedBtcToReceive.value.gt(0));
@@ -311,7 +313,7 @@ export default defineComponent({
     });
 
     const showCountdown = computed(() => {
-      if (sendingPegout.value) return true;
+      if (sendingPegout.value || diffShown.value) return true;
       return countdown.value === recaptchanNewTokenTime;
     });
 
@@ -512,13 +514,22 @@ export default defineComponent({
       }
     }
 
-    function continueHandler() {
-      setSelectedQuoteHash('');
-      selectedOption.value = '';
+    async function continueHandler() {
       diffShown.value = false;
+      pegOutFormState.value.send('loading');
+      try {
+        await sendFlyoverTxWithConditionChanged();
+      } catch (e) {
+        if (e instanceof ServiceError) {
+          handlePegoutError(e);
+        }
+      } finally {
+        pegOutFormState.value.send('fill');
+      }
     }
 
     function clearForError() {
+      diffShown.value = false;
       showTxErrorDialog.value = false;
       clearAmount.value = true;
     }

src/pegout/components/QuoteDiffDialog.vue

@@ -1,37 +1,59 @@
 <template>
-    <v-dialog v-model="showWarningMessage" width="870" persistent>
-      <v-card class="container dialog">
-        <v-row class="mx-0 mt-7 mb-2 d-flex justify-center">
-          <h2 class="bg-purple px-2">Review conditions</h2>
-        </v-row>
-        <v-col cols="12" align-self="center" class="pt-0 mt-3">
-          <v-col offset="1" cols="10">
-            <v-row>
-              <p class="justify-center">
-                Some values may have changed slightly. Please review before proceeding.
+    <v-dialog v-model="showWarningMessage" width="470" persistent>
+      <v-card>
+        <v-container>
+          <v-row class="d-flex justify-center my-4">
+            <h2 class="bg-purple px-2">Review conditions</h2>
+          </v-row>
+          <v-row class="d-flex justify-center">
+            <v-col>
+              <p class="text-center my-2">
+                Network conditions have changed by
+                <span class="text-purple font-weight-bold">
+                  {{ quoteDifference.percentage.toFixed(2) }}%
+                </span>.
+              </p>
+              <p class="text-center">
+                Fees have {{ increasedOrDecreasedString }} from
+                <span class="text-purple">
+                  {{ previousQuoteFees.toRBTCTrimmedString() }}
+                </span> to
+              </p>
+              <p class="text-center">
+                <span class="text-purple">
+                  {{ currentQuoteFees.toRBTCTrimmedString() }}
+                </span>
+                {{ environmentContext.getRbtcTicker() }}.
               </p>
-            </v-row>
-            <v-row>
-              <p class="justify-center">
-                Please note that these values are estimates based on current market values.
+              <p class="text-center text-body-2 my-4">
+                Please note that these values are estimates based on the network.
               </p>
-            </v-row>
-          </v-col>
-          <v-row class="mx-0 mb-8 mt-3" justify="space-around">
-            <v-col class="d-flex justify-center">
+            </v-col>
+          </v-row>
+          <v-row no-gutters class="ma-4">
+            <v-col class="d-flex justify-start py-0">
+              <v-btn-rsk
+                @click="cancel">
+                Cancel
+              </v-btn-rsk>
+            </v-col>
+            <v-col class="d-flex justify-end py-0">
               <v-btn-rsk @click="send">
-                <span>Ok</span>
+                <span>Ok, proceed anyway</span>
               </v-btn-rsk>
             </v-col>
           </v-row>
-        </v-col>
+        </v-container>
       </v-card>
     </v-dialog>
   </template>
 
 <script lang="ts">
-import { defineComponent, toRef } from 'vue';
+import { computed, defineComponent, toRef } from 'vue';
 import { mdiAlertOutline } from '@mdi/js';
+import { useStateAttribute } from '@/common/store/helper';
+import { ObjectDifference, ReducedQuote } from '@/common/types';
+import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
 
 export default defineComponent({
   name: 'QuoteDiffDialog',
@@ -43,16 +65,40 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const showWarningMessage = toRef(props, 'showDialog');
+    const quoteDifference = useStateAttribute<ObjectDifference>('flyoverPegout', 'difference');
+    const environmentContext = EnvironmentContextProviderService.getEnvironmentContext();
+
+    const getTotalFees = (quoteDiff: ReducedQuote) => (quoteDiff.gasFee
+      .plus(quoteDiff.callFee)
+      .plus(quoteDiff.productFeeAmount));
+
+    const previousQuoteFees = computed(() => (getTotalFees(quoteDifference.value
+      .previousQuote)));
+    const currentQuoteFees = computed(() => (getTotalFees(quoteDifference.value
+      .currentQuote)));
+    const increasedOrDecreasedString = computed(() => (previousQuoteFees.value
+      .lt(currentQuoteFees.value) ? 'increased' : 'decreased'));
 
     const send = () => {
       showWarningMessage.value = false;
       emit('continue');
     };
 
+    const cancel = () => {
+      showWarningMessage.value = false;
+      emit('cancel');
+    };
+
     return {
       send,
+      cancel,
       showWarningMessage,
       mdiAlertOutline,
+      quoteDifference,
+      previousQuoteFees,
+      currentQuoteFees,
+      increasedOrDecreasedString,
+      environmentContext,
     };
   },
 });