feat: show which attributes are not present

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

@@ -4,29 +4,70 @@ import {
   type FormattedSubmissionEntrySatisfied,
   getDisclosedAttributeNamesForDisplay,
   getUnsatisfiedAttributePathsForDisplay,
+  useCredentialsForDisplay,
 } from '@package/agent'
 import { CardWithAttributes } from '@package/app'
-import { Heading, Paragraph, YStack } from '@package/ui'
+import { Heading, HeroIcons, Paragraph, XStack, YStack } from '@package/ui'
+import { useEffect, useMemo, useState } from 'react'
 
 export type RequestedAttributesSectionProps = {
   submission: FormattedSubmission
 }
 
+const copy = {
+  satisfied: {
+    title: 'REQUESTED CARDS',
+    description: 'The following cards will be shared.',
+    variant: 'default',
+  },
+  unsatisfied: {
+    title: 'CARDS UNAVAILABLE',
+    description: "You don't have the requested card(s).",
+    variant: '$danger-500',
+  },
+  invalid: {
+    title: 'ATTRIBUTES UNAVAILABLE',
+    description: 'The verifier requested attributes that are not present in your card(s).',
+    variant: '$danger-500',
+  },
+}
+
 export function RequestedAttributesSection({ submission }: RequestedAttributesSectionProps) {
   const satisfiedEntries = submission.entries.filter((e): e is FormattedSubmissionEntrySatisfied => e.isSatisfied)
   const unsatisfiedEntries = submission.entries.filter((e): e is FormattedSubmissionEntryNotSatisfied => !e.isSatisfied)
+  const { credentials } = useCredentialsForDisplay()
+  const [state, setState] = useState<'satisfied' | 'unsatisfied' | 'invalid'>(
+    satisfiedEntries.length === 0 ? 'satisfied' : 'unsatisfied'
+  )
+
+  useEffect(() => {
+    const hasInvalidCredential = unsatisfiedEntries.some((entry) =>
+      credentials.find((c) => c.metadata.type === `https://${entry.name}`)
+    )
+
+    if (hasInvalidCredential) setState('invalid')
+  }, [credentials, unsatisfiedEntries])
+
+  const formatUnsatisfiedEntries = useMemo(() => {
+    return unsatisfiedEntries.map((entry) => {
+      const credential = credentials.find((c) => c.metadata.type === `https://${entry.name}`)
+      return {
+        ...entry,
+        credential,
+      }
+    })
+  }, [credentials, unsatisfiedEntries])
 
   return (
     <YStack gap="$4">
       <YStack gap="$2">
-        <Heading variant="sub2">{satisfiedEntries.length > 0 ? 'REQUESTED CARDS' : 'UNAVAILABLE CARDS'}</Heading>
-        <Paragraph>
-          {unsatisfiedEntries.length === 0
-            ? 'The following cards will be shared.'
-            : satisfiedEntries.length === 0
-              ? `You don't have the requested card(s).`
-              : `You don't have all of the requested cards.`}
-        </Paragraph>
+        <XStack gap="$2">
+          {state !== 'satisfied' && <HeroIcons.ExclamationCircleFilled size={20} color={copy[state].variant} />}
+          <Heading variant="sub2" color={copy[state].variant}>
+            {copy[state].title}
+          </Heading>
+        </XStack>
+        <Paragraph>{copy[state].description}</Paragraph>
       </YStack>
       {/* We always take the first one for now (no selection) */}
       {satisfiedEntries.map(({ credentials: [credential], ...entry }) => {
@@ -54,26 +95,47 @@ export function RequestedAttributesSection({ submission }: RequestedAttributesSe
           />
         )
       })}
-      {unsatisfiedEntries.length > 0 && (
+      {formatUnsatisfiedEntries.length > 0 && (
         <>
-          {satisfiedEntries.length !== 0 && (
-            <YStack>
-              <Heading variant="sub2">UNAVAILABLE CARDS</Heading>
-            </YStack>
-          )}
-          {unsatisfiedEntries.map((entry) => (
-            <CardWithAttributes
-              key={entry.inputDescriptorId}
-              name={entry.name ?? 'Credential'}
-              // We only have the attribute paths, no way to know how to render
-              // TODO: we could look at the vct?
-              // TODO: we should maybe support partial matches (i.e. vct matches), as then we can
-              // show a much better UI (you have the cred, but age is not valid, or this param is missing)
-              formattedDisclosedAttributes={getUnsatisfiedAttributePathsForDisplay(entry.requestedAttributePaths)}
-              backgroundColor="$grey-800"
-              textColor="$white"
-            />
-          ))}
+          {formatUnsatisfiedEntries.map(({ credential, ...entry }) => {
+            const availableAttributes = Object.keys(credential?.attributes ?? {})
+            const requestedAttributes = getUnsatisfiedAttributePathsForDisplay(entry.requestedAttributePaths)
+            const missingAttributes = requestedAttributes.filter((attr) => !availableAttributes.includes(attr))
+            const attributeValuesThatCouldBeDisclosed = requestedAttributes.filter((attr) =>
+              availableAttributes.includes(attr)
+            )
+
+            // Attributes with their values that could be found in the credential
+            const attributesWithValuesThatCouldBeDisclosed = attributeValuesThatCouldBeDisclosed.reduce<
+              Record<string, unknown>
+            >(
+              (acc, attr) => ({
+                ...acc,
+                [attr]: credential?.attributes[attr],
+              }),
+              {}
+            )
+
+            // Add missing attributes to the disclosed payload without values
+            const disclosedPayloadWithMissingAttributes = {
+              ...attributesWithValuesThatCouldBeDisclosed,
+              ...Object.fromEntries(missingAttributes.map((attr) => [attr, 'value-not-found'])),
+            }
+
+            return (
+              <CardWithAttributes
+                key={entry.inputDescriptorId}
+                id={credential?.id}
+                name={credential?.display.name ?? entry.name ?? 'Credential'}
+                formattedDisclosedAttributes={getUnsatisfiedAttributePathsForDisplay(entry.requestedAttributePaths)}
+                backgroundImage={credential?.display.backgroundImage}
+                backgroundColor={credential?.display.backgroundColor ?? '$grey-800'}
+                disclosedPayload={disclosedPayloadWithMissingAttributes}
+                textColor={credential?.display.textColor ?? '$white'}
+                issuerImage={credential?.display.issuer.logo}
+              />
+            )
+          })}
         </>
       )}
     </YStack>

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

@@ -2,7 +2,7 @@ import type { OverAskingResponse } from '@easypid/use-cases/OverAskingApi'
 import type { DisplayImage, FormattedSubmission } from '@package/agent'
 import { DualResponseButtons, useScrollViewPosition } from '@package/app'
 import { useWizard } from '@package/app'
-import { Button, Heading, HeroIcons, MessageBox, Paragraph, ScrollView, YStack } from '@package/ui'
+import { Button, Heading, HeroIcons, MessageBox, ScrollView, YStack } from '@package/ui'
 import { useState } from 'react'
 import { Spacer } from 'tamagui'
 import { RequestPurposeSection } from '../components/RequestPurposeSection'
@@ -104,12 +104,7 @@ export const ShareCredentialsSlide = ({
             isLoading={isProcessing}
           />
         ) : (
-          <YStack gap="$3">
-            <Paragraph variant="sub" fontWeight="$medium" ta="center" color="$danger-500">
-              You don't have the required cards
-            </Paragraph>
-            <Button.Solid onPress={onDecline}>Close</Button.Solid>
-          </YStack>
+          <Button.Solid onPress={onDecline}>Close</Button.Solid>
         )}
       </YStack>
     </YStack>

packages/app/src/components/CardWithAttributes.tsx

@@ -16,7 +16,7 @@ import { useRouter } from 'expo-router'
 import { useMemo } from 'react'
 import { BlurBadge } from './BlurBadge'
 
-interface CardWithAttributesProps {
+export interface CardWithAttributesProps {
   id?: string
   name: string
   backgroundColor?: string

packages/app/src/components/CredentialAttributes.tsx

@@ -229,6 +229,8 @@ const PrimitiveArrayRow = ({ name, value }: { name: string; value: (string | num
 }
 
 const ValueRow = ({ name, value }: { name: string; value: string }) => {
+  const isInvalid = value === 'value-not-found'
+
   return (
     <YStack
       bg="$tableBackgroundColor"
@@ -241,7 +243,7 @@ const ValueRow = ({ name, value }: { name: string; value: string }) => {
       <Paragraph variant="annotation" color="$grey-600" fontWeight="$medium">
         {name}
       </Paragraph>
-      <Paragraph color="$grey-900">{value}</Paragraph>
+      <Paragraph color={isInvalid ? '$danger-500' : '$grey-900'}>{isInvalid ? 'Not found' : value}</Paragraph>
     </YStack>
   )
 }