@lifi/widget 4.0.0-beta.9 → 4.0.0

package/src/components/Routes/RoutesContent.tsx

@@ -1,6 +1,7 @@
 import type { ExtendedChain, Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { Stack, Typography } from '@mui/material'
+import type React from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
@@ -24,91 +25,93 @@ interface RoutesContentProps {
   onRouteClick: (route: Route) => void
 }
 
-const headerHeight = '64px'
+const headerHeight = '52px'
 
-export const RoutesContent = memo(function RoutesContent({
-  routes,
-  isFetching,
-  isLoading,
-  dataUpdatedAt,
-  refetchTime,
-  fromChain,
-  refetch,
-  onRouteClick,
-}: RoutesContentProps) {
-  const { t } = useTranslation()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
+export const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =
+  memo(function RoutesContent({
+    routes,
+    isFetching,
+    isLoading,
+    dataUpdatedAt,
+    refetchTime,
+    fromChain,
+    refetch,
+    onRouteClick,
+  }: RoutesContentProps) {
+    const { t } = useTranslation()
+    const { mode, modeOptions } = useWidgetConfig()
 
-  const { account } = useAccount({ chainType: fromChain?.chainType })
-  const [toAddress] = useFieldValues('toAddress')
-  const { requiredToAddress } = useToAddressRequirements()
+    const { account } = useAccount({ chainType: fromChain?.chainType })
+    const [toAddress] = useFieldValues('toAddress')
+    const { requiredToAddress } = useToAddressRequirements()
 
-  const currentRoute = routes?.[0]
+    const currentRoute = routes?.[0]
 
-  const routeNotFound = !currentRoute && !isLoading && !isFetching
-  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
-  const allowInteraction = account.isConnected && !toAddressUnsatisfied
+    const routeNotFound = !currentRoute && !isLoading && !isFetching
+    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+    const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
-  const title =
-    subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit'
-        ? t('header.deposit')
-        : t('header.youPay')
-      : t('header.receive')
+    const title =
+      mode === 'custom'
+        ? modeOptions?.custom?.type === 'deposit'
+          ? t('header.deposit')
+          : t('header.youPay')
+        : t('header.receive')
 
-  return (
-    <Container enableColorScheme minimumHeight={isLoading}>
-      <Header sx={{ height: headerHeight }}>
-        <Typography
-          noWrap
-          sx={{
-            fontSize: 18,
-            fontWeight: '700',
-            flex: 1,
-          }}
+    return (
+      <Container enableColorScheme minimumHeight={isLoading}>
+        <Header sx={{ height: headerHeight }}>
+          <Typography
+            noWrap
+            sx={{
+              fontSize: 18,
+              fontWeight: '700',
+              flex: 1,
+            }}
+          >
+            {title}
+          </Typography>
+          <ProgressToNextUpdate
+            updatedAt={dataUpdatedAt || Date.now()}
+            timeToUpdate={refetchTime}
+            isLoading={isFetching}
+            onClick={() => refetch()}
+            sx={{ marginRight: -1 }}
+          />
+        </Header>
+        <PageContainer
+          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
         >
-          {title}
-        </Typography>
-        <ProgressToNextUpdate
-          updatedAt={dataUpdatedAt || Date.now()}
-          timeToUpdate={refetchTime}
-          isLoading={isFetching}
-          onClick={() => refetch()}
-          sx={{ marginRight: -1 }}
-        />
-      </Header>
-      <PageContainer
-        sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
-      >
-        <Stack
-          direction="column"
-          spacing={2}
-          sx={{
-            flex: 1,
-            paddingBottom: 3,
-          }}
-        >
-          {routeNotFound ? (
-            <RouteNotFoundCard />
-          ) : (isLoading || isFetching) && !routes?.length ? (
-            Array.from({ length: 3 }).map((_, index) => (
-              <RouteCardSkeleton key={index} />
-            ))
-          ) : (
-            routes?.map((route: Route, index: number) => (
-              <RouteCard
-                key={index}
-                route={route}
-                onClick={
-                  allowInteraction ? () => onRouteClick(route) : undefined
-                }
-                active={index === 0}
-                expanded={routes?.length === 1}
-              />
-            ))
-          )}
-        </Stack>
-      </PageContainer>
-    </Container>
-  )
-})
+          <Stack
+            direction="column"
+            spacing={2}
+            sx={{
+              flex: 1,
+              paddingTop: 1.5,
+              paddingBottom: 3,
+            }}
+          >
+            {routeNotFound ? (
+              <RouteNotFoundCard />
+            ) : (isLoading || isFetching) && !routes?.length ? (
+              Array.from({ length: 3 }).map((_, index) => (
+                <RouteCardSkeleton key={index} />
+              ))
+            ) : (
+              routes?.map((route: Route, index: number) => (
+                <RouteCard
+                  key={index}
+                  route={route}
+                  onClick={
+                    allowInteraction ? () => onRouteClick(route) : undefined
+                  }
+                  active={index === 0}
+                  expanded={routes?.length === 1}
+                />
+              ))
+            )}
+          </Stack>
+        </PageContainer>
+      </Container>
+    )
+  })

package/src/components/Routes/RoutesExpanded.style.ts

@@ -1,6 +1,7 @@
 import type { ScopedCssBaselineProps } from '@mui/material'
 import { Box, ScopedCssBaseline, styled } from '@mui/material'
-import { defaultMaxHeight } from '../../config/constants.js'
+import type React from 'react'
+import { getWidgetMaxHeight } from '../../utils/widgetSize.js'
 
 export const routesExpansionWidth = '436px'
 
@@ -8,13 +9,11 @@ interface ContainerProps extends ScopedCssBaselineProps {
   minimumHeight: boolean
 }
 
-export const Container = styled(ScopedCssBaseline, {
+export const Container: React.FC<
+  React.ComponentProps<typeof ScopedCssBaseline> & ContainerProps
+> = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<ContainerProps>(({ theme, minimumHeight }) => {
-  const fallbackMaxHeight =
-    !theme.container?.height || theme.container?.height === 'fit-content'
-      ? defaultMaxHeight
-      : theme.container?.height
   return {
     ...theme.container,
     backgroundColor: theme.vars.palette.background.default,
@@ -25,7 +24,7 @@ export const Container = styled(ScopedCssBaseline, {
     whiteSpace: 'normal',
     ...(theme.container?.display !== 'flex'
       ? {
-          maxHeight: theme.container?.maxHeight ?? fallbackMaxHeight,
+          maxHeight: getWidgetMaxHeight(theme),
           ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
         }
       : { height: minimumHeight ? 'auto' : '100%' }),
@@ -33,13 +32,15 @@ export const Container = styled(ScopedCssBaseline, {
   }
 })
 
-export const Header = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.vars.palette.background.default,
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(1.5, 3),
-  position: 'sticky',
-  top: 0,
-  zIndex: 1200,
-}))
+export const Header: React.FC<React.ComponentProps<typeof Box>> = styled(Box)(
+  ({ theme }) => ({
+    backgroundColor: theme.vars.palette.background.default,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing(1.5, 3, 0, 3),
+    position: 'sticky',
+    top: 0,
+    zIndex: 1200,
+  })
+)

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

@@ -1,18 +1,19 @@
 import {
-  Box,
   inputAdornmentClasses,
   inputBaseClasses,
-  List,
   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),
@@ -40,43 +41,3 @@ export const Input = styled(InputBase, {
     },
   },
 }))
-
-interface SearchStickyContainerProps {
-  headerHeight: number
-}
-
-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, {
-  shouldForwardProp: (prop) => prop !== 'headerHeight',
-})<SearchStickyContainerProps>(({ theme, headerHeight }) => ({
-  position: 'sticky',
-  top: headerHeight,
-  zIndex: 1,
-  height: searchContainerHeight,
-  paddingBottom: theme.spacing(2),
-  paddingLeft: theme.spacing(3),
-  paddingRight: theme.spacing(3),
-  backgroundColor: theme.vars.palette.background.default,
-  ...(theme.header?.position === 'fixed'
-    ? {
-        position: 'fixed',
-        minWidth: theme.breakpoints.values.xs,
-        maxWidth: theme.breakpoints.values.sm,
-        width: '100%',
-      }
-    : {}),
-}))
-
-// 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 }) => ({
-  paddingTop:
-    theme.header?.position === 'fixed' ? `${searchContainerHeight}px` : 0,
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  paddingBottom: theme.spacing(1.5),
-}))

package/src/components/Search/SearchInput.tsx

@@ -1,10 +1,14 @@
 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'
+import { Input } from './SearchInput.style.js'
 
 interface SearchInputProps {
   inputRef?: RefObject<HTMLInputElement | null>
@@ -28,7 +32,7 @@ export const SearchInput = ({
   value,
   autoFocus,
   size = 'medium',
-}: SearchInputProps) => {
+}: SearchInputProps): JSX.Element => {
   return (
     <InputCard>
       <FormControl fullWidth>
@@ -74,13 +78,3 @@ export const SearchInput = ({
     </InputCard>
   )
 }
-
-export const StickySearchInput = (props: SearchInputProps) => {
-  const { headerHeight } = useHeaderHeight()
-
-  return (
-    <StickySearchInputContainer headerHeight={headerHeight}>
-      <SearchInput {...props} autoFocus />
-    </StickySearchInputContainer>
-  )
-}

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

@@ -1,26 +1,21 @@
 import type { BoxProps } from '@mui/material'
 import { Box, styled, Typography } from '@mui/material'
-import { searchContainerHeight } from './SearchInput.style.js'
+import type React from 'react'
 
-interface NotFoundContainerProps extends BoxProps {
-  adjustForStickySearchInput?: boolean
-}
+export const NotFoundContainer: React.FC<BoxProps> = styled(Box)(
+  ({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    padding: theme.spacing(3),
+  })
+)
 
-export const NotFoundContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'adjustForStickySearchInput',
-})<NotFoundContainerProps>(({ theme, adjustForStickySearchInput }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexDirection: 'column',
-  flex: 1,
-  padding: theme.spacing(3),
-  ...(adjustForStickySearchInput && theme.header?.position === 'fixed'
-    ? { paddingTop: `calc(${searchContainerHeight}px + ${theme.spacing(3)})` }
-    : {}),
-}))
-
-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 +26,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,
@@ -7,14 +8,12 @@ import {
 
 interface SearchNotFoundProps {
   message: string
-  adjustForStickySearchInput?: boolean
 }
 
 export const SearchNotFound = ({
   message,
-  adjustForStickySearchInput,
-}: SearchNotFoundProps) => (
-  <NotFoundContainer adjustForStickySearchInput={adjustForStickySearchInput}>
+}: SearchNotFoundProps): JSX.Element => (
+  <NotFoundContainer>
     <NotFoundIconContainer>
       <SearchOff fontSize="inherit" />
     </NotFoundIconContainer>