11package com.flipcash.app.balance.internal.components
22
33import androidx.compose.animation.Crossfade
4+ import androidx.compose.foundation.background
5+ import androidx.compose.foundation.layout.Arrangement
46import androidx.compose.foundation.layout.Box
57import androidx.compose.foundation.layout.Column
8+ import androidx.compose.foundation.layout.Row
69import androidx.compose.foundation.layout.fillMaxWidth
710import androidx.compose.foundation.layout.padding
11+ import androidx.compose.material.MaterialTheme
12+ import androidx.compose.material.Text
813import androidx.compose.runtime.Composable
914import androidx.compose.ui.Alignment
1015import androidx.compose.ui.Modifier
16+ import androidx.compose.ui.draw.alpha
1117import androidx.compose.ui.res.stringResource
18+ import androidx.compose.ui.unit.dp
19+ import com.flipcash.app.tokens.data.Period
1220import com.flipcash.features.balance.R
1321import com.getcode.opencode.compose.LocalExchange
1422import com.getcode.opencode.model.financial.CurrencyCode
23+ import com.getcode.opencode.model.financial.Fiat
1524import com.getcode.opencode.model.financial.LocalFiat
1625import com.getcode.theme.CodeTheme
26+ import com.getcode.theme.extraSmall
1727import com.getcode.ui.components.text.AmountArea
1828import com.getcode.ui.theme.CodeCircularProgressIndicator
1929
2030@Composable
2131internal fun BalanceHeader (
2232 balance : LocalFiat ? ,
33+ appreciation : LocalFiat ? ,
2334 modifier : Modifier = Modifier ,
2435 onClick : () -> Unit
2536) {
@@ -28,6 +39,7 @@ internal fun BalanceHeader(
2839 modifier = modifier
2940 .padding(horizontal = CodeTheme .dimens.inset)
3041 .padding(vertical = CodeTheme .dimens.grid.x9),
42+ horizontalAlignment = Alignment .CenterHorizontally ,
3143 ) {
3244 if (balance == null ) {
3345 Box (modifier = Modifier .fillMaxWidth(), contentAlignment = Alignment .Center ) {
@@ -45,6 +57,50 @@ internal fun BalanceHeader(
4557 onClick = onClick
4658 )
4759 }
60+
61+ if (appreciation != null ) {
62+ Crossfade (appreciation.nativeAmount) { amount ->
63+ val hasAppreciation = amount.decimalValue >= 0
64+ val changeColor = if (hasAppreciation) {
65+ CodeTheme .colors.successText
66+ } else {
67+ CodeTheme .colors.errorText
68+ }
69+
70+ Row (
71+ verticalAlignment = Alignment .CenterVertically ,
72+ horizontalArrangement = Arrangement .spacedBy(CodeTheme .dimens.grid.x1),
73+ ) {
74+ Text (
75+ modifier = Modifier
76+ .background(
77+ color = changeColor.copy(0.20f ),
78+ shape = MaterialTheme .shapes.extraSmall,
79+ )
80+ .padding(
81+ vertical = 2 .dp,
82+ horizontal = CodeTheme .dimens.grid.x1
83+ ),
84+ text = amount.formatted(
85+ extraPrefix = if (hasAppreciation) " +" else " -" ,
86+ ),
87+ style = CodeTheme .typography.textSmall,
88+ color = changeColor,
89+ )
90+
91+ val label = if (hasAppreciation) {
92+ stringResource(R .string.label_fromCurrencyAppreciation)
93+ } else {
94+ stringResource(R .string.label_fromCurrencyDepreciation)
95+ }
96+ Text (
97+ text = label,
98+ style = CodeTheme .typography.textSmall,
99+ color = changeColor,
100+ )
101+ }
102+ }
103+ }
48104 }
49105 }
50106}
0 commit comments