feat(currencycreator): add shared transitions between flow steps

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/DisplayTextInput.kt

@@ -29,6 +29,7 @@ fun DisplayTextInput(
     state: TextFieldState,
     placeholder: String,
     modifier: Modifier = Modifier,
+    textModifier: Modifier = Modifier,
     style: TextStyle = CodeTheme.typography.displayMedium.copy(
         color = CodeTheme.colors.textMain,
         fontWeight = FontWeight.SemiBold,
@@ -44,6 +45,7 @@ fun DisplayTextInput(
     TextInput(
         state = state,
         modifier = modifier,
+        textModifier = textModifier,
         placeholder = placeholder,
         style = style,
         placeholderStyle = placeholderStyle,

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/TokenImageWithName.kt

@@ -30,6 +30,8 @@ fun TokenIconWithName(
     tokenImage: Any?,
     imageSize: Dp,
     modifier: Modifier = Modifier,
+    textModifier: Modifier = Modifier,
+    iconModifier: Modifier = Modifier,
     textStyle: TextStyle = CodeTheme.typography.screenTitle,
     textColor: Color = CodeTheme.colors.textMain,
     spacing: Dp = 0.dp,
@@ -41,9 +43,10 @@ fun TokenIconWithName(
     ) {
         TokenIcon(
             image = tokenImage,
-            modifier = Modifier.size(imageSize)
+            modifier = Modifier.size(imageSize).then(iconModifier)
         )
         Text(
+            modifier = textModifier,
             text = tokenName,
             style = textStyle,
             color = textColor,
@@ -56,6 +59,8 @@ fun TokenIconWithName(
     token: Token,
     imageSize: Dp,
     modifier: Modifier = Modifier,
+    textModifier: Modifier = Modifier,
+    iconModifier: Modifier = Modifier,
     displayName: (Token) -> String = { it.name },
     textStyle: TextStyle = CodeTheme.typography.screenTitle,
     textColor: Color = CodeTheme.colors.textMain,
@@ -66,6 +71,8 @@ fun TokenIconWithName(
         tokenImage = token.imageUrl,
         imageSize = imageSize,
         modifier = modifier,
+        textModifier = textModifier,
+        iconModifier = iconModifier,
         textStyle = textStyle,
         textColor = textColor,
         spacing = spacing
@@ -89,7 +96,7 @@ fun TokenIcon(
     modifier: Modifier = Modifier,
 ) {
     AsyncImage(
-        modifier = modifier.clip(CircleShape),
+        modifier = Modifier.clip(CircleShape).then(modifier),
         model = ImageRequest.Builder(LocalPlatformContext.current)
             .data(image)
             .crossfade(false)

apps/flipcash/features/currency-creator/src/main/kotlin/com/flipcash/app/currencycreator/internal/screens/BillCustomizationScreen.kt

@@ -24,6 +24,8 @@ import com.flipcash.app.bill.customization.LocalBillPlaygroundController
 import com.flipcash.app.bill.customization.components.BillPlayground
 import com.flipcash.app.bills.RenderedBill
 import com.flipcash.app.core.bill.Bill
+import com.flipcash.app.core.ui.transitions.SharedTransition
+import com.flipcash.app.core.ui.transitions.sharedBoundsTransition
 import com.flipcash.app.currencycreator.internal.CurrencyCreatorViewModel
 import com.getcode.navigation.flow.flowSharedViewModel
 import com.getcode.theme.CodeTheme
@@ -75,23 +77,17 @@ internal fun BillCustomizationContent(
         modifier = Modifier.fillMaxSize(),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        AnimatedContent(
-            modifier = Modifier
-                .padding(top = CodeTheme.dimens.grid.x3)
-                .fillMaxWidth()
-                .weight(1f),
-            targetState = augmentedBill,
-            transitionSpec = { fadeIn() togetherWith fadeOut() },
-            contentKey = { it?.data },
-        ) { bill ->
-            if (bill != null) {
-                RenderedBill(
-                    modifier = Modifier.weight(1f),
-                    bill = augmentedBill as Bill,
-                )
-            } else {
-                Spacer(Modifier.weight(1f))
-            }
+        augmentedBill?.let { bill ->
+            RenderedBill(
+                modifier = Modifier
+                    .padding(top = CodeTheme.dimens.grid.x3)
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .sharedBoundsTransition(
+                        transition = SharedTransition.CurrencyBill
+                    ),
+                bill = bill as Bill,
+            )
         }
 
         BillPlayground(

apps/flipcash/features/currency-creator/src/main/kotlin/com/flipcash/app/currencycreator/internal/screens/DescriptionSelectionScreen.kt

@@ -1,6 +1,7 @@
 package com.flipcash.app.currencycreator.internal.screens
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -31,6 +32,9 @@ import com.flipcash.app.core.tokens.CurrencyCreatorResult
 import com.flipcash.app.core.tokens.CurrencyCreatorStep
 import com.flipcash.app.core.ui.DisplayTextInput
 import com.flipcash.app.core.ui.TokenIconWithName
+import com.flipcash.app.core.ui.transitions.CircleOverlayClip
+import com.flipcash.app.core.ui.transitions.SharedTransition
+import com.flipcash.app.core.ui.transitions.sharedBoundsTransition
 import com.flipcash.app.currencycreator.internal.CurrencyCreatorViewModel
 import com.flipcash.core.R
 import com.getcode.navigation.flow.flowSharedViewModel
@@ -49,6 +53,7 @@ internal fun DescriptionSelectionScreen() {
     DescriptionSelectionContent(state, viewModel::dispatchEvent)
 }
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 internal fun DescriptionSelectionContent(
     state: CurrencyCreatorViewModel.State,
@@ -141,6 +146,12 @@ internal fun DescriptionSelectionContent(
                             R.string.placeholder_currencyName
                         )
                     },
+                    iconModifier = Modifier.sharedBoundsTransition(
+                        transition = SharedTransition.CurrencyIcon,
+                    ),
+                    textModifier = Modifier.sharedBoundsTransition(
+                        transition = SharedTransition.CurrencyName,
+                    ),
                     tokenImage = state.icon.dataOrNull,
                     imageSize = CodeTheme.dimens.staticGrid.x6,
                     spacing = CodeTheme.dimens.grid.x2

apps/flipcash/features/currency-creator/src/main/kotlin/com/flipcash/app/currencycreator/internal/screens/IconSelectionScreen.kt

@@ -4,6 +4,7 @@ import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts.PickVisualMedia
 import androidx.compose.animation.Crossfade
+import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -37,6 +38,9 @@ import com.flipcash.app.core.data.isLoaded
 import com.flipcash.app.core.data.isLoading
 import com.flipcash.app.core.tokens.CurrencyCreatorResult
 import com.flipcash.app.core.tokens.CurrencyCreatorStep
+import com.flipcash.app.core.ui.transitions.CircleOverlayClip
+import com.flipcash.app.core.ui.transitions.SharedTransition
+import com.flipcash.app.core.ui.transitions.sharedBoundsTransition
 import com.flipcash.app.currencycreator.internal.CurrencyCreatorViewModel
 import com.flipcash.core.R
 import com.getcode.navigation.flow.flowSharedViewModel
@@ -58,6 +62,7 @@ internal fun IconSelectionScreen() {
 }
 
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 internal fun IconSelectionContent(
     state: CurrencyCreatorViewModel.State,
@@ -138,6 +143,9 @@ internal fun IconSelectionContent(
                 Box(
                     modifier = Modifier
                         .size(150.dp)
+                        .sharedBoundsTransition(
+                            transition = SharedTransition.CurrencyIcon,
+                        )
                         .background(
                             color = CodeTheme.colors.divider,
                             shape = CircleShape,
@@ -182,7 +190,11 @@ internal fun IconSelectionContent(
                 }
 
                 val name = state.nameFieldState.text
+
                 Text(
+                    modifier = Modifier.sharedBoundsTransition(
+                        transition = SharedTransition.CurrencyName,
+                    ),
                     text = if (name.isNotBlank()) name.toString() else stringResource(R.string.placeholder_currencyName),
                     style = CodeTheme.typography.displaySmall,
                     color = Color.White,

apps/flipcash/features/currency-creator/src/main/kotlin/com/flipcash/app/currencycreator/internal/screens/NameSelectionScreen.kt

@@ -19,6 +19,9 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.flipcash.app.core.tokens.CurrencyCreatorResult
 import com.flipcash.app.core.tokens.CurrencyCreatorStep
 import com.flipcash.app.core.ui.DisplayTextInput
+import com.flipcash.app.core.ui.transitions.SharedTransition
+import com.flipcash.app.core.ui.transitions.sharedBoundsTransition
+import com.flipcash.app.core.ui.transitions.sharedElementTransition
 import com.flipcash.app.currencycreator.internal.CurrencyCreatorViewModel
 import com.flipcash.core.R
 import com.getcode.navigation.flow.flowSharedViewModel
@@ -85,6 +88,9 @@ internal fun NameSelectionContent(
                 .fillMaxWidth()
                 .padding(padding)
                 .focusRequester(focusRequester),
+            textModifier = Modifier.sharedElementTransition(
+                transition = SharedTransition.CurrencyName,
+            ),
             keyboardOptions = KeyboardOptions(
                 keyboardType = KeyboardType.Text,
                 imeAction = ImeAction.Done,

apps/flipcash/features/currency-creator/src/main/kotlin/com/flipcash/app/currencycreator/internal/screens/ReviewAndPurchaseScreen.kt

@@ -21,6 +21,8 @@ import com.flipcash.app.bills.RenderedBill
 import com.flipcash.app.core.tokens.CurrencyCreatorResult
 import com.flipcash.app.core.tokens.CurrencyCreatorStep
 import com.flipcash.app.core.ui.TokenIconWithName
+import com.flipcash.app.core.ui.transitions.SharedTransition
+import com.flipcash.app.core.ui.transitions.sharedBoundsTransition
 import com.flipcash.app.currencycreator.internal.CurrencyCreatorViewModel
 import com.flipcash.core.R
 import com.getcode.navigation.flow.flowSharedViewModel
@@ -85,23 +87,17 @@ internal fun ReviewAndPurchaseContent(
                 spacing = CodeTheme.dimens.grid.x2,
             )
 
-            AnimatedContent(
-                modifier = Modifier
-                    .padding(top = CodeTheme.dimens.grid.x3)
-                    .fillMaxWidth()
-                    .weight(1f),
-                targetState = state.bill,
-                transitionSpec = { fadeIn() togetherWith fadeOut() },
-                contentKey = { it?.data },
-            ) { bill ->
-                if (bill != null) {
-                    RenderedBill(
-                        modifier = Modifier.weight(1f),
-                        bill = bill,
-                    )
-                } else {
-                    Spacer(Modifier.weight(1f))
-                }
+            state.bill?.let { bill ->
+                RenderedBill(
+                    modifier = Modifier
+                        .weight(1f)
+                        .padding(top = CodeTheme.dimens.grid.x3)
+                        .fillMaxWidth()
+                        .sharedBoundsTransition(
+                            transition = SharedTransition.CurrencyBill
+                        ),
+                    bill = bill,
+                )
             }
         }
     }

ui/components/src/main/kotlin/com/getcode/ui/components/TextInput.kt

@@ -60,6 +60,7 @@ import kotlinx.coroutines.flow.onEach
 @Composable
 fun TextInput(
     modifier: Modifier = Modifier,
+    textModifier: Modifier = Modifier,
     placeholder: String = "",
     minLines: Int = 1,
     maxLines: Int = 4,
@@ -144,7 +145,8 @@ fun TextInput(
                     contentPadding = contentPadding,
                     textFieldAlignment = textFieldAlignment,
                     shape = shape,
-                    innerTextField = it
+                    innerTextField = it,
+                    textModifier = textModifier,
                 )
             },
             scrollState = scrollState
@@ -172,6 +174,7 @@ private fun DecoratorBox(
     placeholder: String,
     placeholderStyle: TextStyle,
     placeholderColor: Color,
+    textModifier: Modifier = Modifier,
     borderColor: Color = CodeTheme.colors.brandLight,
     contentPadding: PaddingValues,
     leadingIcon: (@Composable () -> Unit)?,
@@ -197,7 +200,7 @@ private fun DecoratorBox(
                 .weight(1f),
             contentAlignment = textFieldAlignment
         ) {
-            Box(modifier = Modifier.padding(contentPadding)) {
+            Box(modifier = Modifier.padding(contentPadding).then(textModifier)) {
                 innerTextField()
             }
             if (state.text.isEmpty() && placeholder.isNotEmpty()) {