From 6e85932cdfed530c0e5831e1b140b8c6be1d2e42 Mon Sep 17 00:00:00 2001 From: Anni Piragauta Date: Wed, 4 Dec 2024 13:37:39 -0500 Subject: [PATCH] fix: disabled fast option while recaptcah reloads, after 30 seconds --- src/common/router/index.ts | 2 +- src/common/store/constants.ts | 7 ++ src/common/store/session/actions.ts | 17 +++++ src/common/store/session/mutations.ts | 11 +++ src/common/types/session.ts | 2 + src/common/utils/common.ts | 2 + src/pegin/components/create/PegInForm.vue | 24 +++++-- src/pegout/components/PegoutForm.vue | 88 +++++++++++++---------- 8 files changed, 110 insertions(+), 43 deletions(-) diff --git a/src/common/router/index.ts b/src/common/router/index.ts index b630159c6..1a212b7b6 100644 --- a/src/common/router/index.ts +++ b/src/common/router/index.ts @@ -84,7 +84,7 @@ const routes: Readonly = [ path: '/pegin/:wallet/create', name: 'Create', component: () => import(/* webpackChunkName: "pegin-create" */ '../../pegin/views/Create.vue'), - beforeEnter: checkAcceptedTerms, + beforeEnter: [checkAcceptedTerms, checkFromRoute], }, { path: '/:type/success/tx/:txId/:amount/:confirmations', diff --git a/src/common/store/constants.ts b/src/common/store/constants.ts index 86cf4354c..ae8419a26 100644 --- a/src/common/store/constants.ts +++ b/src/common/store/constants.ts @@ -113,6 +113,8 @@ export const SESSION_ADD_TERMS_AND_CONDITIONS_ENABLED = 'SESSION_ADD_TERMS_AND_C export const SESSION_SWITCH_LOCALE = 'SESSION_SWITCH_LOCALE'; export const SESSION_ADD_FEATURES = 'SESSION_ADD_FEATURES'; export const SESSION_ADD_API_VERSION = 'SESSION_ADD_API_VERSION'; +export const SESSION_COUNTDOWN_GRECAPTCHA_TIME = 'SESSION_COUNTDOWN_GRECAPTCHA_TIME'; +export const SESSION_CLEAR_GRECAPTCHA_INTERVAL = 'SESSION_CLEAR_GRECAPTCHA_INTERVAL'; // Pegin tx Mutations export const PEGIN_TX_SET_ADDRESS_LIST = 'PEGIN_TX_SET_ADDRESS_LIST'; @@ -194,6 +196,9 @@ export const SESSION_SET_FEATURES = 'SESSION_SET_FEATURES'; export const SESSION_GET_RBTC_GAS_FEE = 'SESSION_GET_RBTC_GAS_FEE'; export const SESSION_SET_API_VERSION = 'SESSION_SET_API_VERSION'; export const SESSION_SETUP_EVENTS = 'SESSION_SETUP_EVENTS'; +export const SESSION_SET_DECREMENT_GRECAPTCHA_COUNTDOWN = 'SESSION_SET_GRECAPTCHA_COUNTDOWN'; +export const SESSION_SET_GRECAPTCHA_INTERVAL = 'SESSION_SET_GRECAPTCHA_INTERVAL'; +export const SESSION_RESET_GRECAPTCHA_COUNTDOWN = 'SESSION_RESET_GRECAPTCHA_COUNTDOWN'; // Pegin tx getters export const WALLET_NAME = 'WALLET_NAME'; @@ -383,3 +388,5 @@ 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/actions.ts b/src/common/store/session/actions.ts index 391d81f99..73c992bcc 100644 --- a/src/common/store/session/actions.ts +++ b/src/common/store/session/actions.ts @@ -140,4 +140,21 @@ export const actions: ActionTree = { dispatch(constants.WEB3_SESSION_GET_ACCOUNT); }); }, + [constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME]: ({ state, commit, dispatch }) => { + const intervalId = setInterval(() => { + if (state.grecaptchaCountdown > 0) { + commit(constants.SESSION_SET_DECREMENT_GRECAPTCHA_COUNTDOWN); + } else { + dispatch(constants.SESSION_CLEAR_GRECAPTCHA_INTERVAL); + } + }, 1000); + commit(constants.SESSION_SET_GRECAPTCHA_INTERVAL, intervalId); + }, + [constants.SESSION_CLEAR_GRECAPTCHA_INTERVAL]: ({ state, commit }) => { + const { grecaptchaIntervalId } = state; + if (grecaptchaIntervalId) { + clearInterval(grecaptchaIntervalId); + commit(constants.SESSION_RESET_GRECAPTCHA_COUNTDOWN); + } + }, }; diff --git a/src/common/store/session/mutations.ts b/src/common/store/session/mutations.ts index b54b3c9a1..6c3640c11 100644 --- a/src/common/store/session/mutations.ts +++ b/src/common/store/session/mutations.ts @@ -57,4 +57,15 @@ export const mutations: MutationTree = { [constants.SESSION_SET_API_VERSION]: (state, apiVersion: string) => { state.apiVersion = apiVersion; }, + [constants.SESSION_RESET_GRECAPTCHA_COUNTDOWN]: (state) => { + state.grecaptchaCountdown = constants.RECAPTCHA_NEW_TOKEN_TIME; + }, + [constants.SESSION_SET_DECREMENT_GRECAPTCHA_COUNTDOWN]: (state) => { + if (state.grecaptchaCountdown > 0) { + state.grecaptchaCountdown -= 1; + } + }, + [constants.SESSION_SET_GRECAPTCHA_INTERVAL]: (state, intervalId: number) => { + state.grecaptchaIntervalId = intervalId; + }, }; diff --git a/src/common/types/session.ts b/src/common/types/session.ts index c6a25c0bf..7f3d89b66 100644 --- a/src/common/types/session.ts +++ b/src/common/types/session.ts @@ -22,4 +22,6 @@ export interface SessionState { acceptedTerms?: boolean; features: Array; apiVersion: string; + grecaptchaCountdown: number; + grecaptchaIntervalId: number | undefined; } diff --git a/src/common/utils/common.ts b/src/common/utils/common.ts index 8bc22f430..f6367787e 100644 --- a/src/common/utils/common.ts +++ b/src/common/utils/common.ts @@ -96,6 +96,8 @@ export const getClearSessionState = ():SessionState => ( bitcoinPrice: 0, features: [], apiVersion: '', + grecaptchaCountdown: constants.RECAPTCHA_NEW_TOKEN_TIME, + grecaptchaIntervalId: undefined, } ); diff --git a/src/pegin/components/create/PegInForm.vue b/src/pegin/components/create/PegInForm.vue index aed16782d..a82eb2b1f 100644 --- a/src/pegin/components/create/PegInForm.vue +++ b/src/pegin/components/create/PegInForm.vue @@ -17,14 +17,20 @@
Select mode - + - + ('pegInTx', constants.PEGIN_TX_GET_SAFE_TX_FEE); const selectedAccountBalance = useGetter('pegInTx', constants.PEGIN_TX_GET_SELECTED_BALANCE); const loadingFee = useStateAttribute('pegInTx', 'loadingFee'); + const startCountdown = useAction('web3Session', constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME); + const countdown = useStateAttribute('web3Session', 'grecaptchaCountdown'); const enoughAmountFlyover = computed(() => { if (!selectedQuote.value) { @@ -166,6 +174,9 @@ export default defineComponent({ return quoteList; }); + const flyoverIsEnabled = computed(() => props.isFlyoverAvailable + && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME); + function back() { pegInFormState.value.send('loading'); clearQuotes(); @@ -193,6 +204,7 @@ export default defineComponent({ peginType: constants.peginType.POWPEG, }); } else { + startCountdown(); acceptQuote() .then((acceptedQuote) => { context.emit('createTx', { @@ -288,7 +300,8 @@ export default defineComponent({ return enoughAmountFlyover.value && !!flyoverPeginState.value.selectedQuoteHash && !!flyoverPeginState.value.rootstockRecipientAddress - && flyoverPeginState.value.rootstockRecipientAddress !== '0x'; + && flyoverPeginState.value.rootstockRecipientAddress !== '0x' + && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME; } return false; @@ -344,6 +357,9 @@ export default defineComponent({ validAmount, validAddress, sendTx, + flyoverIsEnabled, + countdown, + recaptchanNewTokenTime: constants.RECAPTCHA_NEW_TOKEN_TIME, }; }, }); diff --git a/src/pegout/components/PegoutForm.vue b/src/pegout/components/PegoutForm.vue index 72d18327d..85b61753c 100644 --- a/src/pegout/components/PegoutForm.vue +++ b/src/pegout/components/PegoutForm.vue @@ -21,39 +21,43 @@ ">Select Mode - - - - - - - - - - - + + + + + + + + + + + @@ -207,6 +211,8 @@ export default defineComponent({ const clearQuotes = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_CLEAR_QUOTES); const amountToTransfer = useStateAttribute('flyoverPegout', 'amountToTransfer'); const liquidityProviders = useStateAttribute('flyoverPegout', 'liquidityProviders'); + const startCountdown = useAction('web3Session', constants.SESSION_COUNTDOWN_GRECAPTCHA_TIME); + const countdown = useStateAttribute('web3Session', 'grecaptchaCountdown'); const pegoutQuotes = computed(() => { const quoteList: QuotePegOut2WP[] = []; @@ -297,10 +303,12 @@ export default defineComponent({ const isValid = computed(() => { if (selectedQuote.value === undefined) return !loadingQuotes.value && isReadyToCreate.value; - return !loadingQuotes.value && isFlyoverReady.value; + return !loadingQuotes.value && isFlyoverReady.value + && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME; }); - const flyoverResponded = computed(() => pegoutQuotes.value.length > 0 && props.flyoverEnabled); + const flyoverIsEnabled = computed(() => pegoutQuotes.value.length > 0 + && props.flyoverEnabled && countdown.value === constants.RECAPTCHA_NEW_TOKEN_TIME); function handlePegoutError(error: ServiceError) { txError.value = error; @@ -407,8 +415,10 @@ export default defineComponent({ : TxStatusType.PEGOUT.toLowerCase(); pegOutFormState.value.send('loading'); try { - if (quoteHash) await sendFlyoverTx(quoteHash); - else await sendTx(); + if (quoteHash) { + startCountdown(); + await sendFlyoverTx(quoteHash); + } else await sendTx(); ApiService.registerTx(quoteHash ? registerFlyover.value : registerPegout.value); changePage(type); } catch (e) { @@ -554,10 +564,12 @@ export default defineComponent({ nativeQuote, pegoutType: constants.pegoutType, isValid, - flyoverResponded, + flyoverIsEnabled, clearForError, clearAmount, checkValidAmount, + countdown, + recaptchanNewTokenTime: constants.RECAPTCHA_NEW_TOKEN_TIME, }; }, });