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

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -29,9 +29,11 @@ export 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}`;
     }
@@ -48,7 +50,7 @@ export const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), getStepList(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
                         }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));

package/pages/SwapPage/SwapPage.js

@@ -75,7 +75,10 @@ export const SwapPage = () => {
         (route?.insurance?.state === 'INSURED' ||
             (status === RouteExecutionStatus.Idle &&
                 route?.insurance?.state === 'INSURABLE'));
-    return (_jsxs(Container, { children: [getStepList(route), insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
+    const insuranceCoverageId = route?.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
+    return (_jsxs(Container, { children: [getStepList(route), insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
                 status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,

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