Collections updates (#1822)

* Improve NFT image placeholder (#1814)

 - Replace hardcoded Colors.grayLight with adaptive systemGray5 background
  - Handle nil image URL to avoid infinite loading spinner for NFTs without images (e.g. ENS domains)
  - Add NftImagePlaceholderView with proportional circle + photo icon that clearly communicates "no image"
  - Show NFT name on placeholder in detail view only
  - Extract placeholder into separate reusable component

* Add VerifiedBadgeView with white checkmark on blue seal

- Extract reusable VerifiedBadgeView component
- Use consistent white checkmark styling across grid and detail views

* Disable context menu to save to photos if ONLY placaholder image

Added isImageLoaded to track if image failed to download

* Clean up NFT module: remove unused imports, dead code, fix access modifiers

- Remove unused imports: Photos, ImageGalleryService, Foundation, Style, Localization
- Remove dead `description` property that shadows CustomStringConvertible
- Move private members to private extension: contractValue, contractExplorerUrl, enabledChainTypes
- Make enabledChainTypes static since it's constant across instances

* Update layout consitence for Collections & Collectible

* Extract magic numbers into Layout constants in NftImagePlaceholderView

* Update NftImagePlaceholderView.swift

Author: gemdev111

Features/NFT/Sources/Scenes/CollectibleScene.swift

@@ -1,13 +1,11 @@
 // Copyright (c). Gem Wallet. All rights reserved.
 
-import Foundation
 import Primitives
 import SwiftUI
 import Style
 import Components
 import PrimitivesComponents
 import Localization
-import ImageGalleryService
 import InfoSheet
 
 public struct CollectibleScene: View {
@@ -33,16 +31,15 @@ public struct CollectibleScene: View {
         }
         .environment(\.defaultMinListHeaderHeight, 0)
         .listSectionSpacing(.compact)
+        .contentMargins([.top], .small, for: .scrollContent)
         .navigationTitle(model.title)
         .toolbar {
             ToolbarItem(placement: .principal) {
-                HStack(spacing: Spacing.tiny) {
+                HStack(spacing: .tiny) {
                     Text(model.title)
                         .font(.headline)
                     if model.isVerified {
-                        Images.System.checkmarkSealFill
-                            .font(.footnote)
-                            .foregroundStyle(Colors.blue)
+                        VerifiedBadgeView()
                     }
                 }
             }
@@ -70,8 +67,11 @@ public struct CollectibleScene: View {
 extension CollectibleScene {
     private var headerSectionView: some View {
         Section {
-            NftImageView(assetImage: model.assetImage)
-                .aspectRatio(1, contentMode: .fill)
+            NftImageView(
+                assetImage: model.assetImage,
+                isImageLoaded: $model.isImageLoaded
+            )
+            .aspectRatio(1, contentMode: .fill)
         } header: {
             Spacer()
         } footer: {
@@ -83,18 +83,7 @@ extension CollectibleScene {
         .textCase(nil)
         .listRowSeparator(.hidden)
         .listRowInsets(EdgeInsets())
-        .contextMenu([
-            .custom(
-                title: Localized.Nft.saveToPhotos,
-                systemImage: SystemImage.gallery,
-                action: model.onSelectSaveToGallery
-            ),
-            .custom(
-                title: Localized.Nft.setAsAvatar,
-                systemImage: SystemImage.emoji,
-                action: model.onSelectSetAsAvatar
-            )
-        ])
+        .contextMenu(model.imageContextMenuItems)
     }
 
     private var statusSectionView: some View {

Features/NFT/Sources/Scenes/CollectionsScene.swift

@@ -23,7 +23,7 @@ public struct CollectionsScene<ViewModel: CollectionsViewable>: View {
                     LazyVGrid(columns: model.columns) {
                         collectionsView
                     }
-                    .padding(.horizontal, .medium)
+                    .padding(.horizontal, Spacing.medium + Spacing.tiny)
 
                     Spacer(minLength: .medium)
 
@@ -44,6 +44,7 @@ public struct CollectionsScene<ViewModel: CollectionsViewable>: View {
             }
         }
         .bindQuery(model.query)
+        .contentMargins(.top, .scene.top, for: .scrollContent)
         .overlay {
             if model.content.items.isEmpty {
                 EmptyContentView(model: model.emptyContentModel)

Features/NFT/Sources/Scenes/ReportSelectReasonScene.swift

@@ -3,7 +3,6 @@
 import SwiftUI
 import Components
 import Primitives
-import Localization
 
 struct ReportSelectReasonScene: View {
     private let model: ReportNftViewModel

Features/NFT/Sources/ViewModels/CollectibleViewModel.swift

@@ -8,7 +8,6 @@ import Localization
 import Components
 import Style
 import ImageGalleryService
-import Photos
 import AvatarService
 import Formatters
 import ExplorerService
@@ -31,6 +30,7 @@ public final class CollectibleViewModel {
     var isPresentingSelectedAssetInput: Binding<SelectedAssetInput?>
     var isPresentingReportSheet = false
     var isPresentingInfoSheet: InfoSheetType?
+    var isImageLoaded = false
 
     public init(
         wallet: Wallet,
@@ -49,7 +49,22 @@ public final class CollectibleViewModel {
     }
 
     var title: String { assetData.asset.name }
-    var description: String? { assetData.asset.description }
+
+    var imageContextMenuItems: [ContextMenuItemType] {
+        guard isImageLoaded else { return [] }
+        return [
+            .custom(
+                title: Localized.Nft.saveToPhotos,
+                systemImage: SystemImage.gallery,
+                action: onSelectSaveToGallery
+            ),
+            .custom(
+                title: Localized.Nft.setAsAvatar,
+                systemImage: SystemImage.emoji,
+                action: onSelectSetAsAvatar
+            ),
+        ]
+    }
 
     var collectionField: ListItemField {
         ListItemField(title: Localized.Nft.collection, value: assetData.collection.name)
@@ -63,7 +78,6 @@ public final class CollectibleViewModel {
         ListItemField(title: Localized.Transfer.network, value: assetData.asset.chain.asset.name)
     }
 
-    var contractValue: String { assetData.collection.contractAddress }
     var contractField: ListItemField? {
         if contractValue.isEmpty || contractValue == assetData.asset.tokenId {
             return .none
@@ -72,10 +86,6 @@ public final class CollectibleViewModel {
         return ListItemField(title: Localized.Asset.contract, value: text)
     }
 
-    var contractExplorerUrl: BlockExplorerLink? {
-        explorerService.tokenUrl(chain: assetData.asset.chain, address: contractValue)
-    }
-
     var contractContextMenu: [ContextMenuItemType] {
         [
             .copy(value: contractValue, onCopy: { [weak self] value in
@@ -112,12 +122,10 @@ public final class CollectibleViewModel {
         )
     }
 
-    let enabledChainTypes: Set<ChainType> = [ChainType.ethereum]
-
     var isSendEnabled: Bool {
         wallet.canSign &&
         assetData.asset.chain.isNFTSupported &&
-        enabledChainTypes .contains(assetData.asset.chain.type)
+        Self.enabledChainTypes.contains(assetData.asset.chain.type)
     }
 
     var headerButtons: [HeaderButton] {
@@ -264,11 +272,17 @@ extension CollectibleViewModel {
 // MARK: - Private
 
 extension CollectibleViewModel {
+    private static let enabledChainTypes: Set<ChainType> = [.ethereum]
+    private var contractValue: String { assetData.collection.contractAddress }
+    private var contractExplorerUrl: BlockExplorerLink? {
+        explorerService.tokenUrl(chain: assetData.asset.chain, address: contractValue)
+    }
+
     private func openSettings() {
         guard let settingsURL = URL(string: UIApplication.openSettingsURLString) else { return }
         UIApplication.shared.open(settingsURL)
     }
-    
+
     private func setWalletAvatar() async throws {
         guard let url = assetData.asset.images.preview.url.asURL else { return }
         try await avatarService.save(url: url, for: wallet)

Features/NFT/Sources/ViewModels/CollectionsViewModel.swift

@@ -9,7 +9,6 @@ import Localization
 import SwiftUI
 import PrimitivesComponents
 import WalletService
-import Style
 
 @Observable
 @MainActor

Packages/Components/Sources/Grid/GridPosterView.swift

@@ -31,9 +31,7 @@ public struct GridPosterView: View {
                         .multilineTextAlignment(.leading)
 
                     if model.isVerified {
-                        Images.System.checkmarkSealFill
-                            .font(.callout)
-                            .foregroundStyle(Colors.blue)
+                        VerifiedBadgeView()
                     }
                 }
             }

Packages/Components/Sources/NftImagePlaceholderView.swift

@@ -0,0 +1,53 @@
+// Copyright (c). Gem Wallet. All rights reserved.
+
+import SwiftUI
+import Style
+
+public struct NftImagePlaceholderView: View {
+    private struct Layout {
+        static let nameVisibilityThreshold: CGFloat = 250
+        static let circleSizeRatioWithText: CGFloat = 0.3
+        static let circleSizeRatioDefault: CGFloat = 0.35
+        static let iconSizeRatio: CGFloat = 0.45
+    }
+
+    private let name: String?
+
+    public init(name: String? = nil) {
+        self.name = name
+    }
+
+    public var body: some View {
+        GeometryReader { geometry in
+            let size = min(geometry.size.width, geometry.size.height)
+            let showName = size > Layout.nameVisibilityThreshold
+            let circleSize = size * (showName ? Layout.circleSizeRatioWithText : Layout.circleSizeRatioDefault)
+            let iconSize = circleSize * Layout.iconSizeRatio
+            ZStack {
+                Color(.systemGray5)
+                VStack(spacing: Spacing.medium) {
+                    ZStack {
+                        Circle()
+                            .foregroundStyle(Color(.systemGray4))
+                        Images.System.photo
+                            .resizable()
+                            .aspectRatio(contentMode: .fit)
+                            .frame(width: iconSize, height: iconSize)
+                            .foregroundStyle(Colors.Empty.image)
+                    }
+                    .frame(size: circleSize)
+
+                    if showName, let name, !name.isEmpty {
+                        Text(name)
+                            .font(.callout.weight(.medium))
+                            .foregroundStyle(Color(.secondaryLabel))
+                            .lineLimit(2)
+                            .multilineTextAlignment(.center)
+                            .padding(.horizontal, Spacing.extraLarge)
+                    }
+                }
+            }
+            .frame(width: geometry.size.width, height: geometry.size.height)
+        }
+    }
+}

Packages/Components/Sources/NftImageView.swift

@@ -5,47 +5,45 @@ import SwiftUI
 import Style
 
 public struct NftImageView: View {
-    
-    let assetImage: AssetImage
-    
-    public init(assetImage: AssetImage) {
+
+    private let assetImage: AssetImage
+    @Binding private var isImageLoaded: Bool
+
+    public init(
+        assetImage: AssetImage,
+        isImageLoaded: Binding<Bool> = .constant(false)
+    ) {
         self.assetImage = assetImage
+        _isImageLoaded = isImageLoaded
     }
-    
+
     public var body: some View {
         CachedAsyncImage(url: assetImage.imageURL) { phase in
             switch phase {
             case .empty:
-                ZStack {
-                    Rectangle()
-                        .foregroundStyle(Colors.grayLight)
-                    if assetImage.placeholder != nil {
-                        AssetImageView(assetImage: assetImage, size: .image.large)
-                    } else {
-                        LoadingView()
+                if assetImage.imageURL != nil {
+                    ZStack {
+                        Color(.systemGray5)
+                        if assetImage.placeholder != nil {
+                            AssetImageView(
+                                assetImage: assetImage,
+                                size: .image.large
+                            )
+                        } else {
+                            LoadingView()
+                        }
                     }
+                } else {
+                    NftImagePlaceholderView(name: assetImage.type)
                 }
             case .success(let image):
                 image.resizable()
+                    .onAppear { isImageLoaded = true }
             case .failure:
-                errorView
+                NftImagePlaceholderView(name: assetImage.type)
             @unknown default:
-                errorView
-            }
-        }
-    }
-    
-    private var errorView: some View {
-        ZStack {
-            Rectangle()
-                .foregroundStyle(Colors.grayLight)
-            if let type = assetImage.type {
-                Text(type)
-                    .font(.body)
-                    .foregroundStyle(Colors.black.opacity(.strong))
-                    .padding(.small)
+                NftImagePlaceholderView(name: assetImage.type)
             }
         }
-        .frame(maxWidth: .infinity)
     }
 }

Packages/Components/Sources/VerifiedBadgeView.swift

@@ -0,0 +1,15 @@
+// Copyright (c). Gem Wallet. All rights reserved.
+
+import SwiftUI
+import Style
+
+public struct VerifiedBadgeView: View {
+
+    public init() {}
+
+    public var body: some View {
+        Images.System.checkmarkSealFill
+            .font(.callout)
+            .foregroundStyle(Colors.whiteSolid, Colors.blue)
+    }
+}