feat(points): add valora heart imagery to points screen (#5267)

### Description

As the title.

### Test plan



https://github.com/valora-inc/wallet/assets/20150449/8b2cf3da-54fc-4cb2-abee-cf19cbe3b417


### Related issues

- Fixes RET-1071

### Backwards compatibility

Y

### Network scalability

n/a

---------

Co-authored-by: Joseph Bergeron <jophish126@gmail.com>
Co-authored-by: Joe Bergeron <jbergero@alum.mit.edu>

.gitignore

@@ -130,6 +130,7 @@ ios/celo/Base.lproj/*
 ios/celo/Images.xcassets/
 ios/.xcode.env
 src/brandingConfig.ts
+src/icons/LogoHeart.tsx
 src/icons/Logo.tsx
 src/icons/Home.tsx
 src/images/*

branding/celo/src/icons/LogoHeart.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  size?: number
+  testID?: string
+}
+
+export default function LogoHeart({ size = 32, testID }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 25" fill="none" testID={testID}>
+      <Path
+        d="M9.86842 22.3684C13.8653 22.3684 17.1053 19.1284 17.1053 15.1316C17.1053 11.1348 13.8653 7.89476 9.86842 7.89476C5.87158 7.89476 2.63158 11.1348 2.63158 15.1316C2.63158 19.1284 5.87158 22.3684 9.86842 22.3684ZM9.86842 25C4.41842 25 0 20.5816 0 15.1316C0 9.6816 4.41842 5.26318 9.86842 5.26318C15.3184 5.26318 19.7368 9.6816 19.7368 15.1316C19.7368 20.5816 15.3184 25 9.86842 25Z"
+        fill={colors.goldBrand}
+      />
+      <Path
+        d="M15.1316 17.1053C19.1284 17.1053 22.3684 13.8653 22.3684 9.86842C22.3684 5.87158 19.1284 2.63158 15.1316 2.63158C11.1348 2.63158 7.89476 5.87158 7.89476 9.86842C7.89476 13.8653 11.1348 17.1053 15.1316 17.1053ZM15.1316 19.7368C9.6816 19.7368 5.26318 15.3184 5.26318 9.86842C5.26318 4.41842 9.6816 0 15.1316 0C20.5816 0 25 4.41842 25 9.86842C25 15.3184 20.5816 19.7368 15.1316 19.7368Z"
+        fill={colors.primary}
+      />
+      <Path
+        d="M15.4577 19.7369C16.1419 18.9077 16.6324 17.9361 16.8932 16.8932C17.9361 16.6324 18.9077 16.1421 19.7369 15.4579C19.699 16.6658 19.439 17.8563 18.9695 18.9698C17.8561 19.439 16.6656 19.6992 15.4577 19.7369ZM8.10687 8.10687C7.06397 8.36766 6.09239 8.85792 5.26318 9.54213C5.30108 8.33424 5.56108 7.14371 6.03055 6.03029C7.14397 5.56108 8.3345 5.30082 9.54239 5.26318C8.85818 6.09239 8.36766 7.06397 8.10687 8.10687Z"
+        fill={'#5EA33B'}
+      />
+    </Svg>
+  )
+}

scripts/sync_branding.sh

@@ -21,7 +21,7 @@ echo $mobile_root
 cd "$mobile_root"
 
 # Please update the sha when valora branding updates are needed
-valora_branding_sha=fdf3e1b6763d85d27c9057b1efc93d37a0edd118
+valora_branding_sha=771f5d66a19058b7f065179b7cee065470d22d1d
 
 if [[ "$branding" == "valora" ]]; then
   # prevents git from asking credentials

src/components/BeatingHeartLoader.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+import LogoHeart from 'src/icons/LogoHeart'
+
+const BeatingHeartLoader = ({ size }: { size: number }) => {
+  const scale = useSharedValue(1)
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+    }
+  })
+
+  useEffect(() => {
+    scale.value = withRepeat(
+      withSequence(
+        withTiming(1.1, { duration: 600, easing: Easing.ease }),
+        withTiming(1, { duration: 200, easing: Easing.ease })
+      ),
+      -1,
+      false
+    )
+  }, [])
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <LogoHeart size={size} />
+    </Animated.View>
+  )
+}
+
+export default BeatingHeartLoader

src/points/ActivityCardSection.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
+import LogoHeart from 'src/icons/LogoHeart'
 import ActivityCard from 'src/points/ActivityCard'
 import { BottomSheetParams, PointsMetadata, isPointsActivity } from 'src/points/types'
 import { Colors } from 'src/styles/colors'
@@ -51,6 +52,7 @@ export default function ActivityCardSection({ onCardPress, pointsSections }: Pro
           <View style={styles.hr} />
           <View style={styles.pointsSectionHeaderAmountContainer}>
             <Text style={styles.pointsSectionHeaderAmount}>{points}</Text>
+            <LogoHeart size={16} />
           </View>
           <View style={styles.hr} />
         </View>
@@ -87,7 +89,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.gray2,
     paddingHorizontal: Spacing.Small12,
+    paddingVertical: Spacing.Tiny4,
     borderRadius: Spacing.XLarge48,
+    flexDirection: 'row',
+    gap: Spacing.Tiny4,
   },
   pointsSectionHeaderAmount: {
     ...typeScale.labelSemiBoldXSmall,

src/points/PointsHome.tsx

@@ -6,11 +6,12 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { PointsEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import BackButton from 'src/components/BackButton'
+import BeatingHeartLoader from 'src/components/BeatingHeartLoader'
 import BottomSheet, { BottomSheetRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import CustomHeader from 'src/components/header/CustomHeader'
 import AttentionIcon from 'src/icons/Attention'
-import Logo from 'src/icons/Logo'
+import LogoHeart from 'src/icons/LogoHeart'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
 import ActivityCardSection from 'src/points/ActivityCardSection'
@@ -81,8 +82,7 @@ export default function PointsHome({ route, navigation }: Props) {
       <ScrollView contentContainerStyle={styles.contentContainer}>
         {pointsConfigStatus === 'loading' && (
           <View style={styles.loadingStatusContainer}>
-            {/* TODO: update the logo image when assets are ready */}
-            <Logo size={48} />
+            <BeatingHeartLoader size={64} />
             <Text style={styles.loadingStatusTitle}>{t('points.loading.title')}</Text>
             <Text style={styles.loadingStatusBodyText}>{t('points.loading.description')}</Text>
           </View>
@@ -119,6 +119,7 @@ export default function PointsHome({ route, navigation }: Props) {
             </View>
             <View style={styles.balanceRow}>
               <Text style={styles.balance}>{pointsBalance}</Text>
+              <LogoHeart size={28} />
             </View>
             <View style={styles.infoCard}>
               <Text style={styles.infoCardTitle}>{t('points.infoCard.title')}</Text>
@@ -133,6 +134,7 @@ export default function PointsHome({ route, navigation }: Props) {
           <>
             <View style={styles.bottomSheetPointAmountContainer}>
               <Text style={styles.bottomSheetPointAmount}>{bottomSheetParams.points}</Text>
+              <LogoHeart size={16} />
             </View>
             <Text style={styles.bottomSheetTitle}>{bottomSheetParams.title}</Text>
             <Text style={styles.bottomSheetBody}>{bottomSheetParams.body}</Text>
@@ -190,10 +192,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.Thick24,
   },
   bottomSheetPointAmountContainer: {
+    flexDirection: 'row',
+    gap: Spacing.Tiny4,
     alignSelf: 'flex-start',
     backgroundColor: Colors.successLight,
     borderRadius: Spacing.XLarge48,
-    padding: Spacing.Smallest8,
+    paddingVertical: Spacing.Smallest8,
+    paddingHorizontal: Spacing.Small12,
   },
   bottomSheetPointAmount: {
     ...typeScale.labelSemiBoldXSmall,
@@ -210,6 +215,9 @@ const styles = StyleSheet.create({
   },
   balanceRow: {
     paddingBottom: Spacing.Thick24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.Tiny4,
   },
   balance: {
     ...typeScale.displaySmall,