feat: add you pay token price

packages/widget/src/components/PriceTypography.tsx

@@ -4,5 +4,4 @@ import { styled } from '@mui/material/styles';
 export const PriceTypography = styled(Typography)(({ theme }) => ({
   fontWeight: 400,
   fontSize: '0.75rem',
-  color: theme.palette.text.secondary,
 }));

packages/widget/src/components/SwapInput/FormPriceHelperText.style.tsx

@@ -0,0 +1,8 @@
+import { FormHelperText as MuiFormHelperText } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const FormHelperText = styled(MuiFormHelperText)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  margin: 0,
+}));

packages/widget/src/components/SwapInput/FormPriceHelperText.tsx

@@ -0,0 +1,59 @@
+import { Skeleton } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useTokenBalance } from '../../hooks';
+import {
+  SwapFormKeyHelper,
+  SwapFormTypeProps,
+} from '../../providers/SwapFormProvider';
+import { formatTokenPrice } from '../../utils/format';
+import { PriceTypography } from '../PriceTypography';
+import { FormHelperText } from './FormPriceHelperText.style';
+
+export const FormPriceHelperText: React.FC<
+  SwapFormTypeProps & { selected: boolean }
+> = ({ formType, selected }) => {
+  const { t } = useTranslation();
+  const [amount, chainId, tokenAddress] = useWatch({
+    name: [
+      SwapFormKeyHelper.getAmountKey(formType),
+      SwapFormKeyHelper.getChainKey(formType),
+      SwapFormKeyHelper.getTokenKey(formType),
+    ],
+  });
+  const { token, isLoading, isFetching } = useTokenBalance(
+    chainId,
+    tokenAddress,
+  );
+
+  const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
+  const maxAmountTokenPrice = formatTokenPrice(token?.amount, token?.priceUSD);
+
+  return (
+    <FormHelperText>
+      <PriceTypography
+        color={fromAmountTokenPrice ? 'text.secondary' : 'grey.600'}
+        marginLeft={selected ? 8 : 2}
+        lineHeight={1.3334}
+      >
+        {t(`swap.currency`, {
+          value: fromAmountTokenPrice,
+        })}
+      </PriceTypography>
+      {isLoading && isFetching ? (
+        <Skeleton
+          variant="text"
+          width={48}
+          height={16}
+          sx={{ borderRadius: 0.5 }}
+        />
+      ) : maxAmountTokenPrice ? (
+        <PriceTypography color="text.secondary" lineHeight={1.3334}>
+          {t(`swap.currency`, {
+            value: maxAmountTokenPrice,
+          })}
+        </PriceTypography>
+      ) : null}
+    </FormHelperText>
+  );
+};

packages/widget/src/components/SwapInput/SwapInput.style.tsx

@@ -1,11 +1,15 @@
-import { InputBase } from '@mui/material';
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import { styled } from '@mui/material/styles';
 
+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,
-  padding: theme.spacing(2, 2, 2, 0),
+  // padding: theme.spacing(2, 2, 2, 0),
   [`.${inputBaseClasses.input}`]: {
     height: 32,
     padding: theme.spacing(0, 0, 0, 2),

packages/widget/src/components/SwapInput/SwapInput.tsx

@@ -1,4 +1,4 @@
-import { Avatar, FormControl } from '@mui/material';
+import { Avatar } from '@mui/material';
 import { ChangeEvent } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -9,8 +9,9 @@ import {
 } from '../../providers/SwapFormProvider';
 import { formatAmount } from '../../utils/format';
 import { CardContainer, CardTitle } from '../Card';
-import { SwapInputAdornment } from '../SwapInputAdornment';
-import { Input } from './SwapInput.style';
+import { FormPriceHelperText } from './FormPriceHelperText';
+import { FormControl, Input } from './SwapInput.style';
+import { SwapInputAdornment } from './SwapInputAdornment';
 
 export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
   const { t } = useTranslation();
@@ -71,7 +72,7 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
           name={amountKey}
           required
         />
-        {/* <FormHelperText id="swap-from-helper-text">Text</FormHelperText> */}
+        <FormPriceHelperText selected={isSelected} formType={formType} />
       </FormControl>
     </CardContainer>
   );

packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.style.tsx → packages/widget/src/components/SwapInput/SwapInputAdornment.style.tsx

@@ -4,9 +4,10 @@ import { styled } from '@mui/material/styles';
 export const SwapMaxAmountTypography = styled(Typography)(({ theme }) => ({
   fontSize: 24,
   fontWeight: '700',
-  color: theme.palette.grey[600],
+  lineHeight: 1.3334,
+  color: theme.palette.text.secondary,
   transition: theme.transitions.create(['color']),
-  padding: theme.spacing(0.5, 0),
+  // padding: theme.spacing(0.5, 0),
   '&:hover': {
     cursor: 'pointer',
     color: theme.palette.text.primary,

packages/widget/src/components/SwapInput/SwapInputAdornment.tsx

@@ -0,0 +1,56 @@
+import { InputAdornment, Skeleton } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useTokenBalance } from '../../hooks';
+import {
+  SwapFormKeyHelper,
+  SwapFormTypeProps,
+} from '../../providers/SwapFormProvider';
+import { SwapMaxAmountTypography } from './SwapInputAdornment.style';
+
+export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
+  formType,
+}) => {
+  const { t } = useTranslation();
+  const { setValue } = useFormContext();
+  const [chainId, tokenAddress] = useWatch({
+    name: [
+      SwapFormKeyHelper.getChainKey(formType),
+      SwapFormKeyHelper.getTokenKey(formType),
+    ],
+  });
+  const { token, isLoading, isFetching } = useTokenBalance(
+    chainId,
+    tokenAddress,
+  );
+
+  const handleMax = () => {
+    setValue(SwapFormKeyHelper.getAmountKey(formType), token?.amount ?? '');
+  };
+
+  return (
+    <InputAdornment position="end">
+      {isLoading && isFetching ? (
+        <Skeleton
+          variant="rectangular"
+          width={96}
+          height={24}
+          sx={{ borderRadius: 1 }}
+        />
+      ) : formType === 'from' && token?.amount ? (
+        <SwapMaxAmountTypography
+          onClick={handleMax}
+          role="button"
+          sx={{
+            userSelect: 'none',
+          }}
+          data-amount={token?.amount}
+        >
+          {t(`swap.maxAmount`, {
+            amount: token?.amount,
+          })}
+        </SwapMaxAmountTypography>
+      ) : null}
+    </InputAdornment>
+  );
+};

packages/widget/src/components/TokenList/TokenListItem.tsx

@@ -27,7 +27,10 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
                 {token.amount ?? '0'}
               </Typography>
               {tokenPrice ? (
-                <PriceTypography noWrap data-price={token.priceUSD}>
+                <PriceTypography
+                  color="text.secondary"
+                  data-price={token.priceUSD}
+                >
                   {t(`swap.currency`, {
                     value: tokenPrice,
                   })}

packages/widget/src/hooks/useTokenBalance.ts

@@ -24,6 +24,7 @@ export const useTokenBalance = (chainId: number, tokenAddress: string) => {
       }
       const tokenBalance = await LiFi.getTokenBalance(address as string, token);
       return {
+        ...token,
         ...tokenBalance,
         amount: formatTokenAmount(tokenBalance?.amount),
       };