@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.6

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,5 +1,6 @@
 import type { Route } from '@lifi/sdk'
 import { useNavigate } from '@tanstack/react-router'
+import type React from 'react'
 import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -14,86 +15,88 @@ interface RoutesExpandedProps {
   setOpenExpansion: (open: boolean) => void
 }
 
-export const RoutesExpanded = memo(function RoutesExpanded({
-  canOpen,
-  setOpenExpansion,
-}: RoutesExpandedProps) {
-  const emitter = useWidgetEvents()
-  const navigate = useNavigate()
-  const routesRef = useRef<Route[]>(undefined)
-  const routesActiveRef = useRef(false)
+export const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =
+  memo(function RoutesExpanded({
+    canOpen,
+    setOpenExpansion,
+  }: RoutesExpandedProps) {
+    const emitter = useWidgetEvents()
+    const navigate = useNavigate()
+    const routesRef = useRef<Route[]>(undefined)
+    const routesActiveRef = useRef(false)
 
-  const {
-    routes,
-    isLoading,
-    isFetching,
-    isFetched,
-    dataUpdatedAt,
-    refetchTime,
-    fromChain,
-    refetch,
-    setReviewableRoute,
-  } = useRoutes()
+    const {
+      routes,
+      isLoading,
+      isFetching,
+      isFetched,
+      dataUpdatedAt,
+      refetchTime,
+      fromChain,
+      refetch,
+      setReviewableRoute,
+    } = useRoutes()
 
-  const onExit = useCallback(() => {
-    // Clean routes cache on exit
-    routesRef.current = undefined
-  }, [])
-
-  // We cache routes results in ref for a better exit animation
-  if (routesRef.current && !routes) {
-    routesActiveRef.current = false
-    // If we are loading routes with a new queryKey, we need to clear the cache
-    if (isLoading) {
+    const onExit = useCallback(() => {
+      // Clean routes cache on exit
       routesRef.current = undefined
+    }, [])
+
+    // We cache routes results in ref for a better exit animation
+    if (routesRef.current && !routes) {
+      routesActiveRef.current = false
+      // If we are loading routes with a new queryKey, we need to clear the cache
+      if (isLoading) {
+        routesRef.current = undefined
+      }
+    } else {
+      routesRef.current = routes
+      routesActiveRef.current = Boolean(routes)
     }
-  } else {
-    routesRef.current = routes
-    routesActiveRef.current = Boolean(routes)
-  }
 
-  const expanded =
-    Boolean(routesActiveRef.current || isLoading || isFetching || isFetched) &&
-    canOpen
+    const expanded =
+      Boolean(
+        routesActiveRef.current || isLoading || isFetching || isFetched
+      ) && canOpen
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent
-  const onRouteClick = useCallback(
-    (route: Route) => {
-      setReviewableRoute(route)
-      navigate({
-        to: navigationRoutes.transactionExecution,
-        search: { routeId: route.id },
-      })
-      emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
-    },
-    [emitter, routes, setReviewableRoute]
-  )
+    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent
+    const onRouteClick = useCallback(
+      (route: Route) => {
+        setReviewableRoute(route)
+        navigate({
+          to: navigationRoutes.transactionExecution,
+          search: { routeId: route.id },
+        })
+        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
+      },
+      [emitter, routes, setReviewableRoute]
+    )
 
-  // Use layout effect to update parent's width when expansion changes
-  useLayoutEffect(() => {
-    setOpenExpansion(expanded)
-  }, [expanded, setOpenExpansion])
+    // Use layout effect to update parent's width when expansion changes
+    useLayoutEffect(() => {
+      setOpenExpansion(expanded)
+    }, [expanded, setOpenExpansion])
 
-  useEffect(() => {
-    emitter.emit(WidgetEvent.WidgetExpanded, expanded)
-  }, [emitter, expanded])
+    useEffect(() => {
+      emitter.emit(WidgetEvent.WidgetExpanded, expanded)
+    }, [emitter, expanded])
 
-  return (
-    <ExpansionTransition
-      in={expanded}
-      width={routesExpansionWidth}
-      onExited={onExit}
-    >
-      <RoutesContent
-        routes={routesRef.current}
-        isFetching={isFetching}
-        isLoading={isLoading}
-        dataUpdatedAt={dataUpdatedAt}
-        refetchTime={refetchTime}
-        fromChain={fromChain}
-        refetch={refetch}
-        onRouteClick={onRouteClick}
-      />
-    </ExpansionTransition>
-  )
-})
+    return (
+      <ExpansionTransition
+        in={expanded}
+        width={routesExpansionWidth}
+        onExited={onExit}
+      >
+        <RoutesContent
+          routes={routesRef.current}
+          isFetching={isFetching}
+          isLoading={isLoading}
+          dataUpdatedAt={dataUpdatedAt}
+          refetchTime={refetchTime}
+          fromChain={fromChain}
+          refetch={refetch}
+          onRouteClick={onRouteClick}
+        />
+      </ExpansionTransition>
+    )
+  })

package/src/components/Search/SearchInput.style.tsx

@@ -6,13 +6,16 @@ import {
   styled,
   svgIconClasses,
 } from '@mui/material'
+import type React from 'react'
 import { Input as InputBase } from '../../components/Input.js'
 
 interface InputProps {
   size?: 'small' | 'medium'
 }
 
-export const Input = styled(InputBase, {
+export const Input: React.FC<
+  React.ComponentProps<typeof InputBase> & InputProps
+> = styled(InputBase, {
   shouldForwardProp: (prop) => prop !== 'size',
 })<InputProps>(({ theme, size = 'medium' }) => ({
   paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),
@@ -50,7 +53,9 @@ export const searchContainerHeight = 64
 // When the widget is in Full Height layout mode in order to appear "sticky the StickySearchInputContainer needs to use
 // position fixed in the same way as the header (see Header.tsx). The headerHeight value here is used as the top value
 // to ensure that this container positioned correctly beneath the header
-export const StickySearchInputContainer = styled(Box, {
+export const StickySearchInputContainer: React.FC<
+  React.ComponentProps<typeof Box> & SearchStickyContainerProps
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'headerHeight',
 })<SearchStickyContainerProps>(({ theme, headerHeight }) => ({
   position: 'sticky',
@@ -73,7 +78,9 @@ export const StickySearchInputContainer = styled(Box, {
 
 // When in Full Height layout mode, as the StickySearchInputContainer (see above) uses fixed position, the list element needs to provide
 // additional paddingTop in order to be positioned correctly.
-export const SearchList = styled(List)(({ theme }) => ({
+export const SearchList: React.FC<React.ComponentProps<typeof List>> = styled(
+  List
+)(({ theme }) => ({
   paddingTop:
     theme.header?.position === 'fixed' ? `${searchContainerHeight}px` : 0,
   paddingLeft: theme.spacing(1.5),

package/src/components/Search/SearchInput.tsx

@@ -1,7 +1,12 @@
 import ClearIcon from '@mui/icons-material/Clear'
 import Search from '@mui/icons-material/Search'
 import { FormControl, IconButton, InputAdornment } from '@mui/material'
-import type { ChangeEventHandler, FocusEventHandler, RefObject } from 'react'
+import type {
+  ChangeEventHandler,
+  FocusEventHandler,
+  JSX,
+  RefObject,
+} from 'react'
 import { InputCard } from '../../components/Card/InputCard.js'
 import { useHeaderHeight } from '../../stores/header/useHeaderStore.js'
 import { Input, StickySearchInputContainer } from './SearchInput.style.js'
@@ -28,7 +33,7 @@ export const SearchInput = ({
   value,
   autoFocus,
   size = 'medium',
-}: SearchInputProps) => {
+}: SearchInputProps): JSX.Element => {
   return (
     <InputCard>
       <FormControl fullWidth>
@@ -75,7 +80,7 @@ export const SearchInput = ({
   )
 }
 
-export const StickySearchInput = (props: SearchInputProps) => {
+export const StickySearchInput = (props: SearchInputProps): JSX.Element => {
   const { headerHeight } = useHeaderHeight()
 
   return (

package/src/components/Search/SearchNotFound.style.tsx

@@ -1,12 +1,15 @@
 import type { BoxProps } from '@mui/material'
 import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
 import { searchContainerHeight } from './SearchInput.style.js'
 
 interface NotFoundContainerProps extends BoxProps {
   adjustForStickySearchInput?: boolean
 }
 
-export const NotFoundContainer = styled(Box, {
+export const NotFoundContainer: React.FC<
+  React.ComponentProps<typeof Box> & NotFoundContainerProps
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'adjustForStickySearchInput',
 })<NotFoundContainerProps>(({ theme, adjustForStickySearchInput }) => ({
   display: 'flex',
@@ -20,7 +23,9 @@ export const NotFoundContainer = styled(Box, {
     : {}),
 }))
 
-export const NotFoundMessage = styled(Typography)(({ theme }) => ({
+export const NotFoundMessage: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
   fontSize: 14,
   whiteSpace: 'normal',
   color: theme.vars.palette.text.secondary,
@@ -31,7 +36,9 @@ export const NotFoundMessage = styled(Typography)(({ theme }) => ({
   paddingRight: theme.spacing(2),
 }))
 
-export const NotFoundIconContainer = styled(Typography)(() => ({
+export const NotFoundIconContainer: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(() => ({
   fontSize: 48,
   lineHeight: 1,
 }))

package/src/components/Search/SearchNotFound.tsx

@@ -1,4 +1,5 @@
 import SearchOff from '@mui/icons-material/SearchOff'
+import type { JSX } from 'react'
 import {
   NotFoundContainer,
   NotFoundIconContainer,
@@ -13,7 +14,7 @@ interface SearchNotFoundProps {
 export const SearchNotFound = ({
   message,
   adjustForStickySearchInput,
-}: SearchNotFoundProps) => (
+}: SearchNotFoundProps): JSX.Element => (
   <NotFoundContainer adjustForStickySearchInput={adjustForStickySearchInput}>
     <NotFoundIconContainer>
       <SearchOff fontSize="inherit" />

package/src/components/SelectChainAndToken.tsx

@@ -1,25 +1,14 @@
-import type { BoxProps, Theme } from '@mui/material'
-import { Box, useMediaQuery } from '@mui/material'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
 import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'
 import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { DisabledUI, HiddenUI } from '../types/widget.js'
 import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'
 
 export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
-  const prefersNarrowView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('sm')
-  )
   const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()
 
-  const [fromChain, toChain, fromToken, toToken] = useFieldValues(
-    'fromChain',
-    'toChain',
-    'fromToken',
-    'toToken'
-  )
-
   const hiddenReverse =
     subvariant === 'refuel' ||
     disabledUI?.includes(DisabledUI.FromToken) ||
@@ -32,40 +21,22 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
   const hiddenToToken =
     subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)
 
-  const isCompact =
-    !!fromChain &&
-    !!toChain &&
-    !!fromToken &&
-    !!toToken &&
-    !prefersNarrowView &&
-    !hiddenToToken &&
-    !hiddenFromToken
+  const showReverseButton = !hiddenToToken && !hiddenFromToken
 
   return (
-    <Box
-      sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
-      {...props}
-    >
+    <Box sx={{ display: 'flex' }} {...props}>
       {!hiddenFromToken ? (
-        <SelectTokenButton
-          formType="from"
-          compact={isCompact}
-          hiddenReverse={hiddenReverse}
-        />
+        <SelectTokenButton formType="from" hiddenReverse={hiddenReverse} />
       ) : null}
-      {!hiddenToToken && !hiddenFromToken ? (
+      {showReverseButton ? (
         !hiddenReverse ? (
-          <ReverseTokensButton vertical={!isCompact} />
+          <ReverseTokensButton />
         ) : (
           <ReverseTokensButtonEmpty />
         )
       ) : null}
       {!hiddenToToken ? (
-        <SelectTokenButton
-          formType="to"
-          compact={isCompact}
-          hiddenReverse={hiddenReverse}
-        />
+        <SelectTokenButton formType="to" hiddenReverse={hiddenReverse} />
       ) : null}
     </Box>
   )

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -3,76 +3,56 @@ import {
   CardContent as MuiCardContent,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import { Card } from '../Card/Card.js'
 import { CardHeader } from '../Card/CardHeader.js'
 
-export const SelectTokenCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) =>
-    !['selected', 'compact'].includes(prop as string),
-})<{ selected?: boolean; compact?: boolean }>(
-  ({ theme, selected, compact }) => ({
-    padding: theme.spacing(2),
-    [`.${cardHeaderClasses.title}`]: {
-      color: theme.vars.palette.text.secondary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: 256,
-      fontSize: compact && !selected ? 16 : 18,
-      fontWeight: 500,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: 224,
-      },
-      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        width: 180,
-        fontSize: 16,
-      },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: 256,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: 224,
-      },
-      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        width: 180,
-      },
+export const SelectTokenCardHeader: React.FC<
+  React.ComponentProps<typeof CardHeader> & {
+    selected?: boolean
+  }
+> = styled(CardHeader, {
+  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
+})<{ selected?: boolean }>(({ theme }) => ({
+  padding: theme.spacing(2),
+  [`.${cardHeaderClasses.title}`]: {
+    color: theme.vars.palette.text.secondary,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 96,
+    fontSize: 18,
+    fontWeight: 500,
+    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+      fontSize: 16,
     },
-    variants: [
-      {
-        props: ({ selected }) => selected,
-        style: {
-          [`.${cardHeaderClasses.title}`]: {
-            color: theme.vars.palette.text.primary,
-            fontWeight: 600,
-          },
+  },
+  [`.${cardHeaderClasses.subheader}`]: {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 96,
+  },
+  variants: [
+    {
+      props: ({ selected }) => selected,
+      style: {
+        [`.${cardHeaderClasses.title}`]: {
+          color: theme.vars.palette.text.primary,
+          fontWeight: 600,
         },
       },
-      {
-        props: ({ compact }) => compact,
-        style: {
-          [`.${cardHeaderClasses.title}`]: {
-            width: 96,
-            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-              width: 96,
-            },
-          },
-          [`.${cardHeaderClasses.subheader}`]: {
-            width: 96,
-            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-              width: 96,
-            },
-          },
-        },
-      },
-    ],
-  })
-)
+    },
+  ],
+}))
 
-export const SelectTokenCard = styled(Card)(({ theme }) => {
+export const SelectTokenCard: React.FC<
+  React.ComponentProps<typeof Card> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(Card)(({ theme }) => {
   const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
   return {
     flex: 1,
@@ -86,15 +66,19 @@ export const SelectTokenCard = styled(Card)(({ theme }) => {
   }
 })
 
-export const CardContent = styled(MuiCardContent, {
-  shouldForwardProp: (prop) =>
-    !['formType', 'compact', 'mask'].includes(prop as string),
-})<{ formType: FormType; compact: boolean; mask?: boolean }>(
-  ({ theme, formType, compact, mask = true }) => {
+export const CardContent: React.FC<
+  React.ComponentProps<typeof MuiCardContent> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(MuiCardContent, {
+  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
+})<{ formType?: FormType; mask?: boolean }>(
+  ({ theme, formType, mask = true }) => {
     const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
     const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
-    const horizontal = compact ? direction : '50%'
-    const vertical = compact ? '50%' : direction
+    const horizontal = direction
+    const vertical = '50%'
     return {
       padding: 0,
       transition: theme.transitions.create(['background-color'], {

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -2,7 +2,6 @@ import { Skeleton } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
-import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToken } from '../../hooks/useToken.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -10,7 +9,6 @@ import type { ChainOrderState } from '../../stores/chains/types.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
@@ -23,14 +21,12 @@ import {
 
 export const SelectTokenButton: React.FC<
   FormTypeProps & {
-    compact: boolean
     hiddenReverse?: boolean
   }
-> = ({ formType, compact, hiddenReverse }) => {
+> = ({ formType, hiddenReverse }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, subvariant, hiddenUI } = useWidgetConfig()
-  const swapOnly = useSwapOnly()
+  const { disabledUI, subvariant } = useWidgetConfig()
   const tokenKey = FormKeyHelper.getTokenKey(formType)
   const [chainId, tokenAddress] = useFieldValues(
     FormKeyHelper.getChainKey(formType),
@@ -56,27 +52,20 @@ export const SelectTokenButton: React.FC<
 
   const isSelected = !!(chain && token)
   const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined
-  const defaultPlaceholder =
-    formType === 'to' && subvariant === 'refuel'
-      ? t('main.selectChain')
-      : (formType === 'to' && swapOnly) ||
-          hiddenUI?.includes(HiddenUI.ChainSelect)
-        ? t('main.selectToken')
-        : t('main.selectChainAndToken')
+  const defaultPlaceholder = `${t('main.select')}...`
   const cardTitle: string =
     formType === 'from' && subvariant === 'custom'
       ? t('header.payWith')
       : t(`main.${formType}`)
   return (
     <SelectTokenCard component="button" onClick={onClick}>
-      <CardContent formType={formType} compact={compact} mask={!hiddenReverse}>
+      <CardContent formType={formType} mask={!hiddenReverse}>
         <CardTitle>{cardTitle}</CardTitle>
         {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
           <SelectTokenCardHeader
             avatar={<AvatarBadgedSkeleton />}
             title={<Skeleton variant="text" width={64} height={24} />}
             subheader={<Skeleton variant="text" width={72} height={16} />}
-            compact={compact}
           />
         ) : (
           <SelectTokenCardHeader
@@ -100,7 +89,6 @@ export const SelectTokenButton: React.FC<
             }}
             subheader={isSelected ? chain.name : null}
             selected={isSelected}
-            compact={compact}
           />
         )}
       </CardContent>

package/src/components/SendToWallet/{SendToWallet.style.tsx → SendToWalletButton.style.tsx}

@@ -1,7 +1,33 @@
-import { cardHeaderClasses, styled } from '@mui/material'
+import { Box, cardHeaderClasses, styled } from '@mui/material'
+import type React from 'react'
 import { CardHeader } from '../Card/CardHeader.js'
+import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'
 
-export const SendToWalletCardHeader = styled(CardHeader, {
+export const SendToWalletCardTitleRow: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: theme.spacing(2, 2, 0, 2),
+  height: 30,
+}))
+
+export const SendToWalletRequiredLabel: React.FC<
+  React.ComponentProps<typeof CardLabel>
+> = styled(CardLabel)(({ theme }) => ({
+  padding: theme.spacing(0, 1),
+}))
+
+export const SendToWalletRequiredLabelText: React.FC<
+  React.ComponentProps<typeof CardLabelTypography>
+> = styled(CardLabelTypography)(({ theme }) => ({
+  padding: theme.spacing(0, 0.5),
+}))
+
+export const SendToWalletCardHeader: React.FC<
+  React.ComponentProps<typeof CardHeader> & { selected?: boolean }
+> = styled(CardHeader, {
   shouldForwardProp: (prop) => !['selected'].includes(prop as string),
 })<{ selected?: boolean }>(({ theme }) => ({
   width: '100%',