🥉 Change now modal fixes v3 (Joystream#6193)

* New timeout step * Show steps on mobile and show timeout step if tx is longer than 26min
WRadoslaw · Apr 22, 2024 · 00b3207 · 00b3207
1 parent 5d6c220
commit 00b3207
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx b/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx
@@ -4,6 +4,7 @@ import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { SvgAlertsInformative32, SvgLogoChangenow } from '@/assets/icons'
 import { FailedStep } from '@/components/ChangeNowModal/steps/FailedStep'
 import { SwapExpired } from '@/components/ChangeNowModal/steps/SwapExpired'
+import { TransactionTimeout } from '@/components/ChangeNowModal/steps/TransactionTimeout'
 import { Spinner } from '@/components/_loaders/Spinner'
 import { DialogButtonProps } from '@/components/_overlays/Dialog'
 import { DialogModal } from '@/components/_overlays/DialogModal'
@@ -61,7 +62,14 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => {
   }, [step, type])
 
   const secondaryButton = useMemo(() => {
-    if ([ChangeNowModalStep.INFO, ChangeNowModalStep.SWAP_EXPIRED, ChangeNowModalStep.FAILED].includes(step)) {
+    if (
+      [
+        ChangeNowModalStep.INFO,
+        ChangeNowModalStep.SWAP_EXPIRED,
+        ChangeNowModalStep.TIMEOUT,
+        ChangeNowModalStep.FAILED,
+      ].includes(step)
+    ) {
       return {
         text: 'Cancel',
         onClick: () => onClose(),
@@ -110,16 +118,25 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => {
     <DialogModal
       title={
         (type === 'topup' && step === ChangeNowModalStep.INFO) ||
-        [ChangeNowModalStep.SWAP_EXPIRED, ChangeNowModalStep.FAILED].includes(step) ? (
-          <StyledSvgAlertsInformative32 isFailed={step === ChangeNowModalStep.FAILED} />
+        [ChangeNowModalStep.SWAP_EXPIRED, ChangeNowModalStep.TIMEOUT, ChangeNowModalStep.FAILED].includes(step) ? (
+          <StyledSvgAlertsInformative32
+            isFailed={[ChangeNowModalStep.FAILED, ChangeNowModalStep.TIMEOUT].includes(step)}
+          />
         ) : type === 'sell' ? (
           'Cashout JOY'
         ) : (
           'Buy JOY'
         )
       }
       show
-      dividers={![ChangeNowModalStep.INFO, ChangeNowModalStep.SWAP_EXPIRED, ChangeNowModalStep.FAILED].includes(step)}
+      dividers={
+        ![
+          ChangeNowModalStep.INFO,
+          ChangeNowModalStep.SWAP_EXPIRED,
+          ChangeNowModalStep.FAILED,
+          ChangeNowModalStep.TIMEOUT,
+        ].includes(step)
+      }
       onExitClick={step === ChangeNowModalStep.SWAP_EXPIRED ? undefined : () => onClose()}
       primaryButton={
         primaryButtonProps
@@ -142,6 +159,9 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => {
         <ProgressStep {...commonProps} transactionData={transactionData.current} />
       )}
       {step === ChangeNowModalStep.SWAP_EXPIRED && <SwapExpired />}
+      {step === ChangeNowModalStep.TIMEOUT && transactionData.current && (
+        <TransactionTimeout transactionId={transactionData.current.id} />
+      )}
       {step === ChangeNowModalStep.FAILED && transactionData.current && (
         <FailedStep {...commonProps} transactionData={transactionData.current} />
       )}

diff --git 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 = ({
         <Text variant="t200" as="p" color="colorText">
           Exchange ID:
         </Text>
-        <TextButton
-          variant="secondary"
-          onClick={() => window.open(`https://changenow.io/exchange/txs/${transactionData.id}`, '_blank')}
-        >
+        <TextButton variant="secondary" to={`https://changenow.io/exchange/txs/${transactionData.id}`}>
           {transactionData.id}
         </TextButton>
       </FlexBox>

diff --git a/packages/atlas/src/components/ChangeNowModal/steps/TransactionTimeout.tsx b/packages/atlas/src/components/ChangeNowModal/steps/TransactionTimeout.tsx
@@ -0,0 +1,22 @@
+import { FlexBox } from '@/components/FlexBox'
+import { Text } from '@/components/Text'
+import { TextButton } from '@/components/_buttons/Button'
+import { atlasConfig } from '@/config'
+
+type TransactionTimeoutProps = {
+  transactionId: string
+}
+export const TransactionTimeout = ({ transactionId }: TransactionTimeoutProps) => {
+  return (
+    <FlexBox flow="column">
+      <Text variant="h500" as="h3" color="colorTextError">
+        Transaction timed out
+      </Text>
+      <Text variant="t200" as="p" color="colorText">
+        {atlasConfig.general.appName} did not receive any transaction status update from ChangeNOW for 25 minutes.
+        Transaction might have succeeded and we just don't know about it. Double check transaction status on ChangeNOW
+        site by clicking <TextButton to={`https://changenow.io/exchange/txs/${transactionId}`}>this button</TextButton>.
+      </Text>
+    </FlexBox>
+  )
+}
diff --git a/packages/atlas/src/components/ChangeNowModal/steps/types.ts b/packages/atlas/src/components/ChangeNowModal/steps/types.ts
@@ -6,6 +6,7 @@ export enum ChangeNowModalStep {
   SUMMARY,
   PROGRESS,
   SWAP_EXPIRED,
+  TIMEOUT,
   FAILED,
 }