fix(ui): make Confirm In Phantom button react to button state for inline content label

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

Author: bmc08gt

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

@@ -6,7 +6,12 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.material.ButtonColors
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -21,19 +26,24 @@ import androidx.compose.ui.unit.sp
 import com.flipcash.core.R
 import com.flipcash.services.internal.model.thirdparty.OnRampProvider
 import com.getcode.theme.CodeTheme
+import com.getcode.ui.theme.ButtonState
 
 @Composable
 fun buildExternalWalletButtonLabel(
     prefix: String,
     provider: OnRampProvider.UsesDeeplinks,
-    iconColor: Color
+    isEnabled: Boolean = true,
+    colors: ButtonColors = ButtonState.Filled.colors(),
 ): AnnotatedButtonLabel {
     val (title, icon) = when (provider) {
         OnRampProvider.Backpack -> stringResource(R.string.label_backpack) to painterResource(R.drawable.ic_backpack_wallet)
         OnRampProvider.Phantom -> stringResource(R.string.label_phantom) to painterResource(R.drawable.ic_phantom_wallet)
         OnRampProvider.Solflare -> stringResource(R.string.label_solflare) to painterResource(R.drawable.ic_solflare_wallet)
     }
 
+    val currentIsEnabled by rememberUpdatedState(isEnabled)
+    val currentColors by rememberUpdatedState(colors)
+
     return buildAnnotatedString {
         append(prefix)
         appendInlineContent("[icon]", alternateText = " ")
@@ -50,6 +60,7 @@ fun buildExternalWalletButtonLabel(
                     modifier = Modifier.fillMaxSize(),
                     contentAlignment = Alignment.Center
                 ) {
+                    val iconColor by currentColors.contentColor(currentIsEnabled)
                     Image(
                         modifier = Modifier.padding(
                             start = CodeTheme.dimens.staticGrid.x1 + 2.dp,

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

@@ -1,6 +1,7 @@
 package com.flipcash.app.core.onramp.ui
 
 import androidx.compose.foundation.text.InlineTextContent
+import androidx.compose.material.ButtonColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.AnnotatedString
@@ -12,7 +13,8 @@ typealias AnnotatedButtonLabel = Pair<AnnotatedString, Map<String, InlineTextCon
 @Composable
 fun buildPhantomButtonLabel(
     prefix: String,
-    iconColor: Color = ButtonState.Filled.colors().contentColor(true).value,
+    isEnabled: Boolean = true,
+    colors: ButtonColors = ButtonState.Filled.colors(),
 ): AnnotatedButtonLabel {
-    return buildExternalWalletButtonLabel(prefix, OnRampProvider.Phantom, iconColor)
+    return buildExternalWalletButtonLabel(prefix, OnRampProvider.Phantom, isEnabled = isEnabled, colors = colors)
 }

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

@@ -71,7 +71,6 @@ private fun Buttons() {
         buildExternalWalletButtonLabel(
             "Confirm in",
             provider = OnRampProvider.Phantom,
-            Color.Black
         )
     ) {
         CodeButton(
@@ -83,6 +82,23 @@ private fun Buttons() {
         )
     }
 
+    with(
+        buildExternalWalletButtonLabel(
+            "Confirm in",
+            provider = OnRampProvider.Phantom,
+            isEnabled = false,
+        )
+    ) {
+        CodeButton(
+            modifier = Modifier.fillMaxWidth(),
+            onClick = {},
+            enabled = false,
+            text = first,
+            inlineContent = second,
+            buttonState = ButtonState.Filled,
+        )
+    }
+
     with(buildNotifyButtonLabel()) {
         CodeButton(
             modifier = Modifier.fillMaxWidth(),

apps/flipcash/features/onramp/src/main/kotlin/com/flipcash/app/onramp/internal/screens/OnRampAmountScreenContent.kt

@@ -1,28 +1,15 @@
 package com.flipcash.app.onramp.internal.screens
 
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.InlineTextContent
-import androidx.compose.foundation.text.appendInlineContent
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.text.Placeholder
-import androidx.compose.ui.text.PlaceholderVerticalAlign
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import cafe.adriel.voyager.core.registry.ScreenRegistry
 import com.flipcash.app.core.AppRoute
@@ -38,8 +25,6 @@ import com.getcode.navigation.core.LocalCodeNavigator
 import com.getcode.theme.CodeTheme
 import com.getcode.ui.theme.ButtonState
 import com.getcode.ui.theme.CodeButton
-import kotlin.collections.emptyMap
-import kotlin.to
 
 @Composable
 internal fun OnRampAmountScreen(
@@ -112,7 +97,6 @@ private fun ConfirmationButton(
     modifier: Modifier = Modifier,
     dispatchEvent: (OnRampViewModel.Event) -> Unit
 ) {
-    val buttonColors = ButtonState.Filled.colors()
     val (buttonText, assets) = when (provider) {
         is OnRampProvider.Coinbase -> when (provider.type) {
             // https://developers.google.com/pay/api/android/guides/brand-guidelines#using-pay-in-text
@@ -125,7 +109,7 @@ private fun ConfirmationButton(
             buildExternalWalletButtonLabel(
                 prefix = stringResource(R.string.label_confirmIn),
                 provider = provider,
-                iconColor = buttonColors.contentColor(state.canAdd).value
+                isEnabled = state.canAdd
             )
         }
 

apps/flipcash/features/tokens/src/main/kotlin/com/flipcash/app/tokens/internal/TokenBuySellEntryScreen.kt

@@ -102,7 +102,10 @@ internal fun BuySellTokenEntryScreen(
         Box(modifier = Modifier.fillMaxWidth()) {
             val (text, inlineContent) = when (state.purpose) {
                 is TokenSwapPurpose.Buy -> AnnotatedString(stringResource(R.string.action_buy)) to emptyMap()
-                is TokenSwapPurpose.FundWithWallet -> buildPhantomButtonLabel(prefix = stringResource(R.string.label_confirmIn))
+                is TokenSwapPurpose.FundWithWallet -> buildPhantomButtonLabel(
+                    prefix = stringResource(R.string.label_confirmIn),
+                    isEnabled = state.canTransact
+                )
                 is TokenSwapPurpose.Sell -> AnnotatedString(stringResource(R.string.action_next)) to emptyMap()
                 else -> AnnotatedString("") to emptyMap()
             }

ui/components/src/main/kotlin/com/getcode/ui/theme/CodeButton.kt

@@ -42,6 +42,7 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -266,7 +267,8 @@ fun CodeButton(
         style = style,
         sizeKey = text
     ) {
-        Text(text = text, inlineContent = inlineContent)
+        val updatedInlineContent by rememberUpdatedState(inlineContent)
+        Text(text = text, inlineContent = updatedInlineContent)
     }
 }