Merge pull request #594 from cocrafts/ltminhthu/first-time-popup

[wallet][MS-245] first time user popup for adding pixeverse

apps/wallet/src/modals/FirstTimePopup/BlueCircleBackground.tsx

@@ -0,0 +1,36 @@
+import { Defs, G, Svg } from 'react-native-svg';
+
+export const BlueCircleBackground = () => {
+	return (
+		<Svg width="308" height="174" viewBox="0 0 308 174" fill="none">
+			<G opacity="0.8" filter="url(#filter0_f_14670_15152)">
+				<circle cx="154" cy="87" r="120" fill="#17A3E1" />
+			</G>
+			<Defs>
+				<filter
+					id="filter0_f_14670_15152"
+					x="0"
+					y="-67"
+					width="308"
+					height="308"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="BackgroundImageFix"
+						result="shape"
+					/>
+					<feGaussianBlur
+						stdDeviation="17"
+						result="effect1_foregroundBlur_14670_15152"
+					/>
+				</filter>
+			</Defs>
+		</Svg>
+	);
+};
+
+export default BlueCircleBackground;

apps/wallet/src/modals/FirstTimePopup/PixeverseCard.tsx

@@ -0,0 +1,92 @@
+import type { FC } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { Text } from '@walless/gui';
+import type { WidgetDocument } from '@walless/store';
+
+interface Props {
+	widget: WidgetDocument;
+}
+
+const PixeverseCard: FC<Props> = ({ widget }) => {
+	return (
+		<View style={styles.container}>
+			<View>
+				<Image
+					style={styles.coverImage}
+					source={{ uri: widget.storeMeta.coverUri }}
+				/>
+				<Image
+					style={styles.iconImage}
+					source={{ uri: widget.storeMeta.iconUri }}
+				/>
+			</View>
+
+			<View style={styles.infoContainer}>
+				<Text style={styles.title}>Pixeverse</Text>
+
+				<Text
+					style={[styles.description]}
+					numberOfLines={2}
+					ellipsizeMode="tail"
+				>
+					{widget.storeMeta.description}
+				</Text>
+
+				<View style={styles.addButton}>
+					<Text style={styles.buttonText}>Add</Text>
+				</View>
+			</View>
+		</View>
+	);
+};
+
+export default PixeverseCard;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		backgroundColor: '#182027',
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		borderRadius: 12,
+		gap: 12,
+	},
+	coverImage: {
+		width: 112,
+		height: 80,
+		borderRadius: 8,
+	},
+	iconImage: {
+		position: 'absolute',
+		bottom: 4,
+		right: 4,
+		width: 28,
+		height: 28,
+		borderRadius: 4,
+	},
+	infoContainer: {
+		flex: 1,
+		justifyContent: 'space-between',
+	},
+	title: {
+		color: '#ffffff',
+		fontWeight: '500',
+	},
+	description: {
+		fontSize: 10,
+		color: '#566674',
+	},
+	addButton: {
+		backgroundColor: '#198CCA',
+		paddingHorizontal: 16,
+		paddingVertical: 4,
+		borderColor: '#17A3E1',
+		borderWidth: 1,
+		borderRadius: 8,
+		width: 'fit-content',
+	},
+	buttonText: {
+		color: '#ffffff',
+		fontWeight: '500',
+	},
+});

apps/wallet/src/modals/FirstTimePopup/index.tsx

@@ -0,0 +1,120 @@
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { modalActions, Text } from '@walless/gui';
+import { ModalId } from 'modals/types';
+import { mockWidgets } from 'state/widget';
+import { navigate } from 'utils/navigation';
+import { addWidgetToStorage } from 'utils/storage';
+
+import BlueCircleBackground from './BlueCircleBackground';
+import PixeverseCard from './PixeverseCard';
+
+const FirstTimePopup = () => {
+	const pixeverseWidget = mockWidgets.find((item) => item._id === 'pixeverse');
+
+	const handleAddPixeverse = () => {
+		if (!pixeverseWidget) return;
+
+		addWidgetToStorage('pixeverse', pixeverseWidget);
+		navigate('Dashboard', {
+			screen: 'Explore',
+			params: {
+				screen: 'Widget',
+				params: {
+					id: 'pixeverse',
+				},
+			},
+		});
+		modalActions.destroy(ModalId.FirstTimePopup);
+	};
+
+	return (
+		<View style={styles.container}>
+			<View style={styles.upperPart}>
+				<View style={styles.backgroundImage}>
+					<BlueCircleBackground />
+				</View>
+
+				{pixeverseWidget && <PixeverseCard widget={pixeverseWidget} />}
+			</View>
+
+			<View style={styles.lowerPart}>
+				<Text style={styles.title}>Welcome to Walless</Text>
+
+				<View style={styles.textContainer}>
+					<Text style={styles.text}>
+						Lets get you set up with a brand new way of Web3 wallet. From the
+						Explorer tab, you can find the best of web3: gaming, multi-chain
+						wallets, trading tools,…
+					</Text>
+					<Text style={styles.text}>
+						To start earning daily tokens, add the in-wallet game PIXEVERSE and
+						the wallet widget.
+					</Text>
+				</View>
+
+				<TouchableOpacity onPress={handleAddPixeverse} style={styles.addButton}>
+					<Text style={styles.buttonText}>Add Pixeverse</Text>
+				</TouchableOpacity>
+			</View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		maxWidth: 374,
+		borderRadius: 16,
+		overflow: 'hidden',
+	},
+	upperPart: {
+		backgroundColor: '#031821',
+		paddingHorizontal: 52,
+		paddingVertical: 36,
+		alignItems: 'center',
+	},
+	backgroundImage: {
+		position: 'absolute',
+		top: 0,
+	},
+	addButton: {
+		backgroundColor: '#198CCA',
+		paddingHorizontal: 16,
+		paddingVertical: 4,
+		borderColor: '#17A3E1',
+		borderWidth: 1,
+		borderRadius: 8,
+		width: 'fit-content',
+	},
+	buttonText: {
+		color: '#ffffff',
+		fontWeight: '500',
+	},
+	lowerPart: {
+		gap: 20,
+		backgroundColor: '#222F37',
+		paddingHorizontal: 24,
+		paddingVertical: 24,
+		alignItems: 'center',
+	},
+	title: {
+		color: '#ffffff',
+		fontSize: 24,
+		fontWeight: '500',
+	},
+	textContainer: {
+		gap: 12,
+	},
+	text: {
+		color: '#ffffff',
+	},
+});
+
+export default FirstTimePopup;
+
+export const showFirstTimePopup = () => {
+	modalActions.show({
+		id: ModalId.FirstTimePopup,
+		component: FirstTimePopup,
+		fullWidth: false,
+	});
+};

apps/wallet/src/modals/types.ts

@@ -12,4 +12,5 @@ export enum ModalId {
 	ReferralLeaderBoard = 'ReferralLeaderBoard',
 	LoyaltyPartnerQuest = 'LoyaltyPartnerQuest',
 	LoyaltyHistory = 'LoyaltyHistory',
+	FirstTimePopup = 'FirstTimePopup',
 }

apps/wallet/src/stacks/Dashboard/index.tsx

@@ -1,11 +1,21 @@
+import { useEffect } from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { runtime } from '@walless/core';
+import type { ShowFirstTimeUserPopupDocument } from '@walless/store';
+import { showFirstTimePopup } from 'modals/FirstTimePopup';
 import BrowserScreen from 'screens/Dashboard/Browser';
 import HomeStack from 'stacks/Home';
 import SettingStack from 'stacks/Setting';
+import { appState } from 'state/app';
+import { mockWidgets } from 'state/widget';
 import { noHeaderNavigation } from 'utils/constants';
-import { useNotificationPermissionRequest } from 'utils/hooks';
+import {
+	useNotificationPermissionRequest,
+	useSnapshot,
+	useWidgets,
+} from 'utils/hooks';
 import type { DashboardParamList } from 'utils/navigation';
+import { storage } from 'utils/storage';
 
 import ExplorerStack from '../Explorer';
 
@@ -15,6 +25,24 @@ const Tab = createBottomTabNavigator<DashboardParamList>();
 
 export const DashboardStack = () => {
 	useNotificationPermissionRequest();
+	const { showFirstTimePopup: showPopup } = useSnapshot(appState);
+	const widgets = useWidgets();
+
+	useEffect(() => {
+		const alreadyHavePixeverse = widgets.some(
+			(widget) => widget._id === mockWidgets[0]._id,
+		);
+
+		if (showPopup && !alreadyHavePixeverse) {
+			showFirstTimePopup();
+			storage.put<ShowFirstTimeUserPopupDocument>({
+				_id: 'showFirstTimeUserPopup',
+				type: 'ShowFirstTimeUserPopup',
+				value: false,
+			});
+			appState.showFirstTimePopup = false;
+		}
+	}, []);
 
 	return (
 		<Tab.Navigator

apps/wallet/src/state/app.ts

@@ -27,6 +27,7 @@ export interface AppState {
 		isBottomTabActive: boolean;
 		isSidebarAvatarActive: boolean;
 	};
+	showFirstTimePopup: boolean;
 	isMobileDisplay: boolean;
 	initialLinkingURL?: string;
 }
@@ -42,6 +43,7 @@ export const appState = proxy<AppState>({
 		isBottomTabActive: false,
 		isSidebarAvatarActive: false,
 	},
+	showFirstTimePopup: true,
 	isMobileDisplay: false,
 });
 

apps/wallet/src/state/bootstrap.ts

@@ -8,6 +8,7 @@ import type {
 	PouchDocument,
 	PublicKeyDocument,
 	SettingDocument,
+	ShowFirstTimeUserPopupDocument,
 	TokenDocument,
 	WidgetDocument,
 } from '@walless/store';
@@ -71,6 +72,11 @@ export const bootstrap = async (): Promise<void> => {
 
 export const launchApp = async (): Promise<void> => {
 	const settings = await storage.safeGet<SettingDocument>('settings');
+	const showFirstTimeUserPopup =
+		await storage.safeGet<ShowFirstTimeUserPopupDocument>(
+			'showFirstTimeUserPopup',
+		);
+	appState.showFirstTimePopup = showFirstTimeUserPopup?.value ?? true;
 
 	const isSignedIn = settings?.profile?.id;
 	if (isSignedIn) {

apps/wallet/src/utils/auth/logout.web.ts

@@ -5,9 +5,11 @@ import { appActions } from 'state/app';
 import { auth } from '../firebase/index.web';
 import { storage } from '../storage';
 
+export const whitelist = ['showFirstTimeUserPopup'];
+
 export const logout = async () => {
 	await signOut(auth());
 	await engine.clear();
-	await storage.clearAllDocs();
+	await storage.clearAllDocs(whitelist);
 	appActions.cleanupAfterLogOut();
 };

packages/core/utils/extension.ts

@@ -27,3 +27,7 @@ export interface ExtensionConfig {
 	storeMeta: ExtensionStoreMetadata;
 	networkMeta: ExtensionNetworkMetadata;
 }
+
+export interface ShowFirstTimeUserPopup {
+	value: boolean;
+}

packages/store/plugins/clear.ts

@@ -1,8 +1,13 @@
 const persistedIds = ['system'];
 
-export async function clearAllDocs(this: PouchDB.Database) {
+export async function clearAllDocs(
+	this: PouchDB.Database,
+	whitelist: string[] = [],
+) {
 	const { rows } = await this.allDocs();
 	rows.map(async (row) => {
+		if (whitelist.includes(row.id)) return;
+
 		if (persistedIds.indexOf(row.id) === -1) {
 			const doc: { _deleted: boolean } = await this.get(row.id);
 			doc._deleted = true;