fix(checkout): transfer widget fires standard commerce events (#2690)

Author: allan-almeida-imtbl

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

@@ -17,6 +17,7 @@ import {
 import { SwapFailed, SwapRejected, SwapSuccess } from './swap';
 import { WalletNetworkSwitch } from './wallet';
 import { AddTokensFailed, AddTokensSuccess, AddTokensConnectSuccess } from './addTokens';
+import { TransferSuccess, TransferFailed } from './transfer';
 
 export enum CommerceEventType {
   INITIALISED = 'INITIALISED',
@@ -38,6 +39,7 @@ export enum CommerceSuccessEventType {
   BRIDGE_CLAIM_WITHDRAWAL_SUCCESS = 'BRIDGE_CLAIM_WITHDRAWAL_SUCCESS',
   ADD_TOKENS_SUCCESS = 'ADD_TOKENS_SUCCESS',
   ADD_TOKENS_CONNECT_SUCCESS = 'ADD_TOKENS_CONNECT_SUCCESS',
+  TRANSFER_SUCCESS = 'TRANSFER_SUCCESS',
 }
 
 export enum CommerceFailureEventType {
@@ -49,6 +51,7 @@ export enum CommerceFailureEventType {
   SALE_FAILED = 'SALE_FAILED',
   ONRAMP_FAILED = 'ONRAMP_FAILED',
   ADD_TOKENS_FAILED = 'ADD_TOKENS_FAILED',
+  TRANSFER_FAILED = 'TRANSFER_FAILED',
 }
 
 export enum CommerceUserActionEventType {
@@ -111,6 +114,11 @@ export type CommerceAddTokensConnectSuccessEvent = {
   data: AddTokensConnectSuccess;
 };
 
+export type CommerceTransferSuccessEvent = {
+  type: CommerceSuccessEventType.TRANSFER_SUCCESS;
+  data: TransferSuccess;
+};
+
 export type CommerceSuccessEvent =
   | CommerceAddTokensSuccessEvent
   | CommerceAddTokensConnectSuccessEvent
@@ -120,7 +128,8 @@ export type CommerceSuccessEvent =
   | CommerceOnRampSuccessEvent
   | CommerceSwapSuccessEvent
   | CommerceSaleSuccessEvent
-  | CommerceSaleSuccessfulTransactionEvent;
+  | CommerceSaleSuccessfulTransactionEvent
+  | CommerceTransferSuccessEvent;
 
 export type CommerceBridgeFailureEvent = {
   type: CommerceFailureEventType.BRIDGE_FAILED;
@@ -162,6 +171,11 @@ export type CommerceAddTokensFailureEvent = {
   data: AddTokensFailed;
 };
 
+export type CommerceTransferFailureEvent = {
+  type: CommerceFailureEventType.TRANSFER_FAILED;
+  data: TransferFailed;
+};
+
 export type CommerceFailureEvent =
   | CommerceAddTokensFailureEvent
   | CommerceBridgeFailureEvent
@@ -170,7 +184,8 @@ export type CommerceFailureEvent =
   | CommerceOnRampFailureEvent
   | CommerceSwapFailureEvent
   | CommerceSwapRejectedEvent
-  | CommerceSaleFailureEvent;
+  | CommerceSaleFailureEvent
+  | CommerceTransferFailureEvent;
 
 export type CommercePaymentMethodSelectedEvent = {
   type: CommerceUserActionEventType.PAYMENT_METHOD_SELECTED;

packages/checkout/widgets-lib/src/widgets/immutable-commerce/functions/getCommerceWidgetEvent.ts

@@ -12,6 +12,7 @@ import {
   PurchaseEventType,
   SaleEventType,
   SwapEventType,
+  TransferEventType,
   WalletEventType,
 } from '@imtbl/checkout-sdk';
 
@@ -348,6 +349,41 @@ function mapPurchaseWidgetEvent(
   }
 }
 
+/**
+ * Map Transfer Widget Events
+ */
+function mapTransferWidgetEvent(
+  event: CustomEvent<{ type: TransferEventType; data: Record<string, unknown> }>,
+): CommerceEventDetail {
+  const { type, data } = event.detail;
+
+  switch (type) {
+    case TransferEventType.SUCCESS:
+      return {
+        type: CommerceEventType.SUCCESS,
+        data: {
+          type: CommerceSuccessEventType.TRANSFER_SUCCESS,
+          data,
+        },
+      };
+    case TransferEventType.FAILURE:
+      return {
+        type: CommerceEventType.FAILURE,
+        data: {
+          type: CommerceFailureEventType.TRANSFER_FAILED,
+          data,
+        },
+      };
+    case TransferEventType.CLOSE_WIDGET:
+      return {
+        type: CommerceEventType.CLOSE,
+        data: {},
+      };
+    default:
+      throw new Error(`Unknown transfer event type "${event.detail.type}"`);
+  }
+}
+
 /**
  * Map widget events to commerce widget event detail
  */
@@ -378,6 +414,8 @@ export function getCommerceWidgetEvent(
       return mapSaleWidgetEvent(event);
     case IMTBLWidgetEvents.IMTBL_PURCHASE_WIDGET_EVENT:
       return mapPurchaseWidgetEvent(event);
+    case IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT:
+      return mapTransferWidgetEvent(event);
     default:
       throw new Error(`Unknown widget event type "${event.type}"`);
   }

packages/checkout/widgets-lib/src/widgets/immutable-commerce/hooks/useWidgetEvents.ts

@@ -26,6 +26,7 @@ const widgetEvents = [
   IMTBLWidgetEvents.IMTBL_SALE_WIDGET_EVENT,
   IMTBLWidgetEvents.IMTBL_ADD_TOKENS_WIDGET_EVENT,
   IMTBLWidgetEvents.IMTBL_PURCHASE_WIDGET_EVENT,
+  IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
 ];
 
 /**