50% / max buttons for input fields

app/components/SetAmountButton.test.tsx

@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react-native";
+import BigNumber from "bignumber.js";
+import * as React from "react";
+import { SetAmountButton } from "./SetAmountButton";
+
+const buttonType: Array<'half' | 'max'> = ['half', 'max']
+const buttonAmount = new BigNumber(10);
+
+describe('set amount button', () => {
+	buttonType.forEach(type => {
+		it(`should match styling of set amount button type ${type}`, () => {
+			const onPress = jest.fn()
+			const component = (
+				<SetAmountButton type={type} amount={buttonAmount} onPress={onPress} />
+			)
+			const rendered = render(component)
+			expect(rendered.toJSON()).toMatchSnapshot()
+		})
+	})
+})

app/components/SetAmountButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import { tailwind } from '../tailwind'
+import { Text } from './Text'
+import { translate } from '../translations'
+import BigNumber from 'bignumber.js'
+
+interface SetAmountButtonProps {
+  type: 'half' | 'max'
+  onPress: (amount: string) => void
+  amount: BigNumber
+}
+
+export function SetAmountButton (props: SetAmountButtonProps): JSX.Element {
+  const decimalPlace = 8
+
+  return (
+    <TouchableOpacity
+      testID={`${props.type}_amount_button`}
+      style={[
+        tailwind('flex px-2 py-1.5 border border-gray-300 rounded'),
+        props.type === 'half' && tailwind('mr-1')
+      ]}
+      onPress={() => {
+        props.onPress(props.type === 'half' ? props.amount.div(2).toFixed(decimalPlace) : props.amount.toFixed(decimalPlace))
+      }}
+    >
+      <Text style={tailwind('text-primary text-center font-medium')}>{translate('components/max', props.type === 'half' ? '50%' : 'MAX')}</Text>
+    </TouchableOpacity>
+  )
+}

app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx

@@ -15,6 +15,7 @@ import { Logging } from '../../../../api'
 import { Text, TextInput, View } from '../../../../components'
 import { Button } from '../../../../components/Button'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
+import { SetAmountButton } from '../../../../components/SetAmountButton'
 import { SectionTitle } from '../../../../components/SectionTitle'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { RootState } from '../../../../store'
@@ -131,27 +132,8 @@ function ConversionIOCard (props: { style?: StyleProp<ViewStyle>, mode: 'input'
   const iconType = props.unit === 'UTXO' ? '_UTXO' : 'DFI'
   const titlePrefix = props.mode === 'input' ? 'CONVERT' : 'TO'
   const title = `${translate('screens/Convert', titlePrefix)} ${props.unit}`
-
   const DFIIcon = getTokenIcon(iconType)
-  const MaxButton = (): JSX.Element | null => {
-    if (props.mode === 'output') {
-      return null
-    }
 
-    return (
-      <TouchableOpacity
-        testID='button_max_convert_from'
-        style={tailwind('flex w-12 mr-2')}
-        onPress={() => {
-          if (props.onChange !== undefined) {
-            props.onChange(props.balance.toString())
-          }
-        }}
-      >
-        <Text style={tailwind('text-primary font-bold')}>{translate('components/max', 'MAX')}</Text>
-      </TouchableOpacity>
-    )
-  }
   return (
     <View style={[tailwind('flex-col w-full'), props.style]}>
       <SectionTitle text={title} testID={`text_input_convert_from_${props.mode}_text`} />
@@ -170,15 +152,16 @@ function ConversionIOCard (props: { style?: StyleProp<ViewStyle>, mode: 'input'
         />
         <DFIIcon width={24} height={24} />
       </View>
-      <View style={tailwind('w-full bg-white flex-row border-t border-gray-200 items-center')}>
-        <View style={tailwind('flex flex-row flex-1 ml-4 px-1 py-4')}>
+      <View style={tailwind('w-full px-4 bg-white flex-row border-t border-gray-200 items-center')}>
+        <View style={tailwind('flex flex-row flex-1 px-1 py-4')}>
           <Text>{translate('screens/Convert', 'Balance')}: </Text>
           <NumberFormat
             value={props.balance.toNumber()} decimalScale={8} thousandSeparator displayType='text' suffix=' DFI'
             renderText={(value: string) => <Text style={tailwind('font-medium text-gray-500')}>{value}</Text>}
           />
         </View>
-        {MaxButton()}
+        {props.mode === 'input' && props.onChange && <SetAmountButton type='half' onPress={props.onChange} amount={props.balance} />}
+        {props.mode === 'input' && props.onChange && <SetAmountButton type='max' onPress={props.onChange} amount={props.balance} />}
       </View>
     </View>
   )

app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx

@@ -17,6 +17,7 @@ import { Text, TextInput } from '../../../../../components'
 import { Button } from '../../../../../components/Button'
 import { getTokenIcon } from '../../../../../components/icons/tokens/_index'
 import { SectionTitle } from '../../../../../components/SectionTitle'
+import { SetAmountButton } from '../../../../../components/SetAmountButton'
 import { useNetworkContext } from '../../../../../contexts/NetworkContext'
 import { useWhaleApiClient } from '../../../../../contexts/WhaleContext'
 import { RootState } from '../../../../../store'
@@ -112,7 +113,13 @@ export function SendScreen ({ route, navigation }: Props): JSX.Element {
       />
       <AmountRow
         fee={fee}
-        token={token} control={control} onMaxPress={async (amount) => {
+        token={token}
+        control={control}
+        onMaxPress={async (amount) => {
+          setValue('amount', amount)
+          await trigger('amount')
+        }}
+        onHalfPress={async (amount) => {
           setValue('amount', amount)
           await trigger('amount')
         }}
@@ -190,10 +197,11 @@ interface AmountForm {
   control: Control
   token: WalletToken
   onMaxPress: (amount: string) => void
+  onHalfPress: (amount: string) => void
   fee: BigNumber
 }
 
-function AmountRow ({ token, control, onMaxPress, fee }: AmountForm): JSX.Element {
+function AmountRow ({ token, control, onMaxPress, onHalfPress, fee }: AmountForm): JSX.Element {
   const Icon = getTokenIcon(token.avatarSymbol)
   let maxAmount = token.symbol === 'DFI' ? new BigNumber(token.amount).minus(fee).toFixed(8) : token.amount
   maxAmount = BigNumber.max(maxAmount, 0).toFixed(8)
@@ -234,20 +242,16 @@ function AmountRow ({ token, control, onMaxPress, fee }: AmountForm): JSX.Elemen
         name='amount'
         defaultValue=''
       />
-      <View style={tailwind('flex-row w-full bg-white p-4')}>
-        <View style={tailwind('flex-grow flex-row')}>
+      <View style={tailwind('flex-row w-full bg-white px-4 items-center')}>
+        <View style={tailwind('flex-1 flex-row py-4')}>
           <Text>{translate('screens/SendScreen', 'Balance: ')}</Text>
           <NumberFormat
             value={maxAmount} decimalScale={8} thousandSeparator displayType='text' suffix={` ${token.symbol}`}
             renderText={(value) => <Text testID='max_value' style={tailwind('text-gray-500')}>{value}</Text>}
           />
         </View>
-        <TouchableOpacity testID='max_button' onPress={() => onMaxPress(maxAmount)}>
-          <Text
-            style={tailwind('font-bold text-primary')}
-          >{translate('screens/SendScreen', 'MAX')}
-          </Text>
-        </TouchableOpacity>
+        <SetAmountButton type='half' onPress={onHalfPress} amount={new BigNumber(maxAmount)} />
+        <SetAmountButton type='max' onPress={onMaxPress} amount={new BigNumber(maxAmount)} />
       </View>
     </>
   )

app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx

@@ -4,11 +4,12 @@ import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
-import { ScrollView, TouchableOpacity } from 'react-native'
+import { ScrollView } from 'react-native'
 import NumberFormat from 'react-number-format'
 import { Text, TextInput, View } from '../../../../components'
 import { Button } from '../../../../components/Button'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
+import { SetAmountButton } from '../../../../components/SetAmountButton'
 import { SectionTitle } from '../../../../components/SectionTitle'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { tailwind } from '../../../../tailwind'
@@ -45,11 +46,11 @@ export function AddLiquidityScreen (props: Props): JSX.Element {
     if (pair === undefined) return
     if (ref === 'primary') {
       setTokenAAmount(amountString)
-      setTokenBAmount(refAmount.times(pair.aToBRate).toString())
+      setTokenBAmount(refAmount.times(pair.aToBRate).toFixed(8))
       setSharePercentage(refAmount.div(pair.tokenA.reserve))
     } else {
       setTokenBAmount(amountString)
-      setTokenAAmount(refAmount.times(pair.bToARate).toString())
+      setTokenAAmount(refAmount.times(pair.bToARate).toFixed(8))
       setSharePercentage(refAmount.div(pair.tokenB.reserve))
     }
   }, [pair])
@@ -150,8 +151,8 @@ function TokenInput (props: { symbol: string, balance: BigNumber, current: strin
             <Text style={tailwind('ml-2 text-gray-500 text-right')}>{props.symbol}</Text>
           </View>
         </View>
-        <View style={tailwind('w-full flex-row border-t border-gray-200 items-center')}>
-          <View style={tailwind('flex-row flex-1 p-4')}>
+        <View style={tailwind('w-full px-4 py-2 flex-row border-t border-gray-200 items-center')}>
+          <View style={tailwind('flex-row flex-1')}>
             <Text>{translate('screens/AddLiquidity', 'Balance')}: </Text>
             <NumberFormat
               value={props.balance.toNumber()} decimalScale={3} thousandSeparator displayType='text'
@@ -163,15 +164,16 @@ function TokenInput (props: { symbol: string, balance: BigNumber, current: strin
               )}
             />
           </View>
-          <TouchableOpacity
-            style={tailwind('flex mr-4')}
-            onPress={() => props.onChange(props.balance.toString())}
-          >
-            <Text
-              style={tailwind('font-bold text-primary')}
-            >{translate('screens/AddLiquidity', 'MAX')}
-            </Text>
-          </TouchableOpacity>
+          <SetAmountButton
+            type='half'
+            onPress={props.onChange}
+            amount={props.balance}
+          />
+          <SetAmountButton
+            type='max'
+            onPress={props.onChange}
+            amount={props.balance}
+          />
         </View>
       </View>
     </View>

app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx

@@ -14,6 +14,7 @@ import { Logging } from '../../../../../api'
 import { Text, TextInput } from '../../../../../components'
 import { Button } from '../../../../../components/Button'
 import { getTokenIcon } from '../../../../../components/icons/tokens/_index'
+import { SetAmountButton } from '../../../../../components/SetAmountButton'
 import { SectionTitle } from '../../../../../components/SectionTitle'
 import { useWallet } from '../../../../../contexts/WalletContext'
 import { useTokensAPI } from '../../../../../hooks/wallet/TokensAPI'
@@ -198,8 +199,8 @@ function TokenRow (form: TokenForm): JSX.Element {
         name={controlName}
         defaultValue=''
       />
-      <View style={tailwind('flex-row w-full bg-white p-4')}>
-        <View style={tailwind('flex-grow flex-row')}>
+      <View style={tailwind('flex-row w-full bg-white px-4 items-center')}>
+        <View style={tailwind('flex-1 flex-row py-4')}>
           <Text>{translate('screens/PoolSwapScreen', 'Balance: ')}</Text>
           <NumberFormat
             value={token.amount} decimalScale={8} thousandSeparator displayType='text' suffix={` ${token.symbol}`}
@@ -215,12 +216,10 @@ function TokenRow (form: TokenForm): JSX.Element {
         </View>
         {
           (enableMaxButton != null && onChangeFromAmount !== undefined) && (
-            <TouchableOpacity testID='max_button_token_a' onPress={() => onChangeFromAmount(token.amount)}>
-              <Text
-                style={tailwind('font-bold text-primary')}
-              >{translate('screens/PoolSwapScreen', 'MAX')}
-              </Text>
-            </TouchableOpacity>
+            <>
+              <SetAmountButton type='half' onPress={onChangeFromAmount} amount={new BigNumber(token.amount)} />
+              <SetAmountButton type='max' onPress={onChangeFromAmount} amount={new BigNumber(token.amount)} />
+            </>
           )
         }