@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/components/IconCircle/IconCircle.style.tsx

@@ -0,0 +1,85 @@
+import type { Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import type { StatusIcon } from './statusIcons'
+
+export const iconCircleSize = 90
+
+interface StatusColorConfig {
+  color: string
+  mixAmount: number
+  lightDarken: number
+  darkDarken: number
+}
+
+export const getStatusColor = (
+  status: StatusIcon,
+  theme: Theme
+): StatusColorConfig => {
+  switch (status) {
+    case 'success':
+      return {
+        color: theme.vars.palette.success.main,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+    case 'error':
+      return {
+        color: theme.vars.palette.error.main,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+    case 'warning':
+      return {
+        color: theme.vars.palette.warning.main,
+        mixAmount: 48,
+        lightDarken: 0.32,
+        darkDarken: 0,
+      }
+    case 'info':
+      return {
+        color: theme.vars.palette.info.main,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+  }
+}
+
+export const iconSizeRatio: number = 48 / 90
+
+export const IconCircleRoot: React.FC<
+  React.ComponentProps<typeof Box> & {
+    colorConfig: StatusColorConfig
+    circleSize: number
+  }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',
+})<{ colorConfig: StatusColorConfig; circleSize: number }>(
+  ({ theme, colorConfig, circleSize }) => {
+    const svgSize = Math.round(circleSize * iconSizeRatio)
+    return {
+      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+      borderRadius: '50%',
+      width: circleSize,
+      height: circleSize,
+      display: 'grid',
+      position: 'relative',
+      placeItems: 'center',
+      '& > svg': {
+        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+        width: svgSize,
+        height: svgSize,
+      },
+      ...theme.applyStyles('dark', {
+        '& > svg': {
+          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+          width: svgSize,
+          height: svgSize,
+        },
+      }),
+    }
+  }
+)

package/src/components/IconCircle/IconCircle.tsx

@@ -0,0 +1,29 @@
+import type { BoxProps } from '@mui/material'
+import { useTheme } from '@mui/material'
+import {
+  getStatusColor,
+  IconCircleRoot,
+  iconCircleSize,
+} from './IconCircle.style.js'
+import { type StatusIcon, statusIcons } from './statusIcons.js'
+
+interface IconCircleProps extends Omit<BoxProps, 'color'> {
+  status: StatusIcon
+  size?: number
+}
+
+export const IconCircle: React.FC<IconCircleProps> = ({
+  status,
+  size = iconCircleSize,
+  ...rest
+}) => {
+  const theme = useTheme()
+  const colorConfig = getStatusColor(status, theme)
+  const Icon = statusIcons[status]
+
+  return (
+    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>
+      <Icon />
+    </IconCircleRoot>
+  )
+}

package/src/components/IconCircle/statusIcons.ts

@@ -0,0 +1,14 @@
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import type { SvgIcon } from '@mui/material'
+
+export type StatusIcon = 'success' | 'error' | 'warning' | 'info'
+
+export const statusIcons: Record<StatusIcon, typeof SvgIcon> = {
+  success: Done,
+  error: ErrorRounded,
+  warning: WarningRounded,
+  info: InfoRounded,
+}

package/src/components/IconTypography.ts

@@ -1,9 +1,11 @@
+import type { BoxProps } from '@mui/material'
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 
-export const IconTypography = styled(Box)(({ theme }) => ({
-  color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+export const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({
+  color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
   lineHeight: 0,
   ...theme.applyStyles('dark', {
-    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,
+    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,
   }),
 }))

package/src/components/Input.tsx

@@ -1,6 +1,9 @@
 import { InputBase, inputBaseClasses, styled } from '@mui/material'
+import type React from 'react'
 
-export const Input = styled(InputBase)(({ theme }) => ({
+export const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(
+  InputBase
+)(({ theme }) => ({
   paddingRight: theme.spacing(2),
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(1.5, 1, 1.5, 2),

package/src/components/ListItem/ListItem.tsx

@@ -4,23 +4,26 @@ import {
   ListItem as MuiListItem,
   styled,
 } from '@mui/material'
+import type React from 'react'
 
-export const ListItem = styled(MuiListItem)(({ theme }) => ({
-  height: 64,
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  padding: theme.spacing(0, 1.5),
-  [`.${listItemSecondaryActionClasses.root}`]: {
-    right: theme.spacing(3),
-  },
-  [`& .${listItemTextClasses.secondary}`]: {
-    fontSize: 12,
-    fontWeight: 500,
-  },
-  [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
-    lineHeight: 1.3334,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-}))
+export const ListItem: React.FC<React.ComponentProps<typeof MuiListItem>> =
+  styled(MuiListItem)(({ theme }) => ({
+    height: 64,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    padding: theme.spacing(0, 1.5),
+    [`.${listItemSecondaryActionClasses.root}`]: {
+      right: theme.spacing(3),
+    },
+    [`& .${listItemTextClasses.secondary}`]: {
+      fontSize: 12,
+      fontWeight: 500,
+    },
+    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]:
+      {
+        lineHeight: 1.3334,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+      },
+  }))

package/src/components/ListItem/ListItemButton.tsx

@@ -1,7 +1,10 @@
 import { styled } from '@mui/material'
+import type React from 'react'
 import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'
 
-export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+export const ListItemButton: React.FC<
+  React.ComponentProps<typeof ListItemButtonBase>
+> = styled(ListItemButtonBase)(({ theme }) => ({
   paddingLeft: theme.spacing(1.5),
   paddingRight: theme.spacing(1.5),
   height: 64,

package/src/components/ListItemButton.tsx

@@ -3,14 +3,17 @@ import {
   ListItemButton as MuiListItemButton,
   styled,
 } from '@mui/material'
+import type React from 'react'
 
-export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
+export const ListItemButton: React.FC<
+  React.ComponentProps<typeof MuiListItemButton>
+> = styled(MuiListItemButton)(({ theme }) => {
   return {
     borderRadius: theme.vars.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
     [`&.${listItemButtonClasses.selected}`]: {
       backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,

package/src/components/ListItemText.tsx

@@ -3,8 +3,11 @@ import {
   ListItemText as MuiListItemText,
   styled,
 } from '@mui/material'
+import type React from 'react'
 
-export const ListItemText = styled(MuiListItemText)(() => ({
+export const ListItemText: React.FC<
+  React.ComponentProps<typeof MuiListItemText>
+> = styled(MuiListItemText)(() => ({
   [`.${listItemTextClasses.primary}`]: {
     fontWeight: 500,
   },

package/src/components/Menu.tsx

@@ -5,8 +5,11 @@ import {
   styled,
   svgIconClasses,
 } from '@mui/material'
+import type React from 'react'
 
-export const Menu = styled(MuiMenu)(({ theme }) => ({
+export const Menu: React.FC<React.ComponentProps<typeof MuiMenu>> = styled(
+  MuiMenu
+)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
     borderRadius: theme.vars.shape.borderRadius,
     boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',

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

@@ -1,11 +1,14 @@
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 import type { Severity } from './types.js'
 
 interface AlertSeverityProps {
   severity: Severity
 }
 
-export const AlertMessageCard = styled(Box, {
+export const AlertMessageCard: React.FC<
+  React.ComponentProps<typeof Box> & AlertSeverityProps
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'severity',
 })<AlertSeverityProps>(({ theme }) => ({
   borderRadius: theme.vars.shape.borderRadius,
@@ -13,9 +16,9 @@ export const AlertMessageCard = styled(Box, {
   whiteSpace: 'pre-line',
   width: '100%',
   paddingBottom: theme.spacing(2),
-  backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
   }),
   variants: [
     {
@@ -23,16 +26,18 @@ export const AlertMessageCard = styled(Box, {
         severity: 'warning',
       },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
         }),
       },
     },
   ],
 }))
 
-export const AlertMessageCardTitle = styled(Box, {
+export const AlertMessageCardTitle: React.FC<
+  React.ComponentProps<typeof Box> & AlertSeverityProps
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'severity',
 })<AlertSeverityProps>(({ theme }) => ({
   display: 'flex',

package/src/components/Messages/AlertMessage.tsx

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@mui/material'
-import type { PropsWithChildren, ReactNode } from 'react'
+import type { JSX, PropsWithChildren, ReactNode } from 'react'
 import {
   AlertMessageCard,
   AlertMessageCardTitle,
@@ -20,11 +20,11 @@ export const AlertMessage = ({
   multiline,
   severity = 'info',
   ...rest
-}: AlertMessageProps) => (
+}: AlertMessageProps): JSX.Element => (
   <AlertMessageCard severity={severity} {...rest}>
     <AlertMessageCardTitle
       severity={severity}
-      alignItems={multiline ? 'start' : 'center'}
+      sx={{ alignItems: multiline ? 'start' : 'center' }}
     >
       {icon}
       {title}

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

@@ -1,21 +1,23 @@
 import { styled, switchClasses } from '@mui/material'
+import type React from 'react'
 import { Switch } from '../Switch.js'
 
-export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
-  [`.${switchClasses.switchBase}`]: {
-    [`&.${switchClasses.checked}`]: {
-      [`& + .${switchClasses.track}`]: {
-        backgroundColor: theme.vars.palette.info.main,
+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', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+          color: `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: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
-      }),
-    },
-  },
-}))
+  }))

package/src/components/Messages/WarningMessages.tsx

@@ -7,7 +7,6 @@ import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
 import { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'
 import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
-import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
 
 type WarningMessagesProps = BoxProps & {
@@ -52,8 +51,6 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
         return <AccountNotDeployedMessage {...props} />
       case 'ACCOUNT_DEPLOYED':
         return <AccountDeployedMessage {...props} />
-      case 'TO_ADDRESS_REQUIRED':
-        return <ToAddressRequiredMessage {...props} />
       default:
         return null
     }

package/src/components/Messages/useMessageQueue.ts

@@ -6,16 +6,22 @@ import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
 import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 
-interface QueuedMessage {
+export interface QueuedMessage {
   id: string
   priority: number
   props?: Record<string, any>
 }
 
-export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
+export const useMessageQueue = (
+  route?: Route,
+  allowInteraction?: boolean
+): {
+  messages: QueuedMessage[]
+  hasMessages: boolean
+  isLoading: boolean
+} => {
   const {
     requiredToAddress,
-    toAddress,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,
     isLoading: isToAddressRequirementsLoading,
@@ -69,13 +75,6 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
       })
     }
 
-    if (requiredToAddress && !toAddress) {
-      queue.push({
-        id: 'TO_ADDRESS_REQUIRED',
-        priority: 6,
-      })
-    }
-
     if (
       requiredToAddress &&
       accountDeployedAtDestination &&
@@ -83,7 +82,7 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     ) {
       queue.push({
         id: 'ACCOUNT_DEPLOYED',
-        priority: 7,
+        priority: 6,
       })
     }
 
@@ -95,7 +94,6 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     accountDeployedAtDestination,
     accountNotDeployedAtDestination,
     requiredToAddress,
-    toAddress,
     missingChain,
     missingAccountAddress,
     belowMinFromAmountUSD,

package/src/components/PageContainer.ts

@@ -1,5 +1,6 @@
 import type { ContainerProps } from '@mui/material'
 import { Container, styled } from '@mui/material'
+import type React from 'react'
 
 export interface PageContainerProps extends ContainerProps {
   halfGutters?: boolean
@@ -7,7 +8,9 @@ export interface PageContainerProps extends ContainerProps {
   bottomGutters?: boolean
 }
 
-export const PageContainer = styled(Container, {
+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 }) => ({
@@ -15,7 +18,7 @@ export const PageContainer = styled(Container, {
   flexDirection: 'column',
   flex: 1,
   padding: theme.spacing(
-    topGutters ? 1 : 0,
+    topGutters ? 1.5 : 0,
     halfGutters ? 1.5 : 3,
     bottomGutters ? 3 : 0,
     halfGutters ? 1.5 : 3

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

@@ -1,6 +1,9 @@
 import { Link as MuiLink, styled } from '@mui/material'
+import type React from 'react'
 
-export const Link = styled(MuiLink)(({ theme }) => ({
+export const Link: React.FC<React.ComponentProps<typeof MuiLink>> = styled(
+  MuiLink
+)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   border: 'none',

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

@@ -1,7 +1,10 @@
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 import { Card } from '../Card/Card.js'
 
-export const IconCard = styled(Card)(({ theme }) => ({
+export const IconCard: React.FC<React.ComponentProps<typeof Card>> = styled(
+  Card
+)(({ theme }) => ({
   height: 32,
   width: 32,
   fontSize: 16,
@@ -12,16 +15,19 @@ export const IconCard = styled(Card)(({ theme }) => ({
   zIndex: 1110,
 }))
 
-export const ReverseContainer = styled(Box)(({ theme }) => {
-  return {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: theme.spacing(-1),
-  }
-})
+export const ReverseContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => {
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: theme.spacing(-1),
+    }
+  })
 
-export const ReverseTokensButtonEmpty = styled(Box)(({ theme }) => {
+export const ReverseTokensButtonEmpty: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => {
   return {
     display: 'flex',
     justifyContent: 'center',

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,14 +1,12 @@
-import ArrowDownward from '@mui/icons-material/ArrowDownward'
 import ArrowForward from '@mui/icons-material/ArrowForward'
+import type { JSX } from 'react'
 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,
-}) => {
+export const ReverseTokensButton = (): JSX.Element => {
   const { setFieldValue, getFieldValues } = useFieldActions()
   const { getChainById } = useAvailableChains()
   const { tryResetToAddress } = useToAddressReset()
@@ -52,12 +50,11 @@ export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
   }
   return (
     <ReverseContainer>
-      <IconCard onClick={handleClick}>
-        {vertical ? (
-          <ArrowDownward fontSize="inherit" />
-        ) : (
-          <ArrowForward fontSize="inherit" />
-        )}
+      <IconCard
+        data-testid="widget-reverse-tokens-button"
+        onClick={handleClick}
+      >
+        <ArrowForward fontSize="inherit" />
       </IconCard>
     </ReverseContainer>
   )