added person credential loading screen

Signed-off-by: wadeking98 <[email protected]>

app/container-imp.ts

@@ -32,9 +32,12 @@ import { DependencyContainer } from 'tsyringe'
 import { autoDisableRemoteLoggingIntervalInMinutes } from './src/constants'
 import { expirationOverrideInMinutes } from './src/helpers/utils'
 import Developer from './src/screens/Developer'
+import PersonCredential from './src/screens/PersonCredential'
+import PersonCredentialLoading from './src/screens/PersonCredentialLoading'
 import Preface from './src/screens/Preface'
 import Terms, { TermsVersion } from './src/screens/Terms'
 import {
+  BCDispatchAction,
   BCLocalStorageKeys,
   BCState,
   DismissPersonCredentialOffer,
@@ -157,6 +160,29 @@ export class AppContainer implements Container {
     })
     this._container.registerInstance(TOKENS.UTIL_OCA_RESOLVER, resolver)
 
+    this._container.registerInstance(TOKENS.CUSTOM_NOTIFICATION, {
+      component: PersonCredential,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onCloseAction: (dispatch?: React.Dispatch<ReducerAction<any>>) => {
+        if (dispatch) {
+          dispatch({
+            type: BCDispatchAction.PERSON_CREDENTIAL_OFFER_DISMISSED,
+            payload: [{ personCredentialOfferDismissed: true }],
+          })
+        }
+      },
+      additionalStackItems: [
+        {
+          component: PersonCredentialLoading,
+          name: 'PersonCredentialLoading',
+        },
+      ],
+      pageTitle: 'PersonCredential.PageTitle',
+      title: 'PersonCredentialNotification.Title',
+      description: 'PersonCredentialNotification.Description',
+      buttonTitle: 'PersonCredentialNotification.ButtonTitle',
+    })
+
     this._container.registerInstance(TOKENS.UTIL_PROOF_TEMPLATE, useProofRequestTemplates)
     this._container.registerInstance(TOKENS.LOAD_STATE, async (dispatch: React.Dispatch<ReducerAction<unknown>>) => {
       const loadState = async <Type>(key: LocalStorageKeys | BCLocalStorageKeys, updateVal: (val: Type) => void) => {

app/package.json

@@ -61,11 +61,11 @@
     "@formatjs/intl-relativetimeformat": "9.3.1",
     "@hyperledger/anoncreds-react-native": "0.2.2",
     "@hyperledger/aries-askar-react-native": "0.2.3",
-    "@hyperledger/aries-bifold-core": "1.0.0-alpha.284",
-    "@hyperledger/aries-bifold-remote-logs": "1.0.0-alpha.284",
-    "@hyperledger/aries-bifold-verifier": "1.0.0-alpha.284",
-    "@hyperledger/aries-oca": "1.0.0-alpha.284",
-    "@hyperledger/aries-react-native-attestation": "1.0.0-alpha.284",
+    "@hyperledger/aries-bifold-core": "1.0.0-alpha.285",
+    "@hyperledger/aries-bifold-remote-logs": "1.0.0-alpha.285",
+    "@hyperledger/aries-bifold-verifier": "1.0.0-alpha.285",
+    "@hyperledger/aries-oca": "1.0.0-alpha.285",
+    "@hyperledger/aries-react-native-attestation": "1.0.0-alpha.285",
     "@hyperledger/indy-vdr-react-native": "0.2.2",
     "@hyperledger/indy-vdr-shared": "0.2.2",
     "@react-native-async-storage/async-storage": "1.15.11",

app/src/components/PersonCredentialSpinner.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from '@hyperledger/aries-bifold-core'
+import React, { useEffect, useRef } from 'react'
+import { View, StyleSheet, Animated } from 'react-native'
+
+import ActivityIndicator from '../assets/img/activity-indicator-circle.svg'
+import EmptyWallet from '../assets/img/personCredLoadingIcon.svg'
+
+const PersonCredentialSpinner: React.FC = () => {
+  const { ColorPallet } = useTheme()
+  const rotationAnim = useRef(new Animated.Value(0)).current
+  const timing: Animated.TimingAnimationConfig = {
+    toValue: 1,
+    duration: 2000,
+    useNativeDriver: true,
+  }
+  const rotation = rotationAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+  const style = StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    animation: {
+      position: 'absolute',
+      zIndex: 1,
+    },
+  })
+  const displayOptions = {
+    fill: ColorPallet.notification.infoText,
+  }
+  const animatedCircleDisplayOptions = {
+    fill: ColorPallet.notification.infoText,
+    height: 250,
+    width: 250,
+  }
+
+  useEffect(() => {
+    Animated.loop(Animated.timing(rotationAnim, timing)).start()
+  }, [rotationAnim])
+
+  return (
+    <View style={style.container}>
+      <EmptyWallet style={style.animation} {...displayOptions} />
+      <Animated.View style={{ transform: [{ rotate: rotation }] }}>
+        <ActivityIndicator {...animatedCircleDisplayOptions} />
+      </Animated.View>
+    </View>
+  )
+}
+
+export default PersonCredentialSpinner

app/src/index.ts

@@ -6,7 +6,6 @@ import {
   Agent,
 } from '@hyperledger/aries-bifold-core'
 import merge from 'lodash.merge'
-import { ReducerAction } from 'react'
 import { Config } from 'react-native-config'
 
 import AddCredentialButton from './components/AddCredentialButton'
@@ -23,11 +22,9 @@ import fr from './localization/fr'
 import ptBr from './localization/pt-br'
 import Developer from './screens/Developer'
 import { pages } from './screens/OnboardingPages'
-import PersonCredential from './screens/PersonCredential'
 import Preface from './screens/Preface'
 import Splash from './screens/Splash'
 import Terms from './screens/Terms'
-import { BCDispatchAction } from './store'
 import { defaultTheme as theme } from './theme'
 
 const localization = merge({}, translationResources, {
@@ -50,22 +47,6 @@ const configuration: ConfigurationContext = {
   proofTemplateBaseUrl: Config.PROOF_TEMPLATE_URL,
   record: Record,
   settings: [],
-  customNotification: {
-    component: PersonCredential,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onCloseAction: (dispatch?: React.Dispatch<ReducerAction<any>>) => {
-      if (dispatch) {
-        dispatch({
-          type: BCDispatchAction.PERSON_CREDENTIAL_OFFER_DISMISSED,
-          payload: [{ personCredentialOfferDismissed: true }],
-        })
-      }
-    },
-    pageTitle: 'PersonCredential.PageTitle',
-    title: 'PersonCredentialNotification.Title',
-    description: 'PersonCredentialNotification.Description',
-    buttonTitle: 'PersonCredentialNotification.ButtonTitle',
-  },
   enableTours: true,
   showPreface: true,
   disableOnboardingSkip: true,