@lifi/widget 2.1.3 → 2.2.0-beta.0

package/cjs/components/GasMessage/GasMessage.js

@@ -6,9 +6,13 @@ const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
 const FundsSufficiencyMessage_1 = require("./FundsSufficiencyMessage");
 const GasSufficiencyMessage_1 = require("./GasSufficiencyMessage");
+const providers_1 = require("../../providers");
 const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
     const { insufficientFunds } = (0, hooks_1.useFundsSufficiency)(route);
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFunds ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : insufficientGas?.length ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    const { sdkConfig } = (0, providers_1.useWidgetConfig)();
+    const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
+    const validInsufficientGas = insufficientGas?.length && !isMultisigSigner;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFunds ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : validInsufficientGas ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };
 exports.GasMessage = GasMessage;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.1.3";
+export declare const version = "2.2.0-beta.0";

package/cjs/config/version.js

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

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -16,9 +16,7 @@ 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 [wallets, setWallets] = (0, react_1.useState)();
     const closeDialog = () => {
         setWalletIdentity((state) => ({
             ...state,
@@ -26,7 +24,7 @@ const SelectWalletPage = () => {
         }));
     };
     const handleConnect = (0, react_1.useCallback)(async (wallet) => {
-        const identityCheckPassed = wallet.installed();
+        const identityCheckPassed = await wallet.installed();
         if (!identityCheckPassed) {
             setWalletIdentity({
                 show: true,
@@ -37,10 +35,19 @@ const SelectWalletPage = () => {
         navigateBack();
         await connect(wallet);
     }, [connect, navigateBack]);
+    (0, react_1.useEffect)(() => {
+        Promise.all(wallet_management_1.supportedWallets.map((wallet) => wallet.installed())).then((installed) => {
+            // separate into installed and not installed wallets
+            const installedWallets = wallet_management_1.supportedWallets.filter((_, index) => installed[index]);
+            // always remove Default Wallet from not installed Wallets
+            const notInstalledWallets = wallet_management_1.supportedWallets.filter((wallet, index) => !installed[index] && wallet.name !== 'Default Wallet');
+            setWallets([...installedWallets, ...notInstalledWallets]);
+        });
+    }, []);
     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: [...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', {
+                }, children: wallets?.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/TransactionPage/StartTransactionButton.js

@@ -2,13 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StartInsurableTransactionButton = exports.StartTransactionButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const providers_1 = require("../../providers");
 const DefaultTransactionButton_1 = require("../../components/DefaultTransactionButton");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const StartTransactionButton = ({ onClick, route, text, loading, }) => {
+    const { sdkConfig } = (0, providers_1.useWidgetConfig)();
+    const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
     const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = (0, hooks_1.useGasSufficiency)(route);
     const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = (0, hooks_1.useFundsSufficiency)(route);
-    return ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { onClick: onClick, text: text, disabled: insufficientFunds || !!insufficientGas?.length, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
+    const shouldDisableButton = !isMultisigSigner && (insufficientFunds || !!insufficientGas?.length);
+    return ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };
 exports.StartTransactionButton = StartTransactionButton;
 const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {

package/components/GasMessage/GasMessage.js

@@ -3,8 +3,12 @@ import { Box, Collapse } from '@mui/material';
 import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
+import { useWidgetConfig } from '../../providers';
 export const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = useGasSufficiency(route);
     const { insufficientFunds } = useFundsSufficiency(route);
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : insufficientGas?.length ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    const { sdkConfig } = useWidgetConfig();
+    const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
+    const validInsufficientGas = insufficientGas?.length && !isMultisigSigner;
+    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : validInsufficientGas ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.1.3";
+export declare const version = "2.2.0-beta.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.1.3';
+export const version = '2.2.0-beta.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.1.3",
+  "version": "2.2.0-beta.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,15 +43,15 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.1.1",
-    "@lifi/wallet-management": "^2.1.3",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.134",
-    "@mui/material": "^5.13.6",
+    "@lifi/sdk": "^2.1.3-beta.0",
+    "@lifi/wallet-management": "^2.2.0-beta.0",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/lab": "^5.0.0-alpha.135",
+    "@mui/material": "^5.13.7",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
-    "i18next": "^23.2.6",
+    "i18next": "^23.2.7",
     "i18next-browser-languagedetector": "^7.1.0",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",
@@ -63,7 +63,7 @@
     "react-router-dom": "^6.14.1",
     "react-timer-hook": "^3.0.6",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.8"
+    "zustand": "^4.3.9"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { supportedWallets } from '@lifi/wallet-management';
 import { Avatar, Button, Container, DialogActions, DialogContent, DialogContentText, List, ListItemAvatar, } from '@mui/material';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { ListItemButton } from '../../components/ListItemButton';
@@ -13,9 +13,7 @@ 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 [wallets, setWallets] = useState();
     const closeDialog = () => {
         setWalletIdentity((state) => ({
             ...state,
@@ -23,7 +21,7 @@ export const SelectWalletPage = () => {
         }));
     };
     const handleConnect = useCallback(async (wallet) => {
-        const identityCheckPassed = wallet.installed();
+        const identityCheckPassed = await wallet.installed();
         if (!identityCheckPassed) {
             setWalletIdentity({
                 show: true,
@@ -34,10 +32,19 @@ export const SelectWalletPage = () => {
         navigateBack();
         await connect(wallet);
     }, [connect, navigateBack]);
+    useEffect(() => {
+        Promise.all(supportedWallets.map((wallet) => wallet.installed())).then((installed) => {
+            // separate into installed and not installed wallets
+            const installedWallets = supportedWallets.filter((_, index) => installed[index]);
+            // always remove Default Wallet from not installed Wallets
+            const notInstalledWallets = supportedWallets.filter((wallet, index) => !installed[index] && wallet.name !== 'Default Wallet');
+            setWallets([...installedWallets, ...notInstalledWallets]);
+        });
+    }, []);
     return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, 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', {
+                }, children: wallets?.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') }) })] })] }));
 };

package/pages/TransactionPage/StartTransactionButton.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetConfig } from '../../providers';
 import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
 import { useFundsSufficiency, useGasSufficiency, useRoutes } from '../../hooks';
 import { useRouteExecutionStore } from '../../stores';
 export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
+    const { sdkConfig } = useWidgetConfig();
+    const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
     const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
     const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = useFundsSufficiency(route);
-    return (_jsx(DefaultTransactionButton, { onClick: onClick, text: text, disabled: insufficientFunds || !!insufficientGas?.length, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
+    const shouldDisableButton = !isMultisigSigner && (insufficientFunds || !!insufficientGas?.length);
+    return (_jsx(DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };
 export const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);