Add MAX button for LP

zulumarkets · Mar 16, 2023 · eafb160 · eafb160
1 parent f24161e
commit eafb160
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/components/fields/NumericInput/NumericInput.tsx b/src/components/fields/NumericInput/NumericInput.tsx
@@ -2,6 +2,7 @@ import FieldValidationMessage from 'components/FieldValidationMessage';
 import Tooltip from 'components/Tooltip';
 import { DEFAULT_TOKEN_DECIMALS } from 'constants/defaults';
 import React, { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { CurrencyLabel, FieldContainer, FieldLabel, FieldNote, Input, OverlayContainer } from '../common';
 
@@ -18,6 +19,7 @@ type NumericInputProps = {
     validationMessage?: string;
     currencyLabel?: string;
     tooltip?: string;
+    onMaxButton?: any;
 };
 
 const INVALID_CHARS = ['-', '+', 'e'];
@@ -35,8 +37,11 @@ const NumericInput: React.FC<NumericInputProps> = ({
     validationMessage,
     currencyLabel,
     tooltip,
+    onMaxButton,
     ...rest
 }) => {
+    const { t } = useTranslation();
+
     const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target;
 
@@ -89,6 +94,12 @@ const NumericInput: React.FC<NumericInputProps> = ({
                     {currencyLabel}
                 </CurrencyLabel>
             )}
+
+            {onMaxButton && (
+                <MaxButton disabled={disabled} onClick={onMaxButton}>
+                    {t('markets.market-details.max')}
+                </MaxButton>
+            )}
             <FieldValidationMessage showValidation={showValidation} message={validationMessage} />
             {note && <FieldNote>{note}</FieldNote>}
         </FieldContainer>
@@ -99,4 +110,18 @@ const StyledInput = styled(Input)`
     padding-right: 100px;
 `;
 
+const MaxButton = styled.button`
+    background: #3accfa;
+    font-size: 10px;
+    line-height: 12px;
+    position: absolute;
+    top: 6px;
+    right: 50px;
+    border: none;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-weight: 600;
+    border-radius: 2px;
+`;
+
 export default NumericInput;
diff --git a/src/pages/LiquidityPool/LiquidityPool.tsx b/src/pages/LiquidityPool/LiquidityPool.tsx
@@ -392,6 +392,10 @@ const LiquidityPool: React.FC = () => {
         userLiquidityPoolData ? userLiquidityPoolData.maxDeposit : 0
     );
 
+    const setMaxAmount = () => {
+        setAmount(Math.trunc(userLiquidityPoolData ? userLiquidityPoolData.availableToDeposit * 100 : 0) / 100);
+    };
+
     return (
         <Wrapper>
             {networkId !== NetworkIdByName.ArbitrumOne && (
@@ -512,6 +516,7 @@ const LiquidityPool: React.FC = () => {
                                             onChange={(_, value) => setAmount(value)}
                                             placeholder={t('liquidity-pool.deposit-amount-placeholder')}
                                             currencyLabel={collateral}
+                                            onMaxButton={setMaxAmount}
                                         />
                                     </ValidationTooltip>
                                 </InputContainer>