Add half button

src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx

@@ -23,7 +23,6 @@ const meta = {
     setValue: fn(),
     value: '0',
     placeholder: '0.0',
-    onMaxClick: fn(),
     decimalsLimit: 2,
     tokenPrice: 100,
     balanceValue: '1000',

src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx

@@ -1,9 +1,19 @@
-import { Box, Button, Grid, Input, Tooltip, Typography } from '@mui/material'
+import { Box, Grid, Input, Tooltip, Typography } from '@mui/material'
 import loadingAnimation from '@static/gif/loading.gif'
 import { formatNumber, getScaleFromString } from '@utils/utils'
 import React, { CSSProperties, useRef } from 'react'
 import useStyles from './style'
 import icons from '@static/icons'
+import { getButtonClassName } from '@utils/uiUtils'
+import { OutlinedButton } from '@components/OutlinedButton/OutlinedButton'
+
+interface ActionButton {
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  variant?: 'max' | 'half'
+  customClass?: string
+}
 
 interface IProps {
   setValue: (value: string) => void
@@ -12,7 +22,6 @@ interface IProps {
   currencyIsUnknown: boolean
   value?: string
   placeholder?: string
-  onMaxClick: () => void
   style?: CSSProperties
   blocked?: boolean
   blockerInfo?: string
@@ -25,6 +34,7 @@ interface IProps {
   priceLoading?: boolean
   isBalanceLoading: boolean
   walletUninitialized: boolean
+  actionButtons?: ActionButton[]
 }
 
 export const DepositAmountInput: React.FC<IProps> = ({
@@ -34,7 +44,6 @@ export const DepositAmountInput: React.FC<IProps> = ({
   value,
   setValue,
   placeholder,
-  onMaxClick,
   style,
   blocked = false,
   blockerInfo,
@@ -45,6 +54,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
   disabled = false,
   priceLoading = false,
   isBalanceLoading,
+  actionButtons = [],
   walletUninitialized
 }) => {
   const { classes } = useStyles({ isSelected: !!currency && !walletUninitialized })
@@ -92,6 +102,30 @@ export const DepositAmountInput: React.FC<IProps> = ({
 
   const usdBalance = tokenPrice && value ? tokenPrice * +value : 0
 
+  const renderActionButton = (button: ActionButton) => {
+    const buttonClassName = getButtonClassName({
+      label: button.variant ?? 'max',
+      variants: [
+        { label: 'max', className: classes.maxVariant },
+        { label: 'half', className: classes.halfVariant }
+      ],
+      default: classes.actionButton
+    })
+    return (
+      <OutlinedButton
+        name={button.label}
+        key={button.label}
+        onClick={button.onClick}
+        disabled={button.disabled || walletUninitialized || !currency}
+        className={
+          currency && !walletUninitialized
+            ? buttonClassName
+            : `${classes.actionButton} ${classes.actionButtonNotActive}`
+        }
+      />
+    )
+  }
+
   return (
     <Grid container className={classes.wrapper} style={style}>
       <div className={classes.root}>
@@ -151,13 +185,8 @@ export const DepositAmountInput: React.FC<IProps> = ({
           alignItems='center'
           direction='row'
           wrap='nowrap'>
-          <Grid
-            className={classes.balance}
-            container
-            alignItems='center'
-            wrap='nowrap'
-            onClick={walletUninitialized ? () => {} : onMaxClick}>
-            <Typography className={classes.caption2}>
+          <Grid className={classes.balance} container alignItems='center' wrap='nowrap'>
+            <Typography className={classes.caption2} onClick={() => actionButtons[0].onClick()}>
               Balance:{' '}
               {walletUninitialized ? (
                 <>-</>
@@ -168,14 +197,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
               )}{' '}
               {currency}
             </Typography>
-            <Button
-              className={
-                currency && !walletUninitialized
-                  ? classes.maxButton
-                  : `${classes.maxButton} ${classes.maxButtonNotActive}`
-              }>
-              Max
-            </Button>
+            {actionButtons.map(renderActionButton)}
           </Grid>
           <Grid className={classes.percentages} container alignItems='center' wrap='nowrap'>
             {currency ? (

src/components/Inputs/DepositAmountInput/style.ts

@@ -145,7 +145,7 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
   estimatedBalance: {
     ...caption2styles
   },
-  maxButton: {
+  actionButton: {
     color: colors.invariant.componentBcg,
     ...typography.tiny2,
     borderRadius: 4,
@@ -173,7 +173,31 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
       marginTop: 2
     }
   },
-  maxButtonNotActive: {
+  maxVariant: {
+    background: `${colors.invariant.green}cc !important`,
+    '&:hover': {
+      background: 'none',
+      backgroundColor: `${colors.invariant.green} !important`,
+      boxShadow: '0px 0px 20px -10px white',
+      '@media (hover: none)': {
+        background: 'rgba(46, 224, 154, 0.8)',
+        boxShadow: 'none'
+      }
+    }
+  },
+  halfVariant: {
+    background: `${colors.invariant.pink}cc !important`,
+    '&:hover': {
+      background: 'none',
+      backgroundColor: `${colors.invariant.pink} !important`,
+      boxShadow: '0px 0px 20px -10px white',
+      '@media (hover: none)': {
+        background: `${colors.invariant.pink}cc`,
+        boxShadow: 'none'
+      }
+    }
+  },
+  actionButtonNotActive: {
     backgroundColor: colors.invariant.light,
     '&:hover': {
       backgroundColor: colors.invariant.light,

src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.stories.tsx

@@ -57,7 +57,6 @@ const meta = {
     className: '',
     decimal: 2,
     placeholder: '0.0',
-    onMaxClick: fn(),
     current: null,
     tokens: tokens,
     onSelect: fn(),

src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx

@@ -10,6 +10,16 @@ import useStyles from './style'
 import { PublicKey } from '@solana/web3.js'
 import { NetworkType } from '@store/consts/static'
 
+import { getButtonClassName } from '@utils/uiUtils'
+
+interface ActionButton {
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  variant?: 'max' | 'half'
+  customClass?: string
+}
+
 interface IProps {
   setValue: (value: string) => void
   value?: string
@@ -18,7 +28,6 @@ interface IProps {
   decimal: number
   placeholder?: string
   style?: CSSProperties
-  onMaxClick: () => void
   current: SwapToken | null
   tokens: Record<string, SwapToken>
   onSelect: (address: PublicKey) => void
@@ -38,17 +47,17 @@ interface IProps {
   showBlur: boolean
   hiddenUnknownTokens: boolean
   network: NetworkType
+  actionButtons?: ActionButton[]
 }
 
-export const AmountInput: React.FC<IProps> = ({
+export const ExchangeAmountInput: React.FC<IProps> = ({
   value,
   setValue,
   error,
   className,
   decimal,
   placeholder,
   style,
-  onMaxClick,
   current,
   tokens,
   onSelect,
@@ -66,6 +75,7 @@ export const AmountInput: React.FC<IProps> = ({
   showMaxButton = true,
   showBlur,
   hiddenUnknownTokens,
+  actionButtons = [],
   network
 }) => {
   const hideBalance = balance === '- -' || !balance || hideBalances
@@ -113,6 +123,30 @@ export const AmountInput: React.FC<IProps> = ({
 
   const usdBalance = tokenPrice && value ? tokenPrice * +value : 0
 
+  const renderActionButton = (button: ActionButton) => {
+    const buttonClassName = getButtonClassName({
+      label: button.variant ?? 'max',
+      variants: [
+        { label: 'max', className: classes.maxVariant },
+        { label: 'half', className: classes.halfVariant }
+      ],
+      default: classes.actionButton
+    })
+    return (
+      <>
+        <OutlinedButton
+          name={button.label}
+          onClick={button.onClick}
+          className={` ${hideBalances ? `${classes.actionButtonNotActive} ${classes.actionButton}` : buttonClassName}`}
+          labelClassName={classes.label}
+          disabled={
+            disabled && isNaN(Number(balance)) ? disabled : isNaN(Number(balance)) || hideBalances
+          }
+        />
+      </>
+    )
+  }
+
   return (
     <>
       <Grid container alignItems='center' wrap='nowrap' className={classes.exchangeContainer}>
@@ -166,8 +200,11 @@ export const AmountInput: React.FC<IProps> = ({
           className={classNames(classes.balanceContainer, {
             [classes.showMaxButton]: showMaxButton
           })}
-          onClick={showMaxButton && !hideBalance ? onMaxClick : () => {}}>
-          <Typography className={classes.BalanceTypography}>
+          // onClick={showMaxButton && !hideBalance ? onMaxClick : () => {}}>
+        >
+          <Typography
+            className={classes.BalanceTypography}
+            onClick={() => actionButtons[0].onClick()}>
             Balance:{' '}
             {isBalanceLoading ? (
               <img src={loadingAnimation} className={classes.loadingBalance} alt='loading' />
@@ -179,20 +216,7 @@ export const AmountInput: React.FC<IProps> = ({
             {tokenIcon.slice(0, 8)}
             {tokenIcon.length > 8 ? '...' : ''}
           </Typography>
-          {showMaxButton && (
-            <OutlinedButton
-              name='Max'
-              color='primary'
-              onClick={onMaxClick}
-              className={classes.maxButton}
-              labelClassName={classes.label}
-              disabled={
-                disabled && isNaN(Number(balance))
-                  ? disabled
-                  : isNaN(Number(balance)) || hideBalances
-              }
-            />
-          )}
+          {showMaxButton && <>{actionButtons.map(renderActionButton)}</>}
         </Grid>
 
         <Grid className={classes.percentages} container alignItems='center' wrap='nowrap'>
@@ -232,4 +256,4 @@ export const AmountInput: React.FC<IProps> = ({
     </>
   )
 }
-export default AmountInput
+export default ExchangeAmountInput

src/components/Inputs/ExchangeAmountInput/style.ts

@@ -15,17 +15,26 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       textAlign: 'right'
     }
   },
-  maxButton: {
-    color: colors.invariant.componentBcg,
+  actionButton: {
     ...typography.tiny2,
     borderRadius: 4,
     width: 26,
     minWidth: 26,
     height: 14,
+    fontWeight: '600',
+
+    padding: '0px 15px',
     textTransform: 'none',
     marginLeft: 4,
-    background: ' rgba(46, 224, 154, 0.8)',
     lineHeight: '14px',
+    color: colors.invariant.componentBcg,
+
+    [theme.breakpoints.down('md')]: {
+      width: 26,
+      minWidth: 26,
+      height: 14,
+      marginTop: 2
+    },
 
     '&:hover': {
       background: 'none',
@@ -43,7 +52,31 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       marginTop: 2
     }
   },
-  maxButtonNotActive: {
+  maxVariant: {
+    background: `${colors.invariant.green}cc !important`,
+    '&:hover': {
+      background: 'none',
+      backgroundColor: `${colors.invariant.green} !important`,
+      boxShadow: '0px 0px 20px -10px white',
+      '@media (hover: none)': {
+        background: 'rgba(46, 224, 154, 0.8)',
+        boxShadow: 'none'
+      }
+    }
+  },
+  halfVariant: {
+    background: `${colors.invariant.pink}cc !important`,
+    '&:hover': {
+      background: 'none',
+      backgroundColor: `${colors.invariant.pink} !important`,
+      boxShadow: '0px 0px 20px -10px white',
+      '@media (hover: none)': {
+        background: `${colors.invariant.pink}cc`,
+        boxShadow: 'none'
+      }
+    }
+  },
+  actionButtonNotActive: {
     backgroundColor: colors.invariant.light,
     '&:hover': {
       backgroundColor: colors.invariant.light,