diff --git a/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/component/preview/PreviewManageTokensComponent.kt b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/component/preview/PreviewManageTokensComponent.kt index 5bf83bf727..7fad0628a4 100644 --- a/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/component/preview/PreviewManageTokensComponent.kt +++ b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/component/preview/PreviewManageTokensComponent.kt @@ -2,15 +2,58 @@ package com.tangem.features.managetokens.component.preview import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import com.tangem.core.ui.components.currency.tokenicon.TokenIconState +import com.tangem.core.ui.components.rows.model.ChainRowUM +import com.tangem.core.ui.extensions.stringReference import com.tangem.features.managetokens.component.ManageTokensComponent +import com.tangem.features.managetokens.entity.CurrencyItemUM import com.tangem.features.managetokens.entity.ManageTokensUM +import com.tangem.features.managetokens.impl.R import com.tangem.features.managetokens.ui.ManageTokensScreen -import kotlinx.collections.immutable.persistentListOf +import kotlinx.collections.immutable.toImmutableList internal class PreviewManageTokensComponent : ManageTokensComponent { private val previewState: ManageTokensUM = ManageTokensUM( popBack = {}, + items = List(size = 30) { index -> + if (index < 2) { + CurrencyItemUM.Custom( + id = index.toString(), + model = ChainRowUM( + name = stringReference("Custom $index"), + type = stringReference("CM$index"), + icon = TokenIconState.CustomTokenIcon( + tint = Color.White, + background = Color.Black, + networkBadgeIconResId = R.drawable.img_eth_22, + isGrayscale = false, + showCustomBadge = true, + ), + showCustom = true, + ), + onRemoveClick = {}, + ) + } else { + CurrencyItemUM.Basic( + id = index.toString(), + model = ChainRowUM( + name = stringReference("Basic $index"), + type = stringReference("BT$index"), + icon = TokenIconState.CoinIcon( + url = null, + fallbackResId = R.drawable.img_btc_22, + isGrayscale = false, + showCustomBadge = false, + ), + showCustom = false, + ), + isExpanded = false, + onExpandClick = {}, + ) + } + }.toImmutableList(), ) @Composable diff --git a/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/entity/CurrencyItemUM.kt b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/entity/CurrencyItemUM.kt new file mode 100644 index 0000000000..1fd59cebc8 --- /dev/null +++ b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/entity/CurrencyItemUM.kt @@ -0,0 +1,23 @@ +package com.tangem.features.managetokens.entity + +import androidx.compose.runtime.Immutable +import com.tangem.core.ui.components.rows.model.ChainRowUM + +@Immutable +internal sealed class CurrencyItemUM { + + abstract val id: String + + data class Basic( + override val id: String, + val model: ChainRowUM, + val isExpanded: Boolean, + val onExpandClick: () -> Unit, + ) : CurrencyItemUM() + + data class Custom( + override val id: String, + val model: ChainRowUM, + val onRemoveClick: () -> Unit, + ) : CurrencyItemUM() +} \ No newline at end of file diff --git a/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/entity/ManageTokensUM.kt b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/entity/ManageTokensUM.kt new file mode 100644 index 0000000000..3bd1757c82 --- /dev/null +++ b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/entity/ManageTokensUM.kt @@ -0,0 +1,10 @@ +package com.tangem.features.managetokens.entity + +import androidx.compose.runtime.Immutable +import kotlinx.collections.immutable.ImmutableList + +@Immutable +internal data class ManageTokensUM( + val popBack: () -> Unit, + val items: ImmutableList, +) \ No newline at end of file diff --git a/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/ui/ManageTokensScreen.kt b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/ui/ManageTokensScreen.kt index 8a4be14f9c..7ceeac64f8 100644 --- a/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/ui/ManageTokensScreen.kt +++ b/features/manage-tokens/impl/src/main/kotlin/com/tangem/features/managetokens/ui/ManageTokensScreen.kt @@ -2,14 +2,33 @@ package com.tangem.features.managetokens.ui import android.content.res.Configuration import androidx.activity.compose.BackHandler +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.rotate +import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview +import com.tangem.core.ui.components.buttons.SecondarySmallButton +import com.tangem.core.ui.components.buttons.SmallButtonConfig +import com.tangem.core.ui.components.rows.ChainRow +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.res.TangemTheme import com.tangem.core.ui.res.TangemThemePreview -import com.tangem.feature.managetokens.component.preview.PreviewManageTokensComponent -import com.tangem.feature.managetokens.entity.ManageTokensUM +import com.tangem.features.managetokens.component.preview.PreviewManageTokensComponent +import com.tangem.features.managetokens.entity.CurrencyItemUM +import com.tangem.features.managetokens.entity.ManageTokensUM +import com.tangem.features.managetokens.impl.R +import kotlinx.collections.immutable.ImmutableList @Composable internal fun ManageTokensScreen(state: ManageTokensUM, modifier: Modifier = Modifier) { @@ -17,12 +36,80 @@ internal fun ManageTokensScreen(state: ManageTokensUM, modifier: Modifier = Modi Scaffold( modifier = modifier, - content = { - TODO("Not yet implemented") + containerColor = TangemTheme.colors.background.primary, + content = { innerPadding -> + Currencies( + modifier = Modifier + .padding(innerPadding) + .fillMaxSize(), + items = state.items, + ) }, ) } +private const val CHEVRON_ROTATION_EXPANDED = 180f +private const val CHEVRON_ROTATION_COLLAPSED = 0f + +@Composable +private fun Currencies(items: ImmutableList, modifier: Modifier = Modifier) { + LazyColumn( + modifier = modifier, + ) { + items( + items = items, + key = CurrencyItemUM::id, + ) { item -> + when (item) { + is CurrencyItemUM.Basic -> { + ChainRow( + modifier = Modifier.fillMaxWidth(), + model = item.model, + action = { + IconButton( + modifier = Modifier.size(TangemTheme.dimens.size32), + onClick = item.onExpandClick, + ) { + val rotation by animateFloatAsState( + targetValue = if (item.isExpanded) { + CHEVRON_ROTATION_EXPANDED + } else { + CHEVRON_ROTATION_COLLAPSED + }, + label = "chevron_rotation", + ) + + Icon( + modifier = Modifier + .rotate(rotation) + .size(TangemTheme.dimens.size24), + painter = painterResource(id = R.drawable.ic_chevron_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + } + }, + ) + } + is CurrencyItemUM.Custom -> { + ChainRow( + modifier = Modifier.fillMaxWidth(), + model = item.model, + action = { + SecondarySmallButton( + config = SmallButtonConfig( + text = resourceReference(R.string.manage_tokens_remove), + onClick = item.onRemoveClick, + ), + ) + }, + ) + } + } + } + } +} + // region Preview @Preview(showBackground = true, widthDp = 360, heightDp = 800) @Preview(showBackground = true, widthDp = 360, heightDp = 800, uiMode = Configuration.UI_MODE_NIGHT_YES)