diff --git a/app/components/june-challenge/card.tsx b/app/components/june-challenge/card.tsx
new file mode 100644
index 0000000000..ef6b0d144c
--- /dev/null
+++ b/app/components/june-challenge/card.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react"
+import { View } from "react-native"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import {
+ JUNE_1_2024_12_AM_UTC_MINUS_6,
+ getTimeLeft,
+ JULY_1_2024_12_AM_UTC_MINUS_6,
+} from "@app/utils/date"
+import { Text, makeStyles, useTheme } from "@rneui/themed"
+
+import { GaloyIcon } from "../atomic/galoy-icon"
+import { PressableCard } from "../pressable-card"
+import { JuneChallengeModal } from "./modal"
+
+export const JuneChallengeCard: React.FC = () => {
+ const [modalIsOpen, setModalIsOpen] = useState(false)
+ const openModal = () => setModalIsOpen(true)
+
+ const {
+ theme: { colors },
+ } = useTheme()
+ const styles = useStyles()
+ const { LL } = useI18nContext()
+
+ const [countDown, setCountDown] = useState(
+ getTimeLeft({
+ after: JUNE_1_2024_12_AM_UTC_MINUS_6,
+ until: JULY_1_2024_12_AM_UTC_MINUS_6,
+ }),
+ )
+
+ useEffect(() => {
+ const dateNow = Date.now()
+ if (dateNow > JULY_1_2024_12_AM_UTC_MINUS_6) return
+
+ const t = setInterval(() => {
+ setCountDown(
+ getTimeLeft({
+ after: JUNE_1_2024_12_AM_UTC_MINUS_6,
+ until: JULY_1_2024_12_AM_UTC_MINUS_6,
+ }),
+ )
+ }, 1000)
+
+ return () => clearInterval(t)
+ }, [setCountDown])
+
+ const currentTime = Date.now()
+ if (
+ currentTime > JULY_1_2024_12_AM_UTC_MINUS_6 ||
+ currentTime < JUNE_1_2024_12_AM_UTC_MINUS_6
+ )
+ return <>>
+
+ return (
+
+
+
+
+
+
+ {LL.Circles.juneChallenge.title()}
+
+ {countDown}
+
+ {LL.Circles.juneChallenge.description()}
+
+
+
+
+
+
+ )
+}
+
+const useStyles = makeStyles(({ colors }) => ({
+ card: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ padding: 16,
+ borderRadius: 10,
+ backgroundColor: colors.grey5,
+ },
+ textContainer: {
+ flex: 1,
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ rowGap: 6,
+ },
+ beside: {
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ columnGap: 10,
+ },
+}))
diff --git a/app/components/june-challenge/index.tsx b/app/components/june-challenge/index.tsx
new file mode 100644
index 0000000000..cfa5107fa6
--- /dev/null
+++ b/app/components/june-challenge/index.tsx
@@ -0,0 +1,2 @@
+export * from "./modal"
+export * from "./card"
diff --git a/app/components/june-challenge/modal.tsx b/app/components/june-challenge/modal.tsx
new file mode 100644
index 0000000000..e9676e80e2
--- /dev/null
+++ b/app/components/june-challenge/modal.tsx
@@ -0,0 +1,139 @@
+import * as React from "react"
+import { Linking, View } from "react-native"
+import Modal from "react-native-modal"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { useCirclesCard } from "@app/screens/people-screen/circles/use-circles-card"
+import { makeStyles, useTheme, Text } from "@rneui/themed"
+
+import { GaloyIcon } from "../atomic/galoy-icon"
+import { GaloyIconButton } from "../atomic/galoy-icon-button"
+import { GaloyPrimaryButton } from "../atomic/galoy-primary-button"
+import { GaloyToast } from "../galoy-toast"
+
+const LEARN_MORE_PAGE_URL = "https://sv24.adoptingbitcoin.org/"
+
+type Props = {
+ isVisible: boolean
+ setIsVisible: (isVisible: boolean) => void
+}
+
+export const JuneChallengeModal: React.FC = ({ isVisible, setIsVisible }) => {
+ const { LL } = useI18nContext()
+
+ const {
+ theme: { colors },
+ } = useTheme()
+ const styles = useStyles()
+
+ const acknowledgeModal = () => {
+ setIsVisible(false)
+ }
+
+ const { ShareImg, share } = useCirclesCard()
+
+ return (
+
+
+
+
+
+
+ {LL.Circles.juneChallenge.title()}
+
+
+ {LL.Circles.juneChallenge.details()}
+
+ {ShareImg}
+
+
+ {LL.Circles.learnMore()}
+ Linking.openURL(LEARN_MORE_PAGE_URL)}
+ >
+ {LEARN_MORE_PAGE_URL}
+
+
+ {/*
+ {LL.Circles.connectOnSocial()}
+ Linking.openURL(SOCIAL_LINK_TREE)}
+ >
+ {SOCIAL_LINK_TREE}
+
+
+
+ {LL.Circles.fullDetails()}
+ Linking.openURL(CHALLENGE_PAGE_URL)}
+ >
+ {CHALLENGE_PAGE}
+
+ */}
+
+
+
+
+ )
+}
+
+const useStyles = makeStyles(({ colors }) => ({
+ container: {
+ paddingHorizontal: 12,
+ display: "flex",
+ flexDirection: "column",
+ rowGap: 20,
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ cross: {
+ position: "absolute",
+ right: 20,
+ top: -10,
+ },
+ top: { marginTop: 40 },
+ modalCard: {
+ backgroundColor: colors.grey5,
+ borderRadius: 16,
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ paddingVertical: 30,
+ },
+ details: {
+ textAlign: "center",
+ paddingHorizontal: 20,
+ },
+ reminder: {
+ textAlign: "center",
+ paddingHorizontal: 20,
+ color: colors.grey2,
+ },
+ underline: {
+ textDecorationLine: "underline",
+ },
+ containerData: {
+ display: "flex",
+ flexDirection: "column",
+ rowGap: 2,
+ justifyContent: "center",
+ alignItems: "center",
+ },
+}))
diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts
index 1f31fcf792..409130dca6 100644
--- a/app/i18n/en/index.ts
+++ b/app/i18n/en/index.ts
@@ -2845,10 +2845,16 @@ const en: BaseTranslation = {
drivingAdoption: "I'm driving Bitcoin adoption using Blink.",
connectOnSocial: "Connect on social: ",
fullDetails: "Full details at ",
+ learnMore: "Learn more about Adopting Bitcoin at",
mayChallenge: {
title: "May Challenge!",
description: "Grow your inner circle by 6 for a chance to win a set of Pizzas on your next Bitcoin Meetup.",
details: "Want a Bitcoin Pizza Day Party?\n\nExpand your Inner Circle by 6 for a shot at winning a set of pizzas for your next Bitcoin Meetup. The challenge wraps up on May 15th.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThe prize is $150 for pizzas."
+ },
+ juneChallenge: {
+ title: "June Challenge!",
+ description: "Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador",
+ details: "Win a privilege ticket to Adopting Bitcoin El Salvador\n\nExpand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThis time, there will be two winners!"
}
},
FullOnboarding: {
diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts
index 98af3860c0..fb5762805e 100644
--- a/app/i18n/i18n-types.ts
+++ b/app/i18n/i18n-types.ts
@@ -8940,6 +8940,10 @@ type RootTranslation = {
* Full details at
*/
fullDetails: string
+ /**
+ * Learn more about Adopting Bitcoin at
+ */
+ learnMore: string
mayChallenge: {
/**
* May Challenge!
@@ -8960,6 +8964,26 @@ type RootTranslation = {
*/
details: string
}
+ juneChallenge: {
+ /**
+ * June Challenge!
+ */
+ title: string
+ /**
+ * Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador
+ */
+ description: string
+ /**
+ * Win a privilege ticket to Adopting Bitcoin El Salvador
+
+ Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.
+
+ Share your circles on social with the hashtag #blinkcircles to participate.
+
+ This time, there will be two winners!
+ */
+ details: string
+ }
}
FullOnboarding: {
/**
@@ -17880,6 +17904,10 @@ export type TranslationFunctions = {
* Full details at
*/
fullDetails: () => LocalizedString
+ /**
+ * Learn more about Adopting Bitcoin at
+ */
+ learnMore: () => LocalizedString
mayChallenge: {
/**
* May Challenge!
@@ -17900,6 +17928,26 @@ export type TranslationFunctions = {
*/
details: () => LocalizedString
}
+ juneChallenge: {
+ /**
+ * June Challenge!
+ */
+ title: () => LocalizedString
+ /**
+ * Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador
+ */
+ description: () => LocalizedString
+ /**
+ * Win a privilege ticket to Adopting Bitcoin El Salvador
+
+ Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.
+
+ Share your circles on social with the hashtag #blinkcircles to participate.
+
+ This time, there will be two winners!
+ */
+ details: () => LocalizedString
+ }
}
FullOnboarding: {
/**
diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json
index f014d6b5bd..bafd783308 100644
--- a/app/i18n/raw-i18n/source/en.json
+++ b/app/i18n/raw-i18n/source/en.json
@@ -2726,10 +2726,16 @@
"drivingAdoption": "I'm driving Bitcoin adoption using Blink.",
"connectOnSocial": "Connect on social: ",
"fullDetails": "Full details at ",
+ "learnMore": "Learn more about Adopting Bitcoin at ",
"mayChallenge": {
"title": "May Challenge!",
"description": "Grow your inner circle by 6 for a chance to win a set of Pizzas on your next Bitcoin Meetup.",
"details": "Want a Bitcoin Pizza Day Party?\n\nExpand your Inner Circle by 6 for a shot at winning a set of pizzas for your next Bitcoin Meetup. The challenge wraps up on May 15th.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThe prize is $150 for pizzas."
+ },
+ "juneChallenge": {
+ "title": "June Challenge!",
+ "description": "Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador",
+ "details": "Win a privilege ticket to Adopting Bitcoin El Salvador\n\nExpand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThis time, there will be two winners!"
}
},
"FullOnboarding": {
diff --git a/app/i18n/raw-i18n/translations/es.json b/app/i18n/raw-i18n/translations/es.json
index 815f6b6374..250b620edd 100644
--- a/app/i18n/raw-i18n/translations/es.json
+++ b/app/i18n/raw-i18n/translations/es.json
@@ -2685,6 +2685,7 @@
"drivingAdoption": "Estoy impulsando la adopción de Bitcoin usando Blink.",
"connectOnSocial": "Conecta en redes sociales:",
"fullDetails": "Detalles completos en",
+ "learnMore": "Obtén más información sobre Adopting Bitcoin en ",
"decemberChallenge": {
"title": "¡Reto de diciembre! ",
"description": "\"¡+10 amigos a tu círculo interno para tener la oportunidad de ganar $100!\"",
@@ -2709,6 +2710,11 @@
"title": "Reto de abril!",
"description": "Amplia en 12 tu círculo interno y en 3 tu círculo externo para tener la oportunidad de ganar una Bitbox02 hardware wallet.",
"details": "En el mes del Halving, amplía tu Círculo Interior en 12 y aumenta tu Círculo Exterior en 3 para tener la oportunidad de ganar una Bitbox02 hardware wallet.\n\nRecordatorio: Tus círculos crecen cuando envías a un nuevo usuario de Blink sus primeros sats.\n\nComparte tus círculos en las redes sociales con el hashtag #blinkcircles para participar."
+ },
+ "juneChallenge": {
+ "title": "Challenge de Junio!",
+ "description": "¡Amplía tu Círculo Interno en 10 para tener la oportunidad de ganar un boleto privilegio de $1000 para Adopting Bitcoin El Salvador!",
+ "details": "Gana un boleto privilegio para Adopting Bitcoin El Salvador\n\n¡Amplía tu Círculo Interno en 10 para tener la oportunidad de ganar un boleto privilegio de $1000 para Adopting Bitcoin El Salvador! El boleto incluye acceso exclusivo a la conferencia principal, al entrepiso con comida/bebidas/snacks, a la cena de los oradores y al Festival de Cine.\n\nComparte tus círculos en las redes sociales con el hashtag #blinkcircles para participar.\n\n¡Esta vez, habrá dos ganadores!"
}
},
"FullOnboarding": {
diff --git a/app/screens/people-screen/circles/circles-dashboard-screen.tsx b/app/screens/people-screen/circles/circles-dashboard-screen.tsx
index 7ec9eb51b5..c1b85b0679 100644
--- a/app/screens/people-screen/circles/circles-dashboard-screen.tsx
+++ b/app/screens/people-screen/circles/circles-dashboard-screen.tsx
@@ -16,6 +16,7 @@ import { Text, makeStyles, useTheme } from "@rneui/themed"
import { Screen } from "../../../components/screen"
import { InviteFriendsCard } from "./invite-friends-card"
import { ShareCircles } from "./share-circles-card"
+import { JuneChallengeCard } from "@app/components/june-challenge"
gql`
query Circles {
@@ -153,6 +154,7 @@ export const CirclesDashboardScreen: React.FC = () => {
)}
+
{isLonely ? : }
diff --git a/app/utils/date.ts b/app/utils/date.ts
index 19abd56289..a849e5e0b9 100644
--- a/app/utils/date.ts
+++ b/app/utils/date.ts
@@ -26,6 +26,10 @@ export const JUNE_1_2024_12_AM_UTC_MINUS_6 = new Date(
Date.UTC(2024, 5, 1, 6, 0, 0),
).getTime()
+export const JULY_1_2024_12_AM_UTC_MINUS_6 = new Date(
+ Date.UTC(2024, 6, 1, 6, 0, 0),
+).getTime()
+
const secondsToDDMMSS = (totalSeconds: number) => {
if (totalSeconds < 0) return ""