bring back Max button for ERC20 tokens #5828

shapeshift · Dec 21, 2023 · 1a192ac · 1a192ac
1 parent 7bf484c
commit 1a192ac
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/src/components/DeFi/components/AssetInput.tsx b/src/components/DeFi/components/AssetInput.tsx
@@ -217,7 +217,7 @@ export const AssetInput: React.FC<AssetInputProps> = ({
               options={percentOptions}
               isDisabled={isReadOnly || isSendMaxDisabled}
               onMaxClick={onMaxClick}
-              onClick={onPercentOptionClick}
+              onPercentOptionClick={onPercentOptionClick}
             />
           )}
         </Stack>

diff --git a/src/components/DeFi/components/PercentOptionsButtonGroup.tsx b/src/components/DeFi/components/PercentOptionsButtonGroup.tsx
@@ -5,7 +5,7 @@ import { Amount } from 'components/Amount/Amount'
 
 type MaxButtonProps = {
   isDisabled?: boolean
-  onClick: (args: number) => void
+  onPercentOptionClick?: (args: number) => void
   onMaxClick?: () => Promise<void>
   option: number
   value?: number | null
@@ -18,15 +18,19 @@ const percentFormatOptions = {
 
 export const PercentOptionsButton: React.FC<MaxButtonProps> = ({
   isDisabled,
-  onClick,
+  onPercentOptionClick,
   onMaxClick,
   option,
   value,
 }) => {
   const translate = useTranslate()
   const handleClick = useCallback(async () => {
-    onMaxClick && option === 1 ? await onMaxClick() : onClick(option)
-  }, [onClick, onMaxClick, option])
+    if (onMaxClick && option === 1) {
+      await onMaxClick()
+    }  else if (onPercentOptionClick) {
+      onPercentOptionClick(option)
+    }
+  }, [onPercentOptionClick, onMaxClick, option])
 
   return (
     <Button isDisabled={isDisabled} isActive={option === value} key={option} onClick={handleClick}>
@@ -41,15 +45,15 @@ export const PercentOptionsButton: React.FC<MaxButtonProps> = ({
 
 type MaxButtonGroupProps = {
   isDisabled?: boolean
-  onClick: (args: number) => void
+  onPercentOptionClick?: (args: number) => void
   onMaxClick?: () => Promise<void>
   options: number[]
   value?: number | null
 }
 
 export const PercentOptionsButtonGroup: React.FC<MaxButtonGroupProps> = ({
   isDisabled,
-  onClick,
+  onPercentOptionClick,
   onMaxClick,
   options,
   value,
@@ -62,7 +66,7 @@ export const PercentOptionsButtonGroup: React.FC<MaxButtonGroupProps> = ({
           value={value}
           option={option}
           key={option}
-          onClick={onClick}
+          onPercentOptionClick={onPercentOptionClick}
           onMaxClick={onMaxClick}
         />
       ))}

diff --git a/src/components/MultiHopTrade/components/TradeAmountInput.tsx b/src/components/MultiHopTrade/components/TradeAmountInput.tsx
@@ -269,12 +269,12 @@ export const TradeAmountInput: React.FC<TradeAmountInputProps> = memo(
                 <Skeleton isLoaded={!showFiatSkeleton}>{oppositeCurrency}</Skeleton>
               </Button>
             )}
-            {onPercentOptionClick && (
+            {(onMaxClick || onPercentOptionClick) && (
               <PercentOptionsButtonGroup
                 options={percentOptions}
                 isDisabled={isReadOnly || isSendMaxDisabled}
                 onMaxClick={onMaxClick}
-                onClick={onPercentOptionClick}
+                onPercentOptionClick={onPercentOptionClick}
               />
             )}
           </Flex>

diff --git a/src/components/MultiHopTrade/components/TradeAssetInput.tsx b/src/components/MultiHopTrade/components/TradeAssetInput.tsx
@@ -1,6 +1,6 @@
 import { Skeleton, SkeletonCircle, Stack, useColorModeValue } from '@chakra-ui/react'
-import type { AssetId } from '@shapeshiftoss/caip'
-import React, { memo, useMemo } from 'react'
+import { fromAssetId, type AssetId } from '@shapeshiftoss/caip'
+import React, { memo, useCallback, useMemo } from 'react'
 import type { TradeAmountInputProps } from 'components/MultiHopTrade/components/TradeAmountInput'
 import { TradeAmountInput } from 'components/MultiHopTrade/components/TradeAmountInput'
 import { bnOrZero } from 'lib/bignumber/bignumber'
@@ -46,7 +46,20 @@ const AssetInputWithAsset: React.FC<AssetInputLoadedProps> = props => {
   )
   const fiatBalance = bnOrZero(balance).times(marketData.price).toString()
 
-  return <TradeAmountInput balance={balance} fiatBalance={fiatBalance} {...props} />
+  const onMaxClick = useCallback(async () => {
+    if (props.onChange) props.onChange(balance, false)
+  }, [balance, props.onChange])
+
+  const { assetNamespace } = fromAssetId(assetId)
+
+  return (
+    <TradeAmountInput
+      balance={balance}
+      fiatBalance={fiatBalance}
+      onMaxClick={assetNamespace === 'erc20' ? onMaxClick : undefined}
+      {...props}
+    />
+  )
 }
 
 export type TradeAssetInputProps = {