feat:[CM-708] Checkout Widget Setup (#1993)

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

@@ -0,0 +1,6 @@
+/* eslint-disable max-len */
+import { WidgetConfiguration } from './widget';
+
+export type CheckoutWidgetConfiguration = {
+
+} & WidgetConfiguration;

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

@@ -6,3 +6,4 @@ export * from './onramp';
 export * from './sale';
 export * from './theme';
 export * from './widget';
+export * from './checkout';

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

@@ -0,0 +1,3 @@
+export enum CheckoutEventType {
+
+}

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

@@ -6,3 +6,4 @@ export * from './sale';
 export * from './bridge';
 export * from './orchestration';
 export * from './onramp';
+export * from './checkout';

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

@@ -12,6 +12,7 @@ export enum IMTBLWidgetEvents {
   IMTBL_BRIDGE_WIDGET_EVENT = 'imtbl-bridge-widget',
   IMTBL_ONRAMP_WIDGET_EVENT = 'imtbl-onramp-widget',
   IMTBL_SALE_WIDGET_EVENT = 'imtbl-sale-widget',
+  IMTBL_CHECKOUT_WIDGET_EVENT = 'imtbl-checkout-widget',
 }
 
 /**

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

@@ -0,0 +1,7 @@
+/* eslint-disable max-len */
+import { WidgetLanguage } from '../configurations';
+
+export type CheckoutWidgetParams = {
+  /** The language to use for the checkout widget */
+  language?: WidgetLanguage;
+};

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

@@ -4,3 +4,4 @@ export * from './wallet';
 export * from './swap';
 export * from './onramp';
 export * from './sale';
+export * from './checkout';

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

@@ -34,13 +34,15 @@ import {
   WalletDisconnect,
   WalletEventType,
   WalletNetworkSwitch,
+  CheckoutEventType,
 } from './events';
 import {
   BridgeWidgetParams,
   ConnectWidgetParams,
   SwapWidgetParams,
   WalletWidgetParams,
   OnRampWidgetParams,
+  CheckoutWidgetParams,
 } from './parameters';
 import { SaleWidgetParams } from './parameters/sale';
 import {
@@ -50,6 +52,7 @@ import {
   SaleWidgetConfiguration,
   SwapWidgetConfiguration,
   WalletWidgetConfiguration,
+  CheckoutWidgetConfiguration,
 } from './configurations';
 import { WidgetTheme } from './configurations/theme';
 
@@ -63,6 +66,7 @@ export enum WidgetType {
   BRIDGE = 'bridge',
   ONRAMP = 'onramp',
   SALE = 'sale',
+  CHECKOUT = 'checkout',
 }
 
 /**
@@ -79,7 +83,8 @@ export type WidgetConfigurations = {
   [WidgetType.SWAP]: SwapWidgetConfiguration,
   [WidgetType.BRIDGE]: BridgeWidgetConfiguration,
   [WidgetType.ONRAMP]: OnrampWidgetConfiguration,
-  [WidgetType.SALE]: SaleWidgetConfiguration
+  [WidgetType.SALE]: SaleWidgetConfiguration,
+  [WidgetType.CHECKOUT]: CheckoutWidgetConfiguration,
 };
 
 // Mapping each widget type to their parameters
@@ -89,7 +94,8 @@ export type WidgetParameters = {
   [WidgetType.SWAP]: SwapWidgetParams,
   [WidgetType.BRIDGE]: BridgeWidgetParams,
   [WidgetType.ONRAMP]: OnRampWidgetParams,
-  [WidgetType.SALE]: SaleWidgetParams
+  [WidgetType.SALE]: SaleWidgetParams,
+  [WidgetType.CHECKOUT]: CheckoutWidgetParams,
 };
 
 /**
@@ -101,7 +107,8 @@ export type WidgetEventTypes = {
   [WidgetType.SWAP]: SwapEventType | OrchestrationEventType,
   [WidgetType.BRIDGE]: BridgeEventType | OrchestrationEventType,
   [WidgetType.ONRAMP]: OnRampEventType | OrchestrationEventType,
-  [WidgetType.SALE]: SaleEventType | OrchestrationEventType
+  [WidgetType.SALE]: SaleEventType | OrchestrationEventType,
+  [WidgetType.CHECKOUT]: CheckoutEventType | OrchestrationEventType,
 };
 
 // Mapping of Orchestration events to their payloads
@@ -168,7 +175,10 @@ export type WidgetEventData = {
     [SaleEventType.REQUEST_BRIDGE]: {},
     [SaleEventType.REQUEST_SWAP]: {},
     [SaleEventType.REQUEST_ONRAMP]: {},
-  } & OrchestrationMapping & ProviderEventMapping
+  } & OrchestrationMapping & ProviderEventMapping,
+
+  [WidgetType.CHECKOUT]: {
+  } & OrchestrationMapping & ProviderEventMapping,
 };
 
 /**

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

@@ -8,6 +8,7 @@ import {
   WidgetConfigurations,
 } from '@imtbl/checkout-sdk';
 import { Web3Provider } from '@ethersproject/providers';
+import { Environment } from '@imtbl/config';
 import { Connect } from './widgets/connect/ConnectWidgetRoot';
 import { Swap } from './widgets/swap/SwapWidgetRoot';
 import { OnRamp } from './widgets/on-ramp/OnRampWidgetRoot';
@@ -21,6 +22,7 @@ import {
   DEFAULT_THEME,
 } from './lib';
 import './i18n';
+import { CheckoutWidgetRoot } from './widgets/checkout/CheckoutWidgetRoot';
 
 export class WidgetsFactory implements IWidgetsFactory {
   private sdk: Checkout;
@@ -92,6 +94,15 @@ export class WidgetsFactory implements IWidgetsFactory {
           provider,
         }) as Widget<WidgetType.SALE> as Widget<T>;
       }
+      case WidgetType.CHECKOUT: {
+        if (this.sdk.config.environment === Environment.PRODUCTION) {
+          throw new Error('Checkout widget is not supported in production');
+        }
+        return new CheckoutWidgetRoot(this.sdk, {
+          config: { ...this.widgetConfig, ...(config) },
+          provider,
+        }) as Widget<WidgetType.CHECKOUT> as Widget<T>;
+      }
       default:
         throw new Error('widget type not supported');
     }

packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx

@@ -0,0 +1,26 @@
+import { CheckoutWidgetParams } from '@imtbl/checkout-sdk';
+import {
+  useContext,
+} from 'react';
+import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
+import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
+
+export type CheckoutWidgetInputs = CheckoutWidgetParams & {
+  config: StrongCheckoutWidgetsConfig,
+};
+
+export default function CheckoutWidget(props: CheckoutWidgetInputs) {
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    config,
+  } = props;
+
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    connectLoaderState: { checkout, provider },
+  } = useContext(ConnectLoaderContext);
+
+  return (
+    <div />
+  );
+}

packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidgetRoot.tsx

@@ -0,0 +1,87 @@
+import {
+  ChainId,
+  IMTBLWidgetEvents,
+  CheckoutWidgetConfiguration,
+  CheckoutWidgetParams,
+  WidgetProperties,
+  WidgetTheme,
+  WidgetType,
+} from '@imtbl/checkout-sdk';
+import React, { Suspense } from 'react';
+import { ConnectLoader, ConnectLoaderParams } from '../../components/ConnectLoader/ConnectLoader';
+import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
+import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
+import { HandoverProvider } from '../../context/handover-context/HandoverProvider';
+import i18n from '../../i18n';
+import { getL1ChainId, getL2ChainId } from '../../lib';
+import { LoadingView } from '../../views/loading/LoadingView';
+import { Base } from '../BaseWidgetRoot';
+
+const CheckoutWidget = React.lazy(() => import('./CheckoutWidget'));
+
+export class CheckoutWidgetRoot extends Base<WidgetType.CHECKOUT> {
+  protected eventTopic: IMTBLWidgetEvents = IMTBLWidgetEvents.IMTBL_CHECKOUT_WIDGET_EVENT;
+
+  protected getValidatedProperties(
+    { config }: WidgetProperties<WidgetType.CHECKOUT>,
+  ): WidgetProperties<WidgetType.CHECKOUT> {
+    let validatedConfig: CheckoutWidgetConfiguration | undefined;
+
+    if (config) {
+      validatedConfig = config;
+      if (config.theme === WidgetTheme.LIGHT) validatedConfig.theme = WidgetTheme.LIGHT;
+      else validatedConfig.theme = WidgetTheme.DARK;
+    }
+
+    return {
+      config: validatedConfig,
+    };
+  }
+
+  protected getValidatedParameters(params: CheckoutWidgetParams): CheckoutWidgetParams {
+    const validatedParams = params;
+
+    return validatedParams;
+  }
+
+  protected render() {
+    if (!this.reactRoot) return;
+
+    const { t } = i18n;
+    const connectLoaderParams: ConnectLoaderParams = {
+      targetChainId: this.checkout.config.isProduction
+        ? ChainId.IMTBL_ZKEVM_MAINNET
+        : ChainId.IMTBL_ZKEVM_TESTNET,
+      // walletProviderName: this.parameters?.walletProviderName,
+      web3Provider: this.web3Provider,
+      checkout: this.checkout,
+      allowedChains: [getL1ChainId(this.checkout.config), getL2ChainId(this.checkout.config)],
+    };
+
+    this.reactRoot.render(
+      <React.StrictMode>
+        <CustomAnalyticsProvider checkout={this.checkout}>
+          <ThemeProvider id="checkout-container" config={this.strongConfig()}>
+            <HandoverProvider>
+              <ConnectLoader
+                widgetConfig={this.strongConfig()}
+                params={connectLoaderParams}
+                closeEvent={() => { }}
+              >
+                <Suspense
+                  fallback={
+                    <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
+                  }
+                >
+                  <CheckoutWidget
+                    config={this.strongConfig()}
+                  />
+                </Suspense>
+              </ConnectLoader>
+            </HandoverProvider>
+          </ThemeProvider>
+        </CustomAnalyticsProvider>
+      </React.StrictMode>,
+    );
+  }
+}

packages/checkout/widgets-sample-app/src/App.tsx

@@ -27,6 +27,10 @@ function App() {
           <a href={"/on-ramp"}>On-ramp Widget</a>
         </div>
         <br />
+        <div>
+          <a href={"/checkout"}>Checkout Widget</a>
+        </div>
+        <br />
         <div>
           <a
             href={

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

@@ -0,0 +1,32 @@
+import { Checkout, WidgetTheme, WidgetType } from '@imtbl/checkout-sdk';
+import { WidgetsFactory } from '@imtbl/checkout-widgets';
+import { useEffect, useMemo } from 'react';
+import { Environment } from '@imtbl/config';
+
+function CheckoutUI() {
+  const checkout = useMemo(() => new Checkout({ baseConfig: { environment: Environment.SANDBOX } }), []);
+  const factory = useMemo(() => new WidgetsFactory(checkout, { theme: WidgetTheme.DARK }), [checkout]);
+  const checkoutWidget = useMemo(() => factory.create(WidgetType.CHECKOUT), [checkout])
+
+  const unmount = () => { checkoutWidget.unmount() }
+  const mount = () => { checkoutWidget.mount('checkout') }
+  const update = (theme: WidgetTheme) => { checkoutWidget.update({ config: { theme } }) }
+
+  useEffect(() => {
+    mount();
+  }, []);
+
+  return (
+    <div>
+      <h1 className="sample-heading">Checkout Widget</h1>
+      <div id="checkout"></div>
+      <button onClick={unmount}>Unmount</button>
+      <button onClick={mount}>Mount</button>
+      <button onClick={() => update(WidgetTheme.LIGHT)}>Light theme</button>
+      <button onClick={() => update(WidgetTheme.DARK)}>Dark theme</button>
+
+    </div>
+  );
+}
+
+export default CheckoutUI;

packages/checkout/widgets-sample-app/src/index.tsx

@@ -11,6 +11,7 @@ import OnRampUI from "./components/ui/on-ramp/onRamp";
 import { PassportLoginCallback } from './components/ui/marketplace-orchestrator/PassportLoginCallback';
 import { Marketplace } from './components/ui/marketplace-orchestrator';
 import { SaleUI } from './components/ui/sale/sale';
+import CheckoutUI from './components/ui/checkout/checkout';
 
 const router = createBrowserRouter([
   {
@@ -41,6 +42,10 @@ const router = createBrowserRouter([
     path: '/sale',
     element: <SaleUI />,
   },
+  {
+    path: '/checkout',
+    element: <CheckoutUI />,
+  },
   {
     path: '/marketplace-orchestrator',
     element: <Marketplace />