@lifi/widget 3.0.0-alpha.30 → 3.0.0-alpha.32

package/components/Avatar/Avatar.style.tsx

@@ -2,10 +2,21 @@ import type { CSSObject } from '@mui/material';
 import {
   AvatarGroup,
   Box,
+  Avatar as MuiAvatar,
+  Skeleton,
   avatarClasses,
   badgeClasses,
   styled,
 } from '@mui/material';
+import { avatarMask16 } from './utils.js';
+
+export const AvatarMasked = styled(MuiAvatar)(({ theme }) => ({
+  mask: avatarMask16,
+}));
+
+export const AvatarSkeleton = styled(Skeleton)(({ theme }) => ({
+  mask: avatarMask16,
+}));
 
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
@@ -31,19 +42,18 @@ export const AvatarDefault = styled(Box)(({ theme }) => {
     height: root?.height,
     width: root?.width,
     color: theme.palette.text.secondary,
+    mask: avatarMask16,
   };
 });
 
 export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
-  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject;
   return {
     background:
       theme.palette.mode === 'light'
         ? theme.palette.grey[300]
         : theme.palette.grey[800],
-    border: `2px solid ${theme.palette.background.paper}`,
     borderRadius: '50%',
-    height: ((root?.height ?? 40) as number) / 2,
-    width: ((root?.width ?? 40) as number) / 2,
+    height: 16,
+    width: 16,
   };
 });

package/components/Avatar/Avatar.tsx

@@ -1,7 +1,11 @@
 import type { SxProps, Theme } from '@mui/material';
-import { Badge, Skeleton } from '@mui/material';
+import { Badge } from '@mui/material';
 import { SmallAvatarSkeleton } from '../SmallAvatar.js';
-import { AvatarDefault, AvatarDefaultBadge } from './Avatar.style.js';
+import {
+  AvatarDefault,
+  AvatarDefaultBadge,
+  AvatarSkeleton,
+} from './Avatar.style.js';
 
 export const AvatarBadgedDefault: React.FC<{
   sx?: SxProps<Theme>;
@@ -28,7 +32,7 @@ export const AvatarBadgedSkeleton: React.FC<{
       badgeContent={<SmallAvatarSkeleton />}
       sx={sx}
     >
-      <Skeleton width={40} height={40} variant="circular" />
+      <AvatarSkeleton width={40} height={40} variant="circular" />
     </Badge>
   );
 };

package/components/Avatar/TokenAvatar.tsx

@@ -1,11 +1,11 @@
 import type { Chain, StaticToken } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
-import { Avatar, Badge } from '@mui/material';
+import { Badge } from '@mui/material';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
 import { SmallAvatar } from '../SmallAvatar.js';
 import { AvatarBadgedSkeleton } from './Avatar.js';
-import { AvatarDefaultBadge } from './Avatar.style.js';
+import { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js';
 
 export const TokenAvatar: React.FC<{
   token?: StaticToken;
@@ -69,9 +69,9 @@ export const TokenAvatarBase: React.FC<{
       }
       sx={sx}
     >
-      <Avatar src={token?.logoURI} alt={token?.symbol}>
+      <AvatarMasked src={token?.logoURI} alt={token?.symbol}>
         {token?.symbol?.[0]}
-      </Avatar>
+      </AvatarMasked>
     </Badge>
   );
 };

package/components/Avatar/utils.ts

@@ -0,0 +1,11 @@
+/**
+ * Avatar mask for 16px badge
+ */
+export const avatarMask16 =
+  'radial-gradient(circle 10.5px at calc(100% - 5.5px) calc(100% - 5.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat';
+
+/**
+ * Avatar mask for 12px badge
+ */
+export const avatarMask12 =
+  'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100%/100% 100% no-repeat';

package/components/ButtonTertiary.tsx

@@ -0,0 +1,19 @@
+import { LoadingButton, loadingButtonClasses } from '@mui/lab';
+import { styled } from '@mui/material';
+import { getContrastAlphaColor } from '../utils/colors.js';
+
+export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  height: 40,
+  fontSize: 14,
+  backgroundColor: getContrastAlphaColor(theme, 0.04),
+  '&:hover, &:active': {
+    backgroundColor: getContrastAlphaColor(theme, 0.08),
+  },
+  [`&.${loadingButtonClasses.loading}:disabled`]: {
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
+  },
+  [`.${loadingButtonClasses.loadingIndicator}`]: {
+    color: theme.palette.text.primary,
+  },
+}));

package/components/Card/Card.tsx

@@ -1,12 +1,5 @@
 import type { BoxProps, Theme } from '@mui/material';
-import {
-  Box,
-  alpha,
-  badgeClasses,
-  darken,
-  lighten,
-  styled,
-} from '@mui/material';
+import { Box, alpha, darken, lighten, styled } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 
 type CardVariant = 'default' | 'selected' | 'error';
@@ -42,7 +35,7 @@ export const Card = styled(Box, {
     ),
 })<CardProps>(({
   theme,
-  variant,
+  variant = 'default',
   selectionColor = 'primary',
   indented,
   pointerEvents,
@@ -56,7 +49,8 @@ export const Card = styled(Box, {
     : backgroundColor;
   return {
     backgroundColor,
-    border: `1px solid`,
+    // border: variant === 'default' ? 'none' : '1px solid',
+    border: '1px solid',
     borderColor:
       variant === 'error'
         ? theme.palette.error.main
@@ -68,6 +62,7 @@ export const Card = styled(Box, {
             ? theme.palette.grey[300]
             : theme.palette.grey[800],
     borderRadius: theme.shape.borderRadius,
+    // boxShadow: '0px 1px 8px 0px rgba(0, 0, 0, 0.04)',
     overflow: 'hidden',
     position: 'relative',
     padding: indented ? theme.spacing(2) : 0,
@@ -76,13 +71,13 @@ export const Card = styled(Box, {
       cursor: onClick ? 'pointer' : 'default',
       backgroundColor: backgroundHoverColor,
     },
-    [`&:hover .${badgeClasses.badge} > div`]: {
-      borderColor: backgroundHoverColor,
-    },
-    transition: theme.transitions.create(['background-color'], {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
+    transition: theme.transitions.create(
+      ['background-color', 'box-shadow', 'border-color'],
+      {
+        duration: theme.transitions.duration.enteringScreen,
+        easing: theme.transitions.easing.easeOut,
+      },
+    ),
     pointerEvents,
   };
 });

package/components/Card/CardHeader.tsx

@@ -10,15 +10,17 @@ export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
     alignSelf: 'center',
   },
   [`.${cardHeaderClasses.title}`]: {
-    fontWeight: 500,
+    fontWeight: 600,
     fontSize: 18,
     lineHeight: 1.3334,
     color: theme.palette.text.primary,
+    textAlign: 'left',
   },
   [`.${cardHeaderClasses.subheader}`]: {
     fontWeight: 500,
     fontSize: 12,
     lineHeight: 1.3334,
     color: theme.palette.text.secondary,
+    textAlign: 'left',
   },
 }));

package/components/Card/CardIconButton.tsx

@@ -1,15 +1,12 @@
-import { IconButton as MuiIconButton, alpha, styled } from '@mui/material';
+import { IconButton as MuiIconButton, styled } from '@mui/material';
+import { getContrastAlphaColor } from '../../utils/colors.js';
 
 export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
-  const backgroundColor =
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white;
   return {
     padding: theme.spacing(0.5),
-    backgroundColor: alpha(backgroundColor, 0.04),
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
     '&:hover': {
-      backgroundColor: alpha(backgroundColor, 0.08),
+      backgroundColor: getContrastAlphaColor(theme, 0.08),
     },
   };
 });

package/components/Card/CardLabel.tsx

@@ -44,8 +44,4 @@ export const CardLabelTypography = styled(Typography, {
   fontSize: 12,
   lineHeight: 1,
   fontWeight: '600',
-  textTransform: 'lowercase',
-  '&::first-letter': {
-    textTransform: 'uppercase',
-  },
 }));

package/components/Card/CardTitle.tsx

@@ -7,6 +7,7 @@ export const CardTitle = styled(Typography, {
   lineHeight: 1,
   fontWeight: 700,
   padding: theme.spacing(2, 2, 0, 2),
+  textAlign: 'left',
   '&:after': {
     content: required ? '" *"' : 'none',
     color: theme.palette.error.main,

package/components/ChainSelect/useChainSelect.ts

@@ -10,7 +10,7 @@ import { useFieldController } from '../../stores/form/useFieldController.js';
 
 export const useChainSelect = (formType: FormType) => {
   const chainKey = FormKeyHelper.getChainKey(formType);
-  const { onChange, onBlur } = useFieldController({ name: chainKey });
+  const { onChange } = useFieldController({ name: chainKey });
 
   const { setFieldValue, getFieldValues } = useFieldActions();
   const { chains, isLoading, getChainById } = useChains(formType);
@@ -30,7 +30,6 @@ export const useChainSelect = (formType: FormType) => {
 
   const setCurrentChain = (chainId: number) => {
     onChange(chainId);
-    onBlur();
     if (swapOnly) {
       setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
         isTouched: true,

package/components/Header/Header.style.ts

@@ -1,12 +1,14 @@
 import {
   AppBar,
+  Avatar,
   Box,
   Button,
   alpha,
-  badgeClasses,
   buttonClasses,
   styled,
 } from '@mui/material';
+import { getContrastAlphaColor } from '../../utils/colors.js';
+import { avatarMask12 } from '../Avatar/utils.js';
 import { Tabs } from '../Tabs/Tabs.style.js';
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
@@ -42,10 +44,7 @@ export const WalletButton = styled(Button)(({ theme }) => ({
   fontWeight: 600,
   borderRadius: theme.shape.borderRadius * 2,
   '&:hover': {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.04)
-        : alpha(theme.palette.common.white, 0.08),
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
   [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
     fontSize: '24px',
@@ -53,12 +52,6 @@ export const WalletButton = styled(Button)(({ theme }) => ({
   [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
     fontSize: '24px',
   },
-  [`&:hover .${badgeClasses.badge} > div`]: {
-    borderColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.04)
-        : alpha(theme.palette.common.white, 0.08),
-  },
 }));
 
 export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
@@ -84,7 +77,13 @@ export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
 
 export const SplitTabs = styled(Tabs)(({ theme }) => ({
   backgroundColor:
-    theme.palette.mode === 'dark'
-      ? theme.palette.background.paper
-      : alpha(theme.palette.common.black, 0.04),
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.04)
+      : theme.palette.background.paper,
+}));
+
+export const WalletAvatar = styled(Avatar)(({ theme }) => ({
+  mask: avatarMask12,
+  width: 24,
+  height: 24,
 }));

package/components/Header/WalletHeader.tsx

@@ -17,6 +17,7 @@ import { CloseDrawerButton } from './CloseDrawerButton.js';
 import {
   DrawerWalletContainer,
   HeaderAppBar,
+  WalletAvatar,
   WalletButton,
 } from './Header.style.js';
 import { WalletMenu } from './WalletMenu.js';
@@ -117,16 +118,6 @@ const ConnectedButton = ({ account }: { account: Account }) => {
     setAnchorEl(null);
   };
 
-  const avatar = (
-    <Avatar
-      src={getConnectorIcon(account.connector)}
-      alt={account.connector?.name}
-      sx={{ width: 24, height: 24 }}
-    >
-      {account.connector?.name[0]}
-    </Avatar>
-  );
-
   return (
     <>
       <WalletButton
@@ -140,16 +131,27 @@ const ConnectedButton = ({ account }: { account: Account }) => {
                 <SmallAvatar
                   src={chain?.logoURI}
                   alt={chain?.name}
-                  sx={{ width: 16, height: 16 }}
+                  sx={{ width: 12, height: 12 }}
                 >
                   {chain?.name[0]}
                 </SmallAvatar>
               }
             >
-              {avatar}
+              <WalletAvatar
+                src={getConnectorIcon(account.connector)}
+                alt={account.connector?.name}
+              >
+                {account.connector?.name[0]}
+              </WalletAvatar>
             </Badge>
           ) : (
-            avatar
+            <Avatar
+              src={getConnectorIcon(account.connector)}
+              alt={account.connector?.name}
+              sx={{ width: 24, height: 24 }}
+            >
+              {account.connector?.name[0]}
+            </Avatar>
           )
         }
         sx={{

package/components/Header/WalletMenu.tsx

@@ -19,6 +19,7 @@ import { useAccount } from '../../hooks/useAccount.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
+import { AvatarMasked } from '../Avatar/Avatar.style.js';
 import { SmallAvatar } from '../SmallAvatar.js';
 import { EVMDisconnectIconButton } from './EVMDisconnectIconButton.js';
 import { SVMDisconnectIconButton } from './SVMDisconnectIconButton.js';
@@ -44,17 +45,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
             await navigator.clipboard.writeText(account.address ?? '');
             onClose();
           };
-          const avatar = (
-            <Avatar
-              src={getConnectorIcon(account.connector)}
-              alt={account.connector?.name}
-              sx={{
-                marginRight: chain?.logoURI ? 0 : 1.5,
-              }}
-            >
-              {account.connector?.name[0]}
-            </Avatar>
-          );
+
           return (
             <MenuItem key={account.address}>
               <Box flex={1} display="flex" alignItems="center">
@@ -69,10 +60,26 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                     }
                     sx={{ marginRight: 1.5 }}
                   >
-                    {avatar}
+                    <AvatarMasked
+                      src={getConnectorIcon(account.connector)}
+                      alt={account.connector?.name}
+                      sx={{
+                        marginRight: chain?.logoURI ? 0 : 1.5,
+                      }}
+                    >
+                      {account.connector?.name[0]}
+                    </AvatarMasked>
                   </Badge>
                 ) : (
-                  avatar
+                  <Avatar
+                    src={getConnectorIcon(account.connector)}
+                    alt={account.connector?.name}
+                    sx={{
+                      marginRight: chain?.logoURI ? 0 : 1.5,
+                    }}
+                  >
+                    {account.connector?.name[0]}
+                  </Avatar>
                 )}
                 {walletAddress}
               </Box>

package/components/Input.tsx

@@ -1,14 +1,11 @@
 import { InputBase, inputBaseClasses, styled } from '@mui/material';
 
 export const Input = styled(InputBase)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.white
-      : theme.palette.background.paper,
   paddingRight: theme.spacing(2),
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(1.5, 1, 1.5, 2),
     height: '2.875em',
     boxSizing: 'inherit',
   },
+  fontWeight: 500,
 }));

package/components/ListItemButton.tsx

@@ -1,15 +1,18 @@
 import { ListItemButton as MuiListItemButton, styled } from '@mui/material';
 import { getContrastAlphaColor } from '../utils/colors.js';
 
-export const ListItemButton = styled(MuiListItemButton)(
-  ({ theme, disabled }) => ({
+export const ListItemButton = styled(MuiListItemButton)(({
+  theme,
+  disabled,
+}) => {
+  const backgroundHoverColor = getContrastAlphaColor(theme, 0.04);
+  return {
     borderRadius: theme.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
-    ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
     '&:hover': {
-      backgroundColor:
-        !disabled && getContrastAlphaColor(theme.palette.mode, '4%'),
+      backgroundColor: !disabled && backgroundHoverColor,
     },
-  }),
-);
+    ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
+  };
+});

package/components/ListItemText.tsx

@@ -6,6 +6,6 @@ import {
 
 export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
   [`.${listItemTextClasses.primary}`]: {
-    fontWeight: 400,
+    fontWeight: 500,
   },
 }));

package/components/PageContainer.ts

@@ -10,8 +10,16 @@ export const PageContainer = styled(Container, {
     !['halfGutters', 'topBottomGutters'].includes(prop as string),
 })<PageContainerProps>(
   ({ theme, disableGutters, halfGutters, topBottomGutters }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
     padding: disableGutters
       ? 0
-      : theme.spacing(topBottomGutters ? 1 : 0, halfGutters ? 1.5 : 3),
+      : theme.spacing(
+          topBottomGutters ? 1 : 0,
+          halfGutters ? 1.5 : 3,
+          topBottomGutters ? 3 : 0,
+          halfGutters ? 1.5 : 3,
+        ),
   }),
 );

package/components/PoweredBy/PoweredBy.tsx

@@ -1,54 +1,39 @@
 import { Box, Tooltip, Typography } from '@mui/material';
-import { useLocation } from 'react-router-dom';
 import { version } from '../../config/version.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { HiddenUI } from '../../types/widget.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { Link } from './PoweredBy.style.js';
 
 export const PoweredBy: React.FC = () => {
-  const { hiddenUI } = useWidgetConfig();
-  const { pathname } = useLocation();
-  if (
-    pathname.includes(navigationRoutes.fromToken) ||
-    pathname.includes(navigationRoutes.toToken) ||
-    pathname.includes(navigationRoutes.transactionHistory)
-  ) {
-    return null;
-  }
   return (
     <Box
-      px={3}
       pt={1}
-      pb={hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2}
+      pb={2}
+      flex={1}
       sx={{
         display: 'flex',
         alignItems: 'flex-end',
         justifyContent: 'flex-end',
       }}
     >
-      {!hiddenUI?.includes(HiddenUI.PoweredBy) ? (
-        <Tooltip title={`v${version}`} placement="top" enterDelay={1000} arrow>
-          <Link
-            href="https://li.fi"
-            target="_blank"
-            underline="none"
-            color="text.primary"
+      <Tooltip title={`v${version}`} placement="top" enterDelay={1000} arrow>
+        <Link
+          href="https://li.fi"
+          target="_blank"
+          underline="none"
+          color="text.primary"
+        >
+          <Typography
+            color="text.secondary"
+            fontSize={12}
+            fontWeight={500}
+            px={0.5}
           >
-            <Typography
-              color="text.secondary"
-              fontSize={12}
-              fontWeight={500}
-              px={0.5}
-            >
-              Powered by
-            </Typography>
-            <Typography color="text.primary" fontSize={12} fontWeight={500}>
-              LI.FI
-            </Typography>
-          </Link>
-        </Tooltip>
-      ) : null}
+            Powered by
+          </Typography>
+          <Typography color="text.primary" fontSize={12} fontWeight={600}>
+            LI.FI
+          </Typography>
+        </Link>
+      </Tooltip>
     </Box>
   );
 };

package/components/RouteCard/RouteCard.style.ts

@@ -3,8 +3,8 @@ import { Box, Typography, alpha, styled } from '@mui/material';
 export const IconTypography = styled(Typography)(({ theme }) => ({
   color:
     theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.24)
-      : alpha(theme.palette.common.white, 0.32),
+      ? alpha(theme.palette.common.black, 0.32)
+      : alpha(theme.palette.common.white, 0.4),
   lineHeight: 0,
 }));
 

package/components/RouteCard/RouteCard.tsx

@@ -3,7 +3,7 @@ import { ExpandLess, ExpandMore, VerifiedUser } from '@mui/icons-material';
 import type { TooltipProps } from '@mui/material';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { formatTokenAmount } from '../../utils/format.js';
@@ -44,21 +44,20 @@ export const RouteCard: React.FC<
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) };
 
-  const RecommendedTagTooltip =
-    route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+  const tags = route.tags?.filter(
+    (tag) => tag === 'CHEAPEST' || tag === 'FASTEST',
+  );
 
   const cardContent = (
     <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>
+          {tags?.length ? (
+            <CardLabel type={active ? 'active' : undefined}>
+              <CardLabelTypography>
+                {t(`main.tags.${tags[0].toLowerCase()}` as any)}
+              </CardLabelTypography>
+            </CardLabel>
           ) : null}
           {insurable ? (
             <InsuranceTooltip
@@ -157,19 +156,3 @@ const InsuranceTooltip: React.FC<
     </Tooltip>
   );
 };
-
-const RecommendedTooltip: React.FC<Pick<TooltipProps, 'children'>> = ({
-  children,
-}) => {
-  const { t } = useTranslation();
-  return (
-    <Tooltip
-      title={t('tooltip.recommended')}
-      placement="top"
-      enterDelay={400}
-      arrow
-    >
-      {children}
-    </Tooltip>
-  );
-};