fix: themeing bugs in OpenID4VCP Proof Requests (#1332)

Signed-off-by: Mostafa Gamal <[email protected]>

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

@@ -622,6 +622,7 @@ const translation = {
   },
   "ProofRequest": {
     "RequestForProof": "Request for proof",
+    "ReceiveProofTitle": "Received an information request from",
     "JustAMoment": "Just a moment while we prepare things for you...",
     "FromYourWallet": "From your wallet",
     "MissingCredentials": "Missing credentials",
@@ -683,6 +684,7 @@ const translation = {
     "NoInfoShared": "No information was shared",
     "YourInfo": "Your information was not shared",
     "YouCantRespond": "You can't respond due to the following reasons. Please address them before continuing.",
+    "CredentialNotInWallet": "This credential is not present in your wallet.",
   },
   "Settings": {
     "Version": "Version",

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

@@ -616,6 +616,7 @@ const translation = {
     },
     "ProofRequest": {
         "RequestForProof": "Demande de preuve",
+        "ReceiveProofTitle": "Received an information request from(fr)",
         "JustAMoment": "Juste un moment pendant que nous préparons les choses pour vous...",
         "FromYourWallet": "Depuis votre portefeuille",
         "MissingCredentials": "Il manque des attestations",
@@ -668,6 +669,7 @@ const translation = {
         "NoInfoShared": "Aucune information n'a été partagée",
         "YourInfo": "Votre information n'a pas été partagée",
         "YouCantRespond": "You can't respond due to the following reasons. Please address them before continuing. (FR)",
+        "CredentailNotInWallet": "This credential is not present in your wallet.(FR)",
     },
     "Settings": {
         "Version": "Version",

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

@@ -596,6 +596,7 @@ const translation = {
   },
   "ProofRequest": {
     "RequestForProof": "Request for proof (PT-BR)",
+    "ReceiveProofTitle": "Received an information request from(pt-br)",
     "JustAMoment": "Aguarde enquanto preparamos as coisas para você...",
     "FromYourWallet": "De sua carteira",
     "MissingCredentials": "Credenciais não encontradas",
@@ -651,6 +652,7 @@ const translation = {
     "NoInfoShared": "No information was shared (PT-BR)",
     "YourInfo": "Your information was not shared (PT-BR)",
     "YouCantRespond": "You can't respond due to the following reasons. Please address them before continuing. (PT-BR)",
+    "CredentailNotInWallet": "This credential is not present in your wallet. (PT-BR)",
   },
   "Settings": {
     "Version": "Versão",

packages/legacy/core/App/modules/openid/components/CredentialRowCard.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import { Image, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useTheme } from '../../../contexts/theme'
 
@@ -7,14 +7,19 @@ interface CredentialRowCardProps {
   issuer?: string
   onPress?(): void
   bgColor?: string
+  bgImage?: string
+  txtColor?: string
   hideBorder?: boolean
   showFullText?: boolean
 }
 
-export function OpenIDCredentialRowCard({ name, issuer, bgColor, onPress }: CredentialRowCardProps) {
+export function OpenIDCredentialRowCard({ name, issuer, bgColor, bgImage, txtColor, onPress }: CredentialRowCardProps) {
   const { TextTheme } = useTheme()
   const { width } = useWindowDimensions()
 
+  const badgeWidth = 0.25 * width
+  const badgeHeight = 0.6 * badgeWidth
+
   const style = StyleSheet.create({
     container: {},
     rowContainer: {
@@ -26,23 +31,28 @@ export function OpenIDCredentialRowCard({ name, issuer, bgColor, onPress }: Cred
     },
     issuerBadge: {
       borderRadius: 8,
-      width: '30%',
+      width: badgeHeight,
+      height: badgeHeight,
       backgroundColor: 'red',
       marginRight: 10,
+      overflow: 'hidden',
     },
     infoContainer: {
       flex: 1,
       justifyContent: 'space-between',
     },
+    imageStyle: { width: badgeWidth, height: badgeHeight, borderRadius: 8 },
   })
   //
   return (
     <View style={style.container}>
       <TouchableOpacity onPress={onPress} style={style.rowContainer}>
-        <View style={[style.issuerBadge, bgColor ? { backgroundColor: bgColor } : {}]} />
+        <View style={[style.issuerBadge, bgColor ? { backgroundColor: bgColor } : {}]}>
+          {bgImage ? <Image style={style.imageStyle} source={{ uri: bgImage }} resizeMode="cover" /> : null}
+        </View>
         <View style={[style.infoContainer, issuer ? { justifyContent: 'center' } : {}]}>
-          <Text style={TextTheme.title}>{name}</Text>
-          {issuer && <Text style={TextTheme.labelSubtitle}>{issuer}</Text>}
+          <Text style={[TextTheme.title, txtColor ? { color: txtColor } : {}]}>{name}</Text>
+          {issuer && <Text style={[TextTheme.labelSubtitle, txtColor ? { color: txtColor } : {}]}>{issuer}</Text>}
         </View>
       </TouchableOpacity>
     </View>

packages/legacy/core/App/modules/openid/displayProof.tsx

@@ -26,6 +26,7 @@ export interface FormattedSubmissionEntry {
     metadata?: CredentialMetadata
     backgroundColor?: string
     backgroundImage?: DisplayImage
+    textColor?: string
     claimFormat: ClaimFormat | 'AnonCreds'
   }>
 }
@@ -63,6 +64,7 @@ export function formatDifPexCredentialsForRequest(
             disclosedPayload,
             metadata,
             backgroundColor: display.backgroundColor,
+            textColor: display.textColor,
             backgroundImage: display.backgroundImage,
             claimFormat,
           }

packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx

@@ -7,7 +7,6 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 
 import { DeliveryStackParams, Screens, TabStacks } from '../../../types/navigators'
 import { ScrollView, StyleSheet, Text, View } from 'react-native'
-import { ListItems, TextTheme } from '../../../theme'
 import { formatDifPexCredentialsForRequest } from '../displayProof'
 import { testIdWithKey } from '../../../utils/testable'
 import { sanitizeString } from '../utils/utils'
@@ -23,28 +22,6 @@ import ProofRequestAccept from '../../../screens/ProofRequestAccept'
 
 type OpenIDProofPresentationProps = StackScreenProps<DeliveryStackParams, Screens.OpenIDProofPresentation>
 
-const styles = StyleSheet.create({
-  pageContent: {
-    flexGrow: 1,
-    justifyContent: 'space-between',
-    padding: 10,
-  },
-  credentialsList: {
-    marginTop: 20,
-    justifyContent: 'space-between',
-  },
-  headerTextContainer: {
-    paddingVertical: 16,
-  },
-  headerText: {
-    ...ListItems.recordAttributeText,
-    flexShrink: 1,
-  },
-  footerButton: {
-    paddingTop: 10,
-  },
-})
-
 const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
   navigation,
   route: {
@@ -57,12 +34,48 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
   const [buttonsVisible, setButtonsVisible] = useState(true)
   const [acceptModalVisible, setAcceptModalVisible] = useState(false)
 
-  const { ColorPallet } = useTheme()
+  const { ColorPallet, ListItems, TextTheme } = useTheme()
   const { t } = useTranslation()
   const { agent } = useAgent()
 
   const toggleDeclineModalVisible = () => setDeclineModalVisible(!declineModalVisible)
 
+  const styles = StyleSheet.create({
+    pageContent: {
+      flexGrow: 1,
+      justifyContent: 'space-between',
+      padding: 10,
+    },
+    credentialsList: {
+      marginTop: 20,
+      justifyContent: 'space-between',
+    },
+    headerTextContainer: {
+      paddingVertical: 16,
+    },
+    headerText: {
+      ...ListItems.recordAttributeText,
+      flexShrink: 1,
+    },
+    footerButton: {
+      paddingTop: 10,
+    },
+    cardContainer: {
+      paddingHorizontal: 25,
+      paddingVertical: 16,
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+      marginBottom: 20,
+    },
+    cardAttributes: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      borderColor: ColorPallet.grayscale.lightGrey,
+      borderWidth: 1,
+      borderRadius: 8,
+      padding: 8,
+    },
+  })
+
   const submission = useMemo(
     () =>
       credential && credential.credentialsForRequest
@@ -120,10 +133,9 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
     return (
       <View style={styles.headerTextContainer}>
         <Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-          <Text style={TextTheme.title}>
-            You have received an information request
-            {verifierName ? ` from ${verifierName}` : ''}.
-          </Text>
+          <Text style={TextTheme.normal}>{t('ProofRequest.ReceiveProofTitle')}</Text>
+          {'\n'}
+          <Text style={TextTheme.title}>{verifierName ? verifierName : ''}</Text>
         </Text>
       </View>
     )
@@ -140,21 +152,30 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
 
           return (
             <View key={i}>
-              <OpenIDCredentialRowCard name={s.name} issuer={verifierName} onPress={() => {}} />
-              {s.isSatisfied && selectedCredential?.requestedAttributes ? (
-                <View style={{ marginTop: 16, gap: 8 }}>
-                  {s.description && <Text style={TextTheme.labelSubtitle}>{s.description}</Text>}
-                  <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                    {selectedCredential.requestedAttributes.map((a) => (
-                      <View key={a} style={{ flexBasis: '50%' }}>
-                        <Text style={TextTheme.normal}>• {sanitizeString(a)}</Text>
-                      </View>
-                    ))}
+              <OpenIDCredentialRowCard
+                name={s.name}
+                bgColor={selectedCredential.backgroundColor}
+                txtColor={selectedCredential.textColor}
+                bgImage={selectedCredential.backgroundImage?.url}
+                issuer={verifierName}
+                onPress={() => {}}
+              />
+              <View style={styles.cardContainer}>
+                {s.isSatisfied && selectedCredential?.requestedAttributes ? (
+                  <View style={{ marginTop: 16, gap: 8 }}>
+                    {s.description && <Text style={TextTheme.labelSubtitle}>{s.description}</Text>}
+                    <View style={styles.cardAttributes}>
+                      {selectedCredential.requestedAttributes.map((a) => (
+                        <View key={a} style={{ flexBasis: '50%' }}>
+                          <Text style={TextTheme.normal}>• {sanitizeString(a)}</Text>
+                        </View>
+                      ))}
+                    </View>
                   </View>
-                </View>
-              ) : (
-                <Text style={TextTheme.title}>This credential is not present in your wallet.</Text>
-              )}
+                ) : (
+                  <Text style={TextTheme.normal}>{t('ProofRequest.CredentialNotInWallet')}</Text>
+                )}
+              </View>
             </View>
           )
         })}
@@ -222,7 +243,7 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
       </ScrollView>
       {footer()}
 
-      <ProofRequestAccept visible={acceptModalVisible} proofId={''} confirmationOnly = {true} />
+      <ProofRequestAccept visible={acceptModalVisible} proofId={''} confirmationOnly={true} />
       <CommonRemoveModal
         usage={ModalUsage.ProofRequestDecline}
         visible={declineModalVisible}

packages/legacy/core/App/modules/openid/utils/utils.tsx

@@ -1,3 +1,4 @@
+import { getDomainFromUrl } from '@credo-ts/core'
 import { Attribute, Field } from '@hyperledger/aries-oca/build/legacy'
 
 /**
@@ -17,11 +18,11 @@ export function sanitizeString(str: string) {
 }
 
 export function getHostNameFromUrl(url: string) {
-  //TODO: Find more elegant way to extract host name
-  // const urlRegex = /^(.*:)\/\/([A-Za-z0-9-.]+)(:[0-9]+)?(.*)$/
-  // const parts = urlRegex.exec(url)
-  // return parts ? parts[2] : undefined
-  return url.split("https://")[1]
+  try {
+    return getDomainFromUrl(url)
+  } catch (error) {
+    throw new Error(`Error getting hostname from url: ${error}`)
+  }
 }
 
 export const buildFieldsFromOpenIDTemplate = (data: { [key: string]: unknown }): Array<Field> => {