fix: card rendering background (#93)

Signed-off-by: Timo Glastra <[email protected]>
animo · Mar 28, 2024 · 1df888f · 1df888f
1 parent f28e334
commit 1df888f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/packages/agent/src/display.ts b/packages/agent/src/display.ts
@@ -289,13 +289,11 @@ export function getCredentialForDisplay(credentialRecord: W3cCredentialRecord |
     const issuerDisplay = getSdJwtIssuerDisplay(openId4VcMetadata)
     const credentialDisplay = getSdJwtCredentialDisplay(decodedPayload, openId4VcMetadata)
 
-    // TODO: should we add a way to see these claims? Currently matching what would
-    // be included in a w3c credential subject
+    // TODO: We should map these claims to nice format and names
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { _sd_alg, _sd_hash, iss, vct, cnf, ...visibleProperties } = decodedPayload
+    const { _sd_alg, _sd_hash, iss, vct, cnf, iat, exp, ...visibleProperties } = decodedPayload
 
     // TODO: display somehow which fields can be selective disclosed
-
     return {
       id: `sd-jwt-vc-${credentialRecord.id}` satisfies CredentialForDisplayId,
       createdAt: credentialRecord.createdAt,

diff --git a/packages/app/components/CredentialCard.tsx b/packages/app/components/CredentialCard.tsx
@@ -69,6 +69,7 @@ export default function CredentialCard({
         }}
         h="$16"
         onPress={onPress}
+        overflow="hidden"
       >
         <Card.Header padding={0}>
           <XStack jc="space-between">
@@ -105,7 +106,13 @@ export default function CredentialCard({
           <Card.Background>
             {hasInternet ? (
               <YStack width="100%" height="100%" bg={bgColor ?? '$grey-900'}>
-                <Image src={backgroundImage.url} alt={backgroundImage.altText} resizeMode="cover" />
+                <Image
+                  src={backgroundImage.url}
+                  alt={backgroundImage.altText}
+                  width="100%"
+                  height="100%"
+                  resizeMode="cover"
+                />
               </YStack>
             ) : (
               <YStack width="100%" height="100%" bg={bgColor ?? '$grey-900'} />

diff --git a/packages/app/utils/formatCredentialSubject.ts b/packages/app/utils/formatCredentialSubject.ts
@@ -62,10 +62,16 @@ export function formatCredentialSubject(
         image: value,
         type: 'image',
       })
-    } else if (typeof value === 'string') {
+    } else if (typeof value === 'string' || typeof value === 'number') {
       stringRows.push({
         key: sanitizeString(key),
-        value: value,
+        value: `${value}`,
+        type: 'string',
+      })
+    } else if (typeof value === 'boolean') {
+      stringRows.push({
+        key: sanitizeString(key),
+        value: value ? 'Yes' : 'No',
         type: 'string',
       })
     }

diff --git a/packages/utils/src/format.ts b/packages/utils/src/format.ts
@@ -11,7 +11,7 @@ export function capitalizeFirstLetter(string: string) {
  * i.e. sanitizeString("helloWorld")  // returns: 'Hello world'
  */
 export function sanitizeString(str: string) {
-  const result = str.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+  const result = str.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
   let words = result.split(' ')
   words = words.map((word, index) => {
     if (index === 0 || word.toUpperCase() === word) {