@openocean.finance/widget 1.0.0

package/src/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -0,0 +1,57 @@
+import { Layers } from '@mui/icons-material'
+import { Box, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { IconTypography } from '../IconTypography.js'
+import type { RouteCardEssentialsProps } from './types.js'
+
+export const RouteCardEssentialsExpanded: React.FC<
+  RouteCardEssentialsProps
+> = ({ route }) => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        mt: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <IconTypography ml={1} mr={3}>
+          <Layers />
+        </IconTypography>
+        <Typography
+          sx={{
+            fontSize: 16,
+            color: 'text.primary',
+            fontWeight: '600',
+            lineHeight: 1.125,
+          }}
+        >
+          {route.steps.length}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          mt: 0.5,
+          ml: 7,
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: 12,
+            color: 'text.secondary',
+            fontWeight: '500',
+            lineHeight: 1.125,
+          }}
+        >
+          {t('tooltip.numberOfSteps')}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -0,0 +1,58 @@
+import { Box, Skeleton } from '@mui/material'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { TokenSkeleton } from '../Token/Token.js'
+import type { RouteCardSkeletonProps } from './types.js'
+
+export const RouteCardSkeleton: React.FC<
+  RouteCardSkeletonProps & Omit<CardProps, 'variant'>
+> = ({ variant, ...other }) => {
+  const { subvariant } = useWidgetConfig()
+
+  const cardContent = (
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
+      {subvariant !== 'refuel' && subvariant !== 'custom' ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+          }}
+        >
+          <Skeleton
+            variant="rectangular"
+            width={112}
+            height={24}
+            sx={(theme) => ({
+              borderRadius: `${theme.shape.borderRadius}px`,
+            })}
+          />
+        </Box>
+      ) : null}
+      <TokenSkeleton />
+      <Box
+        sx={{
+          mt: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Skeleton variant="text" width={64} height={20} />
+        <Skeleton variant="text" width={56} height={20} />
+      </Box>
+    </Box>
+  )
+
+  return subvariant === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card indented {...other}>
+      {cardContent}
+    </Card>
+  )
+}

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -0,0 +1,45 @@
+import { Route } from '@mui/icons-material'
+import { Box, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+
+export const RouteNotFoundCard: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      sx={{
+        py: 1.625,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        flex: 1,
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
+        <Route fontSize="inherit" />
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
+        {t('info.title.routeNotFound')}
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
+      >
+        {t('info.message.routeNotFound')}
+      </Typography>
+    </Box>
+  )
+}

package/src/components/RouteCard/getMatchingLabels.ts

@@ -0,0 +1,53 @@
+import type { Route } from '@lifi/sdk'
+import type { RouteLabel, RouteLabelRule } from '../../types/widget.js'
+import { isItemAllowed } from '../../utils/item.js'
+
+export const getMatchingLabels = (
+  route: Route,
+  routeLabels?: RouteLabelRule[]
+): RouteLabel[] => {
+  if (!routeLabels?.length) {
+    return []
+  }
+
+  return routeLabels
+    .filter((rule) => {
+      const conditions: boolean[] = []
+
+      // Check bridge/exchange matches if specified
+      if (rule.bridges || rule.exchanges) {
+        const toolNames = route.steps.flatMap((step) =>
+          step.includedSteps.map((s) => s.tool)
+        )
+        conditions.push(
+          toolNames.some(
+            (toolName) =>
+              isItemAllowed(toolName, rule.bridges) &&
+              isItemAllowed(toolName, rule.exchanges)
+          )
+        )
+      }
+
+      // Check token matches if specified
+      if (rule.fromTokenAddress?.length) {
+        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))
+      }
+
+      if (rule.toTokenAddress?.length) {
+        conditions.push(rule.toTokenAddress.includes(route.toToken.address))
+      }
+
+      // Check chain matches if specified
+      if (rule.fromChainId?.length) {
+        conditions.push(rule.fromChainId.includes(route.fromChainId))
+      }
+
+      if (rule.toChainId?.length) {
+        conditions.push(rule.toChainId.includes(route.toChainId))
+      }
+
+      // Must have at least one condition and all conditions must be true
+      return conditions.length && conditions.every(Boolean)
+    })
+    .map((rule) => rule.label)
+}

package/src/components/RouteCard/types.ts

@@ -0,0 +1,16 @@
+import type { Route } from '@lifi/sdk'
+
+export interface RouteCardProps {
+  route: Route
+  variant?: 'default' | 'cardless'
+  active?: boolean
+  expanded?: boolean
+}
+
+export interface RouteCardEssentialsProps {
+  route: Route
+}
+
+export interface RouteCardSkeletonProps {
+  variant?: 'default' | 'cardless'
+}

package/src/components/Routes/Routes.tsx

@@ -0,0 +1,94 @@
+import { Box, Collapse } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { ButtonTertiary } from '../ButtonTertiary.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
+import { RouteCard } from '../RouteCard/RouteCard.js'
+import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'
+import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
+
+export const Routes: React.FC<CardProps> = (props) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { subvariant, subvariantOptions, useRecommendedRoute } =
+    useWidgetConfig()
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useRoutes()
+
+  const currentRoute = routes?.[0]
+
+  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+    return null
+  }
+
+  const handleCardClick = () => {
+    navigate(navigationRoutes.routes)
+  }
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching
+  const onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute
+  const showAll =
+    !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1
+
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.receive')
+        : t('header.youPay')
+      : t('header.receive')
+
+  return (
+    <Card {...props}>
+      <CardTitle>{title}</CardTitle>
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || new Date().getTime()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+        }}
+      />
+      <Box
+        sx={{
+          p: 2,
+        }}
+      >
+        {isLoading ? (
+          <RouteCardSkeleton variant="cardless" />
+        ) : !currentRoute ? (
+          <RouteNotFoundCard />
+        ) : (
+          <RouteCard route={currentRoute} variant="cardless" active />
+        )}
+
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
+            <ButtonTertiary onClick={handleCardClick} fullWidth>
+              {t('button.showAll')}
+            </ButtonTertiary>
+          </Box>
+        </Collapse>
+      </Box>
+    </Card>
+  )
+}

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

@@ -0,0 +1,64 @@
+import type { ScopedCssBaselineProps } from '@mui/material'
+import { Box, Collapse, Grow, ScopedCssBaseline, styled } from '@mui/material'
+import { defaultMaxHeight } from '../../config/constants.js'
+
+export const CollapseContainer = styled(Box)(({ theme }) => ({
+  zIndex: 0,
+  ...(theme.container.display === 'flex'
+    ? { display: 'flex', maxHeight: '100%' }
+    : { height: 'auto' }),
+}))
+
+export const RoutesExpandedCollapse = styled(Collapse)(({ theme }) => ({
+  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
+}))
+
+export const RouteTopLevelGrow = styled(Grow)(({ theme }) => ({
+  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
+}))
+
+export const ScrollableContainer = styled(Box)({
+  overflowY: 'auto',
+  height: '100%',
+  width: '100%',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+})
+
+interface ContainerProps extends ScopedCssBaselineProps {
+  minimumHeight: boolean
+}
+
+export const Container = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
+})<ContainerProps>(({ theme, minimumHeight }) => ({
+  backgroundColor: theme.palette.background.default,
+  overflow: 'auto',
+  width: 436,
+  marginLeft: theme.spacing(3),
+  display: 'flex',
+  flexDirection: 'column',
+  ...(theme.container?.display !== 'flex'
+    ? {
+        maxHeight:
+          theme.container?.maxHeight ??
+          theme.container?.height ??
+          defaultMaxHeight,
+        ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
+      }
+    : { height: minimumHeight ? 'auto' : '100%' }),
+  ...theme.container,
+}))
+
+export const Header = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  backdropFilter: 'blur(12px)',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(1.5, 3),
+  position: 'sticky',
+  top: 0,
+  zIndex: 1200,
+}))

package/src/components/Routes/RoutesExpanded.tsx

@@ -0,0 +1,194 @@
+import type { Route } from '@lifi/sdk'
+import { Collapse, Grow, Stack, Typography } from '@mui/material'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { RouteObject } from 'react-router-dom'
+import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { WidgetEvent } from '../../types/events.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { PageContainer } from '../PageContainer.js'
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
+import { RouteCard } from '../RouteCard/RouteCard.js'
+import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'
+import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
+import {
+  CollapseContainer,
+  Container,
+  Header,
+  RouteTopLevelGrow,
+  RoutesExpandedCollapse,
+  ScrollableContainer,
+} from './RoutesExpanded.style.js'
+
+const timeout = { enter: 225, exit: 225, appear: 0 }
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: true,
+  },
+  {
+    path: '*',
+    element: null,
+  },
+]
+
+export const RoutesExpanded = () => {
+  const element = useDOMRoutes(routes)
+  const match = Boolean((element?.props as PropsWithChildren)?.children)
+
+  return (
+    <CollapseContainer>
+      <Collapse timeout={timeout} in={match} orientation="horizontal">
+        <RouteTopLevelGrow
+          timeout={timeout}
+          in={match}
+          mountOnEnter
+          unmountOnExit
+        >
+          <div>
+            <RoutesExpandedElement />
+          </div>
+        </RouteTopLevelGrow>
+      </Collapse>
+    </CollapseContainer>
+  )
+}
+
+export const RoutesExpandedElement = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const routesRef = useRef<Route[]>(undefined)
+  const emitter = useWidgetEvents()
+  const routesActiveRef = useRef(false)
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    fromChain,
+    refetch,
+    setReviewableRoute,
+  } = useRoutes()
+  const { account } = useAccount({ chainType: fromChain?.chainType })
+  const [toAddress] = useFieldValues('toAddress')
+  const { requiredToAddress } = useToAddressRequirements()
+
+  const handleRouteClick = (route: Route) => {
+    setReviewableRoute(route)
+    navigate(navigationRoutes.transactionExecution, {
+      state: { routeId: route.id },
+    })
+    emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
+  }
+
+  const onExit = () => {
+    // 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
+  } else {
+    routesRef.current = routes
+    routesActiveRef.current = Boolean(routes)
+  }
+
+  const currentRoute = routesRef.current?.[0]
+
+  const expanded = Boolean(
+    routesActiveRef.current || isLoading || isFetching || isFetched
+  )
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded
+  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+  const allowInteraction = account.isConnected && !toAddressUnsatisfied
+
+  useEffect(() => {
+    emitter.emit(WidgetEvent.WidgetExpanded, expanded)
+  }, [emitter, expanded])
+
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.deposit')
+        : t('header.youPay')
+      : t('header.receive')
+
+  return (
+    <RoutesExpandedCollapse
+      timeout={timeout.enter}
+      in={expanded}
+      orientation="horizontal"
+      onExited={onExit}
+    >
+      <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
+        <Container enableColorScheme minimumHeight={isLoading}>
+          <ScrollableContainer>
+            <Header>
+              <Typography
+                noWrap
+                sx={{
+                  fontSize: 18,
+                  fontWeight: '700',
+                  flex: 1,
+                }}
+              >
+                {title}
+              </Typography>
+              <ProgressToNextUpdate
+                updatedAt={dataUpdatedAt || new Date().getTime()}
+                timeToUpdate={refetchTime}
+                isLoading={isFetching}
+                onClick={() => refetch()}
+                sx={{ marginRight: -1 }}
+              />
+            </Header>
+            <PageContainer>
+              <Stack
+                direction="column"
+                spacing={2}
+                sx={{
+                  flex: 1,
+                  paddingBottom: 3,
+                }}
+              >
+                {routeNotFound ? (
+                  <RouteNotFoundCard />
+                ) : isLoading || (isFetching && !routesRef.current?.length) ? (
+                  Array.from({ length: 3 }).map((_, index) => (
+                    <RouteCardSkeleton key={index} />
+                  ))
+                ) : (
+                  routesRef.current?.map((route: Route, index: number) => (
+                    <RouteCard
+                      key={index}
+                      route={route}
+                      onClick={
+                        allowInteraction
+                          ? () => handleRouteClick(route)
+                          : undefined
+                      }
+                      active={index === 0}
+                      expanded={routesRef.current?.length === 1}
+                    />
+                  ))
+                )}
+              </Stack>
+            </PageContainer>
+          </ScrollableContainer>
+        </Container>
+      </Grow>
+    </RoutesExpandedCollapse>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { Box, List, styled } from '@mui/material'
+import { Input as InputBase } from '../../components/Input.js'
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  paddingRight: theme.spacing(1.5),
+}))
+
+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.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

@@ -0,0 +1,60 @@
+import { Search } from '@mui/icons-material'
+import { FormControl, InputAdornment } from '@mui/material'
+import type { FocusEventHandler, FormEventHandler } from 'react'
+import { InputCard } from '../../components/Card/InputCard.js'
+import { useHeaderHeight } from '../../stores/header/useHeaderStore.js'
+import { Input, StickySearchInputContainer } from './SearchInput.style.js'
+
+interface SearchInputProps {
+  name?: string
+  value?: string
+  placeholder?: string
+  onChange?: FormEventHandler<HTMLInputElement>
+  onBlur?: FocusEventHandler<HTMLInputElement>
+  autoFocus?: boolean
+}
+
+export const SearchInput = ({
+  name,
+  placeholder,
+  onChange,
+  onBlur,
+  value,
+  autoFocus,
+}: SearchInputProps) => {
+  return (
+    <InputCard>
+      <FormControl fullWidth>
+        <Input
+          size="small"
+          placeholder={placeholder}
+          endAdornment={
+            <InputAdornment position="end">
+              <Search />
+            </InputAdornment>
+          }
+          inputProps={{
+            inputMode: 'search',
+            onChange,
+            onBlur,
+            name,
+            value,
+            maxLength: 128,
+          }}
+          autoComplete="off"
+          autoFocus={autoFocus}
+        />
+      </FormControl>
+    </InputCard>
+  )
+}
+
+export const StickySearchInput = (props: SearchInputProps) => {
+  const { headerHeight } = useHeaderHeight()
+
+  return (
+    <StickySearchInputContainer headerHeight={headerHeight}>
+      <SearchInput {...props} autoFocus />
+    </StickySearchInputContainer>
+  )
+}