[NO CHANGELOG][Checkout widget] Feature: Add Checkout Widget (#2188)

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

@@ -9,10 +9,10 @@ import { SaleWidgetConfiguration } from './sale';
 import { WidgetConfiguration } from './widget';
 
 export type CheckoutWidgetConfiguration = {
-  connect?: Omit<ConnectWidgetConfiguration, keyof WidgetConfiguration>;
-  wallet?: Omit<WalletWidgetConfiguration, keyof WidgetConfiguration>;
-  swap?: Omit<SwapWidgetConfiguration, keyof WidgetConfiguration>;
-  bridge?: Omit<BridgeWidgetConfiguration, keyof WidgetConfiguration>;
-  onRamp?: Omit<OnrampWidgetConfiguration, keyof WidgetConfiguration>;
-  sale?: Omit<SaleWidgetConfiguration, keyof WidgetConfiguration>;
+  CONNECT?: Omit<ConnectWidgetConfiguration, keyof WidgetConfiguration>;
+  WALLET?: Omit<WalletWidgetConfiguration, keyof WidgetConfiguration>;
+  SWAP?: Omit<SwapWidgetConfiguration, keyof WidgetConfiguration>;
+  BRIDGE?: Omit<BridgeWidgetConfiguration, keyof WidgetConfiguration>;
+  ONRAMP?: Omit<OnrampWidgetConfiguration, keyof WidgetConfiguration>;
+  SALE?: Omit<SaleWidgetConfiguration, keyof WidgetConfiguration>;
 } & Omit<WidgetConfiguration, 'walletConnect'>;

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

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

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

@@ -81,10 +81,10 @@ export type RequestGoBackEvent = {
 };
 
 /*
-* Type representing the orchestration events.
-*/
+ * Type representing the orchestration events.
+ */
 export type OrchestrationEventData =
-  RequestConnectEvent
+  | RequestConnectEvent
   | RequestWalletEvent
   | RequestSwapEvent
   | RequestBridgeEvent

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

@@ -6,14 +6,16 @@ import { WalletWidgetParams } from './wallet';
 import { SwapWidgetParams } from './swap';
 import { OnRampWidgetParams } from './onramp';
 import { SaleWidgetParams } from './sale';
+import { AddFundsWidgetParams } from './addFunds';
 
 export enum CheckoutFlowType {
-  CONNECT = 'connect',
-  WALLET = 'wallet',
-  SWAP = 'swap',
-  BRIDGE = 'bridge',
-  ONRAMP = 'onramp',
-  SALE = 'sale',
+  CONNECT = 'CONNECT',
+  WALLET = 'WALLET',
+  SALE = 'SALE',
+  SWAP = 'SWAP',
+  BRIDGE = 'BRIDGE',
+  ONRAMP = 'ONRAMP',
+  ADD_FUNDS = 'ADD_FUNDS',
 }
 
 export type CheckoutWidgetConnectFlowParams = {
@@ -40,13 +42,18 @@ export type CheckouWidgetSaleFlowParams = {
   flow: CheckoutFlowType.SALE;
 } & SaleWidgetParams;
 
+export type CheckouWidgetAddFundsFlowParams = {
+  flow: CheckoutFlowType.ADD_FUNDS;
+} & AddFundsWidgetParams;
+
 export type CheckoutWidgetFlowParams =
   | CheckoutWidgetConnectFlowParams
   | CheckoutWidgetWalletFlowParams
   | CheckouWidgetSwapFlowParams
   | CheckouWidgetBridgeFlowParams
   | CheckouWidgetOnRampFlowParams
-  | CheckouWidgetSaleFlowParams;
+  | CheckouWidgetSaleFlowParams
+  | CheckouWidgetAddFundsFlowParams;
 
 export type CheckoutWidgetParams = {
   /** The language to use for the checkout widget */

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

@@ -41,6 +41,7 @@ import {
   CheckoutUserActionEvent,
   RequestAddFundsEvent,
   RequestGoBackEvent,
+  AddFundsEventType,
 } from './events';
 import {
   BridgeWidgetParams,
@@ -49,6 +50,7 @@ import {
   WalletWidgetParams,
   OnRampWidgetParams,
   CheckoutWidgetParams,
+  AddFundsWidgetParams,
 } from './parameters';
 import { SaleWidgetParams } from './parameters/sale';
 import {
@@ -59,11 +61,9 @@ import {
   SwapWidgetConfiguration,
   WalletWidgetConfiguration,
   CheckoutWidgetConfiguration,
+  AddFundsWidgetConfiguration,
 } from './configurations';
 import { WidgetTheme } from './configurations/theme';
-import { AddFundsWidgetConfiguration } from './configurations/addFunds';
-import { AddFundsWidgetParams } from './parameters/addFunds';
-import { AddFundsEventType } from './events/addFunds';
 
 /**
  * Enum representing the list of widget types.
@@ -94,8 +94,9 @@ export type WidgetConfigurations = {
   [WidgetType.BRIDGE]: BridgeWidgetConfiguration;
   [WidgetType.ONRAMP]: OnrampWidgetConfiguration;
   [WidgetType.SALE]: SaleWidgetConfiguration;
-  [WidgetType.CHECKOUT]: CheckoutWidgetConfiguration;
   [WidgetType.ADD_FUNDS]: AddFundsWidgetConfiguration;
+
+  [WidgetType.CHECKOUT]: CheckoutWidgetConfiguration;
 };
 
 // Mapping each widget type to their parameters
@@ -106,8 +107,9 @@ export type WidgetParameters = {
   [WidgetType.BRIDGE]: BridgeWidgetParams;
   [WidgetType.ONRAMP]: OnRampWidgetParams;
   [WidgetType.SALE]: SaleWidgetParams;
-  [WidgetType.CHECKOUT]: CheckoutWidgetParams;
   [WidgetType.ADD_FUNDS]: AddFundsWidgetParams;
+
+  [WidgetType.CHECKOUT]: CheckoutWidgetParams;
 };
 
 /**

packages/checkout/widgets-lib/src/context/connect-loader-context/ConnectLoaderContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useReducer } from 'react';
 import { Checkout } from '@imtbl/checkout-sdk';
 import { Web3Provider } from '@ethersproject/providers';
 import { ConnectWidgetViews } from '../view-context/ConnectViewContextTypes';
@@ -91,3 +91,9 @@ ConnectLoaderAction
       return state;
   }
 };
+
+export const useConnectLoaderState = () => {
+  const [connectLoaderState, connectLoaderDispatch] = useReducer(connectLoaderReducer, initialConnectLoaderState);
+
+  return [connectLoaderState, connectLoaderDispatch] as const;
+};

packages/checkout/widgets-lib/src/context/event-target-context/EventTargetContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useReducer } from 'react';
 
 export interface EventTargetState {
   eventTarget: Window | EventTarget
@@ -50,3 +50,9 @@ EventTargetAction
       return state;
   }
 };
+
+export const useEventTargetState = () => {
+  const [eventTargetState, eventTargetDispatch] = useReducer(eventTargetReducer, initialEventTargetState);
+
+  return [eventTargetState, eventTargetDispatch] as const;
+};

packages/checkout/widgets-lib/src/context/view-context/CheckoutWidgetViewContextTypes.ts

@@ -0,0 +1,83 @@
+import {
+  BridgeWidgetConfiguration,
+  BridgeWidgetParams,
+  OnrampWidgetConfiguration,
+  OnRampWidgetParams,
+  SaleWidgetConfiguration,
+  SaleWidgetParams,
+  SwapWidgetConfiguration,
+  SwapWidgetParams,
+  AddFundsWidgetParams,
+  AddFundsWidgetConfiguration,
+  CheckoutFlowType,
+  ConnectWidgetParams,
+  ConnectWidgetConfiguration,
+  WalletWidgetParams,
+  WalletWidgetConfiguration,
+} from '@imtbl/checkout-sdk';
+import { ViewType } from './ViewType';
+
+export type CheckoutWidgetView =
+  | ConnectView
+  | WalletView
+  | AddFundsView
+  | SaleView
+  | SwapView
+  | OnRampView
+  | BrdigeView;
+
+interface ConnectView extends ViewType {
+  type: CheckoutFlowType.CONNECT;
+  data: {
+    params: ConnectWidgetParams;
+    config: ConnectWidgetConfiguration;
+  };
+}
+
+interface WalletView extends ViewType {
+  type: CheckoutFlowType.WALLET;
+  data: {
+    params: WalletWidgetParams;
+    config: WalletWidgetConfiguration;
+  };
+}
+
+interface AddFundsView extends ViewType {
+  type: CheckoutFlowType.ADD_FUNDS;
+  data: {
+    params: AddFundsWidgetParams;
+    config: AddFundsWidgetConfiguration;
+  };
+}
+
+interface SaleView extends ViewType {
+  type: CheckoutFlowType.SALE;
+  data: {
+    params: Required<SaleWidgetParams>;
+    config: SaleWidgetConfiguration;
+  };
+}
+
+interface SwapView extends ViewType {
+  type: CheckoutFlowType.SWAP;
+  data: {
+    params: SwapWidgetParams;
+    config: SwapWidgetConfiguration;
+  };
+}
+
+interface OnRampView extends ViewType {
+  type: CheckoutFlowType.ONRAMP;
+  data: {
+    params: OnRampWidgetParams;
+    config: OnrampWidgetConfiguration;
+  };
+}
+
+interface BrdigeView extends ViewType {
+  type: CheckoutFlowType.BRIDGE;
+  data: {
+    params: BridgeWidgetParams;
+    config: BridgeWidgetConfiguration;
+  };
+}

packages/checkout/widgets-lib/src/context/view-context/ViewContext.ts → packages/checkout/widgets-lib/src/context/view-context/ViewContext.tsx

@@ -1,4 +1,6 @@
-import { createContext } from 'react';
+import {
+  createContext, ReactNode, useMemo, useReducer,
+} from 'react';
 import { ConnectWidgetView } from './ConnectViewContextTypes';
 import { WalletWidgetView } from './WalletViewContextTypes';
 import { PrefilledSwapForm, SwapWidgetView } from './SwapViewContextTypes';
@@ -7,28 +9,30 @@ import { SaleWidgetView } from './SaleViewContextTypes';
 import { ViewType } from './ViewType';
 import { OnRampWidgetView } from './OnRampViewContextTypes';
 import { AddFundsWidgetView } from './AddFundsViewContextTypes';
+import { CheckoutWidgetView } from './CheckoutWidgetViewContextTypes';
 
 export enum SharedViews {
   LOADING_VIEW = 'LOADING_VIEW',
   ERROR_VIEW = 'ERROR_VIEW',
-  SERVICE_UNAVAILABLE_ERROR_VIEW = 'SERVICE_UNAVAILABLE_ERROR_VIEW',
+  SUCCESS_VIEW = 'SUCCESS_VIEW',
   TOP_UP_VIEW = 'TOP_UP_VIEW',
+  SERVICE_UNAVAILABLE_ERROR_VIEW = 'SERVICE_UNAVAILABLE_ERROR_VIEW',
 }
 
 export type SharedView =
-  LoadingView
+  | LoadingView
   | ErrorView
   | ServiceUnavailableErrorView
   | TopUpView;
 
 interface LoadingView extends ViewType {
-  type: SharedViews.LOADING_VIEW
+  type: SharedViews.LOADING_VIEW;
 }
 
 export interface ErrorView extends ViewType {
   type: SharedViews.ERROR_VIEW;
   error: Error;
-  tryAgain?: () => Promise<any>
+  tryAgain?: () => Promise<any>;
 }
 
 interface ServiceUnavailableErrorView extends ViewType {
@@ -37,19 +41,20 @@ interface ServiceUnavailableErrorView extends ViewType {
 }
 
 interface TopUpView extends ViewType {
-  type: SharedViews.TOP_UP_VIEW,
-  swapData?: PrefilledSwapForm,
+  type: SharedViews.TOP_UP_VIEW;
+  swapData?: PrefilledSwapForm;
 }
 
 export type View =
-  SharedView
+  | SharedView
   | ConnectWidgetView
   | WalletWidgetView
   | SwapWidgetView
   | OnRampWidgetView
   | SaleWidgetView
   | BridgeWidgetView
-  | AddFundsWidgetView;
+  | AddFundsWidgetView
+  | CheckoutWidgetView;
 
 export interface ViewState {
   view: View;
@@ -98,7 +103,7 @@ export interface GoBackToPayload {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const ViewContext = createContext<ViewContextState>({
   viewState: initialViewState,
-  viewDispatch: () => { },
+  viewDispatch: () => {},
 });
 
 ViewContext.displayName = 'ViewContext'; // help with debugging Context in browser
@@ -124,7 +129,10 @@ export const viewReducer: Reducer<ViewState, ViewAction> = (
       ) {
         // currentViewData should only be set on the current view before updating
         if (currentViewData) {
-          history[history.length - 1] = { ...history[history.length - 1], data: currentViewData };
+          history[history.length - 1] = {
+            ...history[history.length - 1],
+            data: currentViewData,
+          };
         }
 
         history.push(view);
@@ -177,3 +185,28 @@ export const viewReducer: Reducer<ViewState, ViewAction> = (
       return state;
   }
 };
+
+export const useViewState = () => {
+  const [viewState, viewDispatch] = useReducer(viewReducer, initialViewState);
+
+  return [viewState, viewDispatch] as const;
+};
+
+type ViewContextProviderProps = {
+  children: ReactNode;
+};
+
+export function ViewContextProvider({ children }: ViewContextProviderProps) {
+  const [viewState, viewDispatch] = useViewState();
+
+  const viewReducerValues = useMemo(
+    () => ({ viewState, viewDispatch }),
+    [viewState, viewDispatch],
+  );
+
+  return (
+    <ViewContext.Provider value={viewReducerValues}>
+      {children}
+    </ViewContext.Provider>
+  );
+}

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

@@ -115,12 +115,3 @@ export const IMAGE_RESIZER_URL = {
 };
 
 export const WITHDRAWAL_CLAIM_GAS_LIMIT = 91000;
-
-/**
- * URL for Checkout App based on the environment.
- */
-export const CHECKOUT_APP_URL = {
-  [ENV_DEVELOPMENT]: 'https://checkout.dev.immutable.com',
-  [Environment.SANDBOX]: 'https://checkout.sandbox.immutable.com',
-  [Environment.PRODUCTION]: 'https://checkout.immutable.com',
-};