chore: add empty state for select token screen

Signed-off-by: Brandon McAnsh <[email protected]>

Author: bmc08gt

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

@@ -285,6 +285,7 @@
     <string name="title_addCashToWallet">Add cash to your Flipcash wallet</string>
     <string name="action_addMoreCash">Add More Cash</string>
     <string name="title_tapAboveToAddCashToWallet">Tap above to Add Cash to your wallet</string>
+    <string name="title_tapBelowToAddCashWallet">You don’t have any cash yet.\nTap below to add cash to your wallet</string>
     <string name="action_dismiss">Dismiss</string>
     <string name="title_success">Success</string>
 

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

@@ -65,6 +65,14 @@ class SelectTokenScreen(private val purpose: TokenPurpose) : ModalScreen, NamedS
                 viewModel.dispatchEvent(SelectTokenViewModel.Event.OnPurposeChanged(purpose))
             }
 
+            LaunchedEffect(viewModel) {
+                viewModel.eventFlow
+                    .filterIsInstance<SelectTokenViewModel.Event.OpenScreen>()
+                    .map { ScreenRegistry.get(it.route) }
+                    .onEach { navigator.push(it) }
+                    .launchIn(this)
+            }
+
             LaunchedEffect(viewModel) {
                 viewModel.eventFlow
                     .filterIsInstance<SelectTokenViewModel.Event.OnTokenSelected>()

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

@@ -1,13 +1,31 @@
 package com.flipcash.app.tokens.internal
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.flipcash.app.core.tokens.TokenPurpose
+import com.flipcash.app.theme.FlipcashDesignSystem
 import com.flipcash.app.tokens.SelectTokenViewModel
 import com.flipcash.app.tokens.TokenList
+import com.flipcash.features.tokens.R
+import com.getcode.theme.CodeTheme
+import com.getcode.ui.theme.ButtonState
+import com.getcode.ui.theme.CodeButton
 
 @Composable
 internal fun SelectTokenScreen(
@@ -29,6 +47,59 @@ private fun SelectTokenScreenContent(
         modifier = Modifier.fillMaxSize(),
         tokens = tokens,
         showFlags = true,
+        emptyState = {
+            Box(
+                modifier = Modifier
+                    .fillParentMaxSize()
+                    .padding(bottom = CodeTheme.dimens.inset),
+                contentAlignment = Alignment.Center
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = CodeTheme.dimens.inset),
+                    verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x6),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Text(
+                        text = stringResource(R.string.title_tapBelowToAddCashWallet),
+                        style = CodeTheme.typography.textMedium,
+                        color = CodeTheme.colors.textSecondary,
+                        textAlign = TextAlign.Center,
+                    )
+
+                    CodeButton(
+                        text = stringResource(R.string.action_addCash),
+                        buttonState = ButtonState.Filled,
+                        contentPadding = PaddingValues(
+                            horizontal = CodeTheme.dimens.grid.x11,
+                            vertical = CodeTheme.dimens.grid.x2
+                        )
+                    ) { dispatch(SelectTokenViewModel.Event.OnAddCashClicked) }
+                }
+            }
+        },
         onTokenSelected = { dispatch(SelectTokenViewModel.Event.OnTokenSelected(it)) }
     )
+}
+
+@Composable
+@Preview
+private fun PreviewEmptyState() {
+    FlipcashDesignSystem {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(CodeTheme.colors.background)
+        ) {
+            SelectTokenScreenContent(
+                state = SelectTokenViewModel.State(
+                    purpose = TokenPurpose.Send,
+                    tokens = emptyList(),
+                ),
+            ) {
+
+            }
+        }
+    }
 }

apps/flipcash/shared/tokens/src/main/kotlin/SelectTokenViewModel.kt

@@ -1,7 +1,14 @@
 package com.flipcash.app.tokens
 
 import androidx.lifecycle.viewModelScope
+import com.flipcash.app.core.AppRoute
 import com.flipcash.app.core.tokens.TokenPurpose
+import com.flipcash.services.analytics.AnalyticsEvent
+import com.flipcash.services.analytics.FlipcashAnalyticsService
+import com.flipcash.services.internal.model.thirdparty.OnRampProvider
+import com.flipcash.services.internal.model.thirdparty.OnRampType
+import com.flipcash.services.user.AuthState
+import com.flipcash.services.user.UserManager
 import com.getcode.opencode.controllers.TokenController
 import com.getcode.opencode.exchange.Exchange
 import com.getcode.opencode.model.financial.Fiat
@@ -13,39 +20,59 @@ import com.getcode.opencode.model.financial.toFiat
 import com.getcode.view.BaseViewModel2
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.filterIsInstance
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.mapNotNull
 import kotlinx.coroutines.flow.onEach
 import javax.inject.Inject
 
 @HiltViewModel
 class SelectTokenViewModel @Inject constructor(
+    userManager: UserManager,
     tokenController: TokenController,
     exchange: Exchange,
+    analytics: FlipcashAnalyticsService,
 ): BaseViewModel2<SelectTokenViewModel.State, SelectTokenViewModel.Event>(
     initialState = State(purpose = TokenPurpose.Balance),
     updateStateForEvent = updateStateForEvent
 ) {
 
     data class State(
         val purpose: TokenPurpose,
+        val preferredOnRampProvider: OnRampProvider? = null,
         val tokens: List<TokenWithLocalizedBalance>? = null,
     ) {
         val totalBalance: LocalFiat
             get() = tokens.orEmpty().map { it.balance }.sum()
     }
 
     sealed interface Event {
+        data class OnPreferredOnRampProviderChanged(val provider: OnRampProvider?) : Event
+
         data class OnPurposeChanged(val purpose: TokenPurpose) : Event
         data class OnTokensUpdated(val tokens: List<TokenWithLocalizedBalance>) : Event
 
         data class OnTokenSelected(val token: Token): Event
+
+        data object OnAddCashClicked: Event
+        data object OpenOnRampAmountModal: Event
+        data class OpenScreen(val route: AppRoute): Event
     }
 
     init {
+        userManager.state
+            .filter { it.authState is AuthState.LoggedInWithUser }
+            .mapNotNull { it.flags }
+            .map { it.preferredOnRampProvider }
+            .onEach { provider ->
+                dispatchEvent(Event.OnPreferredOnRampProviderChanged(provider))
+            }
+            .launchIn(viewModelScope)
+
         eventFlow
             .filterIsInstance<Event.OnPurposeChanged>()
             .map { it.purpose }
@@ -83,14 +110,34 @@ class SelectTokenViewModel @Inject constructor(
                 }
             }.onEach { dispatchEvent(Event.OnTokensUpdated(it)) }
             .launchIn(viewModelScope)
+
+        eventFlow
+            .filterIsInstance<Event.OnAddCashClicked>()
+            .onEach {
+                analytics.openOnramp(AnalyticsEvent.OnRampOpenEvent.Balance)
+                val provider = stateFlow.value.preferredOnRampProvider
+                if (provider is OnRampProvider.Coinbase && provider.type == OnRampType.Virtual) {
+                    // has coinbase provider supporting google pay - pop selection for quick add
+                    dispatchEvent(Event.OpenOnRampAmountModal)
+                } else {
+                    // route to provider list
+                    dispatchEvent(Event.OpenScreen(AppRoute.OnRamp.ProviderList(AppRoute.Sheets.Wallet)))
+                }
+            }.launchIn(viewModelScope)
     }
 
     companion object {
         val updateStateForEvent: (Event) -> ((State) -> State) = { event ->
             when (event) {
+                is Event.OnPreferredOnRampProviderChanged -> { state ->
+                    state.copy(preferredOnRampProvider = event.provider)
+                }
                 is Event.OnPurposeChanged -> { state -> state.copy(purpose = event.purpose) }
                 is Event.OnTokensUpdated -> { state -> state.copy(tokens = event.tokens) }
                 is Event.OnTokenSelected -> { state -> state }
+                is Event.OnAddCashClicked -> { state -> state }
+                is Event.OpenOnRampAmountModal -> { state -> state }
+                is Event.OpenScreen -> { state -> state }
             }
         }
     }