ui fixes (#295)

* text overflow update * text overflow update * text overflow update * ocean interface update * ocean interface update * section title
BirthdayResearch · Jul 16, 2021 · 416ee24 · 416ee24
1 parent 9f8d63d
commit 416ee24
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 139 deletions.
diff --git a/app/components/OceanInterface/OceanInterface.tsx b/app/components/OceanInterface/OceanInterface.tsx
@@ -1,3 +1,4 @@
+import { CTransactionSegWit } from '@defichain/jellyfish-transaction/dist'
 import { WhaleApiClient } from '@defichain/whale-api-client'
 import { MaterialIcons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
@@ -11,7 +12,6 @@ import { useWhaleApiClient } from '../../contexts/WhaleContext'
 import { RootState } from '../../store'
 import { firstTransactionSelector, ocean, OceanTransaction } from '../../store/ocean'
 import { translate } from '../../translations'
-import { CTransactionSegWit } from '@defichain/jellyfish-transaction/dist'
 
 const MAX_AUTO_RETRY = 1
 
@@ -48,34 +48,36 @@ export function OceanInterface (): JSX.Element | null {
   // store
   const { height, err: e } = useSelector((state: RootState) => state.ocean)
   const transaction = useSelector((state: RootState) => firstTransactionSelector(state.ocean))
-
+  const slideAnim = useRef(new Animated.Value(0)).current
   // state
   const [tx, setTx] = useState<OceanTransaction | undefined>(transaction)
   const [err, setError] = useState<Error | undefined>(e)
   const [txid, setTxid] = useState<string | undefined>()
 
-  const slideAnim = useRef(new Animated.Value(0)).current
-  Animated.timing(slideAnim, { toValue: height, duration: 300, useNativeDriver: false }).start()
-
   const dismissDrawer = useCallback(() => {
     setTx(undefined)
     setError(undefined)
+    slideAnim.setValue(0)
   }, [])
 
   useEffect(() => {
     // last available job will remained in this UI state until get dismissed
     if (transaction !== undefined) {
+      Animated.timing(slideAnim, { toValue: height, duration: 200, useNativeDriver: false }).start()
       setTx({
         ...transaction,
         broadcasted: false
       })
-
       transaction.signer()
         .then(async signedTx => {
           setTxid(signedTx.txId)
           await broadcastTransaction(signedTx, client)
         })
-        .then(() => setTx({ ...transaction, broadcasted: true, title: translate('screens/OceanInterface', 'Transaction Sent') }))
+        .then(() => setTx({
+          ...transaction,
+          broadcasted: true,
+          title: translate('screens/OceanInterface', 'Transaction Sent')
+        }))
         .catch((e: Error) => {
           let errMsg = e.message
           if (txid !== undefined) {
@@ -110,20 +112,20 @@ export function OceanInterface (): JSX.Element | null {
 function TransactionDetail ({ broadcasted, txid, onClose }: { broadcasted: boolean, txid?: string, onClose: () => void }): JSX.Element {
   let title = 'Signing...'
   if (txid !== undefined) title = 'Broadcasting...'
-  if (broadcasted) title = 'Sent'
+  if (broadcasted) title = 'Transaction Sent'
   return (
     <>
       {
         !broadcasted ? <ActivityIndicator color={PrimaryColor} />
           : <MaterialIcons name='check-circle' size={20} color='#02B31B' />
       }
-      <View style={tailwind('flex-grow mr-1 justify-center items-center text-center')}>
+      <View style={tailwind('flex-auto mx-6 justify-center items-center text-center')}>
         <Text
           style={tailwind('text-sm font-bold')}
         >{translate('screens/OceanInterface', title)}
         </Text>
         {
-          txid !== undefined && <TransactionIDButton txid={txid} onPress={async () => { await gotoExplorer(txid) }} />
+          txid !== undefined && <TransactionIDButton txid={txid} onPress={async () => await gotoExplorer(txid)} />
         }
       </View>
       {
@@ -137,13 +139,15 @@ function TransactionError ({ errMsg, onClose }: { errMsg: string | undefined, on
   return (
     <>
       <MaterialIcons name='error' size={20} color='#ff0000' />
-      <View style={tailwind('flex-grow mr-1 justify-center items-center text-center')}>
+      <View style={tailwind('flex-auto mx-2 justify-center items-center text-center')}>
         <Text
           style={tailwind('text-sm font-bold')}
         >{`${translate('screens/OceanInterface', 'An error has occurred')}`}
         </Text>
         <Text
           style={tailwind('text-sm font-bold')}
+          numberOfLines={1}
+          ellipsizeMode='tail'
         >{errMsg}
         </Text>
       </View>
@@ -155,12 +159,16 @@ function TransactionError ({ errMsg, onClose }: { errMsg: string | undefined, on
 function TransactionIDButton ({ txid, onPress }: { txid: string, onPress?: () => void }): JSX.Element {
   return (
     <TouchableOpacity
-      testID='oceanNetwork_explorer' style={tailwind('flex-row bg-white p-1 items-center')} disabled
+      testID='oceanNetwork_explorer' style={tailwind('flex-row p-1 items-center')}
+      onPress={onPress}
     >
-      <Text style={[PrimaryColorStyle.text, tailwind('text-sm font-medium mr-1')]}>
-        {`${txid.substring(0, 15)}...`}
+      <Text
+        style={[PrimaryColorStyle.text, tailwind('text-sm font-medium mr-1')]} numberOfLines={1}
+        ellipsizeMode='tail'
+      >
+        {txid}
       </Text>
-      <MaterialIcons name='open-in-new' size={18} color={PrimaryColor} onPress={onPress} />
+      <MaterialIcons name='open-in-new' size={18} color={PrimaryColor} />
     </TouchableOpacity>
   )
 }

diff --git a/app/components/OceanInterface/__snapshots__/OceanInterface.test.tsx.snap b/app/components/OceanInterface/__snapshots__/OceanInterface.test.tsx.snap
diff --git a/app/components/SectionTitle.tsx b/app/components/SectionTitle.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Text } from 'react-native'
+import tailwind from 'tailwind-rn'
+
+export function SectionTitle ({ text, testID }: { text: string, testID: string }): JSX.Element {
+  return (
+    <Text
+      testID={testID}
+      style={[tailwind('p-4 text-xs text-gray-500 font-bold mt-2')]}
+    >
+      {
+        text
+      }
+    </Text>
+  )
+}
diff --git a/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx b/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx
@@ -9,6 +9,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import tailwind from 'tailwind-rn'
 import { Text, View } from '../../../../components'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
+import { SectionTitle } from '../../../../components/SectionTitle'
 import { useWhaleApiClient } from '../../../../contexts/WhaleContext'
 import { fetchTokens, useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { RootState } from '../../../../store'
@@ -60,9 +61,7 @@ export function BalancesScreen ({ navigation }: Props): JSX.Element {
               onPress={() => navigation.navigate('Receive')}
             />
           </View> */}
-          <Text testID='balances_title' style={tailwind('p-4 text-xs text-gray-500 mt-2')}>
-            {translate('screens/BalancesScreen', 'BALANCE DETAILS')}
-          </Text>
+          <SectionTitle testID='balances_title' text={translate('screens/BalancesScreen', 'BALANCE DETAILS')} />
         </>
       }
     />
@@ -77,24 +76,28 @@ function BalanceItemRow ({ token, onPress }: { token: WalletToken, onPress: () =
       onPress={onPress} testID={`balances_row_${token.id}`}
       style={tailwind('bg-white py-4 pl-4 pr-2 flex-row justify-between items-center')}
     >
-      <View style={tailwind('flex-row items-center')}>
+      <View style={tailwind('flex-row items-center flex-auto')}>
         <Icon />
-        <View style={tailwind('mx-3')}>
+        <View style={tailwind('mx-3 flex-auto')}>
           <Text>{token.displaySymbol}</Text>
-          <Text style={tailwind('text-xs font-medium text-gray-600')}>{token.name}</Text>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode='tail'
+            style={tailwind('text-xs font-medium text-gray-600')}
+          >{token.name}
+          </Text>
         </View>
+        <NumberFormat
+          value={token.amount} decimalScale={3} thousandSeparator displayType='text'
+          renderText={(value) =>
+            <View style={tailwind('flex-row items-center')}>
+              <Text style={tailwind('mr-2')} testID={`balances_row_${token.id}_amount`}>
+                {value}
+              </Text>
+              <MaterialIcons name='chevron-right' size={24} />
+            </View>}
+        />
       </View>
-
-      <NumberFormat
-        value={token.amount} decimalScale={3} thousandSeparator displayType='text'
-        renderText={(value) =>
-          <View style={tailwind('flex-row items-center')}>
-            <Text style={tailwind('mr-2')} testID={`balances_row_${token.id}_amount`}>
-              {value}
-            </Text>
-            <MaterialIcons name='chevron-right' size={24} />
-          </View>}
-      />
     </TouchableOpacity>
   )
 }