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

package/i18n/zh.json

@@ -106,12 +106,14 @@
     "inProgress": "进行中",
     "info": {
       "message": {
+        "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
         "emptyActiveSwaps": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
         "emptySwapHistory": "兑换记录只存储在本地，如果你清除浏览器数据，他们将被删除。",
         "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
         "routeNotFound": "试试另一个代币组合。"
       },
       "title": {
+        "autoRefuel": "获得燃气费",
         "emptyActiveSwaps": "没有正在进行的兑换",
         "emptySwapHistory": "没有兑换记录",
         "routeNotFound": "没有可用的路由"
@@ -154,6 +156,7 @@
     "quotedAmount": "报价金额",
     "rateChange": "波动率",
     "receiving": "接收",
+    "refuelStepDetails": "通过 {{tool}} 获取燃气费",
     "routes": "你会收到",
     "selectChain": "网络",
     "selectChainAndToken": "选择链和代币",
@@ -162,6 +165,7 @@
     "sendToWallet": "发送到另外的钱包",
     "sentToAddress": "发送到{{address}}",
     "stepBridge": "跨链",
+    "stepDetails": "通过 LI.FI {{tool}}",
     "stepSwap": "兑换",
     "stepSwapAndBridge": "兑换和跨链",
     "success": {
@@ -180,11 +184,13 @@
     "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
     "swapping": "兑换中",
     "tags": {
-      "ALTERNATIVE": "可用",
-      "CHEAPEST": "便宜",
-      "FASTEST": "快捷",
-      "RECOMMENDED": "推荐",
-      "SAFEST": "安全"
+      "cheapest": "便宜的",
+      "fastest": "快速的",
+      "insurable": "可保性",
+      "insurance": "保险",
+      "insured": "受保的",
+      "recommended": "建议的",
+      "safest": "最佳/安全"
     },
     "to": "到",
     "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
@@ -197,8 +203,8 @@
         "deleteActiveSwaps": "正在进行的兑换记录只存储在本地，如果删除它们，我们将无法恢复这些记录。",
         "deleteSwapHistory": "兑换记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
         "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
-        "insufficientFunds": "你没有足够的资金来执行这笔兑换。",
-        "insufficientGas": "你至少需要：",
+        "insufficientFunds": "你没有足够的资金来完成这笔交易。",
+        "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
         "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
         "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
       },
@@ -207,13 +213,14 @@
         "deleteSwap": "确定要删除这个兑换记录？",
         "deleteSwapHistory": "确定要清空兑换记录？",
         "highValueLoss": "大额资金损失",
-        "insufficientGas": "燃料费不足",
+        "insufficientGas": "燃气费不足",
         "rateChanged": "兑换比例变动",
         "resetSettings": "确定要恢复默认设置吗?"
       }
     }
   },
   "tooltip": {
+    "additionalProviderFee": "跨链和交易所的手续费。",
     "estimatedNetworkFee": "预估网络手续费。",
     "estimatedTime": "预计兑换的执行时间（分钟）。",
     "notFound": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "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,14 +44,14 @@
     "@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.1",
     "@mui/icons-material": "^5.11.16",
     "@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": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/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') }) })] })] }));
 };

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/pages/SettingsPage/SlippageInput.d.ts

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

package/providers/I18nProvider/I18nProvider.js

@@ -8,7 +8,7 @@ import { useSettings } from '../../stores';
 import { deepMerge } from '../../utils';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 export const I18nProvider = ({ children, }) => {
-    const { languageResources, languages, disableI18n } = useWidgetConfig();
+    const { languageResources, languages, disableLanguageDetector } = useWidgetConfig();
     const { language } = useSettings(['language']);
     const i18n = useMemo(() => {
         let resources = Object.keys(supportedLanguages)
@@ -47,11 +47,11 @@ export const I18nProvider = ({ children, }) => {
                 caches: [],
             },
         });
-        if (!language && !languages?.default && !disableI18n) {
+        if (!language && !languages?.default && !disableLanguageDetector) {
             i18n = i18n.use(LanguageDetector);
         }
         i18n.use(initReactI18next).init();
         return i18n;
-    }, [disableI18n, language, languageResources, languages]);
+    }, [disableLanguageDetector, language, languageResources, languages]);
     return _jsx(I18nextProvider, { i18n: i18n, children: children });
 };

package/providers/WalletProvider/WalletProvider.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
+import { LiFiWalletManagement, readActiveWallets, supportedWallets, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { useWidgetConfig } from '../WidgetProvider';
+const liFiWalletManagement = new LiFiWalletManagement();
 const stub = () => {
     throw new Error(`You forgot to wrap your component in <${WalletProvider.name}>.`);
 };
@@ -17,8 +18,26 @@ const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
 export const WalletProvider = ({ children }) => {
     const { walletManagement } = useWidgetConfig();
-    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
+    const [currentWallet, setCurrentWallet] = useState();
+    useEffect(() => {
+        const autoConnect = async () => {
+            const persistedActiveWallets = readActiveWallets();
+            const activeWallets = 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 extractAccountFromSigner(wallet?.account?.signer);
+        setAccount(account);
+    };
     const connect = useCallback(async (wallet) => {
         if (walletManagement) {
             const signer = await walletManagement.connect();
@@ -26,17 +45,22 @@ export const WalletProvider = ({ children }) => {
             setAccount(account);
             return;
         }
-        await walletManagementConnect(wallet);
-    }, [walletManagement, walletManagementConnect]);
+        await liFiWalletManagement.connect(wallet);
+        wallet.on('walletAccountChanged', handleWalletUpdate);
+        handleWalletUpdate(wallet);
+    }, [walletManagement]);
     const disconnect = 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 = useCallback(async (chainId) => {
         if (walletManagement?.switchChain) {
             const signer = await walletManagement.switchChain(chainId);
@@ -44,34 +68,46 @@ export const WalletProvider = ({ children }) => {
             setAccount(account);
             return true;
         }
-        return walletSwitchChain(chainId);
-    }, [walletManagement]);
+        try {
+            await currentWallet?.switchChain(chainId);
+            handleWalletUpdate(currentWallet);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, [walletManagement, currentWallet]);
     const addChain = useCallback(async (chainId) => {
         if (walletManagement?.addChain) {
             return walletManagement.addChain(chainId);
         }
-        return walletAddChain(chainId);
-    }, [walletManagement]);
+        try {
+            await currentWallet?.addChain(chainId);
+            handleWalletUpdate(currentWallet);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, [walletManagement, currentWallet]);
     const addToken = useCallback(async (chainId, token) => {
         if (walletManagement?.addToken) {
             return walletManagement.addToken(token, chainId);
         }
-        return 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
     useEffect(() => {
-        const updateAccount = async () => {
-            let account;
-            if (walletManagement) {
-                account = await extractAccountFromSigner(walletManagement?.signer);
-            }
-            else {
-                account = await extractAccountFromSigner(signer);
-            }
-            setAccount(account);
-        };
-        updateAccount();
-    }, [signer, walletManagement]);
+        if (walletManagement) {
+            const updateAccount = async () => {
+                const account = await extractAccountFromSigner(walletManagement?.signer);
+                setAccount(account);
+            };
+            updateAccount();
+        }
+    }, [walletManagement, walletManagement?.signer]);
     const value = useMemo(() => ({
         connect,
         disconnect,
@@ -79,8 +115,16 @@ export 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 (_jsx(WalletContext.Provider, { value: value, children: children }));
 };
 export const extractAccountFromSigner = async (signer) => {
@@ -93,7 +137,7 @@ export const extractAccountFromSigner = async (signer) => {
         };
     }
     catch (error) {
-        console.log(error);
+        console.error(error);
         return {};
     }
 };

package/providers/WalletProvider/index.d.ts

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

package/providers/WalletProvider/index.js

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

package/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>;
 }