feat!: make integrator property required

packages/widget-embedded/src/App.tsx

@@ -25,6 +25,7 @@ export const App = () => {
           }
           contractTool={openSeaContractTool}
           config={widgetConfig}
+          integrator={widgetConfig.integrator}
           open
         />
       </Box>

packages/widget-playground/src/App.tsx

@@ -24,11 +24,11 @@ import {
   Typography,
   useMediaQuery,
 } from '@mui/material';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 import { WalletButtons } from './components/WalletButtons';
 import { WidgetEvents } from './components/WidgetEvents';
-import { widgetBaseConfig, widgetConfig, WidgetVariants } from './config';
+import { WidgetVariants, widgetBaseConfig, widgetConfig } from './config';
 import './index.css';
 import { useWallet } from './providers/WalletProvider';
 
@@ -313,7 +313,7 @@ export const App = () => {
           </Box>
         </Drawer>
         <Box flex={1} margin="auto">
-          <LiFiWidget config={config} open />
+          <LiFiWidget integrator={config.integrator} config={config} open />
         </Box>
       </Box>
     </ThemeProvider>

packages/widget-playground/src/providers/WalletProvider.tsx

@@ -2,10 +2,10 @@ import type { Signer } from '@ethersproject/abstract-signer';
 import type { Token } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 import {
-  addChain as walletAddChain,
-  switchChain as walletSwitchChain,
   switchChainAndAddToken,
   useLiFiWalletManagement,
+  addChain as walletAddChain,
+  switchChain as walletSwitchChain,
 } from '@lifi/wallet-management';
 import type { WalletAccount, WalletContextProps } from '@lifi/widget/providers';
 import type { FC, PropsWithChildren } from 'react';

packages/widget/src/App.tsx

@@ -16,16 +16,20 @@ import { useExpandableVariant } from './hooks';
 import type { WidgetProps } from './types';
 
 export const App: React.FC<WidgetProps> = forwardRef<WidgetDrawer, WidgetProps>(
-  ({ elementRef, open, ...other }, ref) => {
-    const config = useMemo(() => ({ ...other, ...other.config }), [other]);
+  ({ elementRef, open, integrator, ...other }, ref) => {
+    const config = useMemo(
+      () => ({ integrator, ...other, ...other.config }),
+      [integrator, other],
+    );
     return config?.variant !== 'drawer' ? (
-      <AppProvider config={config}>
+      <AppProvider integrator={integrator} config={config}>
         <AppDefault />
       </AppProvider>
     ) : (
       <AppDrawer
         ref={ref}
         elementRef={elementRef}
+        integrator={integrator}
         config={config}
         open={open}
       />

packages/widget/src/AppDrawer.tsx

@@ -23,7 +23,7 @@ export interface WidgetDrawer {
 }
 
 export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
-  ({ elementRef, open, config }, ref) => {
+  ({ elementRef, open, integrator, config }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
 
@@ -53,16 +53,17 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
     const drawerConfig: WidgetConfig = useMemo(
       () => ({
         ...config,
+        integrator,
         containerStyle: {
           ...config?.containerStyle,
           height: '100%',
         },
       }),
-      [config],
+      [config, integrator],
     );
 
     return (
-      <AppProvider config={drawerConfig}>
+      <AppProvider integrator={integrator} config={drawerConfig}>
         <DrawerButton
           variant="contained"
           onClick={toggleDrawer}

packages/widget/src/components/Insurance/InsuranceSwitch.tsx

@@ -0,0 +1,37 @@
+import type { BoxProps } from '@mui/material';
+import { useSwapRoutes } from '../../hooks';
+import type { RouteExecutionStatus } from '../../stores';
+import { useRouteExecutionStore } from '../../stores';
+import { Switch } from '../Switch';
+
+export const Insurance: React.FC<
+  {
+    available?: boolean;
+    routeId: string;
+    feeAmountUsd?: string;
+    status?: RouteExecutionStatus;
+    onChange?: (
+      event: React.ChangeEvent<HTMLInputElement>,
+      checked: boolean,
+    ) => void;
+  } & Omit<BoxProps, 'onChange'>
+> = ({ status, feeAmountUsd, routeId, available, onChange, ...props }) => {
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[routeId],
+  );
+  const { routes, isLoading } = useSwapRoutes(routeExecution?.route);
+
+  const handleChange = (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => {
+    // const insuredRoute = routes?.[0];
+    // if (insuredRoute && checked) {
+    //   setExecutableRoute(insuredRoute, stateRouteId);
+    // }
+    // setRouteId(checked ? insuredRoute?.id : stateRouteId);
+    // onChange?.();
+  };
+
+  return <Switch onChange={handleChange} />;
+};

packages/widget/src/providers/SDKProvider/SDKProvider.tsx

@@ -16,6 +16,7 @@ export const SDKProvider: React.FC<React.PropsWithChildren> = ({
   const value = useMemo(() => {
     const config = {
       ...sdkConfig,
+      integrator: integrator ?? window.location.hostname,
       defaultRouteOptions: {
         fee,
         integrator: integrator ?? window.location.hostname,

packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -8,6 +8,7 @@ import type { WidgetContextProps, WidgetProviderProps } from './types';
 const initialContext: WidgetContextProps = {
   disabledChains: [],
   elementId: '',
+  integrator: '',
 };
 
 const WidgetContext = createContext<WidgetContextProps>(initialContext);
@@ -25,10 +26,16 @@ export const WidgetProvider: React.FC<
     toChain,
     toToken,
     fromAmount,
+    integrator,
     ...config
   } = {},
 }) => {
   const elementId = useId();
+
+  if (!integrator) {
+    throw Error('Required property "integrator" is missing.');
+  }
+
   const value = useMemo((): WidgetContextProps => {
     try {
       const searchParams = Object.fromEntries(
@@ -78,14 +85,24 @@ export const WidgetProvider: React.FC<
             ? formatAmount(searchParams.fromAmount)
             : fromAmount,
         elementId,
+        integrator,
       } as WidgetContextProps;
       setDefaultSettings(value);
       return value;
     } catch (e) {
       console.warn(e);
-      return { ...config, elementId };
+      return { ...config, elementId, integrator };
     }
-  }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
+  }, [
+    config,
+    elementId,
+    fromAmount,
+    fromChain,
+    fromToken,
+    integrator,
+    toChain,
+    toToken,
+  ]);
 
   return (
     <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>

packages/widget/src/types/widget.ts

@@ -70,7 +70,10 @@ export interface WidgetWalletManagement {
 export interface SDKConfig
   extends Omit<
     ConfigUpdate,
-    'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck'
+    | 'defaultExecutionSettings'
+    | 'defaultRouteOptions'
+    | 'disableVersionCheck'
+    | 'integrator'
   > {
   defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
 }
@@ -104,7 +107,7 @@ export interface WidgetConfig {
   contractTool?: WidgetContractTool;
 
   fee?: number;
-  integrator?: string;
+  integrator: string;
   referrer?: string;
 
   routePriority?: Order;
@@ -169,5 +172,5 @@ export type WidgetDrawerProps = {
 
 export type WidgetProps = WidgetDrawerProps &
   WidgetConfig & {
-    config?: WidgetConfig;
+    config?: Partial<WidgetConfig>;
   };