@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,203 @@
+import type { Token } from '@lifi/sdk'
+import type { CardProps } from '@mui/material'
+import type { ChangeEvent, ReactNode } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import {
+  formatInputAmount,
+  formatTokenPrice,
+  priceToTokenAmount,
+  usdDecimals,
+} from '../../utils/format.js'
+import { fitInputText } from '../../utils/input.js'
+import { InputCard } from '../Card/InputCard.js'
+import {
+  AmountInputCardHeader,
+  AmountInputCardTitle,
+  FormContainer,
+  FormControl,
+  Input,
+  maxInputFontSize,
+  minInputFontSize,
+} from './AmountInput.style.js'
+import { AmountInputEndAdornment } from './AmountInputEndAdornment.js'
+import { AmountInputStartAdornment } from './AmountInputStartAdornment.js'
+import { PriceFormHelperText } from './PriceFormHelperText.js'
+
+export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
+  formType,
+  ...props
+}) => {
+  const { disabledUI } = useWidgetConfig()
+
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  const { token } = useToken(chainId, tokenAddress)
+
+  const disabled = disabledUI?.fromAmount
+  return (
+    <AmountInputBase
+      formType={formType}
+      token={token}
+      bottomAdornment={<PriceFormHelperText formType={formType} />}
+      disabled={disabled}
+      {...props}
+    />
+  )
+}
+
+const AmountInputBase: React.FC<
+  FormTypeProps &
+    CardProps & {
+      token?: Token
+      startAdornment?: ReactNode
+      bottomAdornment?: ReactNode
+      disabled?: boolean
+    }
+> = ({
+  formType,
+  token,
+  startAdornment,
+  bottomAdornment,
+  disabled,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  const { mode, modeOptions } = useWidgetConfig()
+  const ref = useRef<HTMLInputElement>(null)
+
+  const isEditingRef = useRef(false)
+  const [formattedPriceInput, setFormattedPriceInput] = useState('')
+
+  const amountKey = FormKeyHelper.getAmountKey(formType)
+  const [value] = useFieldValues(amountKey)
+  const { setFieldValue } = useFieldActions()
+  const { inputMode } = useInputModeStore()
+
+  const currentInputMode = inputMode[formType]
+  let displayValue: string
+  if (isEditingRef.current) {
+    if (currentInputMode === 'price') {
+      displayValue = formattedPriceInput
+    } else {
+      displayValue = value as string
+    }
+  } else {
+    if (currentInputMode === 'price') {
+      const priceValue = formatTokenPrice(value as string, token?.priceUSD)
+      displayValue = formatInputAmount(
+        priceValue.toFixed(usdDecimals),
+        usdDecimals
+      )
+    } else {
+      displayValue = value as string
+    }
+  }
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value: inputValue } = event.target
+    isEditingRef.current = true
+
+    let formattedValue: string
+    if (currentInputMode === 'price') {
+      const cleanInputValue = inputValue.replace('$', '')
+      formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)
+      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
+      setFormattedPriceInput(formattedValue)
+      setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })
+    } else {
+      formattedValue = formatInputAmount(inputValue, token?.decimals, true)
+      setFieldValue(amountKey, formattedValue, {
+        isDirty: true,
+        isTouched: true,
+      })
+    }
+  }
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value: inputValue } = event.target
+    isEditingRef.current = false
+
+    let formattedValue: string
+    if (currentInputMode === 'price') {
+      const cleanInputValue = inputValue.replace('$', '')
+      formattedValue = formatInputAmount(cleanInputValue, usdDecimals)
+      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
+      const formattedAmount = formatInputAmount(tokenValue, token?.decimals)
+      setFieldValue(amountKey, formattedAmount, {
+        isDirty: true,
+        isTouched: true,
+      })
+    } else {
+      formattedValue = formatInputAmount(inputValue, token?.decimals)
+      setFieldValue(amountKey, formattedValue, {
+        isDirty: true,
+        isTouched: true,
+      })
+    }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current)
+    }
+  }, [displayValue])
+
+  const title =
+    mode === 'custom'
+      ? modeOptions?.custom?.type === 'deposit'
+        ? t('header.amount')
+        : t('header.youPay')
+      : t('header.send')
+
+  return (
+    <InputCard {...props}>
+      <AmountInputCardHeader>
+        <AmountInputCardTitle>{title}</AmountInputCardTitle>
+      </AmountInputCardHeader>
+      <FormContainer>
+        <AmountInputStartAdornment formType={formType} />
+        <FormControl fullWidth>
+          <Input
+            inputRef={ref}
+            size="small"
+            autoComplete="off"
+            placeholder={currentInputMode === 'price' ? '$0' : '0'}
+            startAdornment={startAdornment}
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={
+              currentInputMode === 'price'
+                ? displayValue
+                  ? `$${displayValue}`
+                  : ''
+                : displayValue
+            }
+            name={amountKey}
+            disabled={disabled}
+            required
+          />
+          {bottomAdornment}
+        </FormControl>
+      </FormContainer>
+      {!disabled && <AmountInputEndAdornment formType={formType} />}
+    </InputCard>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import { ButtonTertiary } from '../ButtonTertiary.js'
+
+export const ButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    padding: theme.spacing(0, 2, 2, 2),
+  }))
+
+export const AmountInputButton: React.FC<
+  React.ComponentProps<typeof ButtonTertiary>
+> = styled(ButtonTertiary)(({ theme }) => ({
+  flex: 1,
+  padding: theme.spacing(0.5, 1.5),
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  height: 'auto',
+  borderRadius: theme.shape.borderRadiusSecondary,
+}))

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -0,0 +1,96 @@
+import { formatUnits } from '@lifi/sdk'
+import type React from 'react'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.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 {
+  AmountInputButton,
+  ButtonContainer,
+} from './AmountInputEndAdornment.style.js'
+
+export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =
+  memo(({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const { getChainById } = useAvailableChains()
+    const { setFieldValue } = useFieldActions()
+
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+
+    // 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)
+
+    const { token } = useTokenAddressBalance(chainId, tokenAddress)
+
+    const getMaxAmount = () => {
+      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)
+        if (token.amount > recommendedAmount) {
+          maxAmount = token.amount - recommendedAmount
+        }
+      }
+      return maxAmount
+    }
+
+    const handlePercentage = (percentage: number) => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
+        setFieldValue(
+          FormKeyHelper.getAmountKey(formType),
+          formatUnits(percentageAmount, token.decimals),
+          {
+            isTouched: true,
+          }
+        )
+      }
+    }
+
+    const handleMax = () => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        setFieldValue(
+          FormKeyHelper.getAmountKey(formType),
+          formatUnits(maxAmount, token.decimals),
+          {
+            isTouched: true,
+          }
+        )
+      }
+    }
+
+    if (formType !== 'from' || !token) {
+      return null
+    }
+
+    return (
+      <ButtonContainer>
+        <AmountInputButton onClick={() => handlePercentage(25)}>
+          25%
+        </AmountInputButton>
+        <AmountInputButton onClick={() => handlePercentage(50)}>
+          50%
+        </AmountInputButton>
+        <AmountInputButton onClick={() => handlePercentage(75)}>
+          75%
+        </AmountInputButton>
+        <AmountInputButton onClick={handleMax}>
+          {t('button.max')}
+        </AmountInputButton>
+      </ButtonContainer>
+    )
+  })

package/src/components/AmountInput/AmountInputStartAdornment.tsx

@@ -0,0 +1,26 @@
+import { useChain } from '../../hooks/useChain.js'
+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 { AvatarBadgedDefault } from '../Avatar/Avatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+
+export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  const { chain } = useChain(chainId)
+  const { token } = useToken(chainId, tokenAddress)
+  const isSelected = !!(chain && token)
+
+  return isSelected ? (
+    <TokenAvatar token={token} chain={chain} />
+  ) : (
+    <AvatarBadgedDefault />
+  )
+}

package/src/components/AmountInput/PriceFormHelperText.style.tsx

@@ -0,0 +1,34 @@
+import { Button, styled } from '@mui/material'
+import type React from 'react'
+
+export const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =
+  styled(Button)(({ theme, onClick }) => ({
+    color: theme.vars.palette.text.secondary,
+    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+    maxHeight: 16,
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+    backgroundColor: 'transparent',
+    minWidth: 32,
+    ...(onClick
+      ? {
+          '&:hover': {
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+          },
+          ...theme.applyStyles('dark', {
+            backgroundColor: 'transparent',
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+            },
+          }),
+        }
+      : {
+          cursor: 'text',
+          userSelect: 'text',
+          pointerEvents: 'none',
+          ...theme.applyStyles('dark', {
+            backgroundColor: 'transparent',
+          }),
+        }),
+  }))

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -0,0 +1,135 @@
+import type { TokenAmount } from '@lifi/sdk'
+import SwapVertIcon from '@mui/icons-material/SwapVert'
+import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import type React from 'react'
+import { 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 { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { InputPriceButton } from './PriceFormHelperText.style.js'
+
+export const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =
+  memo<FormTypeProps>(({ formType }) => {
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+    return (
+      <PriceFormHelperTextBase
+        formType={formType}
+        isLoading={isLoading}
+        tokenAddress={tokenAddress}
+        token={token}
+      />
+    )
+  })
+
+const PriceFormHelperTextBase: React.FC<
+  FormTypeProps & {
+    isLoading?: boolean
+    tokenAddress?: string
+    token?: TokenAmount
+  }
+> = ({ formType, isLoading, tokenAddress, token }) => {
+  const { t } = useTranslation()
+  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
+  const { inputMode, toggleInputMode } = useInputModeStore()
+
+  const currentInputMode = inputMode[formType]
+
+  const tokenAmount = token
+    ? formatTokenAmount(token.amount, token.decimals)
+    : '0'
+
+  const getPriceAmountDisplayValue = () => {
+    if (currentInputMode === 'amount') {
+      const tokenPrice = formatTokenPrice(
+        amount,
+        token?.priceUSD,
+        token?.decimals
+      )
+      return t('format.currency', { value: tokenPrice })
+    } else {
+      return t('format.tokenAmount', { value: amount || '0' })
+    }
+  }
+
+  const handleToggleMode = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    toggleInputMode(formType)
+  }
+
+  return (
+    <FormHelperText
+      component="div"
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        margin: 0,
+        marginLeft: 1.25,
+        marginTop: 0.5,
+      }}
+    >
+      <InputPriceButton
+        onClick={token?.priceUSD ? handleToggleMode : undefined}
+      >
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontWeight: 500,
+            fontSize: 12,
+            lineHeight: 1,
+            marginRight: 0.25,
+            maxWidth: 136,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {getPriceAmountDisplayValue()}
+        </Typography>
+        {currentInputMode === 'price' && token?.symbol ? (
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontWeight: 500,
+              fontSize: 12,
+              lineHeight: 1,
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              marginRight: 0.25,
+            }}
+          >
+            {token.symbol}
+          </Typography>
+        ) : null}
+        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}
+      </InputPriceButton>
+      {isLoading && tokenAddress ? (
+        <Skeleton variant="text" width={56} height={16} />
+      ) : token?.amount ? (
+        <Typography
+          sx={{
+            fontWeight: 500,
+            fontSize: 12,
+            color: 'text.secondary',
+            lineHeight: 1,
+            paddingLeft: 0.25,
+          }}
+          title={tokenAmount}
+        >
+          {`/ ${t('format.tokenAmount', {
+            value: tokenAmount,
+          })}`}
+        </Typography>
+      ) : null}
+    </FormHelperText>
+  )
+}

package/src/components/AppContainer.tsx

@@ -0,0 +1,154 @@
+import type { BoxProps, ContainerProps } from '@mui/material'
+import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'
+import type React from 'react'
+import type { PropsWithChildren } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useHeaderHeight } from '../stores/header/useHeaderStore.js'
+import type { WidgetVariant } from '../types/widget.js'
+import { createElementId, ElementId } from '../utils/elements.js'
+import { getWidgetMaxHeight } from '../utils/widgetSize.js'
+
+// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
+//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
+//  A Number of other components and hooks work with height values that are often set on or derived from these elements
+//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
+//    - useTokenListHeight
+//    - useSetContentHeight
+//  Also check any code that is using the methods from elements.ts utils file
+
+export const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(
+  ({ theme }) => {
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'start',
+      flex: 1,
+      height:
+        theme.container?.display === 'flex'
+          ? '100%'
+          : theme.container?.maxHeight
+            ? 'auto'
+            : theme.container?.height || 'auto',
+    }
+  }
+)
+
+export const RelativeContainer: React.FC<
+  BoxProps & { variant?: WidgetVariant }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ theme }) => {
+  const maxHeight =
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
+      ? 'none'
+      : getWidgetMaxHeight(theme)
+  return {
+    position: 'relative',
+    boxSizing: 'content-box',
+    width: '100%',
+    minWidth: theme.breakpoints.values.xs,
+    maxWidth: theme.breakpoints.values.sm,
+    background: theme.vars.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    ...theme.container,
+    maxHeight:
+      theme.container?.display === 'flex' && !theme.container?.height
+        ? '100%'
+        : maxHeight,
+    zIndex: 1, // NB: higher than of expansion containers
+    variants: [
+      {
+        props: {
+          variant: 'drawer',
+        },
+        style: {
+          maxHeight: 'none',
+          height: '100%',
+          boxShadow: 'none',
+          borderRadius: 0,
+        },
+      },
+    ],
+  }
+})
+
+interface CssBaselineContainerProps {
+  variant?: WidgetVariant
+  paddingTopAdjustment: number
+  elementId: string
+}
+
+const CssBaselineContainer = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) =>
+    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
+})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {
+  const maxHeight =
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
+      ? 'none'
+      : getWidgetMaxHeight(theme)
+  return {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    margin: 0,
+    width: '100%',
+    maxHeight:
+      variant === 'drawer' || theme.container?.display === 'flex'
+        ? 'none'
+        : maxHeight,
+    overflowY: 'auto',
+    height: theme.container?.display === 'flex' ? 'auto' : '100%',
+    paddingTop: paddingTopAdjustment,
+    '&:has(.long-list)': {
+      minHeight: getWidgetMaxHeight(theme),
+      maxHeight: getWidgetMaxHeight(theme),
+    },
+  }
+})
+
+export const FlexContainer: React.FC<ContainerProps> = styled(Container)({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+})
+
+export const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {
+  // const ref = useRef<HTMLDivElement>(null);
+  const { variant, elementId, theme } = useWidgetConfig()
+  const { headerHeight } = useHeaderHeight()
+  const positionFixedAdjustment =
+    theme?.header?.position === 'fixed' ? headerHeight : 0
+
+  return (
+    <RelativeContainer
+      variant={variant}
+      id={createElementId(ElementId.RelativeContainer, elementId)}
+    >
+      <CssBaselineContainer
+        id={createElementId(ElementId.ScrollableContainer, elementId)}
+        variant={variant}
+        enableColorScheme
+        paddingTopAdjustment={positionFixedAdjustment}
+        elementId={elementId}
+        // ref={ref}
+      >
+        <FlexContainer disableGutters>{children}</FlexContainer>
+      </CssBaselineContainer>
+      {/* <ScrollToLocation elementRef={ref} /> */}
+    </RelativeContainer>
+  )
+}
+
+// export const ScrollToLocation: React.FC<{
+//   elementRef: RefObject<HTMLElement>;
+// }> = ({ elementRef }) => {
+//   const { pathname } = useLocation();
+//   useLayoutEffect(() => {
+//     elementRef.current?.scrollTo(0, 0);
+//   }, [elementRef, pathname]);
+//   return null;
+// };