refactor: improve insurance stability

packages/widget/src/components/Insurance/Insurance.tsx

@@ -1,79 +1,24 @@
-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';
+import { InsuranceCard } from './InsuranceCard';
+import { InsuranceCollapsed } from './InsuranceCollapsed';
+import type { InsuranceProps } from './types';
 
-export const Insurance: React.FC<
-  {
-    available?: boolean;
-    insurableRouteId?: string;
-    feeAmountUsd?: string;
-    status?: RouteExecutionStatus;
-    onChange?: (
-      event: React.ChangeEvent<HTMLInputElement>,
-      checked: boolean,
-    ) => void;
-  } & Omit<BoxProps, 'onChange'>
-> = ({
+export const Insurance: React.FC<InsuranceProps> = ({
   status,
-  feeAmountUsd,
   insurableRouteId,
-  available,
+  feeAmountUsd,
   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>
+  return status === RouteExecutionStatus.Idle ? (
+    <InsuranceCollapsed
+      insurableRouteId={insurableRouteId}
+      feeAmountUsd={feeAmountUsd}
+      status={status}
+      onChange={onChange}
+      {...props}
+    />
+  ) : (
+    <InsuranceCard feeAmountUsd={feeAmountUsd} status={status} {...props} />
   );
 };

packages/widget/src/components/Insurance/InsuranceCard.tsx

@@ -0,0 +1,58 @@
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import { Box, 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';
+import type { InsuranceCardProps } from './types';
+
+export const InsuranceCard: React.FC<InsuranceCardProps> = ({
+  status,
+  feeAmountUsd,
+  onChange,
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <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>
+  );
+};

packages/widget/src/components/Insurance/InsuranceCollapsed.tsx

@@ -0,0 +1,59 @@
+import { Collapse } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+import { useSwapRoutes } from '../../hooks';
+import {
+  RouteExecutionStatus,
+  useRouteExecutionStore,
+  useSetExecutableRoute,
+} from '../../stores';
+import { InsuranceCard } from './InsuranceCard';
+import type { InsuranceProps } from './types';
+
+export const InsuranceCollapsed: React.FC<
+  PropsWithChildren<InsuranceProps>
+> = ({
+  status,
+  insurableRouteId,
+  feeAmountUsd,
+  onChange,
+  children,
+  ...props
+}) => {
+  const setExecutableRoute = useSetExecutableRoute();
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[insurableRouteId],
+  );
+  const { routes } = useSwapRoutes(routeExecution?.route);
+
+  const toggleInsurance = (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => {
+    const insuredRoute = routes?.[0];
+    if (insuredRoute) {
+      if (checked) {
+        setExecutableRoute(insuredRoute, insurableRouteId);
+      }
+      onChange?.(checked ? insuredRoute.id : insurableRouteId);
+    }
+  };
+
+  const insuredRoute = routes?.[0];
+
+  return (
+    <Collapse
+      timeout={225}
+      in={insuredRoute?.insurance?.state === 'INSURED'}
+      unmountOnExit
+      mountOnEnter
+      appear={status === RouteExecutionStatus.Idle}
+    >
+      <InsuranceCard
+        feeAmountUsd={feeAmountUsd}
+        status={status}
+        onChange={toggleInsurance}
+        {...props}
+      />
+    </Collapse>
+  );
+};

packages/widget/src/components/Insurance/types.ts

@@ -0,0 +1,15 @@
+import type { BoxProps } from '@mui/material';
+import type { RouteExecutionStatus } from '../../stores';
+
+export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
+  insurableRouteId: string;
+  feeAmountUsd?: string;
+  status?: RouteExecutionStatus;
+  onChange?: (routeId: string) => void;
+}
+
+export interface InsuranceCardProps {
+  feeAmountUsd?: string;
+  status?: RouteExecutionStatus;
+  onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+}

packages/widget/src/pages/SwapPage/StartSwapButton.tsx

@@ -1,14 +1,11 @@
-import type { Route } from '@lifi/sdk';
 import { SwapButton } from '../../components/SwapButton';
-import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
-
-export interface StartSwapButtonProps {
-  onClick?(): void;
-  route?: Route;
-  text?: string;
-  disabled?: boolean;
-  loading?: boolean;
-}
+import {
+  useFundsSufficiency,
+  useGasSufficiency,
+  useSwapRoutes,
+} from '../../hooks';
+import { useRouteExecutionStore } from '../../stores';
+import type { StartSwapButtonProps } from './types';
 
 export const StartSwapButton: React.FC<StartSwapButtonProps> = ({
   onClick,
@@ -31,3 +28,28 @@ export const StartSwapButton: React.FC<StartSwapButtonProps> = ({
     />
   );
 };
+
+export const StartIdleSwapButton: React.FC<StartSwapButtonProps> = ({
+  onClick,
+  route,
+  text,
+  loading,
+  disabled,
+  insurableRouteId,
+}) => {
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[insurableRouteId],
+  );
+  const { isLoading } = useSwapRoutes(routeExecution?.route);
+
+  return (
+    <StartSwapButton
+      onClick={onClick}
+      text={text}
+      route={route}
+      disabled={disabled}
+      loading={loading || isLoading}
+      insurableRouteId={insurableRouteId}
+    />
+  );
+};