feat: credential overview

apps/expo/app/(tabs)/scan.tsx → apps/expo/app/(home)/scan.tsx

@@ -1,4 +1,4 @@
-import { QrScannerScreen } from 'app/features/scan/screen'
+import { QrScannerScreen } from 'app/features/scan/ScanScreen'
 
 export default function Screen() {
   return <QrScannerScreen />

apps/expo/app/(home)/wallet.tsx

@@ -0,0 +1,19 @@
+import { XStack, HEADER_STATUS_BAR_HEIGHT } from '@internal/ui'
+import { WalletScreen } from 'app/features/wallet/WalletScreen'
+import { Stack } from 'expo-router'
+
+export default function Screen() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          header: () => {
+            return <XStack h={HEADER_STATUS_BAR_HEIGHT} bg="$grey-200" />
+          },
+        }}
+      />
+      <WalletScreen />
+    </>
+  )
+}

apps/expo/app/_layout.tsx

@@ -43,7 +43,7 @@ export default function HomeLayout() {
       <AgentProvider agent={agent}>
         <ThemeProvider value={scheme === 'dark' ? DarkTheme : DefaultTheme}>
           <Stack screenOptions={{ headerShown: false }}>
-            <Stack.Screen name="(tabs)" />
+            <Stack.Screen options={{ presentation: 'modal' }} name="(home)/scan" />
             <Stack.Screen options={{ presentation: 'modal' }} name="notifications/credential" />
             <Stack.Screen options={{ presentation: 'modal' }} name="credentials/[id]" />
           </Stack>

apps/expo/app/credentials/[id].tsx

@@ -1,4 +1,4 @@
-import { CredentialDetailScreen } from 'app/features/credentials/detail-screen'
+import { CredentialDetailScreen } from 'app/features/credentials/CredentialDetailScreen'
 import { Stack } from 'expo-router'
 
 export default function Screen() {

apps/expo/package.json

@@ -12,7 +12,6 @@
     "@babel/runtime": "^7.18.9",
     "@hyperledger/aries-askar-react-native": "0.1.0-dev.8",
     "@internal/agent": "*",
-    "@internal/scanner": "*",
     "@internal/ui": "*",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
@@ -52,13 +51,5 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "metro-minify-terser": "^0.74.1",
     "typescript": "^4.7.4"
-  },
-  "resolutions": {
-    "metro": "0.76.0",
-    "metro-resolver": "0.76.0"
-  },
-  "overrides": {
-    "metro": "0.76.0",
-    "metro-resolver": "0.76.0"
   }
 }

package.json

@@ -24,7 +24,9 @@
   },
   "resolutions": {
     "@unimodules/react-native-adapter": "./noop",
-    "@unimodules/core": "./noop"
+    "@unimodules/core": "./noop",
+    "metro": "0.76.0",
+    "metro-resolver": "0.76.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",

packages/agent/package.json

@@ -8,8 +8,7 @@
     "@aries-framework/core": "^0.4.0-alpha.126",
     "@aries-framework/openid4vc-client": "^0.4.0-alpha.126",
     "@aries-framework/react-hooks": "0.4.2",
-    "@aries-framework/react-native": "^0.4.0-alpha.126",
-    "@sphereon/openid4vci-client": "^0.4.0"
+    "@aries-framework/react-native": "^0.4.0-alpha.126"
   },
   "peerDependencies": {
     "@hyperledger/aries-askar-react-native": "0.1.0-dev.8"

packages/agent/src/parsers.ts

@@ -1,8 +1,6 @@
 import type { AppAgent } from './agent'
 
 import { DidKey } from '@aries-framework/core'
-import { didKeyToInstanceOfKey } from '@aries-framework/core/build/modules/dids/helpers'
-import { IssuanceInitiation } from '@sphereon/openid4vci-client'
 
 export enum QrTypes {
   OPENID_INITIATE_ISSUANCE = 'openid-initiate-issuance',

packages/agent/src/providers/W3cCredentialsProvider.tsx

@@ -12,7 +12,7 @@ import * as React from 'react'
 
 type W3cCredentialRecordState = {
   w3cCredentialRecords: Array<W3cCredentialRecord>
-  loading: boolean
+  isLoading: boolean
 }
 
 const addRecord = (
@@ -22,7 +22,7 @@ const addRecord = (
   const newRecordsState = [...state.w3cCredentialRecords]
   newRecordsState.unshift(record)
   return {
-    loading: state.loading,
+    isLoading: state.isLoading,
     w3cCredentialRecords: newRecordsState,
   }
 }
@@ -37,7 +37,7 @@ const updateRecord = (
     newRecordsState[index] = record
   }
   return {
-    loading: state.loading,
+    isLoading: state.isLoading,
     w3cCredentialRecords: newRecordsState,
   }
 }
@@ -48,7 +48,7 @@ const removeRecord = (
 ): W3cCredentialRecordState => {
   const newRecordsState = state.w3cCredentialRecords.filter((r) => r.id !== record.id)
   return {
-    loading: state.loading,
+    isLoading: state.isLoading,
     w3cCredentialRecords: newRecordsState,
   }
 }
@@ -81,17 +81,17 @@ export const W3cCredentialRecordProvider: React.FC<PropsWithChildren<Props>> = (
 }) => {
   const [state, setState] = useState<W3cCredentialRecordState>({
     w3cCredentialRecords: [],
-    loading: true,
+    isLoading: true,
   })
 
   useEffect(() => {
     void agent.w3cCredentials
       .getAllCredentialRecords()
-      .then((w3cCredentialRecords) => setState({ w3cCredentialRecords, loading: false }))
+      .then((w3cCredentialRecords) => setState({ w3cCredentialRecords, isLoading: false }))
   }, [])
 
   useEffect(() => {
-    if (!state.loading && agent) {
+    if (!state.isLoading && agent) {
       const credentialAdded$ = recordsAddedByType(agent, W3cCredentialRecord).subscribe((record) =>
         setState(addRecord(record, state))
       )

packages/agent/src/types.ts

@@ -31,7 +31,7 @@ export type W3cCredential = {
 }
 
 export type MattrW3cCredentialRecord = {
-  id?: string
+  id: string
   createdAt?: Date
   credential: W3cCredential
   updatedAt?: Date

packages/app/components/CredentialAttributes.tsx

@@ -1,4 +1,4 @@
-import { YStack, Paragraph, XStack, borderRadiusSizes, paddingSizes } from '@internal/ui'
+import { YStack, Paragraph, TableContainer, TableRow } from '@internal/ui'
 
 import { sanitizeString } from 'app/utils/format'
 
@@ -12,26 +12,18 @@ export default function CredentialAttributes({ subject }: CredentialAttributesPr
   return (
     <YStack g="md">
       <Paragraph>Information</Paragraph>
-      <YStack border br={borderRadiusSizes.lg} bg="$white">
+      <TableContainer>
         {Object.keys(subject).map((x, index) => (
-          <XStack
-            pad="md"
-            px={paddingSizes.lg}
+          <TableRow
             key={x}
-            jc="center"
-            ai="center"
-            borderBottomWidth={index === Object.keys(subject).length - 1 ? 0 : 1}
-            borderBottomColor="$grey-300"
-          >
-            <Paragraph numberOfLines={1} f={1}>
-              {sanitizeString(x)}
-            </Paragraph>
-            <Paragraph secondary f={1} flexGrow={1} numberOfLines={1} textAlign="right">
-              {typeof subject[x] === 'string' ? subject[x] : JSON.stringify(subject[x])}
-            </Paragraph>
-          </XStack>
+            attribute={sanitizeString(x)}
+            value={
+              typeof subject[x] === 'string' ? (subject[x] as string) : JSON.stringify(subject[x])
+            }
+            isLastRow={index === Object.keys(subject).length - 1}
+          />
         ))}
-      </YStack>
+      </TableContainer>
     </YStack>
   )
 }

packages/app/components/CredentialCard.tsx

@@ -7,24 +7,29 @@ import {
   Heading,
   Spacer,
   Icon,
+  paddingSizes,
+  darken,
+  getTextColorBasedOnBg,
 } from '@internal/ui'
 
-import { getTextColorBasedOnBg } from 'app/utils/utilts'
-
 type CredentialCardProps = {
+  onPress?(): void
   name?: string
   issuerName?: string
   subtitle?: string
   iconUrl?: string
   bgColor?: string
+  shadow?: boolean
 }
 
 export default function CredentialCard({
+  onPress,
   iconUrl,
   name = 'Credential',
   subtitle,
   issuerName = 'Unknown',
   bgColor,
+  shadow = true,
 }: CredentialCardProps) {
   const textColor = getTextColorBasedOnBg(bgColor ?? '#000')
 
@@ -37,25 +42,40 @@ export default function CredentialCard({
   )
 
   return (
-    <YStack pad="lg" g="xl" br={borderRadiusSizes.xl} bg={bgColor ?? '$grey-900'} shadow>
+    <YStack
+      pad="lg"
+      g="xl"
+      br={borderRadiusSizes.xl}
+      bg={bgColor ?? '$grey-900'}
+      shadow={shadow}
+      width="100%"
+      borderWidth={0.5}
+      borderColor="$borderTranslucent"
+      pressStyle={{
+        backgroundColor: darken(bgColor ?? '$grey-900', 0.025),
+      }}
+      onPress={onPress}
+    >
       <XStack jc="space-between">
-        {icon}
-        <YStack>
-          <Heading variant="h3" textAlign="right" color={textColor}>
+        <XStack pr={paddingSizes.md}>{icon}</XStack>
+        <YStack f={1}>
+          <Heading variant="h3" textAlign="right" color={textColor} numberOfLines={1}>
             {name}
           </Heading>
-          <Paragraph textAlign="right" color={textColor}>
+          <Paragraph textAlign="right" color={textColor} numberOfLines={1}>
             {subtitle}
           </Paragraph>
         </YStack>
       </XStack>
       <Spacer />
       <XStack>
         <YStack>
-          <Paragraph variant="sub" secondary color={textColor}>
+          <Paragraph variant="annotation" secondary color={textColor}>
             Issuer
           </Paragraph>
-          <Paragraph color={textColor}>{issuerName}</Paragraph>
+          <Paragraph variant="sub" color={textColor}>
+            {issuerName}
+          </Paragraph>
         </YStack>
       </XStack>
     </YStack>

packages/app/components/CredentialRowCard.tsx

@@ -0,0 +1,35 @@
+import { Heading, Paragraph, XStack, YStack, borderRadiusSizes, paddingSizes } from '@internal/ui'
+
+interface CredentialRowCardProps {
+  name: string
+  issuer: string
+  onPress(): void
+  bgColor?: string
+}
+
+export default function CredentialRowCard({
+  name,
+  issuer,
+  bgColor,
+  onPress,
+}: CredentialRowCardProps) {
+  return (
+    <XStack
+      onPress={onPress}
+      pad="md"
+      py={paddingSizes.sm}
+      g="lg"
+      pressStyle={{ backgroundColor: '$grey-100' }}
+    >
+      <XStack bg={bgColor ?? '$feature-500'} h="100%" w="25%" br={borderRadiusSizes.md} border />
+      <YStack>
+        <Heading variant="h3" numberOfLines={1}>
+          {name}
+        </Heading>
+        <Paragraph variant="sub" secondary>
+          {issuer}
+        </Paragraph>
+      </YStack>
+    </XStack>
+  )
+}

packages/app/features/credentials/detail-screen.tsx → packages/app/features/credentials/CredentialDetailScreen.tsx

@@ -22,7 +22,7 @@ export function CredentialDetailScreen() {
   }
 
   const record = useW3cCredentialRecordById(id)
-  const credential = record?.credential as unknown as W3cCredential | undefined
+  const credential = record?.credential as unknown as W3cCredential
 
   if (!credential) return null