feat: update insurance card and text

lifinance · Apr 21, 2023 · c623d11 · c623d11
1 parent 6f66128
commit c623d11
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 47 deletions.
diff --git a/packages/widget/src/components/Insurance/InsuranceCard.tsx b/packages/widget/src/components/Insurance/InsuranceCard.tsx
@@ -1,9 +1,13 @@
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Link, Typography } from '@mui/material';
+import { Box, Collapse, Link, Typography } from '@mui/material';
+import type { MouseEventHandler } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
-import { Card, CardLabel, CardLabelTypography } from '../Card';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import { Switch } from '../Switch';
 import type { InsuranceCardProps } from './types';
 
@@ -15,63 +19,96 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const [cardExpanded, setCardExpanded] = useState(
+    status === RouteExecutionStatus.Idle,
+  );
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setCardExpanded((expanded) => !expanded);
+  };
 
   return (
     <Card selectionColor="secondary" indented {...props}>
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-        mb={2}
-      >
+      <Box display="flex" alignItems="center" justifyContent="space-between">
         <CardLabel type={'insurance'}>
           <VerifiedUserIcon fontSize="inherit" />
           <CardLabelTypography type="icon">
             {status === RouteExecutionStatus.Idle
-              ? t(`swap.tags.insurance`)
-              : t(`swap.tags.insured`)}
+              ? t('swap.tags.insurance')
+              : t('swap.tags.insured')}
           </CardLabelTypography>
         </CardLabel>
-        <InsuraceLogo />
-      </Box>
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-        mb={2}
-      >
-        <Typography fontSize={24} fontWeight={700} lineHeight={1}>
-          {t('format.currency', {
-            value: feeAmountUsd,
-          })}
-        </Typography>
         {status === RouteExecutionStatus.Idle ? (
           <Switch onChange={onChange} />
-        ) : null}
-      </Box>
-      <Box display="flex" alignItems="center">
-        <Typography fontSize={12}>
-          {status === RouteExecutionStatus.Idle
-            ? 'Get 100% coverage for lost tokens.'
-            : '100% coverage for lost tokens.'}
-        </Typography>
-        <Link
-          href={
-            status === RouteExecutionStatus.Idle
-              ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
-              : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`
-          }
-          target="_blank"
-          underline="none"
-          color="text.primary"
-        >
-          <Typography px={0.5} color="primary" fontSize={12} fontWeight={600}>
-            {status === RouteExecutionStatus.Idle
-              ? 'Learn more'
-              : 'View coverage'}
-          </Typography>
-        </Link>
+        ) : (
+          <Box my={-0.5}>
+            <CardIconButton onClick={handleExpand} size="small">
+              {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </CardIconButton>
+          </Box>
+        )}
       </Box>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+        <Box mt={2}>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            mb={2}
+          >
+            <Typography fontSize={24} fontWeight={700} lineHeight={1}>
+              {t('format.currency', {
+                value: feeAmountUsd,
+              })}
+            </Typography>
+            <InsuraceLogo />
+          </Box>
+          <Box>
+            <Typography fontSize={14}>
+              {status === RouteExecutionStatus.Idle
+                ? t('swap.insurance.insure')
+                : t('swap.insurance.insured')}
+            </Typography>
+            {status !== RouteExecutionStatus.Idle ? (
+              <Box
+                sx={{
+                  listStyleType: 'disc',
+                  pl: 2,
+                }}
+              >
+                <Typography fontSize={14} display="list-item">
+                  {t('swap.insurance.bridgeExploits')}
+                </Typography>
+                <Typography fontSize={14} display="list-item">
+                  {t('swap.insurance.slippageError')}
+                </Typography>
+              </Box>
+            ) : null}
+            <Link
+              href={
+                status === RouteExecutionStatus.Idle
+                  ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                  : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`
+              }
+              target="_blank"
+              underline="none"
+              color="text.primary"
+            >
+              <Typography
+                pt={0.5}
+                color="primary"
+                fontSize={14}
+                fontWeight={600}
+              >
+                {status === RouteExecutionStatus.Idle
+                  ? t('button.learnMore')
+                  : t('button.viewCoverage')}
+              </Typography>
+            </Link>
+          </Box>
+        </Box>
+      </Collapse>
     </Card>
   );
 };
diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -12,6 +12,7 @@
     "done": "Done",
     "getGas": "Get gas",
     "hide": "Hide",
+    "learnMore": "Learn more",
     "lifiSwap": "LI.FI Swap",
     "light": "Light",
     "max": "max",
@@ -29,6 +30,7 @@
     "startSwap": "Start swap",
     "swap": "Swap",
     "tryAgain": "Try again",
+    "viewCoverage": "View coverage",
     "viewOnExplorer": "View on explorer"
   },
   "format": {
@@ -104,6 +106,12 @@
     "gasFeeEstimated": "estimated gas fee",
     "gasFeePaid": "gas fee paid",
     "inProgress": "in progress",
+    "insurance": {
+      "bridgeExploits": "Bridge malfunctions, hacks or exploits",
+      "insure": "Insure 100% of tokens in transit.",
+      "insured": "You've insured 100% of tokens in transit:",
+      "slippageError": "Error in slippage for tokens received"
+    },
     "info": {
       "message": {
         "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the swap.",