feat: add tooltip and refetch

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -75,14 +75,11 @@ export const NavigationHeader: React.FC = () => {
         <Route
           path={routes.swapRoutes}
           element={
-            <IconButton
+            <SwapRoutesUpdateProgress
               size="medium"
               edge="end"
               sx={{ marginRight: -1 }}
-              disabled
-            >
-              <SwapRoutesUpdateProgress />
-            </IconButton>
+            />
           }
         />
         <Route

packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx

@@ -1,21 +1,29 @@
-import { Box, BoxProps, CircularProgress } from '@mui/material';
+import {
+  Box,
+  CircularProgress,
+  IconButton,
+  IconButtonProps,
+  Tooltip,
+} from '@mui/material';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const calculateTime = (updatedAt: number, timeToUpdate: number) => {
   if (updatedAt === 0) {
     return 0;
   }
   const progress = ((Date.now() - updatedAt) / timeToUpdate) * 100;
-  return progress >= 100 ? 100 : progress;
+  return Math.min(100, progress);
 };
 
 export const ProgressToNextUpdate: React.FC<
   {
     updatedAt: number;
     timeToUpdate: number;
     isLoading?: boolean;
-  } & BoxProps
-> = ({ updatedAt, timeToUpdate, isLoading, sx }) => {
+  } & IconButtonProps
+> = ({ updatedAt, timeToUpdate, isLoading, onClick, sx }) => {
+  const { t } = useTranslation();
   const [value, setValue] = useState(() =>
     calculateTime(updatedAt, timeToUpdate),
   );
@@ -38,40 +46,50 @@ export const ProgressToNextUpdate: React.FC<
   }, [isLoading]);
 
   return (
-    <Box
-      sx={{
-        display: 'grid',
-        position: 'relative',
-        placeItems: 'center',
-        width: 24,
-        height: 24,
-        ...sx,
-      }}
-    >
-      <CircularProgress
-        variant="determinate"
-        size={24}
-        value={100}
-        sx={(theme) => ({
-          position: 'absolute',
-          color:
-            theme.palette.mode === 'light'
-              ? theme.palette.grey[300]
-              : theme.palette.grey[800],
+    <IconButton onClick={onClick} sx={sx} disabled={isLoading}>
+      <Tooltip
+        title={t('tooltip.progressToNextUpdate', {
+          value: Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000),
         })}
-      />
-      <CircularProgress
-        variant={isLoading ? 'indeterminate' : 'determinate'}
-        size={24}
-        value={value}
-        sx={(theme) => ({
-          opacity: value === 100 && !isLoading ? 0.5 : 1,
-          color:
-            theme.palette.mode === 'light'
-              ? theme.palette.primary.main
-              : theme.palette.primary.light,
-        })}
-      />
-    </Box>
+        placement="top"
+        enterDelay={250}
+        arrow
+      >
+        <Box
+          sx={{
+            display: 'grid',
+            position: 'relative',
+            placeItems: 'center',
+            width: 24,
+            height: 24,
+          }}
+        >
+          <CircularProgress
+            variant="determinate"
+            size={24}
+            value={100}
+            sx={(theme) => ({
+              position: 'absolute',
+              color:
+                theme.palette.mode === 'light'
+                  ? theme.palette.grey[300]
+                  : theme.palette.grey[800],
+            })}
+          />
+          <CircularProgress
+            variant={isLoading ? 'indeterminate' : 'determinate'}
+            size={24}
+            value={value}
+            sx={(theme) => ({
+              opacity: value === 100 && !isLoading ? 0.5 : 1,
+              color:
+                theme.palette.mode === 'light'
+                  ? theme.palette.primary.main
+                  : theme.palette.primary.light,
+            })}
+          />
+        </Box>
+      </Tooltip>
+    </IconButton>
   );
 };

packages/widget/src/components/SwapRoutes/SwapRoutesUpdateProgress.tsx

@@ -1,21 +1,27 @@
 /* eslint-disable react/no-array-index-key */
-import { Box, BoxProps } from '@mui/material';
+import { Box, IconButtonProps } from '@mui/material';
 import { useSwapRoutes } from '../../hooks';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 
-export const SwapRoutesUpdateProgress: React.FC<BoxProps> = (props) => {
-  const { isLoading, isFetching, dataUpdatedAt, refetchTime } = useSwapRoutes();
+export const SwapRoutesUpdateProgress: React.FC<IconButtonProps> = ({
+  sx,
+  ...other
+}) => {
+  const { isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } =
+    useSwapRoutes();
 
   if (isLoading) {
-    return <Box width={24} height={24} {...props} />;
+    return <Box width={24} height={24} sx={sx} />;
   }
 
   return (
     <ProgressToNextUpdate
       updatedAt={dataUpdatedAt}
       timeToUpdate={refetchTime}
       isLoading={isFetching}
-      {...props}
+      onClick={() => refetch()}
+      sx={sx}
+      {...other}
     />
   );
 };

packages/widget/src/hooks/useSwapRoutes.ts

@@ -43,7 +43,7 @@ export const useSwapRoutes = () => {
     !isNaN(fromTokenAmount) &&
     !isNaN(slippage);
 
-  const { data, isLoading, isFetching, dataUpdatedAt } = useQuery(
+  const { data, isLoading, isFetching, dataUpdatedAt, refetch } = useQuery(
     [
       'routes',
       account.address,
@@ -125,5 +125,6 @@ export const useSwapRoutes = () => {
     isFetching,
     dataUpdatedAt,
     refetchTime,
+    refetch,
   };
 };

packages/widget/src/i18n/en/translation.json

@@ -25,6 +25,7 @@
     "auto": "Auto",
     "ok": "Ok",
     "hide": "Hide",
+    "max": "max",
     "lifiSwap": "LI.FI Swap"
   },
   "swap": {
@@ -130,5 +131,8 @@
   },
   "wallet": {
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
+  },
+  "tooltip": {
+    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
   }
 }