feat: add useRecommendedRoute config option

lifinance · Oct 27, 2022 · 8c5ed74 · 8c5ed74
1 parent 1f1858f
commit 8c5ed74
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 49 deletions.
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -9,6 +9,7 @@ import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../../providers';
 import type { CardProps } from '../Card';
 import { Card } from '../Card';
 import { StepActions } from '../StepActions';
@@ -21,6 +22,7 @@ export const SwapRouteCard: React.FC<
   SwapRouteCardProps & Omit<CardProps, 'variant'>
 > = ({ route, active, variant = 'default', expanded, ...other }) => {
   const { t } = useTranslation();
+  const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
   const [cardExpanded, setCardExpanded] = useState(
     variant === 'default' || expanded,
   );
@@ -33,6 +35,7 @@ export const SwapRouteCard: React.FC<
     e.stopPropagation();
     setCardExpanded((expanded) => !expanded);
   };
+
   return (
     <Card
       dense={variant === 'dense'}
@@ -41,17 +44,19 @@ export const SwapRouteCard: React.FC<
       indented
       {...other}
     >
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        mb={2}
-      >
-        <Label active={active ?? label !== alternativeTag}>{label}</Label>
-        {variant === 'stretched' ? (
-          <SwapRouteCardEssentials route={route} />
-        ) : null}
-      </Box>
+      {widgetVariant !== 'refuel' && !useRecommendedRoute ? (
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+        >
+          <Label active={active ?? label !== alternativeTag}>{label}</Label>
+          {variant === 'stretched' ? (
+            <SwapRouteCardEssentials route={route} />
+          ) : null}
+        </Box>
+      ) : null}
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Token
           token={{ ...route.toToken, amount: route.toAmount }}

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
@@ -1,39 +1,48 @@
 import type { BoxProps } from '@mui/material';
 import { Box, Skeleton } from '@mui/material';
+import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 import type { SwapRouteCardSkeletonProps } from './types';
 
 export const SwapRouteCardSkeleton: React.FC<
   SwapRouteCardSkeletonProps & BoxProps
 > = ({ variant, ...other }) => {
+  const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
   return (
     <Card dense={variant === 'dense'} indented {...other}>
-      <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Skeleton
-          variant="rectangular"
-          width={118}
-          height={24}
-          sx={{ borderRadius: 0.5 }}
-        />
-        {variant === 'stretched' ? (
-          <Box display="flex">
-            <Skeleton
-              variant="text"
-              width={52}
-              height={24}
-              sx={{ marginRight: 2 }}
-            />
-            <Skeleton
-              variant="text"
-              width={44}
-              height={24}
-              sx={{ marginRight: 2 }}
-            />
-            <Skeleton variant="text" width={32} height={24} />
-          </Box>
-        ) : null}
-      </Box>
-      <Box mt={2}>
+      {widgetVariant !== 'refuel' && !useRecommendedRoute ? (
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+        >
+          <Skeleton
+            variant="rectangular"
+            width={118}
+            height={24}
+            sx={{ borderRadius: 0.5 }}
+          />
+          {variant === 'stretched' ? (
+            <Box display="flex">
+              <Skeleton
+                variant="text"
+                width={52}
+                height={24}
+                sx={{ marginRight: 2 }}
+              />
+              <Skeleton
+                variant="text"
+                width={44}
+                height={24}
+                sx={{ marginRight: 2 }}
+              />
+              <Skeleton variant="text" width={32} height={24} />
+            </Box>
+          ) : null}
+        </Box>
+      ) : null}
+      <Box>
         <Box display="flex" alignItems="center">
           <Box mr={2}>
             <Skeleton variant="circular" width={32} height={32} />

diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -12,12 +12,14 @@ import {
   SwapRouteNotFoundCard,
 } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutes.style';
 import { useSetRecommendedRoute } from './useSetRecommendedRoute';
 
 export const SwapRoutes: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();
+  const { variant, useRecommendedRoute } = useWidgetConfig();
   const navigate = useNavigate();
   const { isValid, isValidating } = useFormState();
   const {
@@ -43,6 +45,7 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
   };
 
   const routeNotFound = !currentRoute && !isLoading && !isFetching;
+  const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
 
   return (
     <Card {...props}>
@@ -64,30 +67,39 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
           spacing={2}
           my={2}
           ml={2}
-          mr={routeNotFound ? 2 : 1}
+          mr={onlyRecommendedRoute || routeNotFound ? 2 : 1}
           sx={{
             borderRightWidth:
-              !routeNotFound && (isFetching || (routes && routes.length > 1))
+              !onlyRecommendedRoute &&
+              !routeNotFound &&
+              (isFetching || (routes && routes.length > 1))
                 ? 1
                 : 0,
           }}
         >
           {isLoading || isFetching ? (
             <>
-              <SwapRouteCardSkeleton minWidth="80%" variant="dense" />
-              <SwapRouteCardSkeleton minWidth="80%" variant="dense" />
+              <SwapRouteCardSkeleton
+                minWidth={!onlyRecommendedRoute ? '80%' : '100%'}
+                variant="dense"
+              />
+              {!onlyRecommendedRoute ? (
+                <SwapRouteCardSkeleton minWidth="80%" variant="dense" />
+              ) : null}
             </>
           ) : !currentRoute ? (
             <SwapRouteNotFoundCard />
           ) : (
             <>
               <SwapRouteCard
-                minWidth={routes.length > 1 ? '80%' : '100%'}
+                minWidth={
+                  !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%'
+                }
                 route={currentRoute}
                 variant="dense"
                 active
               />
-              {routes.length > 1 ? (
+              {!onlyRecommendedRoute && routes.length > 1 ? (
                 <SwapRouteCard
                   minWidth="80%"
                   route={routes[1]}
@@ -99,7 +111,7 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
           )}
         </Stack>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {!routeNotFound ? (
+          {!onlyRecommendedRoute && !routeNotFound ? (
             <Box py={1} pr={1}>
               <IconButton
                 onClick={handleCardClick}

diff --git a/packages/widget/src/hooks/useExpandableVariant.ts b/packages/widget/src/hooks/useExpandableVariant.ts
@@ -5,9 +5,9 @@ import { useWidgetConfig } from '../providers';
 const defaultExpandableWidth = 852;
 
 export const useExpandableVariant = () => {
-  const { variant } = useWidgetConfig();
-  const expandableAllowed = useMediaQuery((theme: Theme) => {
-    return theme.breakpoints.up(defaultExpandableWidth);
-  });
-  return variant === 'expandable' && expandableAllowed;
+  const { variant, useRecommendedRoute } = useWidgetConfig();
+  const expandableAllowed = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.up(defaultExpandableWidth),
+  );
+  return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
 };
diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -50,6 +50,7 @@ export interface WidgetConfig {
   disableAppearance?: boolean;
   disableTelemetry?: boolean;
   disabledUI?: DisabledUIType[];
+  useRecommendedRoute?: boolean;
 
   walletManagement?: WidgetWalletManagement;
   sdkConfig?: ConfigUpdate;