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}