Feature: terms and conditions

app/components/Nav/App/__snapshots__/index.test.js.snap

@@ -213,6 +213,18 @@ exports[`App should render correctly 1`] = `
               },
               "QRScanner": null,
               "SyncWithExtensionSuccess": null,
+              "Webview": Object {
+                "childRouters": Object {
+                  "SimpleWebview": null,
+                },
+                "getActionCreators": [Function],
+                "getActionForPathAndParams": [Function],
+                "getComponentForRouteName": [Function],
+                "getComponentForState": [Function],
+                "getPathAndParamsForState": [Function],
+                "getScreenOptions": [Function],
+                "getStateForAction": [Function],
+              },
             },
             "getActionCreators": [Function],
             "getActionForPathAndParams": [Function],
@@ -561,6 +573,18 @@ exports[`App should render correctly 1`] = `
                 },
                 "QRScanner": null,
                 "SyncWithExtensionSuccess": null,
+                "Webview": Object {
+                  "childRouters": Object {
+                    "SimpleWebview": null,
+                  },
+                  "getActionCreators": [Function],
+                  "getActionForPathAndParams": [Function],
+                  "getComponentForRouteName": [Function],
+                  "getComponentForState": [Function],
+                  "getPathAndParamsForState": [Function],
+                  "getScreenOptions": [Function],
+                  "getStateForAction": [Function],
+                },
               },
               "getActionCreators": [Function],
               "getActionForPathAndParams": [Function],

app/components/Nav/App/index.js

@@ -16,6 +16,7 @@ import Entry from '../../Views/Entry';
 import LockScreen from '../../Views/LockScreen';
 import Main from '../Main';
 import DrawerView from '../../UI/DrawerView';
+import SimpleWebview from '../../Views/SimpleWebview';
 
 /**
  * Stack navigator responsible for the onboarding process
@@ -58,6 +59,18 @@ const OnboardingRootNav = createStackNavigator(
 		},
 		QRScanner: {
 			screen: QRScanner
+		},
+		Webview: {
+			screen: createStackNavigator(
+				{
+					SimpleWebview: {
+						screen: SimpleWebview
+					}
+				},
+				{
+					mode: 'modal'
+				}
+			)
 		}
 	},
 	{

app/components/Views/ImportFromSeed/__snapshots__/index.test.js.snap

@@ -236,6 +236,24 @@ exports[`ImportFromSeed should render correctly 1`] = `
           IMPORT
         </StyledButton>
       </View>
+      <View
+        style={
+          Object {
+            "paddingTop": 30,
+          }
+        }
+      >
+        <TermsAndConditions
+          action="IMPORT"
+          navigation={
+            Object {
+              "state": Object {
+                "params": Object {},
+              },
+            }
+          }
+        />
+      </View>
     </View>
   </KeyboardAwareScrollViewMock>
 </SafeAreaView>

app/components/Views/ImportFromSeed/index.js

@@ -25,6 +25,7 @@ import SecureKeychain from '../../../core/SecureKeychain';
 import AppConstants from '../../../core/AppConstants';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { NavigationActions } from 'react-navigation';
+import TermsAndConditions from '../TermsAndConditions';
 
 const styles = StyleSheet.create({
 	mainWrapper: {
@@ -97,6 +98,9 @@ const styles = StyleSheet.create({
 	},
 	biometrySwitch: {
 		flex: 0
+	},
+	termsAndConditions: {
+		paddingTop: 30
 	}
 });
 
@@ -383,6 +387,12 @@ class ImportFromSeed extends Component {
 							)}
 						</StyledButton>
 					</View>
+					<View style={styles.termsAndConditions}>
+						<TermsAndConditions
+							navigation={this.props.navigation}
+							action={strings('import_from_seed.import_button')}
+						/>
+					</View>
 				</View>
 			</KeyboardAwareScrollView>
 		</SafeAreaView>

app/components/Views/Onboarding/index.js

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import SecureKeychain from '../../../core/SecureKeychain';
 import Engine from '../../../core/Engine';
 import FadeOutOverlay from '../../UI/FadeOutOverlay';
+import TermsAndConditions from '../TermsAndConditions';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -29,9 +30,12 @@ const styles = StyleSheet.create({
 	},
 	ctas: {
 		justifyContent: 'flex-end',
-		height: 190,
+		height: 250,
 		paddingBottom: 40
 	},
+	termsAndConditions: {
+		paddingTop: 30
+	},
 	foxWrapper: {
 		width: Platform.OS === 'ios' ? 100 : 66,
 		height: Platform.OS === 'ios' ? 100 : 66,
@@ -195,6 +199,12 @@ class Onboarding extends Component {
 										{strings('onboarding.import_wallet_button')}
 									</StyledButton>
 								</View>
+								<View style={[styles.ctaWrapper, styles.termsAndConditions]}>
+									<TermsAndConditions
+										navigation={this.props.navigation}
+										action={strings('onboarding.start_exploring_now')}
+									/>
+								</View>
 							</View>
 							{this.state.existingUser && (
 								<View style={styles.footer}>

app/components/Views/SyncWithExtensionSuccess/index.js

@@ -10,6 +10,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { NavigationActions } from 'react-navigation';
 import { connect } from 'react-redux';
+import TermsAndConditions from '../TermsAndConditions';
 
 const styles = StyleSheet.create({
 	mainWrapper: {
@@ -43,6 +44,9 @@ const styles = StyleSheet.create({
 	icon: {
 		color: colors.green500,
 		marginBottom: 30
+	},
+	termsAndConditions: {
+		padding: 30
 	}
 });
 
@@ -113,6 +117,12 @@ class SyncWithExtensionSuccess extends Component {
 						{strings('sync_with_extension_success.button_continue')}
 					</StyledButton>
 				</View>
+				<View style={styles.termsAndConditions}>
+					<TermsAndConditions
+						navigation={this.props.navigation}
+						action={strings('sync_with_extension_success.button_continue')}
+					/>
+				</View>
 			</View>
 		</SafeAreaView>
 	);

app/components/Views/TermsAndConditions/__snapshots__/index.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TermsAndConditions should render correctly 1`] = `
+<TermsAndConditions
+  action="import"
+/>
+`;

app/components/Views/TermsAndConditions/index.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { colors, fontStyles } from '../../../styles/common';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { strings } from '../../../../locales/i18n';
+
+const TERMS_AND_CONDITIONS = 'https://metamask.io/terms.html';
+
+const styles = StyleSheet.create({
+	mainWrapper: {
+		backgroundColor: colors.transparent,
+		flex: 1,
+		width: '80%',
+		alignSelf: 'center'
+	},
+	text: {
+		...fontStyles.normal,
+		color: colors.grey500,
+		textAlign: 'center'
+	},
+	link: {
+		textDecorationLine: 'underline'
+	}
+});
+
+/**
+ * View that is displayed in the flow to agree terms and conditions
+ */
+export default class TermsAndConditions extends Component {
+	static propTypes = {
+		/**
+		/* navigation object required to push and pop other views
+		*/
+		navigation: PropTypes.object,
+		/**
+		 * Action string to be clicked to agree terms and conditions
+		 */
+		action: PropTypes.string
+	};
+
+	press = () => {
+		const { navigation } = this.props;
+		navigation.navigate('Webview', {
+			url: TERMS_AND_CONDITIONS,
+			title: strings('terms_and_conditions.title')
+		});
+	};
+
+	render() {
+		const { action } = this.props;
+		return (
+			<View style={styles.mainWrapper}>
+				<TouchableOpacity onPress={this.press}>
+					<Text style={styles.text}>
+						{strings('terms_and_conditions.description', {
+							action
+						})}
+						<Text style={styles.link}>{strings('terms_and_conditions.terms')}</Text>.
+					</Text>
+				</TouchableOpacity>
+			</View>
+		);
+	}
+}

app/components/Views/TermsAndConditions/index.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TermsAndConditions from './';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+
+const mockStore = configureMockStore();
+const store = mockStore({});
+
+describe('TermsAndConditions', () => {
+	it('should render correctly', () => {
+		const wrapper = shallow(
+			<Provider store={store}>
+				<TermsAndConditions action="import" />
+			</Provider>
+		);
+		expect(wrapper).toMatchSnapshot();
+	});
+});

locales/en.json

@@ -187,6 +187,11 @@
 			"add_collectible": "ADD"
 		}
 	},
+	"terms_and_conditions": {
+		"title": "Terms and Conditions",
+		"description": "By clicking \"{{action}}\" you agree to these ",
+		"terms": "Terms and Conditions"
+	},
 	"token": {
 		"token_symbol": "Token Symbol",
 		"token_address": "Token Address",

locales/es.json

@@ -187,6 +187,11 @@
 			"add_collectible": "AGREGAR COLECCIONABLE"
 		}
 	},
+	"terms_and_conditions": {
+		"title": "Términos y Condiciones",
+		"description": "Haciendo click en \"{{action}}\" estas de acuerdo con estos ",
+		"terms": "Términos y Condiciones"
+	},
 	"token": {
 		"token_symbol": "Símbolo del Token",
 		"token_address": "Dirección del Token",