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

…rocessed
rsksmart · Dec 18, 2024 · e291cc8 · e291cc8
1 parent 769b6ef
commit e291cc8
Show file tree

Hide file tree

Showing 15 changed files with 43 additions and 14 deletions.
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/services/LeatherService.ts b/src/common/services/LeatherService.ts
@@ -100,7 +100,7 @@ export default class LeatherService extends WalletService {
           const { hex } = response.result;
           const signedPsbt = bitcoin.Psbt.fromHex(hex)
             .finalizeAllInputs()
-            .extractTransaction()
+            .extractTransaction(true)
             .toHex();
           resolve({ signedTx: signedPsbt });
         })

diff --git a/src/common/store/constants.ts b/src/common/store/constants.ts
@@ -389,5 +389,3 @@ export enum RejectedPegoutReasons {
   CALLER_CONTRACT = 'CALLER_CONTRACT',
   FEE_ABOVE_VALUE = 'FEE_ABOVE_VALUE',
 }
-
-export const RECAPTCHA_NEW_TOKEN_TIME = 30;
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 '../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)}`);
 
@@ -96,7 +97,7 @@ export const getClearSessionState = ():SessionState => (
     bitcoinPrice: 0,
     features: [],
     apiVersion: '',
-    grecaptchaCountdown: constants.RECAPTCHA_NEW_TOKEN_TIME,
+    grecaptchaCountdown: EnvironmentAccessorService.getEnvironmentVariables().grecaptchaTime,
     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: 30,
 };
 
 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"