From 009ab34e7de96967589711d01640c43d52f09675 Mon Sep 17 00:00:00 2001 From: Ji Young Lee <641712+jiyounglee@users.noreply.github.com> Date: Mon, 5 Aug 2024 15:13:29 +1000 Subject: [PATCH] [NO CHANGELOG][Checkout Widget] Update checkout event to include type and data (#2064) --- .../widgets/definitions/events/checkout.ts | 82 ++++++++++++---- .../src/components/ui/checkout/checkout.tsx | 96 +++++++++++++++++++ 2 files changed, 158 insertions(+), 20 deletions(-) diff --git a/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts b/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts index 8228dba295..3adc8f02be 100644 --- a/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts +++ b/packages/checkout/sdk/src/widgets/definitions/events/checkout.ts @@ -29,6 +29,23 @@ export enum CheckoutEventType { USER_ACTION = 'USER_ACTION', } +export enum CheckoutSuccessEventType { + SALE_SUCCESS = 'SALE_SUCCESS', + SALE_TRANSACTION_SUCCESS = 'SALE_TRANSACTION_SUCCESS', + BRIDGE_SUCCESS = 'BRIDGE_SUCCESS', + BRIDGE_CLAIM_WITHDRAWAL_SUCCESS = 'BRIDGE_CLAIM_WITHDRAWAL_SUCCESS', +} + +export enum CheckoutFailureEventType { + BRIDGE_FAILED = 'BRIDGE_FAILED', + BRIDGE_CLAIM_WITHDRAWAL_FAILED = 'BRIDGE_CLAIM_WITHDRAWAL_FAILED', +} + +export enum CheckoutUserActionEventType { + PAYMENT_METHOD_SELECTED = 'PAYMENT_METHOD_SELECTED', + PAYMENT_TOKEN_SELECTED = 'PAYMENT_TOKEN_SELECTED', +} + export type CheckoutProviderUpdatedEvent = { /** The connected provider. */ provider: Web3Provider; @@ -40,30 +57,41 @@ export type CheckoutProviderUpdatedEvent = { export type CheckoutSaleSuccessEvent = { flow: CheckoutFlowType.SALE; -} & SaleSuccess; + type: CheckoutSuccessEventType.SALE_SUCCESS; + data: SaleSuccess; +}; export type CheckoutSaleSuccessfulTransactionEvent = { flow: CheckoutFlowType.SALE; -} & SaleTransactionSuccess; + type: CheckoutSuccessEventType.SALE_TRANSACTION_SUCCESS; + data: SaleTransactionSuccess; +}; export type CheckoutOnRampSuccessEvent = { flow: CheckoutFlowType.ONRAMP; -} & OnRampSuccess; // FIMXE: TransactionSent + data: OnRampSuccess; +}; // FIMXE: TransactionSent export type CheckoutBridgeSuccessEvent = { flow: CheckoutFlowType.BRIDGE; -} & BridgeTransactionSent; // FIMXE: TransactionSent + type: CheckoutSuccessEventType.BRIDGE_SUCCESS; + data: BridgeTransactionSent; +}; // FIMXE: TransactionSent export type CheckoutBridgeClaimWithdrawalSuccessEvent = { flow: CheckoutFlowType.BRIDGE; -} & BridgeClaimWithdrawalSuccess; // FIMXE: TransactionSent + type: CheckoutSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS; + data: BridgeClaimWithdrawalSuccess; +}; // FIMXE: TransactionSent export type CheckoutSwapSuccessEvent = { - flow: CheckoutFlowType.BRIDGE; -} & SwapSuccess; // FIMXE: TransactionSent + flow: CheckoutFlowType.SWAP; + data: SwapSuccess; +}; // FIMXE: TransactionSent export type CheckoutSuccessEvent = | CheckoutBridgeSuccessEvent + | CheckoutBridgeClaimWithdrawalSuccessEvent | CheckoutOnRampSuccessEvent | CheckoutSwapSuccessEvent | CheckoutSaleSuccessEvent @@ -71,30 +99,39 @@ export type CheckoutSuccessEvent = export type CheckoutBridgeFailureEvent = { flow: CheckoutFlowType.BRIDGE; -} & BridgeFailed; // FIMXE: Error + type: CheckoutFailureEventType.BRIDGE_FAILED; + data: BridgeFailed; +}; // FIMXE: Error export type CheckoutBridgeClaimWithdrawalFailedEvent = { flow: CheckoutFlowType.BRIDGE; -} & BridgeClaimWithdrawalFailed; // FIMXE: Error + type: CheckoutFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED; + data: BridgeClaimWithdrawalFailed; +}; // FIMXE: Error export type CheckoutConnectFailureEvent = { - flow: CheckoutFlowType.BRIDGE; -} & ConnectionFailed; // FIMXE: Error + flow: CheckoutFlowType.CONNECT; + data: ConnectionFailed; +}; // FIMXE: Error export type CheckoutOnRampFailureEvent = { - flow: CheckoutFlowType.BRIDGE; -} & OnRampFailed; // FIMXE: Error + flow: CheckoutFlowType.ONRAMP; + data: OnRampFailed; +}; // FIMXE: Error export type CheckoutSwapFailureEvent = { - flow: CheckoutFlowType.BRIDGE; -} & SwapFailed; // FIMXE: Error + flow: CheckoutFlowType.SWAP; + data: SwapFailed; +}; // FIMXE: Error export type CheckoutSaleFailureEvent = { - flow: CheckoutFlowType.BRIDGE; -} & SaleFailed; // FIMXE: Error + flow: CheckoutFlowType.SALE; + data: SaleFailed; +}; export type CheckoutFailureEvent = | CheckoutBridgeFailureEvent + | CheckoutBridgeClaimWithdrawalFailedEvent | CheckoutConnectFailureEvent | CheckoutOnRampFailureEvent | CheckoutSwapFailureEvent @@ -102,15 +139,20 @@ export type CheckoutFailureEvent = export type CheckoutPaymentMethodSelectedEvent = { flow: CheckoutFlowType.SALE; -} & SalePaymentMethod; + type: CheckoutUserActionEventType.PAYMENT_METHOD_SELECTED; + data: SalePaymentMethod; +}; export type CheckoutPaymentTokenSelectedEvent = { flow: CheckoutFlowType.SALE; -} & SalePaymentToken; + type: CheckoutUserActionEventType.PAYMENT_TOKEN_SELECTED; + data: SalePaymentToken; +}; export type CheckoutNetworkSwitchEvent = { flow: CheckoutFlowType.WALLET; -} & WalletNetworkSwitch; + data: WalletNetworkSwitch; +}; export type CheckoutUserActionEvent = | CheckoutPaymentMethodSelectedEvent diff --git a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx index cfaf0883b2..00a62404c0 100644 --- a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx +++ b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx @@ -8,6 +8,9 @@ import { WalletProviderName, SalePaymentTypes, CheckoutEventType, + CheckoutSuccessEventType, + CheckoutFailureEventType, + CheckoutUserActionEventType, } from "@imtbl/checkout-sdk"; import { Environment } from "@imtbl/config"; import { WidgetsFactory } from "@imtbl/checkout-widgets"; @@ -63,7 +66,100 @@ function CheckoutUI() { console.log("----------> INITIALISED", data); }); + checkoutWidget.addListener(CheckoutEventType.PROVIDER_UPDATED, (data) => { + console.log("----------> PROVIDER_UPDATED", data); + }); + + checkoutWidget.addListener(CheckoutEventType.CLOSE, (data) => { + console.log("----------> CLOSE", data); + }); + + checkoutWidget.addListener(CheckoutEventType.SUCCESS, (data) => { + if ( + data.flow === CheckoutFlowType.SALE && + data.type === CheckoutSuccessEventType.SALE_SUCCESS + ) { + console.log("----------> SUCCESS SALE_SUCESS", data); + } + if ( + data.flow === CheckoutFlowType.SALE && + data.type === CheckoutSuccessEventType.SALE_TRANSACTION_SUCCESS + ) { + console.log("----------> SUCCESS SALE_TRANSACTION_SUCCESS", data); + } + if (data.flow === CheckoutFlowType.ONRAMP) { + console.log("----------> SUCCESS ONRAMP", data); + } + if ( + data.flow === CheckoutFlowType.BRIDGE && + data.type === CheckoutSuccessEventType.BRIDGE_SUCCESS + ) { + console.log("----------> SUCCESS BRIDGE_SUCCESS", data); + } + if ( + data.flow === CheckoutFlowType.BRIDGE && + data.type === CheckoutSuccessEventType.BRIDGE_CLAIM_WITHDRAWAL_SUCCESS + ) { + console.log( + "----------> SUCCESS BRIDGE_CLAIM_WITHDRAWAL_SUCCESS", + data.data + ); + } + + console.log("----------> SUCCESS", data); + }); + + checkoutWidget.addListener(CheckoutEventType.FAILURE, (data) => { + if ( + data.flow === CheckoutFlowType.BRIDGE && + data.type === CheckoutFailureEventType.BRIDGE_FAILED + ) { + console.log("----------> FAILURE BRIDGE_FAILED", data); + } + if ( + data.flow === CheckoutFlowType.BRIDGE && + data.type === CheckoutFailureEventType.BRIDGE_CLAIM_WITHDRAWAL_FAILED + ) { + console.log( + "----------> FAILURE BRIDGE_CLAIM_WITHDRAWAL_FAILED", + data.data + ); + } + if (data.flow === CheckoutFlowType.CONNECT) { + console.log("----------> FAILURE CONNECT", data); + } + if (data.flow === CheckoutFlowType.ONRAMP) { + console.log("----------> FAILURE ONRAMP", data); + } + if (data.flow === CheckoutFlowType.SWAP) { + console.log("----------> FAILURE SWAP", data); + } + if (data.flow === CheckoutFlowType.SALE) { + console.log("----------> FAILURE SALE", data); + } + console.log("----------> FAILURE", data); + }); + + checkoutWidget.addListener(CheckoutEventType.DISCONNECTED, (data) => { + console.log("----------> DISCONNECTED", data); + }); + checkoutWidget.addListener(CheckoutEventType.USER_ACTION, (data) => { + if ( + data.flow === CheckoutFlowType.SALE && + data.type === CheckoutUserActionEventType.PAYMENT_METHOD_SELECTED + ) { + console.log("----------> USER_ACTION PAYMENT_METHOD_SELECTED", data); + } + if ( + data.flow === CheckoutFlowType.SALE && + data.type === CheckoutUserActionEventType.PAYMENT_TOKEN_SELECTED + ) { + console.log("----------> USER_ACTION PAYMENT_TOKEN_SELECTED", data); + } + if (data.flow === CheckoutFlowType.WALLET) { + console.log("----------> USER_ACTION WALLET", data); + } console.log("----------> USER_ACTION", data); }); }, [checkoutWidget]);