@lifi/widget 1.16.0 → 1.17.1

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useSetHeaderAction } from '../../components/Header';
+import { useHeaderActionStore } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
@@ -11,7 +11,6 @@ import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
     const navigate = useNavigate();
     const { pathname } = useLocation();
-    const setHeaderAction = useSetHeaderAction();
     const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
@@ -28,8 +27,10 @@ export const SwapRoutesPage = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        return setHeaderAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
-    }, [dataUpdatedAt, isFetching, refetch, refetchTime, setHeaderAction]);
+        return useHeaderActionStore
+            .getState()
+            .setAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
+    }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
     const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching;
     return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
 };

package/providers/SDKProvider/SDKProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import LIFI from '@lifi/sdk';
+export declare const useLiFi: () => LIFI;
+export declare const SDKProvider: React.FC<React.PropsWithChildren>;

package/providers/SDKProvider/SDKProvider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import LIFI from '@lifi/sdk';
+import { createContext, useContext, useMemo } from 'react';
+import { useWidgetConfig } from '../WidgetProvider';
+let lifi;
+const SDKContext = createContext(null);
+export const useLiFi = () => useContext(SDKContext);
+export const SDKProvider = ({ children, }) => {
+    const { sdkConfig, integrator } = useWidgetConfig();
+    const value = useMemo(() => {
+        const config = Object.assign(Object.assign({}, sdkConfig), { defaultRouteOptions: Object.assign(Object.assign({}, sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.defaultRouteOptions), { integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname }) });
+        if (!lifi) {
+            lifi = new LIFI(Object.assign({ disableVersionCheck: true }, config));
+        }
+        lifi.setConfig(config);
+        return lifi;
+    }, [integrator, sdkConfig]);
+    return _jsx(SDKContext.Provider, Object.assign({ value: value }, { children: children }));
+};

package/providers/SDKProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './SDKProvider';

package/providers/SDKProvider/index.js

@@ -0,0 +1 @@
+export * from './SDKProvider';

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId } from '@lifi/sdk';
-import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useChainOrderStore, useSetChainOrder } from '../../stores/chains';
-import { useWallet } from '../WalletProvider';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
 export const formDefaultValues = {
@@ -12,64 +8,14 @@ export const formDefaultValues = {
     [SwapFormKey.TokenSearchFilter]: '',
 };
 export const SwapFormProvider = ({ children, }) => {
-    const [setChain] = useSetChainOrder();
-    const { account } = useWallet();
     const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = useWidgetConfig();
     const methods = useForm({
-        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain: fromChain !== null && fromChain !== void 0 ? fromChain : ChainId.ETH, fromToken, fromAmount: (typeof fromAmount === 'number'
+        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain,
+            fromToken, fromAmount: (typeof fromAmount === 'number'
                 ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
-                : fromAmount) || formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : ChainId.ETH, toToken,
+                : fromAmount) || formDefaultValues.fromAmount, toChain,
+            toToken,
             toAddress }),
     });
-    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-    useEffect(() => {
-        if (!account.isActive || !account.chainId) {
-            return;
-        }
-        const [fromChainValue, toChainValue] = methods.getValues([
-            SwapFormKey.FromChain,
-            SwapFormKey.ToChain,
-        ]);
-        const { isDirty: isFromChainDirty } = methods.getFieldState(SwapFormKey.FromChain, methods.formState);
-        const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormKey.ToChain, methods.formState);
-        const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormKey.FromToken, methods.formState);
-        const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormKey.ToToken, methods.formState);
-        // Users can switch chains in the wallet.
-        // If we don't have a chain in the ordered chain list we should add it.
-        setChain(account.chainId);
-        // If we ran out of slots for the ordered chain list and the current chain isn't there
-        // we should make a recently switched chain as current.
-        const { chainOrder } = useChainOrderStore.getState();
-        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
-        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
-        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
-            !hasFromChainInOrderedList) {
-            methods.setValue(SwapFormKey.FromChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormKey.FromToken, '', {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormKey.FromAmount, '', {
-                shouldDirty: false,
-            });
-        }
-        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
-            !hasToChainInOrderedList) {
-            methods.setValue(SwapFormKey.ToChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormKey.ToToken, '', {
-                shouldDirty: false,
-            });
-        }
-    }, [
-        account.chainId,
-        account.isActive,
-        fromChain,
-        methods,
-        setChain,
-        toChain,
-    ]);
     return _jsx(FormProvider, Object.assign({}, methods, { children: children }));
 };

package/providers/SwapFormProvider/types.d.ts

@@ -16,12 +16,12 @@ export declare type SwapFormValues = {
     [SwapFormKey.ToToken]: string;
     [SwapFormKey.ToAddress]: string;
 };
-export declare type SwapFormDirection = 'from' | 'to';
+export declare type SwapFormType = 'from' | 'to';
 export declare const SwapFormKeyHelper: {
-    getChainKey: (formType: SwapFormDirection) => 'fromChain' | 'toChain';
-    getTokenKey: (formType: SwapFormDirection) => 'fromToken' | 'toToken';
-    getAmountKey: (formType: SwapFormDirection) => 'fromAmount' | 'toAmount';
+    getChainKey: (formType: SwapFormType) => 'fromChain' | 'toChain';
+    getTokenKey: (formType: SwapFormType) => 'fromToken' | 'toToken';
+    getAmountKey: (formType: SwapFormType) => 'fromAmount' | 'toAmount';
 };
 export interface SwapFormTypeProps {
-    formType: SwapFormDirection;
+    formType: SwapFormType;
 }

package/providers/TelemetryProvider/TelemetryProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TelemetryProvider: React.FC<{
+    children: React.ReactElement<any, any> | null;
+}>;

package/providers/TelemetryProvider/TelemetryProvider.js

@@ -0,0 +1,7 @@
+import { useWidgetConfig } from '..';
+import { useTelemetry } from '../../hooks';
+export const TelemetryProvider = ({ children }) => {
+    const config = useWidgetConfig();
+    useTelemetry(config === null || config === void 0 ? void 0 : config.disableTelemetry);
+    return children;
+};

package/providers/TelemetryProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './TelemetryProvider';

package/providers/TelemetryProvider/index.js

@@ -0,0 +1 @@
+export * from './TelemetryProvider';

package/providers/WalletProvider/WalletProvider.d.ts

@@ -1,11 +1,8 @@
 import type { Signer } from 'ethers';
 import type { FC, PropsWithChildren } from 'react';
-import type { WidgetWalletManagement } from '../../types';
 import type { WalletContextProps } from './types';
 export declare const useWallet: () => WalletContextProps;
-export declare const WalletProvider: FC<PropsWithChildren<{
-    walletManagement?: WidgetWalletManagement;
-}>>;
+export declare const WalletProvider: FC<PropsWithChildren>;
 export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
     address: string | undefined;
     isActive: boolean;

package/providers/WalletProvider/WalletProvider.js

@@ -10,6 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx } from "react/jsx-runtime";
 import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useChainOrderStore } from '../../stores/chains';
+import { SwapFormKey } from '../SwapFormProvider';
+import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -23,7 +27,9 @@ const initialContext = {
 };
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
-export const WalletProvider = ({ children, walletManagement }) => {
+export const WalletProvider = ({ children }) => {
+    const { walletManagement, fromChain, toChain, chains, disabledChains } = useWidgetConfig();
+    const methods = useFormContext();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
@@ -88,6 +94,58 @@ export const WalletProvider = ({ children, walletManagement }) => {
         account,
         provider,
     }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
+    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
+    useEffect(() => {
+        const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains, disabledChains);
+        if (!account.isActive || !account.chainId || !chainAllowed) {
+            return;
+        }
+        const [fromChainValue, toChainValue] = methods.getValues([
+            SwapFormKey.FromChain,
+            SwapFormKey.ToChain,
+        ]);
+        const { isDirty: isFromChainDirty } = methods.getFieldState(SwapFormKey.FromChain, methods.formState);
+        const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormKey.ToChain, methods.formState);
+        const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormKey.FromToken, methods.formState);
+        const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormKey.ToToken, methods.formState);
+        const { chainOrder, setChain } = useChainOrderStore.getState();
+        // Users can switch chains in the wallet.
+        // If we don't have a chain in the ordered chain list we should add it.
+        setChain(account.chainId);
+        // If we ran out of slots for the ordered chain list and the current chain isn't there
+        // we should make a recently switched chain as current.
+        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
+        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
+        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
+            !hasFromChainInOrderedList) {
+            methods.setValue(SwapFormKey.FromChain, account.chainId, {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormKey.FromToken, '', {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormKey.FromAmount, '', {
+                shouldDirty: false,
+            });
+        }
+        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
+            !hasToChainInOrderedList) {
+            methods.setValue(SwapFormKey.ToChain, account.chainId, {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormKey.ToToken, '', {
+                shouldDirty: false,
+            });
+        }
+    }, [
+        account.chainId,
+        account.isActive,
+        chains,
+        disabledChains,
+        fromChain,
+        methods,
+        toChain,
+    ]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 export const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/providers/WidgetProvider/WidgetProvider.js

@@ -10,20 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { checkPackageUpdates, getChainByKey } from '@lifi/sdk';
-import { createContext, useContext, useEffect, useMemo } from 'react';
-import { updateLiFiConfig } from '../../config/lifi';
-import { name, version } from '../../config/version';
-const stub = () => {
-    throw new Error('You forgot to wrap your component in <WidgetProvider>.');
-};
+import { getChainByKey } from '@lifi/sdk';
+import { createContext, useContext, useMemo } from 'react';
 const initialContext = {
     disabledChains: [],
 };
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
-    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount, integrator, sdkConfig } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount", "integrator", "sdkConfig"]);
+    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
     const value = useMemo(() => {
         var _a, _b, _c, _d;
         try {
@@ -53,11 +48,5 @@ export const WidgetProvider = (_a) => {
             return config;
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
-    useEffect(() => {
-        updateLiFiConfig(Object.assign(Object.assign({}, sdkConfig), { defaultRouteOptions: Object.assign(Object.assign({}, sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.defaultRouteOptions), { integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname }) }));
-    }, [integrator, sdkConfig]);
-    useEffect(() => {
-        checkPackageUpdates(name, version);
-    }, []);
     return (_jsx(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };

package/providers/WidgetProvider/index.d.ts

@@ -1,2 +1,3 @@
 export * from './types';
+export * from './utils';
 export * from './WidgetProvider';

package/providers/WidgetProvider/index.js

@@ -1,2 +1,3 @@
 export * from './types';
+export * from './utils';
 export * from './WidgetProvider';

package/providers/WidgetProvider/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const isItemAllowed: <T>(chainId: T, chains?: {
+    allow?: T[] | undefined;
+    deny?: T[] | undefined;
+} | undefined, disabledChains?: T[] | undefined) => boolean;

package/providers/WidgetProvider/utils.js

@@ -0,0 +1,9 @@
+export const isItemAllowed = (chainId, chains, 
+/** @deprecated Remove in the next major release */
+disabledChains) => {
+    var _a, _b;
+    if ((_a = chains === null || chains === void 0 ? void 0 : chains.allow) === null || _a === void 0 ? void 0 : _a.length) {
+        return chains.allow.includes(chainId);
+    }
+    return !((disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chainId)) || ((_b = chains === null || chains === void 0 ? void 0 : chains.deny) === null || _b === void 0 ? void 0 : _b.includes(chainId)));
+};

package/providers/index.d.ts

@@ -1,4 +1,6 @@
+export * from './SDKProvider';
 export * from './SwapFormProvider';
+export * from './TelemetryProvider';
 export * from './ThemeProvider';
 export * from './WalletProvider';
 export * from './WidgetProvider';

package/providers/index.js

@@ -1,4 +1,6 @@
+export * from './SDKProvider';
 export * from './SwapFormProvider';
+export * from './TelemetryProvider';
 export * from './ThemeProvider';
 export * from './WalletProvider';
 export * from './WidgetProvider';

package/stores/chains/index.d.ts

@@ -1,4 +1,3 @@
 export * from './types';
 export * from './useChainOrder';
 export * from './useChainOrderStore';
-export * from './useInitializeChainOrder';

package/stores/chains/index.js

@@ -1,4 +1,3 @@
 export * from './types';
 export * from './useChainOrder';
 export * from './useChainOrderStore';
-export * from './useInitializeChainOrder';

package/stores/chains/types.d.ts

@@ -3,6 +3,6 @@ export interface ChainOrderState {
     availableChains: number[];
 }
 export interface ChainOrderStore extends ChainOrderState {
-    initializeChains(chainIds: number[]): void;
+    initializeChains(chainIds: number[]): number[];
     setChain(chainId: number): void;
 }

package/stores/chains/useChainOrderStore.js

@@ -3,22 +3,25 @@ import create from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 export const maxChainToOrder = 9;
-export const useChainOrderStore = create()(persist(immer((set) => ({
+export const useChainOrderStore = create()(persist(immer((set, get) => ({
     chainOrder: [],
     availableChains: [],
-    initializeChains: (chainIds) => set((state) => {
-        state.availableChains = chainIds;
-        state.chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
-        const chainsToAdd = chainIds.filter((chainId) => !state.chainOrder.includes(chainId));
-        if (state.chainOrder.length === maxChainToOrder ||
-            !chainsToAdd.length) {
-            return;
-        }
-        const chainsToAddLength = maxChainToOrder - state.chainOrder.length;
-        for (let index = 0; index < chainsToAddLength; index++) {
-            state.chainOrder.push(chainsToAdd[index]);
-        }
-    }),
+    initializeChains: (chainIds) => {
+        set((state) => {
+            state.availableChains = chainIds;
+            state.chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
+            const chainsToAdd = chainIds.filter((chainId) => !state.chainOrder.includes(chainId));
+            if (state.chainOrder.length === maxChainToOrder ||
+                !chainsToAdd.length) {
+                return;
+            }
+            const chainsToAddLength = maxChainToOrder - state.chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+                state.chainOrder.push(chainsToAdd[index]);
+            }
+        });
+        return get().chainOrder;
+    },
     setChain: (chainId) => set((state) => {
         if (state.chainOrder.includes(chainId) ||
             !state.availableChains.includes(chainId)) {

package/stores/route/utils.d.ts

@@ -1,4 +1,5 @@
-import type { Route } from '@lifi/sdk';
+import type { Process, Route } from '@lifi/sdk';
 export declare const isRouteCompleted: (route: Route) => boolean;
 export declare const isRouteFailed: (route: Route) => boolean;
 export declare const isRouteActive: (route?: Route) => boolean;
+export declare const getUpdatedProcess: (currentRoute: Route, updatedRoute: Route) => Process | undefined;

package/stores/route/utils.js

@@ -1,3 +1,4 @@
+import microdiff from 'microdiff';
 export const isRouteCompleted = (route) => {
     return route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
 };
@@ -13,3 +14,14 @@ export const isRouteActive = (route) => {
     const alreadyStarted = route.steps.some((step) => step.execution);
     return !isDone && !isFailed && alreadyStarted;
 };
+export const getUpdatedProcess = (currentRoute, updatedRoute) => {
+    const processDiff = microdiff(currentRoute, updatedRoute).find((diff) => diff.path.includes('process'));
+    if (!processDiff) {
+        return undefined;
+    }
+    // e.g. ['steps', 0, 'execution', 'process', 0]
+    const process = processDiff.path
+        .slice(0, processDiff.path.findIndex((path) => path === 'process') + 2)
+        .reduce((obj, path) => obj[path], updatedRoute);
+    return process;
+};

package/stores/settings/index.d.ts

@@ -1,5 +1,4 @@
 export * from './types';
 export * from './useAppearance';
-export * from './useSetSettings';
 export * from './useSettings';
 export * from './useSettingsStore';

package/stores/settings/index.js

@@ -1,5 +1,4 @@
 export * from './types';
 export * from './useAppearance';
-export * from './useSetSettings';
 export * from './useSettings';
 export * from './useSettingsStore';

package/stores/settings/useAppearance.js

@@ -2,6 +2,8 @@ import shallow from 'zustand/shallow';
 import { useSettingsStore } from './useSettingsStore';
 export const useAppearance = () => {
     const [appearance, setValue] = useSettingsStore((state) => [state.appearance, state.setValue], shallow);
-    const setAppearance = (appearance) => setValue('appearance', appearance);
+    const setAppearance = (appearance) => {
+        setValue('appearance', appearance);
+    };
     return [appearance, setAppearance];
 };