@lifi/widget 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "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",
@@ -43,28 +43,28 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^1.6.3",
-    "@lifi/wallet-management": "^1.1.11",
+    "@lifi/wallet-management": "^1.1.12",
     "@mui/icons-material": "^5.10.9",
-    "@mui/lab": "^5.0.0-alpha.105",
-    "@mui/material": "^5.10.11",
-    "@sentry/integrations": "^7.16.0",
-    "@sentry/react": "^7.16.0",
-    "@sentry/tracing": "^7.16.0",
-    "@tanstack/react-query": "^4.13.0",
-    "@tanstack/react-virtual": "^3.0.0-beta.18",
+    "@mui/lab": "^5.0.0-alpha.107",
+    "@mui/material": "^5.10.13",
+    "@sentry/integrations": "^7.18.0",
+    "@sentry/react": "^7.18.0",
+    "@sentry/tracing": "^7.18.0",
+    "@tanstack/react-query": "^4.14.5",
+    "@tanstack/react-virtual": "^3.0.0-beta.22",
     "big.js": "^6.2.1",
-    "i18next": "^22.0.3",
-    "i18next-browser-languagedetector": "^7.0.0",
+    "i18next": "^22.0.4",
+    "i18next-browser-languagedetector": "^7.0.1",
     "immer": "^9.0.16",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.38.0",
+    "react-hook-form": "^7.39.1",
     "react-i18next": "^12.0.0",
-    "react-router-dom": "^6.4.2",
+    "react-router-dom": "^6.4.3",
     "react-timer-hook": "^3.0.5",
-    "zustand": "^4.1.3"
+    "zustand": "^4.1.4"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

package/pages/SelectChainPage/SelectChainPage.d.ts

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

package/pages/SelectChainPage/SelectChainPage.js

@@ -10,17 +10,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
 import { useChainSelect } from '../../components/ChainSelect';
+import { useTokenSelect } from '../../components/TokenList';
 import { useNavigateBack } from '../../hooks';
 import { ListItemButton, ListItemText } from './SelectChainPage.style';
-export const SelectChainPage = ({ formType }) => {
+export const SelectChainPage = ({ formType, selectNativeToken, }) => {
     const { navigateBack } = useNavigateBack();
     const { chains, setCurrentChain } = useChainSelect(formType);
-    const handleClick = (chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        setCurrentChain(chainId);
-        navigateBack();
+    const selectToken = useTokenSelect(formType, navigateBack);
+    const handleClick = (chain) => __awaiter(void 0, void 0, void 0, function* () {
+        if (selectNativeToken) {
+            selectToken(chain.nativeToken.address, chain.id);
+        }
+        else {
+            setCurrentChain(chain.id);
+            navigateBack();
+        }
     });
     return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleClick(chain.id), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] })) }), _jsx(ListItemText, { primary: chain.name })] }), chain.id))) })) })));
+            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleClick(chain), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] })) }), _jsx(ListItemText, { primary: chain.name })] }), chain.id))) })) })));
 };

package/pages/SelectChainPage/types.d.ts

@@ -0,0 +1,4 @@
+import type { SwapFormTypeProps } from '../../providers';
+export interface SelectChainPageProps extends SwapFormTypeProps {
+    selectNativeToken?: boolean;
+}

package/pages/SelectChainPage/types.js

@@ -0,0 +1 @@
+export {};

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element | null;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -53,10 +53,12 @@ export const SwapDetailsPage = () => {
                 }, pb: 1 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
                         }).format(startedAt) }))] })), routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.map((step, index, steps) => {
-                var _a, _b;
-                return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: index === 0
-                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
-                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
+                var _a, _b, _c, _d, _e;
+                const fromToken = index === 0
+                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
+                const toToken = index === steps.length - 1
+                    ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
+                return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
             }), _jsxs(Card, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,

package/pages/SwapPage/StatusBottomSheet.js

@@ -76,5 +76,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? _jsx(InfoIcon, { color: "primary" }) : null, status === 'success' ? _jsx(DoneIcon, { color: "success" }) : null, status === 'error' ? _jsx(WarningIcon, { color: "error" }) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1, disableDescription: true })) : null] }), _jsx(Typography, Object.assign({ py: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.ok') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.seeDetails') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

package/pages/SwapPage/SwapPage.js

@@ -28,9 +28,7 @@ export const SwapPage = () => {
     const { state } = useLocation();
     const { navigateBack } = useNavigateBack();
     const tokenValueBottomSheetRef = useRef(null);
-    const { setValue,
-    // formState: { isValid, isValidating },
-     } = useFormContext();
+    const { setValue } = useFormContext();
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
     const handleExecuteRoute = useCallback(() => {
         var _a, _b;
@@ -70,10 +68,12 @@ export const SwapPage = () => {
         }
     };
     return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
-                var _a, _b;
-                return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: index === 0
-                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
-                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
+                var _a, _b, _c, _d, _e;
+                const fromToken = index === 0
+                    ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined;
+                const toToken = index === steps.length - 1
+                    ? Object.assign(Object.assign({}, ((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toToken) !== null && _b !== void 0 ? _b : (_c = step.action) === null || _c === void 0 ? void 0 : _c.toToken)), { amount: (_e = (_d = step.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : step.estimate.toAmount }) : undefined;
+                return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
             }), status === 'idle' || status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
                                 // disable={status === 'idle' && (isValidating || !isValid)}
                                 enableLoading: true }), status === 'error' ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {