diff --git a/packages/checkout/sdk/src/types/config.ts b/packages/checkout/sdk/src/types/config.ts index 8671aa476e..ab95ea5a4f 100644 --- a/packages/checkout/sdk/src/types/config.ts +++ b/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 diff --git a/packages/checkout/sdk/src/widgets/definitions/events/addFunds.ts b/packages/checkout/sdk/src/widgets/definitions/events/addFunds.ts index ab12affcd3..2845f2912b 100644 --- a/packages/checkout/sdk/src/widgets/definitions/events/addFunds.ts +++ b/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', } /** diff --git a/packages/checkout/sdk/src/widgets/definitions/events/orchestration.ts b/packages/checkout/sdk/src/widgets/definitions/events/orchestration.ts index be2e1edd93..2af7ad3ff4 100644 --- a/packages/checkout/sdk/src/widgets/definitions/events/orchestration.ts +++ b/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; diff --git a/packages/checkout/sdk/src/widgets/definitions/types.ts b/packages/checkout/sdk/src/widgets/definitions/types.ts index 72d977e91f..50c0377eab 100644 --- a/packages/checkout/sdk/src/widgets/definitions/types.ts +++ b/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; }; diff --git a/packages/checkout/widgets-lib/src/lib/orchestrationEvents.ts b/packages/checkout/widgets-lib/src/lib/orchestrationEvents.ts index a002baa3c6..dfe8e4971c 100644 --- a/packages/checkout/widgets-lib/src/lib/orchestrationEvents.ts +++ b/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 + >(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, }; diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx index e3be945657..6968f5a797 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx +++ b/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 && ( diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidgetEvents.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidgetEvents.ts index aab1c05011..fa83ba5f9e 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidgetEvents.ts +++ b/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>( + 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>( + 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); +};