From 735a2f610181ab295c39ad7f43a3cfb34645350f Mon Sep 17 00:00:00 2001 From: WRadoslaw Date: Thu, 18 Apr 2024 14:15:10 +0200 Subject: [PATCH] New timeout step --- .../ChangeNowModal/ChangeNowModal.tsx | 28 ++++++++++++++++--- .../steps/TransactionTimeout.tsx | 22 +++++++++++++++ .../components/ChangeNowModal/steps/types.ts | 1 + 3 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 packages/atlas/src/components/ChangeNowModal/steps/TransactionTimeout.tsx diff --git a/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx b/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx index 225aafdca5..e6cb986d3b 100644 --- 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,8 +118,10 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => { + [ChangeNowModalStep.SWAP_EXPIRED, ChangeNowModalStep.TIMEOUT, ChangeNowModalStep.FAILED].includes(step) ? ( + ) : type === 'sell' ? ( 'Cashout JOY' ) : ( @@ -119,7 +129,14 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => { ) } 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) => { )} {step === ChangeNowModalStep.SWAP_EXPIRED && } + {step === ChangeNowModalStep.TIMEOUT && transactionData.current && ( + + )} {step === ChangeNowModalStep.FAILED && transactionData.current && ( )} diff --git a/packages/atlas/src/components/ChangeNowModal/steps/TransactionTimeout.tsx b/packages/atlas/src/components/ChangeNowModal/steps/TransactionTimeout.tsx new file mode 100644 index 0000000000..f1441908bc --- /dev/null +++ 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 ( + + + Transaction timed out + + + {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 this button. + + + ) +} diff --git a/packages/atlas/src/components/ChangeNowModal/steps/types.ts b/packages/atlas/src/components/ChangeNowModal/steps/types.ts index 21c3a16226..7e7c63e954 100644 --- 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, }