Add sliding screen transitions

app/src/main/java/to/bitkit/ui/ContentView.kt

@@ -1,8 +1,5 @@
 package to.bitkit.ui
 
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
@@ -69,6 +66,10 @@ import to.bitkit.ui.settings.OrderDetailScreen
 import to.bitkit.ui.settings.SettingsScreen
 import to.bitkit.ui.settings.backups.BackupWalletScreen
 import to.bitkit.ui.settings.backups.RestoreWalletScreen
+import to.bitkit.ui.utils.screenScaleIn
+import to.bitkit.ui.utils.screenScaleOut
+import to.bitkit.ui.utils.screenSlideIn
+import to.bitkit.ui.utils.screenSlideOut
 import to.bitkit.utils.Logger
 import to.bitkit.viewmodels.ActivityListViewModel
 import to.bitkit.viewmodels.AppViewModel
@@ -323,7 +324,7 @@ fun ContentView(
                                 } else {
                                     navController.navigateToTransferSpendingAmount()
                                 }
-                             },
+                            },
                             onFund = {
                                 scope.launch {
                                     // TODO show receive sheet -> ReceiveAmount
@@ -367,7 +368,7 @@ private fun NavGraphBuilder.home(
         HomeScreen(
             walletViewModel = viewModel,
             appViewModel = appViewModel,
-            rootNavController = navController
+            rootNavController = navController,
         )
     }
 }
@@ -376,7 +377,12 @@ private fun NavGraphBuilder.settings(
     viewModel: WalletViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.Settings> {
+    composable<Routes.Settings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         SettingsScreen(viewModel, navController)
     }
 }
@@ -385,13 +391,21 @@ private fun NavGraphBuilder.nodeState(
     viewModel: WalletViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.NodeState> {
+    composable<Routes.NodeState>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenSlideOut },
+    ) {
         NodeStateScreen(viewModel, navController)
     }
 }
 
 private fun NavGraphBuilder.generalSettings(navController: NavHostController) {
-    composable<Routes.GeneralSettings> {
+    composable<Routes.GeneralSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         GeneralSettingsScreen(navController)
     }
 }
@@ -400,7 +414,12 @@ private fun NavGraphBuilder.defaultUnitSettings(
     currencyViewModel: CurrencyViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.DefaultUnitSettings> {
+    composable<Routes.DefaultUnitSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         DefaultUnitSettingsScreen(currencyViewModel, navController)
     }
 }
@@ -409,39 +428,64 @@ private fun NavGraphBuilder.localCurrencySettings(
     currencyViewModel: CurrencyViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.LocalCurrencySettings> {
+    composable<Routes.LocalCurrencySettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         LocalCurrencySettingsScreen(currencyViewModel, navController)
     }
 }
 
 private fun NavGraphBuilder.backupSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.BackupSettings> {
+    composable<Routes.BackupSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         BackupSettingsScreen(navController)
     }
 }
 
 private fun NavGraphBuilder.backupWalletSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.BackupWalletSettings> {
+    composable<Routes.BackupWalletSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         BackupWalletScreen(navController)
     }
 }
 
 private fun NavGraphBuilder.restoreWalletSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.RestoreWalletSettings> {
+    composable<Routes.RestoreWalletSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         RestoreWalletScreen(navController)
     }
 }
 
 private fun NavGraphBuilder.channelOrdersSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.ChannelOrdersSettings> {
+    composable<Routes.ChannelOrdersSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         ChannelOrdersScreen(
             onBackClick = { navController.popBackStack() },
             onOrderItemClick = { navController.navigateToOrderDetail(it) },
@@ -453,7 +497,12 @@ private fun NavGraphBuilder.channelOrdersSettings(
 private fun NavGraphBuilder.orderDetailSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.OrderDetail> { navBackEntry ->
+    composable<Routes.OrderDetail>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) { navBackEntry ->
         OrderDetailScreen(
             orderItem = navBackEntry.toRoute(),
             onBackClick = { navController.popBackStack() },
@@ -464,7 +513,12 @@ private fun NavGraphBuilder.orderDetailSettings(
 private fun NavGraphBuilder.cjitDetailSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.CjitDetail> { navBackEntry ->
+    composable<Routes.CjitDetail>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) { navBackEntry ->
         CJitDetailScreen(
             cjitItem = navBackEntry.toRoute(),
             onBackClick = { navController.popBackStack() },
@@ -476,7 +530,12 @@ private fun NavGraphBuilder.lightning(
     viewModel: WalletViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.Lightning> {
+    composable<Routes.Lightning>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         LightningSettingsScreen(viewModel, navController)
     }
 }
@@ -485,15 +544,25 @@ private fun NavGraphBuilder.devSettings(
     viewModel: WalletViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.DevSettings> {
+    composable<Routes.DevSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         DevSettingsScreen(viewModel, navController)
     }
 }
 
 private fun NavGraphBuilder.regtestSettings(
     navController: NavHostController,
 ) {
-    composable<Routes.RegtestSettings> {
+    composable<Routes.RegtestSettings>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         val viewModel = hiltViewModel<BlocktankRegtestViewModel>()
         BlocktankRegtestScreen(viewModel, navController)
     }
@@ -503,7 +572,12 @@ private fun NavGraphBuilder.allActivity(
     viewModel: ActivityListViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.AllActivity> {
+    composable<Routes.AllActivity>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) {
         AllActivityScreen(
             viewModel = viewModel,
             onBackCLick = { navController.popBackStack() },
@@ -516,7 +590,12 @@ private fun NavGraphBuilder.activityItem(
     viewModel: ActivityListViewModel,
     navController: NavHostController,
 ) {
-    composable<Routes.ActivityItem> { navBackEntry ->
+    composable<Routes.ActivityItem>(
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenScaleOut },
+        popEnterTransition = { screenScaleIn },
+        popExitTransition = { screenSlideOut },
+    ) { navBackEntry ->
         ActivityItemScreen(
             viewModel = viewModel,
             activityItem = navBackEntry.toRoute(),
@@ -530,18 +609,8 @@ private fun NavGraphBuilder.qrScanner(
     navController: NavHostController,
 ) {
     composable<Routes.QrScanner>(
-        enterTransition = {
-            slideInHorizontally(
-                initialOffsetX = { it },
-                animationSpec = tween(durationMillis = 300)
-            )
-        },
-        exitTransition = {
-            slideOutHorizontally(
-                targetOffsetX = { it },
-                animationSpec = tween(durationMillis = 300)
-            )
-        },
+        enterTransition = { screenSlideIn },
+        exitTransition = { screenSlideOut },
     ) {
         QrScanningScreen(navController = navController) { qrCode ->
             navController.popBackStack()

app/src/main/java/to/bitkit/ui/MainActivity.kt

@@ -23,6 +23,10 @@ import to.bitkit.ui.screens.SplashScreen
 import to.bitkit.ui.screens.wallets.sheets.NewTransactionSheet
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.utils.enableAppEdgeToEdge
+import to.bitkit.ui.utils.screenScaleIn
+import to.bitkit.ui.utils.screenScaleOut
+import to.bitkit.ui.utils.screenSlideIn
+import to.bitkit.ui.utils.screenSlideOut
 import to.bitkit.viewmodels.ActivityListViewModel
 import to.bitkit.viewmodels.AppViewModel
 import to.bitkit.viewmodels.BlocktankViewModel
@@ -61,7 +65,12 @@ class MainActivity : ComponentActivity() {
                                 }
                             )
                         }
-                        composable<StartupRoutes.Intro> {
+                        composable<StartupRoutes.Intro>(
+                            enterTransition = { screenSlideIn },
+                            exitTransition = { screenScaleOut },
+                            popEnterTransition = { screenScaleIn },
+                            popExitTransition = { screenSlideOut },
+                        ) {
                             IntroScreen(
                                 onStartClick = {
                                     startupNavController.navigate(StartupRoutes.Slides())
@@ -71,7 +80,12 @@ class MainActivity : ComponentActivity() {
                                 },
                             )
                         }
-                        composable<StartupRoutes.Slides> { navBackEntry ->
+                        composable<StartupRoutes.Slides>(
+                            enterTransition = { screenSlideIn },
+                            exitTransition = { screenScaleOut },
+                            popEnterTransition = { screenScaleIn },
+                            popExitTransition = { screenSlideOut },
+                        ) { navBackEntry ->
                             val route = navBackEntry.toRoute<StartupRoutes.Slides>()
                             OnboardingSlidesScreen(
                                 currentTab = route.tab,
@@ -91,7 +105,12 @@ class MainActivity : ComponentActivity() {
                                 onRestoreClick = { startupNavController.navigate(StartupRoutes.Restore) },
                             )
                         }
-                        composable<StartupRoutes.Restore> {
+                        composable<StartupRoutes.Restore>(
+                            enterTransition = { screenSlideIn },
+                            exitTransition = { screenScaleOut },
+                            popEnterTransition = { screenScaleIn },
+                            popExitTransition = { screenSlideOut },
+                        ) {
                             RestoreWalletView(
                                 onBackClick = { startupNavController.popBackStack() },
                                 onRestoreClick = { mnemonic, passphrase ->
@@ -109,7 +128,12 @@ class MainActivity : ComponentActivity() {
                                 }
                             )
                         }
-                        composable<StartupRoutes.Advanced> {
+                        composable<StartupRoutes.Advanced>(
+                            enterTransition = { screenSlideIn },
+                            exitTransition = { screenScaleOut },
+                            popEnterTransition = { screenScaleIn },
+                            popExitTransition = { screenSlideOut },
+                        ) {
                             CreateWalletWithPassphraseScreen(
                                 onBackClick = { startupNavController.popBackStack() },
                                 onCreateClick = { passphrase ->

app/src/main/java/to/bitkit/ui/onboarding/CreateWalletScreen.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -51,7 +50,7 @@ fun CreateWalletScreen(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(250.dp)
+                .height(264.dp)
                 .align(Alignment.BottomCenter),
         ) {
             Display(text = stringResource(R.string.onboarding__slide4_header).withAccent())
@@ -79,6 +78,7 @@ fun CreateWalletScreen(
                     modifier = Modifier.weight(1f)
                 )
             }
+            Spacer(modifier = Modifier.height(16.dp))
         }
     }
 }

app/src/main/java/to/bitkit/ui/onboarding/OnboardingSlidesScreen.kt

@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -22,7 +21,6 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -203,7 +201,7 @@ fun OnboardingTab(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(250.dp)
+                .height(264.dp)
                 .align(Alignment.BottomCenter),
         ) {
             Display(text = title.withAccent(accentColor = titleAccentColor))