[NO CHANGELOG][Checkout Widget] fix: Events type (#2111)

packages/checkout/sdk/src/postMessageHandler/postMessageEventTypes.ts

@@ -1,3 +1,6 @@
+import { IMTBLWidgetEvents } from '../widgets/definitions/events/widgets';
+import { WidgetEventData, WidgetType } from '../widgets/definitions/types';
+
 export enum PostMessageHandlerEventType {
   SYN = 'IMTBL_POST_MESSAGE_SYN',
   ACK = 'IMTBL_POST_MESSAGE_ACK',
@@ -11,6 +14,40 @@ export type PostMessageProviderRelayData = any;
 
 export type PostMessageEIP6963Data = any;
 
-export type PostMessagePayload =
-  | PostMessageProviderRelayData
-  | PostMessageEIP6963Data;
+export type PostMessageWidgetEventData<
+  T extends WidgetType = WidgetType.CHECKOUT,
+> = {
+  type: IMTBLWidgetEvents.IMTBL_CHECKOUT_WIDGET_EVENT;
+  detail: {
+    [K in keyof WidgetEventData[T]]: {
+      type: K;
+      data: WidgetEventData[T][K];
+    };
+  }[keyof WidgetEventData[T]];
+};
+
+export type PostMessageData =
+  | {
+    type: PostMessageHandlerEventType.SYN;
+    payload: any;
+  }
+  | {
+    type: PostMessageHandlerEventType.ACK;
+    payload: any;
+  }
+  | {
+    type: PostMessageHandlerEventType.PROVIDER_RELAY;
+    payload: PostMessageProviderRelayData;
+  }
+  | {
+    type: PostMessageHandlerEventType.PROVIDER_UPDATED;
+    payload: any;
+  }
+  | {
+    type: PostMessageHandlerEventType.EIP_6963_EVENT;
+    payload: PostMessageEIP6963Data;
+  }
+  | {
+    type: PostMessageHandlerEventType.WIDGET_EVENT;
+    payload: PostMessageWidgetEventData;
+  };

packages/checkout/sdk/src/postMessageHandler/postMessageHandler.ts

@@ -1,6 +1,6 @@
 import {
   PostMessageHandlerEventType,
-  PostMessagePayload,
+  PostMessageData,
 } from './postMessageEventTypes';
 
 export type PostMessageHandlerConfiguration = {
@@ -9,11 +9,6 @@ export type PostMessageHandlerConfiguration = {
   eventSource?: WindowProxy;
 };
 
-export type PostMessageData = {
-  type: PostMessageHandlerEventType;
-  payload: PostMessagePayload;
-};
-
 export class PostMessageHandler {
   private init: boolean = false;
 

packages/checkout/sdk/src/widgets/definitions/events/checkout.ts

@@ -1,5 +1,4 @@
 import { Web3Provider } from '@ethersproject/providers';
-import { CheckoutFlowType } from '../parameters/checkout';
 import { ConnectionFailed, ConnectionSuccess } from './connect';
 import {
   SaleFailed,
@@ -30,6 +29,9 @@ export enum CheckoutEventType {
 }
 
 export enum CheckoutSuccessEventType {
+  SWAP_SUCCESS = 'SWAP_SUCCESS',
+  ONRAMP_SUCCESS = 'ONRAMP_SUCCESS',
+  CONNECT_SUCCESS = 'CONNECT_SUCCESS',
   SALE_SUCCESS = 'SALE_SUCCESS',
   SALE_TRANSACTION_SUCCESS = 'SALE_TRANSACTION_SUCCESS',
   BRIDGE_SUCCESS = 'BRIDGE_SUCCESS',
@@ -41,11 +43,15 @@ export enum CheckoutFailureEventType {
   BRIDGE_CLAIM_WITHDRAWAL_FAILED = 'BRIDGE_CLAIM_WITHDRAWAL_FAILED',
   SWAP_FAILED = 'SWAP_FAILED',
   SWAP_REJECTED = 'SWAP_REJECTED',
+  CONNECT_FAILED = 'CONNECT_FAILED',
+  SALE_FAILED = 'SALE_FAILED',
+  ONRAMP_FAILED = 'ONRAMP_FAILED',
 }
 
 export enum CheckoutUserActionEventType {
   PAYMENT_METHOD_SELECTED = 'PAYMENT_METHOD_SELECTED',
   PAYMENT_TOKEN_SELECTED = 'PAYMENT_TOKEN_SELECTED',
+  NETWORK_SWITCH = 'NETWORK_SWITCH',
 }
 
 export type CheckoutProviderUpdatedEvent = {
@@ -58,41 +64,37 @@ export type CheckoutProviderUpdatedEvent = {
 };
 
 export type CheckoutSaleSuccessEvent = {
-  flow: CheckoutFlowType.SALE;
   type: CheckoutSuccessEventType.SALE_SUCCESS;
   data: SaleSuccess;
 };
 
 export type CheckoutSaleSuccessfulTransactionEvent = {
-  flow: CheckoutFlowType.SALE;
   type: CheckoutSuccessEventType.SALE_TRANSACTION_SUCCESS;
   data: SaleTransactionSuccess;
 };
 
 export type CheckoutOnRampSuccessEvent = {
-  flow: CheckoutFlowType.ONRAMP;
+  type: CheckoutSuccessEventType.ONRAMP_SUCCESS;
   data: OnRampSuccess;
 }; // FIMXE: TransactionSent
 
 export type CheckoutBridgeSuccessEvent = {
-  flow: CheckoutFlowType.BRIDGE;
   type: CheckoutSuccessEventType.BRIDGE_SUCCESS;
   data: BridgeTransactionSent;
 }; // FIMXE: TransactionSent
 
 export type CheckoutBridgeClaimWithdrawalSuccessEvent = {
-  flow: CheckoutFlowType.BRIDGE;
   type: CheckoutSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS;
   data: BridgeClaimWithdrawalSuccess;
 }; // FIMXE: TransactionSent
 
 export type CheckoutSwapSuccessEvent = {
-  flow: CheckoutFlowType.SWAP;
+  type: CheckoutSuccessEventType.SWAP_SUCCESS;
   data: SwapSuccess;
 }; // FIMXE: TransactionSent
 
 export type CheckoutConnectSuccessEvent = {
-  flow: CheckoutFlowType.CONNECT;
+  type: CheckoutSuccessEventType.CONNECT_SUCCESS;
   data: ConnectionSuccess;
 };
 
@@ -106,41 +108,37 @@ export type CheckoutSuccessEvent =
   | CheckoutSaleSuccessfulTransactionEvent;
 
 export type CheckoutBridgeFailureEvent = {
-  flow: CheckoutFlowType.BRIDGE;
   type: CheckoutFailureEventType.BRIDGE_FAILED;
   data: BridgeFailed;
 }; // FIMXE: Error
 
 export type CheckoutBridgeClaimWithdrawalFailedEvent = {
-  flow: CheckoutFlowType.BRIDGE;
   type: CheckoutFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED;
   data: BridgeClaimWithdrawalFailed;
 }; // FIMXE: Error
 
 export type CheckoutConnectFailureEvent = {
-  flow: CheckoutFlowType.CONNECT;
+  type: CheckoutFailureEventType.CONNECT_FAILED;
   data: ConnectionFailed;
 }; // FIMXE: Error
 
 export type CheckoutOnRampFailureEvent = {
-  flow: CheckoutFlowType.ONRAMP;
+  type: CheckoutFailureEventType.ONRAMP_FAILED;
   data: OnRampFailed;
 }; // FIMXE: Error
 
 export type CheckoutSwapFailureEvent = {
-  flow: CheckoutFlowType.SWAP;
   type: CheckoutFailureEventType.SWAP_FAILED;
   data: SwapFailed;
 }; // FIMXE: Error
 
 export type CheckoutSwapRejectedEvent = {
-  flow: CheckoutFlowType.SWAP;
   type: CheckoutFailureEventType.SWAP_REJECTED;
   data: SwapRejected;
 }; // FIMXE: Error
 
 export type CheckoutSaleFailureEvent = {
-  flow: CheckoutFlowType.SALE;
+  type: CheckoutFailureEventType.SALE_FAILED;
   data: SaleFailed;
 };
 
@@ -154,19 +152,17 @@ export type CheckoutFailureEvent =
   | CheckoutSaleFailureEvent;
 
 export type CheckoutPaymentMethodSelectedEvent = {
-  flow: CheckoutFlowType.SALE;
   type: CheckoutUserActionEventType.PAYMENT_METHOD_SELECTED;
   data: SalePaymentMethod;
 };
 
 export type CheckoutPaymentTokenSelectedEvent = {
-  flow: CheckoutFlowType.SALE;
   type: CheckoutUserActionEventType.PAYMENT_TOKEN_SELECTED;
   data: SalePaymentToken;
 };
 
 export type CheckoutNetworkSwitchEvent = {
-  flow: CheckoutFlowType.WALLET;
+  type: CheckoutUserActionEventType.NETWORK_SWITCH;
   data: WalletNetworkSwitch;
 };
 

packages/checkout/widgets-lib/src/widgets/checkout/hooks/useCheckoutEventsRelayer.ts

@@ -1,72 +1,68 @@
+/* eslint-disable no-case-declarations */
 import { useContext, useEffect, useRef } from 'react';
 import {
-  CheckoutConnectSuccessEvent,
   CheckoutEventType,
-  CheckoutFlowType,
-  CheckoutSuccessEvent,
-  IMTBLWidgetEvents,
   PostMessageHandlerEventType,
-  WidgetEventData,
-  WidgetType,
+  CheckoutSuccessEventType,
 } from '@imtbl/checkout-sdk';
 import { useCheckoutContext } from '../context/CheckoutContextProvider';
-import { sendCheckoutEvent } from '../CheckoutWidgetEvents';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import { CheckoutActions } from '../context/CheckoutContext';
-
-function isWidgetEvent(payload: any): payload is {
-  type: IMTBLWidgetEvents.IMTBL_CHECKOUT_WIDGET_EVENT;
-  detail: {
-    type: CheckoutEventType;
-    data: WidgetEventData[WidgetType.CHECKOUT][keyof WidgetEventData[WidgetType.CHECKOUT]];
-  };
-} {
-  return payload.type === IMTBLWidgetEvents.IMTBL_CHECKOUT_WIDGET_EVENT;
-}
+import { sendCheckoutEvent } from '../CheckoutWidgetEvents';
 
 export function useCheckoutEventsRelayer() {
   const [{ postMessageHandler, provider }, checkoutDispatch] = useCheckoutContext();
-  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+  const {
+    eventTargetState: { eventTarget },
+  } = useContext(EventTargetContext);
   const unsubscribePostMessageHandler = useRef<(() => void) | undefined>();
 
   useEffect(() => {
     if (!postMessageHandler) return undefined;
     unsubscribePostMessageHandler.current?.();
 
-    unsubscribePostMessageHandler.current = postMessageHandler.subscribe(({ type, payload }) => {
-      if (type !== PostMessageHandlerEventType.WIDGET_EVENT || !isWidgetEvent(payload)) return;
+    unsubscribePostMessageHandler.current = postMessageHandler.subscribe(
+      ({ type, payload }) => {
+        if (type !== PostMessageHandlerEventType.WIDGET_EVENT) {
+          return;
+        }
 
-      if (payload.detail.type === CheckoutEventType.SUCCESS
-        && (payload.detail.data as CheckoutSuccessEvent).flow === CheckoutFlowType.CONNECT) {
-        const checkoutConnectSuccessEvent = payload.detail as unknown as CheckoutConnectSuccessEvent;
-        if (!provider) {
-          throw new Error('Provider not found, unable to send checkout connect success event');
+        const event = { ...payload };
+
+        if (event.detail.type === CheckoutEventType.INITIALISED) {
+          checkoutDispatch({
+            payload: {
+              type: CheckoutActions.SET_INITIALISED,
+              initialised: true,
+            },
+          });
+        }
+
+        if (event.detail.type === CheckoutEventType.DISCONNECTED) {
+          checkoutDispatch({
+            payload: {
+              type: CheckoutActions.SET_PROVIDER,
+              provider: undefined,
+            },
+          });
         }
-        checkoutConnectSuccessEvent.data.provider = provider;
-        sendCheckoutEvent(eventTarget, { type: payload.detail.type, data: checkoutConnectSuccessEvent });
-        return;
-      }
 
-      if (payload.detail.type === CheckoutEventType.DISCONNECTED) {
-        checkoutDispatch({
-          payload: {
-            type: CheckoutActions.SET_PROVIDER,
-            provider: undefined,
-          },
-        });
-      }
+        if (
+          event.detail.type === CheckoutEventType.SUCCESS
+          && event.detail.data.type === CheckoutSuccessEventType.CONNECT_SUCCESS
+        ) {
+          if (!provider) {
+            throw new Error(
+              'Provider not found, unable to send checkout connect success event',
+            );
+          }
 
-      sendCheckoutEvent(eventTarget, payload.detail);
+          event.detail.data.data.provider = provider;
+        }
 
-      if (payload.detail.type === CheckoutEventType.INITIALISED) {
-        checkoutDispatch({
-          payload: {
-            type: CheckoutActions.SET_INITIALISED,
-            initialised: true,
-          },
-        });
-      }
-    });
+        sendCheckoutEvent(eventTarget, event.detail);
+      },
+    );
 
     return () => {
       unsubscribePostMessageHandler.current?.();