Add fallback icon urls for coins

horizontalsystems · May 30, 2024 · 4ce2320 · 4ce2320
1 parent 39505e7
commit 4ce2320
Show file tree

Hide file tree

Showing 36 changed files with 174 additions and 146 deletions.
diff --git a/UnstoppableWallet/UnstoppableWallet.xcodeproj/project.pbxproj b/UnstoppableWallet/UnstoppableWallet.xcodeproj/project.pbxproj
@@ -2908,6 +2908,8 @@
 		D09200C6293F21720091981A /* RestoreNonStandardViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09200C0293F21710091981A /* RestoreNonStandardViewModel.swift */; };
 		D09200C8293F21720091981A /* RestoreNonStandardModule.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09200C1293F21720091981A /* RestoreNonStandardModule.swift */; };
 		D09200C9293F21720091981A /* RestoreNonStandardModule.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09200C1293F21720091981A /* RestoreNonStandardModule.swift */; };
+		D09C5C632C076C0E00E6909E /* CoinIconView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09C5C622C076C0E00E6909E /* CoinIconView.swift */; };
+		D09C5C642C076C0E00E6909E /* CoinIconView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09C5C622C076C0E00E6909E /* CoinIconView.swift */; };
 		D09D768C2A2E066E004311E6 /* SendTronConfirmationModule.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09D768B2A2E066E004311E6 /* SendTronConfirmationModule.swift */; };
 		D09D768E2A2E06D6004311E6 /* SendTronConfirmationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09D768D2A2E06D6004311E6 /* SendTronConfirmationViewController.swift */; };
 		D09D768F2A2E06D6004311E6 /* SendTronConfirmationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D09D768D2A2E06D6004311E6 /* SendTronConfirmationViewController.swift */; };
@@ -2920,6 +2922,8 @@
 		D0A6902C2C00ACF600E59296 /* CautionDataSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A6902A2C00ACF600E59296 /* CautionDataSource.swift */; };
 		D0A6902E2C04969300E59296 /* CautionDataSourceViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A6902D2C04969300E59296 /* CautionDataSourceViewModel.swift */; };
 		D0A6902F2C04969300E59296 /* CautionDataSourceViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A6902D2C04969300E59296 /* CautionDataSourceViewModel.swift */; };
+		D0A690342C05D01C00E59296 /* UIImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A690332C05D01C00E59296 /* UIImageView.swift */; };
+		D0A690352C05D01C00E59296 /* UIImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A690332C05D01C00E59296 /* UIImageView.swift */; };
 		D0A980A92B5E3C0900127AF4 /* StepChangeButtonsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A980A82B5E3C0900127AF4 /* StepChangeButtonsView.swift */; };
 		D0A980AA2B5E3C0900127AF4 /* StepChangeButtonsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A980A82B5E3C0900127AF4 /* StepChangeButtonsView.swift */; };
 		D0A980AF2B60E73F00127AF4 /* LegacyFeeSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D0A980AE2B60E73F00127AF4 /* LegacyFeeSettingsView.swift */; };
@@ -4893,12 +4897,14 @@
 		D09200BF293F21700091981A /* RestoreNonStandardViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RestoreNonStandardViewController.swift; sourceTree = "<group>"; };
 		D09200C0293F21710091981A /* RestoreNonStandardViewModel.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RestoreNonStandardViewModel.swift; sourceTree = "<group>"; };
 		D09200C1293F21720091981A /* RestoreNonStandardModule.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RestoreNonStandardModule.swift; sourceTree = "<group>"; };
+		D09C5C622C076C0E00E6909E /* CoinIconView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CoinIconView.swift; sourceTree = "<group>"; };
 		D09D768B2A2E066E004311E6 /* SendTronConfirmationModule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SendTronConfirmationModule.swift; sourceTree = "<group>"; };
 		D09D768D2A2E06D6004311E6 /* SendTronConfirmationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SendTronConfirmationViewController.swift; sourceTree = "<group>"; };
 		D09D76902A2E0753004311E6 /* SendTronConfirmationViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SendTronConfirmationViewModel.swift; sourceTree = "<group>"; };
 		D09D76932A2E07BD004311E6 /* SendTronConfirmationService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SendTronConfirmationService.swift; sourceTree = "<group>"; };
 		D0A6902A2C00ACF600E59296 /* CautionDataSource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CautionDataSource.swift; sourceTree = "<group>"; };
 		D0A6902D2C04969300E59296 /* CautionDataSourceViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CautionDataSourceViewModel.swift; sourceTree = "<group>"; };
+		D0A690332C05D01C00E59296 /* UIImageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UIImageView.swift; sourceTree = "<group>"; };
 		D0A980A82B5E3C0900127AF4 /* StepChangeButtonsView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = StepChangeButtonsView.swift; sourceTree = "<group>"; };
 		D0A980AE2B60E73F00127AF4 /* LegacyFeeSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LegacyFeeSettingsView.swift; sourceTree = "<group>"; };
 		D0C2260F2A66A3BC007101F7 /* PersonalSupportModule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PersonalSupportModule.swift; sourceTree = "<group>"; };
@@ -5494,6 +5500,7 @@
 				ABC9AF26FDCB363793BF66E1 /* Integer.swift */,
 				ABC9A776346AF62265896CA1 /* CellElement.swift */,
 				11B353356496AA219686B993 /* UIWindow.swift */,
+				D0A690332C05D01C00E59296 /* UIImageView.swift */,
 			);
 			path = Extensions;
 			sourceTree = "<group>";
@@ -5728,6 +5735,7 @@
 				D3B73E2F2BDFC5580067429D /* PriceRow.swift */,
 				D3833B042BF4AFB800ACECFB /* MarqueeView.swift */,
 				6BB14F742C01D04200E879B2 /* CheckBoxUiView.swift */,
+				D09C5C622C076C0E00E6909E /* CoinIconView.swift */,
 			);
 			path = SwiftUI;
 			sourceTree = "<group>";
@@ -10717,6 +10725,7 @@
 				11B35AB989198F423D880695 /* PoolGroupFactory.swift in Sources */,
 				D3F9B0352BE3B3A7009FFA95 /* EvmDecorator.swift in Sources */,
 				D09D76952A2E07BD004311E6 /* SendTronConfirmationService.swift in Sources */,
+				D09C5C642C076C0E00E6909E /* CoinIconView.swift in Sources */,
 				11B358A1409FB729B1C3013E /* PoolSource.swift in Sources */,
 				ABC9A52E08E5C57665C07DBC /* PseudoAccessoryView.swift in Sources */,
 				ABC9AC10D815702B812CFFB7 /* NftAssetOverviewService.swift in Sources */,
@@ -10794,6 +10803,7 @@
 				ABC9A04655D81FE5198B786F /* SendEip1155ViewModel.swift in Sources */,
 				ABC9A0B58626A1E0C4248162 /* SendEip1155Service.swift in Sources */,
 				ABC9A140E5EF9D0AD4234689 /* SendEip1155ViewController.swift in Sources */,
+				D0A690352C05D01C00E59296 /* UIImageView.swift in Sources */,
 				ABC9AF1729BA19223BB39E06 /* SendEip721ViewModel.swift in Sources */,
 				ABC9AFA3570AE29F26623FBF /* SendEip721ViewController.swift in Sources */,
 				ABC9A95E667DD7BD26602D8E /* SendEip721Service.swift in Sources */,
@@ -12295,6 +12305,7 @@
 				11B3515A1106B2AE8509263E /* Pool.swift in Sources */,
 				D3F9B0342BE3B3A7009FFA95 /* EvmDecorator.swift in Sources */,
 				11B3541BC8A0EF1066EBA464 /* NonSpamPoolProvider.swift in Sources */,
+				D09C5C632C076C0E00E6909E /* CoinIconView.swift in Sources */,
 				11B3594DD9B54E11190B4CD5 /* PoolProvider.swift in Sources */,
 				11B351E4BD2180A5D6D59F23 /* PoolGroup.swift in Sources */,
 				11B35AC389ACC3E4096EC645 /* PoolGroupFactory.swift in Sources */,
@@ -12372,6 +12383,7 @@
 				11B355028142F82D805752AF /* NftDoubleCell.swift in Sources */,
 				11B35FF1D956D812F815FA86 /* NftImageView.swift in Sources */,
 				11B35DF3813AEB74E254A05A /* NftAssetView.swift in Sources */,
+				D0A690342C05D01C00E59296 /* UIImageView.swift in Sources */,
 				ABC9A13DB3ADB580D59F66E4 /* SendEip1155ViewModel.swift in Sources */,
 				ABC9A4CD35CF43C88EC13909 /* SendEip1155Service.swift in Sources */,
 				ABC9ACA04EBC7AF903A01FE3 /* SendEip1155ViewController.swift in Sources */,
@@ -13929,7 +13941,7 @@
 			repositoryURL = "https://github.com/horizontalsystems/MarketKit.Swift";
 			requirement = {
 				kind = exactVersion;
-				version = 3.0.6;
+				version = 3.0.8;
 			};
 		};
 		D3604E7D28F03C1D0066C366 /* XCRemoteSwiftPackageReference "Chart" */ = {

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Cex/CexWithdraw/CexWithdrawViewController.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Cex/CexWithdraw/CexWithdrawViewController.swift
@@ -56,7 +56,7 @@ class CexWithdrawViewController: ThemeViewController, ICexWithdrawNetworkSelectD
         iconImageView.snp.makeConstraints { make in
             make.size.equalTo(CGFloat.iconSize24)
         }
-        iconImageView.setImage(withUrlString: viewModel.coinImageUrl, placeholder: nil)
+        iconImageView.setImage(coin: viewModel.coin)
 
         view.addSubview(tableView)
         tableView.snp.makeConstraints { maker in

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Cex/CexWithdraw/CexWithdrawViewModel.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Cex/CexWithdraw/CexWithdrawViewModel.swift
@@ -2,6 +2,7 @@ import BigInt
 import Combine
 import Foundation
 import HsExtensions
+import MarketKit
 import RxCocoa
 import RxSwift
 
@@ -65,8 +66,8 @@ extension CexWithdrawViewModel {
         service.cexAsset.coinCode
     }
 
-    var coinImageUrl: String {
-        service.cexAsset.coin?.imageUrl ?? ""
+    var coin: Coin? {
+        service.cexAsset.coin
     }
 
     var selectedNetworkIndex: Int? {

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewView.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewView.swift
@@ -27,12 +27,7 @@ struct CoinOverviewView: View {
                     ScrollView {
                         VStack(spacing: 0) {
                             HStack(spacing: .margin16) {
-                                KFImage.url(URL(string: coin.imageUrl))
-                                    .resizable()
-                                    .placeholder {
-                                        Circle().fill(Color.themeSteel20)
-                                    }
-                                    .frame(width: .iconSize32, height: .iconSize32)
+                                CoinIconView(coin: coin)
 
                                 Text(coin.name).themeBody()
 

diff --git a/...ppableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewViewController.swift b/...ppableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewViewController.swift
@@ -225,8 +225,8 @@ extension CoinOverviewViewController {
             rows: [
                 tableView.universalRow56(
                     id: "coin-info",
-                    image: .url(viewItem.imageUrl, placeholder: viewItem.imagePlaceholderName),
-                    title: .body(viewItem.name, color: .themeGray),
+                    image: .url(viewItem.coin),
+                    title: .body(viewItem.coin.name, color: .themeGray),
                     value: .subhead1(viewItem.marketCapRank, color: .themeGray),
                     backgroundStyle: .transparent,
                     isFirst: true,

diff --git a/...pableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewViewItemFactory.swift b/...pableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewViewItemFactory.swift
@@ -211,10 +211,8 @@ extension CoinOverviewViewItemFactory {
 
         return CoinOverviewViewModel.ViewItem(
             coinViewItem: CoinOverviewViewModel.CoinViewItem(
-                name: coin.name,
                 marketCapRank: marketCapRank,
-                imageUrl: coin.imageUrl,
-                imagePlaceholderName: "placeholder_circle_32"
+                coin: coin
             ),
 
             marketCapRank: marketCapRank,

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewViewModel.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Coin/CoinOverview/CoinOverviewViewModel.swift
@@ -103,10 +103,8 @@ extension CoinOverviewViewModel {
 
 extension CoinOverviewViewModel {
     struct CoinViewItem {
-        let name: String
         let marketCapRank: String?
-        let imageUrl: String
-        let imagePlaceholderName: String
+        let coin: Coin
     }
 
     struct ViewItem {

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/ManageWallets/ManageWalletsViewController.swift b/UnstoppableWallet/UnstoppableWallet/Modules/ManageWallets/ManageWalletsViewController.swift
@@ -1,5 +1,6 @@
 import Combine
 import ComponentKit
+import MarketKit
 import RxCocoa
 import RxSwift
 import SectionsTableView
@@ -133,9 +134,9 @@ class ManageWalletsViewController: ThemeSearchViewController {
 
     private func showBottomSheet(viewItem: ManageWalletsViewModel.CoinViewItem, items: [BottomSheetModule.Item]) {
         let viewController = BottomSheetModule.viewController(
-            image: .remote(url: viewItem.coinImageUrl, placeholder: viewItem.coinPlaceholderImageName),
-            title: viewItem.coinCode,
-            subtitle: viewItem.coinName,
+            image: .remote(url: viewItem.coin.imageUrl, placeholder: viewItem.coinPlaceholderImageName),
+            title: viewItem.coin.code,
+            subtitle: viewItem.coin.name,
             items: items
         )
 
@@ -163,14 +164,11 @@ extension ManageWalletsViewController: SectionsDataSource {
     private func rootElement(index: Int, viewItem: ManageWalletsViewModel.ViewItem, forceToggleOn: Bool? = nil) -> CellBuilderNew.CellElement {
         .hStack([
             .image32 { component in
-                component.setImage(
-                    urlString: viewItem.imageUrl,
-                    placeholder: viewItem.placeholderImageName.flatMap { UIImage(named: $0) }
-                )
+                component.imageView.setImage(coin: viewItem.coin, placeholder: viewItem.placeholderImageName)
             },
             .vStackCentered([
                 .hStack([
-                    .textElement(text: .body(viewItem.title), parameters: .highHugging),
+                    .textElement(text: .body(viewItem.coin.code), parameters: .highHugging),
                     .margin8,
                     .badge { component in
                         component.isHidden = viewItem.badge == nil
@@ -181,7 +179,7 @@ extension ManageWalletsViewController: SectionsDataSource {
                     .text { _ in },
                 ]),
                 .margin(1),
-                .textElement(text: .subhead2(viewItem.subtitle)),
+                .textElement(text: .subhead2(viewItem.coin.name)),
             ]),
             .secondaryCircleButton { [weak self] component in
                 component.isHidden = !viewItem.hasInfo

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/ManageWallets/ManageWalletsViewModel.swift b/UnstoppableWallet/UnstoppableWallet/Modules/ManageWallets/ManageWalletsViewModel.swift
@@ -29,10 +29,8 @@ class ManageWalletsViewModel {
 
         return ViewItem(
             uid: String(item.token.hashValue),
-            imageUrl: token.coin.imageUrl,
+            coin: token.coin,
             placeholderImageName: token.placeholderImageName,
-            title: token.coin.code,
-            subtitle: token.coin.name,
             badge: item.token.badge,
             enabled: item.enabled,
             hasInfo: item.hasInfo
@@ -88,10 +86,8 @@ extension ManageWalletsViewModel {
         }
 
         let coinViewItem = CoinViewItem(
-            coinImageUrl: infoItem.token.coin.imageUrl,
-            coinPlaceholderImageName: infoItem.token.placeholderImageName,
-            coinName: infoItem.token.coin.name,
-            coinCode: infoItem.token.coin.code
+            coin: infoItem.token.coin,
+            coinPlaceholderImageName: infoItem.token.placeholderImageName
         )
 
         switch infoItem.type {
@@ -119,20 +115,16 @@ extension ManageWalletsViewModel {
 extension ManageWalletsViewModel {
     struct ViewItem {
         let uid: String
-        let imageUrl: String
+        let coin: Coin
         let placeholderImageName: String?
-        let title: String
-        let subtitle: String
         let badge: String?
         let enabled: Bool
         let hasInfo: Bool
     }
 
     struct CoinViewItem {
-        let coinImageUrl: String
+        let coin: Coin
         let coinPlaceholderImageName: String
-        let coinName: String
-        let coinCode: String
     }
 
     struct InfoViewItem {

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Market/Coins/MarketCoinsView.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Market/Coins/MarketCoinsView.swift
@@ -114,8 +114,7 @@ struct MarketCoinsView: View {
                 presentedFullCoin = marketInfo.fullCoin
             }) {
                 itemContent(
-                    imageUrl: URL(string: coin.imageUrl),
-                    code: coin.code,
+                    coin: coin,
                     marketCap: marketInfo.marketCap,
                     price: marketInfo.price.flatMap { ValueFormatter.instance.formatFull(currency: viewModel.currency, value: $0) } ?? "n/a".localized,
                     rank: marketInfo.marketCapRank,
@@ -133,8 +132,7 @@ struct MarketCoinsView: View {
         ThemeList(Array(0 ... 10)) { index in
             ListRow {
                 itemContent(
-                    imageUrl: nil,
-                    code: "CODE",
+                    coin: nil,
                     marketCap: 123_456,
                     price: "$123.45",
                     rank: 12,
@@ -146,16 +144,12 @@ struct MarketCoinsView: View {
         .simultaneousGesture(DragGesture(minimumDistance: 0), including: .all)
     }
 
-    @ViewBuilder private func itemContent(imageUrl: URL?, code: String, marketCap: Decimal?, price: String, rank: Int?, diff: Decimal?) -> some View {
-        KFImage.url(imageUrl)
-            .resizable()
-            .placeholder { Circle().fill(Color.themeSteel20) }
-            .clipShape(Circle())
-            .frame(width: .iconSize32, height: .iconSize32)
+    @ViewBuilder private func itemContent(coin: Coin?, marketCap: Decimal?, price: String, rank: Int?, diff: Decimal?) -> some View {
+        CoinIconView(coin: coin)
 
         VStack(spacing: 1) {
             HStack(spacing: .margin8) {
-                Text(code).textBody()
+                Text(coin?.code ?? "CODE").textBody()
                 Spacer()
                 Text(price).textBody()
             }

diff --git a/UnstoppableWallet/UnstoppableWallet/Modules/Market/MarketSearchView.swift b/UnstoppableWallet/UnstoppableWallet/Modules/Market/MarketSearchView.swift
@@ -52,10 +52,7 @@ struct MarketSearchView: View {
             viewModel.handleOpen(coinUid: coin.uid)
             presentedFullCoin = fullCoin
         }) {
-            KFImage.url(URL(string: coin.imageUrl))
-                .resizable()
-                .placeholder { Circle().fill(Color.themeSteel20) }
-                .frame(width: .iconSize32, height: .iconSize32)
+            CoinIconView(coin: coin)
 
             VStack(spacing: 1) {
                 Text(coin.code).themeBody()

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(
-                    frontImageUrl: pair.baseCoinUid.flatMap { URL(string: Coin.imageUrl(uid: $0)) },
-                    backImageUrl: pair.targetCoinUid.flatMap { URL(string: Coin.imageUrl(uid: $0)) },
+                    frontCoin: pair.baseCoin,
+                    backCoin: 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(
-                    frontImageUrl: nil,
-                    backImageUrl: nil,
+                    frontCoin: nil,
+                    backCoin: nil,
                     base: "CODE",
                     target: "CODE",
                     volume: "$123.4 B",
@@ -89,7 +89,7 @@ struct MarketPairsView: View {
         .simultaneousGesture(DragGesture(minimumDistance: 0), including: .all)
     }
 
-    @ViewBuilder private func itemContent(frontImageUrl: URL?, backImageUrl: URL?, base: String, target: String, volume: String, marketName: String, rank: Int, price: String) -> some View {
+    @ViewBuilder private func itemContent(frontCoin: Coin?, backCoin: Coin?, base: String, target: String, volume: String, marketName: String, rank: Int, price: String) -> some View {
         ZStack(alignment: .leading) {
             HStack {
                 Spacer()
@@ -98,11 +98,7 @@ struct MarketPairsView: View {
                         .fill(Color.themeTyler)
                         .frame(width: .iconSize32, height: .iconSize32)
 
-                    KFImage.url(backImageUrl)
-                        .resizable()
-                        .placeholder { Circle().fill(Color.themeSteel20) }
-                        .clipShape(Circle())
-                        .frame(width: .iconSize32, height: .iconSize32)
+                    CoinIconView(coin: backCoin)
                 }
             }
 
@@ -111,11 +107,7 @@ struct MarketPairsView: View {
                     .fill(Color.themeTyler)
                     .frame(width: .iconSize32, height: .iconSize32)
 
-                KFImage.url(frontImageUrl)
-                    .resizable()
-                    .placeholder { Circle().fill(Color.themeSteel20) }
-                    .clipShape(Circle())
-                    .frame(width: .iconSize32, height: .iconSize32)
+                CoinIconView(coin: frontCoin)
             }
         }
         .frame(width: 52)