feat: add open in wallet button

Signed-off-by: Timo Glastra <[email protected]>

app/components/VerifyBlock.tsx

@@ -11,6 +11,7 @@ import { Card } from './ui/card'
 import { Label } from './ui/label'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from './ui/select'
 import { TypographyH3, TypographyH4 } from './ui/typography'
+import Link from 'next/link'
 
 export type CredentialType = 'mdoc' | 'sdjwt'
 export type RequestType = 'name_age_over_21' | 'city' | 'age_birth_family_name'
@@ -161,6 +162,13 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
                         {authorizationRequestUri}
                       </p>
                     </TooltipTrigger>
+                    <div className="gap-2 w-full justify-center flex flex-1">
+                      <div>
+                        <Link href={authorizationRequestUri}>
+                          <Button>Open in Wallet</Button>
+                        </Link>
+                      </div>
+                    </div>
                   </div>
 
                   <TooltipContent>

app/components/VerifyTab.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
 import { createRequest, getIssuer, getX509Certificate } from '../lib/api'
 import { type CredentialType, type RequestType, VerifyBlock } from './VerifyBlock'
 
+const randomId = () => (Math.random() + 1).toString(36).substring(7)
+
 export function VerifyTab() {
   const [x509Certificate, setX509Certificate] = useState<string>()
 
@@ -65,12 +67,12 @@ const getSdJwtPresentationDefinition = (issuer: string, requestType: RequestType
   }
 
   return {
-    id: crypto.randomUUID(),
+    id: randomId(),
     name: 'Bank account identity verification',
     purpose: 'To open a bank account we need to verify your identity.',
     input_descriptors: [
       {
-        id: crypto.randomUUID(),
+        id: randomId(),
         constraints: {
           limit_disclosure: 'required',
           fields: [
@@ -142,7 +144,7 @@ const getMdocPresentationDefinition = (requestType: RequestType) => {
   }
 
   return {
-    id: crypto.randomUUID(),
+    id: randomId(),
     name: 'Bank account identity verification',
     purpose: 'To open a bank account we need to verify your identity.',
     input_descriptors: [