fix: insurance card should expand when enabled

lifinance · Apr 27, 2023 · d6f47e7 · d6f47e7
1 parent b6d6695
commit d6f47e7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/widget/src/components/Insurance/InsuranceCard.tsx b/packages/widget/src/components/Insurance/InsuranceCard.tsx
@@ -2,7 +2,7 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { Box, Collapse, Link, Typography } from '@mui/material';
-import type { MouseEventHandler } from 'react';
+import type { ChangeEvent, MouseEventHandler } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
@@ -19,6 +19,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const [enabled, setEnabled] = useState(false);
   const [cardExpanded, setCardExpanded] = useState(
     status === RouteExecutionStatus.Idle,
   );
@@ -28,6 +29,11 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
     setCardExpanded((expanded) => !expanded);
   };
 
+  const handleSwitch = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setEnabled(checked);
+    onChange?.(checked);
+  };
+
   return (
     <Card selectionColor="secondary" indented {...props}>
       <Box display="flex" alignItems="center" justifyContent="space-between">
@@ -40,7 +46,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
           </CardLabelTypography>
         </CardLabel>
         {status === RouteExecutionStatus.Idle ? (
-          <Switch onChange={onChange} />
+          <Switch onChange={handleSwitch} value={enabled} />
         ) : (
           <Box my={-0.5}>
             <CardIconButton onClick={handleExpand} size="small">
@@ -70,7 +76,12 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                 ? t('swap.insurance.insure')
                 : t('swap.insurance.insured')}
             </Typography>
-            {status !== RouteExecutionStatus.Idle ? (
+            <Collapse
+              timeout={225}
+              in={enabled || status !== RouteExecutionStatus.Idle}
+              mountOnEnter
+              unmountOnExit
+            >
               <Box
                 sx={{
                   listStyleType: 'disc',
@@ -84,7 +95,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                   {t('swap.insurance.slippageError')}
                 </Typography>
               </Box>
-            ) : null}
+            </Collapse>
             <Link
               href={
                 status === RouteExecutionStatus.Idle

diff --git a/packages/widget/src/components/Insurance/InsuranceCollapsed.tsx b/packages/widget/src/components/Insurance/InsuranceCollapsed.tsx
@@ -32,10 +32,7 @@ export const InsuranceCollapsed: React.FC<InsuranceProps> = ({
     },
   });
 
-  const toggleInsurance = (
-    _: React.ChangeEvent<HTMLInputElement>,
-    checked: boolean,
-  ) => {
+  const toggleInsurance = (checked: boolean) => {
     if (insuredRoute) {
       if (checked) {
         setExecutableRoute(insuredRoute, insurableRouteId);

diff --git a/packages/widget/src/components/Insurance/types.ts b/packages/widget/src/components/Insurance/types.ts
@@ -13,5 +13,5 @@ export interface InsuranceCardProps {
   feeAmountUsd?: string;
   status?: RouteExecutionStatus;
   insuranceCoverageId?: string;
-  onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
 }