diff --git a/packages/atlas/src/components/ChangeNowModal/steps/ProgressStep.tsx b/packages/atlas/src/components/ChangeNowModal/steps/ProgressStep.tsx index a077e78ca6..84ea80a374 100644 --- a/packages/atlas/src/components/ChangeNowModal/steps/ProgressStep.tsx +++ b/packages/atlas/src/components/ChangeNowModal/steps/ProgressStep.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled' import QRCode from 'qrcode.react' -import { useMemo, useState } from 'react' +import { useMemo, useRef, useState } from 'react' import { useQuery } from 'react-query' import { SvgActionChevronR, SvgAlertsSuccess24 } from '@/assets/icons' @@ -64,6 +64,7 @@ export const ProgressStep = ({ const steps = isSellingJoy ? sellSteps : buySteps const { trackChangenowTokenSold, trackChangenowTokenBought } = useSegmentAnalytics() const { memberId } = useUser() + const mountTimestamp = useRef(Date.now()) const { data } = useQuery( ['getTransactionStatus', transactionData.id], () => changeNowService.getTransactionStatus(transactionData.id).then((res) => res.data), @@ -73,6 +74,12 @@ export const ProgressStep = ({ if (data.status === 'failed') { goToStep(ChangeNowModalStep.FAILED) } + + // if transaction doesn't fail or succeed after 26 min + // the issue might be on API side, we should not waste more time waiting + if (retry && Date.now() - mountTimestamp.current > 26 * 60 * 1000) { + goToStep(ChangeNowModalStep.TIMEOUT) + } }, } ) @@ -160,6 +167,7 @@ export const ProgressStep = ({ hideStepNumberText={currentStep !== idx} title={currentStep === idx ? stepText : ''} variant={currentStep < idx ? 'future' : currentStep === idx ? 'current' : 'completed'} + showOtherStepsOnMobile /> ))} @@ -172,10 +180,7 @@ export const ProgressStep = ({ Exchange ID: - window.open(`https://changenow.io/exchange/txs/${transactionData.id}`, '_blank')} - > + {transactionData.id}