feat/favorites-card

app/components/cards/Favorites.tsx

@@ -0,0 +1,93 @@
+import React from "react"
+import { View } from "react-native"
+import { makeStyles, Text, useTheme } from "@rneui/themed"
+import moment from "moment"
+
+// assets
+import Event from "@app/assets/illustrations/event.svg"
+import Reward from "@app/assets/illustrations/reward.svg"
+import Discount from "@app/assets/illustrations/discount.svg"
+
+type Props = {
+  title: string
+  description: string
+  starts: number
+  ends: number
+  type: string
+}
+
+const Favorites: React.FC<Props> = ({ title, description, starts, ends, type }) => {
+  const styles = useStyles()
+  const { colors } = useTheme().theme
+
+  const date = `${moment(new Date(starts)).format("MMM Do")} ~ ${moment(
+    new Date(ends),
+  ).format("MMM Do")}`
+  const time = new Date().getTime()
+  const status = time > ends ? "expired" : time < starts ? "coming" : "active"
+
+  const Image = type === "event" ? Event : type === "discount" ? Discount : Reward
+  return (
+    <View style={styles.wrapper}>
+      <Image width={100} height={100} />
+      <View style={styles.details}>
+        <View style={styles.header}>
+          <Text type="p4" color={colors.grey1}>
+            {date}
+          </Text>
+          <View style={[styles.status, styles[status]]}>
+            <Text type="caption" color={colors.white}>
+              {status.charAt(0).toUpperCase() + status.slice(1)}
+            </Text>
+          </View>
+        </View>
+        <Text type="p1" bold>
+          {title}
+        </Text>
+        <Text type="p3" numberOfLines={3} color={colors.grey1}>
+          {description}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+export default Favorites
+
+const useStyles = makeStyles(({ colors }) => ({
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 20,
+    marginVertical: 10,
+    padding: 10,
+    borderColor: colors.grey3,
+    backgroundColor: colors.background,
+  },
+  details: {
+    flex: 1,
+    marginLeft: 10,
+    gap: 5,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  status: {
+    backgroundColor: "green",
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 10,
+  },
+  expired: {
+    backgroundColor: "gray",
+  },
+  active: {
+    backgroundColor: "green",
+  },
+  coming: {
+    backgroundColor: "blue",
+  },
+}))

app/components/cards/index.ts

@@ -1,3 +1,4 @@
 import Balance from "./Balance"
+import Favorites from "./Favorites"
 
-export { Balance }
+export { Balance, Favorites }

app/components/home-screen/QuickStart.tsx

@@ -13,6 +13,7 @@ import Flashcard from "@app/assets/icons/empty-flashcard.svg"
 import NonCustodialWallet from "@app/assets/illustrations/non-custodial-wallet.svg"
 import GoldWallet from "@app/assets/illustrations/gold-wallet.svg"
 import SecureWallet from "@app/assets/illustrations/secure-wallet.svg"
+import Reward from "@app/assets/illustrations/reward.svg"
 
 // components
 import { UpgradeAccountModal } from "../upgrade-account-modal"
@@ -64,6 +65,13 @@ const QuickStart = () => {
   }
 
   let carouselData = [
+    {
+      type: "favorites",
+      title: LL.HomeScreen.favoritesTitle(),
+      description: LL.HomeScreen.favoritesDesc(),
+      image: Reward,
+      onPress: () => navigation.navigate("FlashFavoritesList"),
+    },
     {
       type: "upgrade",
       title: LL.HomeScreen.upgradeTitle(),

app/i18n/en/index.ts

@@ -563,7 +563,10 @@ const en: BaseTranslation = {
     btcWalletTitle: "Enable BTC wallet",
     btcWalletDesc: "Easily transfer larger amounts in Bitcoin.",
     backupTitle: "Backup your BTC wallet",
-    backupDesc: "Backup and secure your Bitcoin wallet using recovery phrase."
+    backupDesc: "Backup and secure your Bitcoin wallet using recovery phrase.",
+		favoritesTitle: "Flash favorites",
+		favoritesDesc: "Discover hand-picked deals, exclusive events, and special rewards all in one place."
+
   },
   PinScreen: {
     attemptsRemaining: "Incorrect PIN. {attemptsRemaining: number} attempts remaining.",

app/i18n/i18n-types.ts

@@ -1776,6 +1776,14 @@ type RootTranslation = {
 		 * B​a​c​k​u​p​ ​a​n​d​ ​s​e​c​u​r​e​ ​y​o​u​r​ ​B​i​t​c​o​i​n​ ​w​a​l​l​e​t​ ​u​s​i​n​g​ ​r​e​c​o​v​e​r​y​ ​p​h​r​a​s​e​.
 		 */
 		backupDesc: string
+		/**
+		 * Flash favorites
+		 */
+		favoritesTitle: string
+		/**
+		 * Discover hand-picked deals, exclusive events, and special rewards all in one place.
+		 */
+		favoritesDesc: string
 	}
 	PinScreen: {
 		/**
@@ -6508,6 +6516,14 @@ export type TranslationFunctions = {
 		 * Backup and secure your Bitcoin wallet using recovery phrase.
 		 */
 		backupDesc: () => LocalizedString
+		/**
+		 * Flash favorites
+		 */
+		favoritesTitle: () => LocalizedString
+		/**
+		 * Discover hand-picked deals, exclusive events, and special rewards all in one place.
+		 */
+		favoritesDesc: () => LocalizedString
 	}
 	PinScreen: {
 		/**
@@ -9430,6 +9446,7 @@ export type TranslationFunctions = {
 			copied: () => LocalizedString
 		}
 	}
+
 }
 
 export type Formatters = {

app/i18n/raw-i18n/source/en.json

@@ -532,7 +532,9 @@
         "btcWalletTitle": "Enable BTC wallet",
         "btcWalletDesc": "Easily transfer larger amounts in Bitcoin.",
         "backupTitle": "Backup your BTC wallet",
-        "backupDesc": "Backup and secure your Bitcoin wallet using recovery phrase."
+        "backupDesc": "Backup and secure your Bitcoin wallet using recovery phrase.",
+        "favoritesTitle": "Flash favorites",
+		"favoritesDesc": "Discover hand-picked deals, exclusive events, and special rewards all in one place."
     },
     "PinScreen": {
         "attemptsRemaining": "Incorrect PIN. {attemptsRemaining: number} attempts remaining.",

app/navigation/root-navigator.tsx

@@ -87,6 +87,7 @@ import {
   TransactionHistoryTabs,
   USDTransactionHistory,
   SignInViaQRCode,
+  FlashFavoritesList,
 } from "@app/screens"
 import { usePersistentStateContext } from "@app/store/persistent-state"
 import { NotificationSettingsScreen } from "@app/screens/settings-screen/notifications-screen"
@@ -575,6 +576,11 @@ export const RootStack = () => {
           cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
         }}
       />
+      <RootNavigator.Screen
+        name="FlashFavoritesList"
+        component={FlashFavoritesList}
+        options={{ headerShown: true, title: LL.HomeScreen.favoritesTitle() }}
+      />
     </RootNavigator.Navigator>
   )
 }

app/navigation/stack-param-lists.ts

@@ -151,6 +151,7 @@ export type RootStackParamList = {
   EditNostrProfile: undefined
   NostrSettingsScreen: undefined
   SignInViaQRCode: undefined
+  FlashFavoritesList: undefined
 }
 
 export type ChatStackParamList = {

app/screens/flash-favorites/FlashFavoriteDetails.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { makeStyles } from "@rneui/themed"
+
+// components
+import { Screen } from "@app/components/screen"
+
+const FlashFavoriteDetails = () => {
+  return <Screen></Screen>
+}
+
+export default FlashFavoriteDetails
+
+const useStyles = makeStyles(() => ({}))

app/screens/flash-favorites/FlashFavoritesList.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { FlatList } from "react-native"
+import { makeStyles } from "@rneui/themed"
+
+// components
+import { Screen } from "@app/components/screen"
+import { Favorites } from "@app/components/cards"
+
+const data = [
+  {
+    title: "Event Favorite card",
+    description:
+      "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is",
+    starts: 1757211118472,
+    ends: 1757711118472,
+    type: "event",
+  },
+  {
+    title: "Reward Favorite card",
+    description:
+      "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is",
+    starts: 1757711118472,
+    ends: 1758711118472,
+    type: "reward",
+  },
+  {
+    title: "Discount Favorite card",
+    description:
+      "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is",
+    starts: 1758711118472,
+    ends: 1759999118472,
+    type: "discount",
+  },
+]
+
+const FlashFavoritesList = () => {
+  return (
+    <Screen>
+      <FlatList
+        data={data}
+        renderItem={({ item }) => <Favorites {...item} />}
+        contentContainerStyle={{ paddingHorizontal: 20 }}
+      />
+    </Screen>
+  )
+}
+
+export default FlashFavoritesList
+
+const useStyles = makeStyles(() => ({}))

app/screens/flash-favorites/index.ts

@@ -0,0 +1,4 @@
+import FlashFavoritesList from "./FlashFavoritesList"
+import FlashFavoriteDetails from "./FlashFavoriteDetails"
+
+export { FlashFavoritesList, FlashFavoriteDetails }

app/screens/index.ts

@@ -1,3 +1,4 @@
 export * from "./backup-screen"
 export * from "./import-wallet-screen"
 export * from "./transaction-history"
+export * from "./flash-favorites"