[NO CHANGELOG][Add Funds Widget] Add funds/squid config (#2178)

Co-authored-by: Mimi Tran <[email protected]>

packages/checkout/sdk/src/index.ts

@@ -144,6 +144,7 @@ export type {
   TransactionRequirement,
   WalletFilter,
   WalletInfo,
+  SquidConfig,
 } from './types';
 
 export {

packages/checkout/sdk/src/types/config.ts

@@ -60,6 +60,7 @@ export interface CheckoutModuleConfiguration extends ModuleConfiguration<Checkou
  * @property {GasEstimateTokenConfig | undefined} gasEstimateTokens
  * @property {ImxAddressConfig | undefined} imxAddressMapping
  * @property {TelemetryConfig | undefined} telemetry
+ * @property {SquidConfig | undefined} squid
  */
 export type RemoteConfiguration = {
   /** The config used for the Connect. */
@@ -78,6 +79,8 @@ export type RemoteConfiguration = {
   imxAddressMapping?: ImxAddressConfig;
   /** Telemetry config. */
   telemetry?: TelemetryConfig;
+  /** Squid config. */
+  squid?: SquidConfig;
 };
 
 /**
@@ -204,6 +207,14 @@ export type TelemetryConfig = {
   segmentPublishableKey: string
 };
 
+/**
+ * A type representing the squid integrator id.
+ * @property {string} integratorId
+ */
+export type SquidConfig = {
+  integratorId: string
+};
+
 /**
  * A type representing the required information to estimate gas for a transaction.
  * @type {{ [key: string]: { bridgeToL2Addresses?: GasEstimateBridgeToL2TokenConfig, swapAddresses?: GasEstimateSwapTokenConfig } }}

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

@@ -12,6 +12,8 @@ import { EventTargetContext } from '../../context/event-target-context/EventTarg
 
 import {
   AddFundsActions, AddFundsContext,
+  addFundsReducer,
+  initialAddFundsState,
 } from './context/AddFundsContext';
 import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { AddFundsWidgetViews } from '../../context/view-context/AddFundsViewContextTypes';
@@ -20,7 +22,7 @@ import {
 } from '../../context/view-context/ViewContext';
 import { AddFunds } from './views/AddFunds';
 import { ErrorView } from '../../views/error/ErrorView';
-import { AddFundsContextProvider } from './context/AddFundsContextProvider';
+import { useSquid } from './hooks/useSquid';
 
 export type AddFundsWidgetInputs = AddFundsWidgetParams & {
   checkout: Checkout;
@@ -54,7 +56,29 @@ export default function AddFundsWidget({
     }),
     [viewState, viewReducer],
   );
-  const { addFundsDispatch } = useContext(AddFundsContext);
+
+  const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, initialAddFundsState);
+
+  const addFundsReducerValues = useMemo(
+    () => ({
+      addFundsState,
+      addFundsDispatch,
+    }),
+    [addFundsState, addFundsDispatch],
+  );
+
+  const squid = useSquid(checkout);
+
+  useEffect(() => {
+    if (!squid || addFundsState.squid) return;
+
+    addFundsDispatch({
+      payload: {
+        type: AddFundsActions.SET_SQUID,
+        squid,
+      },
+    });
+  }, [squid]);
 
   useEffect(() => {
     if (!web3Provider) return;
@@ -82,7 +106,7 @@ export default function AddFundsWidget({
 
   return (
     <ViewContext.Provider value={viewReducerValues}>
-      <AddFundsContextProvider>
+      <AddFundsContext.Provider value={addFundsReducerValues}>
         {viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (
         <AddFunds
           checkout={checkout}
@@ -109,7 +133,7 @@ export default function AddFundsWidget({
           }}
         />
         )}
-      </AddFundsContextProvider>
+      </AddFundsContext.Provider>
     </ViewContext.Provider>
   );
 }

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

@@ -1,5 +1,5 @@
 import { Web3Provider } from '@ethersproject/providers';
-import { createContext, useMemo, useReducer } from 'react';
+import { createContext } from 'react';
 import { Checkout, TokenInfo } from '@imtbl/checkout-sdk';
 import { Squid } from '@0xsquid/sdk';
 
@@ -10,7 +10,7 @@ export interface AddFundsState {
   squid: Squid | null;
 }
 
-const initialAddFundsState: AddFundsState = {
+export const initialAddFundsState: AddFundsState = {
   checkout: null,
   provider: null,
   allowedTokens: null,
@@ -66,9 +66,9 @@ export const AddFundsContext = createContext<AddFundsContextState>({
 
 AddFundsContext.displayName = 'AddFundsContext';
 
-type Reducer<S, A> = (prevState: S, action: A) => S;
+export type Reducer<S, A> = (prevState: S, action: A) => S;
 
-const addFundsReducer: Reducer<AddFundsState, AddFundsAction> = (
+export const addFundsReducer: Reducer<AddFundsState, AddFundsAction> = (
   state: AddFundsState,
   action: AddFundsAction,
 ) => {
@@ -97,9 +97,3 @@ const addFundsReducer: Reducer<AddFundsState, AddFundsAction> = (
       return state;
   }
 };
-
-export const useAddFundsValues = (overrides: Partial<AddFundsState> = {}) => {
-  const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, { ...initialAddFundsState, ...overrides });
-  const values = useMemo(() => ({ addFundsState, addFundsDispatch }), [addFundsState, addFundsDispatch]);
-  return values;
-};

packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useSquid.ts

@@ -1,22 +1,43 @@
 import { Squid } from '@0xsquid/sdk';
-import { useEffect, useState } from 'react';
+import { Checkout, SquidConfig } from '@imtbl/checkout-sdk';
+import { useCallback, useEffect, useState } from 'react';
+import { SQUID_SDK_BASE_URL } from '../utils/config';
 
-export const useSquid = () => {
+export const useSquid = (checkout: Checkout) => {
   const [squid, setSquid] = useState<Squid | null>(null);
 
+  const squidConfig = useCallback(async (): Promise<
+  SquidConfig | undefined
+  > => {
+    try {
+      return (await checkout?.config?.remote.getConfig('squid')) as SquidConfig;
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error('Unable to fetch squid config: ', err);
+    }
+    return undefined;
+  }, [checkout]);
+
   useEffect(() => {
-    if (squid) {
+    if (squid || !squidConfig) {
       return;
     }
-
     const initialiseSquid = async () => {
-      const squidSDK = null;
+      const config = await squidConfig();
+
+      if (!config?.integratorId) return;
+
+      const squidSDK = new Squid({
+        baseUrl: SQUID_SDK_BASE_URL,
+        integratorId: config.integratorId,
+      });
 
+      await squidSDK.init();
       setSquid(squidSDK);
     };
 
     initialiseSquid();
-  }, []);
+  }, [squidConfig]);
 
   return squid;
 };