Cardsanimated

Multi-Asset Wallet

Wallet card listing several assets with rows fading in one after another.

My Wallet

BTC$1,240

ETH$820

USDC$500

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun MultiAssetWalletCard() {
  data class Asset(val n: String, val v: String, val up: Boolean)
  val items = listOf(
    Asset("BTC", "$1,240", true),
    Asset("ETH", "$820", true),
    Asset("USDC", "$500", false)
  )
  Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(20.dp)
  ) {
    Column(Modifier.padding(18.dp)) {
      Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Filled.Wallet, null,
          modifier = Modifier.size(18.dp))
        Spacer(Modifier.width(8.dp))
        Text("My Wallet",
          style = MaterialTheme.typography.titleSmall,
          fontWeight = FontWeight.SemiBold)
      }
      Spacer(Modifier.height(12.dp))
      items.forEachIndexed { i, it ->
        val a = remember { Animatable(0f) }
        LaunchedEffect(Unit) {
          delay(i * 120L); a.animateTo(1f, tween(350))
        }
        Row(
          Modifier
            .fillMaxWidth()
            .padding(vertical = 7.dp)
            .graphicsLayer { alpha = a.value },
          verticalAlignment = Alignment.CenterVertically
        ) {
          Text(it.n, Modifier.weight(1f),
            fontWeight = FontWeight.Medium)
          Text(it.v)
          Spacer(Modifier.width(8.dp))
          Icon(
            if (it.up) Icons.Filled.TrendingUp
            else Icons.Filled.TrendingDown,
            null,
            tint = if (it.up) Color(0xFF22C55E) else Color(0xFFEF4444),
            modifier = Modifier.size(16.dp)
          )
        }
      }
    }
  }
}