[Wallet] Create new carousel component (#1555)

* Add a new carousel for user education
* Remove unused verify input screen
* Create new screen for first stage of new verification designs

packages/mobile/package.json

@@ -114,6 +114,7 @@
     "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-splash-screen": "^3.2.0",
     "react-native-svg": "^9.11.1",
@@ -148,6 +149,7 @@
     "@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-redux": "^7.1.2",

packages/mobile/src/components/Carousel.tsx

@@ -0,0 +1,110 @@
+/**
+ * A custom style carousel based on react-native-snap-carousel
+ */
+
+import colors from '@celo/react-components/styles/colors'
+import fontStyles from '@celo/react-components/styles/fonts'
+import variables from '@celo/react-components/styles/variables'
+import * as React from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { BoxShadow } from 'react-native-shadow'
+import RNCarousel, { Pagination } from 'react-native-snap-carousel'
+
+const ITEM_WIDTH = variables.width - 70
+const ITEM_HEIGHT = 250
+
+interface OwnProps {
+  containerStyle: ViewStyle
+  items: CarouselItem[]
+}
+
+export interface CarouselItem {
+  text: string
+  icon?: React.ComponentType
+}
+
+function renderItem({ item, index }: { item: CarouselItem; index: number }) {
+  return (
+    <View style={{ position: 'relative' }}>
+      <BoxShadow setting={shadowOpt}>
+        <View style={styles.itemContainer}>
+          {item.icon}
+          <Text style={styles.itemText}>{item.text}</Text>
+        </View>
+      </BoxShadow>
+    </View>
+  )
+}
+
+export function Carousel(props: OwnProps) {
+  const ref = React.useRef(null)
+  const [activeItem, setActiveItem] = React.useState(0)
+
+  return (
+    <View style={props.containerStyle}>
+      {/* For some reason the carousel is adding a bunch of item height, wrapping to cut it off*/}
+      <View style={{ height: ITEM_HEIGHT }}>
+        <RNCarousel
+          ref={ref}
+          data={props.items}
+          renderItem={renderItem}
+          sliderWidth={variables.width}
+          sliderHeight={ITEM_HEIGHT}
+          itemWidth={ITEM_WIDTH}
+          itemHeight={ITEM_HEIGHT}
+          inactiveSlideScale={0.9}
+          inactiveSlideOpacity={1}
+          onSnapToItem={setActiveItem}
+        />
+      </View>
+      <Pagination
+        dotsLength={props.items.length}
+        activeDotIndex={activeItem}
+        containerStyle={styles.paginationContainer}
+        dotColor={colors.dark}
+        inactiveDotColor={colors.lightGray}
+        dotStyle={styles.paginationDot}
+        inactiveDotOpacity={1}
+        inactiveDotScale={0.8}
+        carouselRef={ref as any}
+        tappableDots={false}
+      />
+    </View>
+  )
+}
+
+const shadowOpt = {
+  width: ITEM_WIDTH,
+  height: ITEM_HEIGHT,
+  color: '#6b7b8b',
+  opacity: 0.03,
+  border: 1,
+  radius: 12,
+  x: 0,
+  y: 0,
+  style: {
+    padding: 3,
+  },
+}
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 2,
+    borderColor: 'rgba(255, 255, 255, 0.5)',
+    borderRadius: 12,
+    width: ITEM_WIDTH - 6,
+    height: ITEM_HEIGHT - 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemText: {
+    ...fontStyles.bodyLarge,
+  },
+  paginationContainer: {
+    marginVertical: 10,
+  },
+  paginationDot: {},
+})
+
+export default React.memo(Carousel)

packages/mobile/src/navigator/Navigator.tsx

@@ -62,7 +62,7 @@ import SendAmount from 'src/send/SendAmount'
 import SendConfirmation from 'src/send/SendConfirmation'
 import SetClock from 'src/set-clock/SetClock'
 import TransactionReviewScreen from 'src/transactions/TransactionReviewScreen'
-import VerifyInput from 'src/verify/Input'
+import VerificationLoadingScreen from 'src/verify/VerificationLoadingScreen'
 import VerifyVerified from 'src/verify/Verified'
 import VerifyVerifying from 'src/verify/Verifying'
 import VerifyEducation from 'src/verify/VerifyPhoneEducation'
@@ -113,7 +113,7 @@ const NuxStack = createStackNavigator(
     [Screens.ImportWalletEmpty]: { screen: ImportWalletEmpty },
     [Screens.ImportContacts]: { screen: ImportContacts },
     [Screens.VerifyEducation]: { screen: VerifyEducation },
-    [Screens.VerifyInput]: { screen: VerifyInput },
+    [Screens.VerificationLoadingScreen]: { screen: VerificationLoadingScreen },
     [Screens.VerifyVerifying]: { screen: VerifyVerifying },
     [Screens.VerifyVerified]: { screen: VerifyVerified },
     ...commonScreens,

packages/mobile/src/navigator/Screens.tsx

@@ -65,8 +65,8 @@ export enum Screens {
   TransactionReview = 'TransactionReview',
   UpgradeScreen = 'UpgradeScreen',
   VerifyEducation = 'VerifyEducation',
-  VerifyInput = 'VerifyInput',
   VerifyVerified = 'VerifyVerified',
   VerifyVerifying = 'VerifyVerifying',
+  VerificationLoadingScreen = 'VerificationLoadingScreen',
   WalletHome = 'WalletHome',
 }