feat: handle long amounts

lifinance · Jun 2, 2022 · a1c9454 · a1c9454
1 parent 1cea7cc
commit a1c9454
Show file tree

Hide file tree

Showing 14 changed files with 131 additions and 81 deletions.
diff --git a/packages/widget/src/components/PriceTypography.tsx b/packages/widget/src/components/PriceTypography.tsx
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -78,7 +78,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
   return (
     <Typography
-      fontSize={14}
+      fontSize={12}
       fontWeight="500"
       color="text.secondary"
       alignItems="center"
@@ -89,7 +89,7 @@ export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
         step.action.fromToken.decimals,
       )}{' '}
       {step.action.fromToken.symbol}
-      <ArrowForwardIcon sx={{ fontSize: '.75rem', paddingX: 0.5 }} />
+      <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5 }} />
       {formatTokenAmount(
         step.estimate.toAmount,
         step.action.toToken.decimals,
@@ -104,7 +104,7 @@ export const CrossStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
   const { getChainById } = useChains();
 
   return (
-    <Typography fontSize={14} fontWeight="500" color="text.secondary">
+    <Typography fontSize={12} fontWeight="500" color="text.secondary">
       {t('swap.crossStepDetails', {
         from: getChainById(step.action.fromChainId)?.name,
         to: getChainById(step.action.toChainId)?.name,
@@ -117,7 +117,7 @@ export const CrossStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
 export const SwapStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
   const { t } = useTranslation();
   return (
-    <Typography fontSize={14} fontWeight="500" color="text.secondary">
+    <Typography fontSize={12} fontWeight="500" color="text.secondary">
       {t('swap.swapStepDetails', {
         value: step.toolDetails.name,
       })}

diff --git a/packages/widget/src/components/StepToken.tsx b/packages/widget/src/components/StepToken.tsx
@@ -9,7 +9,7 @@ export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
   ...other
 }) => {
   return (
-    <Box flex={1} height={46} {...other}>
+    <Box flex={1} {...other}>
       <Box display="flex" flex={1}>
         <Avatar src={token.logoURI} alt={token.symbol} sx={{ marginRight: 2 }}>
           {token.symbol[0]}

diff --git a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
@@ -1,4 +1,4 @@
-import { FormHelperText, Skeleton } from '@mui/material';
+import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks';
@@ -7,7 +7,6 @@ import {
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
 import { formatTokenPrice } from '../../utils/format';
-import { PriceTypography } from '../PriceTypography';
 
 export const FormPriceHelperText: React.FC<
   SwapFormTypeProps & { selected: boolean }
@@ -26,35 +25,47 @@ export const FormPriceHelperText: React.FC<
   );
 
   const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
-  const maxAmountTokenPrice = formatTokenPrice(token?.amount, token?.priceUSD);
 
   return (
     <FormHelperText
       component="div"
       sx={{ display: 'flex', justifyContent: 'space-between', margin: 0 }}
     >
-      <PriceTypography
+      <Typography
         color={fromAmountTokenPrice ? 'text.secondary' : 'grey.600'}
+        fontWeight={400}
+        fontSize={12}
         marginLeft={selected ? 8 : 2}
         lineHeight={1.3334}
+        flex={1}
+        sx={{
+          wordBreak: 'break-word',
+          overflowWrap: 'break-word',
+        }}
       >
         {t(`swap.currency`, {
           value: fromAmountTokenPrice,
         })}
-      </PriceTypography>
+      </Typography>
       {isLoading && isFetching ? (
         <Skeleton
           variant="text"
           width={48}
           height={16}
           sx={{ borderRadius: 0.25 }}
         />
-      ) : maxAmountTokenPrice ? (
-        <PriceTypography color="text.secondary" lineHeight={1.3334}>
-          {t(`swap.currency`, {
-            value: maxAmountTokenPrice,
+      ) : token ? (
+        <Typography
+          fontWeight={400}
+          fontSize={12}
+          color="text.secondary"
+          lineHeight={1.3334}
+          pl={0.25}
+        >
+          {t(`swap.maxAmount`, {
+            amount: token?.amount,
           })}
-        </PriceTypography>
+        </Typography>
       ) : null}
     </FormHelperText>
   );

diff --git a/packages/widget/src/components/SwapInput/SwapInput.style.tsx b/packages/widget/src/components/SwapInput/SwapInput.style.tsx
@@ -2,6 +2,9 @@ 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),
 }));

diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -1,5 +1,5 @@
 import { Avatar } from '@mui/material';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useLayoutEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
@@ -8,14 +8,22 @@ import {
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
 import { formatAmount } from '../../utils/format';
+import { fitInputText } from '../../utils/input';
 import { CardContainer, CardTitle } from '../Card';
 import { FormPriceHelperText } from './FormPriceHelperText';
-import { FormControl, Input } from './SwapInput.style';
+import {
+  FormControl,
+  Input,
+  maxInputFontSize,
+  minInputFontSize,
+} from './SwapInput.style';
 import { SwapInputAdornment } from './SwapInputAdornment';
 
 export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
   const { t } = useTranslation();
   const { setValue } = useFormContext();
+  const ref = useRef<HTMLInputElement>(null);
+
   const amountKey = SwapFormKeyHelper.getAmountKey(formType);
   const [amount, chainId, tokenAddress] = useWatch({
     name: [
@@ -43,11 +51,20 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
     setValue(amountKey, formatAmount(value));
   };
 
+  useLayoutEffect(() => {
+    fitInputText(
+      maxInputFontSize,
+      minInputFontSize,
+      ref.current as HTMLElement,
+    );
+  }, [amount]);
+
   return (
     <CardContainer>
       <CardTitle>{t('swap.amount')}</CardTitle>
       <FormControl fullWidth>
         <Input
+          inputRef={ref}
           size="small"
           autoComplete="off"
           placeholder="0"

diff --git a/packages/widget/src/components/SwapInput/SwapInputAdornment.style.tsx b/packages/widget/src/components/SwapInput/SwapInputAdornment.style.tsx
@@ -1,15 +1,26 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Button as MuiButton } from '@mui/material';
+import { lighten, styled } from '@mui/material/styles';
 
-export const SwapMaxAmountTypography = styled(Typography)(({ theme }) => ({
-  fontSize: 24,
-  fontWeight: '700',
-  lineHeight: 1.3334,
+export const Button = styled(MuiButton)(({ theme }) => ({
+  textTransform: 'none',
+  borderRadius: theme.shape.borderRadiusSecondary,
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
   color: theme.palette.text.secondary,
-  transition: theme.transitions.create(['color']),
-  // padding: theme.spacing(0.5, 0),
+  padding: theme.spacing(0.125, 1, 0.375, 1),
+  lineHeight: 1,
+  fontSize: '0.875rem',
+  minWidth: 'unset',
   '&:hover': {
-    cursor: 'pointer',
-    color: theme.palette.text.primary,
+    color:
+      theme.palette.mode === 'light'
+        ? theme.palette.primary.main
+        : theme.palette.text.primary,
+    borderColor:
+      theme.palette.mode === 'light'
+        ? lighten(theme.palette.primary.main, 0.5)
+        : theme.palette.text.secondary,
   },
 }));
diff --git a/packages/widget/src/components/SwapInput/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInput/SwapInputAdornment.tsx
@@ -6,11 +6,9 @@ import {
   SwapFormKeyHelper,
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
-import { SwapMaxAmountTypography } from './SwapInputAdornment.style';
+import { Button } from './SwapInputAdornment.style';
 
-export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
-  formType,
-}) => {
+export const SwapInputAdornment = ({ formType }: SwapFormTypeProps) => {
   const { t } = useTranslation();
   const { setValue } = useFormContext();
   const [chainId, tokenAddress] = useWatch({
@@ -33,23 +31,14 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
       {isLoading && isFetching ? (
         <Skeleton
           variant="rectangular"
-          width={96}
-          height={24}
+          width={46}
+          height={20}
           sx={{ borderRadius: 0.5 }}
         />
       ) : formType === 'from' && token?.amount ? (
-        <SwapMaxAmountTypography
-          onClick={handleMax}
-          role="button"
-          sx={{
-            userSelect: 'none',
-          }}
-          data-amount={token?.amount}
-        >
-          {t(`swap.maxAmount`, {
-            amount: token?.amount,
-          })}
-        </SwapMaxAmountTypography>
+        <Button onClick={handleMax} variant="outlined">
+          {t('button.max')}
+        </Button>
       ) : null}
     </InputAdornment>
   );

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -31,14 +31,10 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
             </Check>
           ) : null}
         </Box>
-        <Box
-          sx={{
-            display: 'flex',
-          }}
+        <StepToken
+          token={{ ...route.toToken, amount: route.toAmount }}
           mb={2}
-        >
-          <StepToken token={{ ...route.toToken, amount: route.toAmount }} />
-        </Box>
+        />
         {!dense
           ? route.steps.map((step) => (
               <StepActions key={step.id} step={step} mb={2} />

diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -31,8 +31,8 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
       <SwapRoutesUpdateProgress
         sx={{
           position: 'absolute',
-          top: 16,
-          right: 16,
+          top: 8,
+          right: 8,
         }}
       />
       <Box sx={{ display: 'flex', alignItems: 'center' }}>

diff --git a/packages/widget/src/components/TextFitter/TextFitter.tsx b/packages/widget/src/components/TextFitter/TextFitter.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material/styles';
 import {
   PropsWithChildren,
   useCallback,
@@ -26,6 +27,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
   cropBottom,
   onFit,
 }) => {
+  const theme = useTheme();
   const textRef = useRef<SVGTextElement>(null);
   const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState);
   const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
@@ -70,6 +72,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
           : height
       }
       preserveAspectRatio={preserveAspectRatio}
+      fill={theme.palette.text.primary}
     >
       <text x={0} y={0} style={textStyle} ref={textRef}>
         {children}

diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx
@@ -66,6 +66,7 @@ export const TokenList: FC<TokenListProps> = ({
   const handleTokenClick = useCallback(
     (tokenAddress: string) => {
       setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+      setValue(SwapFormKeyHelper.getAmountKey(formType), '');
       onClick?.();
     },
     [formType, onClick, setValue],

diff --git a/packages/widget/src/components/TokenList/TokenListItem.tsx b/packages/widget/src/components/TokenList/TokenListItem.tsx
@@ -9,7 +9,6 @@ import {
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatTokenPrice } from '../../utils/format';
-import { PriceTypography } from '../PriceTypography';
 import { ListItem, ListItemButton } from './TokenList.style';
 import { TokenListItemBaseProps, TokenListItemProps } from './types';
 
@@ -20,25 +19,6 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
     const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
     return (
       <ListItem
-        secondaryAction={
-          showBalance ? (
-            <Box sx={{ textAlign: 'right' }}>
-              <Typography variant="body1" noWrap>
-                {token.amount ?? '0'}
-              </Typography>
-              {tokenPrice ? (
-                <PriceTypography
-                  color="text.secondary"
-                  data-price={token.priceUSD}
-                >
-                  {t(`swap.currency`, {
-                    value: tokenPrice,
-                  })}
-                </PriceTypography>
-              ) : null}
-            </Box>
-          ) : null
-        }
         disablePadding
         style={{
           height: `${size}px`,
@@ -52,6 +32,25 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={token.symbol} secondary={token.name} />
+          {showBalance ? (
+            <Box sx={{ textAlign: 'right' }}>
+              <Typography variant="body1" noWrap>
+                {token.amount ?? '0'}
+              </Typography>
+              {tokenPrice ? (
+                <Typography
+                  fontWeight={400}
+                  fontSize={12}
+                  color="text.secondary"
+                  data-price={token.priceUSD}
+                >
+                  {t(`swap.currency`, {
+                    value: tokenPrice,
+                  })}
+                </Typography>
+              ) : null}
+            </Box>
+          ) : null}
         </ListItemButton>
       </ListItem>
     );