From 624a1bb88a7bf6e6c214eb62e2b76d3bdf5afc61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliano=20C=C3=A9zar=20Chagas=20Tavares?=
 <juliano.cezar@spruceid.com>
Date: Tue, 22 Oct 2024 16:37:24 -0300
Subject: [PATCH] OID4VP UI  (#46)

This implements the UI for the OID4VP flow and adds an error page
---
 .idea/inspectionProfiles/Project_Default.xml  |   5 +
 MobileSdk/build.gradle.kts                    |   2 +-
 .../com/spruceid/mobile/sdk/Credential.kt     |  10 +-
 .../com/spruceid/mobile/sdk/CredentialPack.kt |   4 +-
 .../spruceid/mobilesdkexample/ErrorView.kt    | 202 +++++++
 .../spruceid/mobilesdkexample/LoadingView.kt  |   1 -
 .../mobilesdkexample/ui/theme/Color.kt        |  15 +-
 .../spruceid/mobilesdkexample/utils/Utils.kt  |   2 +-
 .../wallet/HandleOID4VPView.kt                | 532 ++++++++++++++----
 .../mobilesdkexample/wallet/OID4VCI.kt        |  20 +-
 example/src/main/res/drawable/collapse.xml    |   9 +
 example/src/main/res/drawable/error.xml       |   9 +
 example/src/main/res/drawable/expand.xml      |   9 +
 example/src/main/res/values/colors.xml        |  14 +
 example/src/main/res/values/strings.xml       |   3 +
 15 files changed, 722 insertions(+), 115 deletions(-)
 create mode 100644 example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt
 create mode 100644 example/src/main/res/drawable/collapse.xml
 create mode 100644 example/src/main/res/drawable/error.xml
 create mode 100644 example/src/main/res/drawable/expand.xml

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 6195b36..e0da3ee 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -3,15 +3,19 @@
     <option name="myName" value="Project Default" />
     <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
@@ -35,6 +39,7 @@
     </inspection_tool>
     <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
diff --git a/MobileSdk/build.gradle.kts b/MobileSdk/build.gradle.kts
index 0543c1f..9888c03 100644
--- a/MobileSdk/build.gradle.kts
+++ b/MobileSdk/build.gradle.kts
@@ -116,7 +116,7 @@ android {
 }
 
 dependencies {
-    api("com.spruceid.mobile.sdk.rs:mobilesdkrs:0.0.37-SNAPSHOT")
+    api("com.spruceid.mobile.sdk.rs:mobilesdkrs:0.2.1")
     //noinspection GradleCompatible
     implementation("com.android.support:appcompat-v7:28.0.0")
     /* Begin UI dependencies */
diff --git a/MobileSdk/src/main/java/com/spruceid/mobile/sdk/Credential.kt b/MobileSdk/src/main/java/com/spruceid/mobile/sdk/Credential.kt
index 3c8b239..2e5dd52 100644
--- a/MobileSdk/src/main/java/com/spruceid/mobile/sdk/Credential.kt
+++ b/MobileSdk/src/main/java/com/spruceid/mobile/sdk/Credential.kt
@@ -3,7 +3,7 @@ package com.spruceid.mobile.sdk
 import com.spruceid.mobile.sdk.rs.JsonVc
 import com.spruceid.mobile.sdk.rs.JwtVc
 import com.spruceid.mobile.sdk.rs.Mdoc
-import com.spruceid.mobile.sdk.rs.SdJwt
+import com.spruceid.mobile.sdk.rs.Vcdm2SdJwt
 import org.json.JSONException
 import org.json.JSONObject
 import org.json.JSONTokener
@@ -99,9 +99,9 @@ fun JsonVc.credentialClaimsFiltered(claimNames: List<String>): JSONObject {
 }
 
 /**
- * Access the SD-JWT credential.
+ * Access the VCDM 2.0 SD-JWT credential.
  */
-fun SdJwt.credentialClaims(): JSONObject {
+fun Vcdm2SdJwt.credentialClaims(): JSONObject {
     try {
         return JSONObject(this.revealedClaimsAsJsonString())
     } catch (e: Error) {
@@ -111,9 +111,9 @@ fun SdJwt.credentialClaims(): JSONObject {
 }
 
 /**
- * Access the specified claims from the SD-JWT credential.
+ * Access the specified claims from the VCDM 2.0 SD-JWT credential.
  */
-fun SdJwt.credentialClaimsFiltered(claimNames: List<String>): JSONObject {
+fun Vcdm2SdJwt.credentialClaimsFiltered(claimNames: List<String>): JSONObject {
     val old = this.credentialClaims()
     val new = JSONObject()
     for (name in claimNames) {
diff --git a/MobileSdk/src/main/java/com/spruceid/mobile/sdk/CredentialPack.kt b/MobileSdk/src/main/java/com/spruceid/mobile/sdk/CredentialPack.kt
index 8c75eda..ab26c5b 100644
--- a/MobileSdk/src/main/java/com/spruceid/mobile/sdk/CredentialPack.kt
+++ b/MobileSdk/src/main/java/com/spruceid/mobile/sdk/CredentialPack.kt
@@ -4,7 +4,7 @@ import com.spruceid.mobile.sdk.rs.JsonVc
 import com.spruceid.mobile.sdk.rs.JwtVc
 import com.spruceid.mobile.sdk.rs.Mdoc
 import com.spruceid.mobile.sdk.rs.ParsedCredential
-import com.spruceid.mobile.sdk.rs.SdJwt
+import com.spruceid.mobile.sdk.rs.Vcdm2SdJwt
 import org.json.JSONObject
 
 /**
@@ -48,7 +48,7 @@ class CredentialPack {
     /**
      * Add a SD-JWT to the CredentialPack.
      */
-    fun addSdJwt(sdJwt: SdJwt): List<ParsedCredential> {
+    fun addSdJwt(sdJwt: Vcdm2SdJwt): List<ParsedCredential> {
         credentials.add(ParsedCredential.newSdJwt(sdJwt))
         return credentials
     }
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt
new file mode 100644
index 0000000..31a6460
--- /dev/null
+++ b/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt
@@ -0,0 +1,202 @@
+package com.spruceid.mobilesdkexample
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.spruceid.mobilesdkexample.ui.theme.BorderSecondary
+import com.spruceid.mobilesdkexample.ui.theme.ColorRose600
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone300
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone50
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone600
+import com.spruceid.mobilesdkexample.ui.theme.Inter
+import com.spruceid.mobilesdkexample.ui.theme.TextPrimary
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ErrorView(
+    errorTitle: String,
+    errorDetails: String,
+    closeButtonLabel: String = "Close",
+    onClose: () -> Unit
+) {
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    var showSheet by remember {
+        mutableStateOf(false)
+    }
+
+    Box(
+        Modifier.fillMaxSize(),
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.error),
+                contentDescription = stringResource(id = R.string.error)
+            )
+            Text(
+                errorTitle,
+                fontFamily = Inter,
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 26.sp,
+                color = ColorRose600,
+                textAlign = TextAlign.Center
+            )
+            Text(
+                "View technical details",
+                fontFamily = Inter,
+                fontWeight = FontWeight.Normal,
+                fontSize = 16.sp,
+                color = ColorStone600,
+                textAlign = TextAlign.Center,
+                textDecoration = TextDecoration.Underline,
+                modifier = Modifier.clickable {
+                    showSheet = true
+                }
+            )
+        }
+
+        Column {
+            Spacer(Modifier.weight(1f))
+            Button(
+                onClick = {
+                    onClose()
+                },
+                shape = RoundedCornerShape(6.dp),
+                colors =  ButtonDefaults.buttonColors(
+                    containerColor = Color.Transparent,
+                    contentColor = TextPrimary,
+                ),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(30.dp)
+                    .border(
+                        width = 1.dp,
+                        color = BorderSecondary,
+                        shape = RoundedCornerShape(6.dp)
+                    )
+            ) {
+                Text(
+                    text = closeButtonLabel,
+                    fontFamily = Inter,
+                    fontWeight = FontWeight.SemiBold,
+                    color = TextPrimary,
+                )
+            }
+        }
+
+        if (showSheet) {
+            ModalBottomSheet(
+                onDismissRequest = {
+                    showSheet = false
+                },
+                modifier =
+                Modifier
+                    .fillMaxHeight(0.8f),
+                sheetState = sheetState,
+                dragHandle = null,
+                containerColor = Color.Transparent,
+            ) {
+                Box(
+                    Modifier
+                        .fillMaxSize()
+                        .background(Color.White),
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 24.dp)
+                            .padding(top = 48.dp)
+                    ) {
+                        Column(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .verticalScroll(rememberScrollState())
+                                .weight(weight = 1f, fill = false)
+                                .background(ColorStone50)
+                                .border(1.dp, ColorStone300, RoundedCornerShape(6.dp))
+                                .padding(16.dp)
+                        ) {
+                            Text(
+                                text = errorDetails,
+                                fontSize = 16.sp,
+                                fontFamily = FontFamily.Monospace,
+                                color = Color.Black,
+                            )
+                        }
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(vertical = 12.dp),
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        ) {
+                            Button(
+                                onClick = {
+                                    showSheet = false
+                                },
+                                shape = RoundedCornerShape(6.dp),
+                                colors =  ButtonDefaults.buttonColors(
+                                    containerColor = Color.Transparent,
+                                    contentColor = TextPrimary,
+                                ),
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .border(
+                                        width = 1.dp,
+                                        color = BorderSecondary,
+                                        shape = RoundedCornerShape(6.dp)
+                                    )
+                                    .weight(1f)
+                            ) {
+                                Text(
+                                    text = "Close",
+                                    fontFamily = Inter,
+                                    fontWeight = FontWeight.SemiBold,
+                                    color = TextPrimary,
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt
index caf6a21..91f9497 100644
--- a/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt
+++ b/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt
@@ -26,7 +26,6 @@ import com.spruceid.mobilesdkexample.ui.theme.CodeBorder
 import com.spruceid.mobilesdkexample.ui.theme.ColorBase800
 import com.spruceid.mobilesdkexample.ui.theme.Inter
 
-@OptIn(ExperimentalAssetLoader::class)
 @Composable
 fun LoadingView(
     loadingText: String,
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt
index 9c6d356..400433e 100644
--- a/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt
+++ b/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt
@@ -23,4 +23,17 @@ val VerifierRequestBadgeFieldText = Color(0xFF0C0A09)
 val VerifiedGreenValid = Color(0xFF047857)
 val VerifiedRedInvalid = Color(0xFFBE123C)
 val VerifierCloseButton = Color(0xFF44403C)
-val ColorBase800 = Color(0xFF75675C)
\ No newline at end of file
+// Design system colors
+val ColorBase300 = Color(0xFFE6E1D6)
+val ColorBase800 = Color(0xFF75675C)
+val ColorBlue600 = Color(0xFF2F6AE1)
+val ColorStone50 = Color(0xFFFAFAF9)
+val ColorStone300 = Color(0xFFD6D3D1)
+val ColorStone600 = Color(0xFF57534E)
+val ColorStone950 = Color(0xFF0C0A09)
+val ColorEmerald900 = Color(0xFF084C3A)
+val ColorRose600 = Color(0xFFE11D48)
+val TextBase = Color(0xFFFBF9F6)
+val TextPrimary = Color(0xFF0C0A09)
+val BgSurfacePureBlue = Color(0xFF2F6AE1)
+val BorderSecondary = Color(0xFFD6D3D1)
\ No newline at end of file
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/utils/Utils.kt b/example/src/main/java/com/spruceid/mobilesdkexample/utils/Utils.kt
index c490eff..272bc0c 100644
--- a/example/src/main/java/com/spruceid/mobilesdkexample/utils/Utils.kt
+++ b/example/src/main/java/com/spruceid/mobilesdkexample/utils/Utils.kt
@@ -15,4 +15,4 @@ val keyBase64 =
 const val exampleSdJwt =
         "eyJhbGciOiJFZERTQSJ9.eyJfc2RfYWxnIjoic2hhLTI1NiIsIkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy9ucy9jcmVkZW50aWFscy92MiIsImh0dHBzOi8vcHVybC5pbXNnbG9iYWwub3JnL3NwZWMvb2IvdjNwMC9jb250ZXh0LTMuMC4zLmpzb24iXSwidHlwZSI6WyJWZXJpZmlhYmxlQ3JlZGVudGlhbCIsIk9wZW5CYWRnZUNyZWRlbnRpYWwiXSwiY3JlZGVudGlhbFN1YmplY3QiOnsiaWRlbnRpdHkiOlt7Ii4uLiI6ImxoeTloT3p6eWZZVFc0WWlockc4VVZRcHhFcWN1Nk9icFdvOVBhNExFRzAifSx7Imhhc2hlZCI6ZmFsc2UsImlkZW50aXR5SGFzaCI6ImpvaG4uc21pdGhAZXhhbXBsZS5jb20iLCJpZGVudGl0eVR5cGUiOiJlbWFpbEFkZHJlc3MiLCJzYWx0Ijoibm90LXVzZWQiLCJ0eXBlIjoiSWRlbnRpdHlPYmplY3QifV0sImFjaGlldmVtZW50Ijp7Im5hbWUiOiJUZWFtIE1lbWJlcnNoaXAiLCJ0eXBlIjoiQWNoaWV2ZW1lbnQifX0sImlzc3VlciI6eyJpZCI6ImRpZDpqd2s6ZXlKaGJHY2lPaUpGVXpJMU5pSXNJbU55ZGlJNklsQXRNalUySWl3aWEzUjVJam9pUlVNaUxDSjRJam9pYldKVU0yZHFPV0Z2T0dOdVMyODBNMHByY1ZSUFVtTkpRVkk0TUZnd1RVRlhRV05HWXpadlIxSk1ZeUlzSW5raU9pSmlPRlZPWTBoRE1tRkhRM0oxU1RaMFFsUldTVlkwZFc1WldFVnlTME00WkRSblJURkdaMHMwUTA1SkluMCMwIiwibmFtZSI6Ildvcmtmb3JjZSBEZXZlbG9wbWVudCBDb3VuY2lsIiwidHlwZSI6IlByb2ZpbGUifSwiYXdhcmRlZERhdGUiOiIyMDI0LTA5LTIzVDE4OjEyOjEyKzAwMDAiLCJuYW1lIjoiVGVhbU1lbWJlcnNoaXAifQ.0zGx7-Fkio8bS4EZW_odUu3F6FG7nvRVEbGKIte2OZPXGM12XEhTJptty-1ZUgPAtP_jiyU_KTP3hPrGKKNnBg~WyJoS25GV0g0R3J5dEdVMkFLUFNJSDdRIix7Imhhc2hlZCI6ZmFsc2UsImlkZW50aXR5SGFzaCI6IkpvaG4gU21pdGgiLCJpZGVudGl0eVR5cGUiOiJuYW1lIiwic2FsdCI6Im5vdC11c2VkIiwidHlwZSI6IklkZW50aXR5T2JqZWN0In1d~"
 
-val trustedDids = MutableList(1) { "did:web:ffe5-24-113-196-42.ngrok-free.app:oid4vp:client" }
+val trustedDids = MutableList(1) { "did:web:0808-2001-1284-f50e-da31-25fe-76c-81c7-63ef.ngrok-free.app:oid4vp:client" }
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt
index 37f93b2..8001466 100644
--- a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt
+++ b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt
@@ -1,5 +1,9 @@
 package com.spruceid.mobilesdkexample.wallet
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.*
 import androidx.compose.material3.*
@@ -7,7 +11,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -23,24 +26,48 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
-import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.spruceid.mobile.sdk.rs.Holder
 import com.spruceid.mobile.sdk.rs.ParsedCredential
 import com.spruceid.mobile.sdk.rs.PermissionRequest
-import com.spruceid.mobile.sdk.rs.SdJwt
 import com.spruceid.mobilesdkexample.ui.theme.Inter
-import com.spruceid.mobilesdkexample.ui.theme.MobileSdkTheme
 import com.spruceid.mobilesdkexample.viewmodels.IRawCredentialsViewModel
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
-import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.ParagraphStyle
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextIndent
+import androidx.compose.ui.text.withStyle
+import com.spruceid.mobile.sdk.CredentialPack
+import com.spruceid.mobile.sdk.rs.PermissionResponse
+import com.spruceid.mobile.sdk.rs.RequestedField
+import com.spruceid.mobile.sdk.rs.Vcdm2SdJwt
+import com.spruceid.mobilesdkexample.ErrorView
+import com.spruceid.mobilesdkexample.LoadingView
+import com.spruceid.mobilesdkexample.R
 import com.spruceid.mobilesdkexample.navigation.Screen
+import com.spruceid.mobilesdkexample.ui.theme.BgSurfacePureBlue
+import com.spruceid.mobilesdkexample.ui.theme.BorderSecondary
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase300
+import com.spruceid.mobilesdkexample.ui.theme.ColorBlue600
+import com.spruceid.mobilesdkexample.ui.theme.ColorEmerald900
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone600
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone950
+import com.spruceid.mobilesdkexample.ui.theme.TextBase
+import com.spruceid.mobilesdkexample.ui.theme.TextHeader
+import com.spruceid.mobilesdkexample.ui.theme.TextPrimary
 import com.spruceid.mobilesdkexample.utils.trustedDids
+import org.json.JSONObject
 
-
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalPermissionsApi::class)
 @Composable
 fun HandleOID4VPView(
     navController: NavController,
@@ -51,150 +78,465 @@ fun HandleOID4VPView(
 
     val rawCredentials by rawCredentialsViewModel.rawCredentials.collectAsState()
 
+    var credentialClaims by remember { mutableStateOf(mapOf<String, JSONObject>()) }
     var holder by remember { mutableStateOf<Holder?>(null) }
     var permissionRequest by remember { mutableStateOf<PermissionRequest?>(null) }
+    var permissionResponse by remember { mutableStateOf<PermissionResponse?>(null) }
+    var selectedCredential by remember { mutableStateOf<ParsedCredential?>(null) }
 
-    LaunchedEffect(Unit) {
-        println("URL: $url")
+    var err by remember {
+        mutableStateOf<String?>(null)
+    }
 
+    LaunchedEffect(Unit) {
         try {
             val credentials = rawCredentials.map { rawCredential ->
                 ParsedCredential
                     // TODO: Update to use VDC collection in the future
                     // to detect the type of credential.
-                    .newSdJwt(SdJwt.newFromCompactSdJwt(rawCredential.rawCredential))
+                    .newSdJwt(Vcdm2SdJwt.newFromCompactSdJwt(rawCredential.rawCredential))
+            }
+
+            val credentialPack = CredentialPack()
+
+            credentials.forEach { credential ->
+                credential.asSdJwt()?.let { credentialPack.addSdJwt(it) }
             }
 
+            credentialClaims = credentialPack.findCredentialClaims(listOf("name", "type"))
+
             withContext(Dispatchers.IO) {
                 holder = Holder.newWithCredentials(credentials, trustedDids);
                 permissionRequest = holder!!.authorizationRequest(url)
             }
         } catch (e: Exception) {
-            println("Error: $e")
+            err = e.localizedMessage
+        }
+    }
+
+    fun onBack() {
+        navController.navigate(Screen.HomeScreen.route) {
+            popUpTo(0)
         }
     }
 
-    if (permissionRequest == null) {
-        // Show a loading screen
-        MobileSdkTheme {
-            Row(
-                horizontalArrangement = Arrangement.SpaceBetween,
-                verticalAlignment = Alignment.CenterVertically,
+    if(err != null) {
+        ErrorView(
+            errorTitle = "Error Adding Credential",
+            errorDetails = err!!,
+            onClose = {
+                navController.navigate(Screen.HomeScreen.route) {
+                    popUpTo(0)
+                }
+            }
+        )
+    } else {
+        if (permissionRequest == null) {
+            LoadingView(loadingText = "Loading...")
+        } else if (permissionResponse == null) {
+            CredentialSelector(
+                credentials = permissionRequest!!.credentials(),
+                credentialClaims = credentialClaims,
+                getRequestedFields = { credential -> permissionRequest!!.requestedFields(credential) },
+                onContinue = { selectedCredentials ->
+                    scope.launch {
+                        try {
+                            // TODO: support multiple presentation
+                            selectedCredential = selectedCredentials.first()
+                            permissionResponse = permissionRequest!!.createPermissionResponse(
+                                selectedCredential!!
+                            )
+                        } catch (e: Exception) {
+                            err = e.localizedMessage
+                        }
+                    }
+                },
+                onCancel = {
+                    onBack()
+                }
+            )
+        } else {
+            DataFieldSelector(
+                requestedFields = permissionRequest!!.requestedFields(selectedCredential!!),
+                onContinue = {
+                    scope.launch {
+                        try {
+                            holder!!.submitPermissionResponse(permissionResponse!!)
+                            onBack()
+                        } catch (e: Exception) {
+                            err = e.localizedMessage
+                        }
+                    }
+                },
+                onCancel = {
+                    onBack()
+                }
+            )
+        }
+    }
+}
+
+@Composable
+fun DataFieldSelector(
+    requestedFields: List<RequestedField>,
+    onContinue: () -> Unit,
+    onCancel: () -> Unit
+) {
+
+    val bullet = "\u2022"
+    val paragraphStyle = ParagraphStyle(textIndent = TextIndent(restLine = 12.sp))
+    val mockDataField = requestedFields.map { field ->
+        field.name().replaceFirstChar(Char::titlecase)
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp)
+            .padding(top = 48.dp)
+    ) {
+        Text(
+            buildAnnotatedString {
+                withStyle(style = SpanStyle(color = Color.Blue)) {
+                    append("Verifier")
+                }
+                append(" is requesting access to the following information")
+            },
+            fontFamily = Inter,
+            fontWeight = FontWeight.Bold,
+            fontSize = 20.sp,
+            color = TextHeader,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 12.dp),
+            textAlign = TextAlign.Center
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+                .weight(weight = 1f, fill = false)
+        ) {
+            Text(
+                buildAnnotatedString {
+                    mockDataField.forEach {
+                        withStyle(style = paragraphStyle) {
+                            append(bullet)
+                            append("\t\t")
+                            append(it)
+                        }
+                    }
+                },
+            )
+        }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 12.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Button(
+                onClick = {
+                    onCancel()
+                },
+                shape = RoundedCornerShape(6.dp),
+                colors =  ButtonDefaults.buttonColors(
+                    containerColor = Color.Transparent,
+                    contentColor = TextPrimary,
+                ),
                 modifier = Modifier
-                    .fillMaxSize()
-                    .padding(horizontal = 24.dp)
+                    .fillMaxWidth()
+                    .border(
+                        width = 1.dp,
+                        color = BorderSecondary,
+                        shape = RoundedCornerShape(6.dp)
+                    )
+                    .weight(1f)
             ) {
                 Text(
-                    text = "Loading... $url",
+                    text = "Cancel",
                     fontFamily = Inter,
-                    fontWeight = FontWeight.Normal,
-                    fontSize = 14.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    color = TextPrimary,
                 )
             }
-        }
-    } else {
-        // Load the Credential View
-        CredentialSelector(navController, permissionRequest!!.credentials(), onSelectedCredential = { selectedCredentials ->
-            scope.launch {
-                try {
-                    val selectedCredential = selectedCredentials.first()
-                    val permissionResponse = permissionRequest!!.createPermissionResponse(selectedCredential)
-
-                    println("Submitting permission response")
-
-                    holder!!.submitPermissionResponse(permissionResponse)
-                } catch (e: Exception) {
-                    println("Error: $e")
-                }
+
+            Button(
+                onClick = {
+                    onContinue()
+                },
+                shape = RoundedCornerShape(6.dp),
+                colors =  ButtonDefaults.buttonColors(
+                    containerColor = ColorEmerald900
+                ),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(
+                        color = ColorEmerald900,
+                        shape = RoundedCornerShape(6.dp),
+                    )
+                    .weight(1f)
+            ) {
+                Text(
+                    text = "Approve",
+                    fontFamily = Inter,
+                    fontWeight = FontWeight.SemiBold,
+                    color = TextBase,
+                )
             }
-        })
+        }
     }
-
 }
 
-
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CredentialSelector(
-    navController: NavController,
     credentials: List<ParsedCredential>,
-    onSelectedCredential: (List<ParsedCredential>) -> Unit
+    credentialClaims: Map<String, JSONObject>,
+    getRequestedFields: (ParsedCredential) -> List<RequestedField>,
+    onContinue: (List<ParsedCredential>) -> Unit,
+    onCancel: () -> Unit,
+    allowMultiple: Boolean = false
 ) {
-    var expanded by remember { mutableStateOf(false) }
     val selectedCredentials = remember { mutableStateListOf<ParsedCredential>() }
 
+    fun selectCredential(credential: ParsedCredential) {
+        if (allowMultiple) {
+            selectedCredentials.add(credential)
+        } else {
+            selectedCredentials.clear()
+            selectedCredentials.add(credential)
+        }
+    }
+
+    fun removeCredential(credential: ParsedCredential) {
+        selectedCredentials.remove(credential)
+    }
+
+    fun getCredentialTitle(credential: ParsedCredential): String {
+        try {
+            credentialClaims[credential.id()]?.getString("name").let {
+                return it.toString()
+            }
+        } catch(_: Exception) {}
+
+        try {
+            credentialClaims[credential.id()]?.getJSONArray("type").let {
+                for (i in 0 until it!!.length()) {
+                    if (it.get(i).toString() != "VerifiableCredential") {
+                       return it.get(i).toString()
+                    }
+                }
+                return ""
+            }
+        } catch(_: Exception) {}
+        return ""
+    }
+
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(48.dp)
+            .padding(horizontal = 24.dp)
+            .padding(top = 48.dp)
     ) {
-//        Text(
-//            text = "SpruceiD Demo Wallet",
-//            style = MaterialTheme.typography.headlineSmall
-//        )
-//
-//        Spacer(modifier = Modifier.height(16.dp))
-
         Text(
-            text = "Select the credential(s) to share",
-            style = MaterialTheme.typography.bodyLarge
+            text = "Select the credential${if(allowMultiple) "(s)" else ""} to share",
+            fontFamily = Inter,
+            fontWeight = FontWeight.Bold,
+            fontSize = 20.sp,
+            color = TextHeader,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 12.dp),
+            textAlign = TextAlign.Center
         )
 
-        Spacer(modifier = Modifier.height(8.dp))
+        if (allowMultiple) {
+            Text(
+                text = "Select All",
+                fontFamily = Inter,
+                fontWeight = FontWeight.Normal,
+                fontSize = 15.sp,
+                color = ColorBlue600,
+                modifier = Modifier.clickable {
+                    // TODO: implement select all
+                }
+            )
+        }
 
-        ElevatedButton(
-            onClick = { expanded = !expanded },
-            modifier = Modifier.fillMaxWidth()
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+                .weight(weight = 1f, fill = false)
         ) {
-            Text(text = if (expanded) "Select All" else "Select Credentials")
+            credentials.forEach { credential ->
+                CredentialSelectorItem(
+                    credential = credential,
+                    requestedFields = getRequestedFields(credential),
+                    getCredentialTitle = {cred -> getCredentialTitle(cred)},
+                    isChecked = credential in selectedCredentials,
+                    selectCredential = { cred -> selectCredential(cred) },
+                    removeCredential = { cred -> removeCredential(cred) },
+                )
+            }
         }
 
-        if (expanded) {
-            credentials.forEach { credential ->
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 8.dp),
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    Checkbox(
-                        checked = credential in selectedCredentials,
-                        onCheckedChange = { isChecked ->
-                            if (isChecked) {
-                                selectedCredentials.add(credential)
-                            } else {
-                                selectedCredentials.remove(credential)
-                            }
-                        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 12.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Button(
+                onClick = {
+                    onCancel()
+                },
+                shape = RoundedCornerShape(6.dp),
+                colors =  ButtonDefaults.buttonColors(
+                    containerColor = Color.Transparent,
+                    contentColor = TextPrimary,
+                ),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .border(
+                        width = 1.dp,
+                        color = BorderSecondary,
+                        shape = RoundedCornerShape(6.dp)
                     )
-                    Text(
-                        text = credential.format().toString(),
-                        modifier = Modifier.padding(start = 8.dp)
+                    .weight(1f)
+            ) {
+                Text(
+                    text = "Cancel",
+                    fontFamily = Inter,
+                    fontWeight = FontWeight.SemiBold,
+                    color = TextPrimary,
+                )
+            }
+
+            Button(
+                onClick = {
+                    if(selectedCredentials.isNotEmpty()) {
+                        onContinue(selectedCredentials)
+                    }
+                },
+                shape = RoundedCornerShape(6.dp),
+                colors =  ButtonDefaults.buttonColors(
+                containerColor = if (selectedCredentials.isNotEmpty()) {
+                        ColorStone600
+                    } else {
+                        Color.Gray
+                    }
+                ),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(
+                        color = if (selectedCredentials.isNotEmpty()) {
+                            ColorStone600
+                        } else {
+                            Color.Gray
+                        },
+                        shape = RoundedCornerShape(6.dp),
                     )
-                }
+                    .weight(1f)
+            ) {
+                Text(
+                    text = "Continue",
+                    fontFamily = Inter,
+                    fontWeight = FontWeight.SemiBold,
+                    color = TextBase,
+                )
             }
         }
+    }
+}
 
-        Spacer(modifier = Modifier.height(16.dp))
+@Composable
+fun CredentialSelectorItem(
+    credential: ParsedCredential,
+    requestedFields: List<RequestedField>,
+    getCredentialTitle: (ParsedCredential) -> String,
+    isChecked: Boolean,
+    selectCredential: (ParsedCredential) -> Unit,
+    removeCredential: (ParsedCredential) -> Unit
+) {
+    var expanded by remember { mutableStateOf(false) }
 
+    val bullet = "\u2022"
+    val paragraphStyle = ParagraphStyle(textIndent = TextIndent(restLine = 12.sp))
+    val mockDataField = requestedFields.map { field ->
+        field.name().replaceFirstChar(Char::titlecase)
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 8.dp)
+            .border(
+                width = 1.dp,
+                color = ColorBase300,
+                shape = RoundedCornerShape(8.dp)
+            )
+    ) {
         Row(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.SpaceBetween
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(end = 8.dp),
+            verticalAlignment = Alignment.CenterVertically
         ) {
-            OutlinedButton(onClick = {
-                // navigate back to home screen
-                navController.navigate(Screen.HomeScreen.route)
-            }) {
-                Text("Cancel")
+            Checkbox(
+                checked = isChecked,
+                onCheckedChange = { isChecked ->
+                    if (isChecked) {
+                        selectCredential(credential)
+                    } else {
+                        removeCredential(credential)
+                    }
+                },
+                colors = CheckboxDefaults.colors(
+                    checkedColor = BgSurfacePureBlue,
+                    uncheckedColor = BorderSecondary
+                )
+            )
+            Text(
+                text = getCredentialTitle(credential),
+                fontFamily = Inter,
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 18.sp,
+                color = ColorStone950
+            )
+            Spacer(Modifier.weight(1f))
+            if (expanded) {
+                Image(
+                    painter = painterResource(id = R.drawable.collapse),
+                    contentDescription = stringResource(id = R.string.collapse),
+                    modifier = Modifier.clickable { expanded = false }
+                )
+            } else {
+                Image(
+                    painter = painterResource(id = R.drawable.expand),
+                    contentDescription = stringResource(id = R.string.expand),
+                    modifier = Modifier.clickable { expanded = true }
+                )
             }
-            Button(onClick = {
-                onSelectedCredential(selectedCredentials)
 
-                // Navigate
-                navController.navigate(Screen.HomeScreen.route)
-            }) {
-                Text("Continue")
-            }
+        }
+
+        if (expanded) {
+            Text(
+                buildAnnotatedString {
+                    mockDataField.forEach {
+                        withStyle(style = paragraphStyle) {
+                            append(bullet)
+                            append("\t\t")
+                            append(it)
+                        }
+                    }
+                },
+                modifier = Modifier.padding(16.dp)
+            )
         }
     }
+
 }
\ No newline at end of file
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt
index 94407c7..d59efb6 100644
--- a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt
+++ b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt
@@ -12,8 +12,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.navigation.NavController
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
@@ -25,10 +23,12 @@ import com.spruceid.mobile.sdk.rs.HttpResponse
 import com.spruceid.mobile.sdk.rs.Oid4vci
 import com.spruceid.mobile.sdk.rs.generatePopComplete
 import com.spruceid.mobile.sdk.rs.generatePopPrepare
+import com.spruceid.mobilesdkexample.ErrorView
 import com.spruceid.mobilesdkexample.LoadingView
 import com.spruceid.mobilesdkexample.R
 import com.spruceid.mobilesdkexample.ScanningComponent
 import com.spruceid.mobilesdkexample.ScanningType
+import com.spruceid.mobilesdkexample.navigation.Screen
 import io.ktor.client.HttpClient
 import io.ktor.client.engine.cio.CIO
 import io.ktor.client.request.request
@@ -148,13 +148,15 @@ fun OID4VCIView(
     if (loading) {
         LoadingView(loadingText = "Loading...")
     } else if (err != null) {
-        Column(
-            modifier = Modifier.fillMaxSize(),
-            verticalArrangement = Arrangement.Center,
-            horizontalAlignment = Alignment.CenterHorizontally
-        ) {
-            Text(err!!)
-        }
+        ErrorView(
+            errorTitle = "Error Adding Credential",
+            errorDetails = err!!,
+            onClose = {
+                navController.navigate(Screen.HomeScreen.route) {
+                    popUpTo(0)
+                }
+            }
+        )
     } else if (credential == null) {
         ScanningComponent(
             title = "Scan to Add Credential",
diff --git a/example/src/main/res/drawable/collapse.xml b/example/src/main/res/drawable/collapse.xml
new file mode 100644
index 0000000..f7230a8
--- /dev/null
+++ b/example/src/main/res/drawable/collapse.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="21dp"
+    android:viewportWidth="20"
+    android:viewportHeight="21">
+  <path
+      android:pathData="M6.167,18.833L5,17.667L10,12.667L15,17.667L13.833,18.833L10,15L6.167,18.833ZM10,8.333L5,3.333L6.167,2.167L10,6L13.833,2.167L15,3.333L10,8.333Z"
+      android:fillColor="#57534E"/>
+</vector>
diff --git a/example/src/main/res/drawable/error.xml b/example/src/main/res/drawable/error.xml
new file mode 100644
index 0000000..5d787b9
--- /dev/null
+++ b/example/src/main/res/drawable/error.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="56dp"
+    android:height="57dp"
+    android:viewportWidth="56"
+    android:viewportHeight="57">
+  <path
+      android:pathData="M25.666,35.5H30.333V40.167H25.666V35.5ZM25.666,16.833H30.333V30.833H25.666V16.833ZM27.976,5.167C15.096,5.167 4.666,15.62 4.666,28.5C4.666,41.38 15.096,51.833 27.976,51.833C40.879,51.833 51.333,41.38 51.333,28.5C51.333,15.62 40.879,5.167 27.976,5.167ZM27.999,47.167C17.686,47.167 9.333,38.813 9.333,28.5C9.333,18.187 17.686,9.833 27.999,9.833C38.313,9.833 46.666,18.187 46.666,28.5C46.666,38.813 38.313,47.167 27.999,47.167Z"
+      android:fillColor="#E11D48"/>
+</vector>
diff --git a/example/src/main/res/drawable/expand.xml b/example/src/main/res/drawable/expand.xml
new file mode 100644
index 0000000..01d065c
--- /dev/null
+++ b/example/src/main/res/drawable/expand.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="21dp"
+    android:viewportWidth="20"
+    android:viewportHeight="21">
+  <path
+      android:pathData="M10,18.833L5,13.833L6.188,12.646L10,16.458L13.813,12.646L15,13.833L10,18.833ZM6.208,8.333L5,7.167L10,2.167L15,7.167L13.792,8.333L10,4.542L6.208,8.333Z"
+      android:fillColor="#57534E"/>
+</vector>
diff --git a/example/src/main/res/values/colors.xml b/example/src/main/res/values/colors.xml
index 266233f..6f5863b 100644
--- a/example/src/main/res/values/colors.xml
+++ b/example/src/main/res/values/colors.xml
@@ -20,5 +20,19 @@
     <color name="spruce_blue">#FF2F6AE1</color>
     <color name="secondary_button_red">#FFE11D48</color>
     <color name="cta_button_green">#FF087455</color>
+
+    <!--  Design system  -->
+    <color name="color_base_300">#FFE6E1D6</color>
     <color name="color_base_800">#FF75675C</color>
+    <color name="color_blue_600">#FF2F6AE1</color>
+    <color name="color_stone_50">#FFFAFAF9</color>
+    <color name="color_stone_300">#FFD6D3D1</color>
+    <color name="color_stone_600">#FF57534E</color>
+    <color name="color_stone_950">#FF0C0A09</color>
+    <color name="color_emerald_900">#FF084C3A</color>
+    <color name="color_rose_600">#FFE11D48</color>
+    <color name="text_base">#FFFBF9F6</color>
+    <color name="text_primary">#FF0C0A09</color>
+    <color name="bg_surface_pure_blue">#FFD6D3D1</color>
+    <color name="border_secondary">#FFD6D3D1</color>
 </resources>
\ No newline at end of file
diff --git a/example/src/main/res/values/strings.xml b/example/src/main/res/values/strings.xml
index 042ea17..e5249dc 100644
--- a/example/src/main/res/values/strings.xml
+++ b/example/src/main/res/values/strings.xml
@@ -14,4 +14,7 @@
     <string name="chevron">Start action</string>
     <string name="empty_wallet">No credentials added yet</string>
     <string name="three_dots">More options</string>
+    <string name="expand">Click to expand</string>
+    <string name="collapse">Click to collapse</string>
+    <string name="error">Error</string>
 </resources>
\ No newline at end of file