@lifi/widget 4.1.0 → 4.2.0

package/src/components/AmountInput/AmountInputEndAdornment.style.ts

@@ -18,5 +18,5 @@ export const AmountInputButton: React.FC<
   fontWeight: 700,
   lineHeight: 1.3334,
   height: 'auto',
-  borderRadius: theme.shape.borderRadiusSecondary,
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
 }))

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,4 +1,5 @@
 import { formatUnits } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
 import type React from 'react'
 import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -25,6 +26,9 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       FormKeyHelper.getTokenKey(formType)
     )
 
+    const chain = getChainById(chainId)
+    const { account } = useAccount({ chainType: chain?.chainType })
+
     // We get gas recommendations for the source chain to make sure that after pressing the Max button
     // the user will have enough funds remaining to cover gas costs
     const { data } = useGasRecommendation(chainId)
@@ -35,7 +39,6 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       if (!token?.amount) {
         return 0n
       }
-      const chain = getChainById(chainId)
       let maxAmount = token.amount
       if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
         const recommendedAmount = BigInt(data.recommended.amount)
@@ -73,7 +76,7 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       }
     }
 
-    if (formType !== 'from' || !token) {
+    if (formType !== 'from' || !token || !account?.isConnected) {
       return null
     }
 

package/src/components/AmountInputCard/AmountInputCard.style.tsx

@@ -0,0 +1,157 @@
+import {
+  Box,
+  ButtonBase,
+  InputBase,
+  inputBaseClasses,
+  styled,
+  Typography,
+} from '@mui/material'
+import type React from 'react'
+import type { FormType } from '../../stores/form/types.js'
+import { InputCard } from '../Card/InputCard.js'
+
+export const maxInputFontSize = 30
+export const minInputFontSize = 20
+export const amountHeight = 32
+export const footerFontSize = 12
+
+export const AmountCard: React.FC<
+  React.ComponentProps<typeof InputCard> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(InputCard, {
+  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
+})<{ formType?: FormType; mask?: boolean }>(
+  ({ theme, formType, mask = true }) => {
+    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+    // Notch faces the swap button between the stacked cards: bottom edge for the
+    // top (send) card, top edge for the bottom (receive) card.
+    const vertical = formType === 'to' ? '-4px' : 'calc(100% + 4px)'
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1.5),
+      padding: theme.spacing(2),
+      ...(cardVariant !== 'outlined' &&
+        mask && {
+          mask: `radial-gradient(circle 22px at 50% ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
+        }),
+    }
+  }
+)
+
+export const CardHeaderRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: 0,
+  height: theme.spacing(2),
+}))
+
+export const CardBodyRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+}))
+
+export const CardFooterRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: theme.spacing(2),
+}))
+
+export const LargeInput: React.FC<React.ComponentProps<typeof InputBase>> =
+  styled(InputBase)(({ theme }) => ({
+    fontSize: maxInputFontSize,
+    fontWeight: 700,
+    lineHeight: 1.4,
+    height: amountHeight,
+    flex: 1,
+    minWidth: 0,
+    boxShadow: 'none',
+    [`.${inputBaseClasses.input}`]: {
+      height: amountHeight,
+      padding: 0,
+    },
+    [`.${inputBaseClasses.input}::placeholder`]: {
+      color: theme.vars.palette.text.primary,
+      opacity: 0.5,
+    },
+    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
+      {
+        WebkitAppearance: 'none',
+        margin: 0,
+      },
+    '& input[type="number"]': {
+      MozAppearance: 'textfield',
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+      color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+      WebkitTextFillColor: 'unset',
+    },
+  }))
+
+export const AmountDisplay: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(() => ({
+    fontSize: maxInputFontSize,
+    fontWeight: 700,
+    lineHeight: 1.4,
+    height: amountHeight,
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    minWidth: 0,
+    overflow: 'visible',
+    whiteSpace: 'nowrap',
+  }))
+
+export const FooterText: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: footerFontSize,
+    fontWeight: 500,
+    lineHeight: 1,
+    color: theme.vars.palette.text.secondary,
+  }))
+
+export const CardContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+}))
+
+export const ToggleButton: React.FC<
+  React.ComponentProps<typeof ButtonBase> & { clickable?: boolean }
+> = styled(ButtonBase, {
+  shouldForwardProp: (prop) => prop !== 'clickable',
+})<{ clickable?: boolean }>(({ theme, clickable }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.25),
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+  marginLeft: theme.spacing(-0.75),
+  backgroundColor: 'transparent',
+  ...(clickable
+    ? {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+        },
+      }
+    : {
+        cursor: 'default',
+        pointerEvents: 'none',
+      }),
+}))

package/src/components/AmountInputCard/AmountInputCardPair.tsx

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@mui/material'
+import type React from 'react'
+import type { JSX } from 'react'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'
+import { SwapButton } from '../SwapButton/SwapButton.js'
+import { CardContainer } from './AmountInputCard.style.js'
+import { ReceiveAmountCard } from './ReceiveAmountCard.js'
+import { SendAmountCard } from './SendAmountCard.js'
+
+export const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {
+  // Refuel's destination is fixed to native gas, so reversing from/to is
+  // meaningless — hide the swap button (and the notch mask it sits in).
+  const { mode } = useWidgetConfig()
+  const showSwapButton = mode !== 'refuel'
+
+  return (
+    <CardContainer {...props}>
+      {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}
+      <SendAmountCard mask={showSwapButton} />
+      <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />
+      <ReceiveAmountCard mask={showSwapButton} />
+    </CardContainer>
+  )
+}

package/src/components/AmountInputCard/BalanceDisplay.style.tsx

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const BalanceContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+  }))

package/src/components/AmountInputCard/BalanceDisplay.tsx

@@ -0,0 +1,46 @@
+import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
+import { Skeleton } from '@mui/material'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { FooterText, footerFontSize } from './AmountInputCard.style.js'
+import { BalanceContainer } from './BalanceDisplay.style.js'
+
+export const BalanceDisplay: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+    if (isLoading && tokenAddress) {
+      return (
+        <Skeleton variant="text" width={72} sx={{ fontSize: footerFontSize }} />
+      )
+    }
+
+    if (!token?.amount) {
+      return null
+    }
+
+    const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+
+    return (
+      <BalanceContainer>
+        <FooterText title={tokenAmount}>
+          {t('format.tokenAmount', { value: tokenAmount })}
+        </FooterText>
+        <AccountBalanceWalletOutlinedIcon
+          sx={{ fontSize: 16, color: 'text.secondary' }}
+        />
+      </BalanceContainer>
+    )
+  }
+)

package/src/components/AmountInputCard/FiatValueToggle.tsx

@@ -0,0 +1,55 @@
+import SwapVertIcon from '@mui/icons-material/SwapVert'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToken } from '../../hooks/useToken.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import { formatTokenPrice } from '../../utils/format.js'
+import { FooterText, ToggleButton } from './AmountInputCard.style.js'
+
+export const FiatValueToggle: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element => {
+    const { t } = useTranslation()
+    const [chainId, tokenAddress, amount] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+      FormKeyHelper.getAmountKey(formType)
+    )
+
+    const { token } = useToken(chainId, tokenAddress)
+    const { inputMode, toggleInputMode } = useInputModeStore()
+    const currentInputMode = inputMode[formType]
+
+    const handleToggle = (e: React.MouseEvent): void => {
+      e.stopPropagation()
+      toggleInputMode(formType)
+    }
+
+    const canToggle = !!token?.priceUSD
+
+    const displayValue =
+      currentInputMode === 'amount'
+        ? t('format.currency', {
+            value: formatTokenPrice(amount, token?.priceUSD, token?.decimals),
+          })
+        : t('format.tokenAmount', { value: amount || '0' })
+
+    return (
+      <ToggleButton
+        clickable={canToggle}
+        onClick={canToggle ? handleToggle : undefined}
+        aria-label={canToggle ? 'Toggle fiat value' : undefined}
+      >
+        <FooterText>{displayValue}</FooterText>
+        {currentInputMode === 'price' && token?.symbol ? (
+          <FooterText>{token.symbol}</FooterText>
+        ) : null}
+        {canToggle ? (
+          <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
+        ) : null}
+      </ToggleButton>
+    )
+  }
+)

package/src/components/AmountInputCard/PercentageChips.style.tsx

@@ -0,0 +1,60 @@
+import { Box, Button, styled } from '@mui/material'
+import { cardClasses } from '@mui/material/Card'
+import type React from 'react'
+
+const chipCount = 4
+const staggerStepMs = 25
+
+const revealStagger = Object.fromEntries(
+  Array.from({ length: chipCount }, (_, index) => [
+    `&[data-delay="${index}"]`,
+    {
+      [`.${cardClasses.root}:hover &`]: {
+        opacity: 1,
+        transform: 'scale(1) translateX(0)',
+        pointerEvents: 'auto',
+        transitionDelay: `${(chipCount - 1 - index) * staggerStepMs}ms`,
+      },
+      [`.${cardClasses.root}:not(:hover) &`]: {
+        transitionDelay: `${index * staggerStepMs}ms`,
+      },
+    },
+  ])
+)
+
+export const ChipContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+}))
+
+export const Chip: React.FC<React.ComponentProps<typeof Button>> = styled(
+  Button
+)(({ theme }) => ({
+  minWidth: 0,
+  padding: theme.spacing(0.5, 1.5),
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  color: theme.vars.palette.text.primary,
+  transition:
+    'opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease',
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  },
+  // Reveal-on-hover — only on devices that support hover. On touch there is no
+  // hover, so the chips stay permanently visible (the default above) instead of
+  // becoming an unreachable dead row.
+  '@media (hover: hover)': {
+    opacity: 0,
+    transform: 'scale(0.85) translateX(10px)',
+    pointerEvents: 'none',
+    ...revealStagger,
+    '@media (prefers-reduced-motion: reduce)': {
+      transform: 'none !important',
+      transitionDelay: '0ms !important',
+    },
+  },
+}))

package/src/components/AmountInputCard/PercentageChips.tsx

@@ -0,0 +1,100 @@
+import { formatUnits } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
+import { Chip, ChipContainer } from './PercentageChips.style.js'
+
+export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const { getChainById } = useAvailableChains()
+    const { setFieldValue } = useFieldActions()
+    const { disabledUI, mode } = useWidgetConfig()
+    const { setSendAmount } = useLinkedLimitFields()
+
+    const amountKey = FormKeyHelper.getAmountKey(formType)
+    const isDisabled = !!disabledUI?.[amountKey as keyof DisabledUIConfig]
+
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+
+    const chain = getChainById(chainId)
+    const { account } = useAccount({ chainType: chain?.chainType })
+
+    const { data } = useGasRecommendation(chainId)
+    const { token } = useTokenAddressBalance(chainId, tokenAddress)
+
+    const getMaxAmount = (): bigint => {
+      if (!token?.amount) {
+        return 0n
+      }
+      let maxAmount = token.amount
+      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+        const recommendedAmount = BigInt(data.recommended.amount)
+        if (token.amount > recommendedAmount) {
+          maxAmount = token.amount - recommendedAmount
+        }
+      }
+      return maxAmount
+    }
+
+    // In limit mode the send amount must flow through the linked-field
+    // derivation so the receive amount recomputes; otherwise it is a plain
+    // form-field write.
+    const applyAmount = (value: string): void => {
+      if (mode === 'limit') {
+        setSendAmount(value)
+      } else {
+        setFieldValue(amountKey, value, { isTouched: true })
+      }
+    }
+
+    const handlePercentage = (percentage: number): void => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
+        applyAmount(formatUnits(percentageAmount, token.decimals))
+      }
+    }
+
+    const handleMax = (): void => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        applyAmount(formatUnits(maxAmount, token.decimals))
+      }
+    }
+
+    if (formType !== 'from' || isDisabled || !token || !account?.isConnected) {
+      return null
+    }
+
+    return (
+      <ChipContainer>
+        <Chip data-delay="0" onClick={() => handlePercentage(25)}>
+          25%
+        </Chip>
+        <Chip data-delay="1" onClick={() => handlePercentage(50)}>
+          50%
+        </Chip>
+        <Chip data-delay="2" onClick={() => handlePercentage(75)}>
+          75%
+        </Chip>
+        <Chip data-delay="3" onClick={handleMax}>
+          {t('button.max')}
+        </Chip>
+      </ChipContainer>
+    )
+  }
+)