@lifi/widget 3.7.0-beta.7 → 3.7.0-beta.8

package/dist/_esm/utils/format.js

@@ -0,0 +1,114 @@
+import { formatUnits } from 'viem';
+const subscriptMap = ['₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉'];
+export const precisionFormatter = new Intl.NumberFormat('en', {
+    notation: 'standard',
+    roundingPriority: 'morePrecision',
+    maximumSignificantDigits: 4,
+    maximumFractionDigits: 4,
+    useGrouping: false,
+});
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export function formatTokenAmount(amount, decimals) {
+    const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
+    const parsedAmount = Number.parseFloat(formattedAmount);
+    if (parsedAmount === 0 || Number.isNaN(Number(formattedAmount))) {
+        return '0';
+    }
+    return precisionFormatter.format(parsedAmount);
+}
+export function formatSlippage(slippage = '', defaultValue = '', returnInitial = false) {
+    if (!slippage) {
+        return slippage;
+    }
+    const parsedSlippage = Number.parseFloat(slippage);
+    if (Number.isNaN(Number(slippage)) && !Number.isNaN(parsedSlippage)) {
+        return parsedSlippage.toString();
+    }
+    if (Number.isNaN(parsedSlippage)) {
+        return defaultValue;
+    }
+    if (parsedSlippage > 100) {
+        return '100';
+    }
+    if (parsedSlippage < 0) {
+        return Math.abs(parsedSlippage).toString();
+    }
+    if (returnInitial) {
+        return slippage;
+    }
+    return parsedSlippage.toString();
+}
+export function formatInputAmount(amount, decimals = null, returnInitial = false) {
+    if (!amount) {
+        return amount;
+    }
+    let formattedAmount = amount.trim().replaceAll(',', '.');
+    if (formattedAmount.startsWith('.')) {
+        formattedAmount = `0${formattedAmount}`;
+    }
+    const parsedAmount = Number.parseFloat(formattedAmount);
+    if (Number.isNaN(Number(formattedAmount)) && !Number.isNaN(parsedAmount)) {
+        return parsedAmount.toString();
+    }
+    if (Number.isNaN(Math.abs(Number(formattedAmount)))) {
+        return '';
+    }
+    if (returnInitial) {
+        return formattedAmount;
+    }
+    let [integer, fraction = ''] = formattedAmount.split('.');
+    if (decimals !== null && fraction.length > decimals) {
+        fraction = fraction.slice(0, decimals);
+    }
+    integer = integer.replace(/^0+|-/, '');
+    fraction = fraction.replace(/(0+)$/, '');
+    return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
+}
+export function formatTokenPrice(amount, price) {
+    if (!amount || !price) {
+        return 0;
+    }
+    if (Number.isNaN(Number(amount)) || Number.isNaN(Number(price))) {
+        return 0;
+    }
+    return Number.parseFloat(amount) * Number.parseFloat(price);
+}
+/**
+ * Converts a number to a subscript format if it contains leading zeros in the fractional part.
+ *
+ * @param {number} value - The number to be converted.
+ * @param {Intl.NumberFormatOptions} options An object that contains one or more properties that specify comparison options.
+ * @returns {string} - The number formatted as a string, with subscripts for leading zeros if applicable.
+ */
+export function convertToSubscriptFormat(value, options) {
+    let formattedValue;
+    if (options) {
+        formattedValue = value.toLocaleString('en', options);
+    }
+    else {
+        formattedValue = precisionFormatter.format(value);
+    }
+    // Calculate the number of zeros after the decimal point
+    const d = Math.ceil(Math.log10(Math.abs(value)));
+    // If the value does not have significant leading zeros in the fractional part, return the formatted value as is
+    if (d > -3 || !value) {
+        return formattedValue;
+    }
+    // Calculate the number of leading zeros in the fractional part
+    const leadingZeros = Math.abs(d);
+    const fractionalPartExtractor = value > 0 ? 2 : 3;
+    // Extract the fractional part of the formatted value, excluding the leading zeros and "0." or "-0."
+    const fractionalPart = formattedValue.slice(leadingZeros + fractionalPartExtractor);
+    // Convert the number of leading zeros to their corresponding Unicode subscript characters
+    const subscript = leadingZeros
+        .toString()
+        .split('')
+        .map((digit) => subscriptMap[digit])
+        .join('');
+    return `${value > 0 ? '' : '-'}0.0${subscript}${fractionalPart}`;
+}
+//# sourceMappingURL=format.js.map

package/dist/_esm/utils/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../utils/format.ts"],"names":[],"mappings":"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"}

package/dist/_esm/utils/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../utils/input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,WAAmB,EACnB,WAAmB,EACnB,OAAoB,EACpB,EAAE;IACF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAM;IACR,CAAC;IACD,IAAI,IAAI,GAAG,WAAW,CAAA;IACtB,IAAI,GAAG,GAAG,WAAW,CAAA;IACrB,IAAI,IAAI,GAAG,WAAW,CAAA;IACtB,IAAI,GAAG,GAAG,CAAC,CAAA;IACX,+CAA+C;IAC/C,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QACnB,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,CAAA;QACvB,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,IAAI,CAAA;QAC/B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACjC,kFAAkF;QAClF,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,CAAA;QAC3C,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,GAAG,GAAG,CAAA;YACV,GAAG,GAAG,GAAG,GAAG,CAAC,CAAA;QACf,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,GAAG,CAAC,CAAA;QAChB,CAAC;IACH,CAAC;IACD,MAAM,QAAQ,GAAG,GAAG,IAAI,IAAI,CAAA;IAC5B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACnC,CAAC,CAAA"}

package/dist/_esm/utils/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../utils/item.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAI,MAAS,EAAE,KAAoB,EAAE,EAAE;IAClE,IAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;AACvC,CAAC,CAAA"}

package/dist/_esm/utils/navigationRoutes.d.ts

@@ -0,0 +1,27 @@
+export declare const navigationRoutes: {
+    home: string;
+    activeTransactions: string;
+    bridges: string;
+    exchanges: string;
+    fromChain: string;
+    fromToken: string;
+    languages: string;
+    routes: string;
+    settings: string;
+    toChain: string;
+    toToken: string;
+    toTokenNative: string;
+    transactionDetails: string;
+    transactionExecution: string;
+    transactionHistory: string;
+    sendToWallet: string;
+    bookmarks: string;
+    recentWallets: string;
+    connectedWallets: string;
+    configuredWallets: string;
+};
+export declare const navigationRoutesValues: string[];
+export declare const stickyHeaderRoutes: string[];
+export declare const backButtonRoutes: string[];
+export type NavigationRouteTypeKeys = keyof typeof navigationRoutes;
+export type NavigationRouteType = (typeof navigationRoutes)[NavigationRouteTypeKeys];

package/dist/_esm/utils/navigationRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigationRoutes.js","sourceRoot":"","sources":["../../utils/navigationRoutes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,GAAG;IACT,kBAAkB,EAAE,qBAAqB;IACzC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,UAAU;IACnB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,qBAAqB;IACzC,oBAAoB,EAAE,uBAAuB;IAC7C,kBAAkB,EAAE,qBAAqB;IACzC,YAAY,EAAE,gBAAgB;IAC9B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,gBAAgB;IAC/B,gBAAgB,EAAE,mBAAmB;IACrC,iBAAiB,EAAE,oBAAoB;CACxC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;AAErE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,IAAI;IACrB,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,gBAAgB;IACjC,gBAAgB,CAAC,iBAAiB;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,gBAAgB;IACjC,gBAAgB,CAAC,iBAAiB;CACnC,CAAA"}

package/dist/_esm/utils/wallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet.js","sourceRoot":"","sources":["../../utils/wallet.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CACjD,OAAO;IACL,CAAC,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;IACzE,CAAC,CAAC,IAAI,CAAA"}

package/dist/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -0,0 +1,98 @@
+import { ArrowForward, ErrorRounded, InfoRounded } from '@mui/icons-material'
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useProcessMessage } from '../../hooks/useProcessMessage.js'
+import { useRouteExecution } from '../../hooks/useRouteExecution.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { TokenAvatarGroup } from '../Avatar/Avatar.style.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { StepTimer } from '../Step/StepTimer.js'
+import { ListItem, ListItemButton } from './ActiveTransactions.style.js'
+
+export const ActiveTransactionItem: React.FC<{
+  routeId: string
+  dense?: boolean
+}> = ({ routeId, dense }) => {
+  const navigate = useNavigate()
+  const { route, status } = useRouteExecution({
+    routeId,
+    executeInBackground: true,
+  })
+
+  const lastActiveStep = route?.steps.findLast((step) => step.execution)
+  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1)
+
+  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess)
+
+  if (!route || !lastActiveStep) {
+    return null
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes.transactionExecution, { state: { routeId } })
+  }
+
+  const getStatusComponent = () => {
+    switch (lastActiveProcess?.status) {
+      case 'ACTION_REQUIRED':
+        return <InfoRounded color="info" fontSize="small" />
+      case 'FAILED':
+        return <ErrorRounded color="error" fontSize="small" />
+      default:
+        return (
+          <Typography fontSize={14} fontWeight={600}>
+            <StepTimer step={lastActiveStep} hideInProgress />
+          </Typography>
+        )
+    }
+  }
+
+  const ListItemComponent = dense ? ListItem : ListItemButton
+
+  return (
+    <ListItemComponent onClick={handleClick} dense disableRipple={dense}>
+      <ListItemAvatar>
+        <TokenAvatarGroup total={2}>
+          <TokenAvatar token={route.fromToken} />
+          <TokenAvatar token={route.toToken} />
+        </TokenAvatarGroup>
+      </ListItemAvatar>
+      <ListItemText
+        sx={{ margin: 0 }}
+        disableTypography
+        primary={
+          <Typography
+            fontWeight={500}
+            lineHeight={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: 2,
+              height: 16,
+            }}
+          >
+            {route.fromToken.symbol}
+            <ArrowForward sx={{ paddingX: 0.5 }} />
+            {route.toToken.symbol}
+          </Typography>
+        }
+        secondary={
+          status !== RouteExecutionStatus.Done ? (
+            <Typography
+              fontWeight={400}
+              fontSize={12}
+              color="text.secondary"
+              lineHeight={1}
+              mt={0.75}
+              ml={2}
+            >
+              {title}
+            </Typography>
+          ) : null
+        }
+      />
+      {getStatusComponent()}
+    </ListItemComponent>
+  )
+}

package/dist/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -0,0 +1,39 @@
+import {
+  Button,
+  ListItem as MuiListItem,
+  ListItemButton as MuiListItemButton,
+  listItemSecondaryActionClasses,
+  styled,
+} from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
+
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  height: 64,
+  '&:hover': {
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
+  },
+}))
+
+export const ListItem = styled(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  [`.${listItemSecondaryActionClasses.root}`]: {
+    right: theme.spacing(3),
+  },
+  '&:hover': {
+    cursor: 'pointer',
+  },
+}))
+
+export const ShowAllButton = styled(Button)(({ theme }) => ({
+  background: 'none',
+  '&:hover': {
+    background: 'none',
+  },
+  padding: theme.spacing(0.75, 2),
+  fontSize: '0.875rem',
+}))

package/dist/components/ActiveTransactions/ActiveTransactions.tsx

@@ -0,0 +1,42 @@
+import type { CardProps } from '@mui/material'
+import { Stack } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { Card } from '../Card/Card.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { ActiveTransactionItem } from './ActiveTransactionItem.js'
+import { ShowAllButton } from './ActiveTransactions.style.js'
+
+export const ActiveTransactions: React.FC<CardProps> = (props) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const executingRoutes = useExecutingRoutesIds()
+
+  if (!executingRoutes?.length) {
+    return null
+  }
+
+  const handleShowAll = () => {
+    navigate(navigationRoutes.activeTransactions)
+  }
+
+  const hasShowAll = executingRoutes?.length > 2
+
+  return (
+    <Card type="selected" selectionColor="secondary" {...props}>
+      <CardTitle>{t('header.activeTransactions')}</CardTitle>
+      <Stack spacing={1.5} pt={1.5} pb={hasShowAll ? 0 : 2}>
+        {executingRoutes.slice(0, 2).map((routeId) => (
+          <ActiveTransactionItem key={routeId} routeId={routeId} dense />
+        ))}
+      </Stack>
+      {hasShowAll ? (
+        <ShowAllButton disableRipple fullWidth onClick={handleShowAll}>
+          {t('button.showAll')}
+        </ShowAllButton>
+      ) : null}
+    </Card>
+  )
+}

package/dist/components/AlertMessage/AlertMessage.style.tsx

@@ -0,0 +1,42 @@
+import { Box, alpha, darken, lighten, styled } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
+import type { Severity } from './types.js'
+
+interface AlertSeverityProps {
+  severity: Severity
+}
+
+export const AlertMessageCard = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme, severity }) => ({
+  borderRadius: theme.shape.borderRadius,
+  position: 'relative',
+  whiteSpace: 'pre-line',
+  width: '100%',
+  paddingBottom: theme.spacing(2),
+  backgroundColor:
+    severity === 'warning'
+      ? getWarningBackgroundColor(theme)
+      : getInfoBackgroundColor(theme),
+}))
+
+export const AlertMessageCardTitle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme, severity }) => ({
+  display: 'flex',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  gap: theme.spacing(1),
+  color:
+    severity === 'warning'
+      ? theme.palette.mode === 'light'
+        ? darken(theme.palette.warning.main, 0.36)
+        : alpha(theme.palette.warning.main, 1)
+      : theme.palette.mode === 'light'
+        ? theme.palette.info.main
+        : lighten(theme.palette.info.main, 0.24),
+}))

package/dist/components/AlertMessage/AlertMessage.tsx

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@mui/material'
+import type { 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
+  multilineTitle?: boolean
+  severity?: Severity
+}
+
+export const AlertMessage = ({
+  title,
+  icon,
+  children,
+  multilineTitle,
+  severity = 'info',
+  ...rest
+}: AlertMessageProps) => (
+  <AlertMessageCard severity={severity} {...rest}>
+    <AlertMessageCardTitle
+      severity={severity}
+      alignItems={multilineTitle ? 'start' : 'center'}
+    >
+      {icon}
+      {title}
+    </AlertMessageCardTitle>
+    {children}
+  </AlertMessageCard>
+)

package/dist/components/AlertMessage/types.ts

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

package/dist/components/AmountInput/AmountInput.style.tsx

@@ -0,0 +1,45 @@
+import {
+  Box,
+  InputBase,
+  FormControl as MuiFormControl,
+  inputBaseClasses,
+  styled,
+} from '@mui/material'
+
+export const maxInputFontSize = 24
+export const minInputFontSize = 14
+
+export const FormContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+}))
+
+export const FormControl = styled(MuiFormControl)(() => ({
+  height: 40,
+}))
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  fontSize: 24,
+  fontWeight: 700,
+  boxShadow: 'none',
+  lineHeight: 1.5,
+  [`.${inputBaseClasses.input}`]: {
+    height: 24,
+    padding: theme.spacing(0, 0, 0, 2),
+  },
+  '& 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',
+  },
+}))

package/dist/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,129 @@
+import type { Token } from '@lifi/sdk'
+import type { CardProps } from '@mui/material'
+import type { ChangeEvent, ReactNode } from 'react'
+import { useLayoutEffect, useRef } 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 { useFieldController } from '../../stores/form/useFieldController.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { DisabledUI } from '../../types/widget.js'
+import { formatInputAmount } from '../../utils/format.js'
+import { fitInputText } from '../../utils/input.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { InputCard } from '../Card/InputCard.js'
+import {
+  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?.includes(DisabledUI.FromAmount)
+  return (
+    <AmountInputBase
+      formType={formType}
+      token={token}
+      endAdornment={
+        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
+      }
+      bottomAdornment={<PriceFormHelperText formType={formType} />}
+      disabled={disabled}
+      {...props}
+    />
+  )
+}
+
+export const AmountInputBase: React.FC<
+  FormTypeProps &
+    CardProps & {
+      token?: Token
+      startAdornment?: ReactNode
+      endAdornment?: ReactNode
+      bottomAdornment?: ReactNode
+      disabled?: boolean
+    }
+> = ({
+  formType,
+  token,
+  startAdornment,
+  endAdornment,
+  bottomAdornment,
+  disabled,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  const ref = useRef<HTMLInputElement>(null)
+  const amountKey = FormKeyHelper.getAmountKey(formType)
+  const { onChange, onBlur, value } = useFieldController({ name: amountKey })
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value } = event.target
+    const formattedAmount = formatInputAmount(value, token?.decimals, true)
+    onChange(formattedAmount)
+  }
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value } = event.target
+    const formattedAmount = formatInputAmount(value, token?.decimals)
+    onChange(formattedAmount)
+    onBlur()
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to run effect on value change
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current)
+    }
+  }, [value])
+
+  return (
+    <InputCard {...props}>
+      <CardTitle>{t('header.send')}</CardTitle>
+      <FormContainer>
+        <AmountInputStartAdornment formType={formType} />
+        <FormControl fullWidth>
+          <Input
+            inputRef={ref}
+            size="small"
+            autoComplete="off"
+            placeholder="0"
+            startAdornment={startAdornment}
+            endAdornment={endAdornment}
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={value}
+            name={amountKey}
+            disabled={disabled}
+            required
+          />
+          {bottomAdornment}
+        </FormControl>
+      </FormContainer>
+    </InputCard>
+  )
+}

package/dist/components/AmountInput/AmountInputAdornment.style.tsx

@@ -0,0 +1,14 @@
+import { Button as MuiButton, Skeleton, styled } from '@mui/material'
+
+export const MaxButton = styled(MuiButton)(({ theme }) => ({
+  padding: theme.spacing(0.5, 1, 0.625, 1),
+  lineHeight: 1.0715,
+  fontSize: '0.875rem',
+  minWidth: 'unset',
+}))
+
+export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
+  width: 46,
+  height: 24,
+  borderRadius: theme.shape.borderRadiusSecondary,
+}))