[Wallet] Implement remaning UI for new verification flow (#1584)

* Add new icons * Implement verification interstitial screen * Implement verification input screen * Style tweaks * Add hitslop to paste / clear icons to make them easier to target
celo-org · Nov 8, 2019 · 2788391 · 2788391
1 parent 58339a0
commit 2788391
Show file tree

Hide file tree

Showing 31 changed files with 1,960 additions and 262 deletions.
diff --git a/packages/mobile/locales/en-US/nuxVerification2.json b/packages/mobile/locales/en-US/nuxVerification2.json
@@ -65,17 +65,50 @@
     "start": "Start Verification",
     "skip": "Skip For Now"
   },
+  "learnMore": {
+    "header": "Phone Number Verification",
+    "intro":
+      "Celo Phone number verification works by associating your Celo Wallet with your phone number.",
+    "section1Header": "Do I need to complete this?",
+    "section1Body":
+      "Verification is not required. However, if you do not verify, others on the Celo network cannot send value to you using your phone number. They must use QR codes or addresses.",
+    "section2Header": "Security and Privacy",
+    "section2Body":
+      "To protect your privacy, only an obfuscated version of your phone number is stored on the Celo blockchain."
+  },
   "loading": {
     "verifyingNumber": "Verifying {{number}}",
     "keepOpen": "Please keep the app open",
     "card1": "Verifying your phone number helps your friends find you on the Celo Network.",
     "card2": "On Celo, you can send money to your anyone using just their phone number.",
-    "card3": "Verification requires three text messages sent to your phone number."
+    "card3": "Celo is now requesting three text messages to confirm you own your phone number."
   },
   "skipModal": {
     "header": "Skip Verification?",
     "body1": "Verifying allows others to send value to your phone number.",
     "body2":
       "Without verification, you can still receive payments but only using Celo addresses or QR codes."
+  },
+  "interstitial": {
+    "header": "Almost Done",
+    "body1":
+      "Your text messages are on the way! Please enter your three codes as you receive them.",
+    "body2": "This may take a minute."
+  },
+  "input": {
+    "header": "Submit Codes",
+    "body1": "Copy and Paste ",
+    "body2": "the verification codes from your Messages (SMS) app.",
+    "codeHeader1": "First Code",
+    "codeHeader2": "Second Code",
+    "codeHeader3": "Third Code",
+    "codesMissing": "I didn’t receive three codes"
+  },
+  "missingCodesModal": {
+    "header": "Missing Codes?",
+    "body":
+      "If you haven’t received all your codes yet after 60 seconds, you can skip verification and try again later.",
+    "wait": "Wait for codes",
+    "skip": "Skip for now"
   }
 }
diff --git a/packages/mobile/locales/es-419/nuxVerification2.json b/packages/mobile/locales/es-419/nuxVerification2.json
@@ -66,17 +66,50 @@
     "start": "~~Start Verification",
     "skip": "~~Skip For Now"
   },
+  "learnMore": {
+    "header": "~~Phone Number Verification",
+    "intro":
+      "~~Celo Phone number verification works by associating your Celo Wallet with your phone number.",
+    "section1Header": "~~Do I need to complete this?",
+    "section1Body":
+      "~~Verification is not required. However, if you do not verify, others on the Celo network cannot send value to you using your phone number. They must use QR codes or addresses.",
+    "section2Header": "~~Security and Privacy",
+    "section2Body":
+      "~~To protect your privacy, only an obfuscated version of your phone number is stored on the Celo blockchain."
+  },
   "loading": {
     "verifyingNumber": "~~Verifying {{number}}",
     "keepOpen": "~~Please keep the app open",
     "card1": "~~Verifying your phone number helps your friends find you on the Celo Network.",
     "card2": "~~On Celo, you can send money to your anyone using just their phone number.",
-    "card3": "~~Verification requires three text messages sent to your phone number."
+    "card3": "~~Celo is now requesting three text messages to confirm you own your phone number."
   },
   "skipModal": {
     "header": "~~Skip Verification?",
     "body1": "~~Verifying allows others to send value to your phone number.",
     "body2":
       "~~Without verification, you can still receive payments but only using Celo addresses or QR codes."
+  },
+  "interstitial": {
+    "header": "~~Almost Done",
+    "body1":
+      "~~Your text messages are on the way! Please enter your three codes as you receive them.",
+    "body2": "~~This may take a minute."
+  },
+  "input": {
+    "header": "~~Submit Codes",
+    "body1": "~~Copy and Paste ",
+    "body2": "~~the verification codes from your Messages (SMS) app.",
+    "codeHeader1": "~~First Code",
+    "codeHeader2": "~~Second Code",
+    "codeHeader3": "~~Third Code",
+    "codesMissing": "~~I didn’t receive three codes"
+  },
+  "missingCodesModal": {
+    "header": "~~Missing Codes?",
+    "body":
+      "~~If you haven’t received all your codes yet after 60 seconds, you can skip verification and try again later.",
+    "wait": "~~Wait for codes",
+    "skip": "~~Skip for now"
   }
 }
diff --git a/packages/mobile/src/account/__snapshots__/EditProfile.test.tsx.snap b/packages/mobile/src/account/__snapshots__/EditProfile.test.tsx.snap
@@ -72,13 +72,22 @@ exports[`renders the EditProfile Component 1`] = `
             },
             Object {
               "marginRight": 8,
+              "zIndex": 100,
             },
           ]
         }
       >
         <View
           accessible={true}
           focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 10,
+              "left": 10,
+              "right": 10,
+              "top": 10,
+            }
+          }
           isTVSelectable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}

diff --git a/packages/mobile/src/components/Carousel.tsx b/packages/mobile/src/components/Carousel.tsx
@@ -11,7 +11,7 @@ import { BoxShadow } from 'react-native-shadow'
 import RNCarousel, { Pagination } from 'react-native-snap-carousel'
 
 const ITEM_WIDTH = variables.width - 70
-const ITEM_HEIGHT = 275
+const ITEM_HEIGHT = 300
 
 interface OwnProps {
   containerStyle: ViewStyle
@@ -103,6 +103,7 @@ const styles = StyleSheet.create({
   itemText: {
     ...fontStyles.bodyLarge,
     ...fontStyles.center,
+    marginTop: 20,
   },
   paginationContainer: {
     marginTop: 5,

diff --git a/packages/mobile/src/exchange/__snapshots__/FeeExchangeEducation.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/FeeExchangeEducation.test.tsx.snap
@@ -76,6 +76,14 @@ exports[`renders correctly 1`] = `
       <View
         accessible={true}
         focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
         isTVSelectable={true}
         onClick={[Function]}
         onResponderGrant={[Function]}

diff --git a/packages/mobile/src/invite/EnterInviteCode.tsx b/packages/mobile/src/invite/EnterInviteCode.tsx
@@ -1,6 +1,6 @@
 import Button, { BtnTypes } from '@celo/react-components/components/Button'
 import SmallButton from '@celo/react-components/components/SmallButton'
-import InviteCodeIcon from '@celo/react-components/icons/InviteCodeIcon'
+import SmsCeloSwap from '@celo/react-components/icons/SmsCeloSwap'
 import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts'
 import { componentStyles } from '@celo/react-components/styles/styles'
@@ -152,7 +152,7 @@ export class EnterInviteCode extends React.Component<Props, State> {
       <SafeAreaView style={styles.container}>
         <ScrollView contentContainerStyle={styles.scrollContainer}>
           <DevSkipButton nextScreen={Screens.ImportContacts} />
-          <InviteCodeIcon />
+          <SmsCeloSwap />
           <Text style={styles.h1} testID={'InviteCodeTitle'}>
             {t('inviteCodeText.title')}
           </Text>

diff --git a/packages/mobile/src/invite/__snapshots__/EnterInviteCode.test.tsx.snap b/packages/mobile/src/invite/__snapshots__/EnterInviteCode.test.tsx.snap
diff --git a/packages/mobile/src/send/__snapshots__/FeeEducation.test.tsx.snap b/packages/mobile/src/send/__snapshots__/FeeEducation.test.tsx.snap
@@ -76,6 +76,14 @@ exports[`renders correctly 1`] = `
       <View
         accessible={true}
         focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
         isTVSelectable={true}
         onClick={[Function]}
         onResponderGrant={[Function]}

diff --git a/packages/mobile/src/verify/VerificationEducationScreen.tsx b/packages/mobile/src/verify/VerificationEducationScreen.tsx
@@ -1,6 +1,7 @@
 import Button, { BtnTypes } from '@celo/react-components/components/Button'
 import Link from '@celo/react-components/components/Link'
 import TextButton from '@celo/react-components/components/TextButton'
+import VerifyPhone from '@celo/react-components/icons/VerifyPhone'
 import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts'
 import { componentStyles } from '@celo/react-components/styles/styles'
@@ -11,7 +12,6 @@ import Modal from 'react-native-modal'
 import SafeAreaView from 'react-native-safe-area-view'
 import componentWithAnalytics from 'src/analytics/wrapper'
 import { Namespaces } from 'src/i18n'
-import NuxLogo from 'src/icons/NuxLogo'
 import { nuxNavigationOptions } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
@@ -32,7 +32,6 @@ class VerificationEducationScreen extends React.Component<WithNamespaces, State>
   }
 
   onPressStart = () => {
-    // TODO(Rossy) Use new verification screen when it's ready
     navigate(Screens.VerificationLoadingScreen)
   }
 
@@ -55,8 +54,7 @@ class VerificationEducationScreen extends React.Component<WithNamespaces, State>
     return (
       <SafeAreaView style={styles.container}>
         <ScrollView contentContainerStyle={styles.scrollContainer}>
-          {/** TODO use new icon when it's ready */}
-          <NuxLogo testID="VerificationEducationIcon" />
+          <VerifyPhone />
           <Text style={styles.h1} testID="VerificationEducationHeader">
             {t('education.header')}
           </Text>
@@ -82,7 +80,7 @@ class VerificationEducationScreen extends React.Component<WithNamespaces, State>
         </>
         <Modal isVisible={this.state.isModalVisible}>
           <View style={styles.modalContainer}>
-            <Text style={fontStyles.h1}>{t('skipModal.header')}</Text>
+            <Text style={styles.modalHeader}>{t('skipModal.header')}</Text>
             <Text style={fontStyles.body}>{t('skipModal.body1')}</Text>
             <Text style={[fontStyles.body, componentStyles.marginTop10]}>
               {t('skipModal.body2')}
@@ -127,10 +125,16 @@ const styles = StyleSheet.create({
   modalContainer: {
     backgroundColor: colors.background,
     padding: 20,
+    marginHorizontal: 10,
     borderRadius: 4,
   },
+  modalHeader: {
+    ...fontStyles.h2,
+    ...fontStyles.bold,
+    marginVertical: 15,
+  },
   modalButtonsContainer: {
-    marginTop: 20,
+    marginTop: 25,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-evenly',