Fix invalid header image when transferring NFT (#1813)

Features/Transfer/Sources/Scenes/RecipientScene.swift

@@ -26,9 +26,20 @@ public struct RecipientScene: View {
         @Bindable var model = model
         List {
             Section { } header: {
-                AssetPreviewView(model: model.assetModel)
-                    .frame(maxWidth: .infinity)
-                    .padding(.bottom, .small)
+                Group {
+                    switch model.type {
+                    case .asset(let asset):
+                        AssetPreviewView(model: AssetViewModel(asset: asset))
+                    case .nft(let nftAsset):
+                        NftPreviewView(
+                            assetImage: model.nftAssetImage(for: nftAsset),
+                            name: nftAsset.name,
+                            size: .image.semiLarge
+                        )
+                    }
+                }
+                .frame(maxWidth: .infinity)
+                .padding(.bottom, .small)
             }
             .cleanListRow()
 

Features/Transfer/Sources/ViewModels/RecipientSceneViewModel.swift

@@ -30,6 +30,7 @@ public final class RecipientSceneViewModel {
     private let walletService: WalletService
     private let onRecipientDataAction: RecipientDataAction
     private let formatter = ValueFormatter(style: .full)
+    private let assetImageFormatter: AssetImageFormatter
 
     public var isPresentingScanner: RecipientScene.Field?
     var addressInputModel: AddressInputViewModel
@@ -45,12 +46,14 @@ public final class RecipientSceneViewModel {
         walletService: WalletService,
         nameService: any NameServiceable,
         type: RecipientAssetType,
+        assetImageFormatter: AssetImageFormatter = .shared,
         onRecipientDataAction: RecipientDataAction,
         onTransferAction: TransferDataAction
     ) {
         self.wallet = wallet
         self.asset = asset
         self.walletService = walletService
+        self.assetImageFormatter = assetImageFormatter
         self.type = type
         self.onRecipientDataAction = onRecipientDataAction
         self.onTransferAction = onTransferAction
@@ -72,7 +75,14 @@ public final class RecipientSceneViewModel {
     let recipientField = Localized.Transfer.Recipient.addressField
     var memoField: String { Localized.Transfer.memo }
 
-    var assetModel: AssetViewModel { AssetViewModel(asset: asset) }
+    func nftAssetImage(for nftAsset: NFTAsset) -> AssetImage {
+        AssetImage(
+            type: "NFT",
+            imageURL: assetImageFormatter.getNFTUrl(for: nftAsset.id),
+            placeholder: .none,
+            chainPlaceholder: .none
+        )
+    }
 
     var actionButtonTitle: String { Localized.Common.continue }
     var actionButtonState: ButtonState {

Features/Transfer/Tests/RecipientSceneViewModelTests.swift

@@ -120,6 +120,12 @@ struct RecipientSceneViewModelTests {
             Issue.record("Expected recipient but got transferData")
         }
     }
+    @Test
+    func nftAssetImage() {
+        let nftAsset = NFTAsset.mock(id: "ethereum_0x123_1")
+        let image = RecipientSceneViewModel.mock().nftAssetImage(for: nftAsset)
+        #expect(image.imageURL?.absoluteString.contains("ethereum_0x123_1") == true)
+    }
 }
 
 // MARK: - Mocks

Packages/PrimitivesComponents/Sources/Components/TransactionHeaderView.swift

@@ -34,14 +34,7 @@ public struct TransactionHeaderView: View {
             case .swap(let from, let to):
                 SwapAmountView(from: from, to: to)
             case .nft(let name, let image):
-                VStack(spacing: .medium) {
-                    NftImageView(assetImage: image)
-                        .frame(width: .image.large, height: .image.large)
-                        .cornerRadius(.image.large/4)
-                    if let name {
-                        Text(name)
-                    }
-                }
+                NftPreviewView(assetImage: image, name: name, size: .image.large)
             case .asset(let image):
                 AssetImageView(assetImage: image, size: .image.large)
                     .padding(.bottom, .space12)

Packages/PrimitivesComponents/Sources/Views/NftPreviewView.swift

@@ -0,0 +1,30 @@
+// Copyright (c). Gem Wallet. All rights reserved.
+
+import SwiftUI
+import Components
+import Style
+
+public struct NftPreviewView: View {
+    private let assetImage: AssetImage
+    private let name: String?
+    private let size: CGFloat
+
+    public init(assetImage: AssetImage, name: String?, size: CGFloat) {
+        self.assetImage = assetImage
+        self.name = name
+        self.size = size
+    }
+
+    public var body: some View {
+        VStack(spacing: .medium) {
+            NftImageView(assetImage: assetImage)
+                .frame(width: size, height: size)
+                .cornerRadius(size / 4)
+            if let name {
+                Text(name)
+                    .textStyle(.headline)
+                    .lineLimit(1)
+            }
+        }
+    }
+}