@lifi/widget 2.0.0-beta.7 → 2.0.0-beta.8

package/pages/SwapPage/StatusBottomSheet.js

@@ -12,7 +12,7 @@ import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { SwapFormKey, useWidgetConfig } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
-import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenWalletAddress, } from '../../utils';
+import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenAddress, } from '../../utils';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     const { t } = useTranslation();
@@ -79,7 +79,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenWalletAddress(route.toAddress),
+                    walletAddress: shortenAddress(route.toAddress),
                 });
             }
             handlePrimaryButton = handleDone;
@@ -96,7 +96,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenWalletAddress(route.toAddress),
+                    walletAddress: shortenAddress(route.toAddress),
                 });
             }
             handlePrimaryButton = handlePartialDone;
@@ -113,7 +113,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenWalletAddress(route.toAddress),
+                    walletAddress: shortenAddress(route.toAddress),
                 });
             }
             break;

package/providers/WalletProvider/WalletProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LiFiWalletManagement, readActiveWallets, supportedWallets, } from '@lifi/wallet-management';
+import { LiFiWalletManagement, readActiveWallets, supportedWallets, addChain as walletAgnosticAddChain, switchChainAndAddToken as walletAgnosticAddToken, switchChain as walletAgnosticSwitchChain, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { useWidgetConfig } from '../WidgetProvider';
 const liFiWalletManagement = new LiFiWalletManagement();
@@ -20,19 +20,6 @@ export const WalletProvider = ({ children }) => {
     const { walletManagement } = useWidgetConfig();
     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);
@@ -60,54 +47,102 @@ export const WalletProvider = ({ children }) => {
             currentWallet.removeAllListeners();
             handleWalletUpdate(undefined);
         }
-    }, [walletManagement, currentWallet]);
+    }, [currentWallet, walletManagement]);
     const switchChain = useCallback(async (chainId) => {
-        if (walletManagement?.switchChain) {
-            const signer = await walletManagement.switchChain(chainId);
-            const account = await extractAccountFromSigner(signer);
-            setAccount(account);
-            return true;
-        }
         try {
-            await currentWallet?.switchChain(chainId);
-            handleWalletUpdate(currentWallet);
+            if (walletManagement?.switchChain) {
+                const signer = await walletManagement.switchChain(chainId);
+                const account = await extractAccountFromSigner(signer);
+                setAccount(account);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Switch chain: No provider available`);
+                }
+                await walletAgnosticSwitchChain(provider, chainId);
+            }
+            else {
+                await currentWallet?.switchChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addChain = useCallback(async (chainId) => {
-        if (walletManagement?.addChain) {
-            return walletManagement.addChain(chainId);
-        }
         try {
-            await currentWallet?.addChain(chainId);
-            handleWalletUpdate(currentWallet);
+            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 walletAgnosticAddChain(provider, chainId);
+            }
+            else {
+                await currentWallet?.addChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addToken = useCallback(async (chainId, token) => {
-        if (walletManagement?.addToken) {
-            return walletManagement.addToken(token, chainId);
+        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 walletAgnosticAddToken(provider, chainId, token);
+            }
+            else {
+                await currentWallet?.addToken(chainId, token);
+                handleWalletUpdate(currentWallet);
+            }
         }
-        await currentWallet?.addToken(chainId, token);
-        handleWalletUpdate(currentWallet);
-        return;
-    }, [walletManagement, currentWallet]);
+        catch { }
+    }, [account.signer?.provider, currentWallet, walletManagement]);
+    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();
+    }, []);
     // keep widget in sync with changing external signer object
     useEffect(() => {
         if (walletManagement) {
+            let ignore = false;
             const updateAccount = async () => {
                 const account = await extractAccountFromSigner(walletManagement?.signer);
-                setAccount(account);
+                // we should ignore the update if there is a newer one
+                if (!ignore) {
+                    setAccount(account);
+                }
             };
             updateAccount();
+            return () => {
+                ignore = true;
+            };
         }
-    }, [walletManagement, walletManagement?.signer]);
+    }, [walletManagement]);
     const value = useMemo(() => ({
         connect,
         disconnect,
@@ -115,16 +150,7 @@ export const WalletProvider = ({ children }) => {
         addChain,
         addToken,
         account,
-        provider: currentWallet?.account?.provider,
-    }), [
-        account,
-        addChain,
-        addToken,
-        connect,
-        disconnect,
-        currentWallet,
-        switchChain,
-    ]);
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return (_jsx(WalletContext.Provider, { value: value, children: children }));
 };
 export const extractAccountFromSigner = async (signer) => {

package/providers/WalletProvider/types.d.ts

@@ -1,10 +1,8 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { Provider } from '@ethersproject/providers';
 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: StaticToken): Promise<void>;
     disconnect(wallet?: Wallet): void;

package/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/stores/settings/useSplitSubvariantStore.d.ts

@@ -1,7 +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): JSX.Element;
+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>>;