[NO CHANGELOG] [Checkout Widget] Add events required for integration

packages/checkout/sdk/src/types/config.ts

@@ -71,6 +71,8 @@ export type RemoteConfiguration = {
   onramp: OnRampConfig;
   /** The config used for the Bridge. */
   bridge: BridgeConfig;
+  /** The config used for Add Funds */
+  addfunds: AddFundsConfig;
   /** An array representing the allowed networks. */
   allowedNetworks: AllowedNetworkConfig[];
   /** The config for the tokens used to estimate gas. */
@@ -85,6 +87,15 @@ export type RemoteConfiguration = {
   checkoutWidgetsVersion: CheckoutWidgetsVersionConfig;
 };
 
+/**
+ * A type representing the configuration for the Add Funds.
+ * @property {TokenInfo[] | undefined} tokens
+ */
+export type AddFundsConfig = {
+  /** A boolean value for enabling/disabling Add Funds */
+  enabled: boolean;
+};
+
 /**
  * A type representing the fee structure for an OnRamp provider
  * @property {string | undefined} minPercentage

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

@@ -8,9 +8,8 @@ export enum AddFundsEventType {
   CLOSE_WIDGET = 'close-widget',
   LANGUAGE_CHANGED = 'language-changed',
   CONNECT_SUCCESS = 'connect-success',
-  REQUEST_BRIDGE = 'request-bridge',
-  REQUEST_ONRAMP = 'request-onramp',
-  REQUEST_SWAP = 'request-swap',
+  SUCCESS = 'success',
+  FAILURE = 'failure',
 }
 
 /**

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

@@ -72,6 +72,14 @@ export type RequestOnrampEvent = {
  * Represents the add funds event object when the add funds widget is requested.
  */
 export type RequestAddFundsEvent = {
+  /** Token address of the fund to be added */
+  toTokenAddress?: string;
+
+  /** Amount of the fund to be added */
+  toAmount?: string;
+
+  /** Whether to show a back button on the first screen, on click triggers REQUEST_GO_BACK event */
+  showBackButton?: boolean;
 };
 
 /**
@@ -89,4 +97,5 @@ export type OrchestrationEventData =
   | RequestSwapEvent
   | RequestBridgeEvent
   | RequestOnrampEvent
-  | RequestGoBackEvent;
+  | RequestGoBackEvent
+  | RequestAddFundsEvent;

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

@@ -43,6 +43,8 @@ import {
   RequestGoBackEvent,
   AddFundsEventType,
   AddFundsConnectSuccess,
+  AddFundsSuccess,
+  AddFundsFailed,
 } from './events';
 import {
   BridgeWidgetParams,
@@ -214,6 +216,8 @@ export type WidgetEventData = {
   [WidgetType.ADD_FUNDS]: {
     [AddFundsEventType.CLOSE_WIDGET]: {};
     [AddFundsEventType.CONNECT_SUCCESS]: AddFundsConnectSuccess;
+    [AddFundsEventType.SUCCESS]: AddFundsSuccess;
+    [AddFundsEventType.FAILURE]: AddFundsFailed;
   } & OrchestrationMapping &
   ProviderEventMapping;
 };

packages/checkout/widgets-lib/src/lib/orchestrationEvents.ts

@@ -6,6 +6,7 @@ import {
   RequestOnrampEvent,
   RequestSwapEvent,
   RequestGoBackEvent,
+  RequestAddFundsEvent,
 } from '@imtbl/checkout-sdk';
 
 function sendRequestOnrampEvent(
@@ -86,9 +87,30 @@ function sendRequestGoBackEvent(
   if (eventTarget !== undefined) eventTarget.dispatchEvent(requestGoBackEvent);
 }
 
+function sendRequestAddFundsEvent(
+  eventTarget: Window | EventTarget,
+  imtblWidgetEvent: IMTBLWidgetEvents,
+  eventData: RequestAddFundsEvent,
+) {
+  // eslint-disable-next-line max-len
+  const requestAddFundsEvent = new CustomEvent<
+  OrchestrationEvent<OrchestrationEventType.REQUEST_ADD_FUNDS>
+  >(imtblWidgetEvent, {
+    detail: {
+      type: OrchestrationEventType.REQUEST_ADD_FUNDS,
+      data: eventData,
+    },
+  });
+  // TODO: please remove or if necessary keep the eslint ignore
+  // eslint-disable-next-line no-console
+  console.log('add funds event:', eventTarget, requestAddFundsEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(requestAddFundsEvent);
+}
+
 export const orchestrationEvents = {
   sendRequestBridgeEvent,
   sendRequestSwapEvent,
   sendRequestOnrampEvent,
   sendRequestGoBackEvent,
+  sendRequestAddFundsEvent,
 };

packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx

@@ -2,7 +2,7 @@ import {
   useContext, useEffect, useMemo, useReducer, useRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AddFundsWidgetParams } from '@imtbl/checkout-sdk';
+import { AddFundsWidgetParams, IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
 
 import { Stack, CloudImage } from '@biom3/react';
 import { Environment } from '@imtbl/config';
@@ -37,6 +37,7 @@ import { useTokens } from './hooks/useTokens';
 import { useProvidersContext } from '../../context/providers-context/ProvidersContext';
 import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
 import { ServiceType } from '../../views/error/serviceTypes';
+import { orchestrationEvents } from '../../lib/orchestrationEvents';
 import { getRemoteImage } from '../../lib/utils';
 import { isValidAddress } from '../../lib/validations/widgetValidators';
 import { amountInputValidation } from '../../lib/validations/amountInputValidations';
@@ -210,6 +211,13 @@ export default function AddFundsWidget({
               showSwapOption={showSwapOption}
               showBridgeOption={showBridgeOption}
               onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
+              onBackButtonClick={() => {
+                orchestrationEvents.sendRequestGoBackEvent(
+                  eventTarget,
+                  IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+                  {},
+                );
+              }}
             />
           )}
           {viewState.view.type === AddFundsWidgetViews.REVIEW && (

packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidgetEvents.ts

@@ -49,3 +49,38 @@ export function sendConnectProviderSuccessEvent(
   );
   if (eventTarget !== undefined) eventTarget.dispatchEvent(successEvent);
 }
+
+export const sendAddFundsSuccessEvent = (eventTarget: Window | EventTarget, transactionHash: string) => {
+  const successEvent = new CustomEvent<WidgetEvent<WidgetType.ADD_FUNDS, AddFundsEventType.SUCCESS>>(
+    IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+    {
+      detail: {
+        type: AddFundsEventType.SUCCESS,
+        data: {
+          transactionHash,
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('add funds success event:', eventTarget, successEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(successEvent);
+};
+
+export const sendAddFundsFailedEvent = (eventTarget: Window | EventTarget, reason: string) => {
+  const failedEvent = new CustomEvent<WidgetEvent<WidgetType.ADD_FUNDS, AddFundsEventType.FAILURE>>(
+    IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+    {
+      detail: {
+        type: AddFundsEventType.FAILURE,
+        data: {
+          reason,
+          timestamp: new Date().getTime(),
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('add funds failed event:', eventTarget, failedEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(failedEvent);
+};