fix: not show countdown for grecaptcha while a transaction is being processed

annipi · annipi · commit 58dd7fb502ac · 2024-12-19T13:41:22.000-05:00
diff --git a/.env.local.test b/.env.local.test
@@ -27,5 +27,6 @@ VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
 VUE_APP_DEBUG_MODE='true'
 
 NODE_ENV=test
-VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2 # 2%
+VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
+VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
 
diff --git a/.github/workflows/deploy_MainNet_UI.yml b/.github/workflows/deploy_MainNet_UI.yml
@@ -54,6 +54,7 @@ jobs:
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xAA9cAf1e3967600578727F975F283446A3Da6612'
           VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
+          VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           npm run-script build
 
       - name: Configure AWS credentials
diff --git a/.github/workflows/deploy_TestNet_UI.yml b/.github/workflows/deploy_TestNet_UI.yml
@@ -54,6 +54,7 @@ jobs:
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
           VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
+          VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           npm run-script build
 
       - name: Configure AWS credentials
diff --git a/.github/workflows/deploy_staging_MainNet_UI.yml b/.github/workflows/deploy_staging_MainNet_UI.yml
@@ -54,6 +54,7 @@ jobs:
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xAA9cAf1e3967600578727F975F283446A3Da6612'
           VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
+          VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           npm run-script build
 
       - name: Configure AWS credentials
diff --git a/.github/workflows/deploy_staging_TestNet_UI.yml b/.github/workflows/deploy_staging_TestNet_UI.yml
@@ -54,6 +54,7 @@ jobs:
           VUE_APP_SLOW_MINING_BLOCK=5
           VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
           VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=20
+          VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           npm run-script build
 
       - name: Configure AWS credentials
diff --git a/ENV_VARIABLES.md b/ENV_VARIABLES.md
@@ -22,6 +22,7 @@ The value of these variables are used in **environment-variables.ts** file.
 |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                                                                   |
+|VUE_APP_RECAPTCHA_NEW_TOKEN_TIME   | `30`                                      |  Specifies the time (in seconds) to temporarily disable the flyover between new transactions. This accounts for the time required by Google reCAPTCHA to regenerate a challenge token |
 
 ## Example for .env.local.test file
 
diff --git a/src/common/store/session/mutations.ts b/src/common/store/session/mutations.ts
@@ -5,6 +5,7 @@ import { TransactionType, SessionState } from '@/common/types/session';
 import { getClearSessionState } from '@/common/utils';
 import { providers } from 'ethers';
 import i18n from '@/i18n';
+import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 
 export const mutations: MutationTree<SessionState> = {
   [constants.SESSION_SET_ACCOUNT]: (state, account: string) => {
@@ -58,7 +59,8 @@ export const mutations: MutationTree<SessionState> = {
     state.apiVersion = apiVersion;
   },
   [constants.SESSION_RESET_GRECAPTCHA_COUNTDOWN]: (state) => {
-    state.grecaptchaCountdown = constants.RECAPTCHA_NEW_TOKEN_TIME;
+    state.grecaptchaCountdown = EnvironmentAccessorService.getEnvironmentVariables()
+      .grecaptchaTime;
   },
   [constants.SESSION_SET_DECREMENT_GRECAPTCHA_COUNTDOWN]: (state) => {
     if (state.grecaptchaCountdown > 0) {
diff --git a/src/common/types/environment-variables.ts b/src/common/types/environment-variables.ts
@@ -50,6 +50,8 @@ export class EnvironmentVariables {
 
   public flyoverPegoutDiffPercentage: number;
 
+  public grecaptchaTime: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(defaultValues: any = {}) {
     this.vueAppCoin = process.env.VUE_APP_COIN || defaultValues.vueAppCoin;
@@ -96,6 +98,8 @@ export class EnvironmentVariables {
       || defaultValues.flyoverGetProvidersTimeout;
     this.flyoverPegoutDiffPercentage = Number(process.env
       .VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE) || defaultValues.flyoverPegoutDiffPercentage;
+    this.grecaptchaTime = Number(process.env.VUE_APP_RECAPTCHA_NEW_TOKEN_TIME)
+      || defaultValues.grecaptchaTime;
   }
 
   public get chainId(): number {
diff --git a/src/common/utils/common.ts b/src/common/utils/common.ts
@@ -9,6 +9,7 @@ import {
 import { FlyoverService } from '@/common/services';
 import { markRaw } from 'vue';
 import * as constants from '@/common/store/constants';
+import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 
 export const getChunkedValue = (value: string, maxLength: number) => (value.length < maxLength ? value : `${value.substr(0, maxLength / 2)}...${value.substr(value.length - maxLength / 2, value.length)}`);
 
@@ -83,7 +84,7 @@ export const getClearPegoutTxState = (): PegOutTxState => ({
   selectedFee: BITCOIN_AVERAGE_FEE_LEVEL,
 });
 
-export const getClearSessionState = ():SessionState => (
+export const getClearSessionState = (): SessionState => (
   {
     account: undefined,
     ethersProvider: undefined,
@@ -96,7 +97,8 @@ export const getClearSessionState = ():SessionState => (
     bitcoinPrice: 0,
     features: [],
     apiVersion: '',
-    grecaptchaCountdown: constants.RECAPTCHA_NEW_TOKEN_TIME,
+    grecaptchaCountdown: EnvironmentAccessorService.getEnvironmentVariables().grecaptchaTime
+        ?? constants.RECAPTCHA_NEW_TOKEN_TIME,
     grecaptchaIntervalId: undefined,
   }
 );
diff --git a/src/main.ts b/src/main.ts
@@ -32,6 +32,7 @@ const defaultEnvironmentVariables = {
   burnDustValue: 2000,
   flyoverGetProvidersTimeout: 5000,
   flyoverPegoutDiffPercentage: 2,
+  grecaptchaTime: constants.RECAPTCHA_NEW_TOKEN_TIME,
 };
 
 EnvironmentAccessorService.initializeEnvironmentVariables(defaultEnvironmentVariables);
diff --git a/src/pegin/components/create/PegInForm.vue b/src/pegin/components/create/PegInForm.vue
@@ -107,6 +107,7 @@ import { FlyoverService } from '@/common/services';
 import FullTxErrorDialog from '@/common/components/exchange/FullTxErrorDialog.vue';
 import RskDestinationAddress from '@/pegin/components/create/RskDestinationAddress.vue';
 import { AcceptedQuote } from '@rsksmart/flyover-sdk';
+import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 
 export default defineComponent({
   name: 'PegInForm',
@@ -152,6 +153,8 @@ export default defineComponent({
     const loadingFee = useStateAttribute<boolean>('pegInTx', 'loadingFee');
     const startCountdown = useAction('web3Session', constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME);
     const countdown = useStateAttribute<number>('web3Session', 'grecaptchaCountdown');
+    const recaptchanNewTokenTime = EnvironmentAccessorService.getEnvironmentVariables()
+      .grecaptchaTime;
 
     const enoughAmountFlyover = computed(() => {
       if (!selectedQuote.value) {
@@ -161,6 +164,8 @@ export default defineComponent({
       return selectedAccountBalance.value?.gte(fullAmount);
     });
 
+    const sendingPegin = computed(():boolean => pegInFormState.value.matches(['loading']));
+
     const peginQuotes = computed(() => {
       if (!props.isFlyoverAvailable) {
         return [];
@@ -174,8 +179,13 @@ export default defineComponent({
       return quoteList;
     });
 
-    const flyoverIsEnabled = computed(() => props.isFlyoverAvailable
-      && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME);
+    const flyoverIsEnabled = computed(() => {
+      if (props.isFlyoverAvailable) {
+        if (sendingPegin.value) return true;
+        return countdown.value === recaptchanNewTokenTime;
+      }
+      return false;
+    });
 
     function back() {
       pegInFormState.value.send('loading');
@@ -300,7 +310,7 @@ export default defineComponent({
           && !!flyoverPeginState.value.selectedQuoteHash
           && !!flyoverPeginState.value.rootstockRecipientAddress
           && flyoverPeginState.value.rootstockRecipientAddress !== '0x'
-          && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME;
+          && countdown.value === recaptchanNewTokenTime;
       }
 
       return false;
@@ -358,7 +368,7 @@ export default defineComponent({
       sendTx,
       flyoverIsEnabled,
       countdown,
-      recaptchanNewTokenTime: constants.RECAPTCHA_NEW_TOKEN_TIME,
+      recaptchanNewTokenTime,
     };
   },
 });
diff --git a/src/pegout/components/PegoutForm.vue b/src/pegout/components/PegoutForm.vue
@@ -213,6 +213,8 @@ export default defineComponent({
     const liquidityProviders = useStateAttribute<LiquidityProvider2WP[]>('flyoverPegout', 'liquidityProviders');
     const startCountdown = useAction('web3Session', constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME);
     const countdown = useStateAttribute<number>('web3Session', 'grecaptchaCountdown');
+    const recaptchanNewTokenTime = EnvironmentAccessorService.getEnvironmentVariables()
+      .grecaptchaTime;
 
     const pegoutQuotes = computed(() => {
       const quoteList: QuotePegOut2WP[] = [];
@@ -305,11 +307,16 @@ export default defineComponent({
     const isValid = computed(() => {
       if (selectedQuote.value === undefined) return !loadingQuotes.value && isReadyToCreate.value;
       return !loadingQuotes.value && isFlyoverReady.value
-        && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME;
+        && countdown.value === recaptchanNewTokenTime;
+    });
+
+    const showCountdown = computed(() => {
+      if (sendingPegout.value) return true;
+      return countdown.value === recaptchanNewTokenTime;
     });
 
     const flyoverIsEnabled = computed(() => pegoutQuotes.value.length > 0
-      && props.flyoverEnabled && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME);
+      && props.flyoverEnabled && showCountdown.value);
 
     function handlePegoutError(error: ServiceError) {
       txError.value = error;
@@ -569,7 +576,7 @@ export default defineComponent({
       clearAmount,
       checkValidAmount,
       countdown,
-      recaptchanNewTokenTime: constants.RECAPTCHA_NEW_TOKEN_TIME,
+      recaptchanNewTokenTime,
     };
   },
 });
diff --git a/src/pegout/components/PegoutOption.vue b/src/pegout/components/PegoutOption.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card :ripple="false" rounded="lg" flat variant="outlined"
-    @click="selectOption" height="400px" :disabled="flyoverNotAvailable"
+    @click="selectOption" :disabled="flyoverNotAvailable"
     :class="{ 'selected': selectedOption, 'not-available': flyoverNotAvailable }"
     class="pa-8">
     <div v-if="flyoverNotAvailable"
