@bifold/core 2.0.1 → 2.1.0

package/src/modules/openid/screens/OpenIDProofPresentation.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { DeviceEventEmitter } from 'react-native'
 import { useAgent } from '@credo-ts/react-hooks'
 import { useTranslation } from 'react-i18next'
@@ -31,6 +31,20 @@ import { isSdJwtProofRequest, isW3CProofRequest } from '../utils/utils'
 
 type OpenIDProofPresentationProps = StackScreenProps<DeliveryStackParams, Screens.OpenIDProofPresentation>
 
+type SatisfiedCredentialsFormat = {
+  [inputDescriptorId: string]: {
+    id: string
+    claimFormat: string
+  }[]
+}
+
+type SelectedCredentialsFormat = {
+  [inputDescriptorId: string]: {
+    id: string
+    claimFormat: string
+  }
+}
+
 const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
   navigation,
   route: {
@@ -43,6 +57,9 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
   const [credentialsRequested, setCredentialsRequested] = useState<
     Array<W3cCredentialRecord | SdJwtVcRecord | MdocRecord>
   >([])
+  const [satistfiedCredentialsSubmission, setSatistfiedCredentialsSubmission] = useState<SatisfiedCredentialsFormat>()
+  const [selectedCredentialsSubmission, setSelectedCredentialsSubmission] = useState<SelectedCredentialsFormat>()
+
   const { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
 
   const { ColorPallet, ListItems, TextTheme } = useTheme()
@@ -104,53 +121,61 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
     [credential]
   )
 
-  const selectedCredentials:
-    | {
-        [inputDescriptorId: string]: {
-          id: string
-          claimFormat: string
-        }
-      }
-    | undefined = useMemo(
-    () =>
-      submission?.entries.reduce((acc, entry) => {
-        if (entry.isSatisfied) {
-          //TODO: Support multiplae credentials
-          return {
-            ...acc,
-            [entry.inputDescriptorId]: {
-              id: entry.credentials[0].id,
-              claimFormat: entry.credentials[0].claimFormat,
-            },
-          }
-        }
-        return acc
-      }, {}),
-    [submission]
-  )
+  //This should run only once when the screen is mounted
+  useEffect(() => {
+    if (!submission) return
+    const creds = submission.entries.reduce((acc: SatisfiedCredentialsFormat, entry) => {
+      acc[entry.inputDescriptorId] = entry.credentials.map((cred) => ({
+        id: cred.id,
+        claimFormat: cred.claimFormat,
+      }))
+      return acc
+    }, {})
+    setSatistfiedCredentialsSubmission(creds)
+  }, [submission])
 
+  //Fetch all credentials satisfying the proof
   useEffect(() => {
     async function fetchCreds() {
-      if (!selectedCredentials) return
+      if (!satistfiedCredentialsSubmission || satistfiedCredentialsSubmission.entries) return
 
       const creds: Array<W3cCredentialRecord | SdJwtVcRecord | MdocRecord> = []
 
-      for (const [inputDescriptorID, { id, claimFormat }] of Object.entries(selectedCredentials)) {
-        let credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord | undefined
-        if (isW3CProofRequest(claimFormat)) {
-          credential = await getW3CCredentialById(id)
-        } else if (isSdJwtProofRequest(claimFormat)) {
-          credential = await getSdJwtCredentialById(id)
-        }
+      for (const [inputDescriptorID, credIDs] of Object.entries(satistfiedCredentialsSubmission)) {
+        for (const { id, claimFormat } of credIDs) {
+          let credential: W3cCredentialRecord | SdJwtVcRecord | MdocRecord | undefined
+          if (isW3CProofRequest(claimFormat)) {
+            credential = await getW3CCredentialById(id)
+          } else if (isSdJwtProofRequest(claimFormat)) {
+            credential = await getSdJwtCredentialById(id)
+          }
 
-        if (credential && inputDescriptorID) {
-          creds.push(credential)
+          if (credential && inputDescriptorID) {
+            creds.push(credential)
+          }
         }
       }
       setCredentialsRequested(creds)
     }
     fetchCreds()
-  }, [selectedCredentials, getW3CCredentialById, getSdJwtCredentialById])
+  }, [satistfiedCredentialsSubmission, getW3CCredentialById, getSdJwtCredentialById])
+
+  //Once satisfied credentials are set and all credentials fetched, we select the first one of each submission to display on screen
+  useEffect(() => {
+    if (!satistfiedCredentialsSubmission || credentialsRequested?.length <= 0) return
+
+    const creds = Object.entries(satistfiedCredentialsSubmission).reduce(
+      (acc: SelectedCredentialsFormat, [inputDescriptorId, credentials]) => {
+        acc[inputDescriptorId] = {
+          id: credentials[0].id,
+          claimFormat: credentials[0].claimFormat,
+        }
+        return acc
+      },
+      {}
+    )
+    setSelectedCredentialsSubmission(creds)
+  }, [satistfiedCredentialsSubmission, credentialsRequested])
 
   const { verifierName } = useMemo(() => {
     return { verifierName: credential?.verifierHostName }
@@ -158,16 +183,15 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
 
   const handleAcceptTouched = async () => {
     try {
-      if (!agent || !credential.credentialsForRequest || !selectedCredentials) {
+      if (!agent || !credential.credentialsForRequest || !selectedCredentialsSubmission) {
         return
       }
       await shareProof({
         agent,
         authorizationRequest: credential.authorizationRequest,
         credentialsForRequest: credential.credentialsForRequest,
-        selectedCredentials,
+        selectedCredentials: selectedCredentialsSubmission,
       })
-
       setAcceptModalVisible(true)
     } catch (err: unknown) {
       setButtonsVisible(true)
@@ -185,6 +209,47 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
     navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
   }
 
+  // Re-construct the selected credentials object based on user alt credential
+  const onCredChange = ({
+    inputDescriptorID,
+    id,
+    claimFormat,
+  }: {
+    inputDescriptorID: string
+    id: string
+    claimFormat: string
+  }) => {
+    setSelectedCredentialsSubmission((prev) => ({
+      ...prev,
+      [inputDescriptorID]: {
+        id,
+        claimFormat,
+      },
+    }))
+  }
+
+  const handleAltCredChange = useCallback(
+    (inputDescriptorID: string, selectedCredID: string, inputDescriptor: string) => {
+      const submittionEntries = submission?.entries.find((entry) => entry.inputDescriptorId === inputDescriptor)
+      const credsForEntry = submittionEntries?.credentials
+
+      if (!credsForEntry) return
+
+      navigation.navigate(Screens.OpenIDProofCredentialSelect, {
+        inputDescriptorID: inputDescriptorID,
+        selectedCredID: selectedCredID,
+        altCredIDs: credsForEntry.map((cred) => {
+          return {
+            id: cred.id,
+            claimFormat: cred.claimFormat,
+          }
+        }),
+        onCredChange: onCredChange,
+      })
+    },
+    [submission, navigation]
+  )
+
   const renderHeader = () => {
     return (
       <View style={styles.headerTextContainer}>
@@ -200,8 +265,6 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
   const renderCard = (
     sub: FormattedSubmissionEntry,
     selectedCredential: FormattedSelectedCredentialEntry,
-    //TODO: Support multiplae credentials
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     hasMultipleCreds: boolean
   ) => {
     const credential = credentialsRequested.find((c) => c.id === selectedCredential.id)
@@ -209,33 +272,38 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
       return null
     }
     const credentialDisplay = getCredentialForDisplay(credential)
-    const fields = buildFieldsFromW3cCredsCredential(credentialDisplay)
     const requestedAttributes = selectedCredential.requestedAttributes
-    const fieldsMapped = fields.filter((field) => requestedAttributes?.includes(field.name))
+    const fields = buildFieldsFromW3cCredsCredential(credentialDisplay, requestedAttributes)
     return (
       <CredentialCard
         credential={credential}
-        displayItems={fieldsMapped as Attribute[]}
-        //TODO: Support multiplae credentials
-        // hasAltCredentials={hasMultipleCreds}
-        // handleAltCredChange={selectAltCredentail}
+        displayItems={fields as Attribute[]}
+        hasAltCredentials={hasMultipleCreds}
+        handleAltCredChange={() => {
+          handleAltCredChange(sub.inputDescriptorId, selectedCredential.id, sub.inputDescriptorId)
+        }}
       />
     )
   }
 
   const renderBody = () => {
-    if (!submission) return null
+    if (!selectedCredentialsSubmission || !submission) return null
 
     return (
       <View style={styles.credentialsList}>
-        {submission.entries.map((s, i) => {
+        {Object.entries(selectedCredentialsSubmission).map(([inputDescriptorId, credentialSimplified], i) => {
           //TODO: Support multiplae credentials
-          const selectedCredential = s.credentials[0]
 
           const globalSubmissionName = submission.name
           const globalSubmissionPurpose = submission.purpose
-          const submissionName = s.name
-          const submissionPurpose = s.purpose
+          const correspondingSubmission = submission.entries?.find((s) => s.inputDescriptorId === inputDescriptorId)
+          const submissionName = correspondingSubmission?.name
+          const submissionPurpose = correspondingSubmission?.purpose
+          const isSatisfied = correspondingSubmission?.isSatisfied
+          const credentialSubmittion = correspondingSubmission?.credentials.find(
+            (s) => s.id === credentialSimplified.id
+          )
+          const requestedAttributes = credentialSubmittion?.requestedAttributes
 
           const name = submissionName || globalSubmissionName || undefined
           const purpose = submissionPurpose || globalSubmissionPurpose || undefined
@@ -246,12 +314,16 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
                 <View style={styles.cardGroupContainer}>
                   {name && purpose && (
                     <View style={styles.cardGroupHeader}>
-                      <Text style={TextTheme.labelSubtitle}>{name}</Text>
-                      <Text style={TextTheme.labelSubtitle}>{purpose}</Text>
+                      <Text style={TextTheme.bold}>{name}</Text>
+                      <Text style={TextTheme.labelTitle}>{purpose}</Text>
                     </View>
                   )}
-                  {s.isSatisfied && selectedCredential?.requestedAttributes ? (
-                    renderCard(s, selectedCredential, s.credentials.length > 1)
+                  {isSatisfied && requestedAttributes ? (
+                    renderCard(
+                      correspondingSubmission,
+                      credentialSubmittion,
+                      correspondingSubmission.credentials.length > 1
+                    )
                   ) : (
                     <Text style={TextTheme.normal}>{t('ProofRequest.CredentialNotInWallet')}</Text>
                   )}
@@ -295,14 +367,14 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
           backgroundColor: ColorPallet.brand.secondaryBackground,
         }}
       >
-        {selectedCredentials && Object.keys(selectedCredentials).length > 0 ? (
+        {selectedCredentialsSubmission && Object.keys(selectedCredentialsSubmission).length > 0 ? (
           <>
             {footerButton(
-              t('Global.Accept'),
+              t('Global.Send'),
               handleAcceptTouched,
               ButtonType.Primary,
               testIdWithKey('AcceptCredentialOffer'),
-              t('Global.Accept')
+              t('Global.Send')
             )}
             {footerButton(
               t('Global.Decline'),

package/src/modules/openid/types.tsx

@@ -86,6 +86,7 @@ export interface W3cCredentialDisplay {
   claimFormat: ClaimFormat
   validUntil: Date | undefined
   validFrom: Date | undefined
+  credentialSubject: CredentialSubjectRecord | undefined
 }
 
 export interface OpenId4VPRequestRecord extends OpenId4VcSiopResolvedAuthorizationRequest {
@@ -96,6 +97,13 @@ export interface OpenId4VPRequestRecord extends OpenId4VcSiopResolvedAuthorizati
   type: string
 }
 
+interface DisplayInfo {
+  name: string
+  locale?: string
+}
+
+export type CredentialSubjectRecord = Record<string, { display: DisplayInfo[] }>
+
 export enum OpenIDCredentialType {
   W3cCredential,
   SdJwtVc,

package/src/modules/openid/utils/utils.tsx

@@ -1,6 +1,5 @@
 import { getDomainFromUrl } from '@credo-ts/core'
 import { Attribute, Field } from '@bifold/oca/build/legacy'
-import { W3cCredentialDisplay } from '../types'
 
 /**
  * Converts a camelCase string to a sentence format (first letter capitalized, rest in lower case).
@@ -53,19 +52,6 @@ export function formatDate(input: string | Date): string {
   })
 }
 
-export const getAttributeField = (display: W3cCredentialDisplay, searchKey: string): Attribute | undefined => {
-  for (const [key, value] of Object.entries(display.attributes)) {
-    if (searchKey === key) {
-      return new Attribute({
-        name: key,
-        value: value as string | number | null,
-        mimeType: typeof value === 'number' ? 'text/number' : 'text/plain',
-      })
-    }
-  }
-  return undefined
-}
-
 /**
  * Mostly used for mdoc crednetials
  */

package/src/navigators/DeliveryStack.tsx

@@ -13,6 +13,7 @@ import { useDefaultStackOptions } from './defaultStackOptions'
 import OpenIDProofPresentation from '../modules/openid/screens/OpenIDProofPresentation'
 import { TOKENS, useServices } from '../container-api'
 import OpenIDCredentialOffer from '../modules/openid/screens/OpenIDCredentialOffer'
+import OpenIDProofCredentialSelect from '../modules/openid/screens/OpenIDProofChangeCredential'
 
 const DeliveryStack: React.FC = () => {
   const Stack = createStackNavigator<DeliveryStackParams>()
@@ -67,6 +68,14 @@ const DeliveryStack: React.FC = () => {
           ...ScreenOptionsDictionary[Screens.OpenIDProofPresentation],
         }}
       />
+      <Stack.Screen
+        name={Screens.OpenIDProofCredentialSelect}
+        component={OpenIDProofCredentialSelect}
+        options={{
+          title: t('Screens.ProofRequest'),
+          ...ScreenOptionsDictionary[Screens.OpenIDProofCredentialSelect],
+        }}
+      />
     </Stack.Navigator>
   )
 }

package/src/navigators/OnboardingScreens.ts

@@ -20,7 +20,6 @@ interface ScreenComponents {
   NameWallet: React.FC<StackScreenProps<ParamListBase>>
   Biometry: React.FC<StackScreenProps<ParamListBase>>
   PushNotifications: React.FC<StackScreenProps<ParamListBase>>
-  Developer: React.FC<StackScreenProps<ParamListBase>>
   AttemptLockout: React.FC<StackScreenProps<ParamListBase>>
   OnboardingScreen: React.FC
   CreatePINScreen: React.FC
@@ -119,15 +118,6 @@ export const getOnboardingScreens = (
       ...ScreenOptionsDictionary[Screens.PushNotifications],
     }),
   },
-  {
-    name: Screens.Developer,
-    component: components.Developer,
-    options: () => ({
-      title: t('Screens.Developer'),
-      headerBackAccessibilityLabel: t('Global.Back'),
-      ...ScreenOptionsDictionary[Screens.Developer],
-    }),
-  },
   {
     name: Screens.EnterPIN,
     children: components.EnterPINScreen,

package/src/navigators/OnboardingStack.tsx

@@ -2,7 +2,7 @@
 import { Agent } from '@credo-ts/core'
 import { StackActions, useNavigation, useNavigationState } from '@react-navigation/native'
 import { StackNavigationProp, createStackNavigator } from '@react-navigation/stack'
-import React, { useMemo, useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DeviceEventEmitter } from 'react-native'
 
@@ -18,10 +18,10 @@ import { createCarouselStyle } from '../screens/OnboardingPages'
 import PINCreate from '../screens/PINCreate'
 import PINEnter from '../screens/PINEnter'
 import PushNotifications from '../screens/PushNotifications'
+import { Config } from '../types/config'
 import { OnboardingStackParams } from '../types/navigators'
 import { WalletSecret } from '../types/security'
 import { State } from '../types/state'
-import { Config } from '../types/config'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
 import { getOnboardingScreens } from './OnboardingScreens'
@@ -44,7 +44,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
     pages,
     Biometry,
     Onboarding,
-    Developer,
     { screen: Terms, version: termsVersion },
     onTutorialCompletedCurried,
     ScreenOptionsDictionary,
@@ -58,7 +57,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
     TOKENS.SCREEN_ONBOARDING_PAGES,
     TOKENS.SCREEN_BIOMETRY,
     TOKENS.SCREEN_ONBOARDING,
-    TOKENS.SCREEN_DEVELOPER,
     TOKENS.SCREEN_TERMS,
     TOKENS.FN_ONBOARDING_DONE,
     TOKENS.OBJECT_SCREEN_CONFIG,
@@ -172,7 +170,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
         NameWallet,
         Biometry,
         PushNotifications,
-        Developer,
         AttemptLockout,
         OnboardingScreen,
         CreatePINScreen,
@@ -181,7 +178,6 @@ const OnboardingStack: React.FC<OnboardingStackProps> = ({ initializeAgent, agen
     [
       SplashScreen,
       CreatePINScreen,
-      Developer,
       EnterPINScreen,
       OnboardingScreen,
       Preface,

package/src/navigators/RootStack.tsx

@@ -45,7 +45,7 @@ const RootStack: React.FC = () => {
   useEffect(() => {
     // Load state only if it hasn't been loaded yet
     if (store.stateLoaded) return
-    
+
     loadState(dispatch).catch((err: unknown) => {
       const error = new BifoldError(t('Error.Title1044'), t('Error.Message1044'), (err as Error).message, 1001)
 

package/src/navigators/TabStack.tsx

@@ -61,7 +61,7 @@ const TabStack: React.FC = () => {
   const { t } = useTranslation()
   const Tab = createBottomTabNavigator<TabStackParams>()
   const { assertNetworkConnected } = useNetwork()
-  const { ColorPallet, TabTheme, TextTheme, Assets } = useTheme()
+  const { ColorPallet, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
   const [orientation, setOrientation] = useState(OrientationType.PORTRAIT)
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
@@ -133,7 +133,7 @@ const TabStack: React.FC = () => {
   }, [store.deepLink, agent, store.authentication.didAuthenticate, handleDeepLink])
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: ColorPallet.brand.primary }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: NavigationTheme.colors.primary }} edges={['left', 'right', 'top']}>
       <Tab.Navigator
         initialRouteName={TabStacks.HomeStack}
         screenOptions={{
@@ -296,6 +296,7 @@ const TabStack: React.FC = () => {
           }}
         />
       </Tab.Navigator>
+      <SafeAreaView style={{ backgroundColor: TabTheme.tabBarSecondaryBackgroundColor }} edges={['bottom']} />
     </SafeAreaView>
   )
 }

package/src/navigators/defaultStackOptions.tsx

@@ -62,6 +62,7 @@ export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
   },
   [Screens.OpenIDProofPresentation]: {
     headerShown: true,
+    headerRight: () => false,
   },
 }
 

package/src/screens/Biometry.tsx

@@ -34,10 +34,7 @@ const Biometry: React.FC = () => {
   }, [])
 
   return (
-    <BiometryControl 
-      biometryEnabled={biometryEnabled} 
-      onBiometryToggle={handleBiometryToggle}
-    >
+    <BiometryControl biometryEnabled={biometryEnabled} onBiometryToggle={handleBiometryToggle}>
       <View style={{ marginTop: 'auto', margin: 20 }}>
         <Button
           title={t('Global.Continue')}

package/src/screens/NameWallet.tsx

@@ -88,12 +88,12 @@ const NameWallet: React.FC = () => {
         type: DispatchAction.UPDATE_WALLET_NAME,
         payload: [walletName],
       })
+      dispatch({ type: DispatchAction.DID_NAME_WALLET })
 
       if (agent) {
         agent.config.label = walletName
+        navigation.goBack()
       }
-
-      dispatch({ type: DispatchAction.DID_NAME_WALLET })
     }
   }
 

package/src/screens/OnboardingPages.tsx

@@ -1,23 +1,18 @@
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useRef } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View, TouchableWithoutFeedback } from 'react-native'
+import { ScrollView, StyleSheet, View } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 
 import CredentialList from '../assets/img/credential-list.svg'
 import ScanShare from '../assets/img/scan-share.svg'
 import Button, { ButtonType } from '../components/buttons/Button'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
 import { GenericFn } from '../types/fn'
-import { OnboardingStackParams, Screens } from '../types/navigators'
 import { testIdWithKey } from '../utils/testable'
 
 import { useTheme } from '../contexts/theme'
 
-import { OnboardingStyleSheet } from './Onboarding'
 import { ThemedText } from '../components/texts/ThemedText'
+import { OnboardingStyleSheet } from './Onboarding'
 
 export const createCarouselStyle = (OnboardingTheme: any) => {
   return StyleSheet.create<OnboardingStyleSheet>({
@@ -136,32 +131,17 @@ const guides: Array<{ image: React.FC<SvgProps>; title: string; body: string; de
   },
 ]
 
-export const createPageWith = (
-  PageImage: React.FC<SvgProps>,
-  title: string,
-  body: string,
-  OnboardingTheme: any,
-  devModeListener?: boolean,
-  onDevModeTouched?: () => void
-) => {
+export const createPageWith = (PageImage: React.FC<SvgProps>, title: string, body: string, OnboardingTheme: any) => {
   const styles = createStyles(OnboardingTheme)
   const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
-  const titleElement = (
-    <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-      {title}
-    </ThemedText>
-  )
+
   return (
     <ScrollView style={{ padding: 20 }}>
       <View style={{ alignItems: 'center' }}>{<PageImage style={imageDisplayOptions} />}</View>
       <View style={{ marginBottom: 20 }}>
-        {devModeListener ? (
-          <TouchableWithoutFeedback testID={testIdWithKey('DeveloperModeTouch')} onPress={onDevModeTouched}>
-            {titleElement}
-          </TouchableWithoutFeedback>
-        ) : (
-          titleElement
-        )}
+        <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+          {title}
+        </ThemedText>
         <ThemedText style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
           {body}
         </ThemedText>
@@ -171,40 +151,8 @@ export const createPageWith = (
 }
 
 const OnboardingPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any): Array<Element> => {
-  const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
-  const [, dispatch] = useStore()
-  const onDevModeEnabled = () => {
-    dispatch({
-      type: DispatchAction.ENABLE_DEVELOPER_MODE,
-      payload: [true],
-    })
-    navigation.getParent()?.navigate(Screens.Developer)
-  }
-  const developerOptionCount = useRef(0)
-  const touchCountToEnableBiometrics = 9
-
-  const incrementDeveloperMenuCounter = () => {
-    if (developerOptionCount.current >= touchCountToEnableBiometrics) {
-      developerOptionCount.current = 0
-      if (onDevModeEnabled) {
-        onDevModeEnabled()
-      }
-      return
-    }
-
-    developerOptionCount.current = developerOptionCount.current + 1
-  }
   return [
-    ...guides.map((g) =>
-      createPageWith(
-        g.image,
-        g.title,
-        g.body,
-        OnboardingTheme,
-        g.devModeListener,
-        g.devModeListener ? incrementDeveloperMenuCounter : undefined
-      )
-    ),
+    ...guides.map((g) => createPageWith(g.image, g.title, g.body, OnboardingTheme)),
     CustomPages(onTutorialCompleted, OnboardingTheme),
   ]
 }