Feature: onboarding carousel (#1103)

* onboarding carousel * debug * working * locale * es * snapsgots * onboarding updates * locales * import wallet * more ui * onboarding background * create wallet * android tweaks * navbar * navigation * add additional steps to e2e * flag * stack * snapshots
MetaMask · Sep 27, 2019 · 8a6f48f · 8a6f48f
1 parent 57f6afe
commit 8a6f48f
Show file tree

Hide file tree

Showing 28 changed files with 859 additions and 241 deletions.
diff --git a/app/components/Nav/App/__snapshots__/index.test.js.snap b/app/components/Nav/App/__snapshots__/index.test.js.snap
@@ -239,6 +239,7 @@ exports[`App should render correctly 1`] = `
           },
           "LockScreen": null,
           "Login": null,
+          "OnboardingCarousel": null,
           "OnboardingRootNav": Object {
             "childRouters": Object {
               "Onboarding": Object {
@@ -411,6 +412,11 @@ exports[`App should render correctly 1`] = `
             "params": undefined,
             "routeName": "Login",
           },
+          Object {
+            "key": "OnboardingCarousel",
+            "params": undefined,
+            "routeName": "OnboardingCarousel",
+          },
           Object {
             "key": "LockScreen",
             "params": undefined,
@@ -659,6 +665,7 @@ exports[`App should render correctly 1`] = `
             },
             "LockScreen": null,
             "Login": null,
+            "OnboardingCarousel": null,
             "OnboardingRootNav": Object {
               "childRouters": Object {
                 "Onboarding": Object {
@@ -831,6 +838,11 @@ exports[`App should render correctly 1`] = `
               "params": undefined,
               "routeName": "Login",
             },
+            Object {
+              "key": "OnboardingCarousel",
+              "params": undefined,
+              "routeName": "OnboardingCarousel",
+            },
             Object {
               "key": "LockScreen",
               "params": undefined,

diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js
@@ -7,6 +7,7 @@ import {
 import Login from '../../Views/Login';
 import QRScanner from '../../Views/QRScanner';
 import Onboarding from '../../Views/Onboarding';
+import OnboardingCarousel from '../../Views/OnboardingCarousel';
 import CreateWallet from '../../Views/CreateWallet';
 import ImportWallet from '../../Views/ImportWallet';
 import ImportFromSeed from '../../Views/ImportFromSeed';
@@ -127,6 +128,7 @@ const App = createSwitchNavigator(
 		HomeNav,
 		OnboardingRootNav,
 		Login,
+		OnboardingCarousel,
 		LockScreen
 	},
 	{

diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
@@ -52,9 +52,6 @@ const styles = StyleSheet.create({
 		height: 40,
 		marginRight: 10
 	},
-	metamaskNameWrapper: {
-		marginLeft: Platform.OS === 'android' ? 20 : 0
-	},
 	closeIcon: {
 		paddingLeft: Platform.OS === 'android' ? 22 : 18,
 		color: colors.blue
@@ -126,6 +123,13 @@ const styles = StyleSheet.create({
 		marginRight: 3,
 		width: 24,
 		height: 24
+	},
+	metamaskNameTransparentWrapper: {
+		alignItems: 'center',
+		flex: 1
+	},
+	metamaskNameWrapper: {
+		marginLeft: Platform.OS === 'android' ? 20 : 0
 	}
 });
 
@@ -396,6 +400,42 @@ export function getOnboardingNavbarOptions() {
 	};
 }
 
+/**
+ * Function that returns a transparent navigation options for our onboarding screens.
+ *
+ * @returns {Object} - Corresponding navbar options containing headerTitle
+ */
+export function getTransparentOnboardingNavbarOptions() {
+	return {
+		headerTransparent: true,
+		headerTitle: (
+			<View style={styles.metamaskNameTransparentWrapper}>
+				<Image source={metamask_name} style={styles.metamaskName} resizeMethod={'auto'} />
+			</View>
+		),
+		headerLeft: <View />,
+		headerRight: <View />
+	};
+}
+
+/**
+ * Function that returns a transparent navigation options for our onboarding screens.
+ *
+ * @returns {Object} - Corresponding navbar options containing headerTitle and a back button
+ */
+export function getTransparentBackOnboardingNavbarOptions() {
+	return {
+		headerTransparent: true,
+		headerTitle: (
+			<View style={styles.metamaskNameTransparentWrapper}>
+				<Image source={metamask_name} style={styles.metamaskName} resizeMethod={'auto'} />
+			</View>
+		),
+		headerBackTitle: strings('navigation.back'),
+		headerRight: <View />
+	};
+}
+
 /**
  * Function that returns the navigation options
  * for our metric opt-in screen

diff --git a/app/components/UI/OnboardingScreenWithBg/index.js b/app/components/UI/OnboardingScreenWithBg/index.js
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
 		left: 0,
 		right: 0,
 		position: 'absolute',
-		paddingTop: DeviceSize.isIphoneX() ? 70 : 30,
+		paddingTop: DeviceSize.isIphoneX() ? 90 : 50,
 		borderTopWidth: 0,
 		borderColor: colors.white,
 		backgroundColor: colors.white,
@@ -27,7 +27,10 @@ const styles = StyleSheet.create({
 
 const images = {
 	a: require('../../../images/welcome-bg1.jpg'),
-	b: require('../../../images/welcome-bg2.jpg')
+	b: require('../../../images/welcome-bg2.jpg'),
+	c: require('../../../images/welcome-bg3.jpg'),
+	d: require('../../../images/welcome-bg4.jpg'),
+	carousel: null
 };
 
 const OnboardingScreenWithBg = props => (

diff --git a/app/components/Views/CreateWallet/index.js b/app/components/Views/CreateWallet/index.js
@@ -12,7 +12,7 @@ import {
 	BackHandler
 } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
-import { colors, fontStyles } from '../../../styles/common';
+import { colors, fontStyles, baseStyles } from '../../../styles/common';
 import AnimatedFox from 'react-native-animated-fox';
 import { strings } from '../../../../locales/i18n';
 import Engine from '../../../core/Engine';
@@ -22,21 +22,18 @@ import { setLockTime } from '../../../actions/settings';
 import { connect } from 'react-redux';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { NavigationActions, withNavigationFocus } from 'react-navigation';
+import OnboardingScreenWithBg from '../../UI/OnboardingScreenWithBg';
 
 const styles = StyleSheet.create({
-	flex: {
-		flex: 1
+	scroll: {
+		flexGrow: 1
 	},
 	wrapper: {
-		paddingTop: 10,
 		paddingHorizontal: 40,
 		paddingBottom: 30,
+		alignItems: 'center',
 		flex: 1
 	},
-	content: {
-		flex: 1,
-		alignItems: 'center'
-	},
 	title: {
 		fontSize: 22,
 		marginTop: 30,
@@ -55,15 +52,15 @@ const styles = StyleSheet.create({
 		...fontStyles.normal
 	},
 	foxWrapper: {
-		width: 100,
+		width: Platform.OS === 'ios' ? 90 : 80,
+		height: Platform.OS === 'ios' ? 90 : 80,
 		marginTop: 30,
-		marginBottom: 30,
-		height: 100
+		marginBottom: 30
 	},
 	image: {
 		alignSelf: 'center',
-		width: 100,
-		height: 100
+		width: 80,
+		height: 80
 	}
 });
 
@@ -73,15 +70,7 @@ const styles = StyleSheet.create({
  */
 class CreateWallet extends PureComponent {
 	static navigationOptions = () => ({
-		headerStyle: {
-			shadowColor: 'transparent',
-			elevation: 0,
-			backgroundColor: 'white',
-			borderBottomWidth: 0
-		},
-		headerLeft: null,
-		headerRight: null,
-		headerTitle: null
+		header: null
 	});
 
 	static propTypes = {
@@ -161,26 +150,31 @@ class CreateWallet extends PureComponent {
 
 	render() {
 		return (
-			<ScrollView style={styles.flex} contentContainerStyle={styles.flex} testID={'create-wallet-screen'}>
-				<View style={styles.wrapper}>
-					<View style={styles.content}>
-						<View style={styles.foxWrapper}>
-							{Platform.OS === 'android' ? (
-								<Image
-									source={require('../../../images/fox.png')}
-									style={styles.image}
-									resizeMethod={'auto'}
-								/>
-							) : (
-								<AnimatedFox />
-							)}
+			<View style={baseStyles.flexGrow} testID={'create-wallet-screen'}>
+				<OnboardingScreenWithBg screen={'d'}>
+					<ScrollView style={baseStyles.flexGrow} contentContainerStyle={styles.scroll}>
+						<View style={styles.wrapper}>
+							<View style={styles.foxWrapper}>
+								{Platform.OS === 'android' ? (
+									<Image
+										source={require('../../../images/fox.png')}
+										style={styles.image}
+										resizeMethod={'auto'}
+									/>
+								) : (
+									<AnimatedFox />
+								)}
+							</View>
+							<ActivityIndicator
+								size="large"
+								color={Platform.OS === 'android' ? colors.blue : colors.grey}
+							/>
+							<Text style={styles.title}>{strings('create_wallet.title')}</Text>
+							<Text style={styles.subtitle}>{strings('create_wallet.subtitle')}</Text>
 						</View>
-						<ActivityIndicator size="large" color={Platform.OS === 'android' ? colors.blue : colors.grey} />
-						<Text style={styles.title}>{strings('create_wallet.title')}</Text>
-						<Text style={styles.subtitle}>{strings('create_wallet.subtitle')}</Text>
-					</View>
-				</View>
-			</ScrollView>
+					</ScrollView>
+				</OnboardingScreenWithBg>
+			</View>
 		);
 	}
 }

diff --git a/app/components/Views/Entry/index.js b/app/components/Views/Entry/index.js
@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import { colors } from '../../../styles/common';
 import DeeplinkManager from '../../../core/DeeplinkManager';
 import Logger from '../../../util/Logger';
+
 /**
  * Entry Screen that decides which screen to show
  * depending on the state of the user
@@ -93,7 +94,7 @@ class Entry extends PureComponent {
 			if (existingUser !== null) {
 				await this.unlockKeychain();
 			} else {
-				this.animateAndGoTo('OnboardingRootNav');
+				this.animateAndGoTo('OnboardingCarousel');
 			}
 		}, 100);
 	}
@@ -132,15 +133,16 @@ class Entry extends PureComponent {
 	}
 
 	onAnimationFinished = () => {
+		const { viewToGo } = this.state;
 		setTimeout(() => {
 			Animated.timing(this.opacity, {
 				toValue: 0,
 				duration: 300,
 				useNativeDriver: true,
 				isInteraction: false
 			}).start(() => {
-				if (this.state.viewToGo !== 'WalletView') {
-					this.props.navigation.navigate(this.state.viewToGo);
+				if (viewToGo !== 'WalletView') {
+					this.props.navigation.navigate(viewToGo);
 				} else {
 					this.props.navigation.navigate(
 						'HomeNav',
@@ -175,7 +177,7 @@ class Entry extends PureComponent {
 			} else if (this.props.passwordSet) {
 				this.animateAndGoTo('Login');
 			} else {
-				this.animateAndGoTo('OnboardingRootNav');
+				this.animateAndGoTo('Onboarding');
 			}
 		} catch (error) {
 			console.log(`Keychain couldn't be accessed`, error); // eslint-disable-line