From b915adb9df9996605ff58e1967d9e2225370df56 Mon Sep 17 00:00:00 2001
From: JJ Adonis <josejaimecareers@gmail.com>
Date: Mon, 2 Aug 2021 17:05:23 +0800
Subject: [PATCH] `wallet` - UI fixes (#391)

* UI updates

* updated failing tests
---
 .../screens/Balances/ConvertScreen.tsx        |  6 +--
 .../Balances/screens/ReceiveScreen.tsx        |  2 +-
 .../screens/Dex/DexAddLiquidity.tsx           | 20 +++------
 .../screens/Dex/DexRemoveLiquidity.tsx        |  2 +-
 .../Settings/screens/CommunityScreen.tsx      |  8 ++--
 .../CommunityScreen.test.tsx.snap             | 43 +++++++++----------
 .../convert/convert_account_to_utxos.spec.ts  |  2 +-
 .../convert/convert_utxos_to_account.spec.ts  |  2 +-
 8 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx
index 31824b0a47..f5ab0703d7 100644
--- 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
index e792bb3ff2..8fd0bdc746 100644
--- 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
index 36e3aeb1f8..a8819d30f7 100644
--- 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
index b60b76121e..ce466511de 100644
--- 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
index 6e67c0eff3..8a24e650be 100644
--- 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/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap b/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
index d31afdcc21..ffa31fb52b 100644
--- a/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
+++ b/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
@@ -44,20 +44,10 @@ exports[`<CommunityScreen /> should match snapshot 1`] = `
     </View>
   }
   ListHeaderComponent={
-    <Text
-      style={
-        Object {
-          "fontFamily": "MediumFont",
-          "fontWeight": "500",
-          "paddingBottom": 16,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 24,
-        }
-      }
-    >
-      Connect with the community:
-    </Text>
+    <SectionTitle
+      testID="community_title"
+      text="CONNECT WITH THE COMMUNITY:"
+    />
   }
   data={
     Array [
@@ -146,18 +136,25 @@ exports[`<CommunityScreen /> should match snapshot 1`] = `
               "fontWeight": "400",
               "lineHeight": 24,
             },
-            Object {
-              "fontFamily": "MediumFont",
-              "fontWeight": "500",
-              "paddingBottom": 16,
-              "paddingLeft": 16,
-              "paddingRight": 16,
-              "paddingTop": 24,
-            },
+            Array [
+              Object {
+                "color": "rgba(107, 114, 128, 1)",
+                "fontFamily": "MediumFont",
+                "fontSize": 12,
+                "fontWeight": "500",
+                "lineHeight": 16,
+                "marginTop": 8,
+                "paddingBottom": 16,
+                "paddingLeft": 16,
+                "paddingRight": 16,
+                "paddingTop": 16,
+              },
+            ],
           ]
         }
+        testID="community_title"
       >
-        Connect with the community:
+        CONNECT WITH THE COMMUNITY:
       </Text>
     </View>
     <View
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
index 094659ceb9..5a6580f327 100644
--- 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
index 8214adf20c..f0f878c7ab 100644
--- 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')