[#1196] Balances widget on Balances screen

* [#1196] Integrate Balances widget to Balances

- Closing #1196
- Changelog update

CHANGELOG.md

@@ -12,7 +12,7 @@ directly impact users rather than highlighting other key architectural updates.*
 ### Added
 - The current balance UI on top of the Account screen has been reworked. It now displays the currently available 
   balance as well.
-- The same current balance UI was also incorporated into the Send Form screen. 
+- The same current balance UI was incorporated into the Send and Balances screens. 
 - The Send Error screen now contains a simple text with the reason for failure. The Send screen UI refactoring is 
   still in progress.
 

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/balances/AndroidBalances.kt

@@ -3,16 +3,22 @@
 package co.electriccoin.zcash.ui.screen.balances
 
 import androidx.activity.ComponentActivity
+import androidx.activity.viewModels
 import androidx.compose.runtime.Composable
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import co.electriccoin.zcash.ui.common.viewmodel.WalletViewModel
 import co.electriccoin.zcash.ui.screen.balances.view.Balances
 
-@Suppress("UNUSED_PARAMETER")
 @Composable
 internal fun WrapBalances(
     activity: ComponentActivity,
     goSettings: () -> Unit,
 ) {
+    val walletViewModel by activity.viewModels<WalletViewModel>()
+    val walletSnapshot = walletViewModel.walletSnapshot.collectAsStateWithLifecycle().value
+
     Balances(
+        walletSnapshot = walletSnapshot,
         onSettings = goSettings,
     )
 }

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/balances/view/BalancesView.kt

@@ -3,28 +3,33 @@ package co.electriccoin.zcash.ui.screen.balances.view
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
+import co.electriccoin.zcash.ui.common.BalanceWidget
+import co.electriccoin.zcash.ui.common.model.WalletSnapshot
 import co.electriccoin.zcash.ui.common.test.CommonTag
 import co.electriccoin.zcash.ui.design.component.Body
+import co.electriccoin.zcash.ui.design.component.CircularScreenProgressIndicator
 import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+import co.electriccoin.zcash.ui.fixture.WalletSnapshotFixture
+import co.electriccoin.zcash.ui.screen.account.model.WalletDisplayValues
 
 @Preview("Balances")
 @Composable
@@ -32,6 +37,7 @@ private fun ComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
         GradientSurface {
             Balances(
+                walletSnapshot = WalletSnapshotFixture.new(),
                 onSettings = {},
             )
         }
@@ -42,26 +48,35 @@ private fun ComposablePreview() {
 // TODO [#1127]: https://github.com/Electric-Coin-Company/zashi-android/issues/1127
 
 @Composable
-fun Balances(onSettings: () -> Unit) {
+fun Balances(
+    walletSnapshot: WalletSnapshot?,
+    onSettings: () -> Unit
+) {
     Scaffold(topBar = {
         BalancesTopAppBar(onSettings = onSettings)
     }) { paddingValues ->
-        BalancesMainContent(
+        if (null == walletSnapshot) {
-            modifier =
+            CircularScreenProgressIndicator()
-                Modifier.padding(
+        } else {
-                    top = paddingValues.calculateTopPadding() + ZcashTheme.dimens.spacingDefault,
+            BalancesMainContent(
-                    bottom = paddingValues.calculateBottomPadding() + ZcashTheme.dimens.spacingHuge,
+                walletSnapshot = walletSnapshot,
-                    start = ZcashTheme.dimens.screenHorizontalSpacingRegular,
+                modifier =
-                    end = ZcashTheme.dimens.screenHorizontalSpacingRegular
+                    Modifier.padding(
-                )
+                        top = paddingValues.calculateTopPadding() + ZcashTheme.dimens.spacingDefault,
-        )
+                        bottom = paddingValues.calculateBottomPadding() + ZcashTheme.dimens.spacingHuge,
+                        start = ZcashTheme.dimens.screenHorizontalSpacingRegular,
+                        end = ZcashTheme.dimens.screenHorizontalSpacingRegular
+                    )
+            )
+        }
     }
 }
 
 @Composable
 private fun BalancesTopAppBar(onSettings: () -> Unit) {
     SmallTopAppBar(
-        showTitleLogo = true,
+        showTitleLogo = false,
+        titleText = stringResource(id = R.string.balances_title),
         hamburgerMenuActions = {
             IconButton(
                 onClick = onSettings,
@@ -77,21 +92,46 @@ private fun BalancesTopAppBar(onSettings: () -> Unit) {
 }
 
 @Composable
-private fun BalancesMainContent(modifier: Modifier = Modifier) {
+private fun BalancesMainContent(
+    walletSnapshot: WalletSnapshot,
+    modifier: Modifier = Modifier
+) {
+    val walletDisplayValues =
+        WalletDisplayValues.getNextValues(
+            LocalContext.current,
+            walletSnapshot
+        )
+
     Column(
         modifier =
             Modifier
-                .imePadding()
+                .fillMaxHeight()
-                .fillMaxSize()
+                // .verticalScroll(rememberScrollState()) Uncomment this once the whole screen UI is implemented
-                .verticalScroll(rememberScrollState())
                 .then(modifier),
         horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center,
     ) {
         Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
 
-        Body(stringResource(id = R.string.not_implemented_yet))
+        if (walletDisplayValues.zecAmountText.isNotEmpty()) {
+            BalanceWidget(
+                walletSnapshot = walletSnapshot,
+                isReferenceToBalances = false,
+                onReferenceClick = {}
+            )
+            Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
+        }
 
-        Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Body(
+                text = stringResource(id = R.string.balances_coming_soon),
+                textAlign = TextAlign.Center
+            )
+
+            Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
+        }
     }
 }

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

@@ -1,3 +1,5 @@
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
     <string name="balances_title">Balances</string>
+    <string name="balances_coming_soon">Coming soon:\n\nBalances overview,\nTransparent
+        funds shielding,\nBlock synchronization indicator</string>
 </resources>

ui-screenshot-test/src/main/java/co/electroniccoin/zcash/ui/screenshot/ScreenshotTest.kt

@@ -398,7 +398,7 @@ private fun balancesScreenshots(
     // TODO [#1127]: Implement Balances screen
     // TODO [#1127]: https://github.com/Electric-Coin-Company/zashi-android/issues/1127
 
-    composeTestRule.onNodeWithText(resContext.getString(R.string.not_implemented_yet)).also {
+    composeTestRule.onNodeWithText(resContext.getString(R.string.balances_coming_soon)).also {
         it.assertExists()
         ScreenshotTest.takeScreenshot(tag, "Balances 1")
     }