Updated on 2026-08-14

This commit is contained in:
Tangem 2025-03-28 11:39:35 +05:00
parent d40822e994
commit 659de4ee7f
5 changed files with 225 additions and 0 deletions

View file

@ -514,6 +514,7 @@
<string name="nft_wallet_receive_nft">Tap here to receive first NFT</string>
<string name="nft_wallet_title">NFT collections</string>
<string name="nft_wallet_unable_to_load">Unable to load the data</string>
<string name="nft_receive_choose_network">Choose network</string>
<string name="onboarding_access_code_feature_1_description">Set up a single access code to protect all your devices.</string>
<string name="onboarding_access_code_feature_1_title">Protect</string>
<string name="onboarding_access_code_feature_2_description">Set an individual access code for each card or ring later.</string>

View file

@ -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,
)

View file

@ -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<NFTNetworkUM>,
)

View file

@ -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<NFTNetworkUM>(
collection = listOf(
NFTNetworkUM(
id = "item1",
name = "Nethers #0853",
iconRes = R.drawable.img_eth_22,
onItemClick = { },
),
),
)

View file

@ -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 = { },
),
),
),
)
}
}