feat(discovery): replace bottom bar CTA with inline currency creator upsell card

apps/flipcash/core/src/main/res/values/strings.xml

@@ -494,7 +494,7 @@
     <string name="action_retry">Retry</string>
     <string name="error_unableToLoadChartData">Unable To Load</string>
 
-    <string name="title_discoverCurrencies">Currencies</string>
+    <string name="title_discoverCurrencies">Discover Currencies</string>
     <string name="action_discoverCurrencies">Discover Currencies</string>
     <string name="title_discoverPopular">Popular</string>
     <string name="title_discoverNew">New</string>
@@ -508,6 +508,7 @@
     <string name="subtitle_discoverEmptyNew">No currencies have been created in the last week</string>
     <string name="subtitle_discoverEmptyPopular">No popular currencies right now</string>
     <string name="action_createYourOwnCurrency">Create Your Own Currency</string>
+    <string name="subtitle_createYourOwnCurrency">Create a currency in minutes and immediately use it as cash</string>
     <string name="prompt_title_notYetAvailable">Not Yet Available</string>
     <string name="prompt_message_currencyCreateNotYetAvailable">Check back soon</string>
 
@@ -632,4 +633,6 @@
     <string name="label_lessFee">Less fee</string>
     <string name="label_netAmount">Net amount</string>
     <string name="label_amountInToken">Amount in %1$s</string>
+
+    <string name="title_leaderboard">Leaderboard</string>
 </resources>

apps/flipcash/features/balance/src/main/kotlin/com/flipcash/app/balance/internal/BalanceScreenContent.kt

@@ -119,7 +119,6 @@ private fun BalanceScreenContent(
                                 contentPadding = PaddingValues(),
                                 text = stringResource(R.string.action_discoverCurrencies),
                                 shape = CircleShape,
-                                buttonState = ButtonState.Filled
                             )
                         }
                     }
@@ -144,6 +143,7 @@ private fun BalanceScreenContent(
                             .padding(bottom = CodeTheme.dimens.grid.x3)
                             .navigationBarsPadding(),
                         text = stringResource(R.string.action_discoverCurrencies),
+                        buttonState = ButtonState.Filled10,
                         onClick = {
                             dispatchEvent(
                                 BalanceViewModel.Event.OpenScreen(AppRoute.Token.Discovery)

apps/flipcash/features/discovery/src/main/kotlin/com/flipcash/app/discovery/internal/TokenDiscoveryScreenContent.kt

@@ -60,39 +60,7 @@ private fun TokenDiscoveryScreenContent(
     dispatch: (TokenDiscoveryViewModel.Event) -> Unit
 ) {
     val listState = rememberLazyListState()
-    CodeScaffold(
-        bottomBar = {
-            if (state.createEnabled) {
-                Box {
-                    var buttonHeight by remember { mutableStateOf(0.dp) }
-                    Box(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .height(buttonHeight)
-                            .drawWithGradient(
-                                color = CodeTheme.colors.background,
-                                startY = { 0f },
-                                endY = { size.height * 0.38f }
-                            )
-                    )
-                    CodeButton(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .measured { buttonHeight = it.height }
-                            .navigationBarsPadding()
-                            .padding(horizontal = CodeTheme.dimens.inset)
-                            .padding(
-                                top = CodeTheme.dimens.grid.x9,
-                                bottom = CodeTheme.dimens.grid.x3
-                            ),
-                        text = stringResource(R.string.action_createYourOwnCurrency),
-                    ) {
-                        dispatch(TokenDiscoveryViewModel.Event.CreateCurrency)
-                    }
-                }
-            }
-        },
-    ) { padding ->
+    CodeScaffold { padding ->
         AnimatedContent(
             targetState = state.tokens,
             transitionSpec = { fadeIn(tween()) togetherWith fadeOut(tween()) },

apps/flipcash/features/discovery/src/main/kotlin/com/flipcash/app/discovery/internal/components/TokenLeaderboard.kt

@@ -22,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import com.flipcash.app.core.data.Loadable
 import com.flipcash.app.core.data.isLoaded
 import com.flipcash.app.discovery.internal.TokenDiscoveryViewModel
+import com.flipcash.app.tokens.ui.CurrencyCreatorUpsellCard
 import com.flipcash.features.discovery.R
 import com.getcode.opencode.model.financial.Token
 import com.getcode.opencode.model.ui.DiscoverCategory
@@ -103,6 +104,13 @@ internal fun TokenLeaderboard(
 
             is Loadable.Loaded -> {
                 val results = tokens.data
+                // currency creator upsell card
+                item {
+                    CurrencyCreatorUpsellCard(modifier = Modifier.fillParentMaxWidth()) {
+                        dispatch(TokenDiscoveryViewModel.Event.CreateCurrency)
+                    }
+                }
+
                 if (results.isEmpty()) {
                     item {
                         Box(
@@ -135,6 +143,19 @@ internal fun TokenLeaderboard(
                         }
                     }
                 } else {
+                    // leaderboard header
+                    item {
+                        Text(
+                            modifier = Modifier.padding(
+                                top = CodeTheme.dimens.inset,
+                                bottom = CodeTheme.dimens.grid.x1,
+                            ),
+                            text = stringResource(R.string.title_leaderboard),
+                            style = CodeTheme.typography.textLarge,
+                            color = CodeTheme.colors.textMain,
+                        )
+                    }
+
                     itemsIndexed(
                         items = tokens.data,
                         key = { _, t -> t.address.base58() },

apps/flipcash/shared/tokens/src/main/kotlin/com/flipcash/app/tokens/ui/CurrencyCreatorUpsellCard.kt

@@ -0,0 +1,105 @@
+package com.flipcash.app.tokens.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowForward
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewWrapper
+import androidx.compose.ui.unit.dp
+import com.flipcash.app.theme.FlipcashThemeWrapper
+import com.flipcash.shared.tokens.R
+import com.getcode.theme.CodeTheme
+
+@Composable
+fun CurrencyCreatorUpsellCard(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+) {
+    Surface(
+        modifier = modifier,
+        color = CodeTheme.colors.surfaceVariant,
+        contentColor = CodeTheme.colors.textMain,
+        shape = CodeTheme.shapes.medium,
+        tonalElevation = 0.dp,
+        shadowElevation = 0.dp,
+        onClick = onClick
+    ) {
+        Box(modifier = Modifier.fillMaxWidth()) {
+            val density = LocalDensity.current
+            var imageWidth by remember { mutableStateOf(0.dp) }
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(
+                        start = CodeTheme.dimens.grid.x3,
+                        top = CodeTheme.dimens.grid.x3,
+                    ),
+                verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x1),
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2)
+                ) {
+                    Text(
+                        text = stringResource(R.string.action_createYourOwnCurrency),
+                        style = CodeTheme.typography.screenTitle,
+                        color = CodeTheme.colors.textMain,
+                    )
+                    Icon(
+                        modifier = Modifier.requiredSize(CodeTheme.dimens.staticGrid.x4),
+                        imageVector = Icons.AutoMirrored.Default.ArrowForward,
+                        contentDescription = null,
+                        tint = CodeTheme.colors.textMain,
+                    )
+                }
+
+                Text(
+                    modifier = Modifier.padding(end = imageWidth),
+                    text = stringResource(R.string.subtitle_createYourOwnCurrency),
+                    style = CodeTheme.typography.textSmall,
+                    color = CodeTheme.colors.textSecondary,
+                )
+            }
+
+            Image(
+                modifier = Modifier
+                    .align(Alignment.BottomEnd)
+                    .onSizeChanged { size ->
+                        imageWidth = with(density) { size.width.toDp() }
+                    },
+                painter = painterResource(R.drawable.ic_bill_previews),
+                contentDescription = null,
+            )
+        }
+    }
+}
+
+@Preview
+@PreviewWrapper(FlipcashThemeWrapper::class)
+@Composable
+private fun Preview_CurrencyCreatorUpsellCard() {
+    CurrencyCreatorUpsellCard() { }
+}