From 750e942f87e25956b2fdcbbe2dedfc4d8d8124a7 Mon Sep 17 00:00:00 2001
From: Anni Piragauta <anni.piragauta@iovlabs.org>
Date: Thu, 14 Nov 2024 13:44:05 -0500
Subject: [PATCH] fix: review conditions only if differnece is bigger than 2%

---
 src/pegout/components/PegoutForm.vue      | 23 +++++++++++++----------
 src/pegout/components/RbtcInputAmount.vue |  6 +++---
 src/pegout/store/FlyoverPegout/actions.ts |  9 ++++++---
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/pegout/components/PegoutForm.vue b/src/pegout/components/PegoutForm.vue
index 1681f5e4..eb728f80 100644
--- a/src/pegout/components/PegoutForm.vue
+++ b/src/pegout/components/PegoutForm.vue
@@ -123,7 +123,7 @@
 
 <script lang="ts">
 import {
-  computed, defineComponent, onBeforeMount, ref, watch,
+  computed, defineComponent, onBeforeMount, onMounted, ref, watch,
 } from 'vue';
 import * as constants from '@/common/store/constants';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
@@ -196,7 +196,8 @@ export default defineComponent({
     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 selectedOption = ref<string | undefined>('');
+    const selectedQuoteHash = useStateAttribute<string>('flyoverPegout', 'selectedQuoteHash');
+    const selectedOption = ref<string>('');
     const quoteDiffPercentage = EnvironmentAccessorService.getEnvironmentVariables()
       .flyoverPegoutDiffPercentage;
 
@@ -233,7 +234,7 @@ export default defineComponent({
     const isReadyToCreate = computed((): boolean => isEnoughBalance.value
         && !!account.value
         && validAmountToReceive.value
-        && selectedOption.value !== undefined);
+        && selectedOption.value === '');
 
     const isFlyoverReady = computed(() => {
       if (selectedOption.value && selectedQuote.value) {
@@ -282,7 +283,7 @@ export default defineComponent({
     }));
 
     const isValid = computed(() => {
-      if (selectedOption.value === '') return isReadyToCreate.value;
+      if (selectedQuote.value === undefined) return isReadyToCreate.value;
       return isFlyoverReady.value;
     });
 
@@ -347,7 +348,7 @@ export default defineComponent({
 
     async function send() {
       clearAmount.value = false;
-      const quoteHash = selectedOption.value;
+      const quoteHash = selectedQuoteHash.value || '';
       const type = quoteHash
         ? TxStatusType.FLYOVER_PEGOUT.toLowerCase()
         : TxStatusType.PEGOUT.toLowerCase();
@@ -404,7 +405,7 @@ export default defineComponent({
     }
 
     function executeRecaptcha() {
-      if (!window.grecaptcha.getResponse()) {
+      if (selectedQuoteHash.value) {
         window.grecaptcha.execute();
       } else {
         send();
@@ -417,7 +418,7 @@ export default defineComponent({
 
     function continueHandler() {
       setSelectedQuoteHash('');
-      selectedOption.value = undefined;
+      selectedOption.value = '';
       diffShown.value = false;
     }
 
@@ -433,9 +434,11 @@ export default defineComponent({
       }
     });
 
-    if (props.flyoverEnabled) {
-      appendRecaptcha(flyoverService.value.siteKey);
-    }
+    onMounted(() => {
+      if (props.flyoverEnabled) {
+        appendRecaptcha(flyoverService.value.siteKey);
+      }
+    });
 
     watch(account, clearState);
 
diff --git a/src/pegout/components/RbtcInputAmount.vue b/src/pegout/components/RbtcInputAmount.vue
index 85fa2ba4..336b463b 100644
--- a/src/pegout/components/RbtcInputAmount.vue
+++ b/src/pegout/components/RbtcInputAmount.vue
@@ -147,8 +147,6 @@ export default defineComponent({
         || safeAmount.value.lt(minValue);
     });
 
-    const clearProp = computed(() => props.clear);
-
     function blockLetterKeyDown(e: KeyboardEvent) {
       const allowedKeys = ['Backspace', 'Delete', 'Home', 'End', 'ArrowRight', 'ArrowLeft'];
       if (allowedKeys.includes(e.key)) return;
@@ -187,7 +185,9 @@ export default defineComponent({
     }
 
     watch(account, clearInput);
-    watch(clearProp, clearInput);
+    watch(() => props.clear, (flag) => {
+      if (flag) clearInput();
+    });
 
     return {
       amountStyle,
diff --git a/src/pegout/store/FlyoverPegout/actions.ts b/src/pegout/store/FlyoverPegout/actions.ts
index 9eb95b5a..af1e28ba 100644
--- a/src/pegout/store/FlyoverPegout/actions.ts
+++ b/src/pegout/store/FlyoverPegout/actions.ts
@@ -167,11 +167,14 @@ export const actions: ActionTree<FlyoverPegoutState, RootState> = {
           const minor = newQuoteTotalFee
             .gt(currentQuoteTotalFee) ? currentQuoteTotalFee : newQuoteTotalFee;
           const difference = ((largest.minus(minor)).mul('100')).div(largest.toRBTCString());
-          if (+difference.toRBTCString() <= EnvironmentAccessorService.getEnvironmentVariables()
-            .flyoverPegoutDiffPercentage) {
+          if (Number(difference.toRBTCString()) <= EnvironmentAccessorService
+            .getEnvironmentVariables().flyoverPegoutDiffPercentage) {
             commit(constants.FLYOVER_PEGOUT_SET_SELECTED_QUOTE, quote2wp.quoteHash);
           } else {
-            commit(constants.FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE, +difference.toRBTCString());
+            commit(
+              constants.FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE,
+              Number(difference.toRBTCString()),
+            );
           }
         });
         resolve();