From f68e6d60f9659907b16a8e46cc3f4c74c5b4e4fa Mon Sep 17 00:00:00 2001 From: Mostafa Gamal Date: Mon, 25 Nov 2024 03:47:21 -0500 Subject: [PATCH 1/6] Fix themeing bugs in OpenID4VCP Proof Requests Signed-off-by: Mostafa Gamal --- .../legacy/core/App/localization/en/index.ts | 2 + .../legacy/core/App/localization/fr/index.ts | 2 + .../core/App/localization/pt-br/index.ts | 2 + .../openid/components/CredentialRowCard.tsx | 22 +++- .../core/App/modules/openid/displayProof.tsx | 2 + .../screens/OpenIDProofPresentation.tsx | 107 +++++++++++------- .../core/App/modules/openid/utils/utils.tsx | 12 +- packages/legacy/core/package.json | 3 + yarn.lock | 32 +++++- 9 files changed, 129 insertions(+), 55 deletions(-) diff --git a/packages/legacy/core/App/localization/en/index.ts b/packages/legacy/core/App/localization/en/index.ts index d2064bc6a0..728cf392e3 100644 --- a/packages/legacy/core/App/localization/en/index.ts +++ b/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", diff --git a/packages/legacy/core/App/localization/fr/index.ts b/packages/legacy/core/App/localization/fr/index.ts index 4bba33565b..8f9a7b73e4 100644 --- a/packages/legacy/core/App/localization/fr/index.ts +++ b/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", diff --git a/packages/legacy/core/App/localization/pt-br/index.ts b/packages/legacy/core/App/localization/pt-br/index.ts index fdcb0d51e9..ed13880e07 100644 --- a/packages/legacy/core/App/localization/pt-br/index.ts +++ b/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", diff --git a/packages/legacy/core/App/modules/openid/components/CredentialRowCard.tsx b/packages/legacy/core/App/modules/openid/components/CredentialRowCard.tsx index 5f0cca8d53..2f9fa19620 100644 --- a/packages/legacy/core/App/modules/openid/components/CredentialRowCard.tsx +++ b/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 ( - + + {bgImage ? : null} + - {name} - {issuer && {issuer}} + {name} + {issuer && {issuer}} diff --git a/packages/legacy/core/App/modules/openid/displayProof.tsx b/packages/legacy/core/App/modules/openid/displayProof.tsx index 3f5fe760d6..8e22b1eb32 100644 --- a/packages/legacy/core/App/modules/openid/displayProof.tsx +++ b/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, } diff --git a/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx b/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx index 6591b6aeb6..c6cf14be78 100644 --- a/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx +++ b/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 -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 = ({ navigation, route: { @@ -57,12 +34,48 @@ const OpenIDProofPresentation: React.FC = ({ 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 = ({ return ( - - You have received an information request - {verifierName ? ` from ${verifierName}` : ''}. - + {t('ProofRequest.ReceiveProofTitle')} + {'\n'} + {verifierName ? verifierName : ''} ) @@ -140,21 +152,30 @@ const OpenIDProofPresentation: React.FC = ({ return ( - {}} /> - {s.isSatisfied && selectedCredential?.requestedAttributes ? ( - - {s.description && {s.description}} - - {selectedCredential.requestedAttributes.map((a) => ( - - • {sanitizeString(a)} - - ))} + {}} + /> + + {s.isSatisfied && selectedCredential?.requestedAttributes ? ( + + {s.description && {s.description}} + + {selectedCredential.requestedAttributes.map((a) => ( + + • {sanitizeString(a)} + + ))} + - - ) : ( - This credential is not present in your wallet. - )} + ) : ( + {t('ProofRequest.CredentailNotInWallet')} + )} + ) })} @@ -222,7 +243,7 @@ const OpenIDProofPresentation: React.FC = ({ {footer()} - + => { diff --git a/packages/legacy/core/package.json b/packages/legacy/core/package.json index dedee02c42..b872b8a7ff 100644 --- a/packages/legacy/core/package.json +++ b/packages/legacy/core/package.json @@ -230,5 +230,8 @@ "module", "typescript" ] + }, + "dependencies": { + "react-native-url-polyfill": "^2.0.0" } } diff --git a/yarn.lock b/yarn.lock index 0666d81a4b..d2f21d50f2 100644 --- a/yarn.lock +++ b/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,6 +21983,13 @@ __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" @@ -21978,6 +21997,17 @@ __metadata: 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" From 69b6057a4d96f954e1afe45e792ac6a290723ff8 Mon Sep 17 00:00:00 2001 From: Mostafa Gamal Date: Mon, 2 Dec 2024 21:41:37 -0500 Subject: [PATCH 2/6] use credo utils to get domain from url Signed-off-by: Mostafa Gamal --- packages/legacy/core/App/modules/openid/utils/utils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/legacy/core/App/modules/openid/utils/utils.tsx b/packages/legacy/core/App/modules/openid/utils/utils.tsx index eca5a86c6c..3e19b748a5 100644 --- a/packages/legacy/core/App/modules/openid/utils/utils.tsx +++ b/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' import 'react-native-url-polyfill/auto' @@ -19,8 +20,7 @@ export function sanitizeString(str: string) { export function getHostNameFromUrl(url: string) { try { - const parsedUrl = new URL(url) - return parsedUrl.hostname + return getDomainFromUrl(url) } catch (error) { return 'undefined!' } From 6aa495faee063ad27bafb0a1c27edee01f5383f3 Mon Sep 17 00:00:00 2001 From: Mostafa Gamal Date: Wed, 4 Dec 2024 12:01:14 -0500 Subject: [PATCH 3/6] Revert back changes to package.json Signed-off-by: Mostafa Gamal --- .../core/App/modules/openid/utils/utils.tsx | 1 - packages/legacy/core/package.json | 3 -- yarn.lock | 32 +------------------ 3 files changed, 1 insertion(+), 35 deletions(-) diff --git a/packages/legacy/core/App/modules/openid/utils/utils.tsx b/packages/legacy/core/App/modules/openid/utils/utils.tsx index 3e19b748a5..776630d6bd 100644 --- a/packages/legacy/core/App/modules/openid/utils/utils.tsx +++ b/packages/legacy/core/App/modules/openid/utils/utils.tsx @@ -1,6 +1,5 @@ import { getDomainFromUrl } from '@credo-ts/core' 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). diff --git a/packages/legacy/core/package.json b/packages/legacy/core/package.json index b872b8a7ff..dedee02c42 100644 --- a/packages/legacy/core/package.json +++ b/packages/legacy/core/package.json @@ -230,8 +230,5 @@ "module", "typescript" ] - }, - "dependencies": { - "react-native-url-polyfill": "^2.0.0" } } diff --git a/yarn.lock b/yarn.lock index d2f21d50f2..0666d81a4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2887,7 +2887,6 @@ __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 @@ -18231,7 +18230,7 @@ __metadata: languageName: node linkType: hard -"punycode@npm:^2.1.0, punycode@npm:^2.1.1": +"punycode@npm:^2.1.0": version: 2.3.1 resolution: "punycode@npm:2.3.1" checksum: bb0a0ceedca4c3c57a9b981b90601579058903c62be23c5e8e843d2c2d4148a3ecf029d5133486fb0e1822b098ba8bba09e89d6b21742d02fa26bda6441a6fb2 @@ -18870,17 +18869,6 @@ __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" @@ -21983,13 +21971,6 @@ __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" @@ -21997,17 +21978,6 @@ __metadata: 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" From 1a19b26dcbecc979590589238ce5d2548c3197ee Mon Sep 17 00:00:00 2001 From: Mostafa Gamal Date: Fri, 13 Dec 2024 15:25:21 -0500 Subject: [PATCH 4/6] Adress comments Signed-off-by: Mostafa Gamal --- packages/legacy/core/App/localization/en/index.ts | 2 +- packages/legacy/core/App/modules/openid/utils/utils.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/legacy/core/App/localization/en/index.ts b/packages/legacy/core/App/localization/en/index.ts index 82cc794f73..903e0ad135 100644 --- a/packages/legacy/core/App/localization/en/index.ts +++ b/packages/legacy/core/App/localization/en/index.ts @@ -684,7 +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.", - "CredentailNotInWallet": "This credential is not present in your wallet.", + "CredentialNotInWallet": "This credential is not present in your wallet.", }, "Settings": { "Version": "Version", diff --git a/packages/legacy/core/App/modules/openid/utils/utils.tsx b/packages/legacy/core/App/modules/openid/utils/utils.tsx index 776630d6bd..2c4cac2abb 100644 --- a/packages/legacy/core/App/modules/openid/utils/utils.tsx +++ b/packages/legacy/core/App/modules/openid/utils/utils.tsx @@ -21,7 +21,7 @@ export function getHostNameFromUrl(url: string) { try { return getDomainFromUrl(url) } catch (error) { - return 'undefined!' + throw error } } From b228c02ca0555974306e3bb4dcd07fefc41fed94 Mon Sep 17 00:00:00 2001 From: Mostafa Gamal Date: Fri, 13 Dec 2024 15:35:23 -0500 Subject: [PATCH 5/6] fix language Signed-off-by: Mostafa Gamal --- .../core/App/modules/openid/screens/OpenIDProofPresentation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx b/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx index c6cf14be78..30c241b6d9 100644 --- a/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx +++ b/packages/legacy/core/App/modules/openid/screens/OpenIDProofPresentation.tsx @@ -173,7 +173,7 @@ const OpenIDProofPresentation: React.FC = ({ ) : ( - {t('ProofRequest.CredentailNotInWallet')} + {t('ProofRequest.CredentialNotInWallet')} )} From 3b97abcf31c3a82635d4fbbcc53fb0ce4e40319f Mon Sep 17 00:00:00 2001 From: Mostafa Gamal Date: Fri, 13 Dec 2024 15:41:58 -0500 Subject: [PATCH 6/6] explicit error Signed-off-by: Mostafa Gamal --- packages/legacy/core/App/modules/openid/utils/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/legacy/core/App/modules/openid/utils/utils.tsx b/packages/legacy/core/App/modules/openid/utils/utils.tsx index 2c4cac2abb..015c9aa733 100644 --- a/packages/legacy/core/App/modules/openid/utils/utils.tsx +++ b/packages/legacy/core/App/modules/openid/utils/utils.tsx @@ -21,7 +21,7 @@ export function getHostNameFromUrl(url: string) { try { return getDomainFromUrl(url) } catch (error) { - throw error + throw new Error(`Error getting hostname from url: ${error}`) } }