[Wallet] Implement most of verification loading screen and skip modal

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,18 @@
     "learnMore": "Learn more about phone verification",
     "start": "Start Verification",
     "skip": "Skip For Now"
+  },
+  "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."
+  },
+  "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."
   }
 }

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

@@ -65,5 +65,18 @@
     "learnMore": "~~Learn more about phone verification",
     "start": "~~Start Verification",
     "skip": "~~Skip For Now"
+  },
+  "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."
+  },
+  "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."
   }
 }

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/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 = 275
 
 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,16 @@ 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,
   },
   paginationContainer: {
-    marginVertical: 10,
+    marginTop: 5,
   },
-  paginationDot: {},
 })
 
 export default React.memo(Carousel)

packages/mobile/src/icons/LoadingSpinner.tsx

@@ -0,0 +1,23 @@
+import LottieView from 'lottie-react-native'
+import React from 'react'
+
+interface Props {
+  width?: number
+}
+
+export default class LoadingSpinner extends React.PureComponent<Props> {
+  static defaultProps = {
+    width: 40,
+  }
+
+  render() {
+    return (
+      <LottieView
+        source={require('./loadingSpinnerGreen.json')}
+        autoPlay={true}
+        loop={true}
+        style={{ width: this.props.width }}
+      />
+    )
+  }
+}