Add events

Author: keithbro-imx

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

@@ -9,3 +9,4 @@ export * from './onramp';
 export * from './commerce';
 export * from './addTokens';
 export * from './purchase';
+export * from './transfer';

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

@@ -1,14 +1,16 @@
 export enum TransferEventType {
   CLOSE_WIDGET = 'close-widget',
-  CONNECT_SUCCESS = 'connect-success',
+  REJECTED = 'rejected',
   SUCCESS = 'success',
   FAILURE = 'failure',
 }
 
 /**
  * Represents a successful transfer.
  */
-export type TransferSuccess = {};
+export type TransferSuccess = {
+  transactionHash: string;
+};
 
 /**
  * Type representing a transfer failure
@@ -18,3 +20,10 @@ export type TransferFailed = {
   reason: string;
   timestamp: number;
 };
+
+/**
+ * Type representing a transfer rejected
+ * @property {string} reason
+ */
+export type TransferRejected = {
+};

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

@@ -15,7 +15,7 @@ export enum IMTBLWidgetEvents {
   IMTBL_COMMERCE_WIDGET_EVENT = 'imtbl-commerce-widget',
   IMTBL_ADD_TOKENS_WIDGET_EVENT = 'imtbl-add-tokens-widget',
   IMTBL_PURCHASE_WIDGET_EVENT = 'imtbl-purchase-widget',
-  IMBTL_TRANSFER_WIDGET_EVENT = 'imtbl-transfer-widget',
+  IMTBL_TRANSFER_WIDGET_EVENT = 'imtbl-transfer-widget',
 }
 
 /**

packages/checkout/sdk/src/widgets/definitions/parameters/transfer.ts

@@ -12,4 +12,7 @@ export type TransferWidgetParams = {
 
   /** The to address to transfer to */
   toAddress?: `0x${string}`;
+
+  /** Whether to show the back button */
+  showBackButton?: boolean;
 };

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

@@ -75,7 +75,9 @@ import {
   TransferWidgetConfiguration,
 } from './configurations';
 import { WrappedBrowserProvider } from '../../types';
-import { TransferEventType, TransferFailed, TransferSuccess } from './events/transfer';
+import {
+  TransferEventType, TransferFailed, TransferRejected, TransferSuccess,
+} from './events/transfer';
 
 /**
  * Enum representing the list of widget types.
@@ -247,6 +249,7 @@ export type WidgetEventData = {
     [TransferEventType.CLOSE_WIDGET]: {};
     [TransferEventType.SUCCESS]: TransferSuccess;
     [TransferEventType.FAILURE]: TransferFailed;
+    [TransferEventType.REJECTED]: TransferRejected;
   } & OrchestrationMapping &
   ProviderEventMapping;
 };

packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidget.tsx

@@ -333,6 +333,7 @@ export default function CommerceWidget(props: CommerceWidgetInputs) {
                   config={widgetsConfig}
                   {...(view.data.params || {})}
                   {...(view.data.config || {})}
+                  showBackButton={showBackButton}
                 />
               )}
             </Suspense>

packages/checkout/widgets-lib/src/widgets/transfer/TransferForm.tsx

@@ -22,23 +22,24 @@ import { amountInputValidation } from '../../lib/validations/amountInputValidati
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import { TransferFormState, TransferState } from './context';
 import { getOptionKey, getFiatAmount, validatePartialAddress } from './functions';
+import { sendCloseWidgetEvent } from '../connect/connectWidgetEvents';
 
 export function TransferForm({
   config,
   viewState,
   setViewState,
   onSend,
+  showBackButton,
 }: {
   config: StrongCheckoutWidgetsConfig;
   viewState: TransferFormState;
   setViewState: Dispatch<SetStateAction<TransferState>>;
   onSend: () => void;
+  showBackButton: boolean | undefined;
 }) {
   const { t } = useTranslation();
   const { track } = useAnalytics();
-  const {
-    eventTargetState: { eventTarget },
-  } = useContext(EventTargetContext);
+  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
   const { cryptoFiatState } = useContext(CryptoFiatContext);
 
   const tokenOptions = useMemo(
@@ -137,12 +138,12 @@ export function TransferForm({
       header={(
         <HeaderNavigation
           title={t('views.TRANSFER.header.title')}
-          onCloseButtonClick={() => {}}
-          showBack
+          onCloseButtonClick={() => sendCloseWidgetEvent(eventTarget)}
+          showBack={showBackButton}
           onBackButtonClick={() => {
             orchestrationEvents.sendRequestGoBackEvent(
               eventTarget,
-              IMTBLWidgetEvents.IMBTL_TRANSFER_WIDGET_EVENT,
+              IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
               {},
             );
           }}

packages/checkout/widgets-lib/src/widgets/transfer/TransferWidget.tsx

@@ -28,6 +28,8 @@ import { SendingTokens } from './SendingTokens';
 import { AwaitingApproval } from './AwaitingApproval';
 import { TransferState } from './context';
 import { TransferForm } from './TransferForm';
+import { sendFailedEvent, sendRejectedEvent, sendSuccessEvent } from './events';
+import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 
 export type TransferWidgetInputs = TransferWidgetParams & {
   config: StrongCheckoutWidgetsConfig;
@@ -38,6 +40,7 @@ const TRANSACTION_CANCELLED_ERROR_CODE = -32003;
 function TransferWidgetInner(props: TransferWidgetInputs) {
   const { t } = useTranslation();
   const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
+  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
   const { track } = useAnalytics();
 
   const {
@@ -147,7 +150,13 @@ function TransferWidgetInner(props: TransferWidgetInputs) {
       });
 
       const receipt = await txResponse.wait();
-      if (!receipt) throw new Error('Transaction failed');
+      if (!receipt) {
+        sendFailedEvent(eventTarget, 'Transaction failed');
+        setViewState({ ...viewState, type: 'FORM' }); // TODO: We should be showing a failed view here
+        return;
+      }
+
+      sendSuccessEvent(eventTarget, receipt.hash);
 
       setViewState({
         type: 'COMPLETE',
@@ -182,12 +191,15 @@ function TransferWidgetInner(props: TransferWidgetInputs) {
           controlType: 'Event',
           extras: { token: viewState.tokenAddress, amount: viewState.amount },
         });
+        sendRejectedEvent(eventTarget, 'Transaction cancelled');
       } else {
         // eslint-disable-next-line no-console
         console.error(e); // TODO: where can we send these?
+        sendFailedEvent(eventTarget, 'Transaction failed');
+        setViewState({ ...viewState, type: 'FORM' }); // TODO: We should be showing a failed view here
       }
     }
-  }, [viewState]);
+  }, [viewState, eventTarget]);
 
   switch (viewState.type) {
     case 'INITIALISING':
@@ -199,6 +211,7 @@ function TransferWidgetInner(props: TransferWidgetInputs) {
           viewState={viewState}
           setViewState={setViewState}
           onSend={onSend}
+          showBackButton={props.showBackButton}
         />
       );
     case 'AWAITING_APPROVAL':

packages/checkout/widgets-lib/src/widgets/transfer/events.ts

@@ -0,0 +1,59 @@
+import {
+  WidgetEvent,
+  TransferEventType,
+  IMTBLWidgetEvents,
+  WidgetType,
+} from '@imtbl/checkout-sdk';
+
+export const sendSuccessEvent = (eventTarget: Window | EventTarget, transactionHash: string) => {
+  const successEvent = new CustomEvent<WidgetEvent<WidgetType.TRANSFER, TransferEventType.SUCCESS>>(
+    IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+    {
+      detail: {
+        type: TransferEventType.SUCCESS,
+        data: {
+          transactionHash,
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('transfer success event:', eventTarget, successEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(successEvent);
+};
+
+export const sendFailedEvent = (eventTarget: Window | EventTarget, reason: string) => {
+  const failedEvent = new CustomEvent<WidgetEvent<WidgetType.TRANSFER, TransferEventType.FAILURE>>(
+    IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+    {
+      detail: {
+        type: TransferEventType.FAILURE,
+        data: {
+          reason,
+          timestamp: new Date().getTime(),
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('transfer failed event:', eventTarget, failedEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(failedEvent);
+};
+
+export const sendRejectedEvent = (eventTarget: Window | EventTarget, reason: string) => {
+  const rejectedEvent = new CustomEvent<WidgetEvent<WidgetType.TRANSFER, TransferEventType.REJECTED>>(
+    IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+    {
+      detail: {
+        type: TransferEventType.REJECTED,
+        data: {
+          reason,
+          timestamp: new Date().getTime(),
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('transfer rejected event:', eventTarget, rejectedEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(rejectedEvent);
+};

packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx

@@ -264,6 +264,7 @@ function CheckoutUI() {
   const mount = () => {
     unmount();
     mounted.current = true;
+    console.log({params});
     widget?.mount("widget-root", params);
   };
 
@@ -276,9 +277,6 @@ function CheckoutUI() {
 
   // create the widget once factory is available
   // ignore language or theme changes
-  const prevWidget = useRef<Widget<typeof WidgetType.IMMUTABLE_COMMERCE> | undefined>(
-    undefined
-  );
   const widget = useAsyncMemo(async () => {
     if (widgetsFactory === undefined) return undefined;
     if (renderAfterConnect && !browserProvider) return undefined;
@@ -342,6 +340,7 @@ function CheckoutUI() {
       setEventResults((prev) => [...prev, { failure: true, ...data }]);
     });
     widget.addListener(CommerceEventType.CLOSE, () => {
+      console.log("CLOSED");
       setEventResults((prev) => [...prev, { closed: true }]);
       widget.unmount();
     });