From e193ebc5aee5980d91c0ec06985064b144fb0189 Mon Sep 17 00:00:00 2001
From: First-Terraner <m.echerbebo@gmail.com>
Date: Thu, 24 Aug 2023 19:35:15 +0200
Subject: [PATCH] adapt nostr onboarding screen

---
 src/components/Logo.tsx          |  5 +++
 src/components/nav/BottomNav.tsx |  7 +---
 src/components/nav/Navigator.tsx |  5 +--
 src/model/nav.ts                 |  6 +--
 src/screens/NostrExplainer.tsx   | 65 --------------------------------
 src/screens/NostrOnboarding.tsx  | 42 +++++++++++++++++++++
 6 files changed, 53 insertions(+), 77 deletions(-)
 delete mode 100644 src/screens/NostrExplainer.tsx
 create mode 100644 src/screens/NostrOnboarding.tsx

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index ced47e53..524e7267 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -19,4 +19,9 @@ const styles = StyleSheet.create({
 	img: {
 		resizeMode: 'contain',
 	},
+	Img: {
+		width: 200,
+		height: 200,
+		resizeMode: 'contain'
+	},
 })
\ No newline at end of file
diff --git a/src/components/nav/BottomNav.tsx b/src/components/nav/BottomNav.tsx
index 4b3d1c33..4ef178b8 100644
--- a/src/components/nav/BottomNav.tsx
+++ b/src/components/nav/BottomNav.tsx
@@ -20,17 +20,12 @@ export default function BottomNav({ navigation, route }: TBottomNavProps) {
 		if (routeStr === 'Address book') {
 			// check if explainer has been viewed, else navigate to screen
 			const nostrExplainer = await store.get(STORE_KEYS.nostrexplainer)
-			navigation.navigate(!isStr(nostrExplainer) || !nostrExplainer.length ? 'nostr explainer' : routeStr)
+			navigation.navigate(!isStr(nostrExplainer) || !nostrExplainer.length ? 'nostr onboarding' : routeStr)
 			return
 		}
 		navigation.navigate(routeStr)
 	}
 
-	// const isMintRelatedScreen =
-	// 	route.name === 'mints' ||
-	// 	route.name === 'mintmanagement' ||
-	// 	route.name === 'mint proofs'
-
 	const isWalletRelatedScreen = route.name === 'dashboard'
 
 	const isSettingsRelatedScreen = route.name === 'Settings' ||
diff --git a/src/components/nav/Navigator.tsx b/src/components/nav/Navigator.tsx
index 6ee99c34..b5ad677c 100644
--- a/src/components/nav/Navigator.tsx
+++ b/src/components/nav/Navigator.tsx
@@ -6,7 +6,6 @@ import ContactPage from '@screens/Addressbook/Contact'
 import AuthPage from '@screens/Auth'
 import Dashboard from '@screens/Dashboard'
 import { Disclaimer } from '@screens/Disclaimer'
-// import ExplainerScreen from '@screens/Explainer'
 import HistoryPage from '@screens/History'
 import DetailsPage from '@screens/History/Details'
 import Mints from '@screens/Mints'
@@ -14,7 +13,7 @@ import MintInfoPage from '@screens/Mints/Info'
 import MintBackup from '@screens/Mints/MintBackup'
 import MintManagement from '@screens/Mints/MintManagement'
 import MintProofsPage from '@screens/Mints/Proofs'
-import NostrExplainerScreen from '@screens/NostrExplainer'
+import NostrOnboardingScreen from '@screens/NostrOnboarding'
 import OnboardingScreen from '@screens/Onboarding'
 import ProcessingScreen from '@screens/Payment/Processing'
 import ProcessingErrorScreen from '@screens/Payment/ProcessingError'
@@ -89,7 +88,7 @@ export default function Navigator({ shouldSetup, pinHash, bgAuth, setBgAuth }: I
 						animationDuration: 250,
 					}}
 				/>
-				<Stack.Screen name='nostr explainer' component={NostrExplainerScreen} />
+				<Stack.Screen name='nostr onboarding' component={NostrOnboardingScreen} />
 				<Stack.Screen
 					name='dashboard'
 					component={Dashboard}
diff --git a/src/model/nav.ts b/src/model/nav.ts
index fc963ce6..d6977731 100644
--- a/src/model/nav.ts
+++ b/src/model/nav.ts
@@ -14,7 +14,7 @@ interface INostrProps {
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type RootStackParamList = {
 	onboarding: undefined
-	'nostr explainer': undefined
+	'nostr onboarding': undefined
 	dashboard: undefined
 	disclaimer: undefined
 	history: undefined
@@ -170,7 +170,7 @@ export type RootStackParamList = {
 
 export type TRouteString = 'dashboard' | 'mints' | 'Address book' | 'Settings'
 export type TOnboardingPageProps = NativeStackScreenProps<RootStackParamList, 'onboarding', 'MyStack'>
-export type TNostrExplainerPageProps = NativeStackScreenProps<RootStackParamList, 'nostr explainer', 'MyStack'>
+export type TNostrOnboardingPageProps = NativeStackScreenProps<RootStackParamList, 'nostr onboarding', 'MyStack'>
 export type TSelectMintPageProps = NativeStackScreenProps<RootStackParamList, 'selectMint', 'MyStack'>
 export type TSelectTargetPageProps = NativeStackScreenProps<RootStackParamList, 'selectTarget', 'MyStack'>
 export type TSelectMintToSwapToPageProps = NativeStackScreenProps<RootStackParamList, 'selectMintToSwapTo', 'MyStack'>
@@ -207,7 +207,7 @@ export type TBackupPageProps = NativeStackScreenProps<RootStackParamList, 'Backu
 export type TAddressBookPageProps = NativeStackScreenProps<RootStackParamList, 'Address book'>
 export type IContactPageProps = NativeStackScreenProps<RootStackParamList, 'Contact'>
 export type TBottomNavProps =
-	TNostrExplainerPageProps |
+	TNostrOnboardingPageProps |
 	TDashboardPageProps |
 	TMintsPageProps |
 	TMintManagementPageProps |
diff --git a/src/screens/NostrExplainer.tsx b/src/screens/NostrExplainer.tsx
deleted file mode 100644
index 77e24243..00000000
--- a/src/screens/NostrExplainer.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Button from '@comps/Button'
-import Logo from '@comps/Logo'
-import Txt from '@comps/Txt'
-import { isIOS } from '@consts'
-import type { TNostrExplainerPageProps } from '@model/nav'
-import { useThemeContext } from '@src/context/Theme'
-import { NS } from '@src/i18n'
-import { store } from '@store'
-import { STORE_KEYS } from '@store/consts'
-import { highlight as hi, mainColors } from '@styles'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
-
-export default function NostrExplainerScreen({navigation}: TNostrExplainerPageProps) {
-	const { t } = useTranslation([NS.common])
-	const { highlight } = useThemeContext()
-	const handlePress = async () => {
-		await store.set(STORE_KEYS.nostrexplainer, '1')
-		navigation.navigate('Address book')
-	}
-	return (
-		<View style={[styles.container, { backgroundColor: hi[highlight] }]}>
-			<Logo size={120} style={styles.logo} />
-			<Txt txt={t('contactsNostr')} styles={[styles.header]} />
-			<Txt txt={t('nostrExplainer')} styles={[styles.p]} />
-			<View style={styles.btnWrap}>
-				<Button
-					filled
-					txt={t('continue')}
-					onPress={() => void handlePress()}
-				/>
-			</View>
-		</View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		alignItems: 'center',
-		padding: 20
-	},
-	logo: {
-		marginTop: 100,
-		marginBottom: 20
-	},
-	header: {
-		color: mainColors.WHITE,
-		fontWeight: '500',
-		fontSize: 32,
-		marginBottom: 20
-	},
-	p: {
-		color: mainColors.WHITE,
-		fontWeight: '500',
-		fontSize: 20,
-		textAlign: 'center'
-	},
-	btnWrap: {
-		position: 'absolute',
-		right: 20,
-		bottom: isIOS ? 40 : 20,
-		left: 20,
-	}
-})
\ No newline at end of file
diff --git a/src/screens/NostrOnboarding.tsx b/src/screens/NostrOnboarding.tsx
new file mode 100644
index 00000000..cc8d9dc3
--- /dev/null
+++ b/src/screens/NostrOnboarding.tsx
@@ -0,0 +1,42 @@
+import type { TNostrOnboardingPageProps } from '@src/model/nav'
+import { STORE_KEYS } from '@src/storage/store/consts'
+import { store } from '@store'
+import { H_Colors } from '@styles/colors'
+import { useTranslation } from 'react-i18next'
+import { Image, StyleSheet } from 'react-native'
+import Onboarding from 'react-native-onboarding-swiper'
+
+export default function NostrOnboardingScreen({navigation}: TNostrOnboardingPageProps) {
+	const { t } = useTranslation()
+	return (
+		<Onboarding
+			showSkip={false}
+			onDone={() => {
+				void store.set(STORE_KEYS.nostrexplainer, '1')
+				navigation.navigate('Address book')
+			}}
+			pages={[
+				{
+					backgroundColor: H_Colors.Nostr,
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+					image: <Image style={styles.nostrImg} source={require('@assets/nostr.png')} />,
+					title: t('contactsNostr'),
+					subtitle: t('nostrExplainer'),
+				},
+			]}
+			transitionAnimationDuration={250}
+			titleStyles={styles.title}
+			subTitleStyles={styles.subTitle}
+		/>
+	)
+}
+
+const styles = StyleSheet.create({
+	title: { fontSize: 28 },
+	subTitle: { fontSize: 18 },
+	nostrImg: {
+		width: 400,
+		height: 180,
+		resizeMode: 'contain'
+	}
+})
\ No newline at end of file