@lifi/widget 4.0.0-beta.9 → 4.0.0

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,6 +1,6 @@
 import { formatUnits } from '@lifi/sdk'
-import { InputAdornment } from '@mui/material'
-import { memo } from 'react'
+import type React from 'react'
+import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
@@ -9,84 +9,88 @@ 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 { ButtonContainer, MaxButton } from './AmountInputAdornment.style.js'
+import {
+  AmountInputButton,
+  ButtonContainer,
+} from './AmountInputEndAdornment.style.js'
 
-export const AmountInputEndAdornment = memo(({ formType }: FormTypeProps) => {
-  const { t } = useTranslation()
-  const { getChainById } = useAvailableChains()
-  const { setFieldValue } = useFieldActions()
+export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =
+  memo(({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const { getChainById } = useAvailableChains()
+    const { setFieldValue } = useFieldActions()
 
-  const [chainId, tokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    FormKeyHelper.getTokenKey(formType)
-  )
+    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)
+    // 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 } = useTokenAddressBalance(chainId, tokenAddress)
+    const { token } = useTokenAddressBalance(chainId, tokenAddress)
 
-  const getMaxAmount = () => {
-    if (!token?.amount) {
-      return 0n
+    const getMaxAmount = () => {
+      if (!token?.amount) {
+        return 0n
+      }
+      const chain = getChainById(chainId)
+      let maxAmount = token.amount
+      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+        const recommendedAmount = BigInt(data.recommended.amount)
+        if (token.amount > recommendedAmount) {
+          maxAmount = token.amount - recommendedAmount
+        }
+      }
+      return maxAmount
     }
-    const chain = getChainById(chainId)
-    let maxAmount = token.amount
-    if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
-      const recommendedAmount = BigInt(data.recommended.amount)
-      if (token.amount > recommendedAmount) {
-        maxAmount = token.amount - recommendedAmount
+
+    const handlePercentage = (percentage: number) => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
+        setFieldValue(
+          FormKeyHelper.getAmountKey(formType),
+          formatUnits(percentageAmount, token.decimals),
+          {
+            isTouched: true,
+          }
+        )
       }
     }
-    return maxAmount
-  }
 
-  const handlePercentage = (percentage: number) => {
-    const maxAmount = getMaxAmount()
-    if (maxAmount && token?.decimals) {
-      const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
-      setFieldValue(
-        FormKeyHelper.getAmountKey(formType),
-        formatUnits(percentageAmount, token.decimals),
-        {
-          isTouched: true,
-        }
-      )
+    const handleMax = () => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        setFieldValue(
+          FormKeyHelper.getAmountKey(formType),
+          formatUnits(maxAmount, token.decimals),
+          {
+            isTouched: true,
+          }
+        )
+      }
     }
-  }
 
-  const handleMax = () => {
-    const maxAmount = getMaxAmount()
-    if (maxAmount && token?.decimals) {
-      setFieldValue(
-        FormKeyHelper.getAmountKey(formType),
-        formatUnits(maxAmount, token.decimals),
-        {
-          isTouched: true,
-        }
-      )
+    if (formType !== 'from' || !token) {
+      return null
     }
-  }
 
-  return (
-    <InputAdornment position="end" sx={{ paddingTop: 2 }}>
-      {formType === 'from' && token?.amount ? (
-        <ButtonContainer>
-          <MaxButton onClick={() => handlePercentage(25)} data-delay="0">
-            25%
-          </MaxButton>
-          <MaxButton onClick={() => handlePercentage(50)} data-delay="1">
-            50%
-          </MaxButton>
-          <MaxButton onClick={() => handlePercentage(75)} data-delay="2">
-            75%
-          </MaxButton>
-          <MaxButton onClick={handleMax} data-delay="3">
-            {t('button.max')}
-          </MaxButton>
-        </ButtonContainer>
-      ) : null}
-    </InputAdornment>
-  )
-})
+    return (
+      <ButtonContainer>
+        <AmountInputButton onClick={() => handlePercentage(25)}>
+          25%
+        </AmountInputButton>
+        <AmountInputButton onClick={() => handlePercentage(50)}>
+          50%
+        </AmountInputButton>
+        <AmountInputButton onClick={() => handlePercentage(75)}>
+          75%
+        </AmountInputButton>
+        <AmountInputButton onClick={handleMax}>
+          {t('button.max')}
+        </AmountInputButton>
+      </ButtonContainer>
+    )
+  })

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

@@ -1,32 +1,34 @@
 import { Button, styled } from '@mui/material'
+import type React from 'react'
 
-export const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
-  color: theme.vars.palette.text.secondary,
-  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
-  maxHeight: 16,
-  fontSize: '0.75rem',
-  fontWeight: 500,
-  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
-  backgroundColor: 'transparent',
-  minWidth: 32,
-  ...(onClick
-    ? {
-        '&:hover': {
-          backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: 'transparent',
+export const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =
+  styled(Button)(({ theme, onClick }) => ({
+    color: theme.vars.palette.text.secondary,
+    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+    maxHeight: 16,
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+    backgroundColor: 'transparent',
+    minWidth: 32,
+    ...(onClick
+      ? {
           '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
           },
+          ...theme.applyStyles('dark', {
+            backgroundColor: 'transparent',
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+            },
+          }),
+        }
+      : {
+          cursor: 'text',
+          userSelect: 'text',
+          pointerEvents: 'none',
+          ...theme.applyStyles('dark', {
+            backgroundColor: 'transparent',
+          }),
         }),
-      }
-    : {
-        cursor: 'text',
-        userSelect: 'text',
-        pointerEvents: 'none',
-        ...theme.applyStyles('dark', {
-          backgroundColor: 'transparent',
-        }),
-      }),
-}))
+  }))

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -1,6 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk'
 import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import type React from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
@@ -11,22 +12,23 @@ import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { InputPriceButton } from './PriceFormHelperText.style.js'
 
-export const PriceFormHelperText = memo<FormTypeProps>(({ formType }) => {
-  const [chainId, tokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    FormKeyHelper.getTokenKey(formType)
-  )
-  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+export const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =
+  memo<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}
-    />
-  )
-})
+    return (
+      <PriceFormHelperTextBase
+        formType={formType}
+        isLoading={isLoading}
+        tokenAddress={tokenAddress}
+        token={token}
+      />
+    )
+  })
 
 const PriceFormHelperTextBase: React.FC<
   FormTypeProps & {

package/src/components/AppContainer.tsx

@@ -1,6 +1,7 @@
+import type { BoxProps, ContainerProps } from '@mui/material'
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'
+import type React from 'react'
 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'
@@ -15,36 +16,31 @@ import { getWidgetMaxHeight } from '../utils/widgetSize.js'
 //    - 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 }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'start',
-  flex: 1,
-  height:
-    theme.container?.display === 'flex'
-      ? '100%'
-      : theme.container?.maxHeight
-        ? 'auto'
-        : theme.container?.height || 'auto',
-  variants: [
-    {
-      props: {
-        variant: 'drawer',
-      },
-      style: {
-        height: 'none',
-      },
-    },
-  ],
-}))
+export const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(
+  ({ theme }) => {
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'start',
+      flex: 1,
+      height:
+        theme.container?.display === 'flex'
+          ? '100%'
+          : theme.container?.maxHeight
+            ? 'auto'
+            : theme.container?.height || 'auto',
+    }
+  }
+)
 
-export const RelativeContainer = styled(Box, {
+export const RelativeContainer: React.FC<
+  BoxProps & { variant?: WidgetVariant }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -89,7 +85,8 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
 })<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -106,13 +103,6 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     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?.height ||
-        defaultMaxHeight,
-    },
     '&:has(.long-list)': {
       minHeight: getWidgetMaxHeight(theme),
       maxHeight: getWidgetMaxHeight(theme),
@@ -120,7 +110,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
   }
 })
 
-export const FlexContainer = styled(Container)({
+export const FlexContainer: React.FC<ContainerProps> = styled(Container)({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,

package/src/components/Avatar/AccountAvatar.tsx

@@ -2,6 +2,7 @@ import { getConnectorIcon } from '@lifi/wallet-management'
 import type { Account } from '@lifi/widget-provider'
 import Wallet from '@mui/icons-material/Wallet'
 import { Badge } from '@mui/material'
+import type { JSX } from 'react'
 import { useChain } from '../../hooks/useChain.js'
 import type { ToAddress } from '../../types/widget.js'
 import { AvatarDefault, AvatarMasked } from './Avatar.style.js'
@@ -19,7 +20,7 @@ export const AccountAvatar = ({
   account,
   empty,
   toAddress,
-}: AccountAvatarProps) => {
+}: AccountAvatarProps): JSX.Element => {
   const { chain } = useChain(chainId)
 
   const avatar = empty ? (

package/src/components/Avatar/Avatar.style.tsx

@@ -7,9 +7,15 @@ import {
   Avatar as MuiAvatar,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import { getAvatarMask } from './utils.js'
 
-export const AvatarMasked = styled(MuiAvatar, {
+export const AvatarMasked: React.FC<
+  React.ComponentProps<typeof MuiAvatar> & {
+    avatarSize?: number
+    badgeSize?: number
+  }
+> = styled(MuiAvatar, {
   shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
 })<{ avatarSize?: number; badgeSize?: number }>(
   ({ avatarSize = 40, badgeSize = 16 }) => ({
@@ -19,7 +25,9 @@ export const AvatarMasked = styled(MuiAvatar, {
   })
 )
 
-export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
+export const TokenAvatarGroup: React.FC<
+  React.ComponentProps<typeof AvatarGroup> & { badgeSize?: number }
+> = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {
     boxSizing: 'border-box',
   },
@@ -36,7 +44,9 @@ export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   },
 }))
 
-export const AvatarDefault = styled(Box, {
+export const AvatarDefault: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'badgeSize',
 })<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => {
   const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject
@@ -56,7 +66,9 @@ export const AvatarDefault = styled(Box, {
   }
 })
 
-export const AvatarDefaultBadge = styled(Box, {
+export const AvatarDefaultBadge: React.FC<
+  React.ComponentProps<typeof Box> & { size?: number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'size',
 })<{ size?: number }>(({ theme, size = 16 }) => {
   return {
@@ -70,12 +82,16 @@ export const AvatarDefaultBadge = styled(Box, {
   }
 })
 
-export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+export const AvatarSkeletonContainer: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box)(({ theme }) => ({
   background: theme.vars.palette.background.paper,
   borderRadius: '50%',
 }))
 
-export const AvatarSkeletonMaskedContainer = styled(Box, {
+export const AvatarSkeletonMaskedContainer: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'badgeSize',
 })<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => ({
   background: theme.vars.palette.background.paper,

package/src/components/Avatar/SmallAvatar.tsx

@@ -1,11 +1,14 @@
 import { Avatar, Skeleton, styled } from '@mui/material'
+import type React from 'react'
 import { AvatarSkeletonContainer } from './Avatar.style.js'
 
 interface SmallAvatarProps {
   size?: number
 }
 
-export const SmallAvatar = styled(Avatar, {
+export const SmallAvatar: React.FC<
+  React.ComponentProps<typeof Avatar> & SmallAvatarProps
+> = styled(Avatar, {
   shouldForwardProp: (prop) => prop !== 'size',
 })<SmallAvatarProps>(({ theme, size = 16 }) => ({
   background: theme.vars.palette.background.paper,

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -13,6 +13,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   disabled,
   loading,
   route,
+  sx,
 }) => {
   const { t } = useTranslation()
   const { walletConfig } = useWidgetConfig()
@@ -62,6 +63,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       loading={loading}
       loadingPosition="center"
       fullWidth
+      sx={sx}
     >
       {getButtonText()}
     </Button>

package/src/components/BaseTransactionButton/types.ts

@@ -1,4 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
+import type { SxProps, Theme } from '@mui/material'
 
 export interface BaseTransactionButtonProps {
   onClick?(): void
@@ -6,4 +7,5 @@ export interface BaseTransactionButtonProps {
   disabled?: boolean
   loading?: boolean
   route?: RouteExtended
+  sx?: SxProps<Theme>
 }

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,4 +1,5 @@
 import { Drawer } from '@mui/material'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 import {
   forwardRef,
   startTransition,
@@ -8,10 +9,12 @@ import {
   useState,
 } from 'react'
 import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
-import { modalProps, slotProps } from '../Dialog.js'
+import { modalProps, slotProps } from '../Dialog/Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
-export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
+export const BottomSheet: ForwardRefExoticComponent<
+  Omit<BottomSheetProps, 'ref'> & RefAttributes<BottomSheetBase>
+> = forwardRef<BottomSheetBase, BottomSheetProps>(
   ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
     const getContainer = useGetScrollableContainer()
     const openRef = useRef(open)

package/src/components/ButtonTertiary.tsx

@@ -1,27 +1,29 @@
 import { Button, buttonClasses, styled } from '@mui/material'
+import type React from 'react'
 
-export const ButtonTertiary = styled(Button)(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  height: 40,
-  fontSize: 14,
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  '&:hover, &:active': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-  },
-  [`&.${buttonClasses.loading}:disabled`]: {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  },
-  ...theme.applyStyles('dark', {
+export const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =
+  styled(Button)(({ theme }) => ({
     color: theme.vars.palette.text.primary,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    height: 40,
+    fontSize: 14,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     '&:hover, &:active': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     },
     [`&.${buttonClasses.loading}:disabled`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
-  }),
-  [`.${buttonClasses.loadingIndicator}`]: {
-    color: theme.vars.palette.text.primary,
-  },
-}))
+    ...theme.applyStyles('dark', {
+      color: theme.vars.palette.text.primary,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      '&:hover, &:active': {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+      },
+      [`&.${buttonClasses.loading}:disabled`]: {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      },
+    }),
+    [`.${buttonClasses.loadingIndicator}`]: {
+      color: theme.vars.palette.text.primary,
+    },
+  }))