fix: pid display fixes (#193)

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

apps/easypid/src/features/activity/FunkeActivityDetailScreen.tsx

@@ -2,6 +2,9 @@ import { Circle, FlexPage, Heading, Paragraph, ScrollView, Stack, YStack } from
 import React from 'react'
 import { createParam } from 'solito'
 
+import type { ClaimFormat } from '@credo-ts/core'
+import { getPidDisclosedAttributeNames, isPidCredential, usePidCredential } from '@easypid/hooks'
+import { getPidAttributesForDisplay } from '@easypid/hooks'
 import { useCredentialsWithCustomDisplay } from '@easypid/hooks/useCredentialsWithCustomDisplay'
 import { CardWithAttributes, TextBackButton, activityInteractions } from '@package/app'
 import { useScrollViewPosition } from '@package/app/src/hooks'
@@ -18,6 +21,7 @@ export function FunkeActivityDetailScreen() {
   const { params } = useParams()
   const router = useRouter()
   const { bottom } = useSafeAreaInsets()
+  const { credential: pidCredential } = usePidCredential()
 
   const { activities } = useActivities()
   const { credentials } = useCredentialsWithCustomDisplay()
@@ -74,6 +78,43 @@ export function FunkeActivityDetailScreen() {
                 {activity.request.credentials && activity.request.credentials.length > 0 ? (
                   activity.request.credentials.map((activityCredential) => {
                     const credential = credentials.find((credential) => credential.id.includes(activityCredential.id))
+
+                    if (!credential)
+                      return (
+                        <CardWithAttributes
+                          key={activityCredential.id}
+                          id={activityCredential.id}
+                          name="Deleted credential"
+                          textColor="$grey-100"
+                          backgroundColor="$primary-500"
+                          disclosedAttributes={activityCredential.disclosedAttributes ?? []}
+                          disclosedPayload={activityCredential.disclosedPayload ?? {}}
+                          disableNavigation={true}
+                        />
+                      )
+
+                    if (isPidCredential(credential.metadata.type)) {
+                      return (
+                        <CardWithAttributes
+                          key={pidCredential?.id}
+                          id={pidCredential?.id as string}
+                          name={pidCredential?.display.name as string}
+                          issuerImage={pidCredential?.display.issuer.logo}
+                          backgroundImage={pidCredential?.display.backgroundImage}
+                          backgroundColor={pidCredential?.display.backgroundColor}
+                          textColor={pidCredential?.display.textColor}
+                          disclosedAttributes={getPidDisclosedAttributeNames(
+                            activityCredential?.disclosedPayload ?? {},
+                            credential?.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
+                          )}
+                          disclosedPayload={getPidAttributesForDisplay(
+                            activityCredential?.disclosedPayload ?? {},
+                            credential?.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
+                          )}
+                        />
+                      )
+                    }
+
                     if (credential)
                       return (
                         <CardWithAttributes
@@ -89,18 +130,6 @@ export function FunkeActivityDetailScreen() {
                           disableNavigation={activity.status !== 'success'}
                         />
                       )
-                    return (
-                      <CardWithAttributes
-                        key={activityCredential.id}
-                        id={activityCredential.id}
-                        name="Deleted credential"
-                        textColor="$grey-100"
-                        backgroundColor="$primary-500"
-                        disclosedAttributes={activityCredential.disclosedAttributes ?? []}
-                        disclosedPayload={activityCredential.disclosedPayload ?? {}}
-                        disableNavigation={true}
-                      />
-                    )
                   })
                 ) : (
                   <FailedReasonContainer reason={activity.request.failureReason ?? 'unknown'} />

apps/easypid/src/features/activity/activityRecord.ts

@@ -86,9 +86,8 @@ export const useActivities = ({ filters }: { filters?: { host?: string } } = {})
 export const addReceivedActivity = async (
   agent: EasyPIDAppAgent,
   input: {
-    did: string
     name: string
-    domain?: string
+    host?: string
     logo?: DisplayImage
     backgroundColor?: string
     credentialIds: string[]
@@ -100,9 +99,8 @@ export const addReceivedActivity = async (
     type: 'received',
     status: 'success',
     entity: {
-      did: input.did,
       name: input.name,
-      host: input.domain ? input.domain : (getHostNameFromUrl(input.did) as string),
+      host: input.host,
       logo: input.logo,
       backgroundColor: input.backgroundColor,
     },
@@ -115,7 +113,7 @@ export const addSharedActivity = async (
   input: {
     status: ActivityStatus
     entity: {
-      did: string
+      host: string
       name?: string
       logo?: DisplayImage
     }
@@ -137,9 +135,8 @@ export const addSharedActivity = async (
     type: 'shared',
     status: input.status,
     entity: {
-      did: input.entity.did,
       name: input.entity.name,
-      host: getHostNameFromUrl(input.entity.did) as string,
+      host: input.entity.host,
       logo: input.entity.logo,
     },
     request: {

apps/easypid/src/features/onboarding/onboardingContext.tsx

@@ -17,7 +17,7 @@ import {
 } from '@package/agent'
 import { secureWalletKey } from '@package/secure-store/secureUnlock'
 import { useToastController } from '@package/ui'
-import { capitalizeFirstLetter, sleep } from '@package/utils'
+import { capitalizeFirstLetter, getHostNameFromUrl, sleep } from '@package/utils'
 import { useRouter } from 'expo-router'
 import type React from 'react'
 import { type PropsWithChildren, createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
@@ -701,7 +701,7 @@ export function OnboardingContextProvider({
           )
 
           await addReceivedActivity(secureUnlock.context.agent, {
-            did: parsed.prettyClaims.iss,
+            host: getHostNameFromUrl(parsed.prettyClaims.iss) as string,
             name: pidDisplay?.issuer.name,
             logo: pidDisplay?.issuer.logo,
             backgroundColor: '#ffffff', // PID Logo needs white background

apps/easypid/src/features/onboarding/screens/id-card-requested-attributes.tsx

@@ -29,6 +29,7 @@ export function OnboardingIdCardRequestedAttributes({
           <CardWithAttributes
             id="pid-display"
             name="eID card"
+            issuerImage={display?.issuer.logo}
             backgroundImage={display?.backgroundImage}
             backgroundColor={display?.backgroundColor}
             disclosedAttributes={requestedAttributes.map((a) => sanitizeString(a))}

apps/easypid/src/features/receive/FunkeOpenIdCredentialNotificationScreen.tsx

@@ -66,7 +66,7 @@ export function FunkeOpenIdCredentialNotificationScreen() {
   )
 
   const lastInteractionDate = useMemo(() => {
-    const activity = activities.find((activity) => activity.entity.did === credential?.metadata.issuer)
+    const activity = activities.find((activity) => activity.entity.host === credential?.display.issuer.domain)
     return activity?.date
   }, [activities, credential])
 
@@ -76,11 +76,10 @@ export function FunkeOpenIdCredentialNotificationScreen() {
     setIsStoring(true)
     await storeCredential(agent, credentialRecord)
       .then(async () => {
-        const { metadata, display } = getCredentialForDisplay(credentialRecord)
+        const { display } = getCredentialForDisplay(credentialRecord)
 
         await addReceivedActivity(agent, {
-          did: metadata.issuer,
-          domain: display.issuer.domain,
+          host: display.issuer.domain,
           name: display.issuer.name,
           logo: display.issuer.logo ? display.issuer.logo : undefined,
           backgroundColor: display.backgroundColor, // Might not be accurate for issuer image

apps/easypid/src/features/share/FunkeOpenIdPresentationNotificationScreen.tsx

@@ -1,6 +1,5 @@
 import {
   BiometricAuthenticationCancelledError,
-  type CredentialMetadata,
   type EasyPIDAppAgent,
   formatDifPexCredentialsForRequest,
   getCredentialsForProofRequest,
@@ -20,7 +19,7 @@ import {
 import { useSeedCredentialPidData } from '@easypid/storage'
 import { getOpenIdFedIssuerMetadata } from '@easypid/utils/issuer'
 import { usePushToWallet } from '@package/app/src/hooks/usePushToWallet'
-import { getPidAttributesForDisplay, usePidCredential } from '../../hooks'
+import { usePidCredential } from '../../hooks'
 import { addSharedActivity, useActivities } from '../activity/activityRecord'
 import { FunkePresentationNotificationScreen } from './FunkePresentationNotificationScreen'
 
@@ -53,9 +52,7 @@ export function FunkeOpenIdPresentationNotificationScreen() {
     [credentialsForRequest]
   )
   const lastInteractionDate = useMemo(() => {
-    const activity = activities.find(
-      (activity) => activity.entity.did === credentialsForRequest?.authorizationRequest.issuer
-    )
+    const activity = activities.find((activity) => activity.entity.host === credentialsForRequest?.verifierHostName)
     return activity?.date
   }, [activities, credentialsForRequest])
 
@@ -92,22 +89,14 @@ export function FunkeOpenIdPresentationNotificationScreen() {
     () =>
       submission?.entries.flatMap((entry) => {
         return entry.credentials.map((credential) => {
-          const disclosedPayload =
-            credential.metadata?.type === pidCredential?.type
-              ? getPidAttributesForDisplay(
-                  credential.disclosedPayload ?? {},
-                  credential.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
-                )
-              : credential.disclosedPayload
-
           return {
             id: credential.id,
             disclosedAttributes: credential.requestedAttributes ?? [],
-            disclosedPayload,
+            disclosedPayload: credential.disclosedPayload ?? {},
           }
         })
       }),
-    [submission, pidCredential]
+    [submission]
   )
 
   const usePin = useMemo(() => {
@@ -164,8 +153,8 @@ export function FunkeOpenIdPresentationNotificationScreen() {
         status: 'success',
         entity: {
           name: fedDisplayData ? fedDisplayData.display.name : credentialsForRequest.verifierHostName,
-          did: credentialsForRequest.authorizationRequest.issuer as string,
           logo: fedDisplayData ? fedDisplayData.display.logo : undefined,
+          host: credentialsForRequest.verifierHostName as string,
         },
         request: {
           name: submission.name,
@@ -264,7 +253,7 @@ export function FunkeOpenIdPresentationNotificationScreen() {
   const onProofDecline = async () => {
     const activityData = {
       entity: {
-        did: credentialsForRequest?.authorizationRequest.issuer as string,
+        host: credentialsForRequest?.verifierHostName as string,
         name: fedDisplayData ? fedDisplayData.display.name : credentialsForRequest?.verifierHostName,
         logo: fedDisplayData ? fedDisplayData.display.logo : undefined,
       },

apps/easypid/src/features/share/FunkePresentationNotificationScreen.tsx

@@ -71,7 +71,6 @@ export function FunkePresentationNotificationScreen({
                 onAccept={usePin ? undefined : onAccept}
                 onDecline={onDecline}
                 logo={logo}
-                verifierName={verifierName}
                 submission={submission}
                 isAccepting={isAccepting}
               />

apps/easypid/src/features/share/components/RequestedAttributesSection.tsx

@@ -1,5 +1,10 @@
 import type { ClaimFormat } from '@credo-ts/core'
-import { getPidAttributesForDisplay, getPidDisclosedAttributeNames, usePidCredential } from '@easypid/hooks'
+import {
+  getPidAttributesForDisplay,
+  getPidDisclosedAttributeNames,
+  isPidCredential,
+  usePidCredential,
+} from '@easypid/hooks'
 import type { FormattedSubmission } from '@package/agent/src'
 import { Heading, Paragraph, YStack } from '@package/ui'
 import { CardWithAttributes } from 'packages/app/src'
@@ -18,34 +23,30 @@ export function RequestedAttributesSection({ submission }: RequestedAttributesSe
         <YStack gap="$4">
           <Paragraph>
             {submission.areAllSatisfied
-              ? 'Onsly the following attributes will be shared. Nothing more.'
+              ? 'Only the following attributes will be shared. Nothing more.'
               : `You don't have the requested credential(s).`}
           </Paragraph>
           {submission.entries.map((entry) => (
             <YStack gap="$4" key={entry.inputDescriptorId}>
               {entry.credentials.map((credential) => {
-                if (credential.metadata?.type === pidCredential?.type) {
-                  const disclosedAttributes = getPidDisclosedAttributeNames(
-                    credential?.disclosedPayload ?? {},
-                    credential?.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
-                  )
-
-                  const disclosedPayload = getPidAttributesForDisplay(
-                    credential?.disclosedPayload ?? {},
-                    credential?.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
-                  )
-
+                if (isPidCredential(credential.metadata?.type)) {
                   return (
                     <CardWithAttributes
-                      key={credential.id as string}
-                      id={credential.id as string}
+                      key={pidCredential?.id}
+                      id={pidCredential?.id as string}
                       name={pidCredential?.display.name as string}
                       issuerImage={pidCredential?.display.issuer.logo}
                       backgroundImage={pidCredential?.display.backgroundImage}
                       backgroundColor={pidCredential?.display.backgroundColor}
                       textColor={pidCredential?.display.textColor}
-                      disclosedAttributes={disclosedAttributes}
-                      disclosedPayload={disclosedPayload}
+                      disclosedAttributes={getPidDisclosedAttributeNames(
+                        credential?.disclosedPayload ?? {},
+                        credential?.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
+                      )}
+                      disclosedPayload={getPidAttributesForDisplay(
+                        credential?.disclosedPayload ?? {},
+                        credential?.claimFormat as ClaimFormat.SdJwtVc | ClaimFormat.MsoMdoc
+                      )}
                     />
                   )
                 }

apps/easypid/src/features/share/slides/ShareCredentialsSlide.tsx

@@ -28,7 +28,6 @@ interface ShareCredentialsSlideProps {
   onAccept?: () => Promise<PresentationRequestResult>
   submission?: FormattedSubmission
   onDecline: () => void
-  verifierName?: string
   isAccepting: boolean
 }
 
@@ -37,7 +36,6 @@ export const ShareCredentialsSlide = ({
   submission,
   onAccept,
   onDecline,
-  verifierName,
   isAccepting,
 }: ShareCredentialsSlideProps) => {
   const { onNext } = useWizard()
@@ -54,7 +52,12 @@ export const ShareCredentialsSlide = ({
 
   const handleAccept = async () => {
     if (onAccept) {
-      await onAccept()
+      const result = await onAccept()
+      if (result.status === 'error') {
+        toast.show(result.result.title, { message: result.result.message, customData: { preset: 'danger' } })
+        pushToWallet()
+        return
+      }
     }
     onNext()
   }

apps/easypid/src/features/wallet/FunkeCredentialDetailScreen.tsx

@@ -60,8 +60,8 @@ export function FunkeCredentialDetailScreen() {
     router.push({
       pathname: '/credentials/[id]/attributes',
       params: {
-        attributes: JSON.stringify(credential.attributes),
-        metadata: JSON.stringify(credential.metadata),
+        attributes: JSON.stringify(credential.attributesForDisplay ?? credential.attributes),
+        metadata: JSON.stringify(credential.metadataForDisplay ?? credential.metadata),
       },
     })
   })

apps/easypid/src/hooks/useCredentialsWithCustomDisplay.ts

@@ -1,5 +1,10 @@
 import { type CredentialForDisplay, useCredentialsForDisplay } from 'packages/agent/src'
-import { usePidCredential } from './usePidCredential'
+import { type PidSdJwtVcAttributes, usePidCredential } from './usePidCredential'
+
+type CustomCredentialForDisplay = CredentialForDisplay & {
+  attributesForDisplay: PidSdJwtVcAttributes
+  metadataForDisplay: Record<string, unknown>
+}
 
 export const useCredentialsWithCustomDisplay = () => {
   const credentials = useCredentialsForDisplay()
@@ -13,5 +18,8 @@ export const useCredentialsWithCustomDisplay = () => {
     credentials.credentials[index] = pidCredential.credential as CredentialForDisplay
   }
 
-  return credentials
+  return credentials as {
+    credentials: CustomCredentialForDisplay[]
+    isLoading: boolean
+  }
 }