[NO CHANGELOG][Add Funds Widget] AddFundContext (#2117)

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

@@ -1,6 +1,8 @@
 import { AddFundsWidgetParams, Checkout } from '@imtbl/checkout-sdk';
 import { Web3Provider } from '@ethersproject/providers';
-import { useContext, useMemo, useReducer } from 'react';
+import {
+  useContext, useEffect, useMemo, useReducer,
+} from 'react';
 import {
   sendAddFundsCloseEvent,
   sendAddFundsGoBackEvent,
@@ -12,6 +14,9 @@ import {
   viewReducer,
 } from '../../context/view-context/ViewContext';
 import { AddFunds } from './views/AddFunds';
+import {
+  AddFundsActions, AddFundsContext, addFundsReducer, initialAddFundsState,
+} from './context/AddFundsContext';
 
 export type AddFundsWidgetInputs = AddFundsWidgetParams & {
   checkout: Checkout;
@@ -30,27 +35,61 @@ export default function AddFundsWidget({
   const [viewState, viewDispatch] = useReducer(viewReducer, initialViewState);
 
   const viewReducerValues = useMemo(
-    () => ({ viewState, viewDispatch }),
+    () => ({
+      viewState,
+      viewDispatch,
+    }),
     [viewState, viewReducer],
   );
+  const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, initialAddFundsState);
+
+  const addFundsReducerValues = useMemo(
+    () => ({
+      addFundsState,
+      addFundsDispatch,
+    }),
+    [addFundsState, addFundsDispatch],
+  );
+
+  useEffect(() => {
+    if (!web3Provider) return;
+    addFundsDispatch({
+      payload: {
+        type: AddFundsActions.SET_PROVIDER,
+        provider: web3Provider,
+      },
+    });
+  }, [web3Provider]);
+
+  useEffect(() => {
+    if (!checkout) return;
+    addFundsDispatch({
+      payload: {
+        type: AddFundsActions.SET_CHECKOUT,
+        checkout,
+      },
+    });
+  }, [checkout]);
 
   const {
     eventTargetState: { eventTarget },
   } = useContext(EventTargetContext);
 
   return (
     <ViewContext.Provider value={viewReducerValues}>
-      <AddFunds
-        checkout={checkout}
-        provider={web3Provider}
-        tokenAddress={tokenAddress}
-        amount={amount}
-        showOnrampOption={showOnrampOption}
-        showSwapOption={showSwapOption}
-        showBridgeOption={showBridgeOption}
-        onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
-        onBackButtonClick={() => sendAddFundsGoBackEvent(eventTarget)}
-      />
+      <AddFundsContext.Provider value={addFundsReducerValues}>
+        <AddFunds
+          checkout={checkout}
+          provider={web3Provider}
+          tokenAddress={tokenAddress}
+          amount={amount}
+          showOnrampOption={showOnrampOption}
+          showSwapOption={showSwapOption}
+          showBridgeOption={showBridgeOption}
+          onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
+          onBackButtonClick={() => sendAddFundsGoBackEvent(eventTarget)}
+        />
+      </AddFundsContext.Provider>
     </ViewContext.Provider>
   );
 }

packages/checkout/widgets-lib/src/widgets/add-funds/context/AddFundsContext.ts

@@ -0,0 +1,72 @@
+import { Web3Provider } from '@ethersproject/providers';
+import { createContext } from 'react';
+import { Checkout } from '@imtbl/checkout-sdk';
+
+export interface AddFundsState {
+  checkout: Checkout | null;
+  provider: Web3Provider | null;
+}
+
+export const initialAddFundsState: AddFundsState = {
+  checkout: null,
+  provider: null,
+};
+
+export interface AddFundsContextState {
+  addFundsState: AddFundsState;
+  addFundsDispatch: React.Dispatch<AddFundsAction>;
+}
+
+export interface AddFundsAction {
+  payload: ActionPayload;
+}
+
+type ActionPayload =
+    | SetCheckoutPayload
+    | SetProviderPayload;
+
+export enum AddFundsActions {
+  SET_CHECKOUT = 'SET_CHECKOUT',
+  SET_PROVIDER = 'SET_PROVIDER',
+}
+
+export interface SetCheckoutPayload {
+  type: AddFundsActions.SET_CHECKOUT;
+  checkout: Checkout;
+}
+
+export interface SetProviderPayload {
+  type: AddFundsActions.SET_PROVIDER;
+  provider: Web3Provider;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const AddFundsContext = createContext<AddFundsContextState>({
+  addFundsState: initialAddFundsState,
+  addFundsDispatch: () => {
+  },
+});
+
+AddFundsContext.displayName = 'AddFundsContext';
+
+export type Reducer<S, A> = (prevState: S, action: A) => S;
+
+export const addFundsReducer: Reducer<AddFundsState, AddFundsAction> = (
+  state: AddFundsState,
+  action: AddFundsAction,
+) => {
+  switch (action.payload.type) {
+    case AddFundsActions.SET_CHECKOUT:
+      return {
+        ...state,
+        checkout: action.payload.checkout,
+      };
+    case AddFundsActions.SET_PROVIDER:
+      return {
+        ...state,
+        provider: action.payload.provider,
+      };
+    default:
+      return state;
+  }
+};