@lifi/widget 2.0.0-alpha.4 → 2.0.0-beta.1

package/cjs/components/Insurance/Insurance.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const stores_1 = require("../../stores");
 const InsuranceCard_1 = require("./InsuranceCard");
 const InsuranceCollapsed_1 = require("./InsuranceCollapsed");
-const Insurance = ({ status, insurableRouteId, feeAmountUsd, onChange, ...props }) => {
-    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, status: status, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, ...props }));
+const Insurance = ({ status, insurableRouteId, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, insuranceCoverageId: insuranceCoverageId, status: status, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, ...props }));
 };
 exports.Insurance = Insurance;

package/cjs/components/Insurance/InsuranceCard.js

@@ -9,12 +9,18 @@ const icons_1 = require("../../icons");
 const stores_1 = require("../../stores");
 const Card_1 = require("../Card");
 const Switch_1 = require("../Switch");
-const InsuranceCard = ({ status, feeAmountUsd, onChange, ...props }) => {
+const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
                                     ? t(`swap.tags.insurance`)
                                     : t(`swap.tags.insured`) })] }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
                             value: feeAmountUsd,
-                        }) }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: "Get 100% coverage for lost tokens." }) })] }));
+                        }) }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : null] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: status === stores_1.RouteExecutionStatus.Idle
+                            ? 'Get 100% coverage for lost tokens.'
+                            : '100% coverage for lost tokens.' }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
+                            ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                            : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
+                                ? 'Learn more'
+                                : 'View coverage' }) })] })] }));
 };
 exports.InsuranceCard = InsuranceCard;

package/cjs/components/Insurance/InsuranceCollapsed.d.ts

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

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const InsuranceCard_1 = require("./InsuranceCard");
-const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onChange, children, ...props }) => {
+const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
     const [insuredRoute, setInsuredRoute] = (0, react_1.useState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
@@ -27,6 +27,6 @@ const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onChange,
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, onChange: toggleInsurance, ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
 };
 exports.InsuranceCollapsed = InsuranceCollapsed;

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

@@ -4,11 +4,13 @@ import type { RouteExecutionStatus } from '../../stores';
 export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
     insurableRouteId: string;
     feeAmountUsd?: string;
+    insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
     onChange?: (routeId: string) => void;
 }
 export interface InsuranceCardProps {
     feeAmountUsd?: string;
     status?: RouteExecutionStatus;
+    insuranceCoverageId?: string;
     onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
 }

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-alpha.4";
+export declare const version = "2.0.0-beta.1";

package/cjs/config/version.js

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

package/cjs/i18n/pt.json

@@ -184,11 +184,13 @@
     "swapStepDetails": "Converter na {{chain}} via {{tool}}",
     "swapping": "Convertendo",
     "tags": {
-      "ALTERNATIVE": "ALTERNATIVA",
-      "CHEAPEST": "MAIS BARATO",
-      "FASTEST": "MAIS RÁPIDO",
-      "RECOMMENDED": "RECOMENDADO",
-      "SAFEST": "MAIS SEGURO"
+      "cheapest": "Barato",
+      "fastest": "Rápido",
+      "insurable": "Assegurável",
+      "insurance": "Seguro",
+      "insured": "Segurado",
+      "recommended": "Recomendado",
+      "safest": "Seguro"
     },
     "to": "Para",
     "tokenOnChain": "{{tokenSymbol}} na {{chainName}}",
@@ -218,6 +220,7 @@
     }
   },
   "tooltip": {
+    "additionalProviderFee": "Pontes adicionais, DEXes e taxas de serviço.",
     "estimatedNetworkFee": "Taxa de rede estimada.",
     "estimatedTime": "Tempo de execução da conversão estimado em minutos.",
     "notFound": {

package/cjs/i18n/uk.json

@@ -41,7 +41,7 @@
     "from": "Своп з",
     "gas": "Газ",
     "gasSwap": "Своп газу",
-    "routes": "Ви отримуєте",
+    "routes": "Ви отримаєте",
     "selectChain": "Оберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
     "settings": "Налаштування",
@@ -157,7 +157,7 @@
     "rateChange": "Зміна курсу",
     "receiving": "Отримання",
     "refuelStepDetails": "Отримати газ через {{tool}}",
-    "routes": "Ви отримуєте",
+    "routes": "Ви отримаєте",
     "selectChain": "Чейн",
     "selectChainAndToken": "Виберіть чейн і токен",
     "selectToken": "Токен",
@@ -186,7 +186,7 @@
     "tags": {
       "cheapest": "Дешевий",
       "fastest": "Швидкий",
-      "insurable": "Страхування",
+      "insurable": "Страховка",
       "insurance": "Страхування",
       "insured": "Застрахований",
       "recommended": "Рекомендований",

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -16,6 +16,9 @@ const SelectWalletPage = () => {
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { connect } = (0, providers_1.useWallet)();
     const [walletIdentity, setWalletIdentity] = (0, react_1.useState)({ show: false });
+    // separate into installed and not installed wallets
+    const installedWallets = wallet_management_1.supportedWallets.filter((wallet) => wallet.installed());
+    const notInstalledWallets = wallet_management_1.supportedWallets.filter((wallet) => !wallet.installed() && wallet.name !== 'Default Wallet');
     const closeDialog = () => {
         setWalletIdentity((state) => ({
             ...state,
@@ -23,10 +26,7 @@ const SelectWalletPage = () => {
         }));
     };
     const handleConnect = (0, react_1.useCallback)(async (wallet) => {
-        const { ethereum } = window;
-        const identityCheckPassed = wallet.checkProviderIdentity({
-            provider: ethereum,
-        });
+        const identityCheckPassed = wallet.installed();
         if (!identityCheckPassed) {
             setWalletIdentity({
                 show: true,
@@ -40,7 +40,7 @@ const SelectWalletPage = () => {
     return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleConnect(wallet), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: wallet.name })] }, wallet.name))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
+                }, children: [...installedWallets, ...notInstalledWallets].map((wallet) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleConnect(wallet), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: wallet.name })] }, wallet.name))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
                                 name: walletIdentity.wallet?.name,
                             }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
 };

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -32,9 +32,11 @@ const SwapDetailsPage = () => {
             deleteRoute(routeExecution.route.id);
         }
     };
-    let supportId = routeExecution?.route.steps[0].execution?.process.find((process) => process.txHash)?.txHash ??
-        routeExecution?.route.id ??
-        '';
+    const sourceTxHash = routeExecution?.route.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash;
+    const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
+    let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
     if (process.env.NODE_ENV === 'development') {
         supportId += `_${routeExecution?.route.id}`;
     }
@@ -51,7 +53,7 @@ const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
                         }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));

package/cjs/pages/SwapPage/SwapPage.js

@@ -78,7 +78,10 @@ const SwapPage = () => {
         (route?.insurance?.state === 'INSURED' ||
             (status === stores_1.RouteExecutionStatus.Idle &&
                 route?.insurance?.state === 'INSURABLE'));
-    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, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+    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 ||
                 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,

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,26 @@ 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)();
+    (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]);
+        };
+        autoConnect();
+    }, []);
+    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,17 +49,22 @@ 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);
+        }
+    }, [walletManagement, currentWallet]);
     const switchChain = (0, react_1.useCallback)(async (chainId) => {
         if (walletManagement?.switchChain) {
             const signer = await walletManagement.switchChain(chainId);
@@ -48,34 +72,46 @@ const WalletProvider = ({ children }) => {
             setAccount(account);
             return true;
         }
-        return (0, wallet_management_1.switchChain)(chainId);
-    }, [walletManagement]);
+        try {
+            await currentWallet?.switchChain(chainId);
+            handleWalletUpdate(currentWallet);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, [walletManagement, currentWallet]);
     const addChain = (0, react_1.useCallback)(async (chainId) => {
         if (walletManagement?.addChain) {
             return walletManagement.addChain(chainId);
         }
-        return (0, wallet_management_1.addChain)(chainId);
-    }, [walletManagement]);
+        try {
+            await currentWallet?.addChain(chainId);
+            handleWalletUpdate(currentWallet);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, [walletManagement, currentWallet]);
     const addToken = (0, react_1.useCallback)(async (chainId, token) => {
         if (walletManagement?.addToken) {
             return walletManagement.addToken(token, chainId);
         }
-        return (0, wallet_management_1.switchChainAndAddToken)(chainId, token);
-    }, [walletManagement]);
-    // keep account information up to date
+        await currentWallet?.addToken(chainId, token);
+        handleWalletUpdate(currentWallet);
+        return;
+    }, [walletManagement, currentWallet]);
+    // keep widget in sync with changing external signer object
     (0, react_1.useEffect)(() => {
-        const updateAccount = async () => {
-            let account;
-            if (walletManagement) {
-                account = await (0, exports.extractAccountFromSigner)(walletManagement?.signer);
-            }
-            else {
-                account = await (0, exports.extractAccountFromSigner)(signer);
-            }
-            setAccount(account);
-        };
-        updateAccount();
-    }, [signer, walletManagement]);
+        if (walletManagement) {
+            const updateAccount = async () => {
+                const account = await (0, exports.extractAccountFromSigner)(walletManagement?.signer);
+                setAccount(account);
+            };
+            updateAccount();
+        }
+    }, [walletManagement, walletManagement?.signer]);
     const value = (0, react_1.useMemo)(() => ({
         connect,
         disconnect,
@@ -83,8 +119,16 @@ const WalletProvider = ({ children }) => {
         addChain,
         addToken,
         account,
-        provider,
-    }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
+        provider: currentWallet?.account?.provider,
+    }), [
+        account,
+        addChain,
+        addToken,
+        connect,
+        disconnect,
+        currentWallet,
+        switchChain,
+    ]);
     return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, { value: value, children: children }));
 };
 exports.WalletProvider = WalletProvider;
@@ -98,7 +142,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

@@ -7,7 +7,7 @@ export interface WalletContextProps {
     provider?: Provider;
     addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: Token): Promise<void>;
-    disconnect(): void;
+    disconnect(wallet?: Wallet): void;
     switchChain(chainId: number): Promise<boolean>;
     connect(wallet?: Wallet | undefined): Promise<void>;
 }

package/components/Insurance/Insurance.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteExecutionStatus } from '../../stores';
 import { InsuranceCard } from './InsuranceCard';
 import { InsuranceCollapsed } from './InsuranceCollapsed';
-export const Insurance = ({ status, insurableRouteId, feeAmountUsd, onChange, ...props }) => {
-    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, status: status, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, ...props }));
+export const Insurance = ({ status, insurableRouteId, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, insuranceCoverageId: insuranceCoverageId, status: status, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, ...props }));
 };

package/components/Insurance/InsuranceCard.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Typography } from '@mui/material';
+import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
 import { Card, CardLabel, CardLabelTypography } from '../Card';
 import { Switch } from '../Switch';
-export const InsuranceCard = ({ status, feeAmountUsd, onChange, ...props }) => {
+export const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
     const { t } = useTranslation();
     return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
                                     ? t(`swap.tags.insurance`)
                                     : t(`swap.tags.insured`) })] }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
                             value: feeAmountUsd,
-                        }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: _jsx(Typography, { fontSize: 12, children: "Get 100% coverage for lost tokens." }) })] }));
+                        }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { fontSize: 12, children: status === RouteExecutionStatus.Idle
+                            ? 'Get 100% coverage for lost tokens.'
+                            : '100% coverage for lost tokens.' }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
+                            ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                            : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === RouteExecutionStatus.Idle
+                                ? 'Learn more'
+                                : 'View coverage' }) })] })] }));
 };

package/components/Insurance/InsuranceCollapsed.d.ts

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

package/components/Insurance/InsuranceCollapsed.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useSwapRoutes } from '../../hooks';
 import { RouteExecutionStatus, useRouteExecutionStore, useSetExecutableRoute, } from '../../stores';
 import { InsuranceCard } from './InsuranceCard';
-export const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onChange, children, ...props }) => {
+export const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
     const [insuredRoute, setInsuredRoute] = useState();
     const setExecutableRoute = useSetExecutableRoute();
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
@@ -24,5 +24,5 @@ export const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onC
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    return (_jsx(Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, onChange: toggleInsurance, ...props }) }));
+    return (_jsx(Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
 };

package/components/Insurance/types.d.ts

@@ -4,11 +4,13 @@ import type { RouteExecutionStatus } from '../../stores';
 export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
     insurableRouteId: string;
     feeAmountUsd?: string;
+    insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
     onChange?: (routeId: string) => void;
 }
 export interface InsuranceCardProps {
     feeAmountUsd?: string;
     status?: RouteExecutionStatus;
+    insuranceCoverageId?: string;
     onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
 }

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-alpha.4";
+export declare const version = "2.0.0-beta.1";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-alpha.4';
+export const version = '2.0.0-beta.1';

package/i18n/pt.json

@@ -184,11 +184,13 @@
     "swapStepDetails": "Converter na {{chain}} via {{tool}}",
     "swapping": "Convertendo",
     "tags": {
-      "ALTERNATIVE": "ALTERNATIVA",
-      "CHEAPEST": "MAIS BARATO",
-      "FASTEST": "MAIS RÁPIDO",
-      "RECOMMENDED": "RECOMENDADO",
-      "SAFEST": "MAIS SEGURO"
+      "cheapest": "Barato",
+      "fastest": "Rápido",
+      "insurable": "Assegurável",
+      "insurance": "Seguro",
+      "insured": "Segurado",
+      "recommended": "Recomendado",
+      "safest": "Seguro"
     },
     "to": "Para",
     "tokenOnChain": "{{tokenSymbol}} na {{chainName}}",
@@ -218,6 +220,7 @@
     }
   },
   "tooltip": {
+    "additionalProviderFee": "Pontes adicionais, DEXes e taxas de serviço.",
     "estimatedNetworkFee": "Taxa de rede estimada.",
     "estimatedTime": "Tempo de execução da conversão estimado em minutos.",
     "notFound": {

package/i18n/uk.json

@@ -41,7 +41,7 @@
     "from": "Своп з",
     "gas": "Газ",
     "gasSwap": "Своп газу",
-    "routes": "Ви отримуєте",
+    "routes": "Ви отримаєте",
     "selectChain": "Оберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
     "settings": "Налаштування",
@@ -157,7 +157,7 @@
     "rateChange": "Зміна курсу",
     "receiving": "Отримання",
     "refuelStepDetails": "Отримати газ через {{tool}}",
-    "routes": "Ви отримуєте",
+    "routes": "Ви отримаєте",
     "selectChain": "Чейн",
     "selectChainAndToken": "Виберіть чейн і токен",
     "selectToken": "Токен",
@@ -186,7 +186,7 @@
     "tags": {
       "cheapest": "Дешевий",
       "fastest": "Швидкий",
-      "insurable": "Страхування",
+      "insurable": "Страховка",
       "insurance": "Страхування",
       "insured": "Застрахований",
       "recommended": "Рекомендований",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-beta.1",
   "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",
@@ -44,16 +44,16 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^2.0.0-beta.8",
-    "@lifi/wallet-management": "^1.2.11",
+    "@lifi/wallet-management": "^2.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.126",
-    "@mui/material": "^5.12.0",
-    "@tanstack/react-query": "^4.29.1",
+    "@mui/lab": "^5.0.0-alpha.127",
+    "@mui/material": "^5.12.1",
+    "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
     "i18next": "^22.4.14",
     "i18next-browser-languagedetector": "^7.0.1",
-    "microdiff": "^1.3.1",
+    "microdiff": "^1.3.2",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -13,6 +13,9 @@ export const SelectWalletPage = () => {
     const { navigateBack } = useNavigateBack();
     const { connect } = useWallet();
     const [walletIdentity, setWalletIdentity] = useState({ show: false });
+    // separate into installed and not installed wallets
+    const installedWallets = supportedWallets.filter((wallet) => wallet.installed());
+    const notInstalledWallets = supportedWallets.filter((wallet) => !wallet.installed() && wallet.name !== 'Default Wallet');
     const closeDialog = () => {
         setWalletIdentity((state) => ({
             ...state,
@@ -20,10 +23,7 @@ export const SelectWalletPage = () => {
         }));
     };
     const handleConnect = useCallback(async (wallet) => {
-        const { ethereum } = window;
-        const identityCheckPassed = wallet.checkProviderIdentity({
-            provider: ethereum,
-        });
+        const identityCheckPassed = wallet.installed();
         if (!identityCheckPassed) {
             setWalletIdentity({
                 show: true,
@@ -37,7 +37,7 @@ export const SelectWalletPage = () => {
     return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: supportedWallets.map((wallet) => (_jsxs(ListItemButton, { onClick: () => handleConnect(wallet), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), _jsx(ListItemText, { primary: wallet.name })] }, wallet.name))) }), _jsxs(Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
+                }, children: [...installedWallets, ...notInstalledWallets].map((wallet) => (_jsxs(ListItemButton, { onClick: () => handleConnect(wallet), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), _jsx(ListItemText, { primary: wallet.name })] }, wallet.name))) }), _jsxs(Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
                                 name: walletIdentity.wallet?.name,
                             }) }) }), _jsx(DialogActions, { children: _jsx(Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
 };