From f34987fdc56bc21625beccd1e420671610ec5014 Mon Sep 17 00:00:00 2001 From: Tom Lanser Date: Tue, 26 Nov 2024 20:25:42 +0100 Subject: [PATCH] feat: Usecases in the frontend to seperate specific flows Signed-off-by: Tom Lanser --- agent/src/endpoints.ts | 32 +++++++++++-------- agent/src/verifier.ts | 7 ++++ agent/src/verifiers/bundesregierung.ts | 2 ++ agent/src/verifiers/cheapCars.ts | 7 ++-- agent/src/verifiers/index.ts | 2 +- agent/src/verifiers/openHorizonBank.ts | 2 ++ agent/src/verifiers/redcarePharmacy.ts | 1 + agent/src/verifiers/{sixt.ts => turboKeys.ts} | 2 ++ app/components/VerifyBlock.tsx | 27 +++++++++++++++- app/package.json | 1 + pnpm-lock.yaml | 14 ++++++-- 11 files changed, 74 insertions(+), 23 deletions(-) rename agent/src/verifiers/{sixt.ts => turboKeys.ts} (96%) diff --git a/agent/src/endpoints.ts b/agent/src/endpoints.ts index c7d1459..61b0a78 100644 --- 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 index 10e2857..fb5cb94 100644 --- 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 dcqlRequests: Array + useCase?: UseCase } export async function createOrUpdateVerifier(options: PlaygroundVerifierOptions) { diff --git a/agent/src/verifiers/bundesregierung.ts b/agent/src/verifiers/bundesregierung.ts index 4f567e1..2fe1a22 100644 --- 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 index 50a9654..c81af38 100644 --- a/agent/src/verifiers/cheapCars.ts +++ b/agent/src/verifiers/cheapCars.ts @@ -1,12 +1,11 @@ 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', @@ -14,7 +13,7 @@ export const cheapCarsVerifier = { 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 index 05a3ec5..35c2a46 100644 --- 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 index f7e6df6..6678298 100644 --- 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 index 38425cd..36387b2 100644 --- 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 b/agent/src/verifiers/turboKeys.ts similarity index 96% rename from agent/src/verifiers/sixt.ts rename to agent/src/verifiers/turboKeys.ts index 1e08761..35036e0 100644 --- a/agent/src/verifiers/sixt.ts +++ b/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 index 354647c..d7c9835 100644 --- 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 = ({ createRequest, flowNam presentationRequests: Array<{ id: string display: string + useCase: string }> }>() const [responseMode, setResponseMode] = useState('direct_post.jwt') @@ -60,6 +62,7 @@ export const VerifyBlock: React.FC = ({ createRequest, flowNam const [presentationDefinitionId, setPresentationDefinitionId] = useState() const [requestScheme, setRequestScheme] = useState('openid4vp://') const [requestSignerType, setRequestSignerType] = useState('x5c') + const [useCase, setUseCase] = useState('') useEffect(() => { getVerifier().then(setVerifier) }, []) @@ -98,6 +101,8 @@ export const VerifyBlock: React.FC = ({ createRequest, flowNam setAuthorizationRequestUri(request.authorizationRequestUri) } + const groupedVerifier = verifier?.presentationRequests ? groupBy(verifier.presentationRequests, (v) => v.useCase) : {} + return ( @@ -117,6 +122,26 @@ export const VerifyBlock: React.FC = ({ createRequest, flowNam {flowName}
+
+ + +