@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Messages/AccountNotDeployedMessage.tsx

@@ -0,0 +1,22 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+export const AccountNotDeployedMessage: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation()
+
+  return (
+    <AlertMessage
+      title={
+        <Typography variant="body2" sx={{ color: 'text.primary' }}>
+          {t('warning.message.accountNotDeployedMessage')}
+        </Typography>
+      }
+      icon={<WarningRounded />}
+      severity="warning"
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/AlertMessage.style.tsx

@@ -0,0 +1,65 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import type { Severity } from './types.js'
+
+interface AlertSeverityProps {
+  severity: Severity
+}
+
+export const AlertMessageCard: React.FC<
+  React.ComponentProps<typeof Box> & AlertSeverityProps
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme }) => ({
+  borderRadius: theme.vars.shape.borderRadius,
+  position: 'relative',
+  whiteSpace: 'pre-line',
+  width: '100%',
+  paddingBottom: theme.spacing(2),
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
+  }),
+  variants: [
+    {
+      props: {
+        severity: 'warning',
+      },
+      style: {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+        }),
+      },
+    },
+  ],
+}))
+
+export const AlertMessageCardTitle: React.FC<
+  React.ComponentProps<typeof Box> & AlertSeverityProps
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme }) => ({
+  display: 'flex',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  gap: theme.spacing(1),
+  color: theme.vars.palette.info.main,
+  ...theme.applyStyles('dark', {
+    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,
+  }),
+  variants: [
+    {
+      props: {
+        severity: 'warning',
+      },
+      style: {
+        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
+        ...theme.applyStyles('dark', {
+          color: theme.vars.palette.warning.main,
+        }),
+      },
+    },
+  ],
+}))

package/src/components/Messages/AlertMessage.tsx

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@mui/material'
+import type { JSX, PropsWithChildren, ReactNode } from 'react'
+import {
+  AlertMessageCard,
+  AlertMessageCardTitle,
+} from './AlertMessage.style.js'
+import type { Severity } from './types.js'
+
+interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
+  icon: ReactNode
+  title: ReactNode
+  multiline?: boolean
+  severity?: Severity
+}
+
+export const AlertMessage = ({
+  title,
+  icon,
+  children,
+  multiline,
+  severity = 'info',
+  ...rest
+}: AlertMessageProps): JSX.Element => (
+  <AlertMessageCard severity={severity} {...rest}>
+    <AlertMessageCardTitle
+      severity={severity}
+      sx={{ alignItems: multiline ? 'start' : 'center' }}
+    >
+      {icon}
+      {title}
+    </AlertMessageCardTitle>
+    {children}
+  </AlertMessageCard>
+)

package/src/components/Messages/FundsSufficiencyMessage.tsx

@@ -0,0 +1,26 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+export const FundsSufficiencyMessage: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          {t('warning.message.insufficientFunds')}
+        </Typography>
+      }
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/GasRefuelMessage.style.ts

@@ -0,0 +1,23 @@
+import { styled, switchClasses } from '@mui/material'
+import type React from 'react'
+import { Switch } from '../Switch.js'
+
+export const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =
+  styled(Switch)(({ theme }) => ({
+    [`.${switchClasses.switchBase}`]: {
+      [`&.${switchClasses.checked}`]: {
+        [`& + .${switchClasses.track}`]: {
+          backgroundColor: theme.vars.palette.info.main,
+          ...theme.applyStyles('dark', {
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,
+          }),
+        },
+      },
+      [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+        color: theme.vars.palette.info.main,
+        ...theme.applyStyles('dark', {
+          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,
+        }),
+      },
+    },
+  }))

package/src/components/Messages/GasRefuelMessage.tsx

@@ -0,0 +1,81 @@
+import EvStation from '@mui/icons-material/EvStation'
+import type { BoxProps } from '@mui/material'
+import { Box, Collapse, Typography } from '@mui/material'
+import type { ChangeEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGasRefuel } from '../../hooks/useGasRefuel.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { AlertMessage } from './AlertMessage.js'
+import { InfoMessageSwitch } from './GasRefuelMessage.style.js'
+
+export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation()
+
+  const { setValue } = useSettingsActions()
+  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])
+
+  const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()
+
+  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setValue('enabledAutoRefuel', checked)
+  }
+
+  const showGasRefuelMessage = chain && enabled && !isRefuelLoading
+
+  return (
+    <Collapse
+      timeout={225}
+      in={showGasRefuelMessage}
+      unmountOnExit
+      mountOnEnter
+    >
+      <AlertMessage
+        icon={<EvStation />}
+        title={
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexGrow: 1,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
+              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}
+            </Typography>
+            <InfoMessageSwitch
+              checked={enabledAutoRefuel}
+              onChange={onChange}
+            />
+          </Box>
+        }
+        {...props}
+      >
+        <Collapse
+          timeout={225}
+          in={enabledAutoRefuel}
+          unmountOnExit
+          mountOnEnter
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              px: 2,
+              pt: 1,
+            }}
+          >
+            {t('info.message.autoRefuel', {
+              chainName: chain?.name,
+            })}
+          </Typography>
+        </Collapse>
+      </AlertMessage>
+    </Collapse>
+  )
+}

package/src/components/Messages/GasSufficiencyMessage.tsx

@@ -0,0 +1,63 @@
+import { formatUnits } from '@lifi/sdk'
+import EvStation from '@mui/icons-material/EvStation'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { AlertMessage } from './AlertMessage.js'
+
+interface GasSufficiencyMessageProps extends BoxProps {
+  insufficientGas?: GasSufficiency[]
+}
+
+export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
+  insufficientGas,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<EvStation />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
+          {t('warning.title.insufficientGas')}
+        </Typography>
+      }
+      {...props}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          px: 2,
+          pt: 1,
+        }}
+      >
+        {t('warning.message.insufficientGas')}
+      </Typography>
+      {insufficientGas?.map((item, index) => (
+        <Typography
+          key={index}
+          variant="body2"
+          sx={{
+            px: 2,
+            pt: 0.5,
+          }}
+        >
+          {t('main.tokenOnChainAmount', {
+            amount: formatUnits(
+              item.insufficientAmount ?? 0n,
+              item.token.decimals
+            ),
+            tokenSymbol: item.token.symbol,
+            chainName: item.chain?.name,
+          })}
+        </Typography>
+      ))}
+    </AlertMessage>
+  )
+}

package/src/components/Messages/MinFromAmountUSDMessage.tsx

@@ -0,0 +1,35 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+type MinFromAmountUSDMessageProps = BoxProps & {
+  minFromAmountUSD: number
+}
+
+export const MinFromAmountUSDMessage: React.FC<
+  MinFromAmountUSDMessageProps
+> = ({ minFromAmountUSD, ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          {t('warning.message.minFromAmountUSD', {
+            amount: minFromAmountUSD,
+            minimumFractionDigits: 0,
+          })}
+        </Typography>
+      }
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/MissingRouteRequiredAccountMessage.tsx

@@ -0,0 +1,44 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import Wallet from '@mui/icons-material/Wallet'
+import type { BoxProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { shortenAddress } from '../../utils/wallet.js'
+import { AlertMessage } from './AlertMessage.js'
+
+interface MissingRouteRequiredAccountMessageProps extends BoxProps {
+  chain?: ExtendedChain
+  address?: string
+}
+
+export const MissingRouteRequiredAccountMessage: React.FC<
+  MissingRouteRequiredAccountMessageProps
+> = ({ chain, address, ...props }) => {
+  const { t } = useTranslation()
+
+  if (!chain) {
+    return null
+  }
+
+  return (
+    <AlertMessage
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            px: 1,
+            color: 'text.primary',
+          }}
+        >
+          {t('info.message.missingRouteRequiredAccount', {
+            chainName: chain.name,
+            address: address ? `(${shortenAddress(address)})` : '',
+          })}
+        </Typography>
+      }
+      icon={<Wallet />}
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -0,0 +1,64 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { Collapse } from '@mui/material'
+import { AccountDeployedMessage } from './AccountDeployedMessage.js'
+import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
+import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
+import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+import { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'
+import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
+import { useMessageQueue } from './useMessageQueue.js'
+
+type WarningMessagesProps = BoxProps & {
+  route?: Route
+  allowInteraction?: boolean
+}
+
+export const WarningMessages: React.FC<WarningMessagesProps> = ({
+  route,
+  allowInteraction,
+  ...props
+}) => {
+  const { messages, hasMessages } = useMessageQueue(route, allowInteraction)
+
+  const getMessage = () => {
+    switch (messages[0]?.id) {
+      case 'MISSING_ROUTE_REQUIRED_ACCOUNT':
+        return (
+          <MissingRouteRequiredAccountMessage
+            chain={messages[0].props?.chain}
+            address={messages[0].props?.address}
+            {...props}
+          />
+        )
+      case 'INSUFFICIENT_FUNDS':
+        return <FundsSufficiencyMessage {...props} />
+      case 'INSUFFICIENT_GAS':
+        return (
+          <GasSufficiencyMessage
+            insufficientGas={messages[0].props?.insufficientGas}
+            {...props}
+          />
+        )
+      case 'MIN_FROM_AMOUNT_USD':
+        return (
+          <MinFromAmountUSDMessage
+            minFromAmountUSD={messages[0].props?.minFromAmountUSD}
+            {...props}
+          />
+        )
+      case 'ACCOUNT_NOT_DEPLOYED':
+        return <AccountNotDeployedMessage {...props} />
+      case 'ACCOUNT_DEPLOYED':
+        return <AccountDeployedMessage {...props} />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>
+      {getMessage()}
+    </Collapse>
+  )
+}

package/src/components/Messages/types.ts

@@ -0,0 +1 @@
+export type Severity = 'info' | 'warning'

package/src/components/Messages/useMessageQueue.ts

@@ -0,0 +1,111 @@
+import type { Route } from '@lifi/sdk'
+import { useMemo } from 'react'
+import { useFromAmountThreshold } from '../../hooks/useFromAmountThreshold.js'
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+
+export interface QueuedMessage {
+  id: string
+  priority: number
+  props?: Record<string, any>
+}
+
+export const useMessageQueue = (
+  route?: Route,
+  allowInteraction?: boolean
+): {
+  messages: QueuedMessage[]
+  hasMessages: boolean
+  isLoading: boolean
+} => {
+  const {
+    requiredToAddress,
+    accountNotDeployedAtDestination,
+    accountDeployedAtDestination,
+    isLoading: isToAddressRequirementsLoading,
+  } = useToAddressRequirements(route)
+  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
+    useFromTokenSufficiency(route)
+  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
+    useGasSufficiency(route)
+  const { missingChain, missingAccountAddress } =
+    useRouteRequiredAccountConnection(route)
+  const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold()
+
+  const messageQueue = useMemo(() => {
+    const queue: QueuedMessage[] = []
+
+    if (missingChain) {
+      queue.push({
+        id: 'MISSING_ROUTE_REQUIRED_ACCOUNT',
+        priority: 1,
+        props: { chain: missingChain, address: missingAccountAddress },
+      })
+    }
+
+    if (insufficientFromToken) {
+      queue.push({
+        id: 'INSUFFICIENT_FUNDS',
+        priority: 2,
+      })
+    }
+
+    if (belowMinFromAmountUSD) {
+      queue.push({
+        id: 'MIN_FROM_AMOUNT_USD',
+        priority: 3,
+        props: { minFromAmountUSD },
+      })
+    }
+
+    if (insufficientGas?.length) {
+      queue.push({
+        id: 'INSUFFICIENT_GAS',
+        priority: 4,
+        props: { insufficientGas },
+      })
+    }
+
+    if (accountNotDeployedAtDestination && !allowInteraction) {
+      queue.push({
+        id: 'ACCOUNT_NOT_DEPLOYED',
+        priority: 5,
+      })
+    }
+
+    if (
+      requiredToAddress &&
+      accountDeployedAtDestination &&
+      !allowInteraction
+    ) {
+      queue.push({
+        id: 'ACCOUNT_DEPLOYED',
+        priority: 6,
+      })
+    }
+
+    return queue.sort((a, b) => a.priority - b.priority)
+  }, [
+    allowInteraction,
+    insufficientFromToken,
+    insufficientGas,
+    accountDeployedAtDestination,
+    accountNotDeployedAtDestination,
+    requiredToAddress,
+    missingChain,
+    missingAccountAddress,
+    belowMinFromAmountUSD,
+    minFromAmountUSD,
+  ])
+
+  return {
+    messages: messageQueue,
+    hasMessages: messageQueue.length > 0,
+    isLoading:
+      isGasSufficiencyLoading ||
+      isFromTokenSufficiencyLoading ||
+      isToAddressRequirementsLoading,
+  }
+}

package/src/components/NotFound.tsx

@@ -0,0 +1,45 @@
+import Block from '@mui/icons-material/Block'
+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,34 @@
+import type { ContainerProps } from '@mui/material'
+import { Container, styled } from '@mui/material'
+import type React from 'react'
+
+export interface PageContainerProps extends ContainerProps {
+  halfGutters?: boolean
+  topGutters?: boolean
+  bottomGutters?: boolean
+}
+
+export const PageContainer: React.FC<
+  React.ComponentProps<typeof Container> & PageContainerProps
+> = 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.5 : 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 { useLocation } from '@tanstack/react-router'
+import { useEffect } from 'react'
+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,13 @@
+import { Link as MuiLink, styled } from '@mui/material'
+import type React from 'react'
+
+export const Link: React.FC<React.ComponentProps<typeof MuiLink>> = styled(
+  MuiLink
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  border: 'none',
+  ':hover': {
+    color: theme.vars.palette.primary.main,
+  },
+}))