style(flipcash/balance): crossfade balance changes

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

Author: bmc08gt

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

@@ -57,7 +57,7 @@ fun AmountWithKeypad(
                 uiModel = amountAnimatedModel,
                 isAnimated = true,
                 isClickable = isClickable,
-                onClick = { onAmountClicked?.invoke() },
+                onClick = { onAmountClicked.invoke() },
                 networkState = networkState,
                 textStyle = CodeTheme.typography.displayLarge,
             )

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

@@ -1,5 +1,13 @@
 package com.flipcash.app.balance.internal.components
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.Crossfade
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -33,25 +41,28 @@ internal fun BalanceHeader(
                 CodeCircularProgressIndicator()
             }
         } else {
-            val isUsd = balance.converted.currencyCode.takeIf {
-                it == CurrencyCode.USD
-            } != null
-            AmountArea(
-                amountText = balance.converted.formatted(
-                    suffix = balance.converted.currencyCode.takeIf {
-                        it != CurrencyCode.USD
-                    }?.let {
-                        stringResource(R.string.subtitle_ofUsdSuffix)
-                    }
-                ),
-                isAltCaption = false,
-                isAltCaptionKinIcon = false,
-                captionText = stringResource(R.string.subtitle_balanceIsHeldInUsd).takeIf { !isUsd },
-                currencyResId = exchange.getFlagByCurrency(balance.converted.currencyCode.name),
-                isClickable = true,
-                textStyle = CodeTheme.typography.displayLarge,
-                onClick = onClick
-            )
+            Crossfade(balance.converted) { amount ->
+                val isUsd = amount.currencyCode.takeIf {
+                    it == CurrencyCode.USD
+                } != null
+
+                AmountArea(
+                    amountText = amount.formatted(
+                        suffix = amount.currencyCode.takeIf {
+                            it != CurrencyCode.USD
+                        }?.let {
+                            stringResource(R.string.subtitle_ofUsdSuffix)
+                        }
+                    ),
+                    isAltCaption = false,
+                    isAltCaptionKinIcon = false,
+                    captionText = stringResource(R.string.subtitle_balanceIsHeldInUsd).takeIf { !isUsd },
+                    currencyResId = exchange.getFlagByCurrency(amount.currencyCode.name),
+                    isClickable = true,
+                    textStyle = CodeTheme.typography.displayLarge,
+                    onClick = onClick
+                )
+            }
         }
     }
 }

ui/components/src/main/kotlin/com/getcode/ui/components/text/AmountArea.kt

@@ -138,8 +138,7 @@ fun AmountPreview() {
         amountSuffix = "suffix",
         captionText = "The value of kin fluctuates",
         currencyResId = R.drawable.ic_flag_ca,
-        isAnimated = false,
-        networkState = networkStateValues.last()
+        networkState = networkStateValues.last(),
     )
 }
 
@@ -153,6 +152,5 @@ fun AmountPreviewDisconnected() {
         captionText = "The value of kin fluctuates",
         currencyResId = R.drawable.ic_flag_ca,
         networkState = networkStateValues.first(),
-        isAnimated = false
     )
 }