Updated on 2026-08-14
This commit is contained in:
Tangem
parent
d40822e994
commit
659de4ee7f
5 changed files with 225 additions and 0 deletions
|
|
@ -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,
|
||||
)
|
||||
|
|
@ -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>,
|
||||
)
|
||||
|
|
@ -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 = { },
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
@ -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 = { },
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue