Display View when the lightning node is syncing

app/src/main/java/to/bitkit/ui/components/SyncNodeView.kt

@@ -0,0 +1,64 @@
+package to.bitkit.ui.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import to.bitkit.R
+import to.bitkit.ui.screens.transfer.components.TransferAnimationView
+import to.bitkit.ui.shared.util.gradientBackground
+import to.bitkit.ui.theme.AppThemeSurface
+import to.bitkit.ui.theme.Colors
+
+@Composable
+fun SyncNodeView(modifier: Modifier) {
+
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Spacer(Modifier.height(32.dp))
+
+        BodyM(
+            text = stringResource(R.string.lightning__wait_text_top),
+            color = Colors.White64,
+            modifier = Modifier.padding(horizontal = 16.dp)
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        TransferAnimationView(
+            largeCircleRes = R.drawable.ln_sync_large,
+            smallCircleRes = R.drawable.ln_sync_small,
+            contentRes = R.drawable.lightning,
+            rotateContent = false
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        BodySSB(text = stringResource(R.string.lightning__wait_text_bottom), color = Colors.White32)
+
+        Spacer(modifier = Modifier.height(32.dp))
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+private fun Preview() {
+    AppThemeSurface {
+        SyncNodeView(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 16.dp)
+                .gradientBackground()
+        )
+    }
+}

app/src/main/java/to/bitkit/ui/screens/transfer/components/TransferAnimationView.kt

@@ -27,6 +27,8 @@ import to.bitkit.ui.theme.AppThemeSurface
 fun TransferAnimationView(
     @DrawableRes largeCircleRes: Int,
     @DrawableRes smallCircleRes: Int,
+    @DrawableRes contentRes: Int = R.drawable.transfer,
+    rotateContent: Boolean = true
 ) {
     Box(
         contentAlignment = Alignment.Center,
@@ -73,12 +75,16 @@ fun TransferAnimationView(
                 .rotate(rotationSmall)
         )
         Image(
-            painter = painterResource(R.drawable.transfer),
+            painter = painterResource(contentRes),
             contentDescription = null,
             contentScale = ContentScale.Fit,
             modifier = Modifier
                 .fillMaxWidth()
-                .rotate(rotationArrows)
+                .apply {
+                    if (rotateContent) {
+                        rotate(rotationArrows)
+                    }
+                }
         )
     }
 }

app/src/main/java/to/bitkit/ui/screens/wallets/HomeScreen.kt

@@ -90,6 +90,7 @@ fun HomeScreen(
                 is BottomSheetType.Send -> {
                     SendOptionsView(
                         appViewModel = appViewModel,
+                        walletViewModel = walletViewModel,
                         startDestination = sheet.route,
                         onComplete = { txSheet ->
                             appViewModel.hideSheet()

app/src/main/java/to/bitkit/ui/screens/wallets/send/SendAmountScreen.kt

@@ -13,8 +13,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import to.bitkit.R
+import to.bitkit.models.NodeLifecycleState
 import to.bitkit.models.PrimaryDisplay
 import to.bitkit.ui.LocalBalances
 import to.bitkit.ui.LocalCurrencies
@@ -23,13 +25,15 @@ import to.bitkit.ui.components.Keyboard
 import to.bitkit.ui.components.MoneySSB
 import to.bitkit.ui.components.OutlinedColorButton
 import to.bitkit.ui.components.PrimaryButton
+import to.bitkit.ui.components.SyncNodeView
 import to.bitkit.ui.components.Text13Up
 import to.bitkit.ui.components.UnitButton
 import to.bitkit.ui.scaffold.SheetTopBar
-import to.bitkit.ui.shared.util.DarkModePreview
+import to.bitkit.ui.shared.util.gradientBackground
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.viewmodels.CurrencyUiState
+import to.bitkit.viewmodels.MainUiState
 import to.bitkit.viewmodels.SendEvent
 import to.bitkit.viewmodels.SendMethod
 import to.bitkit.viewmodels.SendUiState
@@ -38,101 +42,132 @@ import to.bitkit.viewmodels.SendUiState
 @Composable
 fun SendAmountScreen(
     uiState: SendUiState,
+    walletUiState: MainUiState,
     currencyUiState: CurrencyUiState = LocalCurrencies.current,
     onBack: () -> Unit,
     onEvent: (SendEvent) -> Unit,
 ) {
     Column(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier
+            .fillMaxSize()
+            .gradientBackground()
     ) {
         SheetTopBar(stringResource(R.string.title_send_amount)) {
             onEvent(SendEvent.AmountReset)
             onBack()
         }
 
-        Spacer(Modifier.height(16.dp))
+        if (walletUiState.nodeLifecycleState is NodeLifecycleState.Running) {
+            Spacer(Modifier.height(16.dp))
 
-        Column(
-            modifier = Modifier.padding(horizontal = 16.dp)
-        ) {
-            BalanceHeaderView(sats = uiState.amountInput.toLong(), modifier = Modifier.fillMaxWidth())
-
-            Spacer(modifier = Modifier.height(24.dp))
-
-            Text13Up(
-                text = stringResource(R.string.wallet__send_available),
-                color = Colors.White64,
-            )
-            Spacer(modifier = Modifier.height(4.dp))
-
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
+            Column(
+                modifier = Modifier.padding(horizontal = 16.dp)
             ) {
-                val balances = LocalBalances.current
-                val availableAmount = when (uiState.payMethod) {
-                    SendMethod.ONCHAIN -> balances.totalOnchainSats.toLong()
-                    SendMethod.LIGHTNING -> balances.totalLightningSats.toLong()
-                }
-                MoneySSB(sats = availableAmount.toLong())
+                BalanceHeaderView(sats = uiState.amountInput.toLong(), modifier = Modifier.fillMaxWidth())
 
-                Spacer(modifier = Modifier.weight(1f))
+                Spacer(modifier = Modifier.height(24.dp))
+
+                Text13Up(
+                    text = stringResource(R.string.wallet__send_available),
+                    color = Colors.White64,
+                )
+                Spacer(modifier = Modifier.height(4.dp))
 
-                OutlinedColorButton(
-                    onClick = { onEvent(SendEvent.PaymentMethodSwitch) },
-                    enabled = uiState.isUnified,
-                    color = when (uiState.payMethod) {
-                        SendMethod.ONCHAIN -> Colors.Brand
-                        SendMethod.LIGHTNING -> Colors.Purple
-                    },
-                    modifier = Modifier.height(28.dp)
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    Text13Up(
-                        text = when (uiState.payMethod) {
-                            SendMethod.ONCHAIN -> stringResource(R.string.savings)
-                            SendMethod.LIGHTNING -> stringResource(R.string.spending)
-                        },
+                    val balances = LocalBalances.current
+                    val availableAmount = when (uiState.payMethod) {
+                        SendMethod.ONCHAIN -> balances.totalOnchainSats.toLong()
+                        SendMethod.LIGHTNING -> balances.totalLightningSats.toLong()
+                    }
+                    MoneySSB(sats = availableAmount.toLong())
+
+                    Spacer(modifier = Modifier.weight(1f))
+
+                    OutlinedColorButton(
+                        onClick = { onEvent(SendEvent.PaymentMethodSwitch) },
+                        enabled = uiState.isUnified,
                         color = when (uiState.payMethod) {
                             SendMethod.ONCHAIN -> Colors.Brand
                             SendMethod.LIGHTNING -> Colors.Purple
-                        }
+                        },
+                        modifier = Modifier.height(28.dp)
+                    ) {
+                        Text13Up(
+                            text = when (uiState.payMethod) {
+                                SendMethod.ONCHAIN -> stringResource(R.string.savings)
+                                SendMethod.LIGHTNING -> stringResource(R.string.spending)
+                            },
+                            color = when (uiState.payMethod) {
+                                SendMethod.ONCHAIN -> Colors.Brand
+                                SendMethod.LIGHTNING -> Colors.Purple
+                            }
+                        )
+                    }
+                    Spacer(modifier = Modifier.width(8.dp))
+                    UnitButton(
+                        modifier = Modifier.height(28.dp)
                     )
                 }
-                Spacer(modifier = Modifier.width(8.dp))
-                UnitButton(
-                    modifier = Modifier.height(28.dp)
-                )
-            }
 
-            Spacer(modifier = Modifier.weight(1f))
+                Spacer(modifier = Modifier.weight(1f))
 
-            HorizontalDivider(modifier = Modifier.padding(vertical = 24.dp))
+                HorizontalDivider(modifier = Modifier.padding(vertical = 24.dp))
 
-            Keyboard(
-                onClick = { number -> onEvent(SendEvent.AmountChange(number)) },
-                isDecimal = currencyUiState.primaryDisplay == PrimaryDisplay.FIAT,
-                modifier = Modifier.fillMaxWidth(),
-            )
+                Keyboard(
+                    onClick = { number -> onEvent(SendEvent.AmountChange(number)) },
+                    isDecimal = currencyUiState.primaryDisplay == PrimaryDisplay.FIAT,
+                    modifier = Modifier.fillMaxWidth(),
+                )
 
-            Spacer(modifier = Modifier.height(41.dp))
+                Spacer(modifier = Modifier.height(41.dp))
 
-            PrimaryButton(
-                text = stringResource(R.string.continue_button),
-                enabled = uiState.isAmountInputValid,
-                onClick = { onEvent(SendEvent.AmountContinue(uiState.amountInput)) },
-            )
+                PrimaryButton(
+                    text = stringResource(R.string.continue_button),
+                    enabled = uiState.isAmountInputValid,
+                    onClick = { onEvent(SendEvent.AmountContinue(uiState.amountInput)) },
+                )
 
-            Spacer(modifier = Modifier.height(16.dp))
+                Spacer(modifier = Modifier.height(16.dp))
+            }
+        } else {
+            SyncNodeView(modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f))
         }
     }
 }
 
-@DarkModePreview
+@Preview(showBackground = true)
 @Composable
-private fun SendAmountViewPreview() {
+private fun Preview1() {
     AppThemeSurface {
         SendAmountScreen(
             uiState = SendUiState(
                 payMethod = SendMethod.LIGHTNING,
+                amountInput = "100"
+            ),
+            walletUiState = MainUiState(
+                nodeLifecycleState = NodeLifecycleState.Running
+            ),
+            onBack = {},
+            onEvent = {},
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun Preview2() {
+    AppThemeSurface {
+        SendAmountScreen(
+            uiState = SendUiState(
+                payMethod = SendMethod.LIGHTNING,
+                amountInput = "100"
+            ),
+            walletUiState = MainUiState(
+                nodeLifecycleState = NodeLifecycleState.Initializing
             ),
             onBack = {},
             onEvent = {},

app/src/main/java/to/bitkit/ui/screens/wallets/send/SendOptionsView.kt

@@ -1,7 +1,6 @@
 package to.bitkit.ui.screens.wallets.send
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -39,14 +38,15 @@ import to.bitkit.ui.screens.scanner.QrScanningScreen
 import to.bitkit.ui.shared.util.gradientBackground
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
-import to.bitkit.ui.theme.Colors.Black25
 import to.bitkit.viewmodels.AppViewModel
 import to.bitkit.viewmodels.SendEffect
 import to.bitkit.viewmodels.SendEvent
+import to.bitkit.viewmodels.WalletViewModel
 
 @Composable
 fun SendOptionsView(
     appViewModel: AppViewModel,
+    walletViewModel: WalletViewModel,
     startDestination: SendRoute = SendRoute.Options,
     onComplete: (NewTransactionSheetDetails?) -> Unit,
 ) {
@@ -88,8 +88,10 @@ fun SendOptionsView(
             }
             composable<SendRoute.Amount> {
                 val uiState by appViewModel.sendUiState.collectAsStateWithLifecycle()
+                val walletUiState by walletViewModel.uiState.collectAsStateWithLifecycle()
                 SendAmountScreen(
                     uiState = uiState,
+                    walletUiState = walletUiState,
                     onBack = { navController.popBackStack() },
                     onEvent = { appViewModel.setSendEvent(it) }
                 )