Rui/max balance token input

src/component-library/CTA/BaseCTA.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, HTMLAttributes } from 'react';
 import { StyledComponent } from 'styled-components';
 
-import { CTAVariants, ElementTypeProp, Sizes } from '../utils/prop-types';
+import { CTASizes, CTAVariants, ElementTypeProp } from '../utils/prop-types';
 import { OutlinedCTA, PrimaryCTA, SecondaryCTA, StyledCTAProps, TextCTA } from './CTA.style';
 
 const ctaElements: Record<CTAVariants, StyledComponent<'button', any, StyledCTAProps, never>> = {
@@ -14,7 +14,7 @@ const ctaElements: Record<CTAVariants, StyledComponent<'button', any, StyledCTAP
 type Props = {
   variant?: CTAVariants;
   fullWidth?: boolean;
-  size?: Sizes;
+  size?: CTASizes;
   disabled?: boolean;
   isFocusVisible?: boolean;
 };

src/component-library/CTA/CTA.style.tsx

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 import { theme } from '../theme';
-import { Sizes } from '../utils/prop-types';
+import { CTASizes } from '../utils/prop-types';
 
 interface StyledCTAProps {
   $fullWidth: boolean;
-  $size: Sizes;
+  $size: CTASizes;
   $isFocusVisible?: boolean;
 }
 

src/component-library/CTA/CTA.tsx

@@ -6,19 +6,20 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 
 import { LoadingSpinner } from '../LoadingSpinner';
 import { useDOMRef } from '../utils/dom';
-import { Sizes } from '../utils/prop-types';
+import { CTASizes } from '../utils/prop-types';
 import { BaseCTA, BaseCTAProps } from './BaseCTA';
 import { LoadingWrapper } from './CTA.style';
 
-const loadingSizes: Record<Sizes, number> = {
+const loadingSizes: Record<CTASizes, number> = {
+  'x-small': 14,
   small: 16,
   medium: 18,
   large: 20
 };
 
 type Props = {
   fullWidth?: boolean;
-  size?: Sizes;
+  size?: CTASizes;
   loading?: boolean;
   onPress?: (e: PressEvent) => void;
 };

src/component-library/TokenInput/TokenInput.style.tsx

@@ -11,9 +11,8 @@ type StyledClickableProps = {
   $isClickable: boolean;
 };
 
-type StyledTokenInputBalanceValueProps = {
+type StyledUSDAdornmentProps = {
   $isDisabled?: boolean;
-  $isFocusVisible: boolean;
 };
 
 type StyledListItemSelectedLabelProps = {
@@ -27,7 +26,7 @@ const StyledTicker = styled.span`
   text-overflow: ellipsis;
 `;
 
-const StyledUSDAdornment = styled.span<Pick<StyledTokenInputBalanceValueProps, '$isDisabled'>>`
+const StyledUSDAdornment = styled.span<StyledUSDAdornmentProps>`
   display: block;
   font-size: ${theme.text.xs};
   line-height: ${theme.lineHeight.s};
@@ -68,11 +67,9 @@ const StyledTokenInputBalanceLabel = styled.dt`
   }
 `;
 
-const StyledTokenInputBalanceValue = styled.span<StyledTokenInputBalanceValueProps>`
+const StyledTokenInputBalanceValue = styled.span`
   display: block;
   color: ${theme.colors.textSecondary};
-  cursor: ${({ $isDisabled }) => !$isDisabled && 'pointer'};
-  outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
 `;
 
 const StyledListItemLabel = styled(Span)<StyledListItemSelectedLabelProps>`

src/component-library/TokenInput/TokenInputBalance.tsx

@@ -1,8 +1,6 @@
-import { useFocusRing } from '@react-aria/focus';
-import { usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { ReactNode } from 'react';
 
+import { CTA } from '../CTA';
 import {
   StyledTokenInputBalanceLabel,
   StyledTokenInputBalanceValue,
@@ -23,28 +21,20 @@ const TokenInputBalance = ({
   value,
   onClickBalance,
   className,
-  isDisabled,
+  isDisabled: isDisabledProp,
   label = 'Balance'
 }: TokenInputBalanceProps): JSX.Element => {
-  const { pressProps } = usePress({ onPress: onClickBalance, isDisabled: isDisabled });
-  const { focusProps, isFocusVisible } = useFocusRing();
-  const balanceValueProps = isDisabled
-    ? {}
-    : {
-        role: 'button',
-        tabIndex: 0,
-        'aria-label': 'apply balance',
-        ...mergeProps(pressProps, focusProps)
-      };
+  const isDisabled = isDisabledProp || !ticker || value === 0;
 
   return (
     <StyledTokenInputBalanceWrapper className={className}>
       <StyledTokenInputBalanceLabel>{label}</StyledTokenInputBalanceLabel>
       <dd>
-        <StyledTokenInputBalanceValue $isDisabled={isDisabled} $isFocusVisible={isFocusVisible} {...balanceValueProps}>
-          {ticker ? value : 0}
-        </StyledTokenInputBalanceValue>
+        <StyledTokenInputBalanceValue>{ticker ? value : 0}</StyledTokenInputBalanceValue>
       </dd>
+      <CTA onPress={onClickBalance} disabled={isDisabled} size='x-small'>
+        MAX
+      </CTA>
     </StyledTokenInputBalanceWrapper>
   );
 };

src/component-library/theme/theme.ts

@@ -164,6 +164,12 @@ const theme = {
       text: 'var(--colors-cta-text-text)',
       bgHover: 'var(--colors-cta-text-hover)'
     },
+    'x-small': {
+      padding: 'var(--spacing-1)',
+      text: 'var(--text-xs)',
+      // TODO: revist on redesign
+      lineHeight: '1'
+    },
     small: {
       padding: 'var(--spacing-2)',
       text: 'var(--text-xs)',

src/component-library/utils/prop-types.ts

@@ -48,6 +48,8 @@ export type Variants = typeof variant[number];
 
 export type CTAVariants = typeof ctaVariant[number];
 
+export type CTASizes = 'x-small' | 'small' | 'medium' | 'large';
+
 export type Status = typeof status[number];
 
 export type Sizes = typeof sizes[number];