feat: set wallet chain as default if config option is not provided

lifinance · Aug 11, 2022 · d04285d · d04285d
1 parent 531aae3
commit d04285d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/packages/widget/src/pages/SelectTokenPage/ChainSelect.tsx b/packages/widget/src/pages/SelectTokenPage/ChainSelect.tsx
@@ -21,15 +21,18 @@ import { useWidgetConfig } from '../../providers/WidgetProvider';
 
 export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
   const { t } = useTranslation();
-  const { setValue } = useFormContext();
+  const { setValue, register } = useFormContext();
   const { fromChain, toChain } = useWidgetConfig();
   const { chains, isLoading } = useChains();
+  const chainKey = SwapFormKeyHelper.getChainKey(formType);
   const [chainId] = useWatch({
-    name: [SwapFormKeyHelper.getChainKey(formType)],
+    name: [chainKey],
   });
 
+  const { onChange, onBlur, name, ref } = register(chainKey);
+
   const handleChain = (event: SelectChangeEvent<unknown>) => {
-    setValue(SwapFormKeyHelper.getChainKey(formType), event.target.value);
+    onChange(event);
     setValue(SwapFormKeyHelper.getTokenKey(formType), '');
     setValue(SwapFormKeyHelper.getAmountKey(formType), '');
     setValue(SwapFormKey.TokenSearchFilter, '');
@@ -40,11 +43,14 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
       <CardTitle>{t(`swap.selectChain`)}</CardTitle>
       <FormControl fullWidth>
         <Select
-          labelId="label"
+          ref={ref}
+          labelId={chainKey}
+          name={name}
           MenuProps={{ elevation: 2 }}
           defaultValue={formType === 'from' ? fromChain : toChain}
           value={chainId}
           onChange={handleChain}
+          onBlur={onBlur}
           IconComponent={KeyboardArrowDownIcon}
         >
           {chains?.map((chain) => (

diff --git a/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx b/packages/widget/src/providers/SwapFormProvider/SwapFormProvider.tsx
@@ -1,4 +1,7 @@
+import { ChainId } from '@lifi/sdk';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { useWallet } from '../WalletProvider';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey, SwapFormValues } from './types';
 
@@ -10,22 +13,44 @@ export const formDefaultValues = {
 export const SwapFormProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,
 }) => {
+  const { account } = useWallet();
+
   const { fromChain, fromToken, fromAmount, toChain, toToken } =
     useWidgetConfig();
 
   const methods = useForm<SwapFormValues>({
     defaultValues: {
       ...formDefaultValues,
-      fromChain,
+      fromChain: fromChain ?? ChainId.ETH,
       fromToken,
       fromAmount:
         (typeof fromAmount === 'number'
           ? fromAmount?.toPrecision()
           : fromAmount) || formDefaultValues.fromAmount,
-      toChain,
+      toChain: toChain ?? ChainId.ETH,
       toToken,
     },
   });
 
+  // Set wallet chain as default if no fromChain is provided by config and if it wasn't changed during widget usage
+  useEffect(() => {
+    const { isDirty, isTouched } = methods.getFieldState(
+      SwapFormKey.FromChain,
+      methods.formState,
+    );
+    if (
+      account.isActive &&
+      account.chainId &&
+      !fromChain &&
+      !isDirty &&
+      !isTouched
+    ) {
+      methods.setValue(SwapFormKey.FromChain, account.chainId, {
+        shouldDirty: false,
+        shouldTouch: false,
+      });
+    }
+  }, [account.chainId, account.isActive, fromChain, methods]);
+
   return <FormProvider {...methods}>{children}</FormProvider>;
 };
diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx
@@ -1,7 +1,6 @@
-import { ChainId, ChainKey, getChainByKey } from '@lifi/sdk';
+import { 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 => {
@@ -31,7 +30,6 @@ export const WidgetProvider: React.FC<
     ...config
   } = {},
 }) => {
-  const { account } = useWallet();
   const value = useMemo((): WidgetContextProps => {
     try {
       const searchParams = Object.fromEntries(
@@ -52,7 +50,7 @@ export const WidgetProvider: React.FC<
                 !isNaN(parseInt(searchParams.fromChain, 10))) ||
               typeof fromChain === 'number'
             ? parseInt(searchParams.fromChain, 10) || fromChain
-            : account.chainId ?? ChainId.ETH,
+            : undefined,
         toChain:
           (searchParams.toChain && isNaN(parseInt(searchParams.toChain, 10))) ||
           typeof toChain === 'string'
@@ -65,7 +63,7 @@ export const WidgetProvider: React.FC<
                 !isNaN(parseInt(searchParams.toChain, 10))) ||
               typeof toChain === 'number'
             ? parseInt(searchParams.toChain, 10) || toChain
-            : ChainId.ETH,
+            : undefined,
         fromToken:
           searchParams.fromToken?.toLowerCase() || fromToken?.toLowerCase(),
         toToken: searchParams.toToken?.toLowerCase() || toToken?.toLowerCase(),
@@ -79,15 +77,7 @@ export const WidgetProvider: React.FC<
       console.warn(e);
       return config;
     }
-  }, [
-    account.chainId,
-    config,
-    fromAmount,
-    fromChain,
-    fromToken,
-    toChain,
-    toToken,
-  ]);
+  }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
 
   useEffect(() => {
     updateLiFiConfig({