New timeout step

WRadoslaw · Apr 18, 2024 · 735a2f6 · 735a2f6
1 parent 2b1ee11
commit 735a2f6
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 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/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,
 }