[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)
@@ -429,6 +433,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/`)
@@ -485,19 +491,22 @@ DEPENDENCIES:
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  https://cdn.cocoapods.org/:
     - Analytics
     - boost-for-react-native
-    - Crashlytics
     - Fabric
     - Firebase
+    - FirebaseCore
+    - FirebaseInstanceID
+    - GoogleUtilities
+  https://github.com/cocoapods/specs.git:
+    - Crashlytics
+    - Firebase
     - FirebaseAnalytics
     - FirebaseAnalyticsInterop
     - FirebaseAuth
     - FirebaseAuthInterop
-    - FirebaseCore
     - FirebaseDatabase
-    - FirebaseInstanceID
     - FirebaseMessaging
     - FirebaseStorage
     - GoogleAppMeasurement
@@ -522,6 +531,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:
@@ -650,6 +663,8 @@ SPEC CHECKSUMS:
   GoogleUtilities: 111a012f4c3a29c9e7c954c082fafd6ee3c999c0
   GTMSessionFetcher: 61bb0f61a4cb560030f1222021178008a5727a23
   leveldb-library: 08cba283675b7ed2d99629a4bc5fd052cd2bb6a5
+  lottie-ios: 496ac5cea1bbf1a7bd1f1f472f3232eb1b8d744b
+  lottie-react-native: b123a79529cc732201091f585c62c89bb4747252
   nanopb: 2901f78ea1b7b4015c860c2fdd1ea2fee1a18d48
   Protobuf: 1097ca58584c8d9be81bfbf2c5ff5975648dd87a
   RCTRequired: c639d59ed389cfb1f1203f65c2ea946d8ec586e2

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

@@ -498,6 +498,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",
@@ -559,6 +561,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?: React.ReactElement
 }
 
 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 }}
+      />
+    )
+  }
+}