wallet - UI fixes (#391)

* UI updates * updated failing tests
BirthdayResearch · Aug 2, 2021 · b915adb · b915adb
1 parent 1e70f92
commit b915adb
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 46 deletions.
diff --git a/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx
@@ -93,11 +93,11 @@ export function ConvertScreen (props: Props): JSX.Element {
       <View style={tailwind('bg-white flex-col justify-center')}>
         <PreviewConvResult
           testID='text_preview_input' unit={sourceToken.unit}
-          balance={new BigNumber(sourceToken.amount).minus(convAmount)}
+          balance={BigNumber.maximum(new BigNumber(sourceToken.amount).minus(convAmount), 0)}
         />
         <PreviewConvResult
           testID='text_preview_output' unit={targetToken.unit}
-          balance={new BigNumber(targetToken.amount).plus(convAmount)}
+          balance={BigNumber.maximum(new BigNumber(targetToken.amount).plus(convAmount), 0)}
         />
         <Button
           testID='button_continue_convert'
@@ -240,7 +240,7 @@ function PreviewConvResult (props: { unit: string, balance: BigNumber, testID: s
 }
 
 function canConvert (amount: string, balance: string): boolean {
-  return new BigNumber(balance).gte(amount) && !(new BigNumber(amount).isZero())
+  return new BigNumber(balance).gte(amount) && !(new BigNumber(amount).isZero()) && (new BigNumber(amount).isPositive())
 }
 
 async function constructSignedConversionAndSend (mode: ConversionMode, amount: BigNumber, dispatch: Dispatch<any>): Promise<void> {

diff --git a/app/screens/AppNavigator/screens/Balances/screens/ReceiveScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/ReceiveScreen.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { TouchableOpacity, View } from 'react-native'
 import QRCode from 'react-native-qrcode-svg'
 import { useSelector } from 'react-redux'
-import { Text } from '../../../../../components/Text'
+import { Text } from '../../../../../components'
 import { RootState } from '../../../../../store'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'

diff --git a/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx b/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx
@@ -41,7 +41,7 @@ export function AddLiquidityScreen (props: Props): JSX.Element {
   const [pair, setPair] = useState<ExtPoolPairData>()
 
   const buildSummary = useCallback((ref: EditingAmount, amountString: string): void => {
-    const refAmount = amountString.length === 0 ? new BigNumber(0) : new BigNumber(amountString)
+    const refAmount = amountString.length === 0 || isNaN(+amountString) ? new BigNumber(0) : new BigNumber(amountString)
     if (pair === undefined) return
     if (ref === 'primary') {
       setTokenAAmount(amountString)
@@ -137,18 +137,18 @@ function TokenInput (props: { symbol: string, balance: BigNumber, current: strin
         testID={`token_input_${props.type}_title`}
       />
       <View style={tailwind('flex-col w-full bg-white items-center')}>
-        <View style={tailwind('w-full flex-row items-center p-4')}>
+        <View style={tailwind('w-full flex-row items-center')}>
           <TextInput
             testID={`token_input_${props.type}`}
-            style={tailwind('flex-1 mr-4 text-gray-500')}
+            style={tailwind('flex-1 mr-4 text-gray-500 p-4')}
             value={props.current}
             keyboardType='numeric'
             onChangeText={txt => props.onChange(txt)}
           />
-          <View style={tailwind('justify-center items-center')}>
+          <View style={tailwind('justify-center flex-row items-center pr-4')}>
             <TokenIcon />
+            <Text style={tailwind('ml-2 text-gray-500 text-right')}>{props.symbol}</Text>
           </View>
-          <Text style={tailwind('ml-2 text-gray-500 text-right')}>{props.symbol}</Text>
         </View>
         <View style={tailwind('w-full flex-row border-t border-gray-200 items-center')}>
           <View style={tailwind('flex-row flex-1 p-4')}>
@@ -294,12 +294,6 @@ function canAddLiquidity (pair: ExtPoolPairData, tokenAAmount: BigNumber, tokenB
     return false
   }
 
-  if (
-    balanceA === undefined || balanceA.lt(tokenAAmount) ||
-    balanceB === undefined || balanceB.lt(tokenBAmount)
-  ) {
-    return false
-  }
-
-  return true
+  return !(balanceA === undefined || balanceA.lt(tokenAAmount) ||
+    balanceB === undefined || balanceB.lt(tokenBAmount))
 }
diff --git a/app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx b/app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx
@@ -182,7 +182,7 @@ function ContinueButton (props: { enabled: boolean, onPress: () => void }): JSX.
         title='continue'
         disabled={!props.enabled}
         onPress={props.onPress}
-        label={translate('components/Button', 'CONTINUE')}
+        label={translate('components/Button', 'REMOVE')}
       />
     </View>
   )

diff --git a/app/screens/AppNavigator/screens/Settings/screens/CommunityScreen.tsx b/app/screens/AppNavigator/screens/Settings/screens/CommunityScreen.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { FlatList, Linking, TouchableOpacity } from 'react-native'
 import { Text, View } from '../../../../../components'
+import { SectionTitle } from '../../../../../components/SectionTitle'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'
 
@@ -12,9 +13,10 @@ export function CommunityScreen (): JSX.Element {
       style={tailwind('bg-gray-100')}
       data={Communities}
       ListHeaderComponent={
-        <Text style={tailwind('font-medium pt-6 pb-4 px-4')}>
-          {translate('screens/CommunityScreen', 'Connect with the community:')}
-        </Text>
+        <SectionTitle
+          text={translate('screens/CommunityScreen', 'CONNECT WITH THE COMMUNITY:')}
+          testID='community_title'
+        />
       }
       ListFooterComponent={
         <View style={tailwind('items-center py-6 px-4')}>

diff --git a/...screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap b/...screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
diff --git a/cypress/integration/functional/balances/convert/convert_account_to_utxos.spec.ts b/cypress/integration/functional/balances/convert/convert_account_to_utxos.spec.ts
@@ -30,7 +30,7 @@ context('wallet/balances/convert - accountToUtxos', () => {
       .invoke('attr', 'type', 'text') // cypress issue with numeric/decimal input, must cast
       .type('11.1')
 
-    cy.getByTestID('text_preview_input_value').contains('-1.1 DFI')
+    cy.getByTestID('text_preview_input_value').contains('0 DFI')
     cy.getByTestID('text_preview_output_value').contains('21.1 DFI')
 
     cy.getByTestID('button_continue_convert').should('not.be.enabled')

diff --git a/cypress/integration/functional/balances/convert/convert_utxos_to_account.spec.ts b/cypress/integration/functional/balances/convert/convert_utxos_to_account.spec.ts
@@ -28,7 +28,7 @@ context('wallet/balances/convert - utxosToAccount', () => {
       .invoke('attr', 'type', 'text') // cypress issue with numeric/decimal input, must cast
       .type('11.1')
 
-    cy.getByTestID('text_preview_input_value').contains('-1.1 DFI')
+    cy.getByTestID('text_preview_input_value').contains('0 DFI')
     cy.getByTestID('text_preview_output_value').contains('11.1 DFI')
 
     cy.getByTestID('button_continue_convert').should('not.be.enabled')