Merge pull request #32 from animo/feature/usecases

feat: Usecases in the frontend to seperate specific flows
animo · Nov 26, 2024 · e8cc22b · e8cc22b
2 parents 9cede86 + f34987f
commit e8cc22b
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 23 deletions.
diff --git a/agent/src/endpoints.ts b/agent/src/endpoints.ts
@@ -198,20 +198,24 @@ apiRouter.post('/offers/receive', async (request: Request, response: Response) =
 
 apiRouter.get('/verifier', async (_, response: Response) => {
   return response.json({
-    presentationRequests: verifiers.flatMap((i) => [
-      ...i.presentationRequests.map((c) => {
-        return {
-          display: `${i.clientMetadata.client_name} - ${c.name} - DIF PEX`,
-          id: c.id,
-        }
-      }),
-      ...i.dcqlRequests.map((c) => {
-        return {
-          display: `${i.clientMetadata.client_name} - ${c.name} - DCQL`,
-          id: c.id,
-        }
-      }),
-    ]),
+    presentationRequests: verifiers
+      .filter((v) => 'useCase' in v)
+      .flatMap((verifier) => [
+        ...verifier.presentationRequests.map((c) => {
+          return {
+            useCase: verifier.useCase,
+            display: `${verifier.clientMetadata.client_name} - ${c.name} - DIF PEX`,
+            id: c.id,
+          }
+        }),
+        ...verifier.dcqlRequests.map((c) => {
+          return {
+            useCase: verifier.useCase,
+            display: `${verifier.clientMetadata.client_name} - ${c.name} - DCQL`,
+            id: c.id,
+          }
+        }),
+      ]),
   })
 })
 

diff --git a/agent/src/verifier.ts b/agent/src/verifier.ts
@@ -2,11 +2,18 @@ import type { DcqlQuery, DifPresentationExchangeDefinitionV2 } from '@credo-ts/c
 import type { OpenId4VcSiopCreateVerifierOptions } from '@credo-ts/openid4vc'
 import { agent } from './agent'
 
+type UseCase =
+  | 'Rent a car | Showcases: multi-credentials | mixed-credentials | Query languages | Smart AI warnings | Federation support'
+  | 'Get an ePrescription | Showcases: Federation support | QEAA | DCQL'
+  | 'Government identification | Showcases: PID | multi-credentials | mixed-credentials | Query languages | Federation support'
+  | 'Open a bank account | Showcases: Federation support |  Smart AI warnings | multi-credentials | mixed-credentials'
+
 export interface PlaygroundVerifierOptions {
   verifierId: string
   clientMetadata?: OpenId4VcSiopCreateVerifierOptions['clientMetadata']
   presentationRequests: Array<DifPresentationExchangeDefinitionV2>
   dcqlRequests: Array<DcqlQuery & { id: string; name: string }>
+  useCase?: UseCase
 }
 
 export async function createOrUpdateVerifier(options: PlaygroundVerifierOptions) {

diff --git a/agent/src/verifiers/bundesregierung.ts b/agent/src/verifiers/bundesregierung.ts
@@ -6,6 +6,8 @@ import { pidSdJwtInputDescriptor } from './util'
 
 export const bundesregierungVerifier = {
   verifierId: '019368ed-3787-7669-b7f4-8c012238e90d',
+  useCase:
+    'Government identification | Showcases: PID | multi-credentials | mixed-credentials | Query languages | Federation support',
   clientMetadata: {
     logo_uri: `${AGENT_HOST}/assets/verifiers/bunde.png`,
     client_name: 'Die Bundesregierung',

diff --git a/agent/src/verifiers/cheapCars.ts b/agent/src/verifiers/cheapCars.ts
@@ -1,20 +1,19 @@
 import { AGENT_HOST } from '../constants'
-import { certificateOfResidenceSdJwt, certificateOfResidenceSdJwtData } from '../issuers/koln'
-import { steuerIdSdJwt, steuerIdSdJwtData } from '../issuers/steuern'
-import { healthIdSdJwt, healthIdSdJwtData } from '../issuers/techniker'
 import type { PlaygroundVerifierOptions } from '../verifier'
 import { pidMdocInputDescriptor, pidSdJwtInputDescriptor, sdJwtInputDescriptor } from './util'
 
 export const cheapCarsVerifier = {
   verifierId: '019368fe-ee82-7990-880c-7f0ceb92b0aa',
+  useCase:
+    'Rent a car | Showcases: multi-credentials | mixed-credentials | Query languages | Smart AI warnings | Federation support',
   clientMetadata: {
     logo_uri: `${AGENT_HOST}/assets/verifiers/cheap-cars.webp`,
     client_name: 'Cheap Cars',
   },
   presentationRequests: [
     {
       id: '019368ff-0ec7-7eec-bdbf-861e512d0924',
-      name: 'PID and MDL - Secure car reservations (vc+sd-jwt)',
+      name: 'PID and MDL - Secure car reservations (vc+sd-jwt) - Not trust anchor - AI over asking',
       purpose: 'To secure your car reservations and finalize the transaction, we require the following attributes',
       input_descriptors: [
         // TODO: Add more fields

diff --git a/agent/src/verifiers/index.ts b/agent/src/verifiers/index.ts
@@ -7,9 +7,9 @@ import { kvkVerifier } from './kvk'
 import { openHorizonBankVerifier } from './openHorizonBank'
 import { pgeuVerifier } from './pgeu'
 import { redcarePharmacyVerifier } from './redcarePharmacy'
-import { turboKeysVerifier } from './sixt'
 import type { TrustChain } from './trustChains'
 import { trustPilotVerifier } from './trustPilot'
+import { turboKeysVerifier } from './turboKeys'
 
 export const verifiers = [
   turboKeysVerifier,

diff --git a/agent/src/verifiers/openHorizonBank.ts b/agent/src/verifiers/openHorizonBank.ts
@@ -7,6 +7,8 @@ import { pidSdJwtInputDescriptor, sdJwtInputDescriptor } from './util'
 
 export const openHorizonBankVerifier = {
   verifierId: '019368e8-54aa-788e-81c4-e60a59a09d87',
+  useCase:
+    'Open a bank account | Showcases: Federation support |  Smart AI warnings | multi-credentials | mixed-credentials',
   clientMetadata: {
     logo_uri: `${AGENT_HOST}/assets/verifiers/openbank.png`,
     client_name: 'Open Horizon Bank',

diff --git a/agent/src/verifiers/redcarePharmacy.ts b/agent/src/verifiers/redcarePharmacy.ts
@@ -5,6 +5,7 @@ import { sdJwtInputDescriptor } from './util'
 
 export const redcarePharmacyVerifier = {
   verifierId: '01936901-2390-722e-b9f1-bf42db4db7ca',
+  useCase: 'Get an ePrescription | Showcases: Federation support | QEAA | DCQL',
   clientMetadata: {
     logo_uri: `${AGENT_HOST}/assets/verifiers/redcare.png`,
     client_name: 'Redcare Pharmacy',

diff --git a/agent/src/verifiers/sixt.ts → agent/src/verifiers/turboKeys.ts b/agent/src/verifiers/sixt.ts → agent/src/verifiers/turboKeys.ts
@@ -14,6 +14,8 @@ import {
 
 export const turboKeysVerifier = {
   verifierId: 'c01ea0f3-34df-41d5-89d1-50ef3d181855',
+  useCase:
+    'Rent a car | Showcases: multi-credentials | mixed-credentials | Query languages | Smart AI warnings | Federation support',
   clientMetadata: {
     logo_uri: `${AGENT_HOST}/assets/verifiers/turbokeys/verifier.png`,
     client_name: 'TurboKeys - Rent a Car',

diff --git a/app/components/VerifyBlock.tsx b/app/components/VerifyBlock.tsx
@@ -2,6 +2,7 @@ import { getRequestStatus, getVerifier } from '@/lib/api'
 import { useInterval } from '@/lib/hooks'
 import { CheckboxIcon, ExclamationTriangleIcon, InfoCircledIcon } from '@radix-ui/react-icons'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip'
+import { groupBy } from 'es-toolkit'
 import Link from 'next/link'
 import { type FormEvent, useEffect, useState } from 'react'
 import QRCode from 'react-qr-code'
@@ -45,6 +46,7 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
     presentationRequests: Array<{
       id: string
       display: string
+      useCase: string
     }>
   }>()
   const [responseMode, setResponseMode] = useState<ResponseMode>('direct_post.jwt')
@@ -60,6 +62,7 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
   const [presentationDefinitionId, setPresentationDefinitionId] = useState<string>()
   const [requestScheme, setRequestScheme] = useState<string>('openid4vp://')
   const [requestSignerType, setRequestSignerType] = useState<RequestSignerType>('x5c')
+  const [useCase, setUseCase] = useState<string>('')
   useEffect(() => {
     getVerifier().then(setVerifier)
   }, [])
@@ -98,6 +101,8 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
     setAuthorizationRequestUri(request.authorizationRequestUri)
   }
 
+  const groupedVerifier = verifier?.presentationRequests ? groupBy(verifier.presentationRequests, (v) => v.useCase) : {}
+
   return (
     <Card className="p-6">
       <Alert variant="default" className="mb-5">
@@ -117,6 +122,26 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
       </Alert>
       <TypographyH3>{flowName}</TypographyH3>
       <form className="space-y-4 mt-4" onSubmit={onSubmitCreateRequest}>
+        <div className="space-y-2">
+          <Label htmlFor="presentation-type">Use Case</Label>
+          <Select
+            name="presentation-definition-id"
+            required
+            value={useCase}
+            onValueChange={(value) => setUseCase(value)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a use case" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(groupedVerifier).map(([useCase]) => (
+                <SelectItem key={useCase} value={useCase}>
+                  {useCase}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
         <div className="space-y-2">
           <Label htmlFor="presentation-type">Presentation Type</Label>
           <Select
@@ -129,7 +154,7 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
               <SelectValue placeholder="Select a presentation type" />
             </SelectTrigger>
             <SelectContent>
-              {verifier?.presentationRequests.map((p) => (
+              {groupedVerifier[useCase]?.map((p) => (
                 <SelectItem key={p.id} value={p.id}>
                   {p.display}
                 </SelectItem>

diff --git a/app/package.json b/app/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "es-toolkit": "^1.27.0",
     "lucide-react": "^0.309.0",
     "next": "14.0.4",
     "prism-react-renderer": "^2.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml