fix: review conditions only if differnece is bigger than 2%

.env.local.test

@@ -27,4 +27,5 @@ VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
 VUE_APP_DEBUG_MODE='true'
 
 NODE_ENV=test
+VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2 # 2%
 

.github/workflows/deploy_MainNet_UI.yml

@@ -53,6 +53,7 @@ jobs:
           VUE_APP_AVERAGE_MINING_BLOCK=3
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xAA9cAf1e3967600578727F975F283446A3Da6612'
+          VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
           npm run-script build
 
       - name: Configure AWS credentials

.github/workflows/deploy_TestNet_UI.yml

@@ -53,6 +53,7 @@ jobs:
           VUE_APP_AVERAGE_MINING_BLOCK=3
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
+          VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
           npm run-script build
 
       - name: Configure AWS credentials

.github/workflows/deploy_staging_MainNet_UI.yml

@@ -53,6 +53,7 @@ jobs:
           VUE_APP_AVERAGE_MINING_BLOCK=3
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xAA9cAf1e3967600578727F975F283446A3Da6612'
+          VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
           npm run-script build
 
       - name: Configure AWS credentials

.github/workflows/deploy_staging_TestNet_UI.yml

@@ -53,6 +53,7 @@ jobs:
           VUE_APP_AVERAGE_MINING_BLOCK=3
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
+          VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
           npm run-script build
 
       - name: Configure AWS credentials

ENV_VARIABLES.md

@@ -21,6 +21,7 @@ The value of these variables are used in **environment-variables.ts** file.
 |VUE_APP_MIN_FEE_SAT_PER_BYTE_SLOW   | `1`                                          | Min fee rate (sats/byte) required to broadcast the transaction                                            |
 |VUE_APP_LBC_ADDRESS   | `0xc2A630c053D12D63d32b025082f6Ba268db18300` | Liquidity bridge contract address on the flyover protocol                                                 |
 |VUE_APP_DEBUG_MODE   | `false`                                      | enable developer messages for debuging                                                                    |
+|VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE   | `2`                                      | Defines quote difference percentage to 2% so it requieres the user to review condition only for a difference bigger that this percentage                                                                   |
 
 ## Example for .env.local.test file
 
@@ -42,4 +43,5 @@ VUE_APP_MIN_FEE_SAT_PER_BYTE_AVG=4
 VUE_APP_MIN_FEE_SAT_PER_BYTE_SLOW=1
 VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
 VUE_APP_DEBUG_MODE='false'
+VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
 ```

src/common/store/constants.ts

@@ -159,8 +159,7 @@ export const FLYOVER_PEGOUT_SET_CLEAR_STATE = 'FLYOVER_PEGOUT_SET_CLEAR_STATE';
 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';
+export const FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE = 'FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE';
 
 // Flyover PegIn mutations
 export const FLYOVER_PEGIN_SET_PROVIDERS = 'FLYOVER_PEGIN_SET_PROVIDERS';

src/common/types/Flyover/FlyoverPegout.ts

@@ -1,10 +1,10 @@
-import { LiquidityProvider2WP, ObjectDifference, QuotePegOut2WP } from '@/common/types';
+import { LiquidityProvider2WP, QuotePegOut2WP } from '@/common/types';
 import { FlyoverService } from '../../services';
 import SatoshiBig from '../SatoshiBig';
 import WeiBig from '../WeiBig';
 
 export interface FlyoverPegoutState {
-    differences: Array<ObjectDifference>;
+    difference: number;
     amountToTransfer: WeiBig;
     validAmount: boolean;
     btcRecipientAddress: string;
@@ -14,5 +14,4 @@ export interface FlyoverPegoutState {
     flyoverService: FlyoverService;
     txHash?: string;
     selectedQuoteHash: string;
-    isResponding: boolean;
 }

src/common/types/environment-variables.ts

@@ -45,6 +45,8 @@ export class EnvironmentVariables {
 
   public peginMinAmountAllowedInBtc: number;
 
+  public flyoverPegoutDiffPercentage: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(defaultValues: any = {}) {
     this.vueAppCoin = process.env.VUE_APP_COIN || defaultValues.vueAppCoin;
@@ -87,5 +89,7 @@ export class EnvironmentVariables {
     this.debugMode = process.env.VUE_APP_DEBUG_MODE === 'true' || defaultValues.debugMode;
     this.peginMinAmountAllowedInBtc = Number(process.env.VUE_APP_PEGIN_MIN_AMOUNT_ALLOWED_IN_BTC)
       || defaultValues.peginMinValue;
+    this.flyoverPegoutDiffPercentage = Number(process.env
+      .VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE) || defaultValues.flyoverPegoutDiffPercentage;
   }
 }

src/common/utils/common.ts

@@ -107,8 +107,7 @@ export const getClearFlyoverPegoutState = (): FlyoverPegoutState => ({
   quotes: {},
   flyoverService: markRaw(new FlyoverService()),
   selectedQuoteHash: '',
-  differences: [],
-  isResponding: false,
+  difference: 0,
 });
 
 export const getClearFlyoverPeginState = (): FlyoverPeginState => ({

src/main.ts

@@ -30,6 +30,7 @@ const defaultEnvironmentVariables = {
     slow: 12,
   },
   burnDustValue: 2000,
+  flyoverPegoutDiffPercentage: 2,
 };
 
 EnvironmentAccessorService.initializeEnvironmentVariables(defaultEnvironmentVariables);

src/pegout/components/PegoutForm.vue

@@ -12,7 +12,7 @@
       <v-col>
         <rbtc-input-amount
           @getQuotes="getQuotes"
-          :willReceive="amountToReceive" />
+          :clear="clearAmount" />
       </v-col>
     </v-row>
     <template v-if="showStep && !loadingQuotes">
@@ -40,7 +40,7 @@
           @openAddressDialog="showAddressDialog = true"
           @changeSelectedOption="changeSelectedOption"
           :selectedOption="selectedOption === quote.quoteHash"
-          :quote-differences="quoteDifferences"
+          :quote-difference="quoteDifference"
           />
       </v-col>
       <v-col cols="6">
@@ -51,7 +51,7 @@
           @openAddressDialog="showAddressDialog = true"
           @changeSelectedOption="changeSelectedOption"
           :selectedOption="selectedOption === ''"
-          :quote-differences="quoteDifferences"
+          :quote-differences="quoteDifference"
           />
       </v-col>
       </v-row>
@@ -87,33 +87,32 @@
       v-model="sendingPegout"
       class="align-center justify-center"
     >
-    <div class="d-flex flex-column align-center ga-2 rounded-circle bg-blur">
-      <v-progress-circular
-        :size="300"
-        :width="18"
-        color="warning"
-        indeterminate
-        >
-        <span class="pa-10 text-center text-balance">
-          Your transaction is being processed and will be sent to the network.
-        </span>
-      </v-progress-circular>
-      <p v-if="isLedgerConnected" class="text-warning">
-        See your Ledger device to confirm your transaction.
-      </p>
-    </div>
-
+      <div class="d-flex flex-column align-center ga-2 rounded-circle bg-blur">
+        <v-progress-circular
+          :size="300"
+          :width="18"
+          color="warning"
+          indeterminate
+          >
+          <span class="pa-10 text-center text-balance">
+            Your transaction is being processed and will be sent to the network.
+          </span>
+        </v-progress-circular>
+        <p v-if="isLedgerConnected" class="text-warning">
+          See your Ledger device to confirm your transaction.
+        </p>
+      </div>
     </v-overlay>
     <!-- Send tx error message -->
     <template v-if="showTxErrorDialog">
       <full-tx-error-dialog
       :showTxErrorDialog="showTxErrorDialog"
       :error="txError"
-      @closeErrorDialog="showTxErrorDialog = false"
+      @closeErrorDialog="clearForError"
       />
     </template>
     <quote-diff-dialog :show-dialog="showQuoteDiff"
-      :differences="quoteDifferences" @continue="continueHandler"/>
+      :differences="quoteDifference" @continue="continueHandler"/>
     <div id="recaptcha" class="g-recaptcha"
         :data-sitekey="flyoverService.siteKey"
         data-callback="onRecaptchaSuccess"
@@ -136,7 +135,7 @@ import {
 } from '@/common/store/helper';
 import { mdiArrowLeft, mdiArrowRight } from '@mdi/js';
 import {
-  FlyoverPegoutState, ObjectDifference, PegOutTxState, QuotePegOut2WP,
+  FlyoverPegoutState, PegOutTxState, QuotePegOut2WP,
   SatoshiBig, TxInfo, TxStatusType, WeiBig,
 } from '@/common/types';
 import {
@@ -146,6 +145,7 @@ import router from '@/common/router';
 import ApiService from '@/common/services/ApiService';
 import { FlyoverService } from '@/common/services';
 import FullTxErrorDialog from '@/common/components/exchange/FullTxErrorDialog.vue';
+import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 import PegoutOption from './PegoutOption.vue';
 
 export default defineComponent({
@@ -173,6 +173,7 @@ export default defineComponent({
     const showStep = ref(false);
     const isWalletAuthorizedToSign = ref(true);
     const diffShown = ref(false);
+    const clearAmount = ref(false);
 
     const pegOutTxState = useState<PegOutTxState>('pegOutTx');
     const flyoverPegoutState = useState<FlyoverPegoutState>('flyoverPegout');
@@ -188,17 +189,17 @@ export default defineComponent({
     const getPegoutQuotes = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_GET_QUOTES);
     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 quoteDifference = useStateAttribute<number>('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);
     const isLedgerConnected = useGetter<boolean>('web3Session', constants.SESSION_IS_LEDGER_CONNECTED);
     const isTrezorConnected = useGetter<boolean>('web3Session', constants.SESSION_IS_TREZOR_CONNECTED);
     const isMetamaskConnected = useGetter<boolean>('web3Session', constants.SESSION_IS_METAMASK_CONNECTED);
     const setSelectedQuoteHash = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_SET_SELECTED_QUOTE_HASH);
-    const getSelectedQuote = useGetter<QuotePegOut2WP>('flyoverPegout', constants.FLYOVER_PEGOUT_GET_SELECTED_QUOTE);
     const selectedOption = ref<string | undefined>('');
+    const quoteDiffPercentage = EnvironmentAccessorService.getEnvironmentVariables()
+      .flyoverPegoutDiffPercentage;
 
     const pegoutQuotes = computed(() => {
       const quoteList: QuotePegOut2WP[] = [];
@@ -225,7 +226,8 @@ export default defineComponent({
       return '';
     });
 
-    const showQuoteDiff = computed(() => quoteDifferences.value.length > 0 && !diffShown.value);
+    const showQuoteDiff = computed(() => quoteDifference.value > quoteDiffPercentage
+      && diffShown.value);
 
     const validAmountToReceive = computed((): boolean => estimatedBtcToReceive.value.gt(0));
 
@@ -343,23 +345,24 @@ export default defineComponent({
     }));
 
     async function send() {
+      clearAmount.value = false;
       const quoteHash = selectedOption.value;
       const type = quoteHash
         ? TxStatusType.FLYOVER_PEGOUT.toLowerCase()
         : TxStatusType.PEGOUT.toLowerCase();
       pegOutFormState.value.send('loading');
       try {
-        if (quoteHash) {
-          await sendFlyoverTx(quoteHash);
-        } else {
-          await sendTx();
-        }
+        if (quoteHash) await sendFlyoverTx(quoteHash);
+        else await sendTx();
         ApiService.registerTx(quoteHash ? registerFlyover.value : registerPegout.value);
         changePage(type);
       } catch (e) {
         if (e instanceof ServiceError) {
           handlePegoutError(e);
         }
+        if ((e as Error).toString().includes('Quote differences')) {
+          diffShown.value = true;
+        }
       } finally {
         pegOutFormState.value.send('fill');
       }
@@ -372,6 +375,11 @@ export default defineComponent({
       initPegoutTx();
       selectedOption.value = '';
       showStep.value = false;
+      diffShown.value = false;
+      showTxErrorDialog.value = false;
+      showAddressDialog.value = false;
+      loadingQuotes.value = false;
+      isWalletAuthorizedToSign.value = true;
     }
 
     function back():void {
@@ -406,21 +414,16 @@ export default defineComponent({
       showStep.value = true;
     }
 
-    const amountToReceive = computed(() => {
-      let finalAmount = '';
-      if (selectedOption.value) {
-        finalAmount = getSelectedQuote.value?.quote.value.toRBTCTrimmedString();
-      } else {
-        finalAmount = new WeiBig(estimatedBtcToReceive.value.toBTCString(), 'rbtc')
-          .minus(pegOutTxState.value.calculatedFee).toRBTCTrimmedString();
-      }
-      return new SatoshiBig(finalAmount, 'btc').toBTCTrimmedString();
-    });
-
     function continueHandler() {
       setSelectedQuoteHash('');
       selectedOption.value = undefined;
-      diffShown.value = true;
+      diffShown.value = false;
+    }
+
+    function clearForError() {
+      showTxErrorDialog.value = false;
+      clearAmount.value = true;
+      showStep.value = false;
     }
 
     onBeforeMount(() => {
@@ -452,21 +455,21 @@ export default defineComponent({
       loadingQuotes,
       sendingPegout,
       showStep,
-      quoteDifferences,
+      quoteDifference,
       showQuoteDiff,
       mdiArrowLeft,
       selectedOption,
       changeSelectedOption,
       mdiArrowRight,
-      amountToReceive,
       isFlyoverReady,
       continueHandler,
       flyoverService,
       executeRecaptcha,
       nativeQuote,
-      isFlyoverResponding,
       pegoutType: constants.pegoutType,
       isValid,
+      clearForError,
+      clearAmount,
     };
   },
 });