Implement updated Top pairs tab in Market

app/src/main/java/io/horizontalsystems/bankwallet/core/Extensions.kt

@@ -35,6 +35,9 @@ val <T> Optional<T>.orNull: T?
 val Platform.iconUrl: String
     get() = "https://cdn.blocksdecoded.com/blockchain-icons/32px/[email protected]"
 
+val String.coinIconUrl: String
+    get() = "https://cdn.blocksdecoded.com/coin-icons/32px/[email protected]"
+
 val CoinCategory.imageUrl: String
     get() = "https://cdn.blocksdecoded.com/category-icons/[email protected]"
 

app/src/main/java/io/horizontalsystems/bankwallet/modules/market/MarketScreen.kt

@@ -34,6 +34,7 @@ import io.horizontalsystems.bankwallet.modules.market.MarketModule.Tab
 import io.horizontalsystems.bankwallet.modules.market.favorites.MarketFavoritesScreen
 import io.horizontalsystems.bankwallet.modules.market.posts.MarketPostsScreen
 import io.horizontalsystems.bankwallet.modules.market.topcoins.TopCoins
+import io.horizontalsystems.bankwallet.modules.market.toppairs.TopPairsScreen
 import io.horizontalsystems.bankwallet.modules.market.topplatforms.TopPlatforms
 import io.horizontalsystems.bankwallet.modules.metricchart.MetricsType
 import io.horizontalsystems.bankwallet.ui.compose.ComposeAppTheme
@@ -143,8 +144,7 @@ fun TabsSection(
                 TopPlatforms(navController)
                 stat(page = StatPage.MarketOverview, event = StatEvent.Open(StatPage.TopPlatforms))
             }
-            Tab.Pairs -> {
-            }
+            Tab.Pairs -> TopPairsScreen()
 
             Tab.Sectors -> {
             }

app/src/main/java/io/horizontalsystems/bankwallet/modules/market/overview/MarketOverviewModule.kt

@@ -103,9 +103,12 @@ data class TopPairViewItem(
     val title: String,
     val rank: String,
     val name: String,
+    val baseCoinUid: String?,
+    val targetCoinUid: String?,
     val iconUrl: String?,
     val tradeUrl: String?,
-    val volume: String,
+    val volume: BigDecimal,
+    val volumeInFiat: String,
     val price: String?
 ) {
     companion object {
@@ -123,10 +126,13 @@ data class TopPairViewItem(
             return TopPairViewItem(
                 title = "${topPair.base}/${topPair.target}",
                 name = topPair.marketName ?: "",
+                baseCoinUid = topPair.baseCoinUid,
+                targetCoinUid = topPair.targetCoinUid,
                 iconUrl = topPair.marketLogo,
                 rank = topPair.rank.toString(),
                 tradeUrl = topPair.tradeUrl,
-                volume = volumeStr,
+                volume = topPair.volume,
+                volumeInFiat = volumeStr,
                 price = priceStr,
             )
         }

app/src/main/java/io/horizontalsystems/bankwallet/modules/market/overview/MarketOverviewScreen.kt

@@ -108,7 +108,7 @@ fun MarketOverviewScreen(
                                     }
                                 }
                             ) {
-                                navController.slideFromBottom(R.id.topPairsFragment)
+                                //navController.slideFromBottom(R.id.topPairsFragment)
 
                                 stat(page = StatPage.MarketOverview, event = StatEvent.Open(StatPage.TopMarketPairs))
                             }

app/src/main/java/io/horizontalsystems/bankwallet/modules/market/overview/ui/TopPairsBoardView.kt

@@ -6,21 +6,16 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import io.horizontalsystems.bankwallet.R
-import io.horizontalsystems.bankwallet.modules.market.MarketDataValue
 import io.horizontalsystems.bankwallet.modules.market.overview.TopPairViewItem
+import io.horizontalsystems.bankwallet.modules.market.toppairs.TopPairItem
 import io.horizontalsystems.bankwallet.ui.compose.ComposeAppTheme
-import io.horizontalsystems.bankwallet.ui.compose.components.CoinImage
-import io.horizontalsystems.bankwallet.ui.compose.components.MarketCoinFirstRow
-import io.horizontalsystems.bankwallet.ui.compose.components.MarketCoinSecondRow
-import io.horizontalsystems.bankwallet.ui.compose.components.SectionItemBorderedRowUniversalClear
 
 @Composable
 fun TopPairsBoardView(
@@ -51,34 +46,3 @@ fun TopPairsBoardView(
     Spacer(modifier = Modifier.height(24.dp))
 }
 
-@Composable
-fun TopPairItem(
-    item: TopPairViewItem,
-    borderTop: Boolean = false,
-    borderBottom: Boolean = false,
-    onItemClick: (TopPairViewItem) -> Unit,
-) {
-    SectionItemBorderedRowUniversalClear(
-        borderTop = borderTop,
-        borderBottom = borderBottom,
-        onClick = { onItemClick(item) }
-    ) {
-        CoinImage(
-            iconUrl = item.iconUrl,
-            placeholder = R.drawable.ic_platform_placeholder_32,
-            modifier = Modifier
-                .padding(end = 16.dp)
-                .size(32.dp)
-                .clip(RoundedCornerShape(8.dp))
-        )
-        Column(modifier = Modifier.fillMaxWidth()) {
-            MarketCoinFirstRow(item.title, item.volume)
-            Spacer(modifier = Modifier.height(3.dp))
-            MarketCoinSecondRow(
-                subtitle = item.name,
-                marketDataValue = item.price?.let { MarketDataValue.Volume(it) },
-                label = item.rank
-            )
-        }
-    }
-}

app/src/main/java/io/horizontalsystems/bankwallet/modules/market/toppairs/TopPairsScreen.kt

@@ -0,0 +1,169 @@
+package io.horizontalsystems.bankwallet.modules.market.toppairs
+
+import androidx.compose.animation.Crossfade
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Scaffold
+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.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
+import io.horizontalsystems.bankwallet.R
+import io.horizontalsystems.bankwallet.core.coinIconUrl
+import io.horizontalsystems.bankwallet.core.stats.StatEvent
+import io.horizontalsystems.bankwallet.core.stats.StatPage
+import io.horizontalsystems.bankwallet.core.stats.stat
+import io.horizontalsystems.bankwallet.entities.ViewState
+import io.horizontalsystems.bankwallet.modules.coin.overview.ui.Loading
+import io.horizontalsystems.bankwallet.modules.market.MarketDataValue
+import io.horizontalsystems.bankwallet.modules.market.overview.TopPairViewItem
+import io.horizontalsystems.bankwallet.ui.compose.ComposeAppTheme
+import io.horizontalsystems.bankwallet.ui.compose.HSSwipeRefresh
+import io.horizontalsystems.bankwallet.ui.compose.components.ButtonSecondaryWithIcon
+import io.horizontalsystems.bankwallet.ui.compose.components.CoinImage
+import io.horizontalsystems.bankwallet.ui.compose.components.HSpacer
+import io.horizontalsystems.bankwallet.ui.compose.components.HeaderSorting
+import io.horizontalsystems.bankwallet.ui.compose.components.ListErrorView
+import io.horizontalsystems.bankwallet.ui.compose.components.MarketCoinFirstRow
+import io.horizontalsystems.bankwallet.ui.compose.components.MarketCoinSecondRow
+import io.horizontalsystems.bankwallet.ui.compose.components.SectionItemBorderedRowUniversalClear
+import io.horizontalsystems.bankwallet.ui.compose.components.VSpacer
+import io.horizontalsystems.bankwallet.ui.helpers.LinkHelper
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun TopPairsScreen() {
+    val viewModel = viewModel<TopPairsViewModel>(factory = TopPairsViewModel.Factory())
+    val uiState = viewModel.uiState
+    val context = LocalContext.current
+
+    Scaffold(
+        backgroundColor = ComposeAppTheme.colors.tyler,
+    ) {
+        Column(modifier = Modifier.padding(it)) {
+            HSSwipeRefresh(
+                refreshing = uiState.isRefreshing,
+                onRefresh = viewModel::refresh
+            ) {
+                Crossfade(uiState.viewState, label = "") { viewState ->
+                    when (viewState) {
+                        ViewState.Loading -> {
+                            Loading()
+                        }
+
+                        is ViewState.Error -> {
+                            ListErrorView(
+                                stringResource(R.string.SyncError),
+                                viewModel::onErrorClick
+                            )
+                        }
+
+                        ViewState.Success -> {
+                            LazyColumn(
+                                modifier = Modifier.fillMaxSize()
+                            ) {
+                                stickyHeader {
+                                    HeaderSorting(borderBottom = true) {
+                                        HSpacer(width = 16.dp)
+                                        ButtonSecondaryWithIcon(
+                                            modifier = Modifier.height(28.dp),
+                                            onClick = {
+                                                viewModel.toggleSorting()
+                                            },
+                                            title = stringResource(R.string.Market_Volume),
+                                            iconRight = painterResource(
+                                                if (uiState.sortDescending) R.drawable.ic_arrow_down_20 else R.drawable.ic_arrow_up_20
+                                            ),
+                                        )
+                                        HSpacer(width = 16.dp)
+                                    }
+                                }
+                                itemsIndexed(uiState.items) { i, item ->
+                                    TopPairItem(item, borderTop = i == 0, borderBottom = true) {
+                                        it.tradeUrl?.let {
+                                            LinkHelper.openLinkInAppBrowser(context, it)
+
+                                            stat(
+                                                page = StatPage.TopMarketPairs,
+                                                event = StatEvent.Open(StatPage.ExternalMarketPair)
+                                            )
+                                        }
+                                    }
+                                }
+                                item {
+                                    VSpacer(height = 32.dp)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun TopPairItem(
+    item: TopPairViewItem,
+    borderTop: Boolean = false,
+    borderBottom: Boolean = false,
+    onItemClick: (TopPairViewItem) -> Unit,
+) {
+    SectionItemBorderedRowUniversalClear(
+        borderTop = borderTop,
+        borderBottom = borderBottom,
+        onClick = { onItemClick(item) }
+    ) {
+        Box(
+            modifier = Modifier
+                .padding(end = 16.dp)
+                .width(54.dp)
+        ) {
+            CoinImage(
+                iconUrl = item.targetCoinUid?.coinIconUrl,
+                placeholder = R.drawable.ic_platform_placeholder_32,
+                modifier = Modifier
+                    .size(32.dp)
+                    .background(ComposeAppTheme.colors.tyler)
+                    .clip(CircleShape)
+                    .align(Alignment.TopEnd)
+            )
+            CoinImage(
+                iconUrl = item.baseCoinUid?.coinIconUrl,
+                placeholder = R.drawable.ic_platform_placeholder_32,
+                modifier = Modifier
+                    .size(32.dp)
+                    .clip(CircleShape)
+                    .background(ComposeAppTheme.colors.tyler)
+                    .align(Alignment.TopStart)
+            )
+        }
+
+        Column(modifier = Modifier.fillMaxWidth()) {
+            MarketCoinFirstRow(item.title, item.volumeInFiat)
+            Spacer(modifier = Modifier.height(3.dp))
+            MarketCoinSecondRow(
+                subtitle = item.name,
+                marketDataValue = item.price?.let { MarketDataValue.Volume(it) },
+                label = item.rank
+            )
+        }
+    }
+}