@lifi/widget 2.9.3 → 2.9.4

package/AppProvider.js

@@ -6,7 +6,7 @@ import { queryClient } from './config/queryClient';
 import { FormProvider, I18nProvider, SDKProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
 import { StoreProvider } from './stores';
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(StoreProvider, { config: config, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(StoreProvider, { config: config, children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
 };
 export const AppRouter = ({ children }) => {
     const { buildUrl } = useWidgetConfig();

package/cjs/AppProvider.js

@@ -9,7 +9,7 @@ const queryClient_1 = require("./config/queryClient");
 const providers_1 = require("./providers");
 const stores_1 = require("./stores");
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {

package/cjs/components/Card/CardLabel.d.ts

@@ -2,7 +2,7 @@
 export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    type?: "active" | "insurance" | "insurance-icon" | undefined;
+    type?: "insurance" | "active" | "insurance-icon" | undefined;
 }, {}, {}>;
 export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.9.3";
+export declare const version = "2.9.4";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.9.3';
+exports.version = '2.9.4';

package/cjs/hooks/useChains.js

@@ -3,38 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChains = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../providers");
-const stores_1 = require("../stores");
 const useChains = () => {
-    const { chains, keyPrefix } = (0, providers_1.useWidgetConfig)();
+    const { chains } = (0, providers_1.useWidgetConfig)();
     const lifi = (0, providers_1.useLiFi)();
-    const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
-    const initializeChains = (0, stores_1.useChainOrderStore)((state) => state.initializeChains);
     const { data: availableChains, isLoading: isLoadingAvailableChains } = (0, react_query_1.useQuery)(['chains'], async () => lifi.getChains(), {
         refetchInterval: 300000,
         staleTime: 300000,
     });
-    const { data: filteredChains, isLoading: isLoadingFilteredChains } = (0, react_query_1.useQuery)(['filtered-chains', availableChains?.length, keyPrefix], async () => {
-        if (!availableChains) {
-            return;
-        }
-        const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains));
-        const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
-        const [fromChainValue, toChainValue] = getValues([
-            providers_1.FormKey.FromChain,
-            providers_1.FormKey.ToChain,
-        ]);
-        if (!fromChainValue) {
-            setValue(providers_1.FormKey.FromChain, chainOrder[0]);
-        }
-        if (!toChainValue) {
-            setValue(providers_1.FormKey.ToChain, chainOrder[0]);
-        }
+    const filteredChains = (0, react_1.useMemo)(() => {
+        const filteredChains = availableChains?.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains));
         return filteredChains;
-    }, {
-        enabled: Boolean(availableChains),
-    });
+    }, [availableChains, chains]);
     const getChainById = (0, react_1.useCallback)((chainId) => {
         const chain = availableChains?.find((chain) => chain.id === chainId);
         // if (!chain) {
@@ -45,7 +25,7 @@ const useChains = () => {
     return {
         chains: filteredChains,
         getChainById,
-        isLoading: isLoadingAvailableChains || isLoadingFilteredChains,
+        isLoading: isLoadingAvailableChains,
     };
 };
 exports.useChains = useChains;

package/cjs/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,3 +1,3 @@
 import type { FC } from 'react';
-import type { FormTypeProps } from '../../providers';
+import { type FormTypeProps } from '../../providers';
 export declare const SelectTokenPage: FC<FormTypeProps>;

package/cjs/providers/FormProvider/FormUpdater.js

@@ -16,8 +16,11 @@ const FormUpdater = ({ defaultValues }) => {
     const previousDefaultValues = (0, react_1.useRef)(defaultValues);
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     (0, react_1.useEffect)(() => {
-        const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains);
-        if (!account.isActive || !account.chainId || !chainAllowed) {
+        if (!account.isActive || !account.chainId) {
+            return;
+        }
+        const chainAllowed = (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains);
+        if (!chainAllowed) {
             return;
         }
         const { isTouched: isFromChainTouched } = getFieldState(_1.FormKey.FromChain);

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -70,6 +70,7 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
         fromChain,
         fromToken,
         integrator,
+        toAddress,
         toChain,
         toToken,
     ]);

package/cjs/stores/chains/ChainOrderStore.js

@@ -3,13 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrderStoreContext = exports.useChainOrderStore = exports.ChainOrderStoreProvider = exports.ChainOrderStoreContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const createChainOrderStore_1 = require("./createChainOrderStore");
 exports.ChainOrderStoreContext = (0, react_1.createContext)(null);
 function ChainOrderStoreProvider({ children, ...props }) {
     const storeRef = (0, react_1.useRef)();
+    const { chains: filteredChains } = (0, hooks_1.useChains)();
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     if (!storeRef.current) {
         storeRef.current = (0, createChainOrderStore_1.createChainOrderStore)(props);
     }
+    (0, react_1.useEffect)(() => {
+        if (filteredChains) {
+            const chainOrder = storeRef.current
+                ?.getState()
+                .initializeChains(filteredChains.map((chain) => chain.id));
+            if (chainOrder) {
+                const [fromChainValue, toChainValue] = getValues([
+                    providers_1.FormKey.FromChain,
+                    providers_1.FormKey.ToChain,
+                ]);
+                if (!fromChainValue) {
+                    setValue(providers_1.FormKey.FromChain, chainOrder[0]);
+                }
+                if (!toChainValue) {
+                    setValue(providers_1.FormKey.ToChain, chainOrder[0]);
+                }
+            }
+        }
+    }, [filteredChains, getValues, setValue]);
     return ((0, jsx_runtime_1.jsx)(exports.ChainOrderStoreContext.Provider, { value: storeRef.current, children: children }));
 }
 exports.ChainOrderStoreProvider = ChainOrderStoreProvider;

package/components/Card/CardLabel.d.ts

@@ -2,7 +2,7 @@
 export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    type?: "active" | "insurance" | "insurance-icon" | undefined;
+    type?: "insurance" | "active" | "insurance-icon" | undefined;
 }, {}, {}>;
 export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.9.3";
+export declare const version = "2.9.4";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.9.3';
+export const version = '2.9.4';

package/hooks/useChains.js

@@ -1,37 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { FormKey, isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
-import { useChainOrderStore } from '../stores';
+import { useCallback, useMemo } from 'react';
+import { isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
 export const useChains = () => {
-    const { chains, keyPrefix } = useWidgetConfig();
+    const { chains } = useWidgetConfig();
     const lifi = useLiFi();
-    const { getValues, setValue } = useFormContext();
-    const initializeChains = useChainOrderStore((state) => state.initializeChains);
     const { data: availableChains, isLoading: isLoadingAvailableChains } = useQuery(['chains'], async () => lifi.getChains(), {
         refetchInterval: 300000,
         staleTime: 300000,
     });
-    const { data: filteredChains, isLoading: isLoadingFilteredChains } = useQuery(['filtered-chains', availableChains?.length, keyPrefix], async () => {
-        if (!availableChains) {
-            return;
-        }
-        const filteredChains = availableChains.filter((chain) => isItemAllowed(chain.id, chains));
-        const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
-        const [fromChainValue, toChainValue] = getValues([
-            FormKey.FromChain,
-            FormKey.ToChain,
-        ]);
-        if (!fromChainValue) {
-            setValue(FormKey.FromChain, chainOrder[0]);
-        }
-        if (!toChainValue) {
-            setValue(FormKey.ToChain, chainOrder[0]);
-        }
+    const filteredChains = useMemo(() => {
+        const filteredChains = availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
         return filteredChains;
-    }, {
-        enabled: Boolean(availableChains),
-    });
+    }, [availableChains, chains]);
     const getChainById = useCallback((chainId) => {
         const chain = availableChains?.find((chain) => chain.id === chainId);
         // if (!chain) {
@@ -42,6 +22,6 @@ export const useChains = () => {
     return {
         chains: filteredChains,
         getChainById,
-        isLoading: isLoadingAvailableChains || isLoadingFilteredChains,
+        isLoading: isLoadingAvailableChains,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.9.3",
+  "version": "2.9.4",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,3 +1,3 @@
 import type { FC } from 'react';
-import type { FormTypeProps } from '../../providers';
+import { type FormTypeProps } from '../../providers';
 export declare const SelectTokenPage: FC<FormTypeProps>;

package/providers/FormProvider/FormUpdater.js

@@ -13,8 +13,11 @@ export const FormUpdater = ({ defaultValues }) => {
     const previousDefaultValues = useRef(defaultValues);
     // 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);
-        if (!account.isActive || !account.chainId || !chainAllowed) {
+        if (!account.isActive || !account.chainId) {
+            return;
+        }
+        const chainAllowed = isItemAllowed(account.chainId, chains);
+        if (!chainAllowed) {
             return;
         }
         const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);

package/providers/WidgetProvider/WidgetProvider.js

@@ -66,6 +66,7 @@ export const WidgetProvider = ({ children, config: { fromChain, fromToken, toCha
         fromChain,
         fromToken,
         integrator,
+        toAddress,
         toChain,
         toToken,
     ]);

package/stores/chains/ChainOrderStore.js

@@ -1,12 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useChains } from '../../hooks';
+import { FormKey } from '../../providers';
 import { createChainOrderStore } from './createChainOrderStore';
 export const ChainOrderStoreContext = createContext(null);
 export function ChainOrderStoreProvider({ children, ...props }) {
     const storeRef = useRef();
+    const { chains: filteredChains } = useChains();
+    const { setValue, getValues } = useFormContext();
     if (!storeRef.current) {
         storeRef.current = createChainOrderStore(props);
     }
+    useEffect(() => {
+        if (filteredChains) {
+            const chainOrder = storeRef.current
+                ?.getState()
+                .initializeChains(filteredChains.map((chain) => chain.id));
+            if (chainOrder) {
+                const [fromChainValue, toChainValue] = getValues([
+                    FormKey.FromChain,
+                    FormKey.ToChain,
+                ]);
+                if (!fromChainValue) {
+                    setValue(FormKey.FromChain, chainOrder[0]);
+                }
+                if (!toChainValue) {
+                    setValue(FormKey.ToChain, chainOrder[0]);
+                }
+            }
+        }
+    }, [filteredChains, getValues, setValue]);
     return (_jsx(ChainOrderStoreContext.Provider, { value: storeRef.current, children: children }));
 }
 export function useChainOrderStore(selector, equalityFn) {