diff --git a/core/res/src/main/res/values/strings.xml b/core/res/src/main/res/values/strings.xml index d9ab14d913..97946b962c 100644 --- a/core/res/src/main/res/values/strings.xml +++ b/core/res/src/main/res/values/strings.xml @@ -514,6 +514,7 @@ Tap here to receive first NFT NFT collections Unable to load the data + Choose network Set up a single access code to protect all your devices. Protect Set an individual access code for each card or ring later. diff --git a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/entity/NFTNetworkUM.kt b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/entity/NFTNetworkUM.kt new file mode 100644 index 0000000000..0ef73aa689 --- /dev/null +++ b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/entity/NFTNetworkUM.kt @@ -0,0 +1,10 @@ +package com.tangem.features.nft.receive.entity + +import androidx.annotation.DrawableRes + +internal data class NFTNetworkUM( + val id: String, + @DrawableRes val iconRes: Int, + val name: String, + val onItemClick: () -> Unit, +) \ No newline at end of file diff --git a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/entity/NFTReceiveNetworksUM.kt b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/entity/NFTReceiveNetworksUM.kt new file mode 100644 index 0000000000..91abfb75ef --- /dev/null +++ b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/entity/NFTReceiveNetworksUM.kt @@ -0,0 +1,9 @@ +package com.tangem.features.nft.receive.entity + +import com.tangem.core.ui.components.fields.entity.SearchBarUM +import kotlinx.collections.immutable.ImmutableList + +internal data class NFTReceiveNetworksUM( + val searchBar: SearchBarUM, + val networks: ImmutableList, +) \ No newline at end of file diff --git a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/ui/NFTNetwork.kt b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/ui/NFTNetwork.kt new file mode 100644 index 0000000000..9b60320b49 --- /dev/null +++ b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/ui/NFTNetwork.kt @@ -0,0 +1,73 @@ +package com.tangem.features.nft.receive.ui + +import android.content.res.Configuration +import androidx.compose.foundation.Image +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.features.nft.impl.R +import com.tangem.features.nft.receive.entity.NFTNetworkUM + +@Composable +internal fun NFTNetwork(state: NFTNetworkUM, modifier: Modifier = Modifier) { + Row( + modifier = modifier + .fillMaxWidth() + .clickable { state.onItemClick() } + .padding(TangemTheme.dimens.spacing12), + verticalAlignment = Alignment.CenterVertically, + ) { + Image( + modifier = Modifier + .size(TangemTheme.dimens.size24) + .clip(CircleShape), + painter = painterResource(state.iconRes), + contentDescription = null, + ) + Text( + modifier = Modifier.padding(horizontal = TangemTheme.dimens.spacing12), + text = state.name, + style = TangemTheme.typography.subtitle2, + color = TangemTheme.colors.text.primary1, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } +} + +@Preview(widthDp = 360, showBackground = true) +@Preview(widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun Preview_NFTNetwork(@PreviewParameter(NFTNetworkProvider::class) state: NFTNetworkUM) { + TangemThemePreview { + NFTNetwork( + state = state, + ) + } +} + +private class NFTNetworkProvider : CollectionPreviewParameterProvider( + collection = listOf( + NFTNetworkUM( + id = "item1", + name = "Nethers #0853", + iconRes = R.drawable.img_eth_22, + onItemClick = { }, + ), + ), +) \ No newline at end of file diff --git a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/ui/NFTReceiveNetworks.kt b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/ui/NFTReceiveNetworks.kt new file mode 100644 index 0000000000..e51fb169bb --- /dev/null +++ b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/receive/ui/NFTReceiveNetworks.kt @@ -0,0 +1,132 @@ +package com.tangem.features.nft.receive.ui + +import android.content.res.Configuration +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.tooling.preview.Preview +import com.tangem.core.ui.components.fields.SearchBar +import com.tangem.core.ui.components.fields.entity.SearchBarUM +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.extensions.stringResourceSafe +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.features.nft.impl.R +import com.tangem.features.nft.receive.entity.NFTNetworkUM +import com.tangem.features.nft.receive.entity.NFTReceiveNetworksUM +import kotlinx.collections.immutable.persistentListOf + +@Composable +internal fun NFTReceiveNetworks(state: NFTReceiveNetworksUM, modifier: Modifier = Modifier) { + val listState = rememberLazyListState() + + Column( + modifier = modifier + .fillMaxSize() + .background(TangemTheme.colors.background.secondary) + .padding( + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing16, + bottom = TangemTheme.dimens.spacing16, + ), + ) { + SearchBar( + state = state.searchBar, + // TODO fix colors after merging [REDACTED_TASK_KEY] + ) + + LazyColumn( + modifier = Modifier + .fillMaxWidth() + .padding( + vertical = TangemTheme.dimens.spacing16, + ) + .clip(TangemTheme.shapes.roundedCornersXMedium) + .background(TangemTheme.colors.background.primary), + state = listState, + ) { + item( + key = "title", + ) { + Title() + } + items( + items = state.networks, + key = NFTNetworkUM::id, + ) { network -> + NFTNetwork(state = network) + } + } + } +} + +@Composable +private fun Title(modifier: Modifier = Modifier) { + Text( + modifier = modifier + .padding( + start = TangemTheme.dimens.spacing12, + top = TangemTheme.dimens.spacing12, + end = TangemTheme.dimens.spacing12, + bottom = TangemTheme.dimens.spacing4, + ), + text = stringResourceSafe(R.string.nft_receive_choose_network), + style = TangemTheme.typography.subtitle2, + color = TangemTheme.colors.text.tertiary, + ) +} + +@Suppress("LongMethod") +@Preview(widthDp = 360, showBackground = true) +@Preview(widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun Preview_NFTReceiveNetworksUM() { + TangemThemePreview { + NFTReceiveNetworks( + state = NFTReceiveNetworksUM( + searchBar = SearchBarUM( + placeholderText = resourceReference(R.string.common_search), + query = "", + onQueryChange = { }, + isActive = false, + onActiveChange = { }, + ), + networks = persistentListOf( + NFTNetworkUM( + id = "item1", + name = "Ethereum", + iconRes = R.drawable.img_eth_22, + onItemClick = { }, + ), + NFTNetworkUM( + id = "item2", + name = "Polygon", + iconRes = R.drawable.img_polygon_22, + onItemClick = { }, + ), + NFTNetworkUM( + id = "item3", + name = "BSC", + iconRes = R.drawable.img_bsc_22, + onItemClick = { }, + ), + NFTNetworkUM( + id = "item4", + name = "Avalanche", + iconRes = R.drawable.img_avalanche_22, + onItemClick = { }, + ), + ), + ), + ) + } +} \ No newline at end of file