@openocean.finance/widget 1.0.0

package/src/components/Messages/useMessageQueue.ts

@@ -0,0 +1,75 @@
+import type { Route } from '@lifi/sdk'
+import { useMemo } from 'react'
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+
+interface QueuedMessage {
+  id: string
+  priority: number
+  props?: Record<string, any>
+}
+
+export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
+  const { requiredToAddress, toAddress } = useToAddressRequirements(route)
+  const {
+    isCompatibleDestinationAccount,
+    isLoading: isCompatibleDestinationAccountLoading,
+  } = useIsCompatibleDestinationAccount(route)
+  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
+    useFromTokenSufficiency(route)
+  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
+    useGasSufficiency(route)
+
+  const messageQueue = useMemo(() => {
+    const queue: QueuedMessage[] = []
+
+    if (insufficientFromToken) {
+      queue.push({
+        id: 'INSUFFICIENT_FUNDS',
+        priority: 1,
+      })
+    }
+
+    if (insufficientGas?.length) {
+      queue.push({
+        id: 'INSUFFICIENT_GAS',
+        priority: 2,
+        props: { insufficientGas },
+      })
+    }
+
+    if (!isCompatibleDestinationAccount && !allowInteraction) {
+      queue.push({
+        id: 'ACCOUNT_NOT_DEPLOYED',
+        priority: 3,
+      })
+    }
+
+    if (requiredToAddress && !toAddress) {
+      queue.push({
+        id: 'TO_ADDRESS_REQUIRED',
+        priority: 4,
+      })
+    }
+
+    return queue.sort((a, b) => a.priority - b.priority)
+  }, [
+    allowInteraction,
+    insufficientFromToken,
+    insufficientGas,
+    isCompatibleDestinationAccount,
+    requiredToAddress,
+    toAddress,
+  ])
+
+  return {
+    messages: messageQueue,
+    hasMessages: messageQueue.length > 0,
+    isLoading:
+      isGasSufficiencyLoading ||
+      isFromTokenSufficiencyLoading ||
+      isCompatibleDestinationAccountLoading,
+  }
+}

package/src/components/NotFound.tsx

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

package/src/components/PageContainer.ts

@@ -0,0 +1,31 @@
+import type { ContainerProps } from '@mui/material'
+import { Container, styled } from '@mui/material'
+
+export interface PageContainerProps extends ContainerProps {
+  halfGutters?: boolean
+  topGutters?: boolean
+  bottomGutters?: boolean
+}
+
+export const PageContainer = styled(Container, {
+  shouldForwardProp: (prop) =>
+    !['halfGutters', 'topGutters', 'bottomGutters'].includes(prop as string),
+})<PageContainerProps>(({ theme, halfGutters, topGutters, bottomGutters }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  padding: theme.spacing(
+    topGutters ? 1 : 0,
+    halfGutters ? 1.5 : 3,
+    bottomGutters ? 3 : 0,
+    halfGutters ? 1.5 : 3
+  ),
+  variants: [
+    {
+      props: ({ disableGutters }) => disableGutters,
+      style: {
+        padding: 0,
+      },
+    },
+  ],
+}))

package/src/components/PageEntered.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useWidgetEvents } from '../hooks/useWidgetEvents.js'
+import { WidgetEvent } from '../types/events.js'
+
+export function PageEntered() {
+  const location = useLocation()
+  const emitter = useWidgetEvents()
+
+  useEffect(() => {
+    emitter.emit(WidgetEvent.PageEntered, location.pathname)
+  }, [emitter, location.pathname])
+  return null
+}

package/src/components/PoweredBy/PoweredBy.style.ts

@@ -0,0 +1,10 @@
+import { Link as MuiLink, styled } from '@mui/material'
+
+export const Link = styled(MuiLink)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  border: 'none',
+  ':hover': {
+    color: theme.palette.primary.main,
+  },
+}))

package/src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,61 @@
+import { Box, Tooltip, Typography } from '@mui/material'
+import { version } from '../../config/version.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { Link } from './PoweredBy.style.js'
+
+const poweredByConfig = {
+  default: {
+    url: 'https://openocean.finance/',
+    text: 'OpenOcean',
+  },
+  jumper: {
+    url: 'https://jumper.exchange',
+    text: 'Jumper',
+  },
+}
+
+export const PoweredBy: React.FC = () => {
+  const { poweredBy = 'default' } = useWidgetConfig()
+
+  return (
+    <Box
+      sx={{
+        pt: 1,
+        pb: 2,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-end',
+      }}
+    >
+      <Tooltip title={`v${version}`} enterDelay={1000}>
+        <Link
+          href={poweredByConfig[poweredBy].url}
+          target="_blank"
+          underline="none"
+          color="text.primary"
+        >
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontSize: 12,
+              fontWeight: 500,
+              px: 0.5,
+            }}
+          >
+            Powered by
+          </Typography>
+          <Typography
+            sx={{
+              color: 'text.primary',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
+            {poweredByConfig[poweredBy].text}
+          </Typography>
+        </Link>
+      </Tooltip>
+    </Box>
+  )
+}

package/src/components/ProgressToNextUpdate.tsx

@@ -0,0 +1,92 @@
+import type { IconButtonProps } from '@mui/material'
+import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { Trans } from 'react-i18next'
+
+const getProgressValue = (updatedAt: number, timeToUpdate: number) =>
+  updatedAt ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100) : 0
+
+const getSecondsToUpdate = (updatedAt: number, timeToUpdate: number) =>
+  Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0)
+
+export const ProgressToNextUpdate: React.FC<
+  {
+    updatedAt: number
+    timeToUpdate: number
+    isLoading?: boolean
+  } & IconButtonProps
+> = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
+  const [value, setValue] = useState(() =>
+    getProgressValue(updatedAt, timeToUpdate)
+  )
+
+  useEffect(() => {
+    setValue(getProgressValue(updatedAt, timeToUpdate))
+    const id = setInterval(() => {
+      const time = getProgressValue(updatedAt, timeToUpdate)
+      setValue(time)
+      if (time >= 100) {
+        clearInterval(id)
+      }
+    }, 1000)
+    return () => clearInterval(id)
+  }, [timeToUpdate, updatedAt])
+
+  useEffect(() => {
+    if (isLoading) {
+      setValue(0)
+    }
+  }, [isLoading])
+
+  return (
+    <IconButton onClick={onClick} disabled={isLoading} {...other}>
+      <Tooltip
+        title={
+          <Trans
+            i18nKey="tooltip.progressToNextUpdate"
+            values={{
+              value: getSecondsToUpdate(updatedAt, timeToUpdate),
+            }}
+            // biome-ignore lint/correctness/useJsxKeyInIterable:
+            components={[<br />]}
+          />
+        }
+      >
+        <Box
+          sx={{
+            display: 'grid',
+            position: 'relative',
+            placeItems: 'center',
+            width: 24,
+            height: 24,
+          }}
+        >
+          <CircularProgress
+            variant="determinate"
+            size={24}
+            value={100}
+            sx={(theme) => ({
+              position: 'absolute',
+              color: theme.palette.grey[800],
+              ...theme.applyStyles('light', {
+                color: theme.palette.grey[300],
+              }),
+            })}
+          />
+          <CircularProgress
+            variant={isLoading ? 'indeterminate' : 'determinate'}
+            size={24}
+            value={value}
+            sx={(theme) => ({
+              opacity: value === 100 && !isLoading ? 0.5 : 1,
+              color: theme.palette.primary.light,
+              ...theme.applyStyles('light', {
+                color: theme.palette.primary.main,
+              }),
+            })}
+          />
+        </Box>
+      </Tooltip>
+    </IconButton>
+  )
+}

package/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -0,0 +1,31 @@
+import { Box, styled } from '@mui/material'
+import { Card } from '../Card/Card.js'
+
+export const IconCard = styled(Card)(({ theme }) => ({
+  height: 32,
+  width: 32,
+  fontSize: 16,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.shape.borderRadiusTertiary,
+  zIndex: 1110,
+}))
+
+export const ReverseContainer = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(-1),
+  }
+})
+
+export const ReverseTokensButtonEmpty = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(1),
+  }
+})

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -0,0 +1,63 @@
+import { ArrowDownward, ArrowForward } from '@mui/icons-material'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'
+
+export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
+  vertical,
+}) => {
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { getChainById } = useAvailableChains()
+  const { tryResetToAddress } = useToAddressReset()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+
+  const handleClick = () => {
+    const [fromChainId, fromToken, toChainId, toToken, toAddress] =
+      getFieldValues(
+        'fromChain',
+        'fromToken',
+        'toChain',
+        'toToken',
+        'toAddress'
+      )
+    setFieldValue('fromAmount', '', { isTouched: true })
+    setFieldValue('fromChain', toChainId, { isTouched: true })
+    setFieldValue('fromToken', toToken, { isTouched: true })
+    setFieldValue('toChain', fromChainId, { isTouched: true })
+    setFieldValue('toToken', fromToken, { isTouched: true })
+
+    const autoPopulatedToAddress = autoPopulateToAddress({
+      formType: 'from',
+      selectedToAddress: toAddress,
+      selectedChainId: toChainId,
+      selectedOppositeChainId: fromChainId,
+      selectedOppositeTokenAddress: fromToken,
+    })
+
+    // Returning early as a compatible connected wallet was found, and toAddress has been populated
+    if (autoPopulatedToAddress) {
+      return
+    }
+
+    // Auto-population applies in certain scenarios, but otherwise,
+    // we attempt to reset `toAddress` when bridging across ecosystems
+    // fromChainId becomes toChainId after using reverse
+    const toChain = getChainById(fromChainId)
+    if (toChain) {
+      tryResetToAddress(toChain)
+    }
+  }
+  return (
+    <ReverseContainer>
+      <IconCard onClick={handleClick}>
+        {vertical ? (
+          <ArrowDownward fontSize="inherit" />
+        ) : (
+          <ArrowForward fontSize="inherit" />
+        )}
+      </IconCard>
+    </ReverseContainer>
+  )
+}

package/src/components/RouteCard/RouteCard.style.ts

@@ -0,0 +1,8 @@
+import { Box, styled } from '@mui/material'
+
+export const TokenContainer = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: 40,
+}))

package/src/components/RouteCard/RouteCard.tsx

@@ -0,0 +1,137 @@
+import type { TokenAmount } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Box, Collapse } from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'
+import { StepActions } from '../StepActions/StepActions.js'
+import { Token } from '../Token/Token.js'
+import { TokenContainer } from './RouteCard.style.js'
+import { RouteCardEssentials } from './RouteCardEssentials.js'
+import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded.js'
+import { getMatchingLabels } from './getMatchingLabels.js'
+import type { RouteCardProps } from './types.js'
+
+export const RouteCard: React.FC<
+  RouteCardProps & Omit<CardProps, 'variant'>
+> = ({
+  route,
+  active,
+  variant = 'default',
+  expanded: defaulExpanded,
+  ...other
+}) => {
+  const { t } = useTranslation()
+  const { subvariant, subvariantOptions, routeLabels, hiddenUI } =
+    useWidgetConfig()
+  const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation()
+    setCardExpanded((expanded) => !expanded)
+  }
+
+  const token: TokenAmount =
+    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : { ...route.toToken, amount: BigInt(route.toAmount) }
+  const impactToken: TokenAmount | undefined =
+    subvariant !== 'custom'
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : undefined
+
+  const customLabels = getMatchingLabels(route, routeLabels)
+  const mainTag = route.tags?.find(
+    (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
+  )
+  const tags: string[] = mainTag ? [mainTag] : []
+  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  if (hasGaslessSupport) {
+    tags.push('GASLESS')
+  }
+
+  const cardContent = (
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
+      {subvariant !== 'refuel' && (tags.length || customLabels.length) ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+            gap: 1,
+            flexWrap: 'wrap',
+          }}
+        >
+          {tags?.map((tag) => (
+            <CardLabel
+              variant={
+                tag === 'GASLESS' ? 'success' : active ? 'secondary' : undefined
+              }
+              key={tag}
+            >
+              <CardLabelTypography>
+                {t(`main.tags.${tag.toLowerCase()}` as any)}
+              </CardLabelTypography>
+            </CardLabel>
+          ))}
+          {customLabels.map((label, index) => (
+            <CardLabel key={index} sx={label.sx}>
+              <CardLabelTypography>{label.text}</CardLabelTypography>
+            </CardLabel>
+          ))}
+        </Box>
+      ) : null}
+      <TokenContainer>
+        <Token
+          token={token}
+          impactToken={impactToken}
+          step={route.steps[0]}
+          stepVisible={!cardExpanded}
+          disableDescription={hiddenUI?.includes(
+            HiddenUI.RouteTokenDescription
+          )}
+        />
+        {!defaulExpanded ? (
+          <CardIconButton onClick={handleExpand} size="small">
+            {cardExpanded ? (
+              <ExpandLess fontSize="inherit" />
+            ) : (
+              <ExpandMore fontSize="inherit" />
+            )}
+          </CardIconButton>
+        ) : null}
+      </TokenContainer>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+        {route.steps.map((step) => (
+          <StepActions key={step.id} step={step} mt={2} />
+        ))}
+        <RouteCardEssentialsExpanded route={route} />
+      </Collapse>
+      <RouteCardEssentials route={route} />
+    </Box>
+  )
+
+  return subvariant === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card
+      type={active ? 'selected' : 'default'}
+      selectionColor="secondary"
+      indented
+      {...other}
+    >
+      {cardContent}
+    </Card>
+  )
+}

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -0,0 +1,106 @@
+import { isGaslessStep } from '@lifi/sdk'
+import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
+import { Box, Tooltip, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'
+import { IconTypography } from '../IconTypography.js'
+import { TokenRate } from '../TokenRate/TokenRate.js'
+import type { RouteCardEssentialsProps } from './types.js'
+
+export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
+  route,
+}) => {
+  const { t, i18n } = useTranslation()
+  const executionTimeSeconds = Math.floor(
+    route.steps.reduce(
+      (duration, step) => duration + step.estimate.executionDuration,
+      0
+    )
+  )
+  const executionTimeMinutes = Math.floor(executionTimeSeconds / 60)
+  const { gasCosts, feeCosts, combinedFeesUSD } =
+    getAccumulatedFeeCostsBreakdown(route)
+  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1,
+        mt: 2,
+      }}
+    >
+      <TokenRate route={route} />
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <FeeBreakdownTooltip
+          gasCosts={gasCosts}
+          feeCosts={feeCosts}
+          relayerSupport={hasGaslessSupport}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              mr: 1.5,
+              alignItems: 'center',
+            }}
+          >
+            <IconTypography mr={0.5} fontSize={16}>
+              <LocalGasStationRounded fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1,
+              }}
+            >
+              {hasGaslessSupport
+                ? t('main.fees.free')
+                : t('format.currency', {
+                    value: combinedFeesUSD,
+                  })}
+            </Typography>
+          </Box>
+        </FeeBreakdownTooltip>
+        <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <IconTypography mr={0.5} fontSize={16}>
+              <AccessTimeFilled fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1,
+              }}
+            >
+              {(executionTimeSeconds < 60
+                ? executionTimeSeconds
+                : executionTimeMinutes
+              ).toLocaleString(i18n.language, {
+                style: 'unit',
+                unit: executionTimeSeconds < 60 ? 'second' : 'minute',
+                unitDisplay: 'narrow',
+              })}
+            </Typography>
+          </Box>
+        </Tooltip>
+      </Box>
+    </Box>
+  )
+}