feat: get and display routes

packages/widget/src/components/SwapRoute/SwapRoute.style.ts

@@ -0,0 +1,20 @@
+import { WaitIcon } from '@lifinance/widget/icons/waitIcon';
+import { keyframes, styled } from '@mui/material/styles';
+
+const rotationAnimation = keyframes`
+    0% {
+        transform: rotate(0);
+    }
+    33% {
+        transform: rotate(360deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+
+export const AnimatedWaitIcon = styled(WaitIcon)(() => ({
+  margin: 12,
+  transform: 'rotate(0)',
+  animation: `${rotationAnimation} 3s infinite cubic-bezier(0.645, 0.045, 0.355, 1.000)`,
+}));

packages/widget/src/components/SwapRoute/SwapRoute.tsx

@@ -1,20 +1,71 @@
+import { getChainById, Route, StepType } from '@lifinance/sdk';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useSwapRoutes } from '../../hooks/useSwapRoutes';
 import { SwapStepper } from '../SwapStepper';
+import { AnimatedWaitIcon } from './SwapRoute.style';
+
+const parsedStepTypes: {
+  [K in StepType]: string;
+} = {
+  lifi: 'Li.Fi Bridge via',
+  cross: 'Bridge',
+  swap: 'Dex',
+};
 
 export const SwapRoute: React.FC = () => {
   const { t } = useTranslation();
   const { routes, isFetching, isFetched } = useSwapRoutes();
 
-  return (
+  const renderRoutesLoading = () => {
+    return (
+      <Box
+        sx={{
+          py: 8,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <AnimatedWaitIcon />
+        <Typography variant="subtitle1" color="text.primary">
+          {' '}
+          Requesting Routes ...
+        </Typography>
+      </Box>
+    );
+  };
+
+  const renderNoRoutes = () => {
+    return (
+      <Box sx={{ py: 8, width: '100%' }}>
+        <Typography
+          variant="subtitle1"
+          color="text.primary"
+          sx={{ textAlign: 'center' }}
+        >
+          No Routes
+        </Typography>
+      </Box>
+    );
+  };
+
+  const renderRouteDisplay = (route: Route) => (
     <Box py={2}>
       <SwapStepper
         steps={[
-          { label: 'CAKE', sublabel: 'on BSC' },
-          { label: 'Anyswap', sublabel: 'bridge' },
-          { label: 'Solana', sublabel: 'bridge' },
-          { label: 'AAVE', sublabel: 'on Polygon' },
+          {
+            label: route.fromToken.symbol,
+            sublabel: getChainById(route.fromChainId).name,
+          },
+          ...route.steps.map((step) => {
+            return { label: parsedStepTypes[step.type], sublabel: step.tool };
+          }),
+          {
+            label: route.toToken.symbol,
+            sublabel: getChainById(route.toChainId).name,
+          },
         ]}
       />
       <Box
@@ -38,7 +89,7 @@ export const SwapRoute: React.FC = () => {
           color="text.primary"
           sx={{ alignSelf: 'end' }}
         >
-          {t(`swap.price`, { price: 20 })}
+          {t(`swap.price`, { price: route.gasCostUSD })}
         </Typography>
       </Box>
       <Box
@@ -61,9 +112,27 @@ export const SwapRoute: React.FC = () => {
           color="text.primary"
           sx={{ alignSelf: 'end' }}
         >
-          20 min
+          {(
+            route.steps
+              .map((step) => step.estimate.executionDuration)
+              .reduce((cumulated, x) => cumulated + x) / 60
+          ).toFixed(1)}{' '}
+          min
         </Typography>
       </Box>
     </Box>
   );
+
+  if (routes && routes.length > 0) {
+    return renderRouteDisplay(routes[0]);
+  }
+  if (routes && routes.length > 0 && isFetched) {
+    return renderNoRoutes();
+  }
+  if (isFetching) {
+    return renderRoutesLoading();
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <></>;
 };

packages/widget/src/components/SwapStepper/SwapStepper.tsx

@@ -26,7 +26,10 @@ export function SwapStepper({ steps }: SwapStepperProps) {
         connector={<SwapStepConnector />}
       >
         {steps.map((step) => (
-          <SwapStep key={step.label} stepperLength={steps.length}>
+          <SwapStep
+            key={step.label + Math.random()}
+            stepperLength={steps.length}
+          >
             <SwapStepLabel
               StepIconComponent={StepIcon}
               optional={

packages/widget/src/hooks/useSwapRoutes.ts

@@ -93,6 +93,7 @@ export const useSwapRoutes = () => {
       refetchIntervalInBackground: true,
       refetchInterval: 60_000,
       staleTime: 60_000,
+      cacheTime: 60_000,
     },
   );
 

packages/widget/src/icons/waitIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export function WaitIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="#000"
+        strokeWidth="1.6"
+        d="M16.31 10.535l-3.797.578-1.398-3.577a3.2 3.2 0 01.21-2.765l1.638-2.838 7.275 4.2-1.639 2.838a3.2 3.2 0 01-2.29 1.564zm-4.822 2.352l1.398 3.578a3.2 3.2 0 01-.21 2.764l-1.638 2.838-7.275-4.2 1.639-2.838a3.2 3.2 0 012.29-1.563l3.796-.579z"
+      />
+      <path
+        fill="#000"
+        d="M18.465 8.804l-6.929-4-.75 1.299 1.965 4.598 4.964-.598.75-1.3zM8.75 17.63l-3.165.481 4.33 2.5-1.164-2.982z"
+      />
+    </svg>
+  );
+}