@lifi/widget 3.0.0-alpha.0 → 3.0.0-alpha.10

package/_esm/utils/navigationRoutes.js

@@ -0,0 +1,52 @@
+export const navigationRoutes = {
+    home: '/',
+    activeTransactions: 'active-transactions',
+    bridges: 'bridges',
+    exchanges: 'exchanges',
+    fromChain: 'from-chain',
+    fromToken: 'from-token',
+    languages: 'languages',
+    routes: 'routes',
+    selectWallet: 'select-wallet',
+    settings: 'settings',
+    toChain: 'to-chain',
+    toToken: 'to-token',
+    toTokenNative: 'to-token-native',
+    transactionDetails: 'transaction-details',
+    transactionExecution: 'transaction-execution',
+    transactionHistory: 'transaction-history',
+};
+export const navigationRoutesValues = Object.values(navigationRoutes);
+export const stickyHeaderRoutes = [
+    navigationRoutes.activeTransactions,
+    navigationRoutes.bridges,
+    navigationRoutes.exchanges,
+    navigationRoutes.fromChain,
+    navigationRoutes.home,
+    navigationRoutes.routes,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.toChain,
+    navigationRoutes.toTokenNative,
+    navigationRoutes.transactionDetails,
+    navigationRoutes.transactionExecution,
+    navigationRoutes.transactionHistory,
+];
+export const backButtonRoutes = [
+    navigationRoutes.activeTransactions,
+    navigationRoutes.bridges,
+    navigationRoutes.exchanges,
+    navigationRoutes.languages,
+    navigationRoutes.fromChain,
+    navigationRoutes.fromToken,
+    navigationRoutes.routes,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.toChain,
+    navigationRoutes.toToken,
+    navigationRoutes.toTokenNative,
+    navigationRoutes.transactionDetails,
+    navigationRoutes.transactionExecution,
+    navigationRoutes.transactionHistory,
+];
+//# sourceMappingURL=navigationRoutes.js.map

package/_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,YAAY,EAAE,eAAe;IAC7B,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;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAEtE,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,YAAY;IAC7B,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;CACpC,CAAC;AAEF,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,YAAY;IAC7B,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;CACpC,CAAC"}

package/_esm/utils/svm.js

@@ -0,0 +1,11 @@
+import { PublicKey } from '@solana/web3.js';
+export const isSVMAddress = (address) => {
+    try {
+        new PublicKey(address);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+//# sourceMappingURL=svm.js.map

package/_esm/utils/svm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svm.js","sourceRoot":"","sources":["../../utils/svm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,EAAE;IAC9C,IAAI,CAAC;QACH,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC"}

package/_esm/utils/wallet.js

@@ -0,0 +1,4 @@
+export const shortenAddress = (address) => address
+    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    : null;
+//# sourceMappingURL=wallet.js.map

package/_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,CAAC"}

package/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -0,0 +1,98 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { StepTimer } from '../Step/StepTimer';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
+
+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 <InfoRoundedIcon color="info" fontSize="small" />;
+      case 'FAILED':
+        return <ErrorRoundedIcon color="error" fontSize="small" />;
+      default:
+        return (
+          <Typography fontSize={14} fontWeight={500}>
+            <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}
+            <ArrowForwardIcon 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/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -0,0 +1,39 @@
+import {
+  Button,
+  ListItem as MuiListItem,
+  ListItemButton as MuiListItemButton,
+} from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+
+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.palette.mode, '4%'),
+  },
+}));
+
+export const ListItem = styled(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+  padding: theme.spacing(0, 1.5),
+  [`.${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/components/ActiveTransactions/ActiveTransactions.tsx

@@ -0,0 +1,43 @@
+import type { BoxProps } from '@mui/material';
+import { Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks';
+import { useExecutingRoutesIds } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ActiveTransactionItem } from './ActiveTransactionItem';
+import { ShowAllButton } from './ActiveTransactions.style';
+
+export const ActiveTransactions: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { account } = useAccount();
+  const executingRoutes = useExecutingRoutesIds(account.address);
+
+  if (!executingRoutes?.length) {
+    return null;
+  }
+
+  const handleShowAll = () => {
+    navigate(navigationRoutes.activeTransactions);
+  };
+
+  const hasShowAll = executingRoutes?.length > 2;
+
+  return (
+    <Card variant="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/components/AmountInput/AmountInput.style.tsx

@@ -0,0 +1,35 @@
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+
+export const maxInputFontSize = 24;
+export const minInputFontSize = 14;
+
+export const FormControl = styled(MuiFormControl)(({ theme }) => ({
+  padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  fontSize: 24,
+  fontWeight: 700,
+  boxShadow: 'none',
+  // padding: theme.spacing(2, 2, 2, 0),
+  [`.${inputBaseClasses.input}`]: {
+    height: 32,
+    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/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,126 @@
+import type { Token } from '@lifi/sdk';
+import type { BoxProps } from '@mui/material';
+import type { ChangeEvent, ReactNode } from 'react';
+import { useLayoutEffect, useRef } from 'react';
+import { useController, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useToken } from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import { DisabledUI } from '../../types';
+import { fitInputText, formatInputAmount } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import {
+  FormControl,
+  Input,
+  maxInputFontSize,
+  minInputFontSize,
+} from './AmountInput.style';
+import { AmountInputEndAdornment } from './AmountInputEndAdornment';
+import { AmountInputStartAdornment } from './AmountInputStartAdornment';
+import { FormPriceHelperText } from './FormPriceHelperText';
+
+export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
+  formType,
+  ...props
+}) => {
+  const { disabledUI } = useWidgetConfig();
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+    ],
+  });
+  const { token } = useToken(chainId, tokenAddress);
+  const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+  return (
+    <AmountInputBase
+      formType={formType}
+      token={token}
+      startAdornment={<AmountInputStartAdornment formType={formType} />}
+      endAdornment={
+        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
+      }
+      bottomAdornment={<FormPriceHelperText formType={formType} />}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};
+
+export const AmountInputBase: React.FC<
+  FormTypeProps &
+    BoxProps & {
+      token?: Token;
+      startAdornment?: ReactNode;
+      endAdornment?: ReactNode;
+      bottomAdornment?: ReactNode;
+      disabled?: boolean;
+    }
+> = ({
+  formType,
+  token,
+  startAdornment,
+  endAdornment,
+  bottomAdornment,
+  disabled,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const amountKey = FormKeyHelper.getAmountKey(formType);
+  const {
+    field: { onChange, onBlur, value },
+  } = useController({
+    name: amountKey,
+  });
+  const ref = useRef<HTMLInputElement>(null);
+
+  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();
+  };
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+    }
+  }, [value, ref]);
+
+  return (
+    <Card {...props}>
+      <CardTitle>{t('main.fromAmount')}</CardTitle>
+      <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>
+    </Card>
+  );
+};

package/components/AmountInput/AmountInputAdornment.style.tsx

@@ -0,0 +1,9 @@
+import { Button as MuiButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const Button = styled(MuiButton)(({ theme }) => ({
+  padding: theme.spacing(0.5, 1, 0.625, 1),
+  lineHeight: 1.0715,
+  fontSize: '0.875rem',
+  minWidth: 'unset',
+}));

package/components/AmountInput/AmountInputEndAdornment.tsx

@@ -0,0 +1,69 @@
+import { InputAdornment, Skeleton } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import {
+  useAvailableChains,
+  useGasRecommendation,
+  useTokenAddressBalance,
+} from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { Button } from './AmountInputAdornment.style';
+
+export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
+  const { t } = useTranslation();
+  const { setValue } = useFormContext();
+  const { getChainById } = useAvailableChains();
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      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, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+
+  const handleMax = () => {
+    const chain = getChainById(chainId);
+    let maxAmount = token?.amount;
+    if (
+      chain?.nativeToken.address === tokenAddress &&
+      data?.available &&
+      data?.recommended
+    ) {
+      const tokenAmount = token?.amount ?? 0n;
+      const recommendedAmount = BigInt(data.recommended.amount) / 2n;
+      if (tokenAmount > recommendedAmount) {
+        maxAmount = tokenAmount - recommendedAmount;
+      }
+    }
+
+    setValue(
+      FormKeyHelper.getAmountKey(formType),
+      maxAmount && token ? formatUnits(maxAmount, token.decimals) : '',
+      {
+        shouldTouch: true,
+      },
+    );
+  };
+
+  return (
+    <InputAdornment position="end">
+      {isLoading && tokenAddress ? (
+        <Skeleton
+          variant="rectangular"
+          width={46}
+          height={24}
+          sx={{ borderRadius: 0.5 }}
+        />
+      ) : formType === 'from' && token?.amount ? (
+        <Button onClick={handleMax}>{t('button.max')}</Button>
+      ) : null}
+    </InputAdornment>
+  );
+};

package/components/AmountInput/AmountInputStartAdornment.tsx

@@ -0,0 +1,26 @@
+import { useWatch } from 'react-hook-form';
+import { useChain, useToken } from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+
+export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      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} sx={{ marginLeft: 2 }} />
+  ) : (
+    <TokenAvatarDefault sx={{ marginLeft: 2 }} />
+  );
+};

package/components/AmountInput/FormPriceHelperText.tsx

@@ -0,0 +1,87 @@
+import type { TokenAmount } from '@lifi/sdk';
+import { FormHelperText, Skeleton, Typography } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useTokenAddressBalance } from '../../hooks';
+import type { FormTypeProps } from '../../providers';
+import { FormKeyHelper } from '../../providers';
+import { formatTokenAmount, formatTokenPrice } from '../../utils';
+
+export const FormPriceHelperText: React.FC<FormTypeProps> = ({ formType }) => {
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+    ],
+  });
+
+  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+
+  return (
+    <FormPriceHelperTextBase
+      formType={formType}
+      isLoading={isLoading}
+      tokenAddress={tokenAddress}
+      token={token}
+    />
+  );
+};
+
+export const FormPriceHelperTextBase: React.FC<
+  FormTypeProps & {
+    isLoading?: boolean;
+    tokenAddress?: string;
+    token?: TokenAmount;
+  }
+> = ({ formType, isLoading, tokenAddress, token }) => {
+  const { t } = useTranslation();
+  const amount = useWatch({
+    name: FormKeyHelper.getAmountKey(formType),
+  });
+
+  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
+
+  return (
+    <FormHelperText
+      component="div"
+      sx={{ display: 'flex', justifyContent: 'space-between', margin: 0 }}
+    >
+      <Typography
+        color={fromAmountTokenPrice ? 'text.secondary' : 'grey.600'}
+        fontWeight={400}
+        fontSize={12}
+        marginLeft={8}
+        lineHeight={1.3334}
+        flex={1}
+        sx={{
+          wordBreak: 'break-word',
+          overflowWrap: 'break-word',
+        }}
+      >
+        {t(`format.currency`, {
+          value: fromAmountTokenPrice,
+        })}
+      </Typography>
+      {isLoading && tokenAddress ? (
+        <Skeleton
+          variant="text"
+          width={48}
+          height={16}
+          sx={{ borderRadius: 0.25 }}
+        />
+      ) : token?.amount ? (
+        <Typography
+          fontWeight={400}
+          fontSize={12}
+          color="text.secondary"
+          lineHeight={1.3334}
+          pl={0.25}
+        >
+          {`/ ${t(`format.number`, {
+            value: formatTokenAmount(token.amount, token.decimals),
+          })}`}
+        </Typography>
+      ) : null}
+    </FormHelperText>
+  );
+};