@lifi/widget 3.0.0-alpha.9 → 3.0.0-beta.0

package/components/Card/Card.tsx

@@ -1,83 +1,54 @@
-import type { BoxProps, Theme } from '@mui/material';
-import { Box } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
-import type { MouseEventHandler } from 'react';
+import type { CardProps as MuiCardProps } from '@mui/material';
+import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material';
 
-type CardVariant = 'default' | 'selected' | 'error';
-
-export type CardProps = {
-  variant?: CardVariant;
+export interface CardProps extends MuiCardProps {
+  type?: 'default' | 'selected' | 'error';
   selectionColor?: 'primary' | 'secondary';
   indented?: boolean;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  pointerEvents?: 'auto' | 'none';
-} & BoxProps;
-
-const getBackgroundColor = (
-  theme: Theme,
-  variant?: CardVariant,
-  selectionColor?: 'primary' | 'secondary',
-) =>
-  variant === 'selected'
-    ? selectionColor === 'primary'
-      ? theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.04)
-        : alpha(theme.palette.primary.main, 0.42)
-      : alpha(
-          theme.palette.secondary.main,
-          theme.palette.mode === 'light' ? 0.08 : 0.12,
-        )
-    : theme.palette.background.paper;
+}
 
-export const Card = styled(Box, {
+export const Card = styled(MuiCard, {
   shouldForwardProp: (prop) =>
-    !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(
-      prop as string,
-    ),
-})<CardProps>(({
-  theme,
-  variant,
-  selectionColor = 'primary',
-  indented,
-  pointerEvents,
-  onClick,
-}) => {
-  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
-  const backgroundHoverColor = onClick
-    ? theme.palette.mode === 'light'
-      ? darken(backgroundColor, 0.02)
-      : lighten(backgroundColor, 0.02)
-    : backgroundColor;
+    !['type', 'indented', 'selectionColor'].includes(prop as string),
+})<CardProps>(({ theme, indented, selectionColor, type }) => {
   return {
-    backgroundColor,
-    border: `1px solid`,
-    borderColor:
-      variant === 'error'
-        ? theme.palette.error.main
-        : variant === 'selected'
-          ? selectionColor === 'primary'
-            ? theme.palette.primary.main
-            : alpha(theme.palette.secondary.main, 0.48)
-          : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: theme.shape.borderRadius,
-    overflow: 'hidden',
-    position: 'relative',
     padding: indented ? theme.spacing(2) : 0,
-    boxSizing: 'border-box',
-    '&:hover': {
-      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,
+    ...(type === 'selected' &&
+      selectionColor === 'primary' && {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? lighten(theme.palette.primary.main, 0.95)
+            : darken(theme.palette.primary.main, 0.65),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: theme.palette.primary.main,
+        '&:hover': {
+          backgroundColor:
+            theme.palette.mode === 'light'
+              ? lighten(theme.palette.primary.main, 0.9)
+              : darken(theme.palette.primary.main, 0.6),
+        },
+      }),
+    ...(type === 'selected' &&
+      selectionColor === 'secondary' && {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? lighten(theme.palette.secondary.main, 0.85)
+            : darken(theme.palette.secondary.main, 0.76),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: alpha(theme.palette.secondary.main, 0.2),
+        '&:hover': {
+          backgroundColor:
+            theme.palette.mode === 'light'
+              ? lighten(theme.palette.secondary.main, 0.8)
+              : darken(theme.palette.secondary.main, 0.72),
+        },
+      }),
+    ...(type === 'error' && {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.palette.error.main,
     }),
-    pointerEvents,
   };
 });

package/components/Card/CardButton.style.tsx

@@ -0,0 +1,35 @@
+import { Box, ButtonBase, Typography, styled } from '@mui/material';
+
+export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
+  background: 'none',
+  color: 'inherit',
+  border: 'none',
+  font: 'inherit',
+  cursor: 'pointer',
+  outline: 'inherit',
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  borderRadius: theme.shape.borderRadius,
+}));
+
+export const CardRowContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+}));
+
+export const CardValue = styled(Typography)({
+  lineHeight: '1.25',
+  fontWeight: 500,
+});
+
+export const CardTitleContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.5),
+}));

package/components/Card/CardButton.tsx

@@ -0,0 +1,26 @@
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js';
+import { Card } from './Card.js';
+import {
+  CardRowButton,
+  CardTitleContainer,
+  CardValue,
+} from './CardButton.style.js';
+
+interface SettingCardButtonProps extends SettingCardTitle {
+  onClick: MouseEventHandler;
+}
+
+export const CardButton: React.FC<
+  PropsWithChildren<SettingCardButtonProps>
+> = ({ onClick, icon, title, children }) => (
+  <Card>
+    <CardRowButton onClick={onClick} disableRipple>
+      <CardTitleContainer>
+        {icon}
+        <CardValue>{title}</CardValue>
+      </CardTitleContainer>
+      {children}
+    </CardRowButton>
+  </Card>
+);

package/components/Card/CardHeader.tsx

@@ -1,6 +1,8 @@
-import { CardHeader as MuiCardHeader } from '@mui/material';
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
+import {
+  CardHeader as MuiCardHeader,
+  cardHeaderClasses,
+  styled,
+} from '@mui/material';
 
 export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
   [`.${cardHeaderClasses.action}`]: {
@@ -8,14 +10,17 @@ export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
     alignSelf: 'center',
   },
   [`.${cardHeaderClasses.title}`]: {
-    fontWeight: '500',
-    fontSize: '1.125rem',
-    lineHeight: '1.2778',
+    fontWeight: 600,
+    fontSize: 18,
+    lineHeight: 1.3334,
     color: theme.palette.text.primary,
+    textAlign: 'left',
   },
   [`.${cardHeaderClasses.subheader}`]: {
-    fontWeight: '400',
-    fontSize: '0.75rem',
+    fontWeight: 500,
+    fontSize: 12,
+    lineHeight: 1.3334,
     color: theme.palette.text.secondary,
+    textAlign: 'left',
   },
 }));

package/components/Card/CardIconButton.tsx

@@ -1,16 +1,12 @@
-import { IconButton as MuiIconButton } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+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

@@ -1,39 +1,63 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, lighten, styled } from '@mui/material/styles';
+import {
+  Box,
+  Typography,
+  getContrastRatio,
+  lighten,
+  styled,
+} from '@mui/material';
+import { blend } from '../../utils/colors.js';
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => ({
-  backgroundColor:
+})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => {
+  const backgroundColor =
     type === 'active'
       ? theme.palette.mode === 'light'
         ? theme.palette.secondary.main
-        : alpha(theme.palette.secondary.main, 0.32)
+        : blend(
+            theme.palette.background.paper,
+            theme.palette.secondary.main,
+            0.8,
+          )
       : type?.includes('insurance')
-        ? alpha(
+        ? blend(
+            theme.palette.background.paper,
             theme.palette.success.main,
             theme.palette.mode === 'light' ? 0.12 : 0.24,
           )
         : theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.12)
-          : alpha(theme.palette.common.white, 0.16),
-  borderRadius: theme.shape.borderRadius,
-  color: type?.includes('insurance')
-    ? lighten(
-        theme.palette.success.main,
-        theme.palette.mode === 'light' ? 0 : 0.24,
-      )
-    : theme.palette.text.primary,
-  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),
-}));
+          ? blend(
+              theme.palette.background.paper,
+              theme.palette.common.black,
+              0.12,
+            )
+          : blend(
+              theme.palette.background.paper,
+              theme.palette.common.white,
+              0.16,
+            );
+  return {
+    backgroundColor,
+    borderRadius: theme.shape.borderRadius,
+    color: type?.includes('insurance')
+      ? lighten(
+          theme.palette.success.main,
+          theme.palette.mode === 'light' ? 0 : 0.24,
+        )
+      : getContrastRatio(theme.palette.common.white, backgroundColor) >= 3
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    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',
@@ -45,8 +69,4 @@ export const CardLabelTypography = styled(Typography, {
   fontSize: 12,
   lineHeight: 1,
   fontWeight: '600',
-  textTransform: 'lowercase',
-  '&::first-letter': {
-    textTransform: 'uppercase',
-  },
 }));

package/components/Card/CardTitle.tsx

@@ -1,14 +1,14 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Typography, styled } from '@mui/material';
 
 export const CardTitle = styled(Typography, {
   shouldForwardProp: (prop) => !['required'].includes(prop as string),
 })<{ required?: boolean }>(({ theme, required }) => ({
-  fontSize: '0.875rem',
-  lineHeight: '1.286',
-  letterSpacing: '0.01071em',
+  fontSize: 14,
+  lineHeight: 1,
   fontWeight: 700,
-  padding: theme.spacing(1.75, 2, 0, 2),
+  padding: theme.spacing(2, 2, 0, 2),
+  textAlign: 'left',
+  color: theme.palette.text.primary,
   '&:after': {
     content: required ? '" *"' : 'none',
     color: theme.palette.error.main,

package/components/Card/InputCard.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+import { Card } from './Card.js';
+
+export const InputCard = styled(Card, {
+  name: 'MuiInputCard',
+  slot: 'root',
+})({});

package/components/ChainSelect/ChainSelect.style.tsx

@@ -1,6 +1,5 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { Card } from '../../components/Card';
+import { Box, styled } from '@mui/material';
+import { Card } from '../../components/Card/Card.js';
 
 export const ChainCard = styled(Card)({
   display: 'grid',

package/components/ChainSelect/ChainSelect.tsx

@@ -2,14 +2,17 @@
 import type { EVMChain } from '@lifi/sdk';
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useEffect } from 'react';
-import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import type { FormTypeProps } from '../../providers';
-import { FormKeyHelper } from '../../providers';
-import { maxChainToOrder } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { ChainCard, ChainContainer } from './ChainSelect.style';
-import { useChainSelect } from './useChainSelect';
+import {
+  maxChainsToOrder,
+  maxChainsToShow,
+} from '../../stores/chains/createChainOrderStore.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { ChainCard, ChainContainer } from './ChainSelect.style.js';
+import { useChainSelect } from './useChainSelect.js';
 
 export const ChainSelect = ({ formType }: FormTypeProps) => {
   const navigate = useNavigate();
@@ -21,28 +24,37 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
     setChainOrder,
     setCurrentChain,
   } = useChainSelect(formType);
-  const [chainId] = useWatch({
-    name: [FormKeyHelper.getChainKey(formType)],
-  });
+
+  const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
 
   useEffect(() => {
-    const hasChainInOrderedList = chainOrder.includes(chainId);
-    // If we don't have a chain in the ordered chain list we should add it.
-    if (!hasChainInOrderedList) {
-      setChainOrder(chainId);
+    if (chainId) {
+      const hasChainInOrderedList = chainOrder.includes(chainId);
+      // If we don't have a chain in the ordered chain list we should add it.
+      if (!hasChainInOrderedList) {
+        setChainOrder(chainId, formType);
+      }
     }
-  }, [chainId, chainOrder, setChainOrder]);
+  }, [chainId, chainOrder, formType, setChainOrder]);
 
   const showAllChains = () => {
     navigate(navigationRoutes[`${formType}Chain`]);
   };
 
-  const chainsToHide = (chains?.length ?? 0) - maxChainToOrder;
+  // We check if we can accommodate all the chains on the grid
+  // If there are more than 10 chains we show the number of hidden chains as the last one tile
+  const chainsToHide =
+    chains?.length === maxChainsToShow
+      ? 0
+      : (chains?.length ?? 0) - maxChainsToOrder;
+
+  // When there is less than 10 chains we don't care about the order
+  const chainsToShow = chainsToHide > 0 ? getChains() : chains;
 
   return (
     <ChainContainer>
       {isLoading
-        ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (
+        ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
             <Skeleton
               key={index}
               variant="rectangular"
@@ -51,17 +63,21 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
               sx={{ borderRadius: 1 }}
             />
           ))
-        : getChains().map((chain: EVMChain) => (
+        : chainsToShow?.map((chain: EVMChain) => (
             <Tooltip
               key={chain.id}
               title={chain.name}
               placement="top"
               enterDelay={400}
+              enterNextDelay={100}
+              disableInteractive
               arrow
             >
               <ChainCard
+                component="button"
                 onClick={() => setCurrentChain(chain.id)}
-                variant={chainId === chain.id ? 'selected' : 'default'}
+                type={chainId === chain.id ? 'selected' : 'default'}
+                selectionColor="primary"
               >
                 <Avatar
                   src={chain.logoURI}
@@ -74,7 +90,7 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
             </Tooltip>
           ))}
       {chainsToHide > 0 ? (
-        <ChainCard onClick={showAllChains}>
+        <ChainCard component="button" onClick={showAllChains}>
           <Box
             sx={{
               width: 40,

package/components/ChainSelect/useChainSelect.ts

@@ -1,21 +1,22 @@
 import type { EVMChain } from '@lifi/sdk';
-import { useController, useFormContext } from 'react-hook-form';
-import { useChains, useSwapOnly } from '../../hooks';
-import type { FormType } from '../../providers';
-import { FormKey, FormKeyHelper, useWidgetConfig } from '../../providers';
-import { useChainOrder } from '../../stores';
-import { RequiredUI } from '../../types';
+import { useChains } from '../../hooks/useChains.js';
+import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import { useToAddressReset } from '../../hooks/useToAddressReset.js';
+import { useChainOrder } from '../../stores/chains/useChainOrder.js';
+import type { FormType } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
 
 export const useChainSelect = (formType: FormType) => {
-  const { requiredUI } = useWidgetConfig();
   const chainKey = FormKeyHelper.getChainKey(formType);
-  const {
-    field: { onChange, onBlur },
-  } = useController({ name: chainKey });
-  const { setValue, getValues } = useFormContext();
-  const { chains, isLoading, getChainById } = useChains();
-  const [chainOrder, setChainOrder] = useChainOrder();
+  const { onChange } = useFieldController({ name: chainKey });
+
+  const { setFieldValue, getFieldValues } = useFieldActions();
+  const { chains, isLoading, getChainById } = useChains(formType);
+  const [chainOrder, setChainOrder] = useChainOrder(formType);
   const swapOnly = useSwapOnly();
+  const { tryResetToAddress } = useToAddressReset();
 
   const getChains = () => {
     if (!chains) {
@@ -24,46 +25,26 @@ export const useChainSelect = (formType: FormType) => {
     const selectedChains = chainOrder
       .map((chainId) => chains.find((chain) => chain.id === chainId))
       .filter(Boolean) as EVMChain[];
-
     return selectedChains;
   };
 
   const setCurrentChain = (chainId: number) => {
     onChange(chainId);
-    onBlur();
     if (swapOnly) {
-      setValue(FormKeyHelper.getChainKey('to'), chainId, {
-        shouldTouch: true,
+      setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+        isTouched: true,
       });
     }
-    setValue(FormKeyHelper.getTokenKey(formType), '');
-    setValue(FormKeyHelper.getAmountKey(formType), '');
-    setValue(FormKey.TokenSearchFilter, '');
-
-    const [fromChainId, toChainId] = getValues([
-      FormKey.FromChain,
-      FormKey.ToChain,
-    ]);
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '');
+    setFieldValue(FormKeyHelper.getAmountKey(formType), '');
+    setFieldValue('tokenSearchFilter', '');
 
-    const fromChain = getChainById(fromChainId);
+    const [toChainId] = getFieldValues('toChain');
     const toChain = getChainById(toChainId);
-
-    const differentChainType =
-      fromChain && toChain && fromChain.chainType !== toChain.chainType;
-
-    const requiredToAddress =
-      requiredUI?.includes(RequiredUI.ToAddress) || differentChainType;
-
-    // toAddress field is required (always visible) when bridging between
-    // two ecosystems (fromChain and toChain have different chain types).
-    // We clean up toAddress on every chain change if toAddress is not required.
-    // This is used when we switch between different chain ecosystems (chain types) and
-    // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
-    // but it keeps toAddress value set for the previous chain pair.
-    if (!requiredToAddress) {
-      setValue(FormKey.ToAddress, '');
+    if (toChain) {
+      tryResetToAddress(toChain);
     }
-    setChainOrder(chainId);
+    setChainOrder(chainId, formType);
   };
 
   return {

package/components/ContractComponent/ContractComponent.tsx

@@ -1,8 +1,8 @@
-import type { BoxProps } from '@mui/material';
+import type { CardProps } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { Card } from '../Card';
+import { Card } from '../Card/Card.js';
 
-export const ContractComponent: React.FC<PropsWithChildren<BoxProps>> = ({
+export const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({
   children,
   ...props
 }) => {

package/components/ContractComponent/ItemPrice.tsx

@@ -0,0 +1,33 @@
+import type { ContractCall } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import type { TokenAmount } from '../../types/token.js';
+import { Token } from '../Token/Token.js';
+
+export interface ItemPriceProps {
+  token: TokenAmount;
+  contractCalls?: ContractCall[];
+}
+
+export const ItemPrice: React.FC<ItemPriceProps> = ({
+  token,
+  contractCalls,
+}) => {
+  const { setFieldValue } = useFieldActions();
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true });
+      setFieldValue('toToken', token.address, { isTouched: true });
+      setFieldValue('toAmount', token.amount?.toString(), {
+        isTouched: true,
+      });
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      });
+    }
+  }, [contractCalls, setFieldValue, token]);
+  return <Token token={token} p={2} />;
+};

package/components/ContractComponent/NFT/NFT.style.ts

@@ -0,0 +1,8 @@
+import { Avatar, styled } from '@mui/material';
+
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 96,
+  height: 96,
+  borderRadius: theme.shape.borderRadius,
+}));