@lifi/widget 4.0.0-beta.9 → 4.0.0

package/src/components/SelectChainAndToken.tsx

@@ -1,71 +1,40 @@
-import type { BoxProps, Theme } from '@mui/material'
-import { Box, useMediaQuery } from '@mui/material'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
 import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'
 import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldValues } from '../stores/form/useFieldValues.js'
-import { DisabledUI, HiddenUI } from '../types/widget.js'
 import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'
 
 export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
-  const prefersNarrowView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('sm')
-  )
-  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()
-
-  const [fromChain, toChain, fromToken, toToken] = useFieldValues(
-    'fromChain',
-    'toChain',
-    'fromToken',
-    'toToken'
-  )
+  const { disabledUI, hiddenUI, mode } = useWidgetConfig()
 
   const hiddenReverse =
-    subvariant === 'refuel' ||
-    disabledUI?.includes(DisabledUI.FromToken) ||
-    disabledUI?.includes(DisabledUI.ToToken) ||
-    hiddenUI?.includes(HiddenUI.FromToken) ||
-    hiddenUI?.includes(HiddenUI.ToToken) ||
-    hiddenUI?.includes(HiddenUI.ReverseTokensButton)
+    mode === 'refuel' ||
+    disabledUI?.fromToken ||
+    disabledUI?.toToken ||
+    hiddenUI?.fromToken ||
+    hiddenUI?.toToken ||
+    hiddenUI?.reverseTokensButton
 
-  const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken)
-  const hiddenToToken =
-    subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)
+  const hiddenFromToken = hiddenUI?.fromToken
+  const hiddenToToken = mode === 'custom' || hiddenUI?.toToken
 
-  const isCompact =
-    !!fromChain &&
-    !!toChain &&
-    !!fromToken &&
-    !!toToken &&
-    !prefersNarrowView &&
-    !hiddenToToken &&
-    !hiddenFromToken
+  const showReverseButton = !hiddenToToken && !hiddenFromToken
 
   return (
-    <Box
-      sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
-      {...props}
-    >
+    <Box {...props} sx={{ display: 'flex', ...props.sx }}>
       {!hiddenFromToken ? (
-        <SelectTokenButton
-          formType="from"
-          compact={isCompact}
-          hiddenReverse={hiddenReverse}
-        />
+        <SelectTokenButton formType="from" hiddenReverse={hiddenReverse} />
       ) : null}
-      {!hiddenToToken && !hiddenFromToken ? (
+      {showReverseButton ? (
         !hiddenReverse ? (
-          <ReverseTokensButton vertical={!isCompact} />
+          <ReverseTokensButton />
         ) : (
           <ReverseTokensButtonEmpty />
         )
       ) : null}
       {!hiddenToToken ? (
-        <SelectTokenButton
-          formType="to"
-          compact={isCompact}
-          hiddenReverse={hiddenReverse}
-        />
+        <SelectTokenButton formType="to" hiddenReverse={hiddenReverse} />
       ) : null}
     </Box>
   )

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -3,76 +3,56 @@ import {
   CardContent as MuiCardContent,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import { Card } from '../Card/Card.js'
 import { CardHeader } from '../Card/CardHeader.js'
 
-export const SelectTokenCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) =>
-    !['selected', 'compact'].includes(prop as string),
-})<{ selected?: boolean; compact?: boolean }>(
-  ({ theme, selected, compact }) => ({
-    padding: theme.spacing(2),
-    [`.${cardHeaderClasses.title}`]: {
-      color: theme.vars.palette.text.secondary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: 256,
-      fontSize: compact && !selected ? 16 : 18,
-      fontWeight: 500,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: 224,
-      },
-      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        width: 180,
-        fontSize: 16,
-      },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: 256,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: 224,
-      },
-      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        width: 180,
-      },
+export const SelectTokenCardHeader: React.FC<
+  React.ComponentProps<typeof CardHeader> & {
+    selected?: boolean
+  }
+> = styled(CardHeader, {
+  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
+})<{ selected?: boolean }>(({ theme }) => ({
+  padding: theme.spacing(2),
+  [`.${cardHeaderClasses.title}`]: {
+    color: theme.vars.palette.text.secondary,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 96,
+    fontSize: 18,
+    fontWeight: 500,
+    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+      fontSize: 16,
     },
-    variants: [
-      {
-        props: ({ selected }) => selected,
-        style: {
-          [`.${cardHeaderClasses.title}`]: {
-            color: theme.vars.palette.text.primary,
-            fontWeight: 600,
-          },
+  },
+  [`.${cardHeaderClasses.subheader}`]: {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 96,
+  },
+  variants: [
+    {
+      props: ({ selected }) => selected,
+      style: {
+        [`.${cardHeaderClasses.title}`]: {
+          color: theme.vars.palette.text.primary,
+          fontWeight: 600,
         },
       },
-      {
-        props: ({ compact }) => compact,
-        style: {
-          [`.${cardHeaderClasses.title}`]: {
-            width: 96,
-            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-              width: 96,
-            },
-          },
-          [`.${cardHeaderClasses.subheader}`]: {
-            width: 96,
-            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-              width: 96,
-            },
-          },
-        },
-      },
-    ],
-  })
-)
+    },
+  ],
+}))
 
-export const SelectTokenCard = styled(Card)(({ theme }) => {
+export const SelectTokenCard: React.FC<
+  React.ComponentProps<typeof Card> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(Card)(({ theme }) => {
   const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
   return {
     flex: 1,
@@ -86,15 +66,19 @@ export const SelectTokenCard = styled(Card)(({ theme }) => {
   }
 })
 
-export const CardContent = styled(MuiCardContent, {
-  shouldForwardProp: (prop) =>
-    !['formType', 'compact', 'mask'].includes(prop as string),
-})<{ formType: FormType; compact: boolean; mask?: boolean }>(
-  ({ theme, formType, compact, mask = true }) => {
+export const CardContent: React.FC<
+  React.ComponentProps<typeof MuiCardContent> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(MuiCardContent, {
+  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
+})<{ formType?: FormType; mask?: boolean }>(
+  ({ theme, formType, mask = true }) => {
     const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
     const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
-    const horizontal = compact ? direction : '50%'
-    const vertical = compact ? '50%' : direction
+    const horizontal = direction
+    const vertical = '50%'
     return {
       padding: 0,
       transition: theme.transitions.create(['background-color'], {

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -2,7 +2,6 @@ import { Skeleton } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
-import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToken } from '../../hooks/useToken.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -10,7 +9,7 @@ import type { ChainOrderState } from '../../stores/chains/types.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { HiddenUI } from '../../types/widget.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
@@ -23,14 +22,12 @@ import {
 
 export const SelectTokenButton: React.FC<
   FormTypeProps & {
-    compact: boolean
     hiddenReverse?: boolean
   }
-> = ({ formType, compact, hiddenReverse }) => {
+> = ({ formType, hiddenReverse }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, subvariant, hiddenUI } = useWidgetConfig()
-  const swapOnly = useSwapOnly()
+  const { disabledUI, mode } = useWidgetConfig()
   const tokenKey = FormKeyHelper.getTokenKey(formType)
   const [chainId, tokenAddress] = useFieldValues(
     FormKeyHelper.getChainKey(formType),
@@ -48,35 +45,30 @@ export const SelectTokenButton: React.FC<
       to:
         formType === 'from'
           ? navigationRoutes.fromToken
-          : subvariant === 'refuel'
+          : mode === 'refuel'
             ? navigationRoutes.toTokenNative
             : navigationRoutes.toToken,
     })
   }
 
   const isSelected = !!(chain && token)
-  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined
-  const defaultPlaceholder =
-    formType === 'to' && subvariant === 'refuel'
-      ? t('main.selectChain')
-      : (formType === 'to' && swapOnly) ||
-          hiddenUI?.includes(HiddenUI.ChainSelect)
-        ? t('main.selectToken')
-        : t('main.selectChainAndToken')
+  const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]
+    ? handleClick
+    : undefined
+  const defaultPlaceholder = `${t('main.select')}...`
   const cardTitle: string =
-    formType === 'from' && subvariant === 'custom'
+    formType === 'from' && mode === 'custom'
       ? t('header.payWith')
       : t(`main.${formType}`)
   return (
     <SelectTokenCard component="button" onClick={onClick}>
-      <CardContent formType={formType} compact={compact} mask={!hiddenReverse}>
+      <CardContent formType={formType} mask={!hiddenReverse}>
         <CardTitle>{cardTitle}</CardTitle>
         {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
           <SelectTokenCardHeader
             avatar={<AvatarBadgedSkeleton />}
             title={<Skeleton variant="text" width={64} height={24} />}
             subheader={<Skeleton variant="text" width={72} height={16} />}
-            compact={compact}
           />
         ) : (
           <SelectTokenCardHeader
@@ -100,7 +92,6 @@ export const SelectTokenButton: React.FC<
             }}
             subheader={isSelected ? chain.name : null}
             selected={isSelected}
-            compact={compact}
           />
         )}
       </CardContent>

package/src/components/SendToWallet/{SendToWallet.style.tsx → SendToWalletButton.style.tsx}

@@ -1,7 +1,33 @@
-import { cardHeaderClasses, styled } from '@mui/material'
+import { Box, cardHeaderClasses, styled } from '@mui/material'
+import type React from 'react'
 import { CardHeader } from '../Card/CardHeader.js'
+import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'
 
-export const SendToWalletCardHeader = styled(CardHeader, {
+export const SendToWalletCardTitleRow: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: theme.spacing(2, 2, 0, 2),
+  height: 30,
+}))
+
+export const SendToWalletRequiredLabel: React.FC<
+  React.ComponentProps<typeof CardLabel>
+> = styled(CardLabel)(({ theme }) => ({
+  padding: theme.spacing(0, 1),
+}))
+
+export const SendToWalletRequiredLabelText: React.FC<
+  React.ComponentProps<typeof CardLabelTypography>
+> = styled(CardLabelTypography)(({ theme }) => ({
+  padding: theme.spacing(0, 0.5),
+}))
+
+export const SendToWalletCardHeader: React.FC<
+  React.ComponentProps<typeof CardHeader> & { selected?: boolean }
+> = styled(CardHeader, {
   shouldForwardProp: (prop) => !['selected'].includes(prop as string),
 })<{ selected?: boolean }>(({ theme }) => ({
   width: '100%',

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,6 +1,7 @@
 import { useAccount } from '@lifi/wallet-management'
 import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import CloseRounded from '@mui/icons-material/CloseRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Collapse } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
 import { type MouseEventHandler, useEffect, useRef } from 'react'
@@ -11,8 +12,6 @@ import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
-import { DisabledUI, HiddenUI } from '../../types/widget.js'
 import { defaultChainIdsByType } from '../../utils/chainType.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { shortenAddress } from '../../utils/wallet.js'
@@ -21,20 +20,18 @@ import type { CardProps } from '../Card/Card.js'
 import { Card } from '../Card/Card.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
 import { CardTitle } from '../Card/CardTitle.js'
-import { SendToWalletCardHeader } from './SendToWallet.style.js'
+import {
+  SendToWalletCardHeader,
+  SendToWalletCardTitleRow,
+  SendToWalletRequiredLabel,
+  SendToWalletRequiredLabelText,
+} from './SendToWalletButton.style.js'
 
 export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const {
-    disabledUI,
-    hiddenUI,
-    toAddress,
-    toAddresses,
-    subvariant,
-    subvariantOptions,
-  } = useWidgetConfig()
-  const { showSendToWallet } = useSendToWalletStore((state) => state)
+  const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =
+    useWidgetConfig()
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
     'toChain',
@@ -44,10 +41,10 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { selectedBookmark } = useBookmarks()
   const { setSelectedBookmark } = useBookmarkActions()
   const { accounts } = useAccount()
-  const { requiredToAddress } = useToAddressRequirements()
   const { getChainTypeFromAddress } = useChainTypeFromAddress()
-  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)
-  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)
+  const { requiredToAddress } = useToAddressRequirements()
+  const disabledToAddress = disabledUI?.toAddress
+  const hiddenToAddress = hiddenUI?.toAddress
 
   const address = toAddressFieldValue
     ? shortenAddress(toAddressFieldValue)
@@ -118,10 +115,10 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   }, [])
 
   const isOpenCollapse =
-    !hiddenToAddress && (requiredToAddress || showSendToWallet)
+    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)
 
   const title =
-    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'
+    mode === 'custom' && modeOptions?.custom?.type === 'deposit'
       ? t('header.depositTo')
       : t('header.sendToWallet')
 
@@ -137,7 +134,17 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
         onClick={disabledForChanges ? undefined : handleOnClick}
         sx={{ width: '100%', ...props.sx }}
       >
-        <CardTitle required={requiredToAddress}>{title}</CardTitle>
+        <SendToWalletCardTitleRow>
+          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>
+          {requiredToAddress && !toAddressFieldValue ? (
+            <SendToWalletRequiredLabel variant="warning">
+              <WarningRounded sx={{ fontSize: 14 }} />
+              <SendToWalletRequiredLabelText type="icon">
+                {t('sendToWallet.required')}
+              </SendToWalletRequiredLabelText>
+            </SendToWalletRequiredLabel>
+          ) : null}
+        </SendToWalletCardTitleRow>
         <Box
           sx={{
             display: 'flex',
@@ -158,7 +165,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
             subheader={headerSubheader}
             selected={!!toAddressFieldValue || disabledToAddress}
             action={
-              !!toAddressFieldValue && !disabledForChanges ? (
+              toAddressFieldValue && !disabledForChanges ? (
                 <CardIconButton onClick={clearSelectedBookmark} size="small">
                   <CloseRounded fontSize="inherit" />
                 </CardIconButton>

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -1,63 +1,59 @@
 import Wallet from '@mui/icons-material/Wallet'
-import { Button, Tooltip } from '@mui/material'
+import Button from '@mui/material/Button'
+import Collapse from '@mui/material/Collapse'
+import Tooltip from '@mui/material/Tooltip'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import {
-  sendToWalletStore,
-  useSendToWalletStore,
-} from '../../stores/settings/useSendToWalletStore.js'
-import { WidgetEvent } from '../../types/events.js'
-import { DisabledUI, HiddenUI } from '../../types/widget.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
-export const SendToWalletExpandButton: React.FC = () => {
+export const SendToWalletExpandButton = (): JSX.Element => {
   const { t } = useTranslation()
-  const { disabledUI, hiddenUI } = useWidgetConfig()
-  const { setFieldValue } = useFieldActions()
-  const { setSelectedBookmark } = useBookmarkActions()
-  const emitter = useWidgetEvents()
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore(
-    (state) => state
-  )
-  const [toAddressFieldValue] = useFieldValues('toAddress')
+  const navigate = useNavigate()
+  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()
+  const hiddenToAddress = hiddenUI?.toAddress
+  const disabledToAddress = disabledUI?.toAddress
   const { requiredToAddress } = useToAddressRequirements()
+  const [toAddressValue] = useFieldValues('toAddress')
 
-  if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
-    return null
-  }
-
-  const handleClick = () => {
-    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-      setFieldValue('toAddress', '', { isTouched: true })
-      setSelectedBookmark()
-    }
-    setSendToWallet(!showSendToWallet)
-    emitter.emit(
-      WidgetEvent.SendToWalletToggled,
-      sendToWalletStore.getState().showSendToWallet
-    )
-  }
+  const visible =
+    !hiddenToAddress &&
+    !disabledToAddress &&
+    !toAddressValue &&
+    !requiredToAddress
 
-  const buttonVariant =
-    showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text'
+  const handleClick = () =>
+    navigate({
+      to: toAddresses?.length
+        ? navigationRoutes.configuredWallets
+        : navigationRoutes.sendToWallet,
+    })
 
   return (
-    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
-      <Button
-        variant={buttonVariant}
-        onClick={handleClick}
-        sx={{
-          minWidth: 48,
-          width: 48,
-          height: 48,
-        }}
-      >
-        <Wallet />
-      </Button>
-    </Tooltip>
+    <Collapse
+      orientation="horizontal"
+      in={visible}
+      timeout={225}
+      mountOnEnter
+      unmountOnExit
+    >
+      <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
+        <Button
+          variant="text"
+          onClick={handleClick}
+          sx={{
+            ml: 1.5,
+            minWidth: 48,
+            width: 48,
+            height: 48,
+          }}
+        >
+          <Wallet />
+        </Button>
+      </Tooltip>
+    </Collapse>
   )
 }

package/src/components/SettingsListItemButton.tsx

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