fix: add keys and loading states

lifinance · Apr 19, 2022 · c576101 · c576101
1 parent 247fd9e
commit c576101
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 38 deletions.
diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import { formatTokenAmount } from '@lifinance/widget/utils/format';
 import { BoxProps, Skeleton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -11,13 +12,13 @@ import { Stack } from './SwapRoutes.style';
 export const SwapRoutes: React.FC<BoxProps> = ({ mb }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { routes: swapRoutes, isFetching, isFetched } = useSwapRoutes();
+  const { routes: swapRoutes, isLoading } = useSwapRoutes();
 
   const handleCardClick = () => {
     navigate(routes.swapRoutes);
   };
 
-  if (!swapRoutes?.length && !isFetched && !isFetching) {
+  if (!swapRoutes?.length && !isLoading) {
     return null;
   }
 
@@ -27,9 +28,10 @@ export const SwapRoutes: React.FC<BoxProps> = ({ mb }) => {
         {t('swap.routes')}
       </Typography>
       <Stack direction="row" spacing={2}>
-        {!swapRoutes?.length && isFetching
-          ? Array.from({ length: 2 }).map(() => (
+        {isLoading
+          ? Array.from({ length: 2 }).map((_, index) => (
               <Skeleton
+                key={index}
                 variant="rectangular"
                 width="75%"
                 height={195}
@@ -40,6 +42,7 @@ export const SwapRoutes: React.FC<BoxProps> = ({ mb }) => {
               ?.slice(0, 2)
               .map((route, index) => (
                 <SwapRouteCard
+                  key={route.id}
                   onClick={index !== 0 ? handleCardClick : undefined}
                   minWidth="75%"
                   amount={formatTokenAmount(

diff --git a/packages/widget/src/hooks/useSwapRoutes.ts b/packages/widget/src/hooks/useSwapRoutes.ts
@@ -1,15 +1,12 @@
-import { useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
 import { useQuery } from 'react-query';
 import { useDebouncedWatch, useToken } from '.';
 import { LiFi } from '../lifi';
-import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
+import { SwapFormKey } from '../providers/SwapFormProvider';
 import { useWallet } from '../providers/WalletProvider';
-import { formatTokenAmount } from '../utils/format';
 
 export const useSwapRoutes = () => {
   const { account } = useWallet();
-  const { setValue } = useFormContext();
   const [
     fromChainId,
     fromTokenAddress,
@@ -31,7 +28,17 @@ export const useSwapRoutes = () => {
   });
   const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
   const { token } = useToken(fromChainId, fromTokenAddress);
-  const { data, isFetching, isFetched } = useQuery(
+  const isEnabled =
+    Boolean(account.address) &&
+    !isNaN(fromChainId) &&
+    !isNaN(toChainId) &&
+    Boolean(fromTokenAddress) &&
+    Boolean(toTokenAddress) &&
+    Boolean(fromTokenAmount) &&
+    !isNaN(fromTokenAmount) &&
+    !isNaN(slippage);
+
+  const { data, isFetched, isLoading, status, fetchStatus } = useQuery(
     [
       'routes',
       account.address,
@@ -82,38 +89,20 @@ export const useSwapRoutes = () => {
       });
     },
     {
-      enabled:
-        Boolean(account.address) &&
-        !isNaN(fromChainId) &&
-        !isNaN(toChainId) &&
-        Boolean(fromTokenAddress) &&
-        Boolean(toTokenAddress) &&
-        Boolean(fromTokenAmount) &&
-        !isNaN(fromTokenAmount) &&
-        !isNaN(slippage),
+      enabled: isEnabled,
       refetchIntervalInBackground: true,
       refetchInterval: 60_000,
-      staleTime: 5_000,
+      staleTime: 30_000,
       // TODO: probably should be removed
-      cacheTime: 5_000,
+      cacheTime: 30_000,
     },
   );
 
-  useEffect(() => {
-    const route = data?.routes[0];
-    if (route) {
-      setValue(
-        SwapFormKeyHelper.getAmountKey('to'),
-        formatTokenAmount(route.toAmount, route.toToken.decimals),
-      );
-    } else {
-      setValue(SwapFormKeyHelper.getAmountKey('to'), '');
-    }
-  }, [data?.routes, setValue]);
-
   return {
     routes: data?.routes,
-    isFetching,
+    isLoading: isEnabled && isLoading,
     isFetched,
+    status,
+    fetchStatus,
   };
 };
diff --git a/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx b/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import { formatTokenAmount } from '@lifinance/widget/utils/format';
 import { BoxProps, Skeleton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -7,17 +8,19 @@ import { Stack } from './SwapRoutesPage.style';
 
 export const SwapRoutesPage: React.FC<BoxProps> = ({ mb }) => {
   const { t } = useTranslation();
-  const { routes, isFetching, isFetched } = useSwapRoutes();
+  const { routes, isLoading } = useSwapRoutes();
 
-  if (!routes?.length && !isFetched && !isFetching) {
+  if (!routes?.length && !isLoading) {
+    // TODO: make no routes message
     return null;
   }
 
   return (
     <Stack direction="column" spacing={2}>
-      {!routes?.length && isFetching
-        ? Array.from({ length: 3 }).map(() => (
+      {isLoading
+        ? Array.from({ length: 3 }).map((_, index) => (
             <Skeleton
+              key={index}
               variant="rectangular"
               width="100%"
               height={195}
@@ -26,6 +29,7 @@ export const SwapRoutesPage: React.FC<BoxProps> = ({ mb }) => {
           ))
         : routes?.map((route, index) => (
             <SwapRouteCard
+              key={route.id}
               amount={formatTokenAmount(route.toAmount, route.toToken.decimals)}
               token={route.toToken.name}
               gas={t(`swap.currency`, { value: route.gasCostUSD })}