@lifi/widget 1.16.1 → 1.17.0

package/AppProvider.js

@@ -6,7 +6,7 @@ import { queryClient } from './config/queryClient';
 import { SDKProvider, SwapFormProvider, TelemetryProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(TelemetryProvider, { children: _jsx(WalletProvider, { children: _jsx(ThemeProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) })) }) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(SwapFormProvider, { children: _jsx(ThemeProvider, { children: _jsx(WalletProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();

package/README.md

@@ -83,7 +83,7 @@ Visit our [playground](https://testing.li.finance) to see how you can customize
 
 ## Documentation
 
-[LI.FI Documentation](https://docs.li.fi)
+[LI.FI Widget Documentation](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview)
 
 ## Changelog
 

package/cjs/AppProvider.js

@@ -9,7 +9,7 @@ const queryClient_1 = require("./config/queryClient");
 const providers_1 = require("./providers");
 const QueryProvider = react_query_1.QueryClientProvider;
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) })) })));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {

package/cjs/components/ChainSelect/ChainSelect.style.js

@@ -4,15 +4,15 @@ exports.ChainContainer = exports.ChainCard = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Card_1 = require("../../components/Card");
-exports.ChainCard = (0, styles_1.styled)(Card_1.Card)(({ theme }) => ({
+exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
     display: 'grid',
     placeItems: 'center',
-    width: 56,
+    minWidth: 56,
     height: 56,
-}));
+});
 exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, 56px)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/cjs/components/ChainSelect/useChainSelect.d.ts

@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk';
-import type { SwapFormDirection } from '../../providers';
-export declare const useChainSelect: (formType: SwapFormDirection) => {
+import type { SwapFormType } from '../../providers';
+export declare const useChainSelect: (formType: SwapFormType) => {
     chains: EVMChain[] | undefined;
     getChains: () => EVMChain[];
     setCurrentChain: (chainId: number) => void;

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -23,15 +23,15 @@ const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = (0, react_i18next_1.useTranslation)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
-    if (!insufficientFunds && !insufficientGas.length) {
+    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
                     marginTop: 2,
                     marginLeft: 2,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [insufficientGas.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
                             ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, insufficientGas.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
+                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
                             return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {

package/cjs/components/Header/useHeaderActionStore.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import type { HeaderActionStore } from './types';
 export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
     setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetHeaderAction: () => (element?: import("react").ReactNode) => () => void;

package/cjs/components/Header/useHeaderActionStore.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetHeaderAction = exports.useHeaderActionStore = void 0;
+exports.useHeaderActionStore = void 0;
 /* eslint-disable no-underscore-dangle */
 const zustand_1 = __importDefault(require("zustand"));
 const immer_1 = require("zustand/middleware/immer");
@@ -20,7 +20,3 @@ exports.useHeaderActionStore = (0, zustand_1.default)()((0, immer_1.immer)((set,
         });
     },
 })));
-const useSetHeaderAction = () => {
-    return (0, exports.useHeaderActionStore)((state) => state.setAction);
-};
-exports.useSetHeaderAction = useSetHeaderAction;

package/cjs/components/SwapButton/SwapButton.js

@@ -11,51 +11,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@lifi/sdk");
 const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { getChainById } = (0, hooks_1.useChains)();
     const config = (0, providers_1.useWidgetConfig)();
-    const { account, switchChain, connect: walletConnect } = (0, providers_1.useWallet)();
+    const { account, connect } = (0, providers_1.useWallet)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(currentRoute);
-    const [chainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.SwapFormKeyHelper.getChainKey('from')],
-    });
-    // Allow switching chain only if execution is not started
-    const switchChainAllowed = ((_a = getChainById(chainId || sdk_1.ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
-        currentRoute &&
-        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
-                yield walletConnect();
+                yield connect();
             }
             else {
                 navigate(utils_1.navigationRoutes.selectWallet);
             }
         }
-        else if (switchChainAllowed) {
-            yield switchChain(chainId);
-            // check that the current route exists in the up to date route list
-        }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (switchChainAllowed) {
-                return t(`button.switchChain`);
-            }
             if (!currentRoute) {
                 return t(`button.swap`);
             }
@@ -63,8 +45,6 @@ const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: currentRoute &&
-            !switchChainAllowed &&
-            (insufficientFunds || !!insufficientGas.length || disable), fullWidth: true }, { children: getButtonText() })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true }, { children: getButtonText() })));
 };
 exports.SwapButton = SwapButton;

package/cjs/components/TokenList/TokenList.js

@@ -53,6 +53,6 @@ const TokenList = ({ formType, height, onClick, }) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, {}) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };
 exports.TokenList = TokenList;

package/cjs/components/TokenList/TokenList.style.js

@@ -7,7 +7,8 @@ const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
 exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
     '&:hover': {
@@ -21,8 +22,8 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     height: 64,
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1.5),
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(5),
+        right: theme.spacing(3),
     },
 }));

package/cjs/components/TokenList/TokenListItem.js

@@ -19,7 +19,7 @@ exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, showBa
                                 }) }))) : null] })))) : null] })), endAdornment] })));
 });
 const TokenListItemSkeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };
 exports.TokenListItemSkeleton = TokenListItemSkeleton;
 const TokenAmountSkeleton = () => {

package/cjs/components/TokenList/TokenNotFound.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const TokenNotFound: React.FC;
+import type { SwapFormTypeProps } from '../../providers';
+export declare const TokenNotFound: React.FC<SwapFormTypeProps>;

package/cjs/components/TokenList/TokenNotFound.js

@@ -4,9 +4,17 @@ exports.TokenNotFound = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
-const TokenNotFound = () => {
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const TokenNotFound = ({ formType }) => {
+    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
+    const [selectedChainId] = (0, react_hook_form_1.useWatch)({
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const { getChainById } = (0, hooks_1.useChains)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
             display: 'flex',
             justifyContent: 'center',
@@ -14,6 +22,8 @@ const TokenNotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.couldntFindTokens') }))] })));
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.info.message.emptyTokenList', {
+                    chainName: (_a = getChainById(selectedChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                }) }))] })));
 };
 exports.TokenNotFound = TokenNotFound;

package/cjs/components/TokenList/types.d.ts

@@ -1,9 +1,9 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers';
+import type { SwapFormType } from '../../providers';
 import type { Token } from '../../types';
 export interface TokenListProps {
-    formType: SwapFormDirection;
+    formType: SwapFormType;
     height: number;
     onClick?(): void;
 }

package/cjs/config/version.d.ts

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

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 = '1.16.1';
+exports.version = '1.17.0';

package/cjs/hooks/useChains.js

@@ -12,25 +12,38 @@ 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 chains_1 = require("../stores/chains");
 const useChains = () => {
-    const { disabledChains } = (0, providers_1.useWidgetConfig)();
+    const { disabledChains, chains } = (0, providers_1.useWidgetConfig)();
     const lifi = (0, providers_1.useLiFi)();
-    const [, initializeChains] = (0, chains_1.useSetChainOrder)();
+    const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
     const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield lifi.getChains();
-        const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-        initializeChains(filteredChains.map((chain) => chain.id));
-        return filteredChains;
+        const availableChains = yield lifi.getChains();
+        const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
+        const chainOrder = chains_1.useChainOrderStore
+            .getState()
+            .initializeChains(filteredChains.map((chain) => chain.id));
+        const [fromChainValue, toChainValue] = getValues([
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+            setValue(providers_1.SwapFormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+            setValue(providers_1.SwapFormKey.ToChain, chainOrder[0]);
+        }
+        return { availableChains, filteredChains };
     }));
     const getChainById = (0, react_1.useCallback)((chainId) => {
-        const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
+        const chain = data === null || data === void 0 ? void 0 : data.availableChains.find((chain) => chain.id === chainId);
         // if (!chain) {
         //   throw new Error('Chain not found or chainId is invalid.');
         // }
         return chain;
     }, [data]);
-    return { chains: data, getChainById, isLoading };
+    return { chains: data === null || data === void 0 ? void 0 : data.filteredChains, getChainById, isLoading };
 };
 exports.useChains = useChains;

package/cjs/hooks/useFeaturedTokens.d.ts

@@ -1 +1 @@
-export declare const useFeaturedTokens: (selectedChainId: number) => import("@lifi/types").Token[] | undefined;
+export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[];

package/cjs/hooks/useFeaturedTokens.js

@@ -4,7 +4,10 @@ exports.useFeaturedTokens = void 0;
 const react_1 = require("react");
 const providers_1 = require("../providers");
 const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens } = (0, providers_1.useWidgetConfig)();
-    return (0, react_1.useMemo)(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+    const { featuredTokens, tokens } = (0, providers_1.useWidgetConfig)();
+    return (0, react_1.useMemo)(() => {
+        var _a;
+        return [...((_a = tokens === null || tokens === void 0 ? void 0 : tokens.featured) !== null && _a !== void 0 ? _a : []), ...(featuredTokens !== null && featuredTokens !== void 0 ? featuredTokens : [])].filter((token) => token.chainId === selectedChainId);
+    }, [featuredTokens, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.featured]);
 };
 exports.useFeaturedTokens = useFeaturedTokens;

package/cjs/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,7 @@ interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[];
+    insufficientGas: GasSufficiency[] | undefined;
     insufficientFunds: boolean;
 };
 export {};

package/cjs/hooks/useGasSufficiency.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,6 +20,7 @@ const _1 = require(".");
 const providers_1 = require("../providers");
 const useTokenBalances_1 = require("./useTokenBalances");
 const useGasSufficiency = (route) => {
+    const lifi = (0, providers_1.useLiFi)();
     const { account } = (0, providers_1.useWallet)();
     const [fromChainId, toChainId, fromToken] = (0, react_hook_form_1.useWatch)({
         name: [
@@ -22,20 +32,12 @@ const useGasSufficiency = (route) => {
     const fromAmount = (0, _1.useDebouncedWatch)(providers_1.SwapFormKey.FromAmount, 250);
     const { getChainById } = (0, _1.useChains)();
     const { tokensWithBalance: fromChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(fromChainId);
-    const { tokensWithBalance: toChainTokenBalances } = (0, useTokenBalances_1.useTokenBalances)(toChainId);
-    const insufficientGas = (0, react_1.useMemo)(() => {
+    const [insufficientGas, setInsufficientGas] = (0, react_1.useState)();
+    const checkInsufficientGas = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (!account.isActive ||
-            !route ||
-            !fromAmount ||
-            !fromChainTokenBalances ||
-            !toChainTokenBalances) {
-            return [];
+        if (!account.isActive || !route || !fromAmount) {
+            return;
         }
-        const tokenBalancesByChain = {
-            [fromChainId]: fromChainTokenBalances,
-            [toChainId]: toChainTokenBalances,
-        };
         const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
@@ -60,30 +62,34 @@ const useGasSufficiency = (route) => {
             route.fromToken.address === gasCosts[fromChainId].token.address) {
             gasCosts[fromChainId].tokenAmount = (_a = gasCosts[fromChainId]) === null || _a === void 0 ? void 0 : _a.gasAmount.plus((0, big_js_1.default)(fromAmount));
         }
+        const tokenBalances = yield lifi.getTokenBalances(account.address, Object.values(gasCosts).map((item) => item.token));
+        if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
+            return;
+        }
         [fromChainId, toChainId].forEach((chainId) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
-                const gasTokenBalance = (0, big_js_1.default)((_c = (_b = (_a = tokenBalancesByChain[chainId]) === null || _a === void 0 ? void 0 : _a.find((t) => t.address === gasCosts[chainId].token.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
+                const gasTokenBalance = (0, big_js_1.default)((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.address === gasCosts[chainId].token.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
                 const insufficientFromChainGas = gasTokenBalance.lte(0) ||
-                    gasTokenBalance.lt((_d = gasCosts[chainId].gasAmount) !== null && _d !== void 0 ? _d : (0, big_js_1.default)(0)) ||
-                    gasTokenBalance.lt((_e = gasCosts[chainId].tokenAmount) !== null && _e !== void 0 ? _e : (0, big_js_1.default)(0));
+                    gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : (0, big_js_1.default)(0)) ||
+                    gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : (0, big_js_1.default)(0));
                 const insufficientFromChainGasAmount = insufficientFromChainGas
-                    ? (_g = (_f = gasCosts[chainId].tokenAmount) === null || _f === void 0 ? void 0 : _f.minus(gasTokenBalance)) !== null && _g !== void 0 ? _g : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
+                    ? (_f = (_e = gasCosts[chainId].tokenAmount) === null || _e === void 0 ? void 0 : _e.minus(gasTokenBalance)) !== null && _f !== void 0 ? _f : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
                     : undefined;
                 gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        return gasCostResult;
-    }, [
+        setInsufficientGas(gasCostResult);
+    }), [
+        account.address,
         account.isActive,
         fromAmount,
         fromChainId,
-        fromChainTokenBalances,
         getChainById,
+        lifi,
         route,
         toChainId,
-        toChainTokenBalances,
     ]);
     const insufficientFunds = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -96,6 +102,9 @@ const useGasSufficiency = (route) => {
         const balance = (0, big_js_1.default)((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
         return (0, big_js_1.default)(fromAmount).gt(balance);
     }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+    (0, react_1.useEffect)(() => {
+        checkInsufficientGas();
+    }, [checkInsufficientGas]);
     return {
         insufficientGas,
         insufficientFunds,

package/cjs/hooks/useToken.d.ts

@@ -1,5 +1,4 @@
 export declare const useToken: (chainId: number, tokenAddress: string) => {
     token: import("..").Token | undefined;
     isLoading: boolean;
-    isFetching: boolean;
 };

package/cjs/hooks/useToken.js

@@ -4,7 +4,7 @@ exports.useToken = void 0;
 const react_1 = require("react");
 const useTokens_1 = require("./useTokens");
 const useToken = (chainId, tokenAddress) => {
-    const { tokens, isLoading, isFetching } = (0, useTokens_1.useTokens)(chainId);
+    const { tokens, isLoading } = (0, useTokens_1.useTokens)(chainId);
     const token = (0, react_1.useMemo)(() => {
         const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
@@ -12,7 +12,6 @@ const useToken = (chainId, tokenAddress) => {
     return {
         token,
         isLoading,
-        isFetching,
     };
 };
 exports.useToken = useToken;

package/cjs/hooks/useTokenBalances.d.ts

@@ -2,9 +2,8 @@ import type { Token } from '../types';
 export declare const useTokenBalances: (selectedChainId: number) => {
     tokens: Token[] | undefined;
     tokensWithBalance: Token[] | undefined;
-    featuredTokens: import("@lifi/types").Token[] | undefined;
+    featuredTokens: import("@lifi/types").Token[];
     isLoading: boolean;
     isBalanceLoading: boolean;
-    isBalanceFetched: boolean;
     refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<Token[] | undefined, unknown>>;
 };

package/cjs/hooks/useTokenBalances.js

@@ -26,7 +26,7 @@ const useTokenBalances = (selectedChainId) => {
     const { tokens, isLoading } = (0, useTokens_1.useTokens)(selectedChainId);
     const [refetchInterval, setRefetchInterval] = (0, react_1.useState)(defaultRefetchInterval);
     const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length);
-    const { data: tokensWithBalance, isLoading: isBalanceLoading, isFetched: isBalanceFetched, refetch, } = (0, react_query_1.useQuery)(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = (0, react_query_1.useQuery)(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
         if (!accountAddress || !tokens) {
             return;
         }
@@ -73,7 +73,6 @@ const useTokenBalances = (selectedChainId) => {
         featuredTokens,
         isLoading,
         isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
-        isBalanceFetched,
         refetch,
     };
 };

package/cjs/hooks/useTokens.d.ts

@@ -1,6 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokens: (selectedChainId: number) => {
+export declare const useTokens: (selectedChainId?: number) => {
     tokens: Token[] | undefined;
     isLoading: boolean;
-    isFetching: boolean;
 };

package/cjs/hooks/useTokens.js

@@ -14,24 +14,46 @@ const react_query_1 = require("@tanstack/react-query");
 const providers_1 = require("../providers");
 const useFeaturedTokens_1 = require("./useFeaturedTokens");
 const useTokens = (selectedChainId) => {
+    var _a, _b, _c, _d;
     const lifi = (0, providers_1.useLiFi)();
     const featuredTokens = (0, useFeaturedTokens_1.useFeaturedTokens)(selectedChainId);
-    const { data: tokens, isLoading, isFetching, } = (0, react_query_1.useQuery)(['tokens', selectedChainId, featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length], () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
-        const data = yield lifi.getTokens({ chains: [selectedChainId] });
+    const { tokens, chains, disabledChains } = (0, providers_1.useWidgetConfig)();
+    const { data, isLoading } = (0, react_query_1.useQuery)([
+        'tokens',
+        selectedChainId,
+        featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length,
+        (_a = tokens === null || tokens === void 0 ? void 0 : tokens.allow) === null || _a === void 0 ? void 0 : _a.length,
+        (_b = tokens === null || tokens === void 0 ? void 0 : tokens.deny) === null || _b === void 0 ? void 0 : _b.length,
+        (_c = chains === null || chains === void 0 ? void 0 : chains.allow) === null || _c === void 0 ? void 0 : _c.length,
+        (_d = chains === null || chains === void 0 ? void 0 : chains.deny) === null || _d === void 0 ? void 0 : _d.length,
+    ], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f, _g, _h, _j;
+        const chainAllowed = selectedChainId &&
+            (0, providers_1.isItemAllowed)(selectedChainId, chains, disabledChains);
+        if (!chainAllowed) {
+            return [];
+        }
+        let filteredTokens = (_e = tokens === null || tokens === void 0 ? void 0 : tokens.allow) === null || _e === void 0 ? void 0 : _e.filter((token) => token.chainId === selectedChainId);
+        if (!(filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.length)) {
+            const data = yield lifi.getTokens({ chains: [selectedChainId] });
+            filteredTokens = (_f = data.tokens) === null || _f === void 0 ? void 0 : _f[selectedChainId];
+        }
+        const deniedTokenAddresses = (_g = tokens === null || tokens === void 0 ? void 0 : tokens.deny) === null || _g === void 0 ? void 0 : _g.filter((token) => token.chainId === selectedChainId).map((token) => token.address);
+        if (deniedTokenAddresses === null || deniedTokenAddresses === void 0 ? void 0 : deniedTokenAddresses.length) {
+            filteredTokens = filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.filter((token) => !deniedTokenAddresses.includes(token.address));
+        }
         const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
         return [
-            ...((_a = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {
+            ...((_h = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {
                 token.featured = true;
                 return token;
-            })) !== null && _a !== void 0 ? _a : []),
-            ...((_c = (_b = data.tokens) === null || _b === void 0 ? void 0 : _b[selectedChainId].filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _c !== void 0 ? _c : []),
+            })) !== null && _h !== void 0 ? _h : []),
+            ...((_j = filteredTokens === null || filteredTokens === void 0 ? void 0 : filteredTokens.filter((token) => !featuredTokenAddresses.has(token.address))) !== null && _j !== void 0 ? _j : []),
         ];
     }));
     return {
-        tokens,
+        tokens: data,
         isLoading,
-        isFetching,
     };
 };
 exports.useTokens = useTokens;

package/cjs/hooks/useTools.js

@@ -7,11 +7,16 @@ const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const useTools = () => {
     const lifi = (0, providers_1.useLiFi)();
-    const initializeTools = (0, stores_1.useSettingsStore)((state) => state.initializeTools);
+    const { bridges, exchanges } = (0, providers_1.useWidgetConfig)();
     const { data } = (0, react_query_1.useQuery)(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
         onSuccess(data) {
-            initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
-            initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
+            const { initializeTools } = stores_1.useSettingsStore.getState();
+            initializeTools('Bridges', data.bridges
+                .filter((bridge) => (0, providers_1.isItemAllowed)(bridge.key, bridges))
+                .map((bridge) => bridge.key));
+            initializeTools('Exchanges', data.exchanges
+                .filter((exchange) => (0, providers_1.isItemAllowed)(exchange.key, exchanges))
+                .map((exchange) => exchange.key));
         },
     });
     const formattedTools = (0, react_1.useMemo)(() => ({