From 9bdd7030276f726ec884bfe68ad60aafadec1eb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juliano=20C=C3=A9zar=20Chagas=20Tavares?= Date: Thu, 10 Oct 2024 11:48:54 -0300 Subject: [PATCH] Add Loading Screen (#43) This adds a loading screen component and integrates it into the OID4VCI flow. --- example/build.gradle.kts | 2 + example/src/main/AndroidManifest.xml | 8 ++ .../spruceid/mobilesdkexample/LoadingView.kt | 90 ++++++++++++++++++ .../mobilesdkexample/ui/theme/Color.kt | 3 +- .../mobilesdkexample/wallet/OID4VCI.kt | 9 +- example/src/main/res/raw/loading_spinner.riv | Bin 0 -> 580 bytes example/src/main/res/values/colors.xml | 1 + 7 files changed, 105 insertions(+), 8 deletions(-) create mode 100644 example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt create mode 100644 example/src/main/res/raw/loading_spinner.riv diff --git a/example/build.gradle.kts b/example/build.gradle.kts index bac897e..457588a 100644 --- a/example/build.gradle.kts +++ b/example/build.gradle.kts @@ -68,6 +68,8 @@ dependencies { implementation("androidx.compose.material3:material3") implementation("androidx.navigation:navigation-compose:2.7.7") implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.4") + implementation("app.rive:rive-android:8.7.0") + implementation("androidx.startup:startup-runtime:1.1.1") implementation(project(mapOf("path" to ":MobileSdk"))) implementation("com.google.zxing:core:3.5.1") implementation("io.ktor:ktor-client-core:2.3.12") diff --git a/example/src/main/AndroidManifest.xml b/example/src/main/AndroidManifest.xml index 497c108..d239f30 100644 --- a/example/src/main/AndroidManifest.xml +++ b/example/src/main/AndroidManifest.xml @@ -50,6 +50,14 @@ + + + \ 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 new file mode 100644 index 0000000..caf6a21 --- /dev/null +++ b/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt @@ -0,0 +1,90 @@ +package com.spruceid.mobilesdkexample + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import androidx.compose.ui.viewinterop.AndroidView +import app.rive.runtime.kotlin.RiveAnimationView +import app.rive.runtime.kotlin.core.ExperimentalAssetLoader +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, + cancelButtonLabel: String = "Cancel", + onCancel: (() -> Unit)? = null +) { + Box(modifier = Modifier.fillMaxSize()) { + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + AndroidView( + modifier = Modifier.size(60.dp), + factory = { context -> + RiveAnimationView(context).also { + it.setRiveResource( + resId = R.raw.loading_spinner, + ) + } + } + ) + Text( + text = loadingText, + fontFamily = Inter, + fontWeight = FontWeight.Normal, + color = ColorBase800, + fontSize = 20.sp, + modifier = Modifier.padding(top = 10.dp) + ) + } + if (onCancel != null) { + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Bottom + ) { + Button( + onClick = { + onCancel() + }, + shape = RoundedCornerShape(5.dp), + colors = ButtonDefaults.buttonColors( + containerColor = Color.Transparent, + contentColor = Color.Black, + ), + border = BorderStroke(1.dp, CodeBorder), + modifier = Modifier + .fillMaxWidth() + ) { + Text( + text = cancelButtonLabel, + fontFamily = Inter, + fontWeight = FontWeight.SemiBold, + color = Color.Black, + ) + } + } + } + } +} 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 dd53f78..9c6d356 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 @@ -22,4 +22,5 @@ val VerifierRequestBadgeFieldFill = Color(0xFFF7F5F0) val VerifierRequestBadgeFieldText = Color(0xFF0C0A09) val VerifiedGreenValid = Color(0xFF047857) val VerifiedRedInvalid = Color(0xFFBE123C) -val VerifierCloseButton = Color(0xFF44403C) \ No newline at end of file +val VerifierCloseButton = Color(0xFF44403C) +val ColorBase800 = Color(0xFF75675C) \ 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 52579b4..94407c7 100644 --- a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt +++ b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt @@ -25,6 +25,7 @@ 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.LoadingView import com.spruceid.mobilesdkexample.R import com.spruceid.mobilesdkexample.ScanningComponent import com.spruceid.mobilesdkexample.ScanningType @@ -145,13 +146,7 @@ fun OID4VCIView( } if (loading) { - Column( - modifier = Modifier.fillMaxSize(), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - Text("Loading...") - } + LoadingView(loadingText = "Loading...") } else if (err != null) { Column( modifier = Modifier.fillMaxSize(), diff --git a/example/src/main/res/raw/loading_spinner.riv b/example/src/main/res/raw/loading_spinner.riv new file mode 100644 index 0000000000000000000000000000000000000000..5b7796f6fee4bd7ba7f9665c05fb645b9b99191f GIT binary patch literal 580 zcmZXPPfG$(6vfYV?lgm<(;ufOqTKiahL8x$866XX+GIqFHdaEC{XyJho7O?Jk`^u6 z^hx{%ZQ8VpG^;_-WgB}lHIew>Jl;9Kd%5>*u5GU>xVcX{)RCIp;x}&dJAd#eJKW_S zrZi90IH9N_FqFP&q(AhW4zjnPFHpI|9^fNHT?iql|Fn3|J0CfwPS6 zUKp20ectf7Jiy0%?)5iBzdFFjeeU(UJT$;3#EfX%FpNGPBpFSn7SkJ3o9UhDgXxpW zVd^sVm=Ki%Lb8x56cPevP2kc@>r1bxjQjF~_U?#@`NiN?>9|-fofKn6k}$mh%p?@d z*~?kV0d-qgbI8fPGWBrS literal 0 HcmV?d00001 diff --git a/example/src/main/res/values/colors.xml b/example/src/main/res/values/colors.xml index 5e9ab92..266233f 100644 --- a/example/src/main/res/values/colors.xml +++ b/example/src/main/res/values/colors.xml @@ -20,4 +20,5 @@ #FF2F6AE1 #FFE11D48 #FF087455 + #FF75675C \ No newline at end of file