diff --git a/app/assets/illustrations/discount.svg b/app/assets/illustrations/discount.svg new file mode 100644 index 000000000..d99b34f3e --- /dev/null +++ b/app/assets/illustrations/discount.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/assets/illustrations/event.svg b/app/assets/illustrations/event.svg new file mode 100644 index 000000000..555ac5075 --- /dev/null +++ b/app/assets/illustrations/event.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/assets/illustrations/reward.svg b/app/assets/illustrations/reward.svg new file mode 100644 index 000000000..4b590a089 --- /dev/null +++ b/app/assets/illustrations/reward.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/components/cards/Favorites.tsx b/app/components/cards/Favorites.tsx new file mode 100644 index 000000000..5de45fec0 --- /dev/null +++ b/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 = ({ 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 ( + + + + + + {date} + + + + {status.charAt(0).toUpperCase() + status.slice(1)} + + + + + {title} + + + {description} + + + + ) +} + +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", + }, +})) diff --git a/app/components/cards/index.ts b/app/components/cards/index.ts index 77229cbd7..71bd61bfc 100644 --- a/app/components/cards/index.ts +++ b/app/components/cards/index.ts @@ -1,3 +1,4 @@ import Balance from "./Balance" +import Favorites from "./Favorites" -export { Balance } +export { Balance, Favorites } diff --git a/app/components/home-screen/QuickStart.tsx b/app/components/home-screen/QuickStart.tsx index 129de243d..7c7455c89 100644 --- a/app/components/home-screen/QuickStart.tsx +++ b/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(), diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts index e627b6aca..cb7b95ddc 100644 --- a/app/i18n/en/index.ts +++ b/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.", diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts index 67d0e2ca8..ebf38b859 100644 --- a/app/i18n/i18n-types.ts +++ b/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 = { diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json index 1416165e3..a227fe71b 100644 --- a/app/i18n/raw-i18n/source/en.json +++ b/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.", diff --git a/app/navigation/root-navigator.tsx b/app/navigation/root-navigator.tsx index 5ccb6108e..d40a95bbe 100644 --- a/app/navigation/root-navigator.tsx +++ b/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, }} /> + ) } diff --git a/app/navigation/stack-param-lists.ts b/app/navigation/stack-param-lists.ts index 5ae5a4785..05756009f 100644 --- a/app/navigation/stack-param-lists.ts +++ b/app/navigation/stack-param-lists.ts @@ -151,6 +151,7 @@ export type RootStackParamList = { EditNostrProfile: undefined NostrSettingsScreen: undefined SignInViaQRCode: undefined + FlashFavoritesList: undefined } export type ChatStackParamList = { diff --git a/app/screens/flash-favorites/FlashFavoriteDetails.tsx b/app/screens/flash-favorites/FlashFavoriteDetails.tsx new file mode 100644 index 000000000..a2e47c917 --- /dev/null +++ b/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 +} + +export default FlashFavoriteDetails + +const useStyles = makeStyles(() => ({})) diff --git a/app/screens/flash-favorites/FlashFavoritesList.tsx b/app/screens/flash-favorites/FlashFavoritesList.tsx new file mode 100644 index 000000000..8ad0ddcf7 --- /dev/null +++ b/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 ( + + } + contentContainerStyle={{ paddingHorizontal: 20 }} + /> + + ) +} + +export default FlashFavoritesList + +const useStyles = makeStyles(() => ({})) diff --git a/app/screens/flash-favorites/index.ts b/app/screens/flash-favorites/index.ts new file mode 100644 index 000000000..328087023 --- /dev/null +++ b/app/screens/flash-favorites/index.ts @@ -0,0 +1,4 @@ +import FlashFavoritesList from "./FlashFavoritesList" +import FlashFavoriteDetails from "./FlashFavoriteDetails" + +export { FlashFavoritesList, FlashFavoriteDetails } diff --git a/app/screens/index.ts b/app/screens/index.ts index 35a694751..d7338f0ea 100644 --- a/app/screens/index.ts +++ b/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"