[Wallet] Implement remaning UI for new verification flow

packages/mobile/ios/Podfile.lock

@@ -119,6 +119,10 @@ PODS:
     - GoogleUtilities/Logger
   - GTMSessionFetcher/Core (1.2.2)
   - leveldb-library (1.20)
+  - lottie-ios (3.1.3)
+  - lottie-react-native (3.2.1):
+    - lottie-ios (~> 3.1.3)
+    - React
   - nanopb (0.3.901):
     - nanopb/decode (= 0.3.901)
     - nanopb/encode (= 0.3.901)
@@ -364,7 +368,6 @@ PODS:
   - RNAnalyticsIntegration-Firebase (1.1.0-beta.2):
     - Analytics
     - React
-    - RNAnalytics
     - Segment-Firebase
   - RNCAsyncStorage (1.6.2):
     - React
@@ -389,8 +392,6 @@ PODS:
     - React
   - RNPermissions (2.0.2):
     - React
-  - RNRandomBytes (3.0.0):
-    - React
   - RNReanimated (1.3.0):
     - React
   - RNScreens (1.0.0-alpha.23):
@@ -429,6 +430,8 @@ DEPENDENCIES:
   - Folly (from `../../../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - GoogleUtilities (~> 5.3.7)
+  - lottie-ios (from `../../../node_modules/lottie-ios`)
+  - lottie-react-native (from `../../../node_modules/lottie-react-native`)
   - RCTRequired (from `../../../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../../../node_modules/react-native/`)
@@ -475,7 +478,6 @@ DEPENDENCIES:
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../../../node_modules/react-native-localize`)
   - RNPermissions (from `../../../node_modules/react-native-permissions`)
-  - RNRandomBytes (from `../../../node_modules/react-native-secure-randombytes`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
   - RNSecureKeyStore (from `../../../node_modules/react-native-secure-key-store/ios`)
@@ -485,7 +487,7 @@ DEPENDENCIES:
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
     - Analytics
     - boost-for-react-native
     - Crashlytics
@@ -522,6 +524,10 @@ EXTERNAL SOURCES:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/Folly.podspec"
   glog:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/glog.podspec"
+  lottie-ios:
+    :path: "../../../node_modules/lottie-ios"
+  lottie-react-native:
+    :path: "../../../node_modules/lottie-react-native"
   RCTRequired:
     :path: "../../../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
@@ -608,8 +614,6 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-localize"
   RNPermissions:
     :path: "../../../node_modules/react-native-permissions"
-  RNRandomBytes:
-    :path: "../../../node_modules/react-native-secure-randombytes"
   RNReanimated:
     :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
@@ -650,6 +654,8 @@ SPEC CHECKSUMS:
   GoogleUtilities: 111a012f4c3a29c9e7c954c082fafd6ee3c999c0
   GTMSessionFetcher: 61bb0f61a4cb560030f1222021178008a5727a23
   leveldb-library: 08cba283675b7ed2d99629a4bc5fd052cd2bb6a5
+  lottie-ios: 496ac5cea1bbf1a7bd1f1f472f3232eb1b8d744b
+  lottie-react-native: b123a79529cc732201091f585c62c89bb4747252
   nanopb: 2901f78ea1b7b4015c860c2fdd1ea2fee1a18d48
   Protobuf: 1097ca58584c8d9be81bfbf2c5ff5975648dd87a
   RCTRequired: c639d59ed389cfb1f1203f65c2ea946d8ec586e2
@@ -686,7 +692,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: fb54c732fd20405a76598e431aa2f8c2bf527de9
   ReactCommon: 5848032ed2f274fcb40f6b9ec24067787c42d479
   RNAnalytics: 67854ebc95a440c6d522babd84cf1968c8629947
-  RNAnalyticsIntegration-Firebase: e94d754cae94d5e0d520666c9452c14a35cebc06
+  RNAnalyticsIntegration-Firebase: c61d62b99ef4dee05836b8abe6ba82fb1e5cc8f0
   RNCAsyncStorage: 60a80e72d95bf02a01cace55d3697d9724f0d77f
   RNDeviceInfo: 687c1b2ab6d86ff1ca1208783320cd144138c7f2
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
@@ -695,7 +701,6 @@ SPEC CHECKSUMS:
   RNGestureHandler: 4cb47a93019c1a201df2644413a0a1569a51c8aa
   RNLocalize: cebb57c3c1e5479806204ce135b26bdd79d17e8a
   RNPermissions: 9525b0f4d209fdf9a373d52d1492ae2943e691e5
-  RNRandomBytes: e5680396032547c8ceb494768532459dc6911b76
   RNReanimated: 6abbbae2e5e72609d85aabd92a982a94566885f1
   RNScreens: f28b48b8345f2f5f39ed6195518291515032a788
   RNSecureKeyStore: f1ad870e53806453039f650720d2845c678d89c8
@@ -708,4 +713,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0d3a8018c6a563abba8559d74620bf8b8b370fe8
 
-COCOAPODS: 1.7.5
+COCOAPODS: 1.8.4

packages/mobile/ios/celo.xcodeproj/project.pbxproj

@@ -471,7 +471,6 @@
 				"${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
 				"${BUILT_PRODUCTS_DIR}/RNLocalize/RNLocalize.framework",
 				"${BUILT_PRODUCTS_DIR}/RNPermissions/RNPermissions.framework",
-				"${BUILT_PRODUCTS_DIR}/RNRandomBytes/RNRandomBytes.framework",
 				"${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
 				"${BUILT_PRODUCTS_DIR}/RNSVG/RNSVG.framework",
 				"${BUILT_PRODUCTS_DIR}/RNScreens/RNScreens.framework",
@@ -498,6 +497,8 @@
 				"${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework",
 				"${BUILT_PRODUCTS_DIR}/glog/glog.framework",
 				"${BUILT_PRODUCTS_DIR}/leveldb-library/leveldb.framework",
+				"${BUILT_PRODUCTS_DIR}/lottie-ios/Lottie.framework",
+				"${BUILT_PRODUCTS_DIR}/lottie-react-native/lottie_react_native.framework",
 				"${BUILT_PRODUCTS_DIR}/nanopb/nanopb.framework",
 				"${BUILT_PRODUCTS_DIR}/react-native-camera/react_native_camera.framework",
 				"${BUILT_PRODUCTS_DIR}/react-native-config/react_native_config.framework",
@@ -532,7 +533,6 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNLocalize.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNPermissions.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNRandomBytes.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNSVG.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNScreens.framework",
@@ -559,6 +559,8 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/leveldb.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Lottie.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/lottie_react_native.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/nanopb.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_camera.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_config.framework",

packages/mobile/locales/en-US/nuxVerification2.json

@@ -64,5 +64,51 @@
     "learnMore": "Learn more about phone verification",
     "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": "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"
   }
 }

packages/mobile/locales/es-419/nuxVerification2.json

@@ -65,5 +65,51 @@
     "learnMore": "~~Learn more about phone verification",
     "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": "~~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"
   }
 }

packages/mobile/package.json

@@ -71,6 +71,8 @@
     "i18next": "^11.9.1",
     "js-sha3": "^0.7.0",
     "lodash": "^4.17.14",
+    "lottie-ios": "3.1.3",
+    "lottie-react-native": "^3.2.1",
     "moment": "^2.22.1",
     "moment-timezone": "^0.5.23",
     "node-libs-react-native": "^1.0.3",
@@ -99,8 +101,7 @@
     "react-native-keyboard-aware-scroll-view": "^0.9.1",
     "react-native-localize": "^1.3.0",
     "react-native-mail": "^4.0.0",
-    "react-native-modal": "^11.4.0",
-    "react-native-modal-dropdown": "^0.7.0",
+    "react-native-modal": "^11.5.1",
     "react-native-permissions": "^2.0.2",
     "react-native-progress": "^3.6.0",
     "react-native-qrcode-svg": "^5.2.0",
@@ -114,8 +115,8 @@
     "react-native-send-intent": "git+https://github.com/celo-org/react-native-send-intent#a0f4b00",
     "react-native-shadow": "^1.2.2",
     "react-native-share": "^2.0.0",
-    "react-native-snap-carousel": "^3.8.4",
     "react-native-sms": "^1.9.0",
+    "react-native-snap-carousel": "^3.8.4",
     "react-native-splash-screen": "^3.2.0",
     "react-native-svg": "^9.11.1",
     "react-native-swiper": "^1.5.14",
@@ -149,9 +150,9 @@
     "@types/lodash": "^4.14.136",
     "@types/react": "^16.8.19",
     "@types/react-native": "^0.60.19",
-    "@types/react-native-snap-carousel": "^3.7.4",
     "@types/react-native-fs": "^2.8.1",
     "@types/react-native-keep-awake": "^2.0.1",
+    "@types/react-native-snap-carousel": "^3.7.4",
     "@types/react-redux": "^7.1.2",
     "@types/react-test-renderer": "^16.9.0",
     "@types/redux-mock-store": "^1.0.0",

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]}

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 = 250
+const ITEM_HEIGHT = 300
 
 interface OwnProps {
   containerStyle: ViewStyle
@@ -20,7 +20,7 @@ interface OwnProps {
 
 export interface CarouselItem {
   text: string
-  icon?: React.ComponentType
+  icon?: any
 }
 
 function renderItem({ item, index }: { item: CarouselItem; index: number }) {
@@ -36,7 +36,7 @@ function renderItem({ item, index }: { item: CarouselItem; index: number }) {
   )
 }
 
-export function Carousel(props: OwnProps) {
+function Carousel(props: OwnProps) {
   const ref = React.useRef(null)
   const [activeItem, setActiveItem] = React.useState(0)
 
@@ -63,7 +63,6 @@ export function Carousel(props: OwnProps) {
         containerStyle={styles.paginationContainer}
         dotColor={colors.dark}
         inactiveDotColor={colors.lightGray}
-        dotStyle={styles.paginationDot}
         inactiveDotOpacity={1}
         inactiveDotScale={0.8}
         carouselRef={ref as any}
@@ -77,7 +76,7 @@ const shadowOpt = {
   width: ITEM_WIDTH,
   height: ITEM_HEIGHT,
   color: '#6b7b8b',
-  opacity: 0.03,
+  opacity: 0.02,
   border: 1,
   radius: 12,
   x: 0,
@@ -89,6 +88,7 @@ const shadowOpt = {
 
 const styles = StyleSheet.create({
   itemContainer: {
+    padding: 20,
     backgroundColor: '#FFFFFF',
     borderWidth: 2,
     borderColor: 'rgba(255, 255, 255, 0.5)',
@@ -97,14 +97,17 @@ const styles = StyleSheet.create({
     height: ITEM_HEIGHT - 6,
     alignItems: 'center',
     justifyContent: 'center',
+    // TODO style shadow right on iOS
+    elevation: 1,
   },
   itemText: {
     ...fontStyles.bodyLarge,
+    ...fontStyles.center,
+    marginTop: 20,
   },
   paginationContainer: {
-    marginVertical: 10,
+    marginTop: 5,
   },
-  paginationDot: {},
 })
 
 export default React.memo(Carousel)

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]}