feat: add insurance

lifinance · Mar 20, 2023 · 08162a6 · 08162a6
1 parent 8089532
commit 08162a6
Show file tree

Hide file tree

Showing 21 changed files with 389 additions and 119 deletions.
diff --git a/packages/widget/src/components/Card/CardIconButton.tsx b/packages/widget/src/components/Card/CardIconButton.tsx
@@ -0,0 +1,15 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+
+export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
+  const backgroundColor =
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white;
+  return {
+    backgroundColor: alpha(backgroundColor, 0.04),
+    '&:hover': {
+      backgroundColor: alpha(backgroundColor, 0.08),
+    },
+  };
+});
diff --git a/packages/widget/src/components/Card/CardLabel.tsx b/packages/widget/src/components/Card/CardLabel.tsx
@@ -0,0 +1,54 @@
+import { Box, Typography } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { getContrastTextColor } from '../../utils';
+
+export const CardLabel = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => ({
+  backgroundColor:
+    type === 'active'
+      ? theme.palette.secondary.main
+      : type?.includes('insurance')
+      ? alpha(theme.palette.success.main, 0.12)
+      : 'transparent',
+  border: 'solid',
+  borderWidth: type?.includes('insurance') ? 0 : 1,
+  borderColor:
+    type === 'active'
+      ? theme.palette.secondary.main
+      : theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+  borderRadius: theme.shape.borderRadius,
+  color:
+    type === 'active'
+      ? getContrastTextColor(theme, theme.palette.secondary.main)
+      : type?.includes('insurance')
+      ? theme.palette.success.main
+      : theme.palette.text.secondary,
+  padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 24,
+  minWidth: 24,
+  userSelect: 'none',
+  fontSize: '1rem',
+  marginRight: theme.spacing(1),
+}));
+
+export const CardLabelTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'icon' }>(({ theme, type }) => ({
+  padding:
+    type === 'icon'
+      ? theme.spacing(0.75, 0, 0.75, 0.75)
+      : theme.spacing(0.75, 1.5),
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: '600',
+  textTransform: 'lowercase',
+  '&::first-letter': {
+    textTransform: 'uppercase',
+  },
+}));
diff --git a/packages/widget/src/components/Card/index.ts b/packages/widget/src/components/Card/index.ts
@@ -1,3 +1,5 @@
 export * from './Card';
 export * from './CardHeader';
+export * from './CardIconButton';
+export * from './CardLabel';
 export * from './CardTitle';
diff --git a/packages/widget/src/components/Insurance/Insurance.tsx b/packages/widget/src/components/Insurance/Insurance.tsx
@@ -0,0 +1,79 @@
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import type { BoxProps } from '@mui/material';
+import { Box, Collapse, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { InsuraceLogo } from '../../icons';
+import { RouteExecutionStatus } from '../../stores';
+import { Card, CardLabel, CardLabelTypography } from '../Card';
+import { Switch } from '../Switch';
+
+export const Insurance: React.FC<
+  {
+    available?: boolean;
+    insurableRouteId?: string;
+    feeAmountUsd?: string;
+    status?: RouteExecutionStatus;
+    onChange?: (
+      event: React.ChangeEvent<HTMLInputElement>,
+      checked: boolean,
+    ) => void;
+  } & Omit<BoxProps, 'onChange'>
+> = ({
+  status,
+  feeAmountUsd,
+  insurableRouteId,
+  available,
+  onChange,
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Collapse
+      timeout={225}
+      in={available}
+      unmountOnExit
+      mountOnEnter
+      appear={status === RouteExecutionStatus.Idle}
+    >
+      <Card selectionColor="secondary" indented {...props}>
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+          mb={2}
+        >
+          <CardLabel type={'insurance'}>
+            <VerifiedUserIcon fontSize="inherit" />
+            <CardLabelTypography type="icon">
+              {status === RouteExecutionStatus.Idle
+                ? 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" justifyContent="space-between">
+          <Typography fontSize={12}>
+            Get 100% coverage for lost tokens.
+          </Typography>
+        </Box>
+      </Card>
+    </Collapse>
+  );
+};
diff --git a/packages/widget/src/components/Insurance/index.ts b/packages/widget/src/components/Insurance/index.ts
@@ -0,0 +1 @@
+export * from './Insurance';
diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -1,14 +1,13 @@
 import {
   Avatar,
-  IconButton as MuiIconButton,
   StepConnector as MuiStepConnector,
   StepContent as MuiStepContent,
   StepLabel as MuiStepLabel,
 } from '@mui/material';
 import { stepConnectorClasses } from '@mui/material/StepConnector';
 import { stepContentClasses } from '@mui/material/StepContent';
 import { stepLabelClasses } from '@mui/material/StepLabel';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 
 export const StepIcon = styled('span', {
   shouldForwardProp: (prop) =>
@@ -74,18 +73,3 @@ export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }));
-
-export const IconButton = styled(MuiIconButton, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => {
-  const backgroundColor =
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white;
-  return {
-    backgroundColor: alpha(backgroundColor, 0.04),
-    '&:hover': {
-      backgroundColor: alpha(backgroundColor, 0.08),
-    },
-  };
-});
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -20,9 +20,9 @@ import { LiFiToolLogo } from '../../icons';
 import { useWidgetConfig } from '../../providers';
 import type { WidgetVariant } from '../../types';
 import { formatTokenAmount } from '../../utils';
+import { CardIconButton } from '../Card';
 import { SmallAvatar } from '../SmallAvatar';
 import {
-  IconButton,
   StepAvatar,
   StepConnector,
   StepContent,
@@ -90,9 +90,9 @@ export const StepActions: React.FC<StepActionsProps> = ({
           })}
         </Typography>
         {hasCollapsedSteps ? (
-          <IconButton onClick={handleExpand} size="small">
+          <CardIconButton onClick={handleExpand} size="small">
             {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </IconButton>
+          </CardIconButton>
         ) : null}
       </Box>
       {hasCollapsedSteps ? (

diff --git a/packages/widget/src/components/SwapButton/SwapButton.tsx b/packages/widget/src/components/SwapButton/SwapButton.tsx
@@ -7,7 +7,7 @@ import type { SwapButtonProps } from './types';
 
 export const SwapButton: React.FC<SwapButtonProps> = ({
   onClick,
-  currentRoute,
+  hasRoute,
   text,
   disabled,
   loading,
@@ -31,7 +31,7 @@ export const SwapButton: React.FC<SwapButtonProps> = ({
 
   const getButtonText = () => {
     if (account.isActive) {
-      if (!currentRoute) {
+      if (!hasRoute) {
         return variant !== 'refuel' ? t(`button.swap`) : t(`button.getGas`);
       }
       if (text) {

diff --git a/packages/widget/src/components/SwapButton/types.ts b/packages/widget/src/components/SwapButton/types.ts
@@ -1,8 +1,6 @@
-import type { Route } from '@lifi/sdk';
-
 export interface SwapButtonProps {
   onClick?(): void;
-  currentRoute?: Route;
+  hasRoute?: boolean;
   text?: string;
   disabled?: boolean;
   loading?: boolean;

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
@@ -1,43 +1,54 @@
-import { IconButton as MuiIconButton, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 import { getContrastTextColor } from '../../utils';
 
-export const Label = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => ({
-  backgroundColor: active ? theme.palette.secondary.main : 'transparent',
-  border: '1px solid',
-  borderColor: active
-    ? theme.palette.secondary.main
-    : theme.palette.mode === 'light'
-    ? theme.palette.grey[300]
-    : theme.palette.grey[800],
-  borderRadius: theme.shape.borderRadiusSecondary,
-  color: active
-    ? getContrastTextColor(theme, theme.palette.secondary.main)
-    : theme.palette.text.secondary,
-  padding: theme.spacing(0.75),
-  fontSize: 12,
-  lineHeight: 1,
-  fontWeight: '600',
+export const Label = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => ({
+  backgroundColor:
+    type === 'active'
+      ? theme.palette.secondary.main
+      : type?.includes('insurance')
+      ? alpha(theme.palette.success.main, 0.12)
+      : 'transparent',
+  border: 'solid',
+  borderWidth: type?.includes('insurance') ? 0 : 1,
+  borderColor:
+    type === 'active'
+      ? theme.palette.secondary.main
+      : theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+  borderRadius: theme.shape.borderRadius,
+  color:
+    type === 'active'
+      ? getContrastTextColor(theme, theme.palette.secondary.main)
+      : type?.includes('insurance')
+      ? theme.palette.success.main
+      : theme.palette.text.secondary,
+  padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   height: 24,
-  letterSpacing: '0.05rem',
-  textTransform: 'uppercase',
-  display: 'inline-flex',
+  minWidth: 24,
   userSelect: 'none',
+  fontSize: '1rem',
+  marginRight: theme.spacing(1),
 }));
 
-export const IconButton = styled(MuiIconButton, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => {
-  const backgroundColor =
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white;
-  return {
-    backgroundColor: alpha(backgroundColor, 0.04),
-    '&:hover': {
-      backgroundColor: alpha(backgroundColor, 0.08),
-    },
-  };
-});
+export const LabelTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'icon' }>(({ theme, type }) => ({
+  padding:
+    type === 'icon'
+      ? theme.spacing(0.75, 0, 0.75, 0.75)
+      : theme.spacing(0.75, 1.5),
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: '600',
+  textTransform: 'lowercase',
+  '&::first-letter': {
+    textTransform: 'uppercase',
+  },
+}));