EzFunds Wallet

A sky-blue wallet home with a balance header, quick actions, a saving-goals bar and a transaction list.

9:41

EzFunds

Wallet Balance

$ 58,095

Transfer

Withdraw

Invest

Top up

Your saving goals

$ 41,287$ 150,874 USD

$ 8,000 USD remaining to achieve your goals

☀️

Let's take a look at your financial overview for October!

Transaction history

See All

Alice Burgers

Transfer

$500,00

23 min ago

Bob Davis

Withdraw

$200,00

5 hours ago

Catherine Ann

Invest

$1,000,00

Yesterday

Home

Analytic

Transaction

Profile

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

data class Tx(val name: String, val type: String, val amount: String, val when: String)

@Composable
fun EzFundsScreen(balance: String, goalProgress: Float, transactions: List<Tx>) {
    val sky = Color(0xFF0EA5E9)
    Column(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
        Column(
            Modifier.fillMaxWidth()
                .background(Brush.verticalGradient(listOf(Color(0xFF38BDF8), sky)))
                .padding(20.dp),
        ) {
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
                Text("EzFunds", color = Color.White, fontWeight = FontWeight.SemiBold)
                Row { Icon(Icons.Outlined.VisibilityOff, null, tint = Color.White)
                    Spacer(Modifier.width(12.dp))
                    Icon(Icons.Outlined.Notifications, null, tint = Color.White) }
            }
            Text("Wallet Balance", Modifier.fillMaxWidth().padding(top = 12.dp),
                textAlign = TextAlign.Center, color = Color.White.copy(alpha = 0.8f),
                style = MaterialTheme.typography.labelMedium)
            Text(balance, Modifier.fillMaxWidth(), textAlign = TextAlign.Center,
                color = Color.White, style = MaterialTheme.typography.displaySmall,
                fontWeight = FontWeight.ExtraBold)
            Row(Modifier.fillMaxWidth().padding(top = 12.dp),
                horizontalArrangement = Arrangement.SpaceBetween) {
                listOf("Transfer", "Withdraw", "Invest", "Top up").forEach {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Surface(color = Color.White.copy(alpha = 0.2f), shape = CircleShape,
                            modifier = Modifier.size(40.dp)) {}
                        Text(it, color = Color.White, style = MaterialTheme.typography.labelSmall)
                    }
                }
            }
            Surface(color = Color.White.copy(alpha = 0.15f), shape = RoundedCornerShape(16.dp),
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp)) {
                Column(Modifier.padding(12.dp)) {
                    Text("Your saving goals", color = Color.White,
                        style = MaterialTheme.typography.labelSmall)
                    LinearProgressIndicator(progress = { goalProgress },
                        modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
                        color = Color.White, trackColor = Color.White.copy(alpha = 0.3f))
                }
            }
        }
        Text("Transaction history", Modifier.padding(16.dp),
            style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
        transactions.forEach { t ->
            ListItem(
                leadingContent = { Surface(shape = CircleShape,
                    color = MaterialTheme.colorScheme.surfaceVariant,
                    modifier = Modifier.size(36.dp)) {} },
                headlineContent = { Text(t.name) },
                supportingContent = { Text(t.type) },
                trailingContent = { Text(t.amount, fontWeight = FontWeight.Bold) },
            )
        }
    }
}