From 3fa9a3a9164577d4b44e4aecd78590f1794bb13c Mon Sep 17 00:00:00 2001 From: "A.G.J. Cate" Date: Sun, 8 Oct 2023 21:38:23 +0200 Subject: [PATCH 1/3] WAL-651 use credential mini card from ui-components --- .../assets/logos/SSICredentialLogo/index.tsx | 33 --------------- .../SSICredentialSelectTypeViewItem/index.tsx | 9 ++-- .../SSICredentialSelectViewItem/index.tsx | 9 ++-- .../SSICredentialDetailsScreen/index.tsx | 42 +++++++++---------- .../components/SSICredentialLogo/index.ts | 23 ---------- src/styles/components/components/index.ts | 1 - .../SSICredentialDetailsScreen/index.ts | 8 ++-- 7 files changed, 30 insertions(+), 95 deletions(-) delete mode 100644 src/components/assets/logos/SSICredentialLogo/index.tsx delete mode 100644 src/styles/components/components/SSICredentialLogo/index.ts diff --git a/src/components/assets/logos/SSICredentialLogo/index.tsx b/src/components/assets/logos/SSICredentialLogo/index.tsx deleted file mode 100644 index 401c449e..00000000 --- a/src/components/assets/logos/SSICredentialLogo/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, {FC} from 'react'; -import {ColorValue, ViewStyle} from 'react-native'; - -import {credentialCards} from '../../../../styles/colors'; -import { - SSICredentialLogoImageStyled as BackgroundImage, - SSICredentialLogoContainerStyled as Container, - SSICredentialLogoPlaceholderImageStyled as PlaceholderImage, -} from '../../../../styles/components'; - -export interface IProps { - backgroundColor?: ColorValue; - image?: string; // TODO WAL-302 Support passing in storage location - style?: ViewStyle; -} - -// TODO maybe rename this component as this is actually a small card'ish view -// And create a component that is an actual SSICredentialLogo, which is an image or the PlaceholderImage -const SSICredentialLogo: FC = (props: IProps): JSX.Element => { - const {image, style, backgroundColor = credentialCards.default} = props; - // The uri is a transparent pixel in case there is not background image - const backgroundImage = image - ? {uri: image} - : {uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}; - - return ( - - {!image && } - - ); -}; - -export default SSICredentialLogo; diff --git a/src/components/views/SSICredentialSelectTypeViewItem/index.tsx b/src/components/views/SSICredentialSelectTypeViewItem/index.tsx index eba6bd74..6d78d92e 100644 --- a/src/components/views/SSICredentialSelectTypeViewItem/index.tsx +++ b/src/components/views/SSICredentialSelectTypeViewItem/index.tsx @@ -1,6 +1,7 @@ import React, {FC} from 'react'; import {ViewStyle} from 'react-native'; - +import {SSICredentialMiniCardView} from '@sphereon/ui-components.ssi-react-native'; +import SSICheckbox from '../../fields/SSICheckbox'; import { SSIFlexDirectionRowViewStyled as Container, SSICredentialSelectTypeViewItemContentContainerStyled as ContentContainer, @@ -9,13 +10,11 @@ import { SSICredentialSelectTypeViewItemLogoCheckboxContainerStyled as LogoCheckboxContainer, SSICredentialSelectTypeViewItemLogoContainerStyled as LogoContainer, } from '../../../styles/components'; -import SSICredentialLogo from '../../assets/logos/SSICredentialLogo'; -import SSICheckbox from '../../fields/SSICheckbox'; export interface Props { title: string; isSelected: boolean; - image?: string; // TODO WAL-302 Support passing in storage location + image?: string; style?: ViewStyle; onPress: () => Promise; } @@ -26,7 +25,7 @@ const SSICredentialSelectTypeViewItem: FC = (props: Props): JSX.Element = return ( - + diff --git a/src/components/views/SSICredentialSelectViewItem/index.tsx b/src/components/views/SSICredentialSelectViewItem/index.tsx index 38f932a3..e3f3c88c 100644 --- a/src/components/views/SSICredentialSelectViewItem/index.tsx +++ b/src/components/views/SSICredentialSelectViewItem/index.tsx @@ -1,6 +1,7 @@ import React, {FC} from 'react'; import {TouchableOpacity, ViewStyle} from 'react-native'; - +import {SSICredentialMiniCardView} from '@sphereon/ui-components.ssi-react-native'; +import SSICheckbox from '../../fields/SSICheckbox'; import { SSICredentialSelectViewItemCheckboxContainerStyled as CheckboxContainer, SSIFlexDirectionRowViewStyled as Container, @@ -12,14 +13,12 @@ import { SSICredentialSelectViewItemLogoContainerStyled as LogoContainer, SSICredentialSelectViewItemLogoOuterContainerStyled as LogoOuterContainer, } from '../../../styles/components'; -import SSICredentialLogo from '../../assets/logos/SSICredentialLogo'; -import SSICheckbox from '../../fields/SSICheckbox'; export interface Props { title: string; issuer?: string; isSelected: boolean; - image?: string; // TODO WAL-302 Support passing in storage location + image?: string; style?: ViewStyle; onPress: () => Promise; } @@ -33,7 +32,7 @@ const SSICredentialSelectViewItem: FC = (props: Props): JSX.Element => { - + diff --git a/src/screens/SSICredentialDetailsScreen/index.tsx b/src/screens/SSICredentialDetailsScreen/index.tsx index ab9138a9..db0e4ee8 100644 --- a/src/screens/SSICredentialDetailsScreen/index.tsx +++ b/src/screens/SSICredentialDetailsScreen/index.tsx @@ -1,15 +1,14 @@ +import React, {FC} from 'react'; import {NativeStackScreenProps} from '@react-navigation/native-stack'; -import {imageAttributesEntityFrom} from '@sphereon/ssi-sdk.data-store'; import {ImageAttributes} from '@sphereon/ui-components.core'; -import {SSICardView} from '@sphereon/ui-components.ssi-react-native'; -import {randomUUID} from 'expo-crypto'; -import React, {FC} from 'react'; - +import {SSICredentialCardView} from '@sphereon/ui-components.ssi-react-native'; import SSIPrimaryButton from '../../components/buttons/SSIPrimaryButton'; import SSISecondaryButton from '../../components/buttons/SSISecondaryButton'; import SSIActivityView from '../../components/views/SSIActivityView'; import SSICredentialDetailsView from '../../components/views/SSICredentialDetailsView'; import SSITabView from '../../components/views/SSITabView'; +import {getCredentialStatus} from '../../utils/CredentialUtils'; +import {getIssuerLogo} from '../../utils/mappers/credential/CredentialMapper'; import {translate} from '../../localization/Localization'; import { SSICredentialDetailsScreenButtonContainer as ButtonContainer, @@ -19,9 +18,7 @@ import { SSICredentialDetailsScreenContentContainer as ContentContainer, SSIStatusBarDarkModeStyled as StatusBar, } from '../../styles/components'; -import {ITabViewRoute, ScreenRoutesEnum, StackParamList} from '../../types'; -import {getCredentialStatus} from '../../utils/CredentialUtils'; -import {getIssuerLogo} from '../../utils/mappers/credential/CredentialMapper'; +import {ICredentialSummary, ITabViewRoute, ScreenRoutesEnum, StackParamList} from '../../types'; type Props = NativeStackScreenProps; @@ -30,9 +27,21 @@ enum CredentialTabRoutesEnum { ACTIVITY = 'activity', } +const getCredentialCardLogo = (credential: ICredentialSummary): ImageAttributes | undefined => { + if (credential.branding?.logo?.uri || credential.branding?.logo?.dataUri) { + return credential.branding.logo; + } + + const uri: string | undefined = getIssuerLogo(credential, credential.branding); + if (uri) { + return {uri}; + } +}; + const SSICredentialDetailsScreen: FC = (props: Props): JSX.Element => { const {credential, primaryAction, secondaryAction, showActivity = false} = props.route.params; const issuer = credential.issuer.alias; + const credentialCardLogo: ImageAttributes | undefined = getCredentialCardLogo(credential); const routes: Array = [ { @@ -50,30 +59,17 @@ const SSICredentialDetailsScreen: FC = (props: Props): JSX.Element => { ] : []), ]; - let logo: ImageAttributes | undefined; - if (credential.branding?.logo?.uri || credential.branding?.logo?.dataUri) { - logo = credential.branding.logo; - } - if (!logo && typeof credential.branding?.logo === 'string') { - logo = {uri: credential.branding.logo}; - } - if (!logo) { - const uri = getIssuerLogo(credential, credential.branding); - if (uri) { - logo = {uri}; - } - } return ( - Date: Mon, 9 Oct 2023 15:17:18 +0200 Subject: [PATCH 2/3] WAL-651 credential mini card display type refactor --- .../SSICredentialSelectTypeViewItem/index.tsx | 18 ++++++++++++------ .../SSICredentialSelectViewItem/index.tsx | 16 +++++++++++----- src/types/component/index.ts | 9 ++++++++- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/components/views/SSICredentialSelectTypeViewItem/index.tsx b/src/components/views/SSICredentialSelectTypeViewItem/index.tsx index 6d78d92e..98f29756 100644 --- a/src/components/views/SSICredentialSelectTypeViewItem/index.tsx +++ b/src/components/views/SSICredentialSelectTypeViewItem/index.tsx @@ -10,24 +10,30 @@ import { SSICredentialSelectTypeViewItemLogoCheckboxContainerStyled as LogoCheckboxContainer, SSICredentialSelectTypeViewItemLogoContainerStyled as LogoContainer, } from '../../../styles/components'; +import {CredentialMiniCardDisplay} from '../../../types'; -export interface Props { +interface Props { title: string; isSelected: boolean; - image?: string; - style?: ViewStyle; onPress: () => Promise; + cardDisplay?: CredentialMiniCardDisplay; + style?: ViewStyle; } const SSICredentialSelectTypeViewItem: FC = (props: Props): JSX.Element => { - const {image, style, title, onPress} = props; + const {cardDisplay, isSelected, style, title, onPress} = props; return ( - + - + diff --git a/src/components/views/SSICredentialSelectViewItem/index.tsx b/src/components/views/SSICredentialSelectViewItem/index.tsx index e3f3c88c..3b7ed5d5 100644 --- a/src/components/views/SSICredentialSelectViewItem/index.tsx +++ b/src/components/views/SSICredentialSelectViewItem/index.tsx @@ -13,18 +13,19 @@ import { SSICredentialSelectViewItemLogoContainerStyled as LogoContainer, SSICredentialSelectViewItemLogoOuterContainerStyled as LogoOuterContainer, } from '../../../styles/components'; +import {CredentialMiniCardDisplay} from '../../../types'; export interface Props { title: string; - issuer?: string; isSelected: boolean; - image?: string; - style?: ViewStyle; onPress: () => Promise; + issuer?: string; + cardDisplay?: CredentialMiniCardDisplay; + style?: ViewStyle; } const SSICredentialSelectViewItem: FC = (props: Props): JSX.Element => { - const {image, style, title, issuer, onPress} = props; + const {cardDisplay, style, title, issuer, onPress} = props; return ( @@ -32,7 +33,12 @@ const SSICredentialSelectViewItem: FC = (props: Props): JSX.Element => { - + diff --git a/src/types/component/index.ts b/src/types/component/index.ts index 257bb3ab..28b7a4e7 100644 --- a/src/types/component/index.ts +++ b/src/types/component/index.ts @@ -1,7 +1,7 @@ import {ComponentType} from 'react'; import {ColorValue} from 'react-native'; -import {CredentialStatus, IssuerStatus} from '@sphereon/ui-components.core'; +import {CredentialStatus, ImageAttributes, IssuerStatus} from '@sphereon/ui-components.core'; export enum ButtonIconsEnum { BACK = 'back', @@ -51,3 +51,10 @@ export interface ITabRoute { export interface ITabViewRoute extends ITabRoute { content: ComponentType; } + +export type CredentialMiniCardDisplay = { + backgroundColor?: ColorValue; + backgroundImage?: ImageAttributes; + logoColor: ColorValue; + logo?: ImageAttributes; +}; From 34f30541e3a83a5ee5e2d68b51209bbc3ef96356 Mon Sep 17 00:00:00 2001 From: "A.G.J. Cate" Date: Wed, 11 Oct 2023 10:48:15 +0200 Subject: [PATCH 3/3] WAL-651 deps update --- package.json | 4 ++-- yarn.lock | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 11cdd86e..3081fc46 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,8 @@ "@sphereon/ssi-sdk.vc-handler-ld-local": "0.17.5", "@sphereon/ssi-sdk.issuance-branding": "0.17.5", "@sphereon/ssi-types": "0.17.5", - "@sphereon/ui-components.core": "0.1.2", - "@sphereon/ui-components.ssi-react-native": "0.1.2", + "@sphereon/ui-components.core": "0.1.3-next.16", + "@sphereon/ui-components.ssi-react-native": "0.1.3-next.16", "@transmute/lds-ecdsa-secp256k1-recovery2020": "^0.0.7", "@veramo/core": "4.2.0", "@veramo/credential-w3c": "4.2.0", diff --git a/yarn.lock b/yarn.lock index 16342eb8..6f2af4f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3508,22 +3508,22 @@ dependencies: jwt-decode "^3.1.2" -"@sphereon/ui-components.core@0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@sphereon/ui-components.core/-/ui-components.core-0.1.2.tgz#f0ad61a1084ea62a821928d1fadce8b852808fab" - integrity sha512-QUNA8U3RUiCJ1SLPpoZ7Phhm8UWHfrcad6sR7bVJrj5sXi2XmdLjcNXhEuJ5EoubVTiYw4rVJdQWRcoEUsydAA== +"@sphereon/ui-components.core@0.1.3-next.16", "@sphereon/ui-components.core@0.1.3-next.16+40041e4": + version "0.1.3-next.16" + resolved "https://registry.yarnpkg.com/@sphereon/ui-components.core/-/ui-components.core-0.1.3-next.16.tgz#fd77331024e9e69655c220b09e1b31770b762a64" + integrity sha512-chOe5yiFVrRq1uQ3q1h6+0cZGlA03KMNeQno/duLp168L1fyA+qFee81Iaw1XmL0M7RkcHgh0sv3YlJrE+qy5A== dependencies: i18n-js "^3.8.0" lodash.memoize "^4.1.2" styled-components "^5.3.3" -"@sphereon/ui-components.ssi-react-native@0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@sphereon/ui-components.ssi-react-native/-/ui-components.ssi-react-native-0.1.2.tgz#f38714c758ea20777a035b60dd91fd8a6759a4c1" - integrity sha512-Z+UVyNDvmsgBMYuGiPgmIpttiDbxOhx0aEPpr+cN7OWutXl14IleivD5YlDEGczyXUaS7hlx4/YUerunSCrWdw== +"@sphereon/ui-components.ssi-react-native@0.1.3-next.16": + version "0.1.3-next.16" + resolved "https://registry.yarnpkg.com/@sphereon/ui-components.ssi-react-native/-/ui-components.ssi-react-native-0.1.3-next.16.tgz#ed95fabf5842bf3b511d13ca00c190bf8f33a974" + integrity sha512-nMCeAp4qKa+KVhtvPa0sNv7a8LS3Vk0G2+TW7cHnHA7n0HEafyqwC3CmdycZ6vpED2QqomXdeqHKRLOVZi+MXA== dependencies: "@react-native-community/blur" "^4.3.0" - "@sphereon/ui-components.core" "0.1.2" + "@sphereon/ui-components.core" "0.1.3-next.16+40041e4" react-native-fast-image "^8.6.3" react-native-size-matters "^0.4.0" react-native-svg "13.4.0" @@ -4614,7 +4614,7 @@ "@urql/core" ">=2.3.1" wonka "^4.0.14" -"@veramo-community/lds-ecdsa-secp256k1-recovery2020@github:uport-project/EcdsaSecp256k1RecoverySignature2020", "@veramo-community/lds-ecdsa-secp256k1-recovery2020@uport-project/EcdsaSecp256k1RecoverySignature2020": +"@veramo-community/lds-ecdsa-secp256k1-recovery2020@uport-project/EcdsaSecp256k1RecoverySignature2020": version "0.0.8" resolved "https://codeload.github.com/uport-project/EcdsaSecp256k1RecoverySignature2020/tar.gz/ab0db52de6f4e6663ef271a48009ba26e688ef9b" dependencies: