@lifi/widget 3.7.0-beta.0 → 3.7.0-beta.10

package/src/components/ActiveTransactions/ActiveTransactions.tsx

@@ -0,0 +1,42 @@
+import type { CardProps } from '@mui/material'
+import { Stack } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { Card } from '../Card/Card.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { ActiveTransactionItem } from './ActiveTransactionItem.js'
+import { ShowAllButton } from './ActiveTransactions.style.js'
+
+export const ActiveTransactions: React.FC<CardProps> = (props) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const executingRoutes = useExecutingRoutesIds()
+
+  if (!executingRoutes?.length) {
+    return null
+  }
+
+  const handleShowAll = () => {
+    navigate(navigationRoutes.activeTransactions)
+  }
+
+  const hasShowAll = executingRoutes?.length > 2
+
+  return (
+    <Card type="selected" selectionColor="secondary" {...props}>
+      <CardTitle>{t('header.activeTransactions')}</CardTitle>
+      <Stack spacing={1.5} pt={1.5} pb={hasShowAll ? 0 : 2}>
+        {executingRoutes.slice(0, 2).map((routeId) => (
+          <ActiveTransactionItem key={routeId} routeId={routeId} dense />
+        ))}
+      </Stack>
+      {hasShowAll ? (
+        <ShowAllButton disableRipple fullWidth onClick={handleShowAll}>
+          {t('button.showAll')}
+        </ShowAllButton>
+      ) : null}
+    </Card>
+  )
+}

package/src/components/AlertMessage/AlertMessage.style.tsx

@@ -0,0 +1,42 @@
+import { Box, alpha, darken, lighten, styled } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
+import type { Severity } from './types.js'
+
+interface AlertSeverityProps {
+  severity: Severity
+}
+
+export const AlertMessageCard = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme, severity }) => ({
+  borderRadius: theme.shape.borderRadius,
+  position: 'relative',
+  whiteSpace: 'pre-line',
+  width: '100%',
+  paddingBottom: theme.spacing(2),
+  backgroundColor:
+    severity === 'warning'
+      ? getWarningBackgroundColor(theme)
+      : getInfoBackgroundColor(theme),
+}))
+
+export const AlertMessageCardTitle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme, severity }) => ({
+  display: 'flex',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  gap: theme.spacing(1),
+  color:
+    severity === 'warning'
+      ? theme.palette.mode === 'light'
+        ? darken(theme.palette.warning.main, 0.36)
+        : alpha(theme.palette.warning.main, 1)
+      : theme.palette.mode === 'light'
+        ? theme.palette.info.main
+        : lighten(theme.palette.info.main, 0.24),
+}))

package/src/components/AlertMessage/AlertMessage.tsx

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@mui/material'
+import type { PropsWithChildren, ReactNode } from 'react'
+import {
+  AlertMessageCard,
+  AlertMessageCardTitle,
+} from './AlertMessage.style.js'
+import type { Severity } from './types.js'
+
+interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
+  icon: ReactNode
+  title: ReactNode
+  multilineTitle?: boolean
+  severity?: Severity
+}
+
+export const AlertMessage = ({
+  title,
+  icon,
+  children,
+  multilineTitle,
+  severity = 'info',
+  ...rest
+}: AlertMessageProps) => (
+  <AlertMessageCard severity={severity} {...rest}>
+    <AlertMessageCardTitle
+      severity={severity}
+      alignItems={multilineTitle ? 'start' : 'center'}
+    >
+      {icon}
+      {title}
+    </AlertMessageCardTitle>
+    {children}
+  </AlertMessageCard>
+)

package/src/components/AlertMessage/types.ts

@@ -0,0 +1 @@
+export type Severity = 'info' | 'warning'

package/src/components/AmountInput/AmountInput.style.tsx

@@ -0,0 +1,45 @@
+import {
+  Box,
+  InputBase,
+  FormControl as MuiFormControl,
+  inputBaseClasses,
+  styled,
+} from '@mui/material'
+
+export const maxInputFontSize = 24
+export const minInputFontSize = 14
+
+export const FormContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+}))
+
+export const FormControl = styled(MuiFormControl)(() => ({
+  height: 40,
+}))
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  fontSize: 24,
+  fontWeight: 700,
+  boxShadow: 'none',
+  lineHeight: 1.5,
+  [`.${inputBaseClasses.input}`]: {
+    height: 24,
+    padding: theme.spacing(0, 0, 0, 2),
+  },
+  '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
+    {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  '& input[type="number"]': {
+    MozAppearance: 'textfield',
+  },
+  [`&.${inputBaseClasses.disabled}`]: {
+    color: 'inherit',
+  },
+  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+    WebkitTextFillColor: 'unset',
+  },
+}))

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,129 @@
+import type { Token } from '@lifi/sdk'
+import type { CardProps } from '@mui/material'
+import type { ChangeEvent, ReactNode } from 'react'
+import { useLayoutEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'
+import { useFieldController } from '../../stores/form/useFieldController.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { DisabledUI } from '../../types/widget.js'
+import { formatInputAmount } from '../../utils/format.js'
+import { fitInputText } from '../../utils/input.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { InputCard } from '../Card/InputCard.js'
+import {
+  FormContainer,
+  FormControl,
+  Input,
+  maxInputFontSize,
+  minInputFontSize,
+} from './AmountInput.style.js'
+import { AmountInputEndAdornment } from './AmountInputEndAdornment.js'
+import { AmountInputStartAdornment } from './AmountInputStartAdornment.js'
+import { PriceFormHelperText } from './PriceFormHelperText.js'
+
+export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
+  formType,
+  ...props
+}) => {
+  const { disabledUI } = useWidgetConfig()
+
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  const { token } = useToken(chainId, tokenAddress)
+  const disabled = disabledUI?.includes(DisabledUI.FromAmount)
+  return (
+    <AmountInputBase
+      formType={formType}
+      token={token}
+      endAdornment={
+        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
+      }
+      bottomAdornment={<PriceFormHelperText formType={formType} />}
+      disabled={disabled}
+      {...props}
+    />
+  )
+}
+
+export const AmountInputBase: React.FC<
+  FormTypeProps &
+    CardProps & {
+      token?: Token
+      startAdornment?: ReactNode
+      endAdornment?: ReactNode
+      bottomAdornment?: ReactNode
+      disabled?: boolean
+    }
+> = ({
+  formType,
+  token,
+  startAdornment,
+  endAdornment,
+  bottomAdornment,
+  disabled,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  const ref = useRef<HTMLInputElement>(null)
+  const amountKey = FormKeyHelper.getAmountKey(formType)
+  const { onChange, onBlur, value } = useFieldController({ name: amountKey })
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value } = event.target
+    const formattedAmount = formatInputAmount(value, token?.decimals, true)
+    onChange(formattedAmount)
+  }
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value } = event.target
+    const formattedAmount = formatInputAmount(value, token?.decimals)
+    onChange(formattedAmount)
+    onBlur()
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to run effect on value change
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current)
+    }
+  }, [value])
+
+  return (
+    <InputCard {...props}>
+      <CardTitle>{t('header.send')}</CardTitle>
+      <FormContainer>
+        <AmountInputStartAdornment formType={formType} />
+        <FormControl fullWidth>
+          <Input
+            inputRef={ref}
+            size="small"
+            autoComplete="off"
+            placeholder="0"
+            startAdornment={startAdornment}
+            endAdornment={endAdornment}
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={value}
+            name={amountKey}
+            disabled={disabled}
+            required
+          />
+          {bottomAdornment}
+        </FormControl>
+      </FormContainer>
+    </InputCard>
+  )
+}

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -0,0 +1,14 @@
+import { Button as MuiButton, Skeleton, styled } from '@mui/material'
+
+export const MaxButton = styled(MuiButton)(({ theme }) => ({
+  padding: theme.spacing(0.5, 1, 0.625, 1),
+  lineHeight: 1.0715,
+  fontSize: '0.875rem',
+  minWidth: 'unset',
+}))
+
+export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
+  width: 46,
+  height: 24,
+  borderRadius: theme.shape.borderRadiusSecondary,
+}))

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -0,0 +1,61 @@
+import { InputAdornment } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style.js'
+
+export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  const { setFieldValue } = useFieldActions()
+
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  // We get gas recommendations for the source chain to make sure that after pressing the Max button
+  // the user will have enough funds remaining to cover gas costs
+  const { data } = useGasRecommendation(chainId)
+
+  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+  const handleMax = () => {
+    if (!token?.amount) {
+      return
+    }
+    const chain = getChainById(chainId)
+    let maxAmount = token.amount
+    if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+      const recommendedAmount = BigInt(data.recommended.amount) / 2n
+      if (token.amount > recommendedAmount) {
+        maxAmount = token.amount - recommendedAmount
+      }
+    }
+    if (maxAmount) {
+      setFieldValue(
+        FormKeyHelper.getAmountKey(formType),
+        formatUnits(maxAmount, token.decimals),
+        {
+          isTouched: true,
+        }
+      )
+    }
+  }
+
+  return (
+    <InputAdornment position="end">
+      {isLoading && tokenAddress ? (
+        <MaxButtonSkeleton variant="rectangular" />
+      ) : formType === 'from' && token?.amount ? (
+        <MaxButton onClick={handleMax}>{t('button.max')}</MaxButton>
+      ) : null}
+    </InputAdornment>
+  )
+}

package/src/components/AmountInput/AmountInputStartAdornment.tsx

@@ -0,0 +1,26 @@
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { AvatarBadgedDefault } from '../Avatar/Avatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+
+export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  const { chain } = useChain(chainId)
+  const { token } = useToken(chainId, tokenAddress)
+  const isSelected = !!(chain && token)
+
+  return isSelected ? (
+    <TokenAvatar token={token} chain={chain} />
+  ) : (
+    <AvatarBadgedDefault />
+  )
+}

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -0,0 +1,82 @@
+import type { TokenAmount } from '@lifi/sdk'
+import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+
+export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+  return (
+    <PriceFormHelperTextBase
+      formType={formType}
+      isLoading={isLoading}
+      tokenAddress={tokenAddress}
+      token={token}
+    />
+  )
+}
+
+export const PriceFormHelperTextBase: React.FC<
+  FormTypeProps & {
+    isLoading?: boolean
+    tokenAddress?: string
+    token?: TokenAmount
+  }
+> = ({ formType, isLoading, tokenAddress, token }) => {
+  const { t } = useTranslation()
+  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
+
+  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD)
+
+  return (
+    <FormHelperText
+      component="div"
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: 0,
+        marginLeft: 2,
+        marginTop: 0.75,
+      }}
+    >
+      <Typography
+        color="text.secondary"
+        fontWeight={500}
+        fontSize={12}
+        lineHeight={1}
+        flex={1}
+        sx={{
+          wordBreak: 'break-word',
+          overflowWrap: 'break-word',
+        }}
+      >
+        {t('format.currency', {
+          value: fromAmountTokenPrice,
+        })}
+      </Typography>
+      {isLoading && tokenAddress ? (
+        <Skeleton variant="text" width={48} height={12} />
+      ) : token?.amount ? (
+        <Typography
+          fontWeight={500}
+          fontSize={12}
+          color="text.secondary"
+          lineHeight={1}
+          pl={0.25}
+        >
+          {`/ ${t('format.number', {
+            value: formatTokenAmount(token.amount, token.decimals),
+          })}`}
+        </Typography>
+      ) : null}
+    </FormHelperText>
+  )
+}

package/src/components/AppContainer.tsx

@@ -0,0 +1,139 @@
+import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { defaultMaxHeight } from '../config/constants.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useHeaderHeight } from '../stores/header/useHeaderStore.js'
+import type { WidgetVariant } from '../types/widget.js'
+import { ElementId, createElementId } from '../utils/elements.js'
+
+// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
+//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
+//  A Number of other components and hooks work with height values that are often set on or derived from these elements
+//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
+//    - useTokenListHeight
+//    - useSetContentHeight
+//  Also check any code that is using the methods from elements.ts utils file
+
+export const AppExpandedContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'start',
+  flex: 1,
+  height:
+    variant === 'drawer'
+      ? 'none'
+      : theme.container?.display === 'flex'
+        ? '100%'
+        : theme.container?.maxHeight
+          ? 'auto'
+          : theme.container?.height || 'auto',
+}))
+
+export const RelativeContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => {
+  const container = { ...theme.container }
+
+  if (variant === 'drawer') {
+    container.height = '100%'
+  }
+
+  return {
+    position: 'relative',
+    boxSizing: 'content-box',
+    width: '100%',
+    minWidth: theme.breakpoints.values.xs,
+    maxWidth: theme.breakpoints.values.sm,
+    background: theme.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    zIndex: 0,
+    ...container,
+    maxHeight:
+      variant === 'drawer'
+        ? 'none'
+        : theme.container?.display === 'flex' && !theme.container?.height
+          ? '100%'
+          : theme.container?.maxHeight
+            ? theme.container?.maxHeight
+            : theme.container?.height || defaultMaxHeight,
+  }
+})
+
+interface CssBaselineContainerProps {
+  variant?: WidgetVariant
+  paddingTopAdjustment: number
+  elementId: string
+}
+
+const CssBaselineContainer = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) =>
+    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
+})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  overflowX: 'clip',
+  margin: 0,
+  width: '100%',
+  maxHeight:
+    variant === 'drawer' || theme.container?.display === 'flex'
+      ? 'none'
+      : theme.container?.maxHeight
+        ? theme.container?.maxHeight
+        : theme.container?.height || defaultMaxHeight,
+  overflowY: 'auto',
+  height: theme.container?.display === 'flex' ? 'auto' : '100%',
+  paddingTop: paddingTopAdjustment,
+  // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
+  '&:has(.full-page-container)': {
+    height: theme.container?.maxHeight
+      ? theme.container?.maxHeight
+      : theme.container?.height || defaultMaxHeight,
+  },
+}))
+
+export const FlexContainer = styled(Container)({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+})
+
+export const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {
+  // const ref = useRef<HTMLDivElement>(null);
+  const { variant, elementId, theme } = useWidgetConfig()
+  const { headerHeight } = useHeaderHeight()
+  const positionFixedAdjustment =
+    theme?.header?.position === 'fixed' ? headerHeight : 0
+
+  return (
+    <RelativeContainer
+      variant={variant}
+      id={createElementId(ElementId.RelativeContainer, elementId)}
+    >
+      <CssBaselineContainer
+        id={createElementId(ElementId.ScrollableContainer, elementId)}
+        variant={variant}
+        enableColorScheme
+        paddingTopAdjustment={positionFixedAdjustment}
+        elementId={elementId}
+        // ref={ref}
+      >
+        <FlexContainer disableGutters>{children}</FlexContainer>
+      </CssBaselineContainer>
+      {/* <ScrollToLocation elementRef={ref} /> */}
+    </RelativeContainer>
+  )
+}
+
+// export const ScrollToLocation: React.FC<{
+//   elementRef: RefObject<HTMLElement>;
+// }> = ({ elementRef }) => {
+//   const { pathname } = useLocation();
+//   useLayoutEffect(() => {
+//     elementRef.current?.scrollTo(0, 0);
+//   }, [elementRef, pathname]);
+//   return null;
+// };

package/src/components/Avatar/AccountAvatar.tsx

@@ -0,0 +1,61 @@
+import type { Account } from '@lifi/wallet-management'
+import { getConnectorIcon } from '@lifi/wallet-management'
+import { Wallet } from '@mui/icons-material'
+import { Badge } from '@mui/material'
+import { useChain } from '../../hooks/useChain.js'
+import type { ToAddress } from '../../types/widget.js'
+import {
+  AvatarDefault,
+  AvatarDefaultBadge,
+  AvatarMasked,
+} from './Avatar.style.js'
+import { SmallAvatar } from './SmallAvatar.js'
+
+interface AccountAvatarProps {
+  chainId?: number
+  account?: Account
+  toAddress?: ToAddress
+  empty?: boolean
+}
+
+export const AccountAvatar = ({
+  chainId,
+  account,
+  empty,
+  toAddress,
+}: AccountAvatarProps) => {
+  const { chain } = useChain(chainId)
+
+  const avatar = empty ? (
+    <AvatarDefault />
+  ) : account?.connector || toAddress?.logoURI ? (
+    <AvatarMasked
+      src={toAddress?.logoURI || getConnectorIcon(account?.connector)}
+      alt={toAddress?.name || account?.connector?.name}
+    >
+      {(toAddress?.name || account?.connector?.name)?.[0]}
+    </AvatarMasked>
+  ) : (
+    <AvatarDefault>
+      <Wallet sx={{ fontSize: 20 }} />
+    </AvatarDefault>
+  )
+
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={
+        chain ? (
+          <SmallAvatar src={chain.logoURI} alt={chain.name}>
+            {chain.name[0]}
+          </SmallAvatar>
+        ) : (
+          <AvatarDefaultBadge />
+        )
+      }
+    >
+      {avatar}
+    </Badge>
+  )
+}