fix: adjust max button for native currencies (#3279)

* adjust max button for native currencies

* update var naming

src/lib/components/Swap/Input.tsx

@@ -10,6 +10,7 @@ import styled, { ThemedText } from 'lib/theme'
 import { useMemo } from 'react'
 import { TradeState } from 'state/routing/types'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { maxAmountSpend } from 'utils/maxAmountSpend'
 
 import Column from '../Column'
 import Row from '../Row'
@@ -59,12 +60,15 @@ export default function Input({ disabled }: InputProps) {
   //TODO(ianlapham): mimic logic from app swap page
   const mockApproved = true
 
+  // account for gas needed if using max on native token
+  const maxAmount = useMemo(() => maxAmountSpend(balance), [balance])
+
   const onMax = useMemo(() => {
-    if (balance?.greaterThan(0)) {
-      return () => updateSwapInputAmount(balance.toExact())
+    if (maxAmount?.greaterThan(0)) {
+      return () => updateSwapInputAmount(maxAmount.toExact())
     }
     return
-  }, [balance, updateSwapInputAmount])
+  }, [maxAmount, updateSwapInputAmount])
 
   return (
     <InputColumn gap={0.5} approved={mockApproved}>