fix: always expand cards if there are one or two

lifinance · Sep 23, 2022 · 5c0b3a3 · 5c0b3a3
1 parent 7165164
commit 5c0b3a3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -20,18 +20,21 @@ 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)
     : alternativeTag;
 
   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
@@ -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
@@ -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
@@ -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}
                     />
                   ))
                 )}