diff --git a/packages/widget/src/components/Insurance/InsuranceCard.tsx b/packages/widget/src/components/Insurance/InsuranceCard.tsx index 3e4b2f460..39be52f4d 100644 --- 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 = ({ ...props }) => { const { t } = useTranslation(); + const [cardExpanded, setCardExpanded] = useState( + status === RouteExecutionStatus.Idle, + ); + + const handleExpand: MouseEventHandler = (e) => { + e.stopPropagation(); + setCardExpanded((expanded) => !expanded); + }; return ( - + {status === RouteExecutionStatus.Idle - ? t(`swap.tags.insurance`) - : t(`swap.tags.insured`)} + ? t('swap.tags.insurance') + : t('swap.tags.insured')} - - - - - {t('format.currency', { - value: feeAmountUsd, - })} - {status === RouteExecutionStatus.Idle ? ( - ) : null} - - - - {status === RouteExecutionStatus.Idle - ? 'Get 100% coverage for lost tokens.' - : '100% coverage for lost tokens.'} - - - - {status === RouteExecutionStatus.Idle - ? 'Learn more' - : 'View coverage'} - - + ) : ( + + + {cardExpanded ? : } + + + )} + + + + + {t('format.currency', { + value: feeAmountUsd, + })} + + + + + + {status === RouteExecutionStatus.Idle + ? t('swap.insurance.insure') + : t('swap.insurance.insured')} + + {status !== RouteExecutionStatus.Idle ? ( + + + {t('swap.insurance.bridgeExploits')} + + + {t('swap.insurance.slippageError')} + + + ) : null} + + + {status === RouteExecutionStatus.Idle + ? t('button.learnMore') + : t('button.viewCoverage')} + + + + + ); }; diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json index c6288b2d3..fe909d6d9 100644 --- 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.",