diff --git a/.env.local.test b/.env.local.test index 264ed68e..7af79fd0 100644 --- 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 index 25719c9e..7c8eba34 100644 --- 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 index deafaed1..8895cc84 100644 --- 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 index d8c7f8c8..acfe86ef 100644 --- 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 index fb959e85..c33a3b88 100644 --- 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 index 66c4d41d..8db7cf70 100644 --- 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 index 2f3b5482..26024c75 100644 --- 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 index c7ef40dc..315c0879 100644 --- 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 index 6c3640c1..d50745fe 100644 --- 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 = { [constants.SESSION_SET_ACCOUNT]: (state, account: string) => { @@ -58,7 +59,8 @@ export const mutations: MutationTree = { 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 index bb6dc9fb..c2b30870 100644 --- 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 index f6367787..9fb008b4 100644 --- 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 index 0791c80f..5d1b3a24 100644 --- 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 index eae1ff58..b2f66b1f 100644 --- 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('pegInTx', 'loadingFee'); const startCountdown = useAction('web3Session', constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME); const countdown = useStateAttribute('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 index 0067805d..47c5777d 100644 --- a/src/pegout/components/PegoutForm.vue +++ b/src/pegout/components/PegoutForm.vue @@ -213,6 +213,8 @@ export default defineComponent({ const liquidityProviders = useStateAttribute('flyoverPegout', 'liquidityProviders'); const startCountdown = useAction('web3Session', constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME); const countdown = useStateAttribute('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 index 5f53c6c9..6277d8ac 100644 --- a/src/pegout/components/PegoutOption.vue +++ b/src/pegout/components/PegoutOption.vue @@ -1,6 +1,6 @@