refactor: prepare for showing current wallet chain by default

lifinance · Aug 3, 2022 · 076a967 · 076a967
1 parent 7466fa3
commit 076a967
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 46 deletions.
diff --git a/packages/wallet-management/src/LiFiWalletManagement.ts b/packages/wallet-management/src/LiFiWalletManagement.ts
@@ -10,7 +10,7 @@ import {
 } from './walletPersistance';
 import { Wallet } from './wallets';
 
-export const useLifiWalletManagement = () => {
+export const useLiFiWalletManagement = () => {
   const priorityConnector = usePriorityConnector();
   const priorityProvider = usePriorityProvider();
   const [signer, setSigner] = useState<Signer>();

diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx
@@ -26,19 +26,20 @@ export const AppProvider: React.FC<PropsWithChildren<AppProps>> = ({
   children,
   config,
 }) => {
-  useTelemetry(config?.disableTelemetry);
   return (
-    <WidgetProvider config={config}>
-      <ThemeProvider>
-        <QueryProvider client={queryClient}>
-          <WalletProvider>
-            <SwapFormProvider>
-              <AppRouter>{children}</AppRouter>
-            </SwapFormProvider>
-          </WalletProvider>
-        </QueryProvider>
-      </ThemeProvider>
-    </WidgetProvider>
+    <QueryProvider client={queryClient}>
+      <TelemetryProvider disabled={config?.disableTelemetry}>
+        <WalletProvider walletManagement={config?.walletManagement}>
+          <WidgetProvider config={config}>
+            <ThemeProvider>
+              <SwapFormProvider>
+                <AppRouter>{children}</AppRouter>
+              </SwapFormProvider>
+            </ThemeProvider>
+          </WidgetProvider>
+        </WalletProvider>
+      </TelemetryProvider>
+    </QueryProvider>
   );
 };
 
@@ -47,3 +48,11 @@ export const AppRouter: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const Router = inRouterContext ? Fragment : MemoryRouter;
   return <Router>{children}</Router>;
 };
+
+export const TelemetryProvider: React.FC<{
+  children: React.ReactElement<any, any> | null;
+  disabled?: boolean;
+}> = ({ children, disabled }) => {
+  useTelemetry(disabled);
+  return children;
+};
diff --git a/packages/widget/src/providers/WalletProvider/WalletProvider.tsx b/packages/widget/src/providers/WalletProvider/WalletProvider.tsx
@@ -3,7 +3,7 @@ import {
   addChain as walletAddChain,
   switchChain as walletSwitchChain,
   switchChainAndAddToken,
-  useLifiWalletManagement,
+  useLiFiWalletManagement,
   Wallet,
 } from '@lifi/wallet-management';
 import { Signer } from 'ethers';
@@ -17,7 +17,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { useWidgetConfig } from '../WidgetProvider';
+import { WidgetWalletManagement } from '../../types';
 import type { WalletAccount, WalletContextProps } from './types';
 
 const stub = (): never => {
@@ -37,85 +37,81 @@ const WalletContext = createContext<WalletContextProps>(initialContext);
 
 export const useWallet = (): WalletContextProps => useContext(WalletContext);
 
-export const WalletProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const config = useWidgetConfig();
+export const WalletProvider: FC<
+  PropsWithChildren<{ walletManagement?: WidgetWalletManagement }>
+> = ({ children, walletManagement }) => {
   const {
     connect: walletManagementConnect,
     disconnect: walletManagementDisconnect,
     signer,
-  } = useLifiWalletManagement();
+  } = useLiFiWalletManagement();
   const [account, setAccount] = useState<WalletAccount>({});
 
   const connect = useCallback(
     async (wallet?: Wallet) => {
-      if (config.walletManagement) {
-        const signer = await config.walletManagement.connect();
+      if (walletManagement) {
+        const signer = await walletManagement.connect();
         const account = await extractAccountFromSigner(signer);
         setAccount(account);
         return;
       }
       await walletManagementConnect(wallet);
     },
-    [config.walletManagement, walletManagementConnect],
+    [walletManagement, walletManagementConnect],
   );
 
   const disconnect = useCallback(async () => {
-    if (config.walletManagement) {
-      await config.walletManagement.disconnect();
+    if (walletManagement) {
+      await walletManagement.disconnect();
       setAccount({});
       return;
     }
     await walletManagementDisconnect();
-  }, [config.walletManagement, walletManagementDisconnect]);
+  }, [walletManagement, walletManagementDisconnect]);
 
   // only for injected wallets
   const switchChain = useCallback(
     async (chainId: number) => {
-      if (config.walletManagement?.switchChain) {
-        const signer = await config.walletManagement.switchChain(chainId);
+      if (walletManagement?.switchChain) {
+        const signer = await walletManagement.switchChain(chainId);
         const account = await extractAccountFromSigner(signer);
         setAccount(account);
       }
       return walletSwitchChain(chainId);
     },
-    [config.walletManagement],
+    [walletManagement],
   );
 
   const addChain = useCallback(
     async (chainId: number) => {
-      if (config.walletManagement?.addChain) {
-        return config.walletManagement.addChain(chainId);
+      if (walletManagement?.addChain) {
+        return walletManagement.addChain(chainId);
       }
       return walletAddChain(chainId);
     },
-    [config.walletManagement],
+    [walletManagement],
   );
 
   const addToken = useCallback(
     async (chainId: number, token: Token) => {
-      if (config.walletManagement?.addToken) {
-        return config.walletManagement.addToken(token, chainId);
+      if (walletManagement?.addToken) {
+        return walletManagement.addToken(token, chainId);
       }
       return switchChainAndAddToken(chainId, token);
     },
-    [config.walletManagement],
+    [walletManagement],
   );
 
   // keep account information up to date
   useEffect(() => {
     const updateAccount = async () => {
-      if (config.walletManagement) {
-        const account = await extractAccountFromSigner(
-          config.walletManagement.signer,
-        );
-        setAccount(account);
-      } else {
-        const account = await extractAccountFromSigner(signer);
-        setAccount(account);
-      }
+      const account = await extractAccountFromSigner(
+        walletManagement?.signer ?? signer,
+      );
+      setAccount(account);
     };
     updateAccount();
-  }, [signer, config.walletManagement]);
+  }, [signer, walletManagement]);
 
   const value = useMemo(
     () => ({

diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx
@@ -1,6 +1,7 @@
 import { ChainId, ChainKey, getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useEffect, useMemo } from 'react';
 import { updateLiFiConfig } from '../../config/lifi';
+import { useWallet } from '../WalletProvider';
 import type { WidgetContextProps, WidgetProviderProps } from './types';
 
 const stub = (): never => {
@@ -29,6 +30,7 @@ export const WidgetProvider: React.FC<
     ...config
   } = {},
 }) => {
+  const { account } = useWallet();
   const value = useMemo((): WidgetContextProps => {
     try {
       return {
@@ -38,7 +40,7 @@ export const WidgetProvider: React.FC<
             ? fromChain
             : typeof fromChain === 'string'
             ? getChainByKey(fromChain.toLowerCase() as ChainKey).id
-            : ChainId.ETH,
+            : account.chainId ?? ChainId.ETH,
         toChain:
           typeof toChain === 'number'
             ? toChain
@@ -47,12 +49,12 @@ export const WidgetProvider: React.FC<
             : ChainId.ETH,
         fromToken: fromToken?.toLowerCase(),
         toToken: toToken?.toLowerCase(),
-      };
+      } as WidgetContextProps;
     } catch (e) {
       console.warn(e);
       return config;
     }
-  }, [config, fromChain, fromToken, toChain, toToken]);
+  }, [account.chainId, config, fromChain, fromToken, toChain, toToken]);
 
   useEffect(() => {
     updateLiFiConfig({