This PR makes all header buttons injectable (#1335)

Signed-off-by: ClaudeArs <[email protected]>
openwallet-foundation · Nov 28, 2024 · 9bf85b1 · 9bf85b1
1 parent 57bdf1b
commit 9bf85b1
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 40 deletions.
diff --git a/packages/legacy/core/App/container-api.ts b/packages/legacy/core/App/container-api.ts
@@ -100,7 +100,7 @@ export const LOAD_STATE_TOKENS = {
 } as const
 
 export const OBJECT_TOKENS = {
-  OBJECT_ONBOARDING_CONFIG: 'object.onboarding-config',
+  OBJECT_SCREEN_CONFIG: 'object.screen-config',
 } as const
 
 export const CACHE_TOKENS = {
@@ -166,7 +166,7 @@ export type TokenMapping = {
     customNotificationConfig?: CustomNotification
   }
   [TOKENS.NOTIFICATIONS_LIST_ITEM]: React.FC<NotificationListItemProps>
-  [TOKENS.OBJECT_ONBOARDING_CONFIG]: ScreenOptionsType
+  [TOKENS.OBJECT_SCREEN_CONFIG]: ScreenOptionsType
   [TOKENS.COMPONENT_PIN_CREATE_HEADER]: React.FC<PINCreateHeaderProps>
   [TOKENS.CACHE_CRED_DEFS]: { did: string; id: string }[]
   [TOKENS.CACHE_SCHEMAS]: { did: string; id: string }[]

diff --git a/packages/legacy/core/App/container-impl.ts b/packages/legacy/core/App/container-impl.ts
@@ -104,7 +104,7 @@ export class MainContainer implements Container {
     this._container.registerInstance(TOKENS.GROUP_BY_REFERENT, false)
     this._container.registerInstance(TOKENS.HISTORY_ENABLED, false)
     this._container.registerInstance(TOKENS.CRED_HELP_ACTION_OVERRIDES, [])
-    this._container.registerInstance(TOKENS.OBJECT_ONBOARDING_CONFIG, DefaultScreenOptionsDictionary)
+    this._container.registerInstance(TOKENS.OBJECT_SCREEN_CONFIG, DefaultScreenOptionsDictionary)
     this._container.registerInstance(TOKENS.UTIL_LOGGER, new ConsoleLogger())
     this._container.registerInstance(TOKENS.UTIL_OCA_RESOLVER, new DefaultOCABundleResolver(bundle))
     this._container.registerInstance(TOKENS.UTIL_LEDGERS, defaultIndyLedgers)

diff --git a/packages/legacy/core/App/navigators/ConnectStack.tsx b/packages/legacy/core/App/navigators/ConnectStack.tsx
@@ -16,7 +16,7 @@ const ConnectStack: React.FC = () => {
   const Stack = createStackNavigator<ConnectStackParams>()
   const theme = useTheme()
   const defaultStackOptions = useDefaultStackOptions(theme)
-  const [scan] = useServices([TOKENS.SCREEN_SCAN])
+  const [scan, ScreenOptionsDictionary] = useServices([TOKENS.SCREEN_SCAN, TOKENS.OBJECT_SCREEN_CONFIG])
   const { t } = useTranslation()
 
   return (
@@ -32,15 +32,24 @@ const ConnectStack: React.FC = () => {
         options={() => ({
           title: t('PasteUrl.PasteUrl'),
           headerBackTestID: testIdWithKey('Back'),
+          ...ScreenOptionsDictionary[Screens.PasteUrl]
         })}
       />
-      <Stack.Screen name={Screens.ScanHelp} component={ScanHelp} />
+      <Stack.Screen
+        name={Screens.ScanHelp}
+        component={ScanHelp}
+        options={{
+          ...ScreenOptionsDictionary[Screens.ScanHelp]
+        }}
+        />
+
       <Stack.Screen
         name={Screens.NameWallet}
         component={NameWallet}
         options={{
           title: t('Screens.NameWallet'),
           headerBackTestID: testIdWithKey('Back'),
+          ...ScreenOptionsDictionary[Screens.NameWallet]
         }}
       />
     </Stack.Navigator>

diff --git a/packages/legacy/core/App/navigators/ContactStack.tsx b/packages/legacy/core/App/navigators/ContactStack.tsx
@@ -16,52 +16,85 @@ import WhatAreContacts from '../screens/WhatAreContacts'
 import { ContactStackParams, Screens } from '../types/navigators'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
+import { TOKENS, useServices } from '../container-api'
 
 const ContactStack: React.FC = () => {
   const Stack = createStackNavigator<ContactStackParams>()
   const theme = useTheme()
   const { t } = useTranslation()
   const defaultStackOptions = useDefaultStackOptions(theme)
+  const [ScreenOptionsDictionary] = useServices([TOKENS.OBJECT_SCREEN_CONFIG])
 
   return (
     <Stack.Navigator screenOptions={{ ...defaultStackOptions }}>
-      <Stack.Screen name={Screens.Contacts} component={ListContacts} options={{ title: t('Screens.Contacts') }} />
+      <Stack.Screen
+        name={Screens.Contacts}
+        component={ListContacts}
+        options={{ title: t('Screens.Contacts'),
+          ...ScreenOptionsDictionary[Screens.Contacts]
+        }}
+      />
       <Stack.Screen
         name={Screens.ContactDetails}
         component={ContactDetails}
         options={{
           title: t('Screens.ContactDetails'),
+          ...ScreenOptionsDictionary[Screens.ContactDetails]
         }}
       />
       <Stack.Screen
         name={Screens.RenameContact}
         component={RenameContact}
-        options={{ title: t('Screens.RenameContact') }}
+        options={{
+          title: t('Screens.RenameContact'),
+          ...ScreenOptionsDictionary[Screens.RenameContact]
+        }}
+      />
+      <Stack.Screen
+        name={Screens.Chat}
+        component={Chat}
+        options={{
+          ...ScreenOptionsDictionary[Screens.Chat]
+        }}
+      />
+      <Stack.Screen
+        name={Screens.WhatAreContacts}
+        component={WhatAreContacts}
+        options={{
+          title: '',
+          ...ScreenOptionsDictionary[Screens.WhatAreContacts]
+         }}
       />
-      <Stack.Screen name={Screens.Chat} component={Chat} />
-      <Stack.Screen name={Screens.WhatAreContacts} component={WhatAreContacts} options={{ title: '' }} />
       <Stack.Screen
         name={Screens.CredentialDetails}
         component={CredentialDetails}
-        options={{ title: t('Screens.CredentialDetails') }}
+        options={{ title: t('Screens.CredentialDetails'),
+          ...ScreenOptionsDictionary[Screens.CredentialDetails]
+        }}
       />
       <Stack.Screen
         name={Screens.CredentialOffer}
         component={CredentialOffer}
-        options={{ title: t('Screens.CredentialOffer') }}
+        options={{ title: t('Screens.CredentialOffer'),
+          ...ScreenOptionsDictionary[Screens.CredentialOffer]
+        }}
       />
       <Stack.Screen
         name={Screens.ProofDetails}
         component={ProofDetails}
         options={() => ({
           title: '',
           headerRight: () => <HeaderRightHome />,
+          ...ScreenOptionsDictionary[Screens.ProofDetails]
         })}
       />
       <Stack.Screen
         name={Screens.ProofRequest}
         component={ProofRequest}
-        options={{ title: t('Screens.ProofRequest') }}
+        options={{
+          title: t('Screens.ProofRequest'),
+          ...ScreenOptionsDictionary[Screens.ProofRequest]
+        }}
       />
     </Stack.Navigator>
   )

diff --git a/packages/legacy/core/App/navigators/CredentialStack.tsx b/packages/legacy/core/App/navigators/CredentialStack.tsx
@@ -16,7 +16,7 @@ const CredentialStack: React.FC = () => {
   const Stack = createStackNavigator<CredentialStackParams>()
   const theme = useTheme()
   const { t } = useTranslation()
-  const [CredentialListHeaderRight] = useServices([TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT])
+  const [CredentialListHeaderRight, ScreenOptionsDictionary] = useServices([TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT, TOKENS.OBJECT_SCREEN_CONFIG])
   const defaultStackOptions = useDefaultStackOptions(theme)
 
   return (
@@ -28,17 +28,24 @@ const CredentialStack: React.FC = () => {
           title: t('Screens.Credentials'),
           headerRight: () => <CredentialListHeaderRight />,
           headerLeft: () => <SettingsMenu />,
+          ...ScreenOptionsDictionary[Screens.Credentials]
         })}
       />
       <Stack.Screen
         name={Screens.CredentialDetails}
         component={CredentialDetails}
-        options={{ title: t('Screens.CredentialDetails') }}
+        options={{
+          title: t('Screens.CredentialDetails'),
+          ...ScreenOptionsDictionary[Screens.CredentialDetails]
+        }}
       />
       <Stack.Screen
         name={Screens.OpenIDCredentialDetails}
         component={OpenIDCredentialDetails}
-        options={{ title: t('Screens.CredentialDetails') }}
+        options={{
+          title: t('Screens.CredentialDetails'),
+          ...ScreenOptionsDictionary[Screens.OpenIDCredentialDetails]
+        }}
       />
     </Stack.Navigator>
   )

diff --git a/packages/legacy/core/App/navigators/DeliveryStack.tsx b/packages/legacy/core/App/navigators/DeliveryStack.tsx
@@ -12,12 +12,14 @@ import { DeliveryStackParams, Screens } from '../types/navigators'
 import { useDefaultStackOptions } from './defaultStackOptions'
 import OpenIDCredentialDetails from '../modules/openid/screens/OpenIDCredentialOffer'
 import OpenIDProofPresentation from '../modules/openid/screens/OpenIDProofPresentation'
+import { TOKENS, useServices } from '../container-api'
 
 const DeliveryStack: React.FC = () => {
   const Stack = createStackNavigator<DeliveryStackParams>()
   const { t } = useTranslation()
   const theme = useTheme()
   const defaultStackOptions = useDefaultStackOptions(theme)
+  const [ScreenOptionsDictionary] = useServices([TOKENS.OBJECT_SCREEN_CONFIG])
 
   return (
     <Stack.Navigator
@@ -29,28 +31,44 @@ const DeliveryStack: React.FC = () => {
         presentation: 'modal',
         headerLeft: () => null,
         headerRight: () => <HeaderRightHome />,
+        ...ScreenOptionsDictionary[Screens.Connection]
       }}
     >
-      <Stack.Screen name={Screens.Connection} component={Connection} options={{ ...defaultStackOptions }} />
+      <Stack.Screen
+        name={Screens.Connection}
+        component={Connection}
+        options={{...defaultStackOptions }} />
       <Stack.Screen
         name={Screens.ProofRequest}
         component={ProofRequest}
-        options={{ title: t('Screens.ProofRequest') }}
+        options={{
+          title: t('Screens.ProofRequest'),
+          ...ScreenOptionsDictionary[Screens.ProofRequest]
+        }}
       />
       <Stack.Screen
         name={Screens.CredentialOffer}
         component={CredentialOffer}
-        options={{ title: t('Screens.CredentialOffer') }}
+        options={{
+          title: t('Screens.CredentialOffer'),
+          ...ScreenOptionsDictionary[Screens.CredentialOffer]
+        }}
       />
       <Stack.Screen
         name={Screens.OpenIDCredentialDetails}
         component={OpenIDCredentialDetails}
-        options={{ title: t('Screens.CredentialOffer') }}
+        options={{
+          title: t('Screens.CredentialOffer'),
+          ...ScreenOptionsDictionary[Screens.OpenIDCredentialDetails]
+        }}
       />
       <Stack.Screen
         name={Screens.OpenIDProofPresentation}
         component={OpenIDProofPresentation}
-        options={{ title: t('Screens.ProofRequest') }}
+        options={{
+          title: t('Screens.ProofRequest'),
+          ...ScreenOptionsDictionary[Screens.OpenIDProofPresentation]
+        }}
       />
     </Stack.Navigator>
   )

diff --git a/packages/legacy/core/App/navigators/HomeStack.tsx b/packages/legacy/core/App/navigators/HomeStack.tsx
@@ -10,13 +10,15 @@ import Home from '../screens/Home'
 import { HomeStackParams, Screens } from '../types/navigators'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
+import { TOKENS, useServices } from '../container-api'
 
 const HomeStack: React.FC = () => {
   const Stack = createStackNavigator<HomeStackParams>()
   const theme = useTheme()
   const { t } = useTranslation()
   const [store] = useStore()
   const defaultStackOptions = useDefaultStackOptions(theme)
+  const [ScreenOptionsDictionary] = useServices([TOKENS.OBJECT_SCREEN_CONFIG])
 
   return (
     <Stack.Navigator screenOptions={{ ...defaultStackOptions }}>
@@ -27,6 +29,7 @@ const HomeStack: React.FC = () => {
           title: t('Screens.Home'),
           headerRight: () => (store.preferences.useHistoryCapability ? <HistoryMenu /> : null),
           headerLeft: () => <SettingsMenu />,
+          ...ScreenOptionsDictionary[Screens.Home]
         })}
       />
     </Stack.Navigator>

diff --git a/packages/legacy/core/App/navigators/NotificationStack.tsx b/packages/legacy/core/App/navigators/NotificationStack.tsx
@@ -16,30 +16,42 @@ const NotificationStack: React.FC = () => {
   const theme = useTheme()
   const { t } = useTranslation()
   const defaultStackOptions = useDefaultStackOptions(theme)
-  const [{ customNotificationConfig: customNotification }] = useServices([TOKENS.NOTIFICATIONS])
+  const [{ customNotificationConfig: customNotification }, ScreenOptionsDictionary] = useServices([TOKENS.NOTIFICATIONS, TOKENS.OBJECT_SCREEN_CONFIG])
 
   return (
     <Stack.Navigator screenOptions={{ ...defaultStackOptions }}>
       <Stack.Screen
         name={Screens.CredentialDetails}
         component={CredentialDetails}
-        options={{ title: t('Screens.CredentialDetails') }}
+        options={{
+          title: t('Screens.CredentialDetails'),
+          ...ScreenOptionsDictionary[Screens.CredentialDetails]
+        }}
       />
       <Stack.Screen
         name={Screens.CredentialOffer}
         component={CredentialOffer}
-        options={{ title: t('Screens.CredentialOffer') }}
+        options={{
+          title: t('Screens.CredentialOffer'),
+          ...ScreenOptionsDictionary[Screens.CredentialOffer]
+        }}
       />
       <Stack.Screen
         name={Screens.ProofRequest}
         component={ProofRequest}
-        options={{ title: t('Screens.ProofRequest') }}
+        options={{
+          title: t('Screens.ProofRequest'),
+          ...ScreenOptionsDictionary[Screens.ProofRequest]
+        }}
       />
       {customNotification && (
         <Stack.Screen
           name={Screens.CustomNotification}
           component={customNotification.component}
-          options={{ title: t(customNotification.pageTitle as any) }}
+          options={{
+            title: t(customNotification.pageTitle as any),
+            ...ScreenOptionsDictionary[Screens.CustomNotification]
+          }}
         />
       )}
       {customNotification &&

diff --git a/packages/legacy/core/App/navigators/OnboardingStack.tsx b/packages/legacy/core/App/navigators/OnboardingStack.tsx
@@ -34,7 +34,7 @@ const OnboardingStack: React.FC = () => {
   const theme = useTheme()
   const OnboardingTheme = theme.OnboardingTheme
   const carousel = createCarouselStyle(OnboardingTheme)
-  const [splash, pages, useBiometry, Onboarding, Developer, { screen: Terms }, onTutorialCompletedCurried, ScreenOptionsDictionary, Preface] = useServices([TOKENS.SCREEN_SPLASH, TOKENS.SCREEN_ONBOARDING_PAGES, TOKENS.SCREEN_USE_BIOMETRY, TOKENS.SCREEN_ONBOARDING, TOKENS.SCREEN_DEVELOPER, TOKENS.SCREEN_TERMS, TOKENS.FN_ONBOARDING_DONE, TOKENS.OBJECT_ONBOARDING_CONFIG, TOKENS.SCREEN_PREFACE])
+  const [splash, pages, useBiometry, Onboarding, Developer, { screen: Terms }, onTutorialCompletedCurried, ScreenOptionsDictionary, Preface] = useServices([TOKENS.SCREEN_SPLASH, TOKENS.SCREEN_ONBOARDING_PAGES, TOKENS.SCREEN_USE_BIOMETRY, TOKENS.SCREEN_ONBOARDING, TOKENS.SCREEN_DEVELOPER, TOKENS.SCREEN_TERMS, TOKENS.FN_ONBOARDING_DONE, TOKENS.OBJECT_SCREEN_CONFIG, TOKENS.SCREEN_PREFACE])
   const defaultStackOptions = useDefaultStackOptions(theme)
   const navigation = useNavigation<StackNavigationProp<AuthenticateStackParams>>()
   const onTutorialCompleted = onTutorialCompletedCurried(dispatch, navigation)