Sats/USD currency switcher on Wallet Dashboard

app/src/main/kotlin/net/primal/android/wallet/dashboard/WalletDashboardContract.kt

@@ -19,6 +19,7 @@ interface WalletDashboardContract {
         val primalWallet: PrimalWallet? = null,
         val walletPreference: WalletPreference = WalletPreference.Undefined,
         val walletBalance: BigDecimal? = null,
+        val exchangeBtcUsdRate: Double? = null,
         val lastWalletUpdatedAt: Long? = null,
         val lowBalance: Boolean = false,
         val error: DashboardError? = null,

app/src/main/kotlin/net/primal/android/wallet/dashboard/WalletDashboardScreen.kt

@@ -149,11 +149,11 @@ fun WalletDashboardScreen(
 
     val isScrolledToTop by remember(listState) { derivedStateOf { listState.firstVisibleItemScrollOffset == 0 } }
     val dashboardExpanded by rememberSaveable(isScrolledToTop) { mutableStateOf(isScrolledToTop) }
-
     val dashboardLiteHeightDp = 80.dp
     var topBarHeight by remember { mutableIntStateOf(0) }
     var topBarFooterHeight by remember { mutableIntStateOf(0) }
     val density = LocalDensity.current
+    var currencyMode by rememberSaveable { mutableStateOf(CurrencyMode.SATS) }
 
     var shouldAddFooter by remember { mutableStateOf(false) }
     LaunchedEffect(pagingItems.itemCount, listState) {
@@ -229,6 +229,9 @@ fun WalletDashboardScreen(
                                             WalletAction.Receive -> onReceiveClick()
                                         }
                                     },
+                                    currencyMode = currencyMode,
+                                    onSwitchCurrencyMode = { currencyMode = it },
+                                    exchangeBtcUsdRate = state.exchangeBtcUsdRate,
                                 )
 
                                 false -> WalletDashboardLite(
@@ -246,6 +249,9 @@ fun WalletDashboardScreen(
                                             WalletAction.Receive -> onReceiveClick()
                                         }
                                     },
+                                    currencyMode = currencyMode,
+                                    onSwitchCurrencyMode = { currencyMode = it },
+                                    exchangeBtcUsdRate = state.exchangeBtcUsdRate,
                                 )
                             }
                         }
@@ -310,6 +316,8 @@ fun WalletDashboardScreen(
                                 .background(color = AppTheme.colorScheme.surfaceVariant)
                                 .padding(top = with(LocalDensity.current) { topBarHeight.toDp() }),
                             pagingItems = pagingItems,
+                            currencyMode = currencyMode,
+                            exchangeBtcUsdRate = state.exchangeBtcUsdRate,
                             listState = listState,
                             onProfileClick = onProfileClick,
                             onTransactionClick = onTransactionClick,
@@ -349,4 +357,9 @@ fun WalletDashboardScreen(
     )
 }
 
+enum class CurrencyMode {
+    FIAT,
+    SATS,
+}
+
 private const val DISABLED_WALLET_ALPHA = 0.42f

app/src/main/kotlin/net/primal/android/wallet/dashboard/WalletDashboardViewModel.kt

@@ -58,6 +58,7 @@ class WalletDashboardViewModel @Inject constructor(
 
     init {
         fetchWalletBalance()
+        fetchExchangeRate()
         subscribeToEvents()
         subscribeToActiveAccount()
         subscribeToPurchases()
@@ -116,6 +117,22 @@ class WalletDashboardViewModel @Inject constructor(
             }
         }
 
+    private fun fetchExchangeRate() =
+        viewModelScope.launch {
+            try {
+                val btcRate = walletRepository.getExchangeRate(
+                    userId = activeAccountStore.activeUserId(),
+                )
+                setState {
+                    copy(
+                        exchangeBtcUsdRate = btcRate,
+                    )
+                }
+            } catch (error: WssException) {
+                Timber.e(error)
+            }
+        }
+
     private fun enablePrimalWallet() =
         viewModelScope.launch {
             userRepository.updateWalletPreference(

app/src/main/kotlin/net/primal/android/wallet/dashboard/ui/FiatAmountText.kt

@@ -0,0 +1,72 @@
+package net.primal.android.wallet.dashboard.ui
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import java.math.BigDecimal
+import java.text.NumberFormat
+import net.primal.android.R
+import net.primal.android.theme.AppTheme
+import net.primal.android.wallet.utils.CurrencyConversionUtils.toUsd
+
+@Composable
+fun FiatAmountText(
+    modifier: Modifier,
+    amount: BigDecimal?,
+    textSize: TextUnit = 42.sp,
+    amountColor: Color = Color.Unspecified,
+    currencyColor: Color = AppTheme.extraColorScheme.onSurfaceVariantAlt3,
+    exchangeBtcUsdRate: Double?,
+) {
+    val numberFormat = remember { NumberFormat.getNumberInstance() }
+
+    Row(
+        modifier = modifier
+            .animateContentSize(),
+        verticalAlignment = Alignment.Bottom,
+        horizontalArrangement = Arrangement.Start,
+    ) {
+        if (amount != null) {
+            Text(
+                modifier = Modifier.padding(bottom = (textSize.value / 2 - 5).dp),
+                text = "${stringResource(id = R.string.wallet_usd_prefix)} ",
+                textAlign = TextAlign.Center,
+                maxLines = 1,
+                style = AppTheme.typography.bodyMedium,
+                fontSize = textSize / 2,
+                color = currencyColor,
+            )
+        }
+
+        Text(
+            text = amount?.toUsd(exchangeBtcUsdRate)?.let { numberFormat.format(it.toFloat()) } ?: "⌛",
+            textAlign = TextAlign.Center,
+            style = AppTheme.typography.displayMedium,
+            fontSize = textSize,
+            color = amountColor,
+        )
+
+        if (amount != null) {
+            Text(
+                modifier = Modifier.padding(bottom = (textSize.value / 6).dp),
+                text = " ${stringResource(id = R.string.wallet_usd_suffix)}",
+                textAlign = TextAlign.Center,
+                maxLines = 1,
+                style = AppTheme.typography.bodyMedium,
+                color = currencyColor,
+            )
+        }
+    }
+}

app/src/main/kotlin/net/primal/android/wallet/dashboard/ui/WalletDashboard.kt

@@ -1,5 +1,12 @@
 package net.primal.android.wallet.dashboard.ui
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -13,29 +20,56 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import java.math.BigDecimal
+import net.primal.android.wallet.dashboard.CurrencyMode
 
+@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun WalletDashboard(
     modifier: Modifier,
-    enabled: Boolean = true,
     walletBalance: BigDecimal?,
+    exchangeBtcUsdRate: Double?,
     actions: List<WalletAction>,
     onWalletAction: (WalletAction) -> Unit,
+    onSwitchCurrencyMode: (currencyMode: CurrencyMode) -> Unit,
+    enabled: Boolean = true,
+    currencyMode: CurrencyMode = CurrencyMode.SATS,
 ) {
     val haptic = LocalHapticFeedback.current
+
     Column(
         modifier = modifier,
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        BtcAmountText(
-            modifier = Modifier
-                .wrapContentWidth()
-                .padding(start = if (walletBalance != null) 32.dp else 0.dp)
-                .padding(bottom = 32.dp),
-            amountInBtc = walletBalance ?: BigDecimal.ZERO,
-            textSize = 48.sp,
-        )
+        AnimatedContent(
+            modifier = modifier.fillMaxWidth(),
+            label = "Animated currency switch",
+            targetState = currencyMode,
+            transitionSpec = { (slideInVertically() + fadeIn()) togetherWith fadeOut() },
+        ) { targetCurrencyMode ->
+            if (targetCurrencyMode == CurrencyMode.FIAT) {
+                FiatAmountText(
+                    modifier = Modifier
+                        .wrapContentWidth()
+                        .padding(start = if (walletBalance != null) 32.dp else 0.dp)
+                        .padding(bottom = 32.dp)
+                        .clickable { onSwitchCurrencyMode(CurrencyMode.SATS) },
+                    amount = walletBalance ?: BigDecimal.ZERO,
+                    textSize = 48.sp,
+                    exchangeBtcUsdRate = exchangeBtcUsdRate,
+                )
+            } else {
+                BtcAmountText(
+                    modifier = Modifier
+                        .wrapContentWidth()
+                        .padding(start = if (walletBalance != null) 32.dp else 0.dp)
+                        .padding(bottom = 32.dp)
+                        .clickable { onSwitchCurrencyMode(CurrencyMode.FIAT) },
+                    amountInBtc = walletBalance ?: BigDecimal.ZERO,
+                    textSize = 48.sp,
+                )
+            }
+        }
 
         WalletActionsRow(
             modifier = Modifier.fillMaxWidth(),

app/src/main/kotlin/net/primal/android/wallet/dashboard/ui/WalletDashboardLite.kt

@@ -1,5 +1,11 @@
 package net.primal.android.wallet.dashboard.ui
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.runtime.Composable
@@ -9,27 +15,54 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import java.math.BigDecimal
+import net.primal.android.wallet.dashboard.CurrencyMode
 
 @Composable
 fun WalletDashboardLite(
     modifier: Modifier,
     walletBalance: BigDecimal?,
     actions: List<WalletAction>,
     onWalletAction: (WalletAction) -> Unit,
+    currencyMode: CurrencyMode,
+    onSwitchCurrencyMode: (currencyMode: CurrencyMode) -> Unit,
+    exchangeBtcUsdRate: Double?,
 ) {
     Row(
         modifier = modifier,
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.Bottom,
     ) {
-        BtcAmountText(
-            modifier = Modifier.graphicsLayer {
-                clip = false
-                translationY = 4.dp.toPx()
-            },
-            amountInBtc = walletBalance ?: BigDecimal.ZERO,
-            textSize = 32.sp,
-        )
+        AnimatedContent(
+            modifier = Modifier,
+            label = "Animated currency switch",
+            targetState = currencyMode,
+            transitionSpec = { (slideInVertically() + fadeIn()) togetherWith fadeOut() },
+        ) { targetCurrencyMode ->
+            if (targetCurrencyMode == CurrencyMode.FIAT) {
+                FiatAmountText(
+                    modifier = Modifier
+                        .graphicsLayer {
+                            clip = false
+                            translationY = 4.dp.toPx()
+                        }
+                        .clickable { onSwitchCurrencyMode(CurrencyMode.SATS) },
+                    amount = walletBalance ?: BigDecimal.ZERO,
+                    textSize = 32.sp,
+                    exchangeBtcUsdRate = exchangeBtcUsdRate,
+                )
+            } else {
+                BtcAmountText(
+                    modifier = Modifier
+                        .graphicsLayer {
+                            clip = false
+                            translationY = 4.dp.toPx()
+                        }
+                        .clickable { onSwitchCurrencyMode(CurrencyMode.FIAT) },
+                    amountInBtc = walletBalance ?: BigDecimal.ZERO,
+                    textSize = 32.sp,
+                )
+            }
+        }
 
         WalletActionsRow(
             modifier = Modifier,

app/src/main/kotlin/net/primal/android/wallet/transactions/details/TransactionDetailsContract.kt

@@ -9,5 +9,6 @@ interface TransactionDetailsContract {
         val txData: TransactionDetailDataUi? = null,
         val feedPost: FeedPostUi? = null,
         val articlePost: FeedArticleUi? = null,
+        val currentExchangeRate: Double? = null,
     )
 }