@lifi/widget 3.0.0-alpha.11 → 3.0.0-alpha.13

package/components/Insurance/InsuranceCard.tsx

@@ -1,13 +1,11 @@
-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 { ChangeEvent, MouseEventHandler } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
-import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
+import { Card, CardLabel, CardLabelTypography } from '../Card';
 import { Switch } from '../Switch';
 import type { InsuranceCardProps } from './types';
 
@@ -22,14 +20,6 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
 }) => {
   const { t } = useTranslation();
   const [enabled, setEnabled] = useState(false);
-  const [cardExpanded, setCardExpanded] = useState(
-    status === RouteExecutionStatus.Idle,
-  );
-
-  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation();
-    setCardExpanded((expanded) => !expanded);
-  };
 
   const handleSwitch = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
     setEnabled(checked);
@@ -47,17 +37,9 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
               : t('main.tags.insured')}
           </CardLabelTypography>
         </CardLabel>
-        {status === RouteExecutionStatus.Idle ? (
-          <Switch onChange={handleSwitch} value={enabled} />
-        ) : (
-          <Box my={-0.5}>
-            <CardIconButton onClick={handleExpand} size="small">
-              {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </CardIconButton>
-          </Box>
-        )}
+        <Switch onChange={handleSwitch} value={enabled} />
       </Box>
-      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+      <Collapse timeout={225} in={enabled} mountOnEnter unmountOnExit>
         <Box mt={2}>
           <Box
             display="flex"

package/components/PageContainer.ts

@@ -0,0 +1,18 @@
+import { Container } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+interface PageContainerProps {
+  halfGutters?: boolean;
+  topBottomGutters?: boolean;
+}
+
+export const PageContainer = styled(Container, {
+  shouldForwardProp: (prop) =>
+    !['halfGutters', 'topBottomGutters'].includes(prop as string),
+})<PageContainerProps>(
+  ({ theme, disableGutters, halfGutters, topBottomGutters }) => ({
+    padding: disableGutters
+      ? 0
+      : theme.spacing(topBottomGutters ? 1 : 0, halfGutters ? 1.5 : 3),
+  }),
+);

package/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -2,6 +2,9 @@ import { IconButton as MuiIconButton } from '@mui/material';
 import { darken, lighten, styled } from '@mui/material/styles';
 
 export const IconButton = styled(MuiIconButton)(({ theme }) => ({
+  height: 32,
+  width: 32,
+  fontSize: 16,
   backgroundColor: theme.palette.background.paper,
   border: `1px solid`,
   borderColor:

package/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,23 +1,33 @@
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import SwapVertIcon from '@mui/icons-material/SwapVert';
-import { IconButton } from './ReverseTokensButton.style';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useFieldActions } from '../../stores';
+import { IconButton } from './ReverseTokensButton.style';
 
 export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
   vertical,
 }) => {
-  const { setAsTouched, setFieldValue } = useFieldActions();
+  const { setFieldValue, getFieldValues } = useFieldActions();
 
   const handleClick = () => {
+    const [fromChain, fromToken, toChain, toToken] = getFieldValues(
+      'fromChain',
+      'fromToken',
+      'toChain',
+      'toToken',
+    );
     setFieldValue('fromAmount', '', { isTouched: true });
-    setAsTouched('fromChain');
-    setAsTouched('fromToken');
-    setAsTouched('toChain');
-    setAsTouched('toToken');
+    setFieldValue('fromChain', toChain, { isTouched: true });
+    setFieldValue('fromToken', toToken, { isTouched: true });
+    setFieldValue('toChain', fromChain, { isTouched: true });
+    setFieldValue('toToken', fromToken, { isTouched: true });
   };
   return (
-    <IconButton onClick={handleClick} size="small">
-      {vertical ? <SwapVertIcon /> : <SwapHorizIcon />}
+    <IconButton onClick={handleClick} size="medium">
+      {vertical ? (
+        <ArrowDownwardIcon fontSize="inherit" />
+      ) : (
+        <ArrowForwardIcon fontSize="inherit" />
+      )}
     </IconButton>
   );
 };

package/components/RouteCard/RouteCard.style.ts

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 
 export const IconTypography = styled(Typography)(({ theme }) => ({
@@ -7,5 +7,11 @@ export const IconTypography = styled(Typography)(({ theme }) => ({
       ? alpha(theme.palette.common.black, 0.24)
       : alpha(theme.palette.common.white, 0.32),
   lineHeight: 0,
-  marginRight: theme.spacing(0.5),
+}));
+
+export const TokenContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: 40,
 }));

package/components/RouteCard/RouteCard.tsx

@@ -14,22 +14,31 @@ import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import type { InsuredAmount } from '../Insurance';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
+import { TokenContainer } from './RouteCard.style';
 import { RouteCardEssentials } from './RouteCardEssentials';
+import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded';
 import type { RouteCardProps } from './types';
 
 export const RouteCard: React.FC<
   RouteCardProps & Omit<CardProps, 'variant'>
-> = ({ route, active, variant = 'default', expanded, ...other }) => {
+> = ({
+  route,
+  active,
+  variant = 'default',
+  expanded: defaulExpanded,
+  ...other
+}) => {
   const { t } = useTranslation();
   const { subvariant } = useWidgetConfig();
-  const [cardExpanded, setCardExpanded] = useState(expanded);
-  const insurable = route.insurance?.state === 'INSURABLE';
+  const [cardExpanded, setCardExpanded] = useState(defaulExpanded);
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();
     setCardExpanded((expanded) => !expanded);
   };
 
+  const insurable = route.insurance?.state === 'INSURABLE';
+
   const token: TokenAmount =
     subvariant === 'nft'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
@@ -42,6 +51,15 @@ export const RouteCard: React.FC<
     <Box flex={1}>
       {subvariant !== 'refuel' && (insurable || route.tags?.length) ? (
         <Box display="flex" alignItems="center" mb={2}>
+          {route.tags?.length ? (
+            <RecommendedTagTooltip>
+              <CardLabel type={active ? 'active' : undefined}>
+                <CardLabelTypography>
+                  {t(`main.tags.${route.tags[0].toLowerCase()}` as any)}
+                </CardLabelTypography>
+              </CardLabel>
+            </RecommendedTagTooltip>
+          ) : null}
           {insurable ? (
             <InsuranceTooltip
               insuredAmount={formatTokenAmount(
@@ -50,50 +68,37 @@ export const RouteCard: React.FC<
               )}
               insuredTokenSymbol={route.toToken.symbol}
             >
-              <CardLabel
-                type={
-                  route.tags?.length && !cardExpanded
-                    ? 'insurance-icon'
-                    : 'insurance'
-                }
-              >
+              <CardLabel type={'insurance'}>
                 <VerifiedUserIcon fontSize="inherit" />
-                {cardExpanded || !route.tags?.length ? (
-                  <CardLabelTypography type="icon">
-                    {t(`main.tags.insurable`)}
-                  </CardLabelTypography>
-                ) : null}
-              </CardLabel>
-            </InsuranceTooltip>
-          ) : null}
-          {route.tags?.length ? (
-            <RecommendedTagTooltip>
-              <CardLabel type={active ? 'active' : undefined}>
-                <CardLabelTypography>
-                  {t(`main.tags.${route.tags[0].toLowerCase()}` as any)}
+                <CardLabelTypography type="icon">
+                  {t(`main.tags.insurable`)}
                 </CardLabelTypography>
               </CardLabel>
-            </RecommendedTagTooltip>
+            </InsuranceTooltip>
           ) : null}
         </Box>
       ) : null}
-      <Box display="flex" justifyContent="space-between" alignItems="start">
+      <TokenContainer>
         <Token
           token={token}
-          step={!cardExpanded ? route.steps[0] : undefined}
+          step={route.steps[0]}
+          stepVisible={!cardExpanded}
         />
-        {!expanded ? (
+        {!defaulExpanded ? (
           <CardIconButton onClick={handleExpand} size="small">
             {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
           </CardIconButton>
         ) : null}
-      </Box>
+      </TokenContainer>
       <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
         {route.steps.map((step) => (
           <StepActions key={step.id} step={step} mt={2} />
         ))}
+        <RouteCardEssentialsExpanded route={route} />
+      </Collapse>
+      <Collapse timeout={225} in={!cardExpanded} mountOnEnter unmountOnExit>
+        <RouteCardEssentials route={route} />
       </Collapse>
-      <RouteCardEssentials route={route} />
     </Box>
   );
 

package/components/RouteCard/RouteCardEssentials.tsx

@@ -1,19 +1,17 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTimeFilled';
-import EvStationIcon from '@mui/icons-material/EvStation';
-import LayersIcon from '@mui/icons-material/Layers';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import { Box, Tooltip, Typography } from '@mui/material';
+import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../../utils';
 import { IconTypography } from './RouteCard.style';
-import type { RouteCardEssentialsProps } from './types';
-import { getFeeCostsBreakdown, getGasCostsBreakdown } from './utils';
+import type { FeesBreakdown, RouteCardEssentialsProps } from './types';
 
 export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
   route,
-  dense,
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const executionTimeMinutes = Math.ceil(
     route.steps
       .map((step) => step.estimate.executionDuration)
@@ -22,70 +20,29 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
   const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
   const gasCosts = getGasCostsBreakdown(route);
   const feeCosts = getFeeCostsBreakdown(route, false);
+  const fees =
+    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
   return (
     <Box display="flex" justifyContent={'space-between'} flex={1} mt={2}>
       <Tooltip
         title={
           <Box component="span">
-            {t(`tooltip.estimatedNetworkFee`)}
-            {gasCosts.map((gas, index) => (
-              <Typography
-                fontSize={12}
-                fontWeight="500"
-                key={`${gas.token.address}${index}`}
-              >
-                {parseFloat(
-                  formatUnits(gas.amount, gas.token.decimals),
-                )?.toFixed(9)}{' '}
-                {gas.token.symbol} (
-                {t(`format.currency`, { value: gas.amountUSD })})
-              </Typography>
-            ))}
+            {t('main.fees.networkEstimated')}
+            {getFeeBreakdownTypography(gasCosts, t)}
+            {feeCosts.length ? (
+              <Box mt={1}>
+                {t('main.fees.providerEstimated')}
+                {getFeeBreakdownTypography(feeCosts, t)}
+              </Box>
+            ) : null}
           </Box>
         }
         placement="top"
         enterDelay={400}
         arrow
       >
-        <Box display="flex" alignItems="center" mr={dense ? 0 : 2}>
-          <IconTypography>
-            <EvStationIcon fontSize="small" />
-          </IconTypography>
-          <Typography
-            fontSize={14}
-            color="text.primary"
-            fontWeight="500"
-            lineHeight={1}
-          >
-            {t(`format.currency`, { value: gasCostUSD })}
-          </Typography>
-        </Box>
-      </Tooltip>
-      <Tooltip
-        title={
-          <Box component="span">
-            {t(`tooltip.additionalProviderFee`)}
-            {feeCosts.map((fee, index) => (
-              <Typography
-                fontSize={12}
-                fontWeight="500"
-                key={`${fee.token.address}${index}`}
-              >
-                {parseFloat(
-                  formatUnits(fee.amount, fee.token.decimals),
-                )?.toFixed(9)}{' '}
-                {fee.token.symbol} (
-                {t(`format.currency`, { value: fee.amountUSD })})
-              </Typography>
-            ))}
-          </Box>
-        }
-        placement="top"
-        enterDelay={400}
-        arrow
-      >
-        <Box display="flex" alignItems="center" mr={dense ? 0 : 2}>
-          <IconTypography>
+        <Box display="flex" alignItems="center">
+          <IconTypography mr={0.5}>
             <MonetizationOnIcon fontSize="small" />
           </IconTypography>
           <Typography
@@ -95,10 +52,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
             lineHeight={1}
           >
             {t(`format.currency`, {
-              value: feeCosts.reduce(
-                (sum, feeCost) => sum + feeCost.amountUSD,
-                0,
-              ),
+              value: fees,
             })}
           </Typography>
         </Box>
@@ -108,32 +62,10 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
         placement="top"
         enterDelay={400}
         arrow
-      >
-        <Box display="flex" alignItems="center" mr={dense ? 0 : 2}>
-          <IconTypography>
-            <AccessTimeIcon fontSize="small" />
-          </IconTypography>
-          <Typography
-            fontSize={14}
-            color="text.primary"
-            fontWeight="500"
-            lineHeight={1}
-          >
-            {t('main.estimatedTime', {
-              value: executionTimeMinutes,
-            })}
-          </Typography>
-        </Box>
-      </Tooltip>
-      <Tooltip
-        title={t(`tooltip.numberOfSteps`)}
-        placement="top"
-        enterDelay={400}
-        arrow
       >
         <Box display="flex" alignItems="center">
-          <IconTypography>
-            <LayersIcon fontSize="small" />
+          <IconTypography mr={0.5}>
+            <AccessTimeIcon fontSize="small" />
           </IconTypography>
           <Typography
             fontSize={14}
@@ -141,10 +73,27 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
             fontWeight="500"
             lineHeight={1}
           >
-            {route.steps.length}
+            {new Intl.NumberFormat(i18n.language, {
+              style: 'unit',
+              unit: 'minute',
+              unitDisplay: 'narrow',
+            }).format(executionTimeMinutes)}
           </Typography>
         </Box>
       </Tooltip>
     </Box>
   );
 };
+
+const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
+  fees.map((fee, index) => (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      key={`${fee.token.address}${index}`}
+    >
+      {t(`format.currency`, { value: fee.amountUSD })} (
+      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ));

package/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -0,0 +1,127 @@
+import AccessTimeIcon from '@mui/icons-material/AccessTimeFilled';
+import LayersIcon from '@mui/icons-material/Layers';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import { Box, Typography } from '@mui/material';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../../utils';
+import { IconTypography } from './RouteCard.style';
+import type { FeesBreakdown, RouteCardEssentialsProps } from './types';
+
+export const RouteCardEssentialsExpanded: React.FC<
+  RouteCardEssentialsProps
+> = ({ route }) => {
+  const { t, i18n } = useTranslation();
+  const executionTimeMinutes = Math.ceil(
+    route.steps
+      .map((step) => step.estimate.executionDuration)
+      .reduce((duration, x) => duration + x, 0) / 60,
+  );
+  const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
+  const gasCosts = getGasCostsBreakdown(route);
+  const feeCosts = getFeeCostsBreakdown(route, false);
+  const fees =
+    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
+  return (
+    <Box flex={1} mt={2}>
+      <Box>
+        <Box display="flex" alignItems="center">
+          <IconTypography ml={1} mr={3}>
+            <MonetizationOnIcon />
+          </IconTypography>
+          <Typography
+            fontSize={16}
+            color="text.primary"
+            fontWeight="600"
+            lineHeight={1.125}
+          >
+            {t(`format.currency`, {
+              value: fees,
+            })}
+          </Typography>
+        </Box>
+        <Box mt={0.5} ml={7}>
+          <Typography
+            fontSize={12}
+            color="text.secondary"
+            fontWeight="500"
+            lineHeight={1.125}
+          >
+            {t('main.fees.networkEstimated')}
+          </Typography>
+          {getFeeBreakdownTypography(gasCosts, t)}
+          {feeCosts.length ? (
+            <Box mt={0.5}>
+              <Typography
+                fontSize={12}
+                color="text.secondary"
+                fontWeight="500"
+                lineHeight={1.125}
+              >
+                {t('main.fees.providerEstimated')}
+              </Typography>
+              {getFeeBreakdownTypography(feeCosts, t)}
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+      <Box mt={2}>
+        <Box display="flex" alignItems="center">
+          <IconTypography ml={1} mr={3}>
+            <LayersIcon />
+          </IconTypography>
+          <Typography
+            fontSize={16}
+            color="text.primary"
+            fontWeight="600"
+            lineHeight={1.125}
+          >
+            {route.steps.length}
+          </Typography>
+        </Box>
+        <Box mt={0.5} ml={7}>
+          <Typography
+            fontSize={12}
+            color="text.secondary"
+            fontWeight="500"
+            lineHeight={1.125}
+          >
+            {t(`tooltip.numberOfSteps`)}
+          </Typography>
+        </Box>
+      </Box>
+      <Box display="flex" alignItems="center" mt={2}>
+        <IconTypography ml={1} mr={3}>
+          <AccessTimeIcon />
+        </IconTypography>
+        <Typography
+          fontSize={16}
+          color="text.primary"
+          fontWeight="600"
+          lineHeight={1.125}
+        >
+          {new Intl.NumberFormat(i18n.language, {
+            style: 'unit',
+            unit: 'minute',
+            unitDisplay: 'long',
+          }).format(executionTimeMinutes)}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
+  fees.map((fee, index) => (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      color="text.secondary"
+      key={`${fee.token.address}${index}`}
+    >
+      {t(`format.currency`, { value: fee.amountUSD })} (
+      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ));

package/components/RouteCard/RouteCardSkeleton.tsx

@@ -2,6 +2,7 @@ import type { BoxProps } from '@mui/material';
 import { Box, Skeleton } from '@mui/material';
 import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
+import { TokenSkeleton } from '../Token';
 import type { RouteCardSkeletonProps } from './types';
 
 export const RouteCardSkeleton: React.FC<RouteCardSkeletonProps & BoxProps> = ({
@@ -24,28 +25,10 @@ export const RouteCardSkeleton: React.FC<RouteCardSkeletonProps & BoxProps> = ({
           />
         </Box>
       ) : null}
-      <Box>
-        <Box display="flex" alignItems="center">
-          <Box mr={2}>
-            <Skeleton variant="circular" width={32} height={32} />
-          </Box>
-          <Skeleton variant="text" width={96} height={32} />
-        </Box>
-        <Box ml={6} display="flex" alignItems="center">
-          <Skeleton variant="text" width={102} height={16} />
-          <Skeleton
-            variant="text"
-            width={72}
-            height={16}
-            sx={{ marginLeft: 1 }}
-          />
-        </Box>
-      </Box>
+      <TokenSkeleton />
       <Box mt={2} display="flex" justifyContent="space-between">
         <Skeleton variant="text" width={64} height={20} />
-        <Skeleton variant="text" width={64} height={20} />
-        <Skeleton variant="text" width={48} height={20} />
-        <Skeleton variant="text" width={32} height={20} />
+        <Skeleton variant="text" width={56} height={20} />
       </Box>
     </Box>
   );

package/components/RouteCard/types.ts

@@ -1,4 +1,4 @@
-import type { Route } from '@lifi/sdk';
+import type { Route, Token } from '@lifi/sdk';
 
 export interface RouteCardProps {
   route: Route;
@@ -9,9 +9,14 @@ export interface RouteCardProps {
 
 export interface RouteCardEssentialsProps {
   route: Route;
-  dense?: boolean;
 }
 
 export interface RouteCardSkeletonProps {
   variant?: 'default' | 'cardless';
 }
+
+export interface FeesBreakdown {
+  amount: bigint;
+  amountUSD: number;
+  token: Token;
+}

package/components/Routes/Routes.tsx

@@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
+import { useValidation } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
-import { useValidation } from '../../stores';
 
 export const Routes: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();