animo · TimoGlastra · Sep 29, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
@@ -16,7 +16,8 @@ import { NoInternetToastProvider } from 'app/provider/NoInternetToastProvider'
 import { isAndroid } from 'app/utils/platform'
 import { useFonts } from 'expo-font'
 import { Stack, SplashScreen } from 'expo-router'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { mediatorDid } from '../constants'
@@ -138,60 +139,62 @@ export default function HomeLayout() {
 
   return (
     <Provider>
-      <AgentProvider agent={agent}>
-        <ThemeProvider value={DefaultTheme}>
-          <NoInternetToastProvider>
-            <DeeplinkHandler>
-              <Stack screenOptions={{ headerShown: false }}>
-                <Stack.Screen
-                  options={{
-                    presentation: 'modal',
-                    // Extra modal options not needed for QR Scanner
-                  }}
-                  name="(home)/scan"
-                />
-                <Stack.Screen
-                  options={{ presentation: 'modal', ...headerModalOptions }}
-                  name="notifications/openIdCredential"
-                />
-                <Stack.Screen
-                  options={{ presentation: 'modal', ...headerModalOptions }}
-                  name="notifications/didCommCredential"
-                />
-                <Stack.Screen
-                  options={{ presentation: 'modal', ...headerModalOptions }}
-                  name="notifications/openIdPresentation"
-                />
-                <Stack.Screen
-                  options={{ presentation: 'modal', ...headerModalOptions }}
-                  name="notifications/didCommPresentation"
-                />
-                <Stack.Screen
-                  options={{
-                    headerShown: true,
-                    headerStyle: {
-                      backgroundColor: config.tokens.color['grey-200'].val,
-                    },
-                    headerShadowVisible: false,
-                    headerTintColor: config.tokens.color['primary-500'].val,
-                    headerTitle: 'Inbox',
-                  }}
-                  name="notifications/inbox"
-                />
-                <Stack.Screen
-                  options={{
-                    headerShown: true,
-                    headerTransparent: true,
-                    headerTintColor: config.tokens.color['primary-500'].val,
-                    headerTitle: '',
-                  }}
-                  name="credentials/[id]"
-                />
-              </Stack>
-            </DeeplinkHandler>
-          </NoInternetToastProvider>
-        </ThemeProvider>
-      </AgentProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <AgentProvider agent={agent}>
+          <ThemeProvider value={DefaultTheme}>
+            <NoInternetToastProvider>
+              <DeeplinkHandler>
+                <Stack screenOptions={{ headerShown: false }}>
+                  <Stack.Screen
+                    options={{
+                      presentation: 'modal',
+                      // Extra modal options not needed for QR Scanner
+                    }}
+                    name="(home)/scan"
+                  />
+                  <Stack.Screen
+                    options={{ presentation: 'fullScreenModal', ...headerModalOptions }}
+                    name="notifications/openIdCredential"
+                  />
+                  <Stack.Screen
+                    options={{ presentation: 'fullScreenModal', ...headerModalOptions }}
+                    name="notifications/didCommCredential"
+                  />
+                  <Stack.Screen
+                    options={{ presentation: 'fullScreenModal', ...headerModalOptions }}
+                    name="notifications/openIdPresentation"
+                  />
+                  <Stack.Screen
+                    options={{ presentation: 'fullScreenModal', ...headerModalOptions }}
+                    name="notifications/didCommPresentation"
+                  />
+                  <Stack.Screen
+                    options={{
+                      headerShown: true,
+                      headerStyle: {
+                        backgroundColor: config.tokens.color['grey-200'].val,
+                      },
+                      headerShadowVisible: false,
+                      headerTintColor: config.tokens.color['primary-500'].val,
+                      headerTitle: 'Inbox',
+                    }}
+                    name="notifications/inbox"
+                  />
+                  <Stack.Screen
+                    options={{
+                      headerShown: true,
+                      headerTransparent: true,
+                      headerTintColor: config.tokens.color['primary-500'].val,
+                      headerTitle: '',
+                    }}
+                    name="credentials/[id]"
+                  />
+                </Stack>
+              </DeeplinkHandler>
+            </NoInternetToastProvider>
+          </ThemeProvider>
+        </AgentProvider>
+      </GestureHandlerRootView>
     </Provider>
   )
 }
diff --git a/apps/expo/babel.config.js b/apps/expo/babel.config.js
@@ -21,8 +21,6 @@ module.exports = function (api) {
           extensions: ['.js', '.jsx', '.tsx', '.ios.js', '.android.js'],
         },
       ],
-      // if you want reanimated support
-      // 'react-native-reanimated/plugin',
       ...(process.env.EAS_BUILD_PLATFORM === 'android'
         ? []
         : [
@@ -40,6 +38,8 @@ module.exports = function (api) {
           include: 'TAMAGUI_TARGET',
         },
       ],
+      // if you want reanimated support
+      'react-native-reanimated/plugin',
     ],
   }
 }
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -11,8 +11,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
+    "@gorhom/bottom-sheet": "^4",
     "@hyperledger/anoncreds-react-native": "^0.1.0",
-    "@hyperledger/aries-askar-react-native": "0.1.0",
+    "@hyperledger/aries-askar-react-native": "^0.1.0",
     "@hyperledger/indy-vdr-react-native": "^0.1.0",
     "@internal/agent": "*",
     "@internal/ui": "*",
@@ -45,14 +46,15 @@
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-get-random-values": "~1.9.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@expo/metro-config": "~0.10.0",
-    "@tamagui/babel-plugin": "latest",
+    "@tamagui/babel-plugin": "1.26.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "metro-minify-terser": "^0.74.1",
     "typescript": "^4.7.4"

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "android": "cd apps/expo && yarn android",
     "watch": "yarn workspaces foreach -pi run watch",
     "fix": "manypkg fix",
-    "postinstall": "yarn check-deps && yarn build",
+    "postinstall": "yarn build",
     "build": "yarn workspaces foreach run build",
     "upgrade:tamagui": "yarn up '*tamagui*'@latest '@tamagui/*'@latest react-native-web-lite@latest",
     "upgrade:tamagui:canary": "yarn up '*tamagui*'@canary '@tamagui/*'@canary react-native-web-lite@canary",
@@ -31,6 +31,8 @@
   "resolutions": {
     "@unimodules/react-native-adapter": "./noop",
     "@unimodules/core": "./noop",
+    "@sphereon/pex": "file:./sphereon-pex-v2.1.3-unstable.1.tgz",
+    "@sphereon/did-auth-siop": "file:./sphereon-did-auth-siop-v0.4.1-unstable.5.tgz",
     "ref-napi": "npm:@2060.io/[email protected]",
     "@cosmjs/amino": "npm:@cosmjs-rn/amino@^0.27.1",
     "@cosmjs/encoding": "npm:@cosmjs-rn/encoding@^0.27.1",
@@ -39,8 +41,7 @@
     "@cosmjs/tendermint-rpc": "npm:@cosmjs-rn/tendermint-rpc@^0.27.1",
     "@cosmjs/utils": "npm:@cosmjs-rn/utils@^0.27.1",
     "@cosmjs/proto-signing": "npm:@cosmjs-rn/proto-signing@^0.27.1",
-    "@cosmjs/crypto": "npm:@cosmjs-rn/crypto@^0.27.1",
-    "@sphereon/[email protected]": "patch:@sphereon/did-auth-siop@npm%3A0.3.2-unstable.0#./.yarn/patches/@sphereon-did-auth-siop-npm-0.3.2-unstable.0-6a34120d09.patch"
+    "@cosmjs/crypto": "npm:@cosmjs-rn/crypto@^0.27.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",

diff --git a/packages/agent/package.json b/packages/agent/package.json
@@ -19,12 +19,12 @@
   },
   "peerDependencies": {
     "@hyperledger/anoncreds-react-native": "^0.1.0",
-    "@hyperledger/aries-askar-react-native": "0.1.0",
+    "@hyperledger/aries-askar-react-native": "^0.1.0",
     "@hyperledger/indy-vdr-react-native": "^0.1.0"
   },
   "devDependencies": {
     "@hyperledger/anoncreds-react-native": "^0.1.0",
-    "@hyperledger/aries-askar-react-native": "0.1.0",
+    "@hyperledger/aries-askar-react-native": "^0.1.0",
     "@hyperledger/indy-vdr-react-native": "^0.1.0"
   }
 }
diff --git a/packages/agent/src/display.ts b/packages/agent/src/display.ts
@@ -165,6 +165,11 @@ function getW3cCredentialDisplay(
     }
   }
 
+  // Use background color from the JFF credential if not provided by the OID4VCI metadata
+  if (!credentialDisplay.backgroundColor && jffCredential.credentialBranding?.backgroundColor) {
+    credentialDisplay.backgroundColor = jffCredential.credentialBranding.backgroundColor
+  }
+
   return {
     ...credentialDisplay,
     // Last fallback, if there's really no name for the credential, we use a generic name

diff --git a/packages/agent/src/format/formatPresentation.ts b/packages/agent/src/format/formatPresentation.ts
@@ -12,39 +12,37 @@ export interface FormattedSubmission {
 export interface FormattedSubmissionEntry {
   name: string
   isSatisfied: boolean
-  credentialName: string
-  issuerName?: string
   description?: string
-  requestedAttributes?: string[]
-  backgroundColor?: string
+
+  credentials: Array<{
+    credentialName: string
+    issuerName?: string
+    requestedAttributes: string[]
+    backgroundColor?: string
+  }>
 }
 
 export function formatW3cPresentationSubmission(
   presentationSubmission: PresentationSubmission
 ): FormattedSubmission {
   const entries = presentationSubmission.requirements.flatMap((requirement) => {
     return requirement.submission.map((submission: SubmissionEntry) => {
-      if (submission.verifiableCredential) {
-        // Credential can be satisfied
-        const { display, w3cCredential } = getW3cCredentialForDisplay(
-          submission.verifiableCredential
-        )
-        return {
-          name: submission.name ?? 'Unknown',
-          description: submission.purpose,
-          isSatisfied: true,
-          credentialName: display.name,
-          issuerName: display.issuer.name,
-          requestedAttributes: Object.keys(w3cCredential.credentialSubject),
-          backgroundColor: display.backgroundColor,
-        }
-      }
       return {
         name: submission.name ?? 'Unknown',
         description: submission.purpose,
-        isSatisfied: false,
-        // fallback to submission name because there is no credential
-        credentialName: submission.name ?? 'Credential name',
+        isSatisfied: submission.verifiableCredentials.length >= 1,
+
+        credentials: submission.verifiableCredentials.map((credential) => {
+          // Credential can be satisfied
+          const { display, w3cCredential } = getW3cCredentialForDisplay(credential)
+
+          return {
+            credentialName: display.name,
+            issuerName: display.issuer.name,
+            requestedAttributes: Object.keys(w3cCredential.credentialSubject),
+            backgroundColor: display.backgroundColor,
+          }
+        }),
       }
     })
   })