diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/TransakEvents.ts b/packages/checkout/widgets-lib/src/widgets/on-ramp/TransakEvents.ts index e0a9c02fb3..255ca39f54 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/TransakEvents.ts +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/TransakEvents.ts @@ -1,6 +1,6 @@ export enum TransakEvents { TRANSAK_WIDGET_OPEN = 'TRANSAK_WIDGET_OPEN', // transak widget initialised and loaded - TRANSAK_ORDER_CREATED = 'TRANSAK_ORDER_CREATED', // order created and awaiting payment from payment + TRANSAK_ORDER_CREATED = 'TRANSAK_ORDER_CREATED', // order created and awaiting payment from payment <= 3DS check happens after this event TRANSAK_ORDER_SUCCESSFUL = 'TRANSAK_ORDER_SUCCESSFUL', // order successfully submitted and completed TRANSAK_ORDER_FAILED = 'TRANSAK_ORDER_FAILED', // order processing failed } diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx index 8ef2b49a05..86cf2fa4eb 100644 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx +++ b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OnRampMain.tsx @@ -1,7 +1,7 @@ import { Passport } from '@imtbl/passport'; import { Box } from '@biom3/react'; import { - useContext, useEffect, useMemo, useState, + useContext, useEffect, useMemo, useRef, useState, } from 'react'; import { ExchangeType } from '@imtbl/checkout-sdk'; import url from 'url'; @@ -21,7 +21,7 @@ import { EventTargetContext } from '../../../context/event-target-context/EventT import { TRANSAK_ORIGIN } from '../../../components/Transak/useTransakEvents'; const transakIframeId = 'transak-iframe'; -const IN_PROGRESS_VIEW_DELAY_MS = 1200; +const IN_PROGRESS_VIEW_DELAY_MS = 6000; // 6 second interface OnRampProps { showIframe: boolean; tokenAmount?: string; @@ -39,6 +39,8 @@ export function OnRampMain({ const { viewState, viewDispatch } = useContext(ViewContext); const [widgetUrl, setWidgetUrl] = useState(''); + const eventTimer = useRef(); + const isPassport = !!passport && (provider?.provider as any)?.isPassport; const showBackButton = useMemo(() => viewState.history.length > 2 @@ -105,6 +107,8 @@ export function OnRampMain({ } }; const transakEventHandler = (event: TransakEventData) => { + if (eventTimer.current) clearTimeout(eventTimer.current); + if (event.event_id === TransakEvents.TRANSAK_WIDGET_OPEN) { viewDispatch({ payload: { @@ -121,7 +125,11 @@ export function OnRampMain({ return; } - if (event.event_id === TransakEvents.TRANSAK_ORDER_CREATED) { + if (event.event_id === TransakEvents.TRANSAK_ORDER_SUCCESSFUL + && event.data.status === TransakStatuses.PROCESSING) { + // this handles 3DS -- once the user has completed the verification, + // kick off teh loading screen and then fake a IN_PROGRESS_VIEW_DELAY_MS + // delay before showing the IN_PROGRESS screen viewDispatch({ payload: { type: ViewActions.UPDATE_VIEW, @@ -130,12 +138,7 @@ export function OnRampMain({ }, }, }); - return; - } - - if (event.event_id === TransakEvents.TRANSAK_ORDER_SUCCESSFUL - && event.data.status === TransakStatuses.PROCESSING) { - setTimeout(() => { + eventTimer.current = window.setTimeout(() => { viewDispatch({ payload: { type: ViewActions.UPDATE_VIEW,