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,21 @@
+import { XStack, color } from '@internal/ui'
+import { WalletScreen } from 'app/features/wallet/WalletScreen'
+import { Stack } from 'expo-router'
+
+const HEADER_STATUS_BAR_HEIGHT = 56
+
+export default function Screen() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          header: () => {
+            return <XStack h={HEADER_STATUS_BAR_HEIGHT} bg={color['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/app/components/CredentialCard.tsx

@@ -7,26 +7,31 @@ import {
   Heading,
   Spacer,
   Icon,
+  color,
 } from '@internal/ui'
 
-import { getTextColorBasedOnBg } from 'app/utils/utilts'
+import { darken, getTextColorBasedOnBg } from 'app/utils/utils'
 
 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')
+  const textColor = getTextColorBasedOnBg(bgColor ?? color.black)
 
   const icon = iconUrl ? (
     <Image src={iconUrl} width={48} height={48} />
@@ -37,9 +42,21 @@ 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%"
+      border
+      pressStyle={{
+        backgroundColor: darken(bgColor ?? color['grey-900'], 0.025),
+      }}
+      onPress={onPress}
+    >
       <XStack jc="space-between">
-        {icon}
+        <XStack>{icon}</XStack>
         <YStack>
           <Heading variant="h3" textAlign="right" color={textColor}>
             {name}
@@ -52,10 +69,12 @@ export default function CredentialCard({
       <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
 

packages/app/features/notifications/CredentialNotificationScreen.tsx

@@ -97,6 +97,8 @@ export function CredentialNotificationScreen() {
 
   const credential = credentialRecord.credential
 
+  if (!credential) return null
+
   return (
     <ScrollView>
       <YStack

packages/app/features/scan/screen.tsx → packages/app/features/scan/ScanScreen.tsx

@@ -19,7 +19,6 @@ export function QrScannerScreen() {
     const onScan = (data: string) => {
       // don't do anything if we already scanned the data
       if (scannedData === readData) return
-
       setScannedData(data)
       if (isOpenIdCredentialOffer(scannedData)) {
         void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)