adapt nostr onboarding screen

src/components/Logo.tsx

@@ -19,4 +19,9 @@ const styles = StyleSheet.create({
 	img: {
 		resizeMode: 'contain',
 	},
+	Img: {
+		width: 200,
+		height: 200,
+		resizeMode: 'contain'
+	},
 })

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' ||

src/components/nav/Navigator.tsx

@@ -6,15 +6,14 @@ 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'
 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}

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 |

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'
+	}
+})