re-verification screen

package.json

@@ -74,12 +74,12 @@
     "@ethersproject/wallet": "^5.7.0",
     "@expo/react-native-action-sheet": "^3.9.0",
     "@fingerprintjs/fingerprintjs-pro": "^3.8.1",
-    "@gooddollar/good-design": "0.1.58-beta.a841f10d",
+    "@gooddollar/good-design": "0.1.58-beta.1985097e",
     "@gooddollar/goodcontracts": "^2.6.2",
     "@gooddollar/goodprotocol": "^2.0.24",
     "@gooddollar/react-native-facetec": "^1.0.45",
     "@gooddollar/react-native-side-menu": "^2.0.2",
-    "@gooddollar/web3sdk-v2": "0.2.32-beta.a841f10d",
+    "@gooddollar/web3sdk-v2": "0.2.32-beta.1985097e",
     "@hcaptcha/react-hcaptcha": "^1.6.0",
     "@indexeddbshim/indexeddbshim": "^6.5.0",
     "@lingui/react": "^3.13.0",

src/components/faceVerification/screens/IntroScreen.jsx

@@ -1,13 +1,14 @@
 // libraries
 import React, { useCallback, useContext, useEffect, useMemo } from 'react'
-import { Platform, View } from 'react-native'
+import { ActivityIndicator, Image, Platform, View } from 'react-native'
 import { t } from '@lingui/macro'
+import { useIdentityExpiryDate } from '@gooddollar/web3sdk-v2'
+
 import useFVRedirect from '../standalone/hooks/useFVRedirect'
 
 // components
 import Text from '../../common/view/Text'
 import { CustomButton, Section, Wrapper } from '../../common'
-import WaitForCompleted from '../components/WaitForCompleted'
 
 // hooks
 import useOnPress from '../../../lib/hooks/useOnPress'
@@ -16,6 +17,8 @@ import usePermissions from '../../permissions/hooks/usePermissions'
 import useDisposingState from '../hooks/useDisposingState'
 import useEnrollmentIdentifier from '../hooks/useEnrollmentIdentifier'
 
+import { useWallet } from '../../../lib/wallet/GoodWalletProvider'
+
 // utils
 import logger from '../../../lib/logger/js-logger'
 import { getFirstWord } from '../../../lib/utils/getFirstWord'
@@ -35,9 +38,12 @@ import AsyncStorage from '../../../lib/utils/asyncStorage'
 
 // assets
 import Wait24HourSVG from '../../../assets/Claim/wait24Hour.svg'
+
 import FashionShootSVG from '../../../assets/FaceVerification/FashionPhotoshoot.svg'
+import BillyVerifies from '../../../assets/billy-verifies.png'
 import useProfile from '../../../lib/userStorage/useProfile'
 import useFVLoginInfoCheck from '../standalone/hooks/useFVLoginInfoCheck'
+
 const log = logger.child({ from: 'FaceVerificationIntro' })
 
 const WalletDeletedPopupText = ({ styles }) => (
@@ -57,12 +63,54 @@ const WalletDeletedPopupText = ({ styles }) => (
   </View>
 )
 
+const IntroReVerification = ({ styles, firstName, ready, onVerify, onLearnMore }) => (
+  <Wrapper>
+    <Section style={styles.topContainer} grow>
+      <View style={styles.mainContent}>
+        <Section.Title fontWeight="bold" textTransform="none" style={styles.mainTitle}>
+          {firstName ? `${firstName},` : ``}
+          <Section.Text fontWeight="bold" textTransform="none" color="#00AEFF" fontSize={30} lineHeight={30}>
+            {firstName ? `\n` : ''}
+            {t`It’s time to update
+  your Face Verification!`}
+            {`\n`}
+          </Section.Text>
+        </Section.Title>
+        <Section>
+          <Section.Text textAlign="left" fontSize={18} lineHeight={25} letterSpacing={0.18}>
+            {t`Every so often, it's necessary to double-check that you're still you. You’ll go through the same verification process you went through when you first signed up for GoodDollar.`}
+          </Section.Text>
+          <Section.Text textAlign="left" fontSize={18} lineHeight={25} letterSpacing={0.18} style={styles.mainText}>
+            {t`You’ll be able to claim once this process is complete.`}
+          </Section.Text>
+        </Section>
+        <View style={styles.illustration}>
+          <Image source={BillyVerifies} resizeMode="center" style={{ width: 160, height: 160, marginLeft: 'auto' }} />
+        </View>
+        <Section.Text
+          fontWeight="bold"
+          fontSize={18}
+          lineHeight={26}
+          textDecorationLine="underline"
+          style={styles.learnMore}
+          onPress={onLearnMore}
+        >
+          {t`Learn More`}
+        </Section.Text>
+        <CustomButton style={[styles.button]} onPress={onVerify} disabled={!ready}>
+          {t`Continue`}
+        </CustomButton>
+      </View>
+    </Section>
+  </Wrapper>
+)
+
 const Intro = ({ styles, firstName, ready, onVerify, onLearnMore }) => (
   <Wrapper>
     <Section style={styles.topContainer} grow>
       <View style={styles.mainContent}>
         <Section.Title fontWeight="bold" textTransform="none" style={styles.mainTitle}>
-          {firstName && `${firstName},`}
+          {firstName ? `${firstName},` : ``}
           <Section.Text fontWeight="regular" textTransform="none" fontSize={24} lineHeight={30}>
             {firstName ? `\n` : ''}
             {t`Verify you are a real live person`}
@@ -97,7 +145,11 @@ const IntroScreen = ({ styles, screenProps, navigation }) => {
   const { fullName } = useProfile()
   const { showDialog } = useDialog()
 
-  const { isDelta, firstName, isFVFlow, isFVFlowReady } = useContext(FVFlowContext)
+  const { account: externalAccount, isDelta, firstName, isFVFlow, isFVFlowReady } = useContext(FVFlowContext)
+  const goodWallet = useWallet()
+  const { account } = goodWallet ?? {}
+  const [expiryDate, , state] = useIdentityExpiryDate(externalAccount || account)
+
   const { goToRoot, navigateTo, push } = screenProps
   const fvRedirect = useFVRedirect()
   const { faceIdentifier: enrollmentIdentifier, v1FaceIdentifier: fvSigner } = useEnrollmentIdentifier()
@@ -176,21 +228,23 @@ const IntroScreen = ({ styles, screenProps, navigation }) => {
 
   useFVLoginInfoCheck(navigation)
 
-  useEffect(() => {
-    if (isFVFlow && isFVFlowReady && !disposing && enrollmentIdentifier) {
-      handleVerifyClick()
-    }
-  }, [isFVFlow, isFVFlowReady, disposing, enrollmentIdentifier])
+  if (state === 'pending') {
+    return (
+      <View display="flex" justifyContent="center">
+        <ActivityIndicator size="large" />
+      </View>
+    )
+  }
 
-  if (isFVFlow) {
+  if (!expiryDate?.lastAuthenticated?.isZero()) {
     return (
-      <Wrapper>
-        <Section style={styles.topContainer} grow>
-          <View style={styles.mainContent}>
-            <WaitForCompleted />
-          </View>
-        </Section>
-      </Wrapper>
+      <IntroReVerification
+        styles={styles}
+        firstName={userName}
+        onLearnMore={openPrivacy}
+        onVerify={handleVerifyClick}
+        ready={false === disposing}
+      />
     )
   }
 
@@ -223,19 +277,23 @@ const getStylesFromProps = ({ theme }) => ({
   mainContent: {
     flexGrow: 1,
     justifyContent: 'space-between',
+    paddingHorizontal: '32',
     width: '100%',
   },
   mainTitle: {
     marginTop: getDesignRelativeHeight(isBrowser ? 16 : 8),
   },
   mainText: {
-    marginTop: getDesignRelativeHeight(isSmallDevice ? 12 : theme.sizes.defaultDouble),
+    marginTop: getDesignRelativeHeight(20),
   },
   illustration: {
     marginTop: getDesignRelativeHeight(20),
     marginBottom: getDesignRelativeHeight(31),
-    width: '100%',
     alignItems: 'center',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: 160,
+    height: 160,
   },
   descriptionContainer: {
     paddingHorizontal: getDesignRelativeHeight(theme.sizes.defaultHalf),

src/components/faceVerification/standalone/App.jsx

@@ -3,6 +3,8 @@ import React, { Fragment } from 'react'
 import { SafeAreaView, StyleSheet } from 'react-native'
 import { Provider as PaperProvider } from 'react-native-paper'
 import { PostHogProvider } from 'posthog-react-native'
+import { Celo, Web3Provider as GoodWeb3Provider } from '@gooddollar/web3sdk-v2'
+import { ethers } from 'ethers'
 
 import { SimpleStoreDialog } from '../../common/dialogs/CustomDialog'
 import LoadingIndicator from '../../common/view/LoadingIndicator'
@@ -30,6 +32,27 @@ const styles = StyleSheet.create({
 const App = () => {
   const AppWrapper = isMobile ? Fragment : SafeAreaView
   const wrapperProps = isMobile ? {} : { style: styles.safeAreaView }
+  const web3Provider = new ethers.providers.JsonRpcProvider('https://forno.celo.org')
+
+  let env = Config.network.split('-')[0] === 'development' ? 'fuse' : Config.network.split('-')[0]
+  if (['fuse', 'staging', 'production'].includes(env) === false) {
+    env = 'fuse'
+  }
+
+  const props = {
+    web3Provider,
+    env,
+    config: {
+      pollingInterval: 15000,
+      networks: [Celo],
+      readOnlyChainId: undefined,
+      readOnlyUrls: {
+        1: 'https://rpc.ankr.com/eth',
+        122: 'https://rpc.fuse.io',
+        42220: 'https://forno.celo.org',
+      },
+    },
+  }
 
   return (
     <PaperProvider theme={theme}>
@@ -40,13 +63,15 @@ const App = () => {
             options={{ host: Config.posthogHost, sendFeatureFlagEvent: false }}
             autocapture={false}
           >
-            <GlobalTogglesContextProvider>
-              <DialogContextProvider>
-                <SimpleStoreDialog />
-                <LoadingIndicator />
-                <AppRouter />
-              </DialogContextProvider>
-            </GlobalTogglesContextProvider>
+            <GoodWeb3Provider {...props}>
+              <GlobalTogglesContextProvider>
+                <DialogContextProvider>
+                  <SimpleStoreDialog />
+                  <LoadingIndicator />
+                  <AppRouter />
+                </DialogContextProvider>
+              </GlobalTogglesContextProvider>
+            </GoodWeb3Provider>
           </PostHogProvider>
         </Fragment>
       </AppWrapper>

yarn.lock

@@ -6618,9 +6618,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@gooddollar/good-design@npm:0.1.58-beta.a841f10d":
-  version: 0.1.58-beta.a841f10d
-  resolution: "@gooddollar/good-design@npm:0.1.58-beta.a841f10d"
+"@gooddollar/good-design@npm:0.1.58-beta.1985097e":
+  version: 0.1.58-beta.1985097e
+  resolution: "@gooddollar/good-design@npm:0.1.58-beta.1985097e"
   dependencies:
     "@babel/core": ^7.18.10
     "@babel/runtime": ^7.18.9
@@ -6664,7 +6664,7 @@ __metadata:
     react-use-promise: ^0.5.0
     react-use-wizard: ^2.3.0
     require-from-string: ^2.0.2
-  checksum: 0c1946199b02e9f8aad90243d48f92e34da0ae7f24110ea29ec573d43f187d550db5d821a8c4dda4d0d2312fa0c21569c80242a5c6647a7a33a4094a69abcc1c
+  checksum: f007fc2b78f41d6d317bbe42db71f5170aee34e9fc667502028699d49bf1dceaef9ed1e2dc71403b6aa0e0f4bf9f3e84567a2026c5a6c55cf7856e4620fd8ffb
   languageName: node
   linkType: hard
 
@@ -6723,12 +6723,12 @@ __metadata:
     "@ethersproject/wallet": ^5.7.0
     "@expo/react-native-action-sheet": ^3.9.0
     "@fingerprintjs/fingerprintjs-pro": ^3.8.1
-    "@gooddollar/good-design": 0.1.58-beta.a841f10d
+    "@gooddollar/good-design": 0.1.58-beta.1985097e
     "@gooddollar/goodcontracts": ^2.6.2
     "@gooddollar/goodprotocol": ^2.0.24
     "@gooddollar/react-native-facetec": ^1.0.45
     "@gooddollar/react-native-side-menu": ^2.0.2
-    "@gooddollar/web3sdk-v2": 0.2.32-beta.a841f10d
+    "@gooddollar/web3sdk-v2": 0.2.32-beta.1985097e
     "@hcaptcha/react-hcaptcha": ^1.6.0
     "@indexeddbshim/indexeddbshim": ^6.5.0
     "@lingui/cli": ^3.13.0
@@ -7031,9 +7031,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@gooddollar/web3sdk-v2@npm:0.2.32-beta.a841f10d":
-  version: 0.2.32-beta.a841f10d
-  resolution: "@gooddollar/web3sdk-v2@npm:0.2.32-beta.a841f10d"
+"@gooddollar/web3sdk-v2@npm:0.2.32-beta.1985097e":
+  version: 0.2.32-beta.1985097e
+  resolution: "@gooddollar/web3sdk-v2@npm:0.2.32-beta.1985097e"
   dependencies:
     "@amplitude/analytics-browser": ^1.6.4
     "@amplitude/analytics-react-native": ^0.7.0
@@ -7084,7 +7084,7 @@ __metadata:
     "@usedapp/core": "*"
     react-native: "*"
     react-native-web: "*"
-  checksum: 8cc30cc799e308efe7e99d75f78fd1dc493533f22c66a8e0d011ee4358aa859e425836cb48097922f24f13d54345856dc9fb65def536fd14271adc1df99e929e
+  checksum: 2c81c93bf970fc5909094cea5227bd24313d73110e20b6b3b6b0552e3fd36e8b9b67d675a48505cfdc6f0da7df8637728ad0ec138506141a169014c1b64df850
   languageName: node
   linkType: hard