feat: implement TokenBalanceStyle.Pill rendering and default includeReserves to true

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/TokenBalanceRow.kt

@@ -1,6 +1,7 @@
 package com.flipcash.app.core.ui
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
@@ -11,7 +12,8 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -20,13 +22,16 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.flipcash.core.R
 import com.getcode.opencode.compose.LocalExchange
 import com.getcode.opencode.model.financial.Fiat
 import com.getcode.opencode.model.financial.Token
 import com.getcode.opencode.model.financial.TokenWithBalance
 import com.getcode.opencode.model.financial.TokenWithLocalizedBalance
 import com.getcode.theme.CodeTheme
+import com.getcode.theme.White20
+import com.getcode.theme.extraSmall
 import com.getcode.ui.components.text.AnimatedNumberText
 import com.getcode.ui.core.addIf
 
@@ -37,13 +42,20 @@ data class TokenBalanceRowSizing(
     val flagSize: Dp,
 )
 
+enum class TokenBalanceStyle {
+    Large,
+    Pill,
+    ;
+}
+
 @Composable
 fun rememberTokenBalanceRowSizing(
     nameTextStyle: TextStyle = CodeTheme.typography.screenTitle,
     balanceTextStyle: TextStyle = CodeTheme.typography.screenTitle,
     iconSize: Dp = CodeTheme.dimens.staticGrid.x6,
     flagSize: Dp = CodeTheme.dimens.staticGrid.x3,
-): TokenBalanceRowSizing = TokenBalanceRowSizing(nameTextStyle, balanceTextStyle, iconSize, flagSize)
+): TokenBalanceRowSizing =
+    TokenBalanceRowSizing(nameTextStyle, balanceTextStyle, iconSize, flagSize)
 
 @Composable
 fun TokenBalanceRow(
@@ -54,6 +66,7 @@ fun TokenBalanceRow(
     showLogo: Boolean = true,
     isSelected: Boolean? = null,
     iconOverride: @Composable ((Any?) -> Any?) = { it },
+    balanceStyle: TokenBalanceStyle = TokenBalanceStyle.Large,
     formattedBalance: (Fiat) -> String = { it.formatted() },
     horizontalArrangement: Arrangement.Horizontal = Arrangement.SpaceBetween,
     sizing: TokenBalanceRowSizing = rememberTokenBalanceRowSizing(),
@@ -66,6 +79,7 @@ fun TokenBalanceRow(
         displayName = displayName,
         balance = balance.nativeAmount,
         iconOverride = iconOverride,
+        balanceStyle = balanceStyle,
         formattedBalance = formattedBalance,
         isSelected = isSelected,
         modifier = modifier,
@@ -88,6 +102,7 @@ fun TokenBalanceRow(
     showFlag: Boolean = false,
     isSelected: Boolean? = null,
     iconOverride: @Composable ((Any?) -> Any?) = { it },
+    balanceStyle: TokenBalanceStyle = TokenBalanceStyle.Large,
     formattedBalance: (Fiat) -> String = { it.formatted() },
     horizontalArrangement: Arrangement.Horizontal = Arrangement.SpaceBetween,
     sizing: TokenBalanceRowSizing = rememberTokenBalanceRowSizing(),
@@ -106,6 +121,7 @@ fun TokenBalanceRow(
         modifier = modifier,
         sizing = sizing,
         iconOverride = iconOverride,
+        balanceStyle = balanceStyle,
         formattedBalance = formattedBalance,
         horizontalArrangement = horizontalArrangement,
         contentPadding = contentPadding,
@@ -125,6 +141,7 @@ fun TokenBalanceRow(
     showFlag: Boolean = false,
     isSelected: Boolean? = null,
     iconOverride: @Composable ((Any?) -> Any?) = { it },
+    balanceStyle: TokenBalanceStyle = TokenBalanceStyle.Large,
     formattedBalance: (Fiat) -> String = { it.formatted() },
     horizontalArrangement: Arrangement.Horizontal = Arrangement.SpaceBetween,
     sizing: TokenBalanceRowSizing = rememberTokenBalanceRowSizing(),
@@ -164,6 +181,7 @@ fun TokenBalanceRow(
                         contentDescription = null,
                         modifier = Modifier.size(sizing.iconSize),
                     )
+
                     else -> TokenIcon(
                         image = image,
                         modifier = Modifier.size(sizing.iconSize)
@@ -199,11 +217,40 @@ fun TokenBalanceRow(
                 }
             }
 
-            AnimatedNumberText(
-                value = formattedBalance(balance),
-                style = sizing.balanceTextStyle,
-                color = CodeTheme.colors.textMain,
-            )
+            when (balanceStyle) {
+                TokenBalanceStyle.Large -> {
+                    AnimatedNumberText(
+                        value = formattedBalance(balance),
+                        style = sizing.balanceTextStyle,
+                        color = CodeTheme.colors.textMain,
+                    )
+                }
+
+                TokenBalanceStyle.Pill -> {
+                    Text(
+                        modifier = Modifier
+                            .padding(start = CodeTheme.dimens.grid.x1)
+                            .border(
+                                width = CodeTheme.dimens.border,
+                                color = White20,
+                                shape = CodeTheme.shapes.extraSmall,
+                            )
+                            .padding(
+                                horizontal = 4.dp,
+                                vertical = 3.dp
+                            ),
+                        text = formattedBalance(balance),
+                        color = CodeTheme.colors.textSecondary,
+                        style = CodeTheme.typography.caption,
+                    )
+                    Icon(
+                        modifier = Modifier.padding(start = CodeTheme.dimens.grid.x1),
+                        painter = painterResource(R.drawable.ic_chevron_right),
+                        contentDescription = null,
+                        tint = CodeTheme.colors.secondary,
+                    )
+                }
+            }
 
             if (isSelected != null) {
                 Image(

apps/flipcash/features/balance/src/main/kotlin/com/flipcash/app/balance/internal/BalanceScreenContent.kt

@@ -1,6 +1,5 @@
 package com.flipcash.app.balance.internal
 
-import androidx.compose.animation.animateBounds
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -24,19 +23,18 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.flipcash.app.balance.internal.components.BalanceHeader
-import com.flipcash.app.balance.internal.components.CashReservesRow
 import com.flipcash.app.core.AppRoute
 import com.flipcash.app.core.tokens.TokenPurpose
 import com.flipcash.app.theme.FlipcashPreview
 import com.flipcash.app.tokens.ui.SelectTokenViewModel
+import com.flipcash.app.core.ui.TokenBalanceStyle
 import com.flipcash.app.tokens.ui.TokenList
 import com.flipcash.features.balance.R
 import com.getcode.opencode.compose.ExchangeStub
 import com.getcode.opencode.compose.LocalExchange
 import com.getcode.opencode.model.financial.CurrencyCode
 import com.getcode.opencode.model.financial.Rate
 import com.getcode.theme.CodeTheme
-import com.getcode.ui.core.addIf
 import com.getcode.ui.theme.ButtonState
 import com.getcode.ui.theme.CodeButton
 
@@ -63,7 +61,7 @@ private fun BalanceScreenContent(
         TokenList(
             modifier = Modifier.weight(1f),
             itemModifier = { Modifier.animateItem(fadeInSpec = null) },
-            includeReserves = true,
+            balanceStyle = TokenBalanceStyle.Large,
             header = {
                 BalanceHeader(
                     modifier = Modifier

apps/flipcash/features/deposit/src/main/kotlin/com/flipcash/app/deposit/DepositFlowScreen.kt

@@ -119,7 +119,6 @@ private fun DepositSelectTokenScreen() {
             tokens = state.tokens,
             selectedToken = state.selectedToken,
             showFlags = true,
-            includeReserves = true,
             onTokenSelected = { viewModel.dispatchEvent(SelectTokenViewModel.Event.OnTokenSelected(it.address)) },
         )
     }

apps/flipcash/features/tokens/src/main/kotlin/com/flipcash/app/tokens/internal/TokenSelectScreen.kt

@@ -45,7 +45,7 @@ private fun SelectTokenScreenContent(
         selectedToken = state.selectedToken,
         showSelections = state.purpose is TokenPurpose.Select,
         showFlags = state.purpose !is TokenPurpose.Select,
-        includeReserves = state.purpose is TokenPurpose.Deposit || state.purpose is TokenPurpose.Withdraw,
+        includeReserves = state.purpose !is TokenPurpose.Select,
         emptyState = {
             Box(
                 modifier = Modifier

apps/flipcash/features/withdrawal/src/main/kotlin/com/flipcash/app/withdrawal/WithdrawalFlowScreen.kt

@@ -124,7 +124,6 @@ private fun WithdrawalSelectTokenScreen() {
             tokens = state.tokens,
             selectedToken = state.selectedToken,
             showFlags = true,
-            includeReserves = true,
             onTokenSelected = { viewModel.dispatchEvent(SelectTokenViewModel.Event.OnTokenSelected(it.address)) },
         )
     }

apps/flipcash/shared/tokens/src/main/kotlin/com/flipcash/app/tokens/ui/TokenList.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import com.flipcash.app.core.ui.TokenBalanceRow
+import com.flipcash.app.core.ui.TokenBalanceStyle
 import com.getcode.opencode.model.financial.Fiat
 import com.getcode.opencode.model.financial.LocalFiat
 import com.getcode.opencode.model.financial.Token
@@ -37,9 +38,10 @@ fun TokenList(
     modifier: Modifier = Modifier,
     itemModifier: LazyItemScope.() -> Modifier = { Modifier },
     showFlags: Boolean = false,
+    balanceStyle: TokenBalanceStyle = TokenBalanceStyle.Pill,
     selectedToken: Mint? = null,
     showSelections: Boolean = false,
-    includeReserves: Boolean = false,
+    includeReserves: Boolean = true,
     pinFooter: Boolean = false,
     emptyState: (@Composable LazyItemScope.() -> Unit)? = null,
     reserves: (@Composable LazyItemScope.(mint: Mint, cashReserves: LocalFiat) -> Unit)? = null,
@@ -97,6 +99,7 @@ fun TokenList(
                             .then(itemModifier()),
                         tokenWithBalance = item,
                         showFlag = showFlags,
+                        balanceStyle = balanceStyle,
                         isSelected = (selectedToken == item.token.address).takeIf { showSelections },
                     ) { onTokenSelected(item.token) }