fix: WT-2085 - patched onramp (#1409)

immutable · Jan 24, 2024 · d08a6b0 · d08a6b0
1 parent d582e00
commit d08a6b0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git 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
@@ -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<string>('');
 
+  const eventTimer = useRef<number | undefined>();
+
   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,