Merge pull request #164 from Sphereon-Opensource/feature/WAL-651_2

feature/WAL-651
Sphereon-Opensource · Oct 12, 2023 · 25edbbb · 25edbbb
2 parents 61c454a + 34f3054
commit 25edbbb
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 115 deletions.
diff --git 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/src/components/assets/logos/SSICredentialLogo/index.tsx b/src/components/assets/logos/SSICredentialLogo/index.tsx
diff --git 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,26 +10,30 @@ import {
   SSICredentialSelectTypeViewItemLogoCheckboxContainerStyled as LogoCheckboxContainer,
   SSICredentialSelectTypeViewItemLogoContainerStyled as LogoContainer,
 } from '../../../styles/components';
-import SSICredentialLogo from '../../assets/logos/SSICredentialLogo';
-import SSICheckbox from '../../fields/SSICheckbox';
+import {CredentialMiniCardDisplay} from '../../../types';
 
-export interface Props {
+interface Props {
   title: string;
   isSelected: boolean;
-  image?: string; // TODO WAL-302 Support passing in storage location
-  style?: ViewStyle;
   onPress: () => Promise<void>;
+  cardDisplay?: CredentialMiniCardDisplay;
+  style?: ViewStyle;
 }
 
 const SSICredentialSelectTypeViewItem: FC<Props> = (props: Props): JSX.Element => {
-  const {image, style, title, onPress} = props;
+  const {cardDisplay, isSelected, style, title, onPress} = props;
 
   return (
     <Container>
       <LogoContainer>
-        <SSICredentialLogo image={image} />
+        <SSICredentialMiniCardView
+          backgroundColor={cardDisplay?.backgroundColor}
+          backgroundImage={cardDisplay?.backgroundImage}
+          logoColor={cardDisplay?.logoColor}
+          logo={cardDisplay?.logo}
+        />
         <LogoCheckboxContainer>
-          <SSICheckbox onValueChange={onPress} isChecked={props.isSelected} backgroundColor={style?.backgroundColor} />
+          <SSICheckbox onValueChange={onPress} isChecked={isSelected} backgroundColor={style?.backgroundColor} />
         </LogoCheckboxContainer>
       </LogoContainer>
       <ContentContainer>

diff --git 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,28 +13,32 @@ import {
   SSICredentialSelectViewItemLogoContainerStyled as LogoContainer,
   SSICredentialSelectViewItemLogoOuterContainerStyled as LogoOuterContainer,
 } from '../../../styles/components';
-import SSICredentialLogo from '../../assets/logos/SSICredentialLogo';
-import SSICheckbox from '../../fields/SSICheckbox';
+import {CredentialMiniCardDisplay} from '../../../types';
 
 export interface Props {
   title: string;
-  issuer?: string;
   isSelected: boolean;
-  image?: string; // TODO WAL-302 Support passing in storage location
-  style?: ViewStyle;
   onPress: () => Promise<void>;
+  issuer?: string;
+  cardDisplay?: CredentialMiniCardDisplay;
+  style?: ViewStyle;
 }
 
 const SSICredentialSelectViewItem: FC<Props> = (props: Props): JSX.Element => {
-  const {image, style, title, issuer, onPress} = props;
+  const {cardDisplay, style, title, issuer, onPress} = props;
 
   return (
     <Container>
       <LogoContainer>
         <LogoOuterContainer>
           <LogoCheckboxContainer>
             <TouchableOpacity onPress={onPress}>
-              <SSICredentialLogo image={image} />
+              <SSICredentialMiniCardView
+                backgroundColor={cardDisplay?.backgroundColor}
+                backgroundImage={cardDisplay?.backgroundImage}
+                logoColor={cardDisplay?.logoColor}
+                logo={cardDisplay?.logo}
+              />
             </TouchableOpacity>
             <CheckboxContainer>
               <SSICheckbox onValueChange={onPress} isChecked={props.isSelected} backgroundColor={style?.backgroundColor} />

diff --git 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<StackParamList, ScreenRoutesEnum.CREDENTIAL_DETAILS>;
 
@@ -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: 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<ITabViewRoute> = [
     {
@@ -50,30 +59,17 @@ const SSICredentialDetailsScreen: FC<Props> = (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 (
     <Container>
       <StatusBar />
       <ContentContainer>
         <CardContainer>
-          <SSICardView
+          <SSICredentialCardView
             header={{
               credentialTitle: credential.title ?? credential.branding?.alias,
               credentialSubtitle: credential.branding?.description,
-              logo,
+              logo: credentialCardLogo,
             }}
             body={{
               issuerName: issuer ?? credential.issuer.name,

diff --git a/src/styles/components/components/SSICredentialLogo/index.ts b/src/styles/components/components/SSICredentialLogo/index.ts
diff --git a/src/styles/components/components/index.ts b/src/styles/components/components/index.ts
@@ -5,7 +5,6 @@ export * from './SSITabView';
 export * from './SSITabViewHeader';
 export * from './SSICredentialDetailsView';
 export * from './SSITextField';
-export * from './SSICredentialLogo';
 export * from './SSICredentialSelectTypeViewItem';
 export * from './SSICheckbox';
 export * from './SSIContactViewItem';

diff --git a/src/styles/components/screens/SSICredentialDetailsScreen/index.ts b/src/styles/components/screens/SSICredentialDetailsScreen/index.ts
@@ -17,13 +17,11 @@ export const SSICredentialDetailsScreenButtonContainer = styled.View`
   height: 80px;
   width: 100%;
   margin-top: auto;
-  backgroundcolor: ${backgrounds.secondaryDark};
+  background-color: ${backgrounds.secondaryDark};
 `;
 
 export const SSICredentialDetailsScreenButtonContentContainer = styled(SSIFlexDirectionRowViewStyled)`
-  margin-top: auto;
-  margin-bottom: auto;
+  margin: auto auto;
   justify-content: space-between;
-  padding-left: 24px;
-  padding-right: 24px;
+  padding: 0 24px;
 `;
diff --git 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<unknown>;
 }
+
+export type CredentialMiniCardDisplay = {
+  backgroundColor?: ColorValue;
+  backgroundImage?: ImageAttributes;
+  logoColor: ColorValue;
+  logo?: ImageAttributes;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -3508,22 +3508,22 @@
   dependencies:
     jwt-decode "^3.1.2"
 
-"@sphereon/[email protected].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/[email protected].3-next.16", "@sphereon/[email protected]+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/[email protected].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/[email protected].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: