diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx index adbc555cec..aabcd84e42 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx +++ b/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,9 +35,41 @@ 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 }, @@ -40,17 +77,19 @@ export default function AddFundsWidget({ return ( - sendAddFundsCloseEvent(eventTarget)} - onBackButtonClick={() => sendAddFundsGoBackEvent(eventTarget)} - /> + + sendAddFundsCloseEvent(eventTarget)} + onBackButtonClick={() => sendAddFundsGoBackEvent(eventTarget)} + /> + ); } diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/context/AddFundsContext.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/context/AddFundsContext.ts new file mode 100644 index 0000000000..cc77bc2cee --- /dev/null +++ b/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; +} + +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({ + addFundsState: initialAddFundsState, + addFundsDispatch: () => { + }, +}); + +AddFundsContext.displayName = 'AddFundsContext'; + +export type Reducer = (prevState: S, action: A) => S; + +export const addFundsReducer: Reducer = ( + 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; + } +};