refactor: update homescreen (#469)

* fix: style home screen * fix: style home screen * fix: style home screen * fix: add color to homo buttons * format: style button group * refactor: rename basic row component and other small changes * fix: fix blank space * fix: move view * fix: clean code * fix: clean code * fix: clean code * fix: remove unnecessary view * fix: add no tx message * fix: add no tx message * fix: add no tx message * fix: add no tx message * refactor: change local state name * fix: make basic row clickable
rsksmart · Feb 28, 2023 · d427405 · d427405
1 parent 2797eb7
commit d427405
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 89 deletions.
diff --git a/src/components/BarButtonGroup/BarButtonGroup.tsx b/src/components/BarButtonGroup/BarButtonGroup.tsx
@@ -38,6 +38,7 @@ const styles = StyleSheet.create({
   view: {
     height: 64,
     flexDirection: 'row',
+    opacity: 0.85,
   },
   iconContainerStyle: {
     flex: 1,

diff --git a/src/components/BasicRow/BasicRow.tsx → src/components/BasicRow/index.tsx b/src/components/BasicRow/BasicRow.tsx → src/components/BasicRow/index.tsx
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
@@ -92,6 +92,11 @@ const resources = {
       Cancel: 'Cancel',
       TOTAL: 'TOTAL',
       search_placeholder: 'Search by username or email',
+      home_screen_portfolio: 'Portfolio',
+      home_screen_transactions: 'Transactions',
+      home_screen_empty_transactions: 'Transaction list is empty',
+      home_screen_no_transactions_created:
+        'You have not created any transactions yet',
       info_box_title_search_domain: 'Username & Icon',
       info_box_description_search_domain:
         'Register your username to allow others to send you funds more easily. In case you do not have any RIF funds you can ask a friend to send you some RIF.',

diff --git a/src/screens/activity/ActivityRow.tsx b/src/screens/activity/ActivityRow.tsx
@@ -2,10 +2,15 @@ import {
   rootTabsRouteNames,
   RootTabsScreenProps,
 } from 'navigation/rootNavigator/types'
-
 import { ActivityMixedType } from './types'
 import ActivityRowPresentation from './ActivityRowPresentation'
 import useActivityDeserializer from './useActivityDeserializer'
+import { BasicRow, StatusEnum } from 'components/BasicRow'
+import { AppTouchable } from 'src/components'
+import {
+  homeStackRouteNames,
+  HomeStackScreenProps,
+} from 'navigation/homeNavigator/types'
 
 interface Props extends RootTabsScreenProps<rootTabsRouteNames.Activity> {
   activityTransaction: ActivityMixedType
@@ -18,3 +23,37 @@ export const ActivityRow = ({ activityTransaction, navigation }: Props) => {
 
   return <ActivityRowPresentation {...activityDetails} onPress={handlePress} />
 }
+const getStatus = (status: string) => {
+  switch (status) {
+    case 'pending':
+      return StatusEnum.PENDING
+    case 'failed':
+      return StatusEnum.PENDING
+    default:
+      return undefined
+  }
+}
+
+interface ActivityBasicRowProps {
+  activityTransaction: ActivityMixedType
+  navigation: HomeStackScreenProps<homeStackRouteNames.Main>['navigation']
+}
+export const ActivityBasicRow = ({
+  activityTransaction,
+  navigation,
+}: ActivityBasicRowProps) => {
+  const activityDetails = useActivityDeserializer(activityTransaction)
+  const handlePress = () =>
+    navigation.navigate(rootTabsRouteNames.ActivityDetails, activityTransaction)
+  return (
+    <AppTouchable width={'100%'} onPress={handlePress}>
+      <BasicRow
+        label={activityDetails.to}
+        amount={activityDetails.value}
+        status={getStatus(activityDetails.status)}
+        avatarName={'A'}
+        secondaryLabel={activityDetails.timeHumanFormatted}
+      />
+    </AppTouchable>
+  )
+}
diff --git a/src/screens/home/HomeBarButtonGroup.tsx b/src/screens/home/HomeBarButtonGroup.tsx
@@ -9,12 +9,14 @@ import {
 interface HomeBarButtonGroupProps {
   onPress: (decision: 'SEND' | 'RECEIVE' | 'FAUCET') => void
   isSendDisabled: boolean
+  color?: string
 }
 export const HomeBarButtonGroup = ({
   onPress,
   isSendDisabled,
+  color,
 }: HomeBarButtonGroupProps) => (
-  <BarButtonGroupContainer>
+  <BarButtonGroupContainer backgroundColor={color}>
     <BarButtonGroupIcon
       iconName="south-west"
       IconComponent={MaterialIcon}

diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx
@@ -1,6 +1,5 @@
-import { StyleSheet, View } from 'react-native'
+import { View, ScrollView } from 'react-native'
 import { useCallback, useState } from 'react'
-import { ScrollView } from 'react-native-gesture-handler'
 import { BitcoinNetwork } from '@rsksmart/rif-wallet-bitcoin'
 import { BigNumber } from 'ethers'
 import { useTranslation } from 'react-i18next'
@@ -80,8 +79,9 @@ const PortfolioComponent = ({
   const [isTotalCardSelected, setIsTotalCardSelected] = useState<boolean>(true)
 
   return (
-    <ScrollView horizontal={true} contentContainerStyle={styles.scrollView}>
-      <View style={styles.scrollView}>
+    <View>
+      {/*TODO: This View above is a temporal fix to keep the ScrollView height*/}
+      <ScrollView horizontal={true}>
         <PortfolioCard
           onPress={() => setIsTotalCardSelected(true)}
           color={sharedColors.inputInactive}
@@ -111,16 +111,9 @@ const PortfolioComponent = ({
             )
           },
         )}
-      </View>
-    </ScrollView>
+      </ScrollView>
+    </View>
   )
 }
 
-const styles = StyleSheet.create({
-  scrollView: {
-    flexDirection: 'row',
-    height: 110,
-  },
-})
-
 export default PortfolioComponent
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
@@ -1,13 +1,15 @@
 import { BigNumber } from 'ethers'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Image, StyleSheet, View } from 'react-native'
+import { StyleSheet, View, ScrollView } from 'react-native'
 import { BitcoinNetwork } from '@rsksmart/rif-wallet-bitcoin'
+import { BIP } from '@rsksmart/rif-wallet-bitcoin'
+import { useTranslation } from 'react-i18next'
 import { ITokenWithBalance } from '@rsksmart/rif-wallet-services'
 
 import { balanceToDisplay, convertBalance, getChainIdByType } from 'lib/utils'
 
 import { toChecksumAddress } from 'components/address/lib'
-import { MediumText } from 'components/index'
+import { Typography } from 'components/typography'
 import {
   homeStackRouteNames,
   HomeStackScreenProps,
@@ -24,6 +26,12 @@ import { CurrencyValue, TokenBalance } from 'components/token'
 
 import PortfolioComponent from './PortfolioComponent'
 import { getTokenColor } from './tokenColor'
+import { selectTransactions } from 'store/slices/transactionsSlice'
+import { sharedColors } from 'shared/constants'
+import { useBitcoinTransactionsHandler } from 'screens/activity/useBitcoinTransactionsHandler'
+import useTransactionsCombiner from 'screens/activity/useTransactionsCombiner'
+import { ActivityBasicRow } from 'screens/activity/ActivityRow'
+import { castStyle } from 'shared/utils'
 
 export const HomeScreen = ({
   navigation,
@@ -36,16 +44,19 @@ export const HomeScreen = ({
   const [selectedAddress, setSelectedAddress] = useState<string | undefined>(
     undefined,
   )
-  const [firstValue, setFirstValue] = useState<CurrencyValue>({
-    balance: '0.00',
-    symbol: '',
-    symbolType: 'text',
-  })
-  const [secondValue, setSecondValue] = useState<CurrencyValue>({
-    balance: '0.00',
-    symbol: '',
-    symbolType: 'text',
-  })
+  const [selectedTokenBalance, setSelectedTokenBalance] =
+    useState<CurrencyValue>({
+      balance: '0.00',
+      symbol: '',
+      symbolType: 'text',
+    })
+  const [selectedTokenBalanceUsd, setSelectedTokenBalanceUsd] =
+    useState<CurrencyValue>({
+      balance: '0.00',
+      symbol: '',
+      symbolType: 'text',
+    })
+
   const [hide, setHide] = useState<boolean>(false)
   const balances: Array<ITokenWithBalance | BitcoinNetwork> = useMemo(() => {
     if (bitcoinCore) {
@@ -57,7 +68,6 @@ export const HomeScreen = ({
       return []
     }
   }, [tokenBalances, bitcoinCore])
-
   // token or undefined
   const selected: ITokenWithoutLogo | BitcoinNetwork | undefined =
     selectedAddress && bitcoinCore
@@ -156,15 +166,15 @@ export const HomeScreen = ({
 
   useEffect(() => {
     const { symbol, balance, decimals, price } = selectedToken
-    setFirstValue({
+    setSelectedTokenBalance({
       symbolType: 'icon',
       symbol,
       balance:
         selected instanceof BitcoinNetwork
           ? balance
           : balanceToDisplay(balance, decimals, 5),
     })
-    setSecondValue({
+    setSelectedTokenBalanceUsd({
       symbolType: 'text',
       symbol: '$',
       balance:
@@ -188,78 +198,109 @@ export const HomeScreen = ({
   const onHide = useCallback(() => {
     setHide(!hide)
   }, [hide])
+  const { transactions } = useAppSelector(selectTransactions)
+
+  const btcTransactionFetcher = useBitcoinTransactionsHandler({
+    bip:
+      bitcoinCore && bitcoinCore.networks[0]
+        ? bitcoinCore.networks[0].bips[0]
+        : ({} as BIP),
+    shouldMergeTransactions: true,
+  })
+
+  const transactionsCombined = useTransactionsCombiner(
+    transactions,
+    btcTransactionFetcher.transactions,
+  )
+
+  // this code is copied from the activity screen
+  // On load, fetch both BTC and WALLET transactions
+  useEffect(() => {
+    // TODO: rethink btcTransactionFetcher, when adding as dependency
+    // the function gets executed a million times
+    btcTransactionFetcher.fetchTransactions()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  const { t } = useTranslation()
 
   return (
     <View style={styles.container}>
-      <View style={{ ...styles.topColor, ...backGroundColor }} />
-      <View style={styles.bottomColor} />
-      <View style={styles.parent}>
-        <TokenBalance
-          firstValue={firstValue}
-          secondValue={secondValue}
-          hideable={true}
-          hide={hide}
-          onHide={onHide}
-          color={backGroundColor.backgroundColor}
-        />
-        <HomeBarButtonGroup
-          onPress={handleSendReceive}
-          isSendDisabled={balances.length === 0}
-        />
-        {balances.length === 0 ? (
-          <>
-            <Image
-              source={require('src/images/noBalance.png')}
-              style={styles.noBalance}
+      <TokenBalance
+        firstValue={selectedTokenBalance}
+        secondValue={selectedTokenBalanceUsd}
+        hideable={true}
+        hide={hide}
+        onHide={onHide}
+        color={backGroundColor.backgroundColor}
+      />
+      <HomeBarButtonGroup
+        onPress={handleSendReceive}
+        isSendDisabled={balances.length === 0}
+        color={backGroundColor.backgroundColor}
+      />
+      <Typography style={styles.portfolioLabel} type={'h3'}>
+        {t('home_screen_portfolio')}
+      </Typography>
+
+      <PortfolioComponent
+        selectedAddress={selectedAddress}
+        setSelectedAddress={setSelectedAddress}
+        balances={balances}
+        prices={prices}
+      />
+
+      <Typography style={styles.transactionsLabel} type={'h3'}>
+        {t('home_screen_transactions')}
+      </Typography>
+      {transactionsCombined.length > 1 ? (
+        <ScrollView>
+          {transactionsCombined.map(tx => (
+            <ActivityBasicRow
+              key={tx.id}
+              activityTransaction={tx}
+              navigation={navigation}
             />
-            <MediumText style={styles.text}>
-              You don't have any balances, get some here!
-            </MediumText>
-          </>
-        ) : (
-          <PortfolioComponent
-            selectedAddress={selectedAddress}
-            setSelectedAddress={setSelectedAddress}
-            balances={balances}
-            prices={prices}
-          />
-        )}
-      </View>
+          ))}
+        </ScrollView>
+      ) : (
+        <>
+          <Typography style={styles.emptyTransactionsLabel} type={'h3'}>
+            {t('home_screen_empty_transactions')}
+          </Typography>
+          <Typography style={styles.emptyTransactionsLabel} type={'h4'}>
+            {t('home_screen_no_transactions_created')}
+          </Typography>
+        </>
+      )}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: colors.darkPurple3,
-  },
-  topColor: {
+  emptyTransactionsLabel: castStyle.text({
+    padding: 6,
+    paddingTop: 10,
+  }),
+  portfolioLabel: castStyle.text({
+    padding: 6,
+    paddingTop: 10,
+    color: sharedColors.inputLabelColor,
+  }),
+  transactionsLabel: castStyle.text({
+    padding: 6,
+    color: sharedColors.inputLabelColor,
+  }),
+  container: castStyle.view({
     flex: 1,
-    borderBottomRightRadius: 40,
-    borderBottomLeftRadius: 40,
-  },
-  bottomColor: {
-    flex: 6,
-  },
+    backgroundColor: sharedColors.secondary,
+  }),
 
-  parent: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-
-    borderTopLeftRadius: 40,
-    borderTopRightRadius: 40,
-  },
-  text: {
+  text: castStyle.text({
     textAlign: 'center',
     color: colors.lightPurple,
-  },
-  noBalance: {
-    flex: 1,
+  }),
+  noBalance: castStyle.image({
     width: '100%',
-    height: '100%',
     resizeMode: 'contain',
-  },
+  }),
 })