App bar status updated

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiMainTopAppBar.kt

@@ -3,6 +3,7 @@ package co.electriccoin.zcash.ui.design.component
 import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
@@ -14,18 +15,24 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.design.R
 import co.electriccoin.zcash.ui.design.component.ZashiMainTopAppBarState.AccountType
 import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
+import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
+import co.electriccoin.zcash.ui.design.util.StringResource
+import co.electriccoin.zcash.ui.design.util.getValue
+import co.electriccoin.zcash.ui.design.util.stringRes
 
 @Composable
 fun ZashiMainTopAppBar(
@@ -34,22 +41,34 @@ fun ZashiMainTopAppBar(
 ) {
     if (state == null) return
 
-    ZashiSmallTopAppBar(
+    Box {
-        windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Top),
+        ZashiSmallTopAppBar(
-        hamburgerMenuActions = {
+            windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Top),
-            if (showHideBalances) {
+            hamburgerMenuActions = {
-                Crossfade(state.balanceVisibilityButton, label = "") {
+                if (showHideBalances) {
-                    ZashiIconButton(it)
+                    Crossfade(state.balanceVisibilityButton, label = "") {
+                        ZashiIconButton(it)
+                    }
+                    Spacer(Modifier.width(4.dp))
                 }
-                Spacer(Modifier.width(4.dp))
+                ZashiIconButton(state.settingsButton)
-            }
+                Spacer(Modifier.width(20.dp))
-            ZashiIconButton(state.settingsButton)
+            },
-            Spacer(Modifier.width(20.dp))
+            navigationAction = {
-        },
+                AccountSwitch(state.accountSwitchState)
-        navigationAction = {
+            },
-            AccountSwitch(state.accountSwitchState)
+        )
-        },
+
-    )
+        if (state.subtitle != null) {
+            Text(
+                modifier = Modifier.align(Alignment.BottomCenter),
+                text = state.subtitle.getValue().uppercase(),
+                style = ZashiTypography.textXs,
+                fontWeight = FontWeight.Normal,
+                color = ZashiColors.Text.textQuaternary
+            )
+        }
+    }
 }
 
 @Composable
@@ -108,6 +127,7 @@ data class ZashiMainTopAppBarState(
     val accountSwitchState: AccountSwitchState,
     val balanceVisibilityButton: IconButtonState,
     val settingsButton: IconButtonState,
+    val subtitle: StringResource?
 ) {
     enum class AccountType {
         ZASHI,
@@ -134,6 +154,7 @@ private fun ZashiMainTopAppBarPreview() =
                         ),
                     balanceVisibilityButton = IconButtonState(R.drawable.ic_app_bar_balances_hide) {},
                     settingsButton = IconButtonState(R.drawable.ic_app_bar_settings) {},
+                    subtitle = null
                 )
         )
     }
@@ -152,6 +173,26 @@ private fun KeystoneMainTopAppBarPreview() =
                         ),
                     balanceVisibilityButton = IconButtonState(R.drawable.ic_app_bar_balances_hide) {},
                     settingsButton = IconButtonState(R.drawable.ic_app_bar_settings) {},
+                    subtitle = null
+                )
+        )
+    }
+
+@PreviewScreens
+@Composable
+private fun MainTopAppBarWithSubtitlePreview() =
+    ZcashTheme {
+        ZashiMainTopAppBar(
+            state =
+                ZashiMainTopAppBarState(
+                    accountSwitchState =
+                        AccountSwitchState(
+                            accountType = AccountType.KEYSTONE,
+                            onAccountTypeClick = {},
+                        ),
+                    balanceVisibilityButton = IconButtonState(R.drawable.ic_app_bar_balances_hide) {},
+                    settingsButton = IconButtonState(R.drawable.ic_app_bar_settings) {},
+                    subtitle = stringRes("Subtitle")
                 )
         )
     }

ui-lib/src/main/java/co/electriccoin/zcash/ui/common/viewmodel/ZashiMainTopAppBarViewModel.kt

@@ -8,9 +8,11 @@ import co.electriccoin.zcash.preference.model.entry.BooleanPreferenceDefault
 import co.electriccoin.zcash.ui.NavigationRouter
 import co.electriccoin.zcash.ui.NavigationTargets.SETTINGS
 import co.electriccoin.zcash.ui.common.model.KeystoneAccount
+import co.electriccoin.zcash.ui.common.model.TopAppBarSubTitleState
 import co.electriccoin.zcash.ui.common.model.WalletAccount
 import co.electriccoin.zcash.ui.common.model.ZashiAccount
 import co.electriccoin.zcash.ui.common.usecase.ObserveSelectedWalletAccountUseCase
+import co.electriccoin.zcash.ui.common.usecase.ObserveWalletStateUseCase
 import co.electriccoin.zcash.ui.design.R
 import co.electriccoin.zcash.ui.design.component.AccountSwitchState
 import co.electriccoin.zcash.ui.design.component.IconButtonState
@@ -31,14 +33,19 @@ import kotlinx.coroutines.launch
 
 class ZashiMainTopAppBarViewModel(
     observeSelectedWalletAccount: ObserveSelectedWalletAccountUseCase,
+    observeWalletState: ObserveWalletStateUseCase,
     private val standardPreferenceProvider: StandardPreferenceProvider,
     private val navigationRouter: NavigationRouter,
 ) : ViewModel() {
     private val isHideBalances: StateFlow<Boolean?> = booleanStateFlow(StandardPreferenceKeys.IS_HIDE_BALANCES)
 
     val state =
-        combine(observeSelectedWalletAccount.require(), isHideBalances) { currentAccount, isHideBalances ->
+        combine(
-            createState(currentAccount, isHideBalances)
+            observeSelectedWalletAccount.require(),
+            isHideBalances,
+            observeWalletState()
+        ) { currentAccount, isHideBalances, walletState ->
+            createState(currentAccount, isHideBalances, walletState)
         }.stateIn(
             scope = viewModelScope,
             started = SharingStarted.WhileSubscribed(ANDROID_STATE_FLOW_TIMEOUT),
@@ -47,7 +54,8 @@ class ZashiMainTopAppBarViewModel(
 
     private fun createState(
         currentAccount: WalletAccount,
-        isHideBalances: Boolean?
+        isHideBalances: Boolean?,
+        topAppBarSubTitleState: TopAppBarSubTitleState
     ) = ZashiMainTopAppBarState(
         accountSwitchState =
             AccountSwitchState(
@@ -74,7 +82,19 @@ class ZashiMainTopAppBarViewModel(
                 icon = R.drawable.ic_app_bar_settings,
                 onClick = ::onSettingsClicked,
                 contentDescription = stringRes(co.electriccoin.zcash.ui.R.string.settings_menu_content_description)
-            )
+            ),
+        subtitle =
+            when (topAppBarSubTitleState) {
+                TopAppBarSubTitleState.Disconnected ->
+                    stringRes(
+                        co.electriccoin.zcash.ui.R.string.disconnected_label_new,
+                    )
+                TopAppBarSubTitleState.Restoring ->
+                    stringRes(
+                        co.electriccoin.zcash.ui.R.string.restoring_wallet_label_new,
+                    )
+                TopAppBarSubTitleState.None -> null
+            }
     )
 
     private fun onAccountTypeClicked() = navigationRouter.forward(AccountList)

ui-lib/src/main/java/co/electriccoin/zcash/ui/fixture/ZashiMainTopAppBarStateFixture.kt

@@ -27,5 +27,6 @@ object ZashiMainTopAppBarStateFixture {
         accountSwitchState = accountSwitchState,
         balanceVisibilityButton = balanceVisibilityButton,
         settingsButton = settingsButton,
+        subtitle = null
     )
 }

ui-lib/src/main/res/ui/common/values-es/strings.xml

@@ -15,7 +15,9 @@
     <string name="unable_to_open_email">No se pudo iniciar la aplicación de correo electrónico.</string>
 
     <string name="restoring_wallet_label">[Restaurando tu billetera…]</string>
+    <string name="restoring_wallet_label_new">Restaurando tu billetera…</string>
     <string name="disconnected_label">[Desconectado…]</string>
+    <string name="disconnected_label_new">Desconectado…</string>
     <string name="unable_to_open_play_store">No se pudo iniciar la aplicación de Google Play Store…</string>
 
     <string name="server_disconnected_dialog_title">Aviso</string>

ui-lib/src/main/res/ui/common/values/strings.xml

@@ -15,7 +15,9 @@
     <string name="unable_to_open_email">Unable to launch email app.</string>
 
     <string name="restoring_wallet_label">[Restoring Your Wallet…]</string>
+    <string name="restoring_wallet_label_new">Restoring Your Wallet…</string>
     <string name="disconnected_label">[Disconnected…]</string>
+    <string name="disconnected_label_new">Disconnected…</string>
     <string name="unable_to_open_play_store">Unable to launch Google Play Store app…</string>
 
     <string name="server_disconnected_dialog_title">Heads up</string>