Merge pull request #576 from cocrafts/ltminhthu/get-code-guide

[MS-299] [wallet] get code guide popup

apps/wallet/src/screens/Authentication/Invitation/GetCodeStepCard.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { InvitationCodeStepBackground } from '@walless/icons';
+
+interface GetCodeStepCardProps {
+	text: string;
+}
+
+const GetCodeStepCard: FC<GetCodeStepCardProps> = ({ text }) => {
+	return (
+		<View style={styles.container}>
+			<View style={styles.background}>
+				<InvitationCodeStepBackground />
+			</View>
+
+			<Text style={styles.text} numberOfLines={2}>
+				{text}
+			</Text>
+		</View>
+	);
+};
+
+export default GetCodeStepCard;
+
+const styles = StyleSheet.create({
+	container: {
+		width: 254,
+		height: 72,
+		paddingHorizontal: 16,
+		alignItems: 'flex-end',
+		justifyContent: 'center',
+	},
+	background: {
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		zIndex: -1,
+	},
+	text: {
+		color: '#ffffff',
+	},
+});

apps/wallet/src/screens/Authentication/Invitation/GetCodeStepNumber.tsx

@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+interface GetCodeStepNumberProps {
+	number: number;
+}
+
+const GetCodeStepNumber: FC<GetCodeStepNumberProps> = ({ number }) => {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>{number}</Text>
+		</View>
+	);
+};
+
+export default GetCodeStepNumber;
+
+const styles = StyleSheet.create({
+	container: {
+		width: 28,
+		height: 28,
+		borderRadius: 14,
+		borderColor: '#ffffff',
+		borderWidth: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	text: {
+		color: '#ffffff',
+		fontSize: 12,
+		fontWeight: '500',
+	},
+});

apps/wallet/src/screens/Authentication/Invitation/InvitationGuide.tsx

@@ -0,0 +1,96 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { Anchor } from '@walless/gui';
+
+import GetCodeStepCard from './GetCodeStepCard';
+import GetCodeStepNumber from './GetCodeStepNumber';
+
+const InvitationGuide = () => {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Get invitation code</Text>
+
+			<Text style={styles.subtitle}>
+				Walless is in phase 2. To get access code:
+			</Text>
+
+			<View style={styles.contentContainer}>
+				<View style={styles.stepCardContainer}>
+					<GetCodeStepCard text="Go to Walless Discord" />
+					<GetCodeStepCard text="Go to channel “referral-codes”" />
+					<GetCodeStepCard text="Use code from other users or ping admin for access code" />
+				</View>
+
+				<View style={styles.stepNumberContainer}>
+					<GetCodeStepNumber number={1} />
+					<View style={styles.connectedLine} />
+					<GetCodeStepNumber number={2} />
+					<View style={styles.connectedLine} />
+					<GetCodeStepNumber number={3} />
+				</View>
+			</View>
+
+			<Anchor style={styles.anchor} href="https://discord.gg/kCBUHFZVVY">
+				<Text style={styles.anchorText}>Go to Discord</Text>
+			</Anchor>
+		</View>
+	);
+};
+
+export default InvitationGuide;
+
+const styles = StyleSheet.create({
+	container: {
+		justifyContent: 'center',
+		alignItems: 'center',
+		paddingVertical: 28,
+		paddingHorizontal: 28,
+		gap: 20,
+		backgroundColor: '#232F37',
+		borderRadius: 16,
+		alignSelf: 'center',
+	},
+	title: {
+		color: '#ffffff',
+		fontSize: 24,
+		fontWeight: '500',
+	},
+	subtitle: {
+		color: '#ffffff',
+	},
+	contentContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	stepCardContainer: {
+		gap: 16,
+	},
+	stepNumberContainer: {
+		alignItems: 'center',
+	},
+	connectedLine: {
+		width: 2,
+		height: 58,
+		backgroundColor: '#ffffff66',
+	},
+	anchor: {
+		backgroundColor: '#198CCA',
+		borderColor: '#19A3E1',
+		shadowColor: '#16B7FF',
+		shadowOffset: {
+			width: 0,
+			height: 4,
+		},
+		shadowOpacity: 0.58,
+		shadowRadius: 16.0,
+		elevation: 24,
+		borderRadius: 10,
+		borderWidth: 1,
+		paddingHorizontal: 16,
+		paddingVertical: 8,
+	},
+	anchorText: {
+		color: '#ffffff',
+		fontWeight: '500',
+	},
+});

apps/wallet/src/screens/Authentication/Invitation/index.tsx

@@ -4,14 +4,15 @@ import type {
 	NativeSyntheticEvent,
 	TextInputKeyPressEventData,
 } from 'react-native';
+import type { ViewStyle } from 'react-native';
 import {
 	KeyboardAvoidingView,
 	Platform,
 	StyleSheet,
+	TouchableOpacity,
 	TouchableWithoutFeedback,
-	type ViewStyle,
 } from 'react-native';
-import { Anchor, Button, Input, Text, View } from '@walless/gui';
+import { Button, Input, modalActions, Text, View } from '@walless/gui';
 import { showError } from 'modals/Error';
 import { appState } from 'state/app';
 import { validateInvitationCode } from 'utils/auth';
@@ -20,6 +21,7 @@ import { navigate } from 'utils/navigation';
 import { hideNativeKeyboard } from 'utils/system';
 
 import HadWalletAccount from './GetCode';
+import InvitationGuide from './InvitationGuide';
 import InvitationHeader from './InvitationHeader';
 
 export const InvitationScreen: FC = () => {
@@ -68,6 +70,13 @@ export const InvitationScreen: FC = () => {
 		}
 	};
 
+	const handleShowGuideModal = () => {
+		modalActions.show({
+			id: 'invitationGuide',
+			component: InvitationGuide,
+		});
+	};
+
 	const handleLoginPress = () => {
 		setError(undefined);
 		navigate('Authentication', { screen: 'Login' });
@@ -111,11 +120,9 @@ export const InvitationScreen: FC = () => {
 				</KeyboardAvoidingView>
 
 				<View>
-					<Anchor
-						titleStyle={styles.getInvitationText}
-						title="Get invitation code"
-						href="https://twitter.com/walless_wallet/status/1694255782651658737"
-					/>
+					<TouchableOpacity onPress={handleShowGuideModal}>
+						<Text style={styles.getInvitationText}>Get invitation code</Text>
+					</TouchableOpacity>
 					<Text style={styles.poweredText}>
 						Powered by walless.io, version@{config.version}
 					</Text>