fix: themeing bugs in OpenID4VCP Proof Requests

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

@@ -615,6 +615,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",
@@ -676,6 +677,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.",
+    "CredentailNotInWallet": "This credential is not present in your wallet.",
   },
   "Settings": {
     "Version": "Version",

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

@@ -609,6 +609,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",
@@ -661,6 +662,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

@@ -591,6 +591,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",
@@ -646,6 +647,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.CredentailNotInWallet')}</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,4 +1,5 @@
 import { Attribute, Field } from '@hyperledger/aries-oca/build/legacy'
+import 'react-native-url-polyfill/auto'
 
 /**
  * Converts a camelCase string to a sentence format (first letter capitalized, rest in lower case).
@@ -17,11 +18,12 @@ 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 {
+    const parsedUrl = new URL(url)
+    return parsedUrl.hostname
+  } catch (error) {
+    return 'undefined!'
+  }
 }
 
 export const buildFieldsFromOpenIDTemplate = (data: { [key: string]: unknown }): Array<Field> => {

packages/legacy/core/package.json

@@ -230,5 +230,8 @@
       "module",
       "typescript"
     ]
+  },
+  "dependencies": {
+    "react-native-url-polyfill": "^2.0.0"
   }
 }

yarn.lock

@@ -2887,6 +2887,7 @@ __metadata:
     react-native-svg-transformer: ^0.14.3
     react-native-tcp-socket: ^6.0.6
     react-native-toast-message: ^2.1.6
+    react-native-url-polyfill: ^2.0.0
     react-native-uuid: ^2.0.1
     react-native-vector-icons: ^10.0.0
     react-native-vision-camera: 4.3.1
@@ -18230,7 +18231,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.0":
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
   checksum: bb0a0ceedca4c3c57a9b981b90601579058903c62be23c5e8e843d2c2d4148a3ecf029d5133486fb0e1822b098ba8bba09e89d6b21742d02fa26bda6441a6fb2
@@ -18869,6 +18870,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-url-polyfill@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "react-native-url-polyfill@npm:2.0.0"
+  dependencies:
+    whatwg-url-without-unicode: 8.0.0-3
+  peerDependencies:
+    react-native: "*"
+  checksum: 1a2e1030a62fd093764b5330ce0ff34d72246e581dd2892cddc347d8621931aeb2c9ea3e054960484a1259230e8461e569e1890f1ff452d3c5c0adef70190fc3
+  languageName: node
+  linkType: hard
+
 "react-native-uuid@npm:^2.0.1":
   version: 2.0.2
   resolution: "react-native-uuid@npm:2.0.2"
@@ -21971,13 +21983,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webidl-conversions@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "webidl-conversions@npm:5.0.0"
+  checksum: ccf1ec2ca7c0b5671e5440ace4a66806ae09c49016ab821481bec0c05b1b82695082dc0a27d1fe9d804d475a408ba0c691e6803fd21be608e710955d4589cd69
+  languageName: node
+  linkType: hard
+
 "whatwg-fetch@npm:^3.0.0":
   version: 3.6.20
   resolution: "whatwg-fetch@npm:3.6.20"
   checksum: c58851ea2c4efe5c2235f13450f426824cf0253c1d45da28f45900290ae602a20aff2ab43346f16ec58917d5562e159cd691efa368354b2e82918c2146a519c5
   languageName: node
   linkType: hard
 
+"whatwg-url-without-unicode@npm:8.0.0-3":
+  version: 8.0.0-3
+  resolution: "whatwg-url-without-unicode@npm:8.0.0-3"
+  dependencies:
+    buffer: ^5.4.3
+    punycode: ^2.1.1
+    webidl-conversions: ^5.0.0
+  checksum: 1fe266f7161e0bd961087c1254a5a59d1138c3d402064495eed65e7590d9caed5a1d9acfd6e7a1b0bf0431253b0e637ee3e4ffc08387cd60e0b2ddb9d4687a4b
+  languageName: node
+  linkType: hard
+
 "whatwg-url@npm:^5.0.0":
   version: 5.0.0
   resolution: "whatwg-url@npm:5.0.0"