Card

The Card component helps you visualize credentials in your mobile app.

The Card component displays any credential type. It is highly configurable. Inspired by our Showcase App, we give one example of how you can render Cards.

iOS

let credentialPack = CredentialPack()

// Render a list of credentials and define your type of view 
let listRendering = CardRendering.list(CardRenderingListView(
        titleKeys: ["name"],
        descriptionKeys: ["created", "issuanceDate"],
        leadingIconFormatter: { (_) in
            Image(systemName: "scribble")
        }
    ))

// Render a Card detail view
let detailsRendering = CardRendering.details(CardRenderingDetailsView(
    fields: [
        CardRenderingDetailsField(
            keys: ["name"]
        ),
        CardRenderingDetailsField(
            keys: ["issuanceDate", "expirationDate"],
            formatter: { (values: [String: [String: GenericJSON]]) in
                let w3cvc = values.first.map { $0.value } ?? [:]

                return Text("\(w3cvc["issuanceDate"]?.toString() ?? "") - \(w3cvc["expirationDate"]?.toString() ?? "")")
            }
        )
    ]
))

//finally, define your card.
let card = Card(credentialPack: credentialPack, rendering: listRendering)
val

Android

val credentialPack = CredentialPack()
val listRendering = CardRenderingListView(
            titleKeys = listOf("name", "type"),
            titleFormatter = { values ->
                val credential = values.toList().firstNotNullOfOrNull {
                    val cred = credentialPack.getCredentialById(it.first)
                    try {
                        if (
                            cred?.asJwtVc() != null ||
                            cred?.asJsonVc() != null ||
                            cred?.asSdJwt() != null
                        ) {
                            it.second
                        } else {
                            null
                        }
                    } catch (_: Exception) {
                        null
                    }
                }
                var title = ""
                try {
                    title = credential?.get("name").toString()
                    if (title.isBlank()) {
                        val arrayTypes = credential?.getJSONArray("type")
                        if (arrayTypes != null) {
                            for (i in 0 until arrayTypes.length()) {
                                if (arrayTypes.get(i).toString() != "VerifiableCredential") {
                                    title = arrayTypes.get(i).toString().splitCamelCase()
                                    break
                                }
                            }
                        }
                    }
                } catch (_: Exception) {
                }
                Text(
                    text = title,
                    fontFamily = Inter,
                    fontWeight = FontWeight.Medium,
                    fontSize = 20.sp,
                    color = ColorStone950,
                    modifier = Modifier.padding(bottom = 8.dp)
                )
            },
            descriptionKeys = listOf("description", "issuer"),
            descriptionFormatter = { values ->
                descriptionFormatter(values)
            }
        )
        
val card = BaseCard(
            credentialPack = credentialPack,
            rendering = listRendering.toCardRendering()
        )