@bifold/core 1.0.0 → 2.0.1

package/src/container-impl.ts

@@ -1,57 +1,59 @@
-import { Agent } from '@credo-ts/core'
-import { getProofRequestTemplates } from '@bifold/verifier'
 import { DefaultOCABundleResolver } from '@bifold/oca/build/legacy'
+import { getProofRequestTemplates } from '@bifold/verifier'
+import { Agent } from '@credo-ts/core'
 import { createContext, useContext } from 'react'
 import { DependencyContainer } from 'tsyringe'
 
 import * as bundle from './assets/oca-bundles.json'
 import Button from './components/buttons/Button'
+import ContactCredentialListItem from './components/listItems/ContactCredentialListItem'
+import ContactListItem from './components/listItems/ContactListItem'
+import NotificationListItem from './components/listItems/NotificationListItem'
+import ConnectionAlert from './components/misc/ConnectionAlert'
+import EmptyList from './components/misc/EmptyList'
+import NoNewUpdates from './components/misc/NoNewUpdates'
+import PINHeader from './components/misc/PINHeader'
+import Record from './components/record/Record'
+import HomeFooterView from './components/views/HomeFooterView'
+import HomeHeaderView from './components/views/HomeHeaderView'
 import defaultIndyLedgers from './configs/ledgers/indy'
 import { LocalStorageKeys, PINRules } from './constants'
-import { TOKENS, Container, TokenMapping } from './container-api'
+import { Container, TokenMapping, TOKENS } from './container-api'
 import { DispatchAction, ReducerAction } from './contexts/reducers/store'
 import { defaultState } from './contexts/store'
 import { useNotifications } from './hooks/notifications'
+import useBifoldAgentSetup from './hooks/useBifoldAgentSetup'
+import { Locales } from './localization'
 import { IHistoryManager } from './modules/history'
 import HistoryManager from './modules/history/context/historyManager'
 import OnboardingStack from './navigators/OnboardingStack'
+import { DefaultScreenLayoutOptions } from './navigators/defaultLayoutOptions'
 import { DefaultScreenOptionsDictionary } from './navigators/defaultStackOptions'
+import { generateOnboardingWorkflowSteps } from './onboarding'
+import Biometry from './screens/Biometry'
 import Developer from './screens/Developer'
 import Onboarding from './screens/Onboarding'
+import OnboardingPages from './screens/OnboardingPages'
+import PINExplainer from './screens/PINExplainer'
 import Preface from './screens/Preface'
+import Scan from './screens/Scan'
 import Splash from './screens/Splash'
-import UpdateAvailable from './screens/UpdateAvailable'
 import ScreenTerms, { TermsVersion } from './screens/Terms'
+import ToggleBiometry from './screens/ToggleBiometry'
+import UpdateAvailable from './screens/UpdateAvailable'
 import { loadLoginAttempt } from './services/keychain'
 import { BifoldLogger } from './services/logger'
+import { PersistentStorage } from './services/storage'
+import { Config, HistoryEventsLoggerConfig } from './types/config'
+import { InlineErrorPosition } from './types/error'
 import {
   Migration as MigrationState,
+  PersistentState,
   Preferences as PreferencesState,
   State,
   Onboarding as StoreOnboardingState,
   Tours as ToursState,
-  PersistentState,
 } from './types/state'
-import OnboardingPages from './screens/OnboardingPages'
-import UseBiometry from './screens/UseBiometry'
-import Scan from './screens/Scan'
-import PINExplainer from './screens/PINExplainer'
-import HomeHeaderView from './components/views/HomeHeaderView'
-import HomeFooterView from './components/views/HomeFooterView'
-import EmptyList from './components/misc/EmptyList'
-import Record from './components/record/Record'
-import NotificationListItem from './components/listItems/NotificationListItem'
-import NoNewUpdates from './components/misc/NoNewUpdates'
-import PINCreateHeader from './components/misc/PINCreateHeader'
-import { PersistentStorage } from './services/storage'
-import { Config, HistoryEventsLoggerConfig } from './types/config'
-import { Locales } from './localization'
-import ContactListItem from './components/listItems/ContactListItem'
-import ContactCredentialListItem from './components/listItems/ContactCredentialListItem'
-import { InlineErrorPosition } from './types/error'
-import { DefaultScreenLayoutOptions } from './navigators/defaultLayoutOptions'
-import ConnectionAlert from './components/misc/ConnectionAlert'
-import { generateOnboardingWorkflowSteps } from './onboarding'
 
 export const defaultConfig: Config = {
   PINSecurity: {
@@ -119,12 +121,14 @@ export class MainContainer implements Container {
     this._container.registerInstance(TOKENS.SCREEN_SPLASH, Splash)
     this._container.registerInstance(TOKENS.SCREEN_UPDATE_AVAILABLE, UpdateAvailable)
     this._container.registerInstance(TOKENS.SCREEN_ONBOARDING_PAGES, OnboardingPages)
-    this._container.registerInstance(TOKENS.COMPONENT_PIN_CREATE_HEADER, PINCreateHeader)
-    this._container.registerInstance(TOKENS.SCREEN_USE_BIOMETRY, UseBiometry)
+    this._container.registerInstance(TOKENS.COMPONENT_PIN_HEADER, PINHeader)
+    this._container.registerInstance(TOKENS.SCREEN_BIOMETRY, Biometry)
+    this._container.registerInstance(TOKENS.SCREEN_TOGGLE_BIOMETRY, ToggleBiometry)
     this._container.registerInstance(TOKENS.SCREEN_SCAN, Scan)
     this._container.registerInstance(TOKENS.SCREEN_ONBOARDING_ITEM, Onboarding)
     this._container.registerInstance(TOKENS.SCREEN_ONBOARDING, Onboarding)
     this._container.registerInstance(TOKENS.SCREEN_PIN_EXPLAINER, PINExplainer)
+    this._container.registerInstance(TOKENS.HOOK_USE_AGENT_SETUP, useBifoldAgentSetup)
     this._container.registerInstance(TOKENS.STACK_ONBOARDING, OnboardingStack)
     this._container.registerInstance(TOKENS.COMP_BUTTON, Button)
     this._container.registerInstance(TOKENS.GROUP_BY_REFERENT, false)

package/src/contexts/activity.tsx

@@ -10,11 +10,10 @@ import React, {
   useState,
 } from 'react'
 import { AppState, AppStateStatus, PanResponder, View } from 'react-native'
+import { defaultAutoLockTime } from '../constants'
+import { TOKENS, useServices } from '../container-api'
 import { useAuth } from './auth'
 import { useStore } from './store'
-import { DispatchAction } from './reducers/store'
-import { TOKENS, useServices } from '../container-api'
-import { defaultAutoLockTime } from '../constants'
 
 // number of minutes before the timeout action is triggered
 // a value of 0 will never trigger the lock out action and
@@ -34,38 +33,18 @@ export const ActivityContext = createContext<ActivityContext>(null as unknown as
 
 export const ActivityProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [logger] = useServices([TOKENS.UTIL_LOGGER])
-  const [store, dispatch] = useStore()
+  const [store] = useStore()
   const { agent } = useAgent()
-  const { removeSavedWalletSecret } = useAuth()
+  const { lockOutUser } = useAuth()
   const lastActiveTimeRef = useRef<number | undefined>(undefined)
   const timeoutInMilliseconds = useRef<number>((store.preferences.autoLockTime ?? defaultAutoLockTime) * 60000)
   const inactivityTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const prevAppStateStatusRef = useRef(AppState.currentState)
   const [appStateStatus, setAppStateStatus] = useState<AppStateStatus>(AppState.currentState)
 
-  const lockOutUser = useCallback(async () => {
-    if (!store.authentication.didAuthenticate) {
-      return
-    }
-
-    try {
-      removeSavedWalletSecret()
-      await agent?.shutdown()
-      logger.info('Agent shutdown successfully')
-    } catch (error) {
-      logger.error(`Error during agent shutdown: ${error}`)
-    }
-
-    dispatch({
-      type: DispatchAction.DID_AUTHENTICATE,
-      payload: [false],
-    })
-
-    dispatch({
-      type: DispatchAction.LOCKOUT_UPDATED,
-      payload: [{ displayNotification: true }],
-    })
-  }, [agent, removeSavedWalletSecret, dispatch, logger, store.authentication.didAuthenticate])
+  if (!agent) {
+    throw new Error('ActivityProvider must be used within agent context provider')
+  }
 
   const clearInactivityTimeoutIfExists = useCallback(() => {
     if (inactivityTimeoutRef.current) {
@@ -74,7 +53,7 @@ export const ActivityProvider: React.FC<PropsWithChildren> = ({ children }) => {
   }, [])
 
   const resetInactivityTimeout = useCallback(
-    async (milliseconds: number) => {
+    (milliseconds: number) => {
       clearInactivityTimeoutIfExists()
       lastActiveTimeRef.current = Date.now()
 
@@ -94,15 +73,11 @@ export const ActivityProvider: React.FC<PropsWithChildren> = ({ children }) => {
       if (['active', 'inactive'].includes(prevAppStateStatusRef.current) && nextAppState === 'background') {
         // remove timeout when backgrounded as timeout refs can be lost when app is backgrounded
         clearInactivityTimeoutIfExists()
-
-        // if going to background after agent initialization, stop message pickup
-        if (agent?.isInitialized) {
-          try {
-            await agent.mediationRecipient.stopMessagePickup()
-            logger.info('Stopped agent message pickup')
-          } catch (err) {
-            logger.error(`Error stopping agent message pickup, ${err}`)
-          }
+        try {
+          await agent.mediationRecipient.stopMessagePickup()
+          logger.info('Stopped agent message pickup')
+        } catch (err) {
+          logger.error(`Error stopping agent message pickup, ${err}`)
         }
       }
 
@@ -114,9 +89,9 @@ export const ActivityProvider: React.FC<PropsWithChildren> = ({ children }) => {
           Date.now() - lastActiveTimeRef.current >= timeoutInMilliseconds.current &&
           timeoutInMilliseconds.current > 0
         ) {
-          await lockOutUser()
-        } else if (agent?.isInitialized) {
-          // otherwise if agent is initialized, restart message pickup
+          lockOutUser()
+        } else {
+          // otherwise restart message pickup
           try {
             await agent.mediationRecipient.initiateMessagePickup()
             logger.info('Restarted agent message pickup')
@@ -126,7 +101,7 @@ export const ActivityProvider: React.FC<PropsWithChildren> = ({ children }) => {
         }
 
         // app coming into the foreground is 'user activity', reset timeout
-        await resetInactivityTimeout(timeoutInMilliseconds.current)
+        resetInactivityTimeout(timeoutInMilliseconds.current)
       }
 
       prevAppStateStatusRef.current = nextAppState

package/src/contexts/auth.tsx

@@ -4,8 +4,7 @@ import '@hyperledger/aries-askar-react-native'
 import 'reflect-metadata'
 
 import { AskarWallet } from '@credo-ts/askar'
-import { ConsoleLogger, LogLevel, SigningProviderRegistry } from '@credo-ts/core'
-import { useAgent } from '@credo-ts/react-hooks'
+import { Agent, ConsoleLogger, LogLevel, SigningProviderRegistry } from '@credo-ts/core'
 import { agentDependencies } from '@credo-ts/react-native'
 import React, { createContext, useCallback, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -25,6 +24,7 @@ import { hashPIN } from '../utils/crypto'
 import { migrateToAskar } from '../utils/migration'
 
 export interface AuthContext {
+  lockOutUser: () => void
   checkWalletPIN: (PIN: string) => Promise<boolean>
   getWalletSecret: () => Promise<WalletSecret | undefined>
   walletSecret?: WalletSecret
@@ -33,7 +33,7 @@ export interface AuthContext {
   setPIN: (PIN: string) => Promise<void>
   commitWalletToKeychain: (useBiometry: boolean) => Promise<boolean>
   isBiometricsActive: () => Promise<boolean>
-  rekeyWallet: (oldPin: string, newPin: string, useBiometry?: boolean) => Promise<boolean>
+  rekeyWallet: (agent: Agent, oldPin: string, newPin: string, useBiometry?: boolean) => Promise<boolean>
 }
 
 export const AuthContext = createContext<AuthContext>(null as unknown as AuthContext)
@@ -41,7 +41,6 @@ export const AuthContext = createContext<AuthContext>(null as unknown as AuthCon
 export const AuthProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [walletSecret, setWalletSecret] = useState<WalletSecret>()
   const [store, dispatch] = useStore()
-  const { agent } = useAgent()
   const { t } = useTranslation()
 
   const setPIN = useCallback(async (PIN: string): Promise<void> => {
@@ -130,12 +129,24 @@ export const AuthProvider: React.FC<React.PropsWithChildren> = ({ children }) =>
     setWalletSecret(undefined)
   }, [])
 
+  const lockOutUser = useCallback(() => {
+    removeSavedWalletSecret()
+    dispatch({
+      type: DispatchAction.DID_AUTHENTICATE,
+      payload: [false],
+    })
+    dispatch({
+      type: DispatchAction.LOCKOUT_UPDATED,
+      payload: [{ displayNotification: true }],
+    })
+  }, [removeSavedWalletSecret, dispatch])
+
   const disableBiometrics = useCallback(async () => {
     await wipeWalletKey(true)
   }, [])
 
   const rekeyWallet = useCallback(
-    async (oldPin: string, newPin: string, useBiometry?: boolean): Promise<boolean> => {
+    async (agent: Agent, oldPin: string, newPin: string, useBiometry?: boolean): Promise<boolean> => {
       try {
         if (!agent) {
           // no agent set, cannot rekey the wallet
@@ -165,12 +176,13 @@ export const AuthProvider: React.FC<React.PropsWithChildren> = ({ children }) =>
       }
       return true
     },
-    [agent]
+    []
   )
 
   return (
     <AuthContext.Provider
       value={{
+        lockOutUser,
         checkWalletPIN,
         getWalletSecret,
         removeSavedWalletSecret,

package/src/contexts/navigation.tsx

@@ -0,0 +1,19 @@
+import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native'
+import React from 'react'
+import { useTheme } from './theme'
+
+export interface NavContainerProps extends React.PropsWithChildren {
+  navigationRef: React.RefObject<NavigationContainerRef<any>> | null
+}
+
+const NavContainer = ({ navigationRef, children }: NavContainerProps) => {
+  const { NavigationTheme } = useTheme()
+
+  return (
+    <NavigationContainer ref={navigationRef} theme={NavigationTheme}>
+      {children}
+    </NavigationContainer>
+  )
+}
+
+export default NavContainer

package/src/contexts/reducers/store.ts

@@ -59,6 +59,7 @@ enum PreferencesDispatchAction {
   USE_SHAREABLE_LINK = 'preferences/useShareableLink',
   UPDATE_ALTERNATE_CONTACT_NAMES = 'preferences/updateAlternateContactNames',
   AUTO_LOCK_TIME = 'preferences/autoLockTime',
+  SET_THEME = 'preferences/setTheme',
 }
 
 enum ToursDispatchAction {
@@ -340,6 +341,17 @@ export const reducer = <S extends State>(state: S, action: ReducerAction<Dispatc
 
       return newState
     }
+    case PreferencesDispatchAction.SET_THEME: {
+      const theme = (action?.payload ?? []).pop() ?? ''
+      const preferences = { ...state.preferences, theme }
+
+      PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
+
+      return {
+        ...state,
+        preferences,
+      }
+    }
     case ToursDispatchAction.UPDATE_SEEN_TOUR_PROMPT: {
       const seenToursPrompt: ToursState = (action?.payload ?? []).pop() ?? false
       const tours = {

package/src/contexts/theme.tsx

@@ -0,0 +1,51 @@
+import { createContext, useCallback, useContext, useMemo } from 'react'
+
+import { bifoldTheme, ITheme } from '../theme'
+import { useStore } from './store'
+import { DispatchAction } from './reducers/store'
+
+export interface IThemeContext extends ITheme {
+  setTheme: (themeName: string) => void
+}
+
+const ThemeContext = createContext<IThemeContext>({
+  ...bifoldTheme,
+  setTheme: () => {},
+})
+
+export interface ThemeProviderProps extends React.PropsWithChildren {
+  themes: ITheme[]
+  defaultThemeName: string
+}
+
+export const ThemeProvider = ({ themes, defaultThemeName, children }: ThemeProviderProps) => {
+  const [store, dispatch] = useStore()
+
+  const activeTheme = useMemo(() => {
+    return (
+      (store.preferences.theme && themes.find((t) => t.themeName === store.preferences.theme)) ||
+      themes.find((t) => t.themeName === defaultThemeName) ||
+      themes[0]
+    )
+  }, [store.preferences.theme, themes, defaultThemeName])
+
+  const setTheme = useCallback(
+    (themeName: string) => {
+      const newTheme = themes.find((t) => t.themeName === themeName) || themes[0]
+      dispatch({ type: DispatchAction.SET_THEME, payload: [newTheme.themeName] })
+    },
+    [themes, dispatch]
+  )
+
+  // prevent re-rendering of the context value
+  const value = useMemo(() => {
+    return {
+      ...activeTheme,
+      setTheme,
+    }
+  }, [activeTheme, setTheme])
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export const useTheme = () => useContext(ThemeContext)

package/src/hooks/deep-links.ts

@@ -27,15 +27,13 @@ export const useDeepLinks = () => {
 
   // deeplink while already open
   useEffect(() => {
-    Linking.addEventListener('url', async ({ url }) => {
+    const listener = Linking.addListener('url', ({ url }) => {
       if (url) {
         setStashedDeepLink(url)
       }
     })
 
-    return () => {
-      Linking.removeAllListeners('url')
-    }
+    return listener.remove
   })
 
   // activate stashed deeplink when ready

package/src/hooks/{initialize-agent.ts → useBifoldAgentSetup.ts}

@@ -1,9 +1,8 @@
 import { Agent, HttpOutboundTransport, WsOutboundTransport } from '@credo-ts/core'
 import { IndyVdrPoolService } from '@credo-ts/indy-vdr/build/pool'
-import { useAgent } from '@credo-ts/react-hooks'
 import { agentDependencies } from '@credo-ts/react-native'
 import { GetCredentialDefinitionRequest, GetSchemaRequest } from '@hyperledger/indy-vdr-shared'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { Config } from 'react-native-config'
 import { CachesDirectoryPath } from 'react-native-fs'
 
@@ -14,8 +13,14 @@ import { getAgentModules, createLinkSecretIfRequired } from '../utils/agent'
 import { migrateToAskar } from '../utils/migration'
 import { WalletSecret } from '../types/security'
 
-const useInitializeAgent = () => {
-  const { agent, setAgent } = useAgent()
+export type AgentSetupReturnType = {
+  agent: Agent | null
+  initializeAgent: (walletSecret: WalletSecret) => Promise<void>
+  shutdownAndClearAgentIfExists: () => Promise<void>
+}
+
+const useBifoldAgentSetup = (): AgentSetupReturnType => {
+  const [agent, setAgent] = useState<Agent | null>(null)
   const [store, dispatch] = useStore()
   const [cacheSchemas, cacheCredDefs, logger, indyLedgers] = useServices([
     TOKENS.CACHE_SCHEMAS,
@@ -24,37 +29,8 @@ const useInitializeAgent = () => {
     TOKENS.UTIL_LEDGERS,
   ])
 
-  const restartExistingAgent = useCallback(
-    async (walletSecret: WalletSecret) => {
-      // if the agent is initialized, it was not a clean shutdown and should be replaced, not restarted
-      if (!agent || agent.isInitialized) {
-        return
-      }
-
-      logger.info('Agent already created, restarting...')
-      try {
-        await agent.wallet.open({
-          id: walletSecret.id,
-          key: walletSecret.key,
-        })
-        await agent.initialize()
-      } catch {
-        // if the existing agents wallet cannot be opened or initialize() fails it was
-        // again not a clean shutdown and the agent should be replaced, not restarted
-        logger.warn('Failed to restart existing agent, skipping agent restart')
-        return
-      }
-
-      logger.info('Successfully restarted existing agent')
-      return agent
-    },
-    [agent, logger]
-  )
-
   const createNewAgent = useCallback(
-    async (walletSecret: WalletSecret): Promise<Agent | undefined> => {
-      logger.info('No agent initialized, creating a new one')
-
+    async (walletSecret: WalletSecret): Promise<Agent> => {
       const newAgent = new Agent({
         config: {
           label: store.preferences.walletName || 'Aries Bifold',
@@ -91,11 +67,7 @@ const useInitializeAgent = () => {
     async (newAgent: Agent, walletSecret: WalletSecret) => {
       // If we haven't migrated to Aries Askar yet, we need to do this before we initialize the agent.
       if (!store.migration.didMigrateToAskar) {
-        newAgent.config.logger.debug('Agent not updated to Aries Askar, updating...')
-
         await migrateToAskar(walletSecret.id, walletSecret.key, newAgent)
-
-        newAgent.config.logger.debug('Successfully finished updating agent to Aries Askar')
         // Store that we migrated to askar.
         dispatch({
           type: DispatchAction.DID_MIGRATE_TO_ASKAR,
@@ -124,35 +96,41 @@ const useInitializeAgent = () => {
   )
 
   const initializeAgent = useCallback(
-    async (walletSecret: WalletSecret): Promise<Agent | undefined> => {
-      const existingAgent = await restartExistingAgent(walletSecret)
-      if (existingAgent) {
-        setAgent(existingAgent)
-        return existingAgent
-      }
-
+    async (walletSecret: WalletSecret): Promise<void> => {
+      logger.info('Creating agent')
       const newAgent = await createNewAgent(walletSecret)
-      if (!newAgent) {
-        logger.error('Failed to create a new agent')
-        return
-      }
 
+      logger.info('Migrating if required...')
       await migrateIfRequired(newAgent, walletSecret)
 
+      logger.info('Initializing agent...')
       await newAgent.initialize()
 
+      logger.info('Creating link secret if required...')
       await createLinkSecretIfRequired(newAgent)
 
+      logger.info('Warming up cache...')
       await warmUpCache(newAgent)
 
+      logger.info('Agent initialized successfully')
       setAgent(newAgent)
-
-      return newAgent
     },
-    [logger, restartExistingAgent, setAgent, createNewAgent, migrateIfRequired, warmUpCache]
+    [logger, createNewAgent, migrateIfRequired, warmUpCache]
   )
 
-  return { initializeAgent }
+  const shutdownAndClearAgentIfExists = useCallback(async () => {
+    if (agent) {
+      try {
+        await agent.shutdown()
+      } catch (error) {
+        logger.error(`Error shutting down agent with shutdownAndClearAgentIfExists: ${error}`)
+      }
+    }
+
+    setAgent(null)
+  }, [agent, logger])
+
+  return { agent, initializeAgent, shutdownAndClearAgentIfExists }
 }
 
-export default useInitializeAgent
+export default useBifoldAgentSetup

package/src/hooks/useOnboardingState.ts

@@ -1,3 +1,4 @@
+import { Agent } from '@credo-ts/core'
 import { useState, useEffect, useMemo } from 'react'
 import { useNavigationState } from '@react-navigation/native'
 import { State } from '../types/state'
@@ -12,7 +13,13 @@ export const useOnboardingState = (
   store: State,
   config: Config,
   termsVersion: number,
-  generateOnboardingWorkflowSteps: (store: State, config: Config, termsVersion: number) => OnboardingTask[]
+  agent: Agent | null,
+  generateOnboardingWorkflowSteps: (
+    store: State,
+    config: Config,
+    termsVersion: number,
+    agent: Agent | null
+  ) => OnboardingTask[]
 ): {
   onboardingState: OnboardingTask[]
   setOnboardingState: React.Dispatch<React.SetStateAction<OnboardingTask[]>>
@@ -32,9 +39,9 @@ export const useOnboardingState = (
       return
     }
 
-    const onboardingTasks = generateOnboardingWorkflowSteps(store, config, termsVersion)
+    const onboardingTasks = generateOnboardingWorkflowSteps(store, config, termsVersion, agent)
     setOnboardingState(onboardingTasks)
-  }, [store, config, termsVersion, generateOnboardingWorkflowSteps])
+  }, [store, config, termsVersion, agent, generateOnboardingWorkflowSteps])
 
   return {
     onboardingState,

package/src/hooks/usePINValidation.ts

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { InlineErrorType, InlineMessageProps } from '../components/inputs/InlineErrorText'
+import { TOKENS, useServices } from '../container-api'
+import { createPINValidations, PINValidationsType } from '../utils/PINValidation'
+
+interface ModalState {
+  visible: boolean
+  title: string
+  message: string
+  onModalDismiss?: () => void
+}
+
+const initialModalState: ModalState = {
+  visible: false,
+  title: '',
+  message: '',
+}
+
+export const usePINValidation = (PIN: string, PINTwo: string) => {
+  const { t } = useTranslation()
+  const [{ PINSecurity }, inlineMessages] = useServices([TOKENS.CONFIG, TOKENS.INLINE_ERRORS])
+  const [inlineMessageField1, setInlineMessageField1] = useState<InlineMessageProps>()
+  const [inlineMessageField2, setInlineMessageField2] = useState<InlineMessageProps>()
+  const [modalState, setModalState] = useState<ModalState>(initialModalState)
+
+  const clearModal = useCallback(() => {
+    setModalState(initialModalState)
+  }, [])
+  
+  const [PINValidations, setPINValidations] = useState<PINValidationsType[]>(
+    createPINValidations(PIN, PINSecurity.rules)
+  )
+
+  useEffect(() => {
+    setInlineMessageField1(undefined)
+    setInlineMessageField2(undefined)
+    setPINValidations(createPINValidations(PIN, PINSecurity.rules))
+  }, [PIN, PINTwo, PINSecurity.rules])
+
+  const attentionMessage = useCallback(
+    (title: string, message: string, pinOne: boolean) => {
+      if (inlineMessages.enabled) {
+        const config = {
+          message: message,
+          inlineType: InlineErrorType.error,
+          config: inlineMessages,
+        }
+        if (pinOne) {
+          setInlineMessageField1(config)
+        } else {
+          setInlineMessageField2(config)
+        }
+      } else {
+        setModalState({
+          visible: true,
+          title: title,
+          message: message,
+          onModalDismiss: clearModal
+        })
+      }
+    },
+    [inlineMessages, clearModal]
+  )
+
+  const validatePINEntry = useCallback(
+    (PINOne: string, PINTwo: string): boolean => {
+      for (const validation of PINValidations) {
+        if (validation.isInvalid) {
+          attentionMessage(
+            t('PINCreate.InvalidPIN'),
+            t(`PINCreate.Message.${validation.errorName}`, validation?.errorTextAddition),
+            true
+          )
+          return false
+        }
+      }
+      if (PINOne !== PINTwo) {
+        attentionMessage(t('PINCreate.InvalidPIN'), t('PINCreate.PINsDoNotMatch'), false)
+        return false
+      }
+      return true
+    },
+    [PINValidations, t, attentionMessage]
+  )
+
+  return {
+    PINValidations,
+    validatePINEntry,
+    inlineMessageField1,
+    inlineMessageField2,
+    modalState,
+    setModalState,
+    clearModal,
+    PINSecurity
+  }
+}