From 5c0b3a3bfd355572a8c26dbb698e2a82605185da Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Fri, 23 Sep 2022 17:04:40 +0100
Subject: [PATCH] fix: always expand cards if there are one or two

---
 .../SwapRouteCard/SwapRouteCard.tsx           | 19 +++++++++++--------
 .../SwapRouteCard/SwapRouteCardSkeleton.tsx   |  6 +++---
 .../src/components/SwapRouteCard/types.ts     |  5 +++--
 .../SwapRoutes/SwapRoutesExpanded.tsx         |  5 +++--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
index 2e52fc0b0..bb9c4e628 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -20,10 +20,13 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
   route,
   active,
   variant = 'default',
+  expanded,
   ...other
 }) => {
   const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(variant === 'default');
+  const [cardExpanded, setCardExpanded] = useState(
+    variant === 'default' || expanded,
+  );
   const alternativeTag = t(`swap.tags.ALTERNATIVE`);
   const label = route.tags?.length
     ? t(`swap.tags.${route.tags[0]}` as any)
@@ -31,7 +34,7 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();
-    setExpanded((expanded) => !expanded);
+    setCardExpanded((expanded) => !expanded);
   };
   return (
     <Card
@@ -48,27 +51,27 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
         mb={2}
       >
         <Label active={active ?? label !== alternativeTag}>{label}</Label>
-        {variant === 'extended' ? (
+        {variant === 'stretched' ? (
           <SwapRouteCardEssentials route={route} />
         ) : null}
       </Box>
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Token
           token={{ ...route.toToken, amount: route.toAmount }}
-          step={variant === 'extended' ? route.steps[0] : undefined}
+          step={variant === 'stretched' ? route.steps[0] : undefined}
         />
-        {variant === 'extended' ? (
+        {variant === 'stretched' && !expanded ? (
           <IconButton onClick={handleExpand} size="small">
-            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
           </IconButton>
         ) : null}
       </Box>
-      <Collapse mountOnEnter unmountOnExit in={expanded}>
+      <Collapse mountOnEnter unmountOnExit in={cardExpanded}>
         {route.steps.map((step) => (
           <StepActions key={step.id} step={step} mt={2} />
         ))}
       </Collapse>
-      {variant !== 'extended' ? (
+      {variant !== 'stretched' ? (
         <SwapRouteCardEssentials route={route} dense />
       ) : null}
     </Card>
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
index 0aed60917..8d893c803 100644
--- a/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
+++ b/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
@@ -15,7 +15,7 @@ export const SwapRouteCardSkeleton: React.FC<
           height={24}
           sx={{ borderRadius: 0.5 }}
         />
-        {variant === 'extended' ? (
+        {variant === 'stretched' ? (
           <Box display="flex">
             <Skeleton
               variant="text"
@@ -47,7 +47,7 @@ export const SwapRouteCardSkeleton: React.FC<
             height={16}
             sx={{ borderRadius: 0.5 }}
           />
-          {variant === 'extended' ? (
+          {variant === 'stretched' ? (
             <Skeleton
               variant="text"
               width={72}
@@ -57,7 +57,7 @@ export const SwapRouteCardSkeleton: React.FC<
           ) : null}
         </Box>
       </Box>
-      {variant !== 'extended' ? (
+      {variant !== 'stretched' ? (
         <Box mt={2} display="flex" justifyContent="space-between">
           <Skeleton variant="text" width={48} height={24} />
           <Skeleton variant="text" width={48} height={24} />
diff --git a/packages/widget/src/components/SwapRouteCard/types.ts b/packages/widget/src/components/SwapRouteCard/types.ts
index 059867ed9..5b51347e1 100644
--- a/packages/widget/src/components/SwapRouteCard/types.ts
+++ b/packages/widget/src/components/SwapRouteCard/types.ts
@@ -2,8 +2,9 @@ import type { Route } from '@lifi/sdk';
 
 export interface SwapRouteCardProps {
   route: Route;
-  variant?: 'default' | 'extended' | 'dense';
+  variant?: 'default' | 'stretched' | 'dense';
   active?: boolean;
+  expanded?: boolean;
 }
 
 export interface SwapRouteCardEssentialsProps {
@@ -12,5 +13,5 @@ export interface SwapRouteCardEssentialsProps {
 }
 
 export interface SwapRouteCardSkeletonProps {
-  variant?: 'default' | 'extended' | 'dense';
+  variant?: 'default' | 'stretched' | 'dense';
 }
diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx
index fe1d718d7..6db455f24 100644
--- a/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx
+++ b/packages/widget/src/components/SwapRoutes/SwapRoutesExpanded.tsx
@@ -89,7 +89,7 @@ export const SwapRoutesExpanded = () => {
                   <SwapRouteNotFoundCard />
                 ) : isLoading || isFetching ? (
                   Array.from({ length: 3 }).map((_, index) => (
-                    <SwapRouteCardSkeleton key={index} variant="extended" />
+                    <SwapRouteCardSkeleton key={index} variant="stretched" />
                   ))
                 ) : (
                   routes?.map((route: Route, index: number) => (
@@ -98,7 +98,8 @@ export const SwapRoutesExpanded = () => {
                       route={route}
                       onClick={() => handleRouteClick(route)}
                       active={index === 0}
-                      variant="extended"
+                      variant="stretched"
+                      expanded={routes?.length <= 2}
                     />
                   ))
                 )}