feat: federation in the wallet

apps/easypid/src/app/(app)/_layout.tsx

@@ -1,4 +1,4 @@
-import { Redirect, Stack, useGlobalSearchParams, useLocalSearchParams, usePathname, useRouter } from 'expo-router'
+import { Redirect, Stack, useGlobalSearchParams, usePathname, useRouter } from 'expo-router'
 
 import { TypedArrayEncoder } from '@credo-ts/core'
 import { useSecureUnlock } from '@easypid/agent'
@@ -137,7 +137,7 @@ export default function AppLayout() {
             <Stack.Screen name="activity/[id]" options={headerNormalOptions} />
             <Stack.Screen name="pinConfirmation" options={headerNormalOptions} />
             <Stack.Screen name="pinLocked" options={headerNormalOptions} />
-            <Stack.Screen name="issuer" options={headerNormalOptions} />
+            <Stack.Screen name="federation" options={headerNormalOptions} />
             <Stack.Screen name="pidSetup" />
           </Stack>
         </WithBackgroundPidRefresh>

apps/easypid/src/app/(app)/federation.tsx

@@ -0,0 +1,17 @@
+import { FunkeFederationDetailScreen } from '@easypid/features/wallet/FunkeFederationDetailScreen'
+import { useLocalSearchParams } from 'expo-router'
+
+export default function Screen() {
+  const { entityId, trustedEntityIds, name, logo } = useLocalSearchParams()
+
+  const trustedEntityIdsArray = Array.isArray(trustedEntityIds) ? trustedEntityIds : trustedEntityIds?.split(',') ?? []
+
+  return (
+    <FunkeFederationDetailScreen
+      entityId={entityId as string}
+      trustedEntityIds={trustedEntityIdsArray}
+      name={name as string}
+      logo={logo as string}
+    />
+  )
+}

apps/easypid/src/features/receive/FunkeCredentialNotificationScreen.tsx

@@ -352,7 +352,6 @@ export function FunkeCredentialNotificationScreen() {
               logo={credentialDisplay.issuer.logo}
               entityId={issuerMetadata?.credential_issuer as string}
               lastInteractionDate={activities[0]?.date}
-              approvalsCount={0}
               onContinue={onCheckCardContinue}
             />
           ),

apps/easypid/src/features/receive/slides/VerifyPartySlide.tsx

@@ -25,8 +25,8 @@ interface VerifyPartySlideProps {
   logo?: DisplayImage
   backgroundColor?: string
   lastInteractionDate?: string
-  approvalsCount?: number
   onContinue?: () => Promise<void>
+  verifiedEntityIds?: Record<string, boolean>
 }
 
 export const VerifyPartySlide = ({
@@ -36,14 +36,18 @@ export const VerifyPartySlide = ({
   logo,
   backgroundColor,
   lastInteractionDate,
-  approvalsCount,
   onContinue,
+  verifiedEntityIds,
 }: VerifyPartySlideProps) => {
   const router = useRouter()
   const { onNext, onCancel } = useWizard()
   const { withHaptics } = useHaptics()
   const [isLoading, setIsLoading] = useState(false)
 
+  const trustedEntityIds = Object.entries(verifiedEntityIds ?? {})
+    .filter(([_, isVerified]) => isVerified)
+    .map(([entityId]) => entityId)
+
   const handleContinue = async () => {
     setIsLoading(true)
     if (onContinue) {
@@ -54,7 +58,9 @@ export const VerifyPartySlide = ({
   }
 
   const onPressVerifiedIssuer = withHaptics(() => {
-    router.push(`/issuer?entityId=${entityId}`)
+    router.push(
+      `/issuer?name=${name}&logo=${logo?.url}&entityId=${entityId}&trustedEntityIds=${trustedEntityIds?.join(',') ?? ''}`
+    )
   })
 
   const onPressInteraction = withHaptics(() => {
@@ -93,15 +99,20 @@ export const VerifyPartySlide = ({
         </YStack>
 
         <YStack gap="$4">
-          {approvalsCount ? (
+          {trustedEntityIds && trustedEntityIds.length > 0 ? (
             <InfoButton
-              variant="positive"
+              variant="unknown"
               title="Verified organisation"
-              description={`Approved by ${approvalsCount} organisations`}
+              description={`Approved by ${trustedEntityIds?.length} organisations`}
               onPress={onPressVerifiedIssuer}
             />
           ) : (
-            <InfoButton variant="unknown" title="Unverified organization" description="No trust approvals found" />
+            <InfoButton
+              variant="unknown"
+              title="Unverified organization"
+              description="No trust approvals found"
+              onPress={onPressVerifiedIssuer}
+            />
           )}
           <InfoButton
             variant={lastInteractionDate ? 'interaction-success' : 'interaction-new'}

apps/easypid/src/features/share/FunkeMdocOfflineSharingScreen.tsx

@@ -122,6 +122,7 @@ export function FunkeMdocOfflineSharingScreen({
           hostName: undefined,
           logo: undefined,
           name: 'Unknown party',
+          verifiedEntityIds: undefined,
         },
       },
       status

apps/easypid/src/features/share/FunkeOpenIdPresentationNotificationScreen.tsx

@@ -9,7 +9,6 @@ import { useLocalSearchParams } from 'expo-router'
 import React, { useEffect, useState, useMemo, useCallback } from 'react'
 
 import { useAppAgent } from '@easypid/agent'
-import { getOpenIdFedIssuerMetadata } from '@easypid/utils/issuer'
 import { usePushToWallet } from '@package/app/src/hooks/usePushToWallet'
 import { setWalletServiceProviderPin } from '../../crypto/WalletServiceProviderClient'
 import { useShouldUsePinForSubmission } from '../../hooks/useShouldUsePinForPresentation'
@@ -30,15 +29,8 @@ export function FunkeOpenIdPresentationNotificationScreen() {
   const { activities } = useActivities({
     filters: { entityId: credentialsForRequest?.verifier.entityId ?? 'NO MATCH' },
   })
-  const shouldUsePin = useShouldUsePinForSubmission(credentialsForRequest)
-
-  // TODO: this should be returnd by getCredentialsForProofRequest
-  // TODO: addSharedActivityForCredentialsForRequest should take into account fed display metadata
-  const fedDisplayData = useMemo(
-    () => credentialsForRequest && getOpenIdFedIssuerMetadata(credentialsForRequest.verifier.entityId),
-    [credentialsForRequest]
-  )
   const lastInteractionDate = activities?.[0]?.date
+  const shouldUsePin = useShouldUsePinForSubmission(credentialsForRequest)
 
   useEffect(() => {
     if (credentialsForRequest) return
@@ -154,8 +146,8 @@ export function FunkeOpenIdPresentationNotificationScreen() {
       entityId={credentialsForRequest?.verifier.entityId as string}
       verifierName={credentialsForRequest?.verifier.name}
       logo={credentialsForRequest?.verifier.logo}
+      verifiedEntityIds={credentialsForRequest?.verifier.verifiedEntityIds}
       lastInteractionDate={lastInteractionDate}
-      approvalsCount={fedDisplayData?.approvals.length}
       onComplete={() => pushToWallet('replace')}
     />
   )

apps/easypid/src/features/share/FunkePresentationNotificationScreen.tsx

@@ -13,8 +13,7 @@ interface FunkePresentationNotificationScreenProps {
   verifierName?: string
   logo?: DisplayImage
   lastInteractionDate?: string
-  approvalsCount?: number
-
+  verifiedEntityIds?: Record<string, boolean>
   submission?: FormattedSubmission
   usePin: boolean
   isAccepting: boolean
@@ -28,13 +27,13 @@ export function FunkePresentationNotificationScreen({
   verifierName,
   logo,
   lastInteractionDate,
-  approvalsCount,
   usePin,
   onAccept,
   onDecline,
   isAccepting,
   submission,
   onComplete,
+  verifiedEntityIds,
 }: FunkePresentationNotificationScreenProps) {
   return (
     <SlideWizard
@@ -57,7 +56,7 @@ export function FunkePresentationNotificationScreen({
                 name={verifierName}
                 logo={logo}
                 lastInteractionDate={lastInteractionDate}
-                approvalsCount={approvalsCount}
+                verifiedEntityIds={verifiedEntityIds}
               />
             ),
           },

apps/easypid/src/features/wallet/FunkeFederationDetailScreen.tsx

@@ -0,0 +1,125 @@
+import {
+  Circle,
+  FlexPage,
+  Heading,
+  HeroIcons,
+  IconContainer,
+  Image,
+  MessageBox,
+  Paragraph,
+  ScrollView,
+  type ScrollViewRefType,
+  XStack,
+  YStack,
+} from '@package/ui'
+import { useTrustedEntities } from 'packages/agent/src'
+import { TextBackButton, useScrollViewPosition } from 'packages/app/src'
+import { useRef } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+interface FunkeFederationDetailScreenProps {
+  name: string
+  logo?: string
+  entityId?: string
+  trustedEntityIds?: string[]
+}
+
+export function FunkeFederationDetailScreen({
+  name,
+  logo,
+  entityId,
+  trustedEntityIds = [],
+}: FunkeFederationDetailScreenProps) {
+  const { trustedEntities } = useTrustedEntities()
+
+  const { handleScroll, isScrolledByOffset, scrollEventThrottle } = useScrollViewPosition()
+  const { bottom } = useSafeAreaInsets()
+  const scrollViewRef = useRef<ScrollViewRefType>(null)
+
+  return (
+    <FlexPage gap="$0" paddingHorizontal="$0">
+      <YStack
+        w="100%"
+        top={0}
+        p="$4"
+        borderBottomWidth="$0.5"
+        borderColor={isScrolledByOffset ? '$grey-200' : '$background'}
+      />
+      <ScrollView ref={scrollViewRef} onScroll={handleScroll} scrollEventThrottle={scrollEventThrottle}>
+        <YStack gap="$4" p="$4" marginBottom={bottom}>
+          <Heading variant="h1">About this party</Heading>
+          <MessageBox
+            variant="light"
+            message="Always consider whether sharing with a party is wise."
+            icon={<HeroIcons.ExclamationTriangleFilled />}
+          />
+          <XStack gap="$4" pt="$2">
+            {logo ? (
+              <Circle overflow="hidden" ai="center" jc="center" size="$6" bw={1} borderColor="$grey-200" bg="$grey-100">
+                <Image src={logo} height="100%" width="100%" />
+              </Circle>
+            ) : (
+              <Circle overflow="hidden" ai="center" jc="center" size="$6" bw={1} borderColor="$grey-200" bg="$grey-100">
+                <HeroIcons.BuildingOffice color="$grey-700" />
+              </Circle>
+            )}
+            <YStack>
+              <Heading variant="h2">{name}</Heading>
+              <Paragraph fontWeight="$medium" color="$primary-500">
+                Website
+              </Paragraph>
+            </YStack>
+          </XStack>
+          <YStack gap="$4" py="$2">
+            <YStack gap="$2">
+              <Heading variant="sub2">Trusted by</Heading>
+              <Paragraph>
+                A list of organizations and whether they have approved{' '}
+                <Paragraph fontWeight="$semiBold">{name}</Paragraph>.
+              </Paragraph>
+            </YStack>
+            <YStack gap="$2">
+              {trustedEntities.map((entity) => {
+                const isTrusted = trustedEntityIds.includes(entity.entity_id)
+
+                return (
+                  <XStack
+                    ai="center"
+                    key={entity.entity_id}
+                    br="$8"
+                    p="$3.5"
+                    gap="$3"
+                    bw="$0.5"
+                    borderColor={isTrusted ? '$success-500' : '$danger-300'}
+                    bg={isTrusted ? '$success-500' : '$danger-300'}
+                  >
+                    {entity.logo_uri && (
+                      <Circle overflow="hidden" size="$4" bg="$grey-50">
+                        <Image src={entity.logo_uri} height="100%" width="100%" />
+                      </Circle>
+                    )}
+                    <XStack gap="$1" f={1} justifyContent="space-between">
+                      <Heading variant="h2">{entity.organization_name}</Heading>
+                      <IconContainer
+                        icon={
+                          isTrusted ? (
+                            <HeroIcons.CheckCircleFilled color="$success-500" />
+                          ) : (
+                            <HeroIcons.X color="$danger-500" />
+                          )
+                        }
+                      />
+                    </XStack>
+                  </XStack>
+                )
+              })}
+            </YStack>
+          </YStack>
+        </YStack>
+      </ScrollView>
+      <YStack btw="$0.5" borderColor="$grey-200" pt="$4" mx="$-4" px="$4" bg="$background">
+        <TextBackButton />
+      </YStack>
+    </FlexPage>
+  )
+}