@lifi/widget 1.16.1 → 1.17.0

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -5,10 +5,10 @@ import { FormControl, MenuItem } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useSetSettings, useSettings } from '../../stores';
+import { useSettings, useSettingsStore } from '../../stores';
 export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
-    const [setValue] = useSetSettings();
+    const setValue = useSettingsStore((state) => state.setValue);
     const { routePriority } = useSettings(['routePriority']);
     return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);

package/pages/SettingsPage/ShowDestinationWallet.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
-import { useSetSettings, useSettings } from '../../stores';
+import { useSettings, useSettingsStore } from '../../stores';
 export const ShowDestinationWallet = () => {
     const { t } = useTranslation();
-    const [setValue] = useSetSettings();
+    const setValue = useSettingsStore((state) => state.setValue);
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     const onChange = (_, checked) => {
         setValue('showDestinationWallet', checked);

package/pages/SettingsPage/SlippageInput.js

@@ -4,12 +4,12 @@ import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { Input } from '../../components/Input';
-import { useSetSettings, useSettings } from '../../stores';
+import { useSettings, useSettingsStore } from '../../stores';
 import { formatSlippage } from '../../utils';
 export const SlippageInput = () => {
     const { t } = useTranslation();
-    const [setValue] = useSetSettings();
     const { slippage } = useSettings(['slippage']);
+    const setValue = useSettingsStore((state) => state.setValue);
     const defaultValue = useRef(slippage);
     const handleChange = (event) => {
         const { value } = event.target;

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -16,7 +16,7 @@ import { useLocation } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { Dialog } from '../../components/Dialog';
-import { useSetHeaderAction } from '../../components/Header';
+import { useHeaderActionStore } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { useNavigateBack } from '../../hooks';
@@ -26,7 +26,6 @@ export const SwapDetailsPage = () => {
     var _a, _b;
     const { t } = useTranslation();
     const { navigateBack } = useNavigateBack();
-    const setHeaderAction = useSetHeaderAction();
     const { state } = useLocation();
     const [routeExecution, deleteRoute] = useRouteStore((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow);
     const [open, setOpen] = useState(false);
@@ -44,8 +43,8 @@ export const SwapDetailsPage = () => {
         yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
     });
     useEffect(() => {
-        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
-    }, [setHeaderAction, toggleDialog]);
+        return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [toggleDialog]);
     const startedAt = new Date((_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
     return (_jsxs(Container, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -4,7 +4,7 @@ import { Button, Container, DialogActions, DialogContent, DialogContentText, Dia
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
-import { useSetHeaderAction } from '../../components/Header';
+import { useHeaderActionStore } from '../../components/Header';
 import { useWallet } from '../../providers';
 import { useRouteStore } from '../../stores';
 import { useSwapHistory } from '../../stores/route';
@@ -15,14 +15,13 @@ export const SwapHistoryPage = () => {
     const { account } = useWallet();
     const swaps = useSwapHistory(account.address);
     const deleteRoutes = useRouteStore((store) => store.deleteRoutes);
-    const setHeaderAction = useSetHeaderAction();
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
         setOpen((open) => !open);
     }, []);
     useEffect(() => {
-        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
-    }, [setHeaderAction, toggleDialog]);
+        return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }

package/pages/SwapPage/SwapPage.js

@@ -1,3 +1,12 @@
+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());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import { Fragment } from 'react';
@@ -22,7 +31,7 @@ export const SwapPage = () => {
         navigateBack();
         deleteRoute();
     };
-    const handleSwapClick = () => {
+    const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (status === 'idle') {
             executeRoute();
             setValue(SwapFormKey.FromAmount, '');
@@ -30,7 +39,7 @@ export const SwapPage = () => {
         if (status === 'error') {
             restartRoute();
         }
-    };
+    });
     // eslint-disable-next-line consistent-return
     const getSwapButtonText = () => {
         if (status === 'idle') {

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/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/WalletProvider/WalletProvider.js

@@ -10,7 +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 { useWidgetConfig } from '../WidgetProvider';
+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>.');
 };
@@ -25,7 +28,8 @@ const initialContext = {
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
 export const WalletProvider = ({ children }) => {
-    const { walletManagement } = useWidgetConfig();
+    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* () {
@@ -90,6 +94,58 @@ export const WalletProvider = ({ children }) => {
         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/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/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/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];
 };