@lifi/widget 2.0.0-beta.0 → 2.0.0-beta.10

package/cjs/pages/SwapPage/SwapPage.js

@@ -8,20 +8,25 @@ const react_1 = require("react");
 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 ContractComponent_1 = require("../../components/ContractComponent");
 const GasMessage_1 = require("../../components/GasMessage");
 const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const events_1 = require("../../types/events");
+const utils_1 = require("../../utils");
 const ExchangeRateBottomSheet_1 = require("./ExchangeRateBottomSheet");
 const StartSwapButton_1 = require("./StartSwapButton");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
 const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
+const utils_2 = require("./utils");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const emitter = (0, hooks_1.useWidgetEvents)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { variant, insurance } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
@@ -29,21 +34,32 @@ const SwapPage = () => {
     const [routeId, setRouteId] = (0, react_1.useState)(stateRouteId);
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
     const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
         routeId: routeId,
-        onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
+        onAcceptExchangeRateUpdate,
     });
-    const handleExecuteRoute = (0, react_1.useCallback)(() => {
+    const tokenValueLossThresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
+    const handleExecuteRoute = () => {
         if (tokenValueBottomSheetRef.current?.isOpen()) {
+            if (route) {
+                emitter.emit(events_1.WidgetEvent.RouteHighValueLoss, {
+                    fromAmountUsd: route.fromAmountUSD,
+                    gasCostUSD: route.gasCostUSD,
+                    toAmountUSD: route.toAmountUSD,
+                    valueLoss: (0, utils_2.calcValueLoss)(route),
+                });
+            }
             tokenValueBottomSheetRef.current?.close();
         }
         executeRoute();
         setValue(providers_1.SwapFormKey.FromAmount, '');
-    }, [executeRoute, setValue]);
+    };
     const handleSwapClick = async () => {
         if (status === stores_1.RouteExecutionStatus.Idle) {
-            const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
-            if (thresholdExceeded) {
+            if (tokenValueLossThresholdExceeded && variant !== 'nft') {
                 tokenValueBottomSheetRef.current?.open();
             }
             else {
@@ -61,9 +77,14 @@ const SwapPage = () => {
     const getSwapButtonText = () => {
         switch (status) {
             case stores_1.RouteExecutionStatus.Idle:
-                return variant !== 'refuel'
-                    ? t(`button.startSwap`)
-                    : t(`button.startGasSwap`);
+                switch (variant) {
+                    case 'nft':
+                        return t('button.buyNow');
+                    case 'refuel':
+                        return t('button.startGasSwap');
+                    default:
+                        return t('button.startSwap');
+                }
             case stores_1.RouteExecutionStatus.Failed:
                 return t('button.tryAgain');
             default:
@@ -81,10 +102,10 @@ const SwapPage = () => {
     const insuranceCoverageId = route?.steps[0].execution?.process
         .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
         .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
-    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), variant === 'nft' ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2 }) : null, route && insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
                 status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { mt: 2, route: route }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route && tokenValueLossThresholdExceeded && variant !== 'nft' ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -4,12 +4,12 @@ exports.getTokenValueLossThreshold = exports.TokenValueBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const material_1 = require("@mui/material");
-const big_js_1 = require("big.js");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const BottomSheet_1 = require("../../components/BottomSheet");
 const hooks_1 = require("../../hooks");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
+const utils_1 = require("./utils");
 exports.TokenValueBottomSheet = (0, react_1.forwardRef)(({ route, onContinue, onCancel }, ref) => {
     const handleCancel = () => {
         ref.current?.close();
@@ -21,23 +21,18 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(route.toAmountUSD || 0)
-                                .div((0, big_js_1.default)(route.fromAmountUSD || 0).plus((0, big_js_1.default)(route.gasCostUSD || 0)))
-                                .minus(1)
-                                .mul(100)
-                                .round(2, big_js_1.default.roundUp)
-                                .toString(), "%"] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: (0, utils_1.calcValueLoss)(route) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };
 const getTokenValueLossThreshold = (route) => {
     if (!route) {
         return false;
     }
-    const fromAmountUSD = (0, big_js_1.default)(route?.fromAmountUSD || 0);
-    const toAmountUSD = (0, big_js_1.default)(route?.toAmountUSD || 0);
-    const gasCostUSD = (0, big_js_1.default)(route?.gasCostUSD || 0);
-    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
+    const fromAmountUSD = Number(route.fromAmountUSD || 0);
+    const toAmountUSD = Number(route.toAmountUSD || 0);
+    const gasCostUSD = Number(route.gasCostUSD || 0);
+    if (!fromAmountUSD && !toAmountUSD) {
         return false;
     }
-    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
+    return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
 };
 exports.getTokenValueLossThreshold = getTokenValueLossThreshold;

package/cjs/pages/SwapPage/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Route } from '@lifi/sdk';
+export declare const calcValueLoss: (route: Route) => string;

package/cjs/pages/SwapPage/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcValueLoss = void 0;
+const calcValueLoss = (route) => {
+    return `${((Number(route.toAmountUSD || 0) /
+        (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
+        1) *
+        100).toFixed(2)}%`;
+};
+exports.calcValueLoss = calcValueLoss;

package/cjs/providers/I18nProvider/I18nProvider.js

@@ -11,7 +11,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const WidgetProvider_1 = require("../WidgetProvider");
 const I18nProvider = ({ children, }) => {
-    const { languageResources, languages, disableI18n } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { languageResources, languages, disableLanguageDetector } = (0, WidgetProvider_1.useWidgetConfig)();
     const { language } = (0, stores_1.useSettings)(['language']);
     const i18n = (0, react_1.useMemo)(() => {
         let resources = Object.keys(supportedLanguages)
@@ -50,12 +50,12 @@ const I18nProvider = ({ children, }) => {
                 caches: [],
             },
         });
-        if (!language && !languages?.default && !disableI18n) {
+        if (!language && !languages?.default && !disableLanguageDetector) {
             i18n = i18n.use(i18next_browser_languagedetector_1.default);
         }
         i18n.use(react_i18next_1.initReactI18next).init();
         return i18n;
-    }, [disableI18n, language, languageResources, languages]);
+    }, [disableLanguageDetector, language, languageResources, languages]);
     return (0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n, children: children });
 };
 exports.I18nProvider = I18nProvider;

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -4,6 +4,7 @@ exports.SDKProvider = exports.useLiFi = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
+const version_1 = require("../../config/version");
 const WidgetProvider_1 = require("../WidgetProvider");
 let lifi;
 const SDKContext = (0, react_1.createContext)(null);
@@ -27,6 +28,7 @@ const SDKProvider = ({ children, }) => {
         if (!lifi) {
             lifi = new sdk_1.LiFi({
                 disableVersionCheck: true,
+                widgetVersion: version_1.version,
                 ...config,
             });
         }

package/cjs/providers/SwapFormProvider/FormUpdater.js

@@ -26,6 +26,7 @@ const FormUpdater = ({ defaultValues }) => {
         const { isTouched: isToTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToToken);
         const { isTouched: isFromAmountTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromAmount);
         if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
+            resetField(SwapFormProvider_1.SwapFormKey.FromChain, { defaultValue: account.chainId });
             setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.FromToken, '');
             if (isFromAmountTouched) {
@@ -33,6 +34,7 @@ const FormUpdater = ({ defaultValues }) => {
             }
         }
         if (!toChain && !isToChainTouched && !isToTokenTouched) {
+            resetField(SwapFormProvider_1.SwapFormKey.ToChain, { defaultValue: account.chainId });
             setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.ToToken, '');
         }
@@ -43,6 +45,7 @@ const FormUpdater = ({ defaultValues }) => {
         fromChain,
         getFieldState,
         getValues,
+        resetField,
         setValue,
         toChain,
     ]);

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
 const WidgetProvider_1 = require("../WidgetProvider");
+const liFiWalletManagement = new wallet_management_1.LiFiWalletManagement();
 const stub = () => {
     throw new Error(`You forgot to wrap your component in <${exports.WalletProvider.name}>.`);
 };
@@ -21,8 +22,13 @@ const useWallet = () => (0, react_1.useContext)(WalletContext);
 exports.useWallet = useWallet;
 const WalletProvider = ({ children }) => {
     const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
-    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = (0, wallet_management_1.useLiFiWalletManagement)();
     const [account, setAccount] = (0, react_1.useState)({});
+    const [currentWallet, setCurrentWallet] = (0, react_1.useState)();
+    const handleWalletUpdate = async (wallet) => {
+        setCurrentWallet(wallet);
+        const account = await (0, exports.extractAccountFromSigner)(wallet?.account?.signer);
+        setAccount(account);
+    };
     const connect = (0, react_1.useCallback)(async (wallet) => {
         if (walletManagement) {
             const signer = await walletManagement.connect();
@@ -30,52 +36,119 @@ const WalletProvider = ({ children }) => {
             setAccount(account);
             return;
         }
-        await walletManagementConnect(wallet);
-    }, [walletManagement, walletManagementConnect]);
+        await liFiWalletManagement.connect(wallet);
+        wallet.on('walletAccountChanged', handleWalletUpdate);
+        handleWalletUpdate(wallet);
+    }, [walletManagement]);
     const disconnect = (0, react_1.useCallback)(async () => {
         if (walletManagement) {
             await walletManagement.disconnect();
             setAccount({});
             return;
         }
-        await walletManagementDisconnect();
-    }, [walletManagement, walletManagementDisconnect]);
-    // only for injected wallets
+        if (currentWallet) {
+            await liFiWalletManagement.disconnect(currentWallet);
+            currentWallet.removeAllListeners();
+            handleWalletUpdate(undefined);
+        }
+    }, [currentWallet, walletManagement]);
     const switchChain = (0, react_1.useCallback)(async (chainId) => {
-        if (walletManagement?.switchChain) {
-            const signer = await walletManagement.switchChain(chainId);
-            const account = await (0, exports.extractAccountFromSigner)(signer);
-            setAccount(account);
-            return true;
+        try {
+            if (walletManagement?.switchChain) {
+                const signer = await walletManagement.switchChain(chainId);
+                const account = await (0, exports.extractAccountFromSigner)(signer);
+                setAccount(account);
+                return signer;
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Switch chain: No provider available`);
+                }
+                await (0, wallet_management_1.switchChain)(provider, chainId);
+            }
+            else {
+                await currentWallet?.switchChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
+            // TODO: this will fail if it's not created with ethers 'any' network, replace with the new signer when possible
+            return account.signer;
         }
-        return (0, wallet_management_1.switchChain)(chainId);
-    }, [walletManagement]);
+        catch {
+            return account.signer;
+        }
+    }, [account.signer, currentWallet, walletManagement]);
     const addChain = (0, react_1.useCallback)(async (chainId) => {
-        if (walletManagement?.addChain) {
-            return walletManagement.addChain(chainId);
+        try {
+            if (walletManagement?.addChain) {
+                return walletManagement.addChain(chainId);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Add chain: No provider available`);
+                }
+                await (0, wallet_management_1.addChain)(provider, chainId);
+            }
+            else {
+                await currentWallet?.addChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
+            return true;
         }
-        return (0, wallet_management_1.addChain)(chainId);
-    }, [walletManagement]);
-    const addToken = (0, react_1.useCallback)(async (chainId, token) => {
-        if (walletManagement?.addToken) {
-            return walletManagement.addToken(token, chainId);
+        catch {
+            return false;
         }
-        return (0, wallet_management_1.switchChainAndAddToken)(chainId, token);
-    }, [walletManagement]);
-    // keep account information up to date
-    (0, react_1.useEffect)(() => {
-        const updateAccount = async () => {
-            let account;
-            if (walletManagement) {
-                account = await (0, exports.extractAccountFromSigner)(walletManagement?.signer);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
+    const addToken = (0, react_1.useCallback)(async (chainId, token) => {
+        try {
+            if (walletManagement?.addToken) {
+                return walletManagement.addToken(token, chainId);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Add token: No provider available`);
+                }
+                await (0, wallet_management_1.switchChainAndAddToken)(provider, chainId, token);
             }
             else {
-                account = await (0, exports.extractAccountFromSigner)(signer);
+                await currentWallet?.addToken(chainId, token);
+                handleWalletUpdate(currentWallet);
             }
-            setAccount(account);
+        }
+        catch { }
+    }, [account.signer?.provider, currentWallet, walletManagement]);
+    (0, react_1.useEffect)(() => {
+        const autoConnect = async () => {
+            const persistedActiveWallets = (0, wallet_management_1.readActiveWallets)();
+            const activeWallets = wallet_management_1.supportedWallets.filter((wallet) => persistedActiveWallets.some((perstistedWallet) => perstistedWallet.name === wallet.name));
+            if (!activeWallets.length) {
+                return;
+            }
+            await liFiWalletManagement.autoConnect(activeWallets);
+            activeWallets[0].on('walletAccountChanged', handleWalletUpdate);
+            handleWalletUpdate(activeWallets[0]);
         };
-        updateAccount();
-    }, [signer, walletManagement]);
+        autoConnect();
+    }, []);
+    // keep widget in sync with changing external signer object
+    (0, react_1.useEffect)(() => {
+        if (walletManagement) {
+            let ignore = false;
+            const updateAccount = async () => {
+                const account = await (0, exports.extractAccountFromSigner)(walletManagement?.signer);
+                // we should ignore the update if there is a newer one
+                if (!ignore) {
+                    setAccount(account);
+                }
+            };
+            updateAccount();
+            return () => {
+                ignore = true;
+            };
+        }
+    }, [walletManagement]);
     const value = (0, react_1.useMemo)(() => ({
         connect,
         disconnect,
@@ -83,8 +156,7 @@ const WalletProvider = ({ children }) => {
         addChain,
         addToken,
         account,
-        provider,
-    }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, { value: value, children: children }));
 };
 exports.WalletProvider = WalletProvider;
@@ -98,7 +170,7 @@ const extractAccountFromSigner = async (signer) => {
         };
     }
     catch (error) {
-        console.log(error);
+        console.error(error);
         return {};
     }
 };

package/cjs/providers/WalletProvider/index.d.ts

@@ -1,2 +1,2 @@
-export * from './types';
 export * from './WalletProvider';
+export * from './types';

package/cjs/providers/WalletProvider/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./types"), exports);
 __exportStar(require("./WalletProvider"), exports);
+__exportStar(require("./types"), exports);

package/cjs/providers/WalletProvider/types.d.ts

@@ -1,14 +1,12 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { Provider } from '@ethersproject/providers';
-import type { Token } from '@lifi/sdk';
+import type { StaticToken } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 export interface WalletContextProps {
     account: WalletAccount;
-    provider?: Provider;
     addChain(chainId: number): Promise<boolean>;
-    addToken(chainId: number, token: Token): Promise<void>;
-    disconnect(): void;
-    switchChain(chainId: number): Promise<boolean>;
+    addToken(chainId: number, token: StaticToken): Promise<void>;
+    disconnect(wallet?: Wallet): void;
+    switchChain(chainId: number): Promise<Signer | undefined>;
     connect(wallet?: Wallet | undefined): Promise<void>;
 }
 export interface WalletAccount {

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -50,7 +50,7 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
                 toToken: searchParams.toToken?.toLowerCase() || toToken?.toLowerCase(),
                 fromAmount: typeof searchParams.fromAmount === 'string' &&
                     !isNaN(parseFloat(searchParams.fromAmount))
-                    ? (0, utils_1.formatAmount)(searchParams.fromAmount)
+                    ? (0, utils_1.formatInputAmount)(searchParams.fromAmount)
                     : fromAmount,
                 elementId,
                 integrator,

package/cjs/stores/StoreProvider.d.ts

@@ -1,3 +1,3 @@
 import type { PropsWithChildren } from 'react';
-import type { PersistStoreProviderProps } from './types';
-export declare const StoreProvider: React.FC<PropsWithChildren<PersistStoreProviderProps>>;
+import type { WidgetConfigProps } from '../types';
+export declare const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>>;

package/cjs/stores/StoreProvider.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const routes_1 = require("./routes");
-const StoreProvider = ({ children, namePrefix }) => {
-    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: children }));
+const settings_1 = require("./settings");
+const StoreProvider = ({ children, config, }) => {
+    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }));
 };
 exports.StoreProvider = StoreProvider;

package/cjs/stores/routes/RouteExecutionStore.d.ts

@@ -4,6 +4,6 @@ import type { PersistStoreProviderProps } from '../types';
 import type { RouteExecutionState } from './types';
 export type RouteExecutionStore = UseBoundStore<StoreApi<RouteExecutionState>>;
 export declare const RouteExecutionStoreContext: import("react").Context<RouteExecutionStore | null>;
-export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useRouteExecutionStore<T>(selector: (state: RouteExecutionState) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export declare function useRouteExecutionStoreContext(): RouteExecutionStore;

package/cjs/stores/routes/RouteExecutionStore.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRouteExecutionStoreContext = exports.useRouteExecutionStore = exports.RouteExecutionStoreProvider = exports.RouteExecutionStoreContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-underscore-dangle */
 const react_1 = require("react");
 const createRouteExecutionStore_1 = require("./createRouteExecutionStore");
 exports.RouteExecutionStoreContext = (0, react_1.createContext)(null);

package/cjs/stores/settings/index.d.ts

@@ -3,3 +3,4 @@ export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
 export * from './useSettingsStore';
+export * from './useSplitSubvariantStore';

package/cjs/stores/settings/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./useAppearance"), exports);
 __exportStar(require("./useSendToWalletStore"), exports);
 __exportStar(require("./useSettings"), exports);
 __exportStar(require("./useSettingsStore"), exports);
+__exportStar(require("./useSplitSubvariantStore"), exports);

package/cjs/stores/settings/types.d.ts

@@ -1,4 +1,6 @@
 import type { Order } from '@lifi/sdk';
+import type { PropsWithChildren } from 'react';
+import type { StoreApi, UseBoundStore } from 'zustand';
 import type { Appearance, WidgetConfig } from '../../types';
 export type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
 export type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
@@ -32,3 +34,12 @@ export interface SendToWalletStore extends SendToWalletState {
     toggleSendToWallet(): void;
     setSendToWallet(value: boolean): void;
 }
+export interface SplitSubvariantState {
+    state?: 'swap' | 'bridge';
+    setState(state: 'swap' | 'bridge'): void;
+}
+export type SplitSubvariantStore = UseBoundStore<StoreApi<SplitSubvariantState>>;
+export interface SplitSubvariantProps {
+    state?: 'swap' | 'bridge';
+}
+export type SplitSubvariantProviderProps = PropsWithChildren<SplitSubvariantProps>;

package/cjs/stores/settings/useSplitSubvariantStore.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { SplitSubvariantProps, SplitSubvariantProviderProps, SplitSubvariantState, SplitSubvariantStore } from './types';
+export declare const SplitSubvariantStoreContext: import("react").Context<SplitSubvariantStore | null>;
+export declare function SplitSubvariantStoreProvider({ children, ...props }: SplitSubvariantProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSplitSubvariantStore<T>(selector: (state: SplitSubvariantState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useSplitSubvariantStoreContext(): SplitSubvariantStore;
+export declare const createSplitSubvariantStore: ({ state }: SplitSubvariantProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<SplitSubvariantState>>;

package/cjs/stores/settings/useSplitSubvariantStore.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSplitSubvariantStore = exports.useSplitSubvariantStoreContext = exports.useSplitSubvariantStore = exports.SplitSubvariantStoreProvider = exports.SplitSubvariantStoreContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+exports.SplitSubvariantStoreContext = (0, react_1.createContext)(null);
+const shouldRecreateStore = (store, props) => {
+    const { state } = store.getState();
+    return (!state && props.state) || (state && !props.state);
+};
+function SplitSubvariantStoreProvider({ children, ...props }) {
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+        storeRef.current = (0, exports.createSplitSubvariantStore)(props);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.SplitSubvariantStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+exports.SplitSubvariantStoreProvider = SplitSubvariantStoreProvider;
+function useSplitSubvariantStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useSplitSubvariantStore = useSplitSubvariantStore;
+function useSplitSubvariantStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useSplitSubvariantStoreContext = useSplitSubvariantStoreContext;
+const createSplitSubvariantStore = ({ state }) => (0, zustand_1.create)((set) => ({
+    state,
+    setState(state) {
+        set(() => ({
+            state,
+        }));
+    },
+}));
+exports.createSplitSubvariantStore = createSplitSubvariantStore;

package/cjs/types/events.d.ts

@@ -3,13 +3,21 @@ export declare enum WidgetEvent {
     RouteExecutionStarted = "routeExecutionStarted",
     RouteExecutionUpdated = "routeExecutionUpdated",
     RouteExecutionCompleted = "routeExecutionCompleted",
-    RouteExecutionFailed = "routeExecutionFailed"
+    RouteExecutionFailed = "routeExecutionFailed",
+    RouteHighValueLoss = "routeHighValueLoss"
+}
+export interface RouteHighValueLossUpdate {
+    fromAmountUsd: string;
+    gasCostUSD: string | undefined;
+    toAmountUSD: string;
+    valueLoss: string;
 }
 export type WidgetEvents = {
     routeExecutionStarted: Route;
     routeExecutionUpdated: RouteExecutionUpdate;
     routeExecutionCompleted: Route;
     routeExecutionFailed: RouteExecutionUpdate;
+    routeHighValueLoss: RouteHighValueLossUpdate;
 };
 export interface RouteExecutionUpdate {
     route: Route;

package/cjs/types/events.js

@@ -7,4 +7,5 @@ var WidgetEvent;
     WidgetEvent["RouteExecutionUpdated"] = "routeExecutionUpdated";
     WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
+    WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
 })(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));

package/cjs/types/token.d.ts

@@ -1,4 +1,4 @@
-import type { TokenAmount } from '@lifi/sdk';
-export interface Token extends TokenAmount {
+import type { TokenAmount as SDKTokenAmount } from '@lifi/sdk';
+export interface TokenAmount extends SDKTokenAmount {
     featured?: boolean;
 }