[NO CHANGELOG][Checkout Widgets] Feat: Enable go back button widget p…

…aram (#2175)

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

@@ -7,5 +7,4 @@ export enum AddFundsEventType {
   REQUEST_BRIDGE = 'request-bridge',
   REQUEST_ONRAMP = 'request-onramp',
   REQUEST_SWAP = 'request-swap',
-  GO_BACK = 'go-back',
 }

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

@@ -8,6 +8,7 @@ export enum OrchestrationEventType {
   REQUEST_BRIDGE = 'request-bridge',
   REQUEST_ONRAMP = 'request-onramp',
   REQUEST_ADD_FUNDS = 'request-add-funds',
+  REQUEST_GO_BACK = 'request-go-back',
 }
 
 /**
@@ -73,6 +74,12 @@ export type RequestOnrampEvent = {
 export type RequestAddFundsEvent = {
 };
 
+/**
+ * Represents the object provide after go back event is requested
+ */
+export type RequestGoBackEvent = {
+};
+
 /*
 * Type representing the orchestration events.
 */
@@ -81,4 +88,5 @@ export type OrchestrationEventData =
   | RequestWalletEvent
   | RequestSwapEvent
   | RequestBridgeEvent
-  | RequestOnrampEvent;
+  | RequestOnrampEvent
+  | RequestGoBackEvent;

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

@@ -18,4 +18,7 @@ export type AddFundsWidgetParams = {
 
   /** 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;
 };

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

@@ -17,4 +17,6 @@ export type BridgeWidgetParams = {
   walletProviderName?: WalletProviderName;
   /** The language to use for the bridge widget */
   language?: WidgetLanguage;
+  /** Whether to show a back button on the first screen, on click triggers REQUEST_GO_BACK event */
+  showBackButton?: boolean;
 };

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

@@ -15,4 +15,6 @@ export type OnRampWidgetParams = {
   walletProviderName?: WalletProviderName;
   /** The language to use for the onramp widget */
   language?: WidgetLanguage;
+  /** Whether to show a back button on the first screen, on click triggers REQUEST_GO_BACK event */
+  showBackButton?: boolean;
 };

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

@@ -28,4 +28,6 @@ export type SwapWidgetParams = {
   autoProceed?: boolean;
   /** The direction of the swap */
   direction?: SwapDirection;
+  /** Whether to show a back button on the first screen, on click triggers REQUEST_GO_BACK event */
+  showBackButton?: boolean;
 };

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

@@ -40,6 +40,7 @@ import {
   CheckoutFailureEvent,
   CheckoutUserActionEvent,
   RequestAddFundsEvent,
+  RequestGoBackEvent,
 } from './events';
 import {
   BridgeWidgetParams,
@@ -131,6 +132,7 @@ type OrchestrationMapping = {
   [OrchestrationEventType.REQUEST_BRIDGE]: RequestBridgeEvent;
   [OrchestrationEventType.REQUEST_ONRAMP]: RequestOnrampEvent;
   [OrchestrationEventType.REQUEST_ADD_FUNDS]: RequestAddFundsEvent;
+  [OrchestrationEventType.REQUEST_GO_BACK]: RequestGoBackEvent;
 };
 
 type ProviderEventMapping = {
@@ -208,7 +210,6 @@ export type WidgetEventData = {
 
   [WidgetType.ADD_FUNDS]: {
     [AddFundsEventType.CLOSE_WIDGET]: {};
-    [AddFundsEventType.GO_BACK]: {};
     [AddFundsEventType.REQUEST_BRIDGE]: {};
     [AddFundsEventType.REQUEST_SWAP]: {};
     [AddFundsEventType.REQUEST_ONRAMP]: {};

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

@@ -5,22 +5,22 @@ import {
   RequestBridgeEvent,
   RequestOnrampEvent,
   RequestSwapEvent,
+  RequestGoBackEvent,
 } from '@imtbl/checkout-sdk';
 
 function sendRequestOnrampEvent(
   eventTarget: Window | EventTarget,
   imtblWidgetEvent: IMTBLWidgetEvents,
   eventData: RequestOnrampEvent,
 ) {
-  const requestOnrampEvent = new CustomEvent<OrchestrationEvent<OrchestrationEventType.REQUEST_ONRAMP>>(
-    imtblWidgetEvent,
-    {
-      detail: {
-        type: OrchestrationEventType.REQUEST_ONRAMP,
-        data: eventData,
-      },
+  const requestOnrampEvent = new CustomEvent<
+  OrchestrationEvent<OrchestrationEventType.REQUEST_ONRAMP>
+  >(imtblWidgetEvent, {
+    detail: {
+      type: OrchestrationEventType.REQUEST_ONRAMP,
+      data: eventData,
     },
-  );
+  });
   // TODO: please remove or if necessary keep the eslint ignore
   // eslint-disable-next-line no-console
   console.log('request onramp event:', eventTarget, requestOnrampEvent);
@@ -32,15 +32,14 @@ function sendRequestSwapEvent(
   imtblWidgetEvent: IMTBLWidgetEvents,
   eventData: RequestSwapEvent,
 ) {
-  const requestSwapEvent = new CustomEvent<OrchestrationEvent<OrchestrationEventType.REQUEST_SWAP>>(
-    imtblWidgetEvent,
-    {
-      detail: {
-        type: OrchestrationEventType.REQUEST_SWAP,
-        data: eventData,
-      },
+  const requestSwapEvent = new CustomEvent<
+  OrchestrationEvent<OrchestrationEventType.REQUEST_SWAP>
+  >(imtblWidgetEvent, {
+    detail: {
+      type: OrchestrationEventType.REQUEST_SWAP,
+      data: eventData,
     },
-  );
+  });
   // TODO: please remove or if necessary keep the eslint ignore
   // eslint-disable-next-line no-console
   console.log('request swap event:', eventTarget, requestSwapEvent);
@@ -53,7 +52,9 @@ function sendRequestBridgeEvent(
   eventData: RequestBridgeEvent,
 ) {
   // eslint-disable-next-line max-len
-  const requestBridgeEvent = new CustomEvent<OrchestrationEvent<OrchestrationEventType.REQUEST_BRIDGE>>(imtblWidgetEvent, {
+  const requestBridgeEvent = new CustomEvent<
+  OrchestrationEvent<OrchestrationEventType.REQUEST_BRIDGE>
+  >(imtblWidgetEvent, {
     detail: {
       type: OrchestrationEventType.REQUEST_BRIDGE,
       data: eventData,
@@ -65,8 +66,29 @@ function sendRequestBridgeEvent(
   if (eventTarget !== undefined) eventTarget.dispatchEvent(requestBridgeEvent);
 }
 
+function sendRequestGoBackEvent(
+  eventTarget: Window | EventTarget,
+  imtblWidgetEvent: IMTBLWidgetEvents,
+  eventData: RequestGoBackEvent,
+) {
+  // eslint-disable-next-line max-len
+  const requestGoBackEvent = new CustomEvent<
+  OrchestrationEvent<OrchestrationEventType.REQUEST_GO_BACK>
+  >(imtblWidgetEvent, {
+    detail: {
+      type: OrchestrationEventType.REQUEST_GO_BACK,
+      data: eventData,
+    },
+  });
+  // TODO: please remove or if necessary keep the eslint ignore
+  // eslint-disable-next-line no-console
+  console.log(`go back event from ${imtblWidgetEvent}:`, eventTarget, requestGoBackEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(requestGoBackEvent);
+}
+
 export const orchestrationEvents = {
   sendRequestBridgeEvent,
   sendRequestSwapEvent,
   sendRequestOnrampEvent,
+  sendRequestGoBackEvent,
 };

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

@@ -96,6 +96,7 @@ export class AddFunds extends Base<WidgetType.ADD_FUNDS> {
                     showOnrampOption={this.parameters.showOnrampOption}
                     toTokenAddress={this.parameters.toTokenAddress}
                     toAmount={this.parameters.toAmount}
+                    showBackButton={this.parameters.showBackButton}
                   />
                 </Suspense>
               </ConnectLoader>

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

@@ -1,15 +1,12 @@
-import { AddFundsWidgetParams, Checkout } from '@imtbl/checkout-sdk';
 import { Web3Provider } from '@ethersproject/providers';
 import {
   useContext, useEffect, useMemo, useReducer,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  sendAddFundsCloseEvent,
-  sendAddFundsGoBackEvent,
-} from './AddFundsWidgetEvents';
-import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
+import { AddFundsWidgetParams, Checkout } from '@imtbl/checkout-sdk';
 
+import { sendAddFundsCloseEvent } from './AddFundsWidgetEvents';
+import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import {
   AddFundsActions, AddFundsContext, addFundsReducer, initialAddFundsState,
 } from './context/AddFundsContext';
@@ -39,6 +36,7 @@ export default function AddFundsWidget({
   showBridgeOption = true,
   toTokenAddress,
   toAmount,
+  showBackButton,
 }: AddFundsWidgetInputs) {
   const [viewState, viewDispatch] = useReducer(viewReducer, {
     ...initialViewState,
@@ -145,11 +143,11 @@ export default function AddFundsWidget({
             provider={web3Provider}
             toTokenAddress={toTokenAddress}
             toAmount={toAmount}
+            showBackButton={showBackButton}
             showOnrampOption={showOnrampOption}
             showSwapOption={showSwapOption}
             showBridgeOption={showBridgeOption}
             onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
-            onBackButtonClick={() => sendAddFundsGoBackEvent(eventTarget)}
           />
         )}
         {viewState.view.type === SharedViews.ERROR_VIEW && (

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

@@ -20,19 +20,3 @@ export function sendAddFundsCloseEvent(eventTarget: Window | EventTarget) {
   console.log('close widget event:', closeWidgetEvent);
   if (eventTarget !== undefined) eventTarget.dispatchEvent(closeWidgetEvent);
 }
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function sendAddFundsGoBackEvent(eventTarget: Window | EventTarget) {
-  const closeWidgetEvent = new CustomEvent<
-  WidgetEvent<WidgetType.ADD_FUNDS, AddFundsEventType.GO_BACK>
-  >(IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {
-    detail: {
-      type: AddFundsEventType.GO_BACK,
-      data: {},
-    },
-  });
-  // TODO: please remove or if necessary keep the eslint ignore
-  // eslint-disable-next-line no-console
-  console.log('go back event:', closeWidgetEvent);
-  if (eventTarget !== undefined) eventTarget.dispatchEvent(closeWidgetEvent);
-}

packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx

@@ -31,6 +31,7 @@ import {
 interface AddFundsProps {
   checkout?: Checkout;
   provider?: Web3Provider;
+  showBackButton?: boolean;
   showOnrampOption?: boolean;
   showSwapOption?: boolean;
   showBridgeOption?: boolean;
@@ -45,6 +46,7 @@ export function AddFunds({
   provider,
   toAmount,
   toTokenAddress,
+  showBackButton = false,
   showOnrampOption = true,
   showSwapOption = true,
   showBridgeOption = true,
@@ -56,6 +58,8 @@ export function AddFunds({
   console.log('showSwapOption', showSwapOption);
   console.log('showBridgeOption', showBridgeOption);
 
+  const showBack = showBackButton || !!onBackButtonClick;
+
   const { addFundsDispatch } = useContext(AddFundsContext);
 
   const { viewDispatch } = useContext(ViewContext);
@@ -213,9 +217,16 @@ export function AddFunds({
       header={(
         <HeaderNavigation
           title="Add"
-          onBackButtonClick={onBackButtonClick}
           onCloseButtonClick={onCloseButtonClick}
-          showBack={!!onBackButtonClick}
+          showBack={showBack}
+          onBackButtonClick={() => {
+            orchestrationEvents.sendRequestGoBackEvent(
+              eventTarget,
+              IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+              {},
+            );
+            onBackButtonClick?.();
+          }}
         />
       )}
     >

packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx

@@ -77,6 +77,7 @@ export default function BridgeWidget({
   config,
   amount,
   tokenAddress,
+  showBackButton,
 }: BridgeWidgetInputs) {
   const { t } = useTranslation();
   const {
@@ -203,7 +204,7 @@ export default function BridgeWidget({
       <BridgeContext.Provider value={bridgeReducerValues}>
         <CryptoFiatProvider environment={environment}>
           {viewState.view.type === BridgeWidgetViews.WALLET_NETWORK_SELECTION && (
-            <WalletNetworkSelectionView />
+            <WalletNetworkSelectionView showBackButton={showBackButton} />
           )}
           {viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (
             <Bridge

packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidgetRoot.tsx

@@ -76,6 +76,7 @@ export class Bridge extends Base<WidgetType.BRIDGE> {
                   tokenAddress={this.parameters.tokenAddress}
                   amount={this.parameters.amount}
                   walletProviderName={this.parameters.walletProviderName}
+                  showBackButton={!!this.parameters.showBackButton}
                 />
               </Suspense>
             </HandoverProvider>

packages/checkout/widgets-lib/src/widgets/bridge/views/WalletNetworkSelectionView.tsx

@@ -1,6 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { ButtCon } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
+import { IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
@@ -11,8 +12,14 @@ import { ViewActions, ViewContext } from '../../../context/view-context/ViewCont
 import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { sendBridgeWidgetCloseEvent } from '../BridgeWidgetEvents';
 import { WalletAndNetworkSelector } from '../components/WalletAndNetworkSelector';
+import { orchestrationEvents } from '../../../lib/orchestrationEvents';
 
-export function WalletNetworkSelectionView() {
+type WalletNetworkSelectionViewProps = {
+  showBackButton?: boolean;
+};
+export function WalletNetworkSelectionView({
+  showBackButton,
+}: WalletNetworkSelectionViewProps) {
   const { t } = useTranslation();
   const { viewDispatch } = useContext(ViewContext);
 
@@ -49,6 +56,14 @@ export function WalletNetworkSelectionView() {
               testId="move-transactions-button"
             />
           )}
+          showBack={showBackButton}
+          onBackButtonClick={() => {
+            orchestrationEvents.sendRequestGoBackEvent(
+              eventTarget,
+              IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT,
+              {},
+            );
+          }}
         />
       )}
       footer={<FooterLogo />}

packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx

@@ -30,7 +30,7 @@ export type OnRampWidgetInputs = OnRampWidgetParams & {
 };
 
 export default function OnRampWidget({
-  amount, tokenAddress, config,
+  amount, tokenAddress, config, showBackButton,
 }: OnRampWidgetInputs) {
   const {
     isOnRampEnabled, isSwapEnabled, isBridgeEnabled,
@@ -137,6 +137,7 @@ export default function OnRampWidget({
           tokenAddress={
               tknAddr ?? viewState.view.data?.tokenAddress
           }
+          showBackButton={showBackButton}
         />
       )}
 

packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidgetRoot.tsx

@@ -87,6 +87,7 @@ export class OnRamp extends Base<WidgetType.ONRAMP> {
                     tokenAddress={this.parameters.tokenAddress}
                     amount={this.parameters.amount}
                     config={this.strongConfig()}
+                    showBackButton={this.parameters.showBackButton}
                   />
                 </Suspense>
               </ConnectLoader>