From de2905a1a07c733923b9cc38c7913930c5bbb198 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Sun, 13 Sep 2020 00:19:31 -0400 Subject: [PATCH 1/6] Use FlatList for scan steps modal --- .../UI/WarningExistingUserModal/index.js | 3 +- app/components/Views/Onboarding/index.js | 64 +++++++++++++------ app/constants/onboarding.js | 6 ++ 3 files changed, 52 insertions(+), 21 deletions(-) diff --git a/app/components/UI/WarningExistingUserModal/index.js b/app/components/UI/WarningExistingUserModal/index.js index 0eb0f9ef334..9e35d346450 100644 --- a/app/components/UI/WarningExistingUserModal/index.js +++ b/app/components/UI/WarningExistingUserModal/index.js @@ -20,7 +20,8 @@ const styles = StyleSheet.create({ ...fontStyles.normal, color: colors.black, textAlign: 'center', - fontSize: 14 + fontSize: 14, + lineHeight: 18 }, warningModalTextBold: { ...fontStyles.bold diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index 7c8dcfdfedc..2a42b3302fd 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -1,6 +1,16 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { ActivityIndicator, Text, View, ScrollView, StyleSheet, Alert, Image, InteractionManager } from 'react-native'; +import { + ActivityIndicator, + FlatList, + Text, + View, + ScrollView, + StyleSheet, + Alert, + Image, + InteractionManager +} from 'react-native'; import AsyncStorage from '@react-native-community/async-storage'; import StyledButton from '../../UI/StyledButton'; import { colors, fontStyles, baseStyles } from '../../../styles/common'; @@ -27,6 +37,7 @@ import AnimatedFox from 'react-native-animated-fox'; import PreventScreenshot from '../../../core/PreventScreenshot'; import WarningExistingUserModal from '../../UI/WarningExistingUserModal'; import { PREVIOUS_SCREEN, ONBOARDING } from '../../../constants/navigation'; +import { ONBOARDING_SCAN_STEPS } from '../../../constants/onboarding'; import { EXISTING_USER, BIOMETRY_CHOICE, @@ -110,14 +121,15 @@ const styles = StyleSheet.create({ ...fontStyles.bold, fontSize: 18, color: colors.fontPrimary, - textAlign: 'center' + textAlign: 'center', + lineHeight: 28 }, - steps: {}, + step: { ...fontStyles.normal, - fontSize: scaling.scale(13), + fontSize: scaling.scale(14), color: colors.fontPrimary, - lineHeight: 32 + lineHeight: 28 }, loader: { marginTop: 180, @@ -138,14 +150,29 @@ const styles = StyleSheet.create({ row: { flexDirection: 'row', alignItems: 'flex-start', - flexWrap: 'wrap' + flexWrap: 'wrap', + marginBottom: 6 }, - bullet: { - width: 20 - }, - bulletText: {} + val: { width: '8%' }, + stepTitle: { width: '92%' } }); +const ScanStep = ({ val, step }) => ( + + + {val}. + + + {step} + + +); + +ScanStep.propTypes = { + val: PropTypes.number, + step: PropTypes.string +}; + /** * View that is displayed to first time (new) users */ @@ -565,6 +592,8 @@ class Onboarding extends PureComponent { render() { const { qrCodeModalVisible, loading, existingUser } = this.state; + const renderScanStep = ({ item }) => ; + return ( @@ -617,16 +646,11 @@ class Onboarding extends PureComponent { {strings('onboarding.scan_title')} - {[1, 2, 3, 4].map(val => ( - - - {val}. - - - {strings(`onboarding.scan_step_${val}`)} - - - ))} + item.id} + /> diff --git a/app/constants/onboarding.js b/app/constants/onboarding.js index 8c4a65b5a95..18686d461d4 100644 --- a/app/constants/onboarding.js +++ b/app/constants/onboarding.js @@ -15,3 +15,9 @@ export const MANUAL_BACKUP_STEPS = [ export const WRONG_PASSWORD_ERROR = 'Error: Decrypt failed'; export const SEED_PHRASE = 'seed_phrase'; export const CONFIRM_PASSWORD = 'confirm_password'; + +export const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(val => ({ + id: `${val}`, + val, + step: strings(`onboarding.scan_step_${val}`) +})); From c08600289ff9e6decba5f2eab41decf4ef6af134 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Sun, 13 Sep 2020 17:29:32 -0400 Subject: [PATCH 2/6] Create ScanStep component --- app/components/UI/ScanStep/index.js | 40 +++++++++++++++++++ app/components/Views/ImportWallet/index.js | 2 +- app/components/Views/Onboarding/index.js | 45 +++++----------------- app/constants/onboarding.js | 6 --- 4 files changed, 51 insertions(+), 42 deletions(-) create mode 100644 app/components/UI/ScanStep/index.js diff --git a/app/components/UI/ScanStep/index.js b/app/components/UI/ScanStep/index.js new file mode 100644 index 00000000000..06a54baa29b --- /dev/null +++ b/app/components/UI/ScanStep/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { StyleSheet, Text, View } from 'react-native'; +import { colors, fontStyles } from '../../../styles/common'; +import scaling from '../../../util/scaling'; + +const styles = StyleSheet.create({ + step: { + ...fontStyles.normal, + fontSize: scaling.scale(14), + color: colors.fontPrimary, + lineHeight: 28 + }, + row: { + flexDirection: 'row', + alignItems: 'flex-start', + flexWrap: 'wrap', + marginBottom: 6 + }, + val: { width: '8%' }, + stepTitle: { width: '92%' } +}); + +const ScanStep = ({ val, step }) => ( + + + {val}. + + + {step} + + +); + +ScanStep.propTypes = { + val: PropTypes.number, + step: PropTypes.string +}; + +export default ScanStep; diff --git a/app/components/Views/ImportWallet/index.js b/app/components/Views/ImportWallet/index.js index 683f8068564..17d63b48332 100644 --- a/app/components/Views/ImportWallet/index.js +++ b/app/components/Views/ImportWallet/index.js @@ -54,7 +54,7 @@ const styles = StyleSheet.create({ height: Device.isIos() ? 90 : 45 }, title: { - fontSize: Device.isSmallDevice() ? 20 : 24, + fontSize: SMALL_DEVICE ? 20 : 24, color: colors.fontPrimary, justifyContent: 'center', textAlign: 'center', diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index 2a42b3302fd..e9edddc9dfd 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -26,6 +26,7 @@ import Analytics from '../../../core/Analytics'; import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics'; import { saveOnboardingEvent } from '../../../actions/onboarding'; import { getTransparentBackOnboardingNavbarOptions } from '../../UI/Navbar'; +import ScanStep from '../../UI/ScanStep'; import PubNubWrapper from '../../../util/syncWithExtension'; import ActionModal from '../../UI/ActionModal'; import Logger from '../../../util/Logger'; @@ -37,7 +38,6 @@ import AnimatedFox from 'react-native-animated-fox'; import PreventScreenshot from '../../../core/PreventScreenshot'; import WarningExistingUserModal from '../../UI/WarningExistingUserModal'; import { PREVIOUS_SCREEN, ONBOARDING } from '../../../constants/navigation'; -import { ONBOARDING_SCAN_STEPS } from '../../../constants/onboarding'; import { EXISTING_USER, BIOMETRY_CHOICE, @@ -48,8 +48,6 @@ import { TRUE } from '../../../constants/storage'; -import scaling from '../../../util/scaling'; - const PUB_KEY = process.env.MM_PUBNUB_PUB_KEY; const styles = StyleSheet.create({ @@ -124,13 +122,6 @@ const styles = StyleSheet.create({ textAlign: 'center', lineHeight: 28 }, - - step: { - ...fontStyles.normal, - fontSize: scaling.scale(14), - color: colors.fontPrimary, - lineHeight: 28 - }, loader: { marginTop: 180, justifyContent: 'center', @@ -146,32 +137,10 @@ const styles = StyleSheet.create({ column: { marginVertical: 24, alignItems: 'flex-start' - }, - row: { - flexDirection: 'row', - alignItems: 'flex-start', - flexWrap: 'wrap', - marginBottom: 6 - }, - val: { width: '8%' }, - stepTitle: { width: '92%' } + } }); -const ScanStep = ({ val, step }) => ( - - - {val}. - - - {step} - - -); - -ScanStep.propTypes = { - val: PropTypes.number, - step: PropTypes.string -}; +const keyExtractor = item => item.id; /** * View that is displayed to first time (new) users @@ -594,6 +563,12 @@ class Onboarding extends PureComponent { const renderScanStep = ({ item }) => ; + const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(val => ({ + id: `${val}`, + val, + step: strings(`onboarding.scan_step_${val}`) + })); + return ( @@ -649,7 +624,7 @@ class Onboarding extends PureComponent { item.id} + keyExtractor={keyExtractor} /> diff --git a/app/constants/onboarding.js b/app/constants/onboarding.js index 18686d461d4..8c4a65b5a95 100644 --- a/app/constants/onboarding.js +++ b/app/constants/onboarding.js @@ -15,9 +15,3 @@ export const MANUAL_BACKUP_STEPS = [ export const WRONG_PASSWORD_ERROR = 'Error: Decrypt failed'; export const SEED_PHRASE = 'seed_phrase'; export const CONFIRM_PASSWORD = 'confirm_password'; - -export const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(val => ({ - id: `${val}`, - val, - step: strings(`onboarding.scan_step_${val}`) -})); From 9963d7fb55a84353181bc48e66576ca524998211 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Sun, 13 Sep 2020 17:35:21 -0400 Subject: [PATCH 3/6] Add snapshots --- .../ScanStep/__snapshots__/index.test.js.snap | 55 +++++++++++++++++++ app/components/UI/ScanStep/index.test.js | 10 ++++ app/components/Views/Onboarding/index.js | 2 +- 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 app/components/UI/ScanStep/__snapshots__/index.test.js.snap create mode 100644 app/components/UI/ScanStep/index.test.js diff --git a/app/components/UI/ScanStep/__snapshots__/index.test.js.snap b/app/components/UI/ScanStep/__snapshots__/index.test.js.snap new file mode 100644 index 00000000000..630a80c373a --- /dev/null +++ b/app/components/UI/ScanStep/__snapshots__/index.test.js.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ScanStep should render correctly 1`] = ` + + + + . + + + + + + +`; diff --git a/app/components/UI/ScanStep/index.test.js b/app/components/UI/ScanStep/index.test.js new file mode 100644 index 00000000000..419c543cc09 --- /dev/null +++ b/app/components/UI/ScanStep/index.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ScanStep from './'; + +describe('ScanStep', () => { + it('should render correctly', () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index e9edddc9dfd..91a5cf455ba 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -564,7 +564,7 @@ class Onboarding extends PureComponent { const renderScanStep = ({ item }) => ; const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(val => ({ - id: `${val}`, + id: `ONBOARDING_SCAN_STEPS-${val}`, val, step: strings(`onboarding.scan_step_${val}`) })); From 1711bab5aa0c68a589f79dbecde3da3bca5c62f6 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Sun, 13 Sep 2020 18:37:04 -0400 Subject: [PATCH 4/6] Use component children for step text --- .../UI/ScanStep/__snapshots__/index.test.js.snap | 5 ++++- app/components/UI/ScanStep/index.js | 10 +++++----- app/components/UI/ScanStep/index.test.js | 4 ++-- app/components/Views/Onboarding/index.js | 10 +++++----- 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/app/components/UI/ScanStep/__snapshots__/index.test.js.snap b/app/components/UI/ScanStep/__snapshots__/index.test.js.snap index 630a80c373a..b48e5126165 100644 --- a/app/components/UI/ScanStep/__snapshots__/index.test.js.snap +++ b/app/components/UI/ScanStep/__snapshots__/index.test.js.snap @@ -29,6 +29,7 @@ exports[`ScanStep should render correctly 1`] = ` } } > + 1 . @@ -49,7 +50,9 @@ exports[`ScanStep should render correctly 1`] = ` "lineHeight": 28, } } - /> + > + some text + `; diff --git a/app/components/UI/ScanStep/index.js b/app/components/UI/ScanStep/index.js index 06a54baa29b..d4c98847bf8 100644 --- a/app/components/UI/ScanStep/index.js +++ b/app/components/UI/ScanStep/index.js @@ -21,20 +21,20 @@ const styles = StyleSheet.create({ stepTitle: { width: '92%' } }); -const ScanStep = ({ val, step }) => ( +const ScanStep = ({ step, children }) => ( - {val}. + {step}. - {step} + {children} ); ScanStep.propTypes = { - val: PropTypes.number, - step: PropTypes.string + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), + step: PropTypes.number }; export default ScanStep; diff --git a/app/components/UI/ScanStep/index.test.js b/app/components/UI/ScanStep/index.test.js index 419c543cc09..ba367379f0c 100644 --- a/app/components/UI/ScanStep/index.test.js +++ b/app/components/UI/ScanStep/index.test.js @@ -4,7 +4,7 @@ import ScanStep from './'; describe('ScanStep', () => { it('should render correctly', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + const step = shallow(some text); + expect(step).toMatchSnapshot(); }); }); diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index 91a5cf455ba..9df957bcdb3 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -561,12 +561,12 @@ class Onboarding extends PureComponent { render() { const { qrCodeModalVisible, loading, existingUser } = this.state; - const renderScanStep = ({ item }) => ; + const renderScanStep = ({ item }) => {item.text}; - const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(val => ({ - id: `ONBOARDING_SCAN_STEPS-${val}`, - val, - step: strings(`onboarding.scan_step_${val}`) + const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(step => ({ + id: `ONBOARDING_SCAN_STEPS-${step}`, + step, + text: strings(`onboarding.scan_step_${step}`) })); return ( From 63efe81a210a990646c03b5cb730939e75f9c0c2 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Sun, 13 Sep 2020 19:25:12 -0400 Subject: [PATCH 5/6] Add createStep method --- app/components/Views/Onboarding/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index 9df957bcdb3..6b50eace8af 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -142,6 +142,12 @@ const styles = StyleSheet.create({ const keyExtractor = item => item.id; +const createStep = step => ({ + id: `ONBOARDING_SCAN_STEPS-${step}`, + step, + text: strings(`onboarding.scan_step_${step}`) +}); + /** * View that is displayed to first time (new) users */ @@ -563,11 +569,7 @@ class Onboarding extends PureComponent { const renderScanStep = ({ item }) => {item.text}; - const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(step => ({ - id: `ONBOARDING_SCAN_STEPS-${step}`, - step, - text: strings(`onboarding.scan_step_${step}`) - })); + const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(createStep); return ( From e2aa776e7991533c10d4910eec1e532b25d2c4bd Mon Sep 17 00:00:00 2001 From: rickycodes Date: Mon, 14 Sep 2020 11:08:56 -0400 Subject: [PATCH 6/6] Unpack fields from object --- app/components/Views/Onboarding/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index 6b50eace8af..9f661ad5325 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -140,7 +140,7 @@ const styles = StyleSheet.create({ } }); -const keyExtractor = item => item.id; +const keyExtractor = ({ id }) => id; const createStep = step => ({ id: `ONBOARDING_SCAN_STEPS-${step}`, @@ -567,7 +567,7 @@ class Onboarding extends PureComponent { render() { const { qrCodeModalVisible, loading, existingUser } = this.state; - const renderScanStep = ({ item }) => {item.text}; + const renderScanStep = ({ item: { step, text } }) => {text}; const ONBOARDING_SCAN_STEPS = [1, 2, 3, 4].map(createStep);