Integrate icons into Market Etf module

horizontalsystems · May 30, 2024 · 66d3170 · 66d3170
1 parent 1e6dd8e
commit 66d3170
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/UnstoppableWallet/UnstoppableWallet/Extensions/Etf.swift b/UnstoppableWallet/UnstoppableWallet/Extensions/Etf.swift
@@ -1,5 +1,6 @@
 import Foundation
 import MarketKit
+import UIKit
 
 extension Etf: Hashable {
     public static func == (lhs: Etf, rhs: Etf) -> Bool {
@@ -12,6 +13,11 @@ extension Etf: Hashable {
 }
 
 extension Etf {
+    var imageUrl: String {
+        let scale = Int(UIScreen.main.scale)
+        return "https://cdn.blocksdecoded.com/etf-tresuries/\(ticker)@\(scale)x.png"
+    }
+
     func inflow(timePeriod: MarketEtfViewModel.TimePeriod) -> Decimal? {
         switch timePeriod {
         case let .period(timePeriod): return inflows[timePeriod]

diff --git a/UnstoppableWallet/UnstoppableWallet/Extensions/Misc.swift b/UnstoppableWallet/UnstoppableWallet/Extensions/Misc.swift
@@ -5,4 +5,9 @@ extension String {
         let scale = Int(UIScreen.main.scale)
         return "https://cdn.blocksdecoded.com/header-images/\(self)@\(scale)x.png"
     }
+
+    var fiatImageUrl: String {
+        let scale = Int(UIScreen.main.scale)
+        return "https://cdn.blocksdecoded.com/fiat-icons/\(self)@\(scale)x.png"
+    }
 }
diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Market/Etf/MarketEtfView.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Market/Etf/MarketEtfView.swift
@@ -70,7 +70,7 @@ struct MarketEtfView: View {
             }
             .padding(.vertical, .margin12)
 
-            KFImage.url(URL(string: "https://cdn.blocksdecoded.com/category-icons/[email protected]"))
+            KFImage.url(URL(string: "ETF_bitcoin".headerImageUrl))
                 .resizable()
                 .frame(width: 76, height: 108)
         }
@@ -138,7 +138,7 @@ struct MarketEtfView: View {
             ListForEach(etfs) { etf in
                 ListRow {
                     itemContent(
-                        imageUrl: nil,
+                        imageUrl: URL(string: etf.imageUrl),
                         ticker: etf.ticker,
                         name: etf.name,
                         totalAssets: etf.totalAssets,

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Market/Pairs/MarketPairsView.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Market/Pairs/MarketPairsView.swift
@@ -52,8 +52,8 @@ struct MarketPairsView: View {
                 }
             }) {
                 itemContent(
-                    frontCoin: pair.baseCoin,
-                    backCoin: pair.targetCoin,
+                    baseCoin: pair.baseCoin,
+                    targetCoin: pair.targetCoin,
                     base: pair.base,
                     target: pair.target,
                     volume: pair.volume.flatMap { ValueFormatter.instance.formatShort(currency: viewModel.currency, value: $0) } ?? "n/a".localized,
@@ -73,8 +73,8 @@ struct MarketPairsView: View {
         ThemeList(Array(0 ... 10)) { _ in
             ListRow {
                 itemContent(
-                    frontCoin: nil,
-                    backCoin: nil,
+                    baseCoin: nil,
+                    targetCoin: nil,
                     base: "CODE",
                     target: "CODE",
                     volume: "$123.4 B",
@@ -89,26 +89,14 @@ struct MarketPairsView: View {
         .simultaneousGesture(DragGesture(minimumDistance: 0), including: .all)
     }
 
-    @ViewBuilder private func itemContent(frontCoin: Coin?, backCoin: Coin?, base: String, target: String, volume: String, marketName: String, rank: Int, price: String) -> some View {
+    @ViewBuilder private func itemContent(baseCoin: Coin?, targetCoin: Coin?, base: String, target: String, volume: String, marketName: String, rank: Int, price: String) -> some View {
         ZStack(alignment: .leading) {
             HStack {
                 Spacer()
-                ZStack {
-                    Circle()
-                        .fill(Color.themeTyler)
-                        .frame(width: .iconSize32, height: .iconSize32)
-
-                    CoinIconView(coin: backCoin)
-                }
+                icon(coin: targetCoin, ticker: target)
             }
 
-            ZStack {
-                Circle()
-                    .fill(Color.themeTyler)
-                    .frame(width: .iconSize32, height: .iconSize32)
-
-                CoinIconView(coin: frontCoin)
-            }
+            icon(coin: baseCoin, ticker: base)
         }
         .frame(width: 52)
 
@@ -130,6 +118,24 @@ struct MarketPairsView: View {
         }
     }
 
+    @ViewBuilder private func icon(coin: Coin?, ticker: String) -> some View {
+        ZStack {
+            Circle()
+                .fill(Color.themeTyler)
+                .frame(width: .iconSize32, height: .iconSize32)
+
+            if let coin {
+                CoinIconView(coin: coin)
+            } else {
+                KFImage.url(URL(string: ticker.fiatImageUrl))
+                    .resizable()
+                    .placeholder { Circle().fill(Color.themeSteel20) }
+                    .clipShape(Circle())
+                    .frame(width: .iconSize32, height: .iconSize32)
+            }
+        }
+    }
+
     private func volumeSortIcon() -> Image {
         switch viewModel.volumeSortOrder {
         case .asc: return Image("arrow_medium_2_up_20")