fix: only show max where appropriate (#3229)

cowprotocol · Feb 3, 2022 · efa3d55 · efa3d55
1 parent 5c0246c
commit efa3d55
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/src/lib/components/Swap/Input.tsx b/src/lib/components/Swap/Input.tsx
@@ -4,7 +4,7 @@ import { useSwapAmount, useSwapCurrency, useSwapInfo } from 'lib/hooks/swap'
 import { usePrefetchCurrencyColor } from 'lib/hooks/useCurrencyColor'
 import { Field } from 'lib/state/swap'
 import styled, { ThemedText } from 'lib/theme'
-import { useCallback } from 'react'
+import { useMemo } from 'react'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import Column from '../Column'
@@ -42,10 +42,11 @@ export default function Input({ disabled }: InputProps) {
   //TODO(ianlapham): mimic logic from app swap page
   const mockApproved = true
 
-  const onMax = useCallback(() => {
-    if (balance) {
-      updateSwapInputAmount(balance.toExact())
+  const onMax = useMemo(() => {
+    if (balance?.greaterThan(0)) {
+      return () => updateSwapInputAmount(balance.toExact())
     }
+    return
   }, [balance, updateSwapInputAmount])
 
   return (

diff --git a/src/lib/components/Swap/Output.tsx b/src/lib/components/Swap/Output.tsx
@@ -7,7 +7,7 @@ import { useSwapAmount, useSwapCurrency, useSwapInfo } from 'lib/hooks/swap'
 import useCurrencyColor from 'lib/hooks/useCurrencyColor'
 import { Field } from 'lib/state/swap'
 import styled, { DynamicThemeProvider, ThemedText } from 'lib/theme'
-import { ReactNode, useCallback, useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
@@ -69,12 +69,6 @@ export default function Output({ disabled, children }: OutputProps) {
     return ''
   }, [priceImpact, outputUSDC])
 
-  const onMax = useCallback(() => {
-    if (balance) {
-      updateSwapOutputAmount(balance.toExact())
-    }
-  }, [balance, updateSwapOutputAmount])
-
   return (
     <DynamicThemeProvider color={color}>
       <OutputColumn hasColor={hasColor} gap={0.5}>
@@ -87,7 +81,6 @@ export default function Output({ disabled, children }: OutputProps) {
           currency={swapOutputCurrency}
           amount={(swapOutputAmount !== undefined ? swapOutputAmount : outputCurrencyAmount?.toSignificant(6)) ?? ''}
           disabled={disabled}
-          onMax={onMax}
           onChangeInput={updateSwapOutputAmount}
           onChangeCurrency={updateSwapOutputCurrency}
         >