feat: select alternative credentials for proof

packages/legacy/core/App/components/misc/CredentialCard.tsx

@@ -21,6 +21,8 @@ interface CredentialCardProps {
   displayItems?: (Attribute | Predicate)[]
   existsInWallet?: boolean
   satisfiedPredicates?: boolean
+  hasAltCredentials?: boolean
+  handleAltCredChange?: () => void
 }
 
 const CredentialCard: React.FC<CredentialCardProps> = ({
@@ -32,6 +34,8 @@ const CredentialCard: React.FC<CredentialCardProps> = ({
   credName,
   existsInWallet,
   satisfiedPredicates,
+  hasAltCredentials,
+  handleAltCredChange,
   style = {},
   onPress = undefined,
 }) => {
@@ -50,6 +54,8 @@ const CredentialCard: React.FC<CredentialCardProps> = ({
           credDefId={credDefId}
           schemaId={schemaId}
           credential={credential}
+          handleAltCredChange={handleAltCredChange}
+          hasAltCredentials={hasAltCredentials}
           proof
           elevated
         ></CredentialCard11>

packages/legacy/core/App/components/misc/CredentialCard11.tsx

@@ -30,6 +30,8 @@ interface CredentialCard11Props {
   credDefId?: string
   schemaId?: string
   proof?: boolean
+  hasAltCredentials?: boolean
+  handleAltCredChange?: () => void
 }
 
 /*
@@ -73,6 +75,8 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
   credDefId,
   schemaId,
   proof,
+  hasAltCredentials,
+  handleAltCredChange,
 }) => {
   const { width } = useWindowDimensions()
   const borderRadius = 10
@@ -192,6 +196,22 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
       fontSize: 22,
       transform: [{ rotate: '-30deg' }],
     },
+    selectedCred: {
+      borderWidth: 5,
+      borderRadius: 15,
+      borderColor: ColorPallet.semantic.focus,
+    },
+    seperator: {
+      width: '100%',
+      height: 2,
+      marginVertical: 10,
+      backgroundColor: ColorPallet.grayscale.lightGrey,
+    },
+    credActionText: {
+      fontSize: 20,
+      fontWeight: 'bold',
+      color: ColorPallet.brand.link,
+    },
   })
 
   const parseAttribute = (item: (Attribute & Predicate) | undefined) => {
@@ -422,6 +442,26 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
           renderItem={({ item }) => {
             return renderCardAttribute(item as Attribute & Predicate)
           }}
+          ListFooterComponent={
+            hasAltCredentials ? (
+              <View>
+                <View style={styles.seperator}></View>
+                <View>
+                  <TouchableOpacity
+                    onPress={handleAltCredChange}
+                    testID={testIdWithKey('changeCredential')}
+                    style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+                  >
+                    <Text style={styles.credActionText}>{t('ProofRequest.ChangeCredential')}</Text>
+                    <Icon
+                      style={{ ...styles.credActionText, fontSize: styles.credActionText.fontSize + 5 }}
+                      name="chevron-right"
+                    ></Icon>
+                  </TouchableOpacity>
+                </View>
+              </View>
+            ) : null
+          }
         />
       </View>
     )
@@ -499,7 +539,10 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
     }
 
     return (
-      <View testID={testIdWithKey('CredentialCardStatus')} style={styles.statusContainer}>
+      <View
+        testID={testIdWithKey('CredentialCardStatus')}
+        style={[styles.statusContainer, { position: 'absolute', right: 0, top: 0 }]}
+      >
         <Status status={status} />
       </View>
     )
@@ -531,7 +574,12 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
   }
   return overlay.bundle ? (
     <View
-      style={[styles.container, style, { elevation: elevated ? 5 : 0, overflow: 'hidden' }]}
+      style={[
+        styles.container,
+        style,
+        { elevation: elevated ? 5 : 0, overflow: 'hidden' },
+        hasAltCredentials ? styles.selectedCred : undefined,
+      ]}
       onLayout={(event) => {
         setDimensions({ cardHeight: event.nativeEvent.layout.height, cardWidth: event.nativeEvent.layout.width })
       }}

packages/legacy/core/App/hooks/proofs.ts

@@ -1,6 +1,9 @@
 import { ProofExchangeRecord } from '@aries-framework/core'
-import { useProofs } from '@aries-framework/react-hooks'
+import { useAgent, useCredentials, useProofById, useProofs } from '@aries-framework/react-hooks'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { retrieveCredentialsForProof } from '../utils/helpers'
 
 export const useProofsByConnectionId = (connectionId: string): ProofExchangeRecord[] => {
   const { records: proofs } = useProofs()
@@ -9,3 +12,16 @@ export const useProofsByConnectionId = (connectionId: string): ProofExchangeReco
     [proofs, connectionId]
   )
 }
+
+export const useAllCredentialsForProof = (proofId: string) => {
+  const { t } = useTranslation()
+  const { agent } = useAgent()
+  const fullCredentials = useCredentials().records
+  const proof = useProofById(proofId)
+  return useMemo(() => {
+    if (!proof || !agent) {
+      return
+    }
+    return retrieveCredentialsForProof(agent, proof, fullCredentials, t)
+  }, [proofId])
+}

packages/legacy/core/App/localization/en/index.ts

@@ -414,8 +414,10 @@ const translation = {
     "ProofRequest": "Proof Request",
     "RequestProcessing": "Just a moment...",
     "OfferDelay": "Offer delay",
+    "ChangeCredential": "Change credential",
     "RejectThisProof?": "Reject this Proof Request?",
     "DeclineThisProof?": "Decline this Proof Request?",
+    "MultipleCredentials": "You have multiple credentials to choose from:",
     "AcceptingProof": "Accepting Proof",
     "SuccessfullyAcceptedProof": "Successfully Accepted Proof",
     "SensitiveInformation": "This request is asking for sensitive information.",
@@ -511,6 +513,7 @@ const translation = {
     "CredentialDetails": "Credential Details",
     "Notifications": "Notifications",
     "CredentialOffer": "Credential Offer",
+    "ProofChangeCredential": "Choose a credential",
     "ProofRequest": "Proof Request",
     "ProofRequestDetails": "Proof Request Details",
     "ProofRequestAttributeDetails": "Proof Request Attribute Details",

packages/legacy/core/App/localization/fr/index.ts

@@ -412,8 +412,10 @@ const translation = {
         "ProofRequest": "Demande de preuve",
         "RequestProcessing": "Juste un instant...",
         "OfferDelay": "Retard de l'offre",
+        "ChangeCredential": "Change credential (FR)",
         "RejectThisProof?": "Rejeter cette preuve?",
         "AcceptingProof": "Acceptation de la preuve",
+        "MultipleCredentials": "You have multiple credentials to choose from: (FR)",
         "SuccessfullyAcceptedProof": "Preuve acceptée avec succès",
         "SensitiveInformation": "This request is asking for sensitive information. (FR)",
         "RejectingProof": "Rejet de la preuve",
@@ -498,6 +500,7 @@ const translation = {
         "CredentialDetails": "Détails des justificatifs",
         "Notifications": "Notifications",
         "CredentialOffer": "Offre de justificatif",
+        "ProofChangeCredential":"Choose a credential (FR)",
         "ProofRequest": "Demande de preuve",
         "ProofRequestAttributeDetails": "Détails des attributs de la demande de preuve",
         "ProofDetails": "Détails de la preuve",

packages/legacy/core/App/localization/pt-br/index.ts

@@ -394,9 +394,11 @@ const translation = {
     "ProofRequest": "Requisição de Prova",
     "RequestProcessing": "Só um momento...",
     "OfferDelay": "Atrasar oferta",
+    "ChangeCredential": "Escolher credencial",
     "RejectThisProof?": "Rejeitar esta Requisição de Prova?",
     "DeclineThisProof?": "Recusar esta Requisição de Prova?",
     "AcceptingProof": "Aceitando Prova",
+    "MultipleCredentials": "Você tem múltiplas credenciais para escolher:",
     "SuccessfullyAcceptedProof": "Prova Aceita com Sucesso",
     "SensitiveInformation": "This request is asking for sensitive information. (PB)",
     "ProofRequestNotFound": "Requisição de Prova não encontrada.",
@@ -482,6 +484,7 @@ const translation = {
     "Notifications": "Notificações",
     "CredentialOffer": "Oferta de Credencial",
     "ProofRequest": "Requisição de Prova",
+    "ProofChangeCredential":"Escolha uma credencial",
     "ProofRequestDetails": "Detalhes Da Solicitação De Comprovação",
     "ProofRequestAttributeDetails": "Atributos de Requisição de Prova",
     "ProofDetails": "Detalhes da prova",

packages/legacy/core/App/navigators/ProofRequestStack.tsx

@@ -6,6 +6,7 @@ import HeaderButton, { ButtonLocation } from '../components/buttons/HeaderButton
 import HeaderRightHome from '../components/buttons/HeaderHome'
 import { useTheme } from '../contexts/theme'
 import ListProofRequests from '../screens/ListProofRequests'
+import ProofChangeCredential from '../screens/ProofChangeCredential'
 import ProofDetails from '../screens/ProofDetails'
 import ProofRequestDetails from '../screens/ProofRequestDetails'
 import ProofRequestUsageHistory from '../screens/ProofRequestUsageHistory'
@@ -35,6 +36,11 @@ const ProofRequestStack: React.FC = () => {
           title: '',
         })}
       />
+      <Stack.Screen
+        name={Screens.ProofChangeCredential}
+        component={ProofChangeCredential}
+        options={{ title: t('Screens.ProofChangeCredential') }}
+      ></Stack.Screen>
       <Stack.Screen
         name={Screens.ProofRequesting}
         component={ProofRequesting}