Fix #8063: Some V2 updates on under Portfolio/NFT

Sources/BraveWallet/AdjustableHeightAttributedTextView.swift

@@ -47,6 +47,8 @@ struct AttributedTextView: UIViewRepresentable {
       $0.delegate = context.coordinator
       $0.isScrollEnabled = false
       $0.textAlignment = .center
+      $0.textContainer.lineFragmentPadding = 0
+      $0.textContainerInset = .zero
     }
     return textView
   }

Sources/BraveWallet/Crypto/NFT/NFTView.swift

@@ -75,8 +75,12 @@ struct NFTView: View {
     if let image = nftViewModel.network.nativeTokenLogoImage, nftStore.filters.isShowingNFTNetworkLogo {
       Image(uiImage: image)
         .resizable()
-        .frame(width: 20, height: 20)
-        .padding(4)
+        .overlay {
+          Circle()
+            .stroke(lineWidth: 2)
+            .foregroundColor(Color(braveSystemName: .containerBackground))
+        }
+        .frame(width: 24, height: 24)
     }
   }
 
@@ -90,7 +94,6 @@ struct NFTView: View {
         noImageView(nftViewModel)
       }
     }
-    .overlay(nftLogo(nftViewModel), alignment: .bottomTrailing)
     .cornerRadius(4)
   }
 
@@ -122,18 +125,21 @@ struct NFTView: View {
           }
         }
         .pickerStyle(.inline)
+        .disabled(nftStore.isShowingNFTLoadingState)
       } label: {
         HStack(spacing: 12) {
           Text(nftStore.displayType.dropdownTitle)
             .font(.subheadline.weight(.semibold))
-          Text("\(nftStore.totalDisplayedNFTCount)")
-            .padding(.horizontal, 8)
-            .padding(.vertical, 4)
-            .font(.caption2.weight(.semibold))
-            .background(
-              Color(braveSystemName: .primary20)
-                .cornerRadius(4)
-            )
+          if !nftStore.isShowingNFTLoadingState {
+            Text("\(nftStore.totalDisplayedNFTCount)")
+              .padding(.horizontal, 8)
+              .padding(.vertical, 4)
+              .font(.caption2.weight(.semibold))
+              .background(
+                Color(braveSystemName: .primary20)
+                  .cornerRadius(4)
+              )
+          }
           Image(braveSystemName: "leo.carat.down")
             .font(.subheadline.weight(.semibold))
         }
@@ -146,7 +152,9 @@ struct NFTView: View {
       Spacer()
       addCustomAssetButton
         .padding(.trailing, 10)
+        .disabled(nftStore.isShowingNFTLoadingState)
       filtersButton
+        .disabled(nftStore.isShowingNFTLoadingState)
     }
     .padding(.horizontal)
     .frame(maxWidth: .infinity, alignment: .leading)
@@ -161,7 +169,7 @@ struct NFTView: View {
   private var nftDiscoveryDescriptionText: NSAttributedString? {
     let attributedString = NSMutableAttributedString(
       string: Strings.Wallet.nftDiscoveryCalloutDescription,
-      attributes: [.foregroundColor: UIColor.braveLabel, .font: UIFont.preferredFont(for: .subheadline, weight: .regular)]
+      attributes: [.foregroundColor: UIColor.secondaryBraveLabel, .font: UIFont.preferredFont(for: .subheadline, weight: .regular)]
     )
 
     attributedString.addAttributes([.underlineStyle: NSUnderlineStyle.single.rawValue], range: (attributedString.string as NSString).range(of: "SimpleHash")) // `SimpleHash` won't get translated
@@ -183,6 +191,10 @@ struct NFTView: View {
         }) {
           VStack(alignment: .leading, spacing: 4) {
             nftImage(nft)
+              .overlay(alignment: .bottomTrailing) {
+                nftLogo(nft)
+                  .offset(y: 12)
+              }
               .padding(.bottom, 8)
             Text(nft.token.nftTokenTitle)
               .font(.callout.weight(.medium))
@@ -273,7 +285,9 @@ struct NFTView: View {
   var body: some View {
     LazyVStack(spacing: 16) {
       nftHeaderView
-      if nftStore.isShowingNFTEmptyState {
+      if nftStore.isShowingNFTLoadingState {
+        SkeletonLoadingNFTView()
+      } else if nftStore.isShowingNFTEmptyState {
         emptyView
       } else {
         ForEach(nftStore.displayNFTGroups) { group in
@@ -334,10 +348,9 @@ struct NFTView: View {
         ),
         showCloseButton: false,
         content: {
-          VStack(spacing: 10) {
+          VStack(alignment: .leading, spacing: 10) {
             Text(Strings.Wallet.nftDiscoveryCalloutTitle)
-              .font(.headline.weight(.bold))
-              .multilineTextAlignment(.center)
+              .font(.body.weight(.medium))
             if let attrString = nftDiscoveryDescriptionText {
               AdjustableHeightAttributedTextView(
                 attributedString: attrString,
@@ -349,6 +362,7 @@ struct NFTView: View {
               )
             }
           }
+          .padding(.bottom, 24)
         }
       )
     )
@@ -382,6 +396,8 @@ struct NFTView: View {
               .font(.footnote)
               .foregroundStyle(Color(.secondaryBraveLabel))
           }
+          .multilineTextAlignment(.center)
+          .padding(.bottom, 24)
         })
     )
     .sheet(isPresented: $isShowingAddCustomNFT) {
@@ -427,6 +443,43 @@ struct NFTView: View {
   }
 }
 
+struct SkeletonLoadingNFTView: View {
+
+  private let nftGrids = [GridItem(.adaptive(minimum: 160), spacing: 16, alignment: .top)]
+
+  var body: some View {
+    LazyVGrid(columns: nftGrids) {
+      ForEach(0..<6) { _ in
+        VStack(alignment: .leading, spacing: 6) {
+          Color(braveSystemName: .containerHighlight)
+            .frame(height: 176)
+            .cornerRadius(4)
+            .redacted(reason: .placeholder)
+            .shimmer(true)
+            .overlay {
+              Image(braveSystemName: "leo.nft")
+                .foregroundColor(Color(braveSystemName: .containerBackground))
+                .font(.system(size: 60))
+            }
+          Group {
+            Color(braveSystemName: .containerHighlight)
+              .frame(width: 148, height: 12)
+            Color(braveSystemName: .containerHighlight)
+              .frame(width: 96, height: 12)
+          }
+          .clipShape(Capsule())
+          .redacted(reason: .placeholder)
+          .shimmer(true)
+        }
+        .padding(.horizontal, 8)
+        .padding(.top, 8)
+        .padding(.bottom, 24)
+        .accessibilityHidden(true)
+      }
+    }
+  }
+}
+
 #if DEBUG
 struct NFTView_Previews: PreviewProvider {
   static var previews: some View {

Sources/BraveWallet/Crypto/Stores/NFTStore.swift

@@ -133,6 +133,8 @@ public class NFTStore: ObservableObject, WalletObserverStore {
   @Published var displayType: NFTDisplayType = .visible
   /// View model for all NFT include visible, hidden and spams
   @Published private(set) var userNFTGroups: [NFTGroupViewModel] = []
+  /// showing shimmering loading state when the view finishes loading NFT information
+  @Published var isShowingNFTLoadingState: Bool = false
 
   private let keyringService: BraveWalletKeyringService
   private let rpcService: BraveWalletJsonRpcService
@@ -247,6 +249,7 @@ public class NFTStore: ObservableObject, WalletObserverStore {
   private var nftBalancesCache: [String: [String: Int]] = [:]
 
   func update() {
+    self.isShowingNFTLoadingState = true
     self.updateTask?.cancel()
     self.updateTask = Task { @MainActor in
       self.allAccounts = await keyringService.allAccounts().accounts
@@ -357,6 +360,8 @@ public class NFTStore: ObservableObject, WalletObserverStore {
         selectedAccounts: selectedAccounts,
         selectedNetworks: selectedNetworks
       )
+
+      isShowingNFTLoadingState = false
     }
   }
 
@@ -572,6 +577,7 @@ public class NFTStore: ObservableObject, WalletObserverStore {
     isSpam: Bool,
     isDeletedByUser: Bool
   ) {
+    isShowingNFTLoadingState = true
     assetManager.updateUserAsset(
       for: token,
       visible: visible,
@@ -600,6 +606,8 @@ public class NFTStore: ObservableObject, WalletObserverStore {
         selectedAccounts: selectedAccounts,
         selectedNetworks: selectedNetworks
       )
+
+      isShowingNFTLoadingState = false
     }
   }
 }

Sources/BraveWallet/WalletPromptView.swift

@@ -40,28 +40,45 @@ struct WalletPromptContentView<Content, Footer>: View where Content: View, Foote
       content()
       if let secondaryButton = self.secondaryButton {
         if buttonsAxis == .vertical {
-          VStack(spacing: 12) {
-            Button(primaryButton.title, action: { primaryButton.action(nil) })
-              .buttonStyle(BraveFilledButtonStyle(size: .large))
-            Button(secondaryButton.title, action: { secondaryButton.action(nil) })
-              .foregroundColor(Color(.braveLabel))
+          VStack(spacing: 24) {
+            Button { primaryButton.action(nil) } label: {
+              Text(primaryButton.title)
+                .font(.footnote.weight(.semibold))
+                .frame(maxWidth: .infinity)
+            }
+            .buttonStyle(BraveFilledButtonStyle(size: .large))
+            Button { secondaryButton.action(nil) } label: {
+              Text(secondaryButton.title)
+                .font(.footnote.weight(.semibold))
+                .foregroundColor(Color(.bravePrimary))
+            }
           }
         } else {
           HStack {
-            Button(secondaryButton.title, action: { secondaryButton.action(nil) })
-              .buttonStyle(BraveOutlineButtonStyle(size: .large))
-            Button(primaryButton.title, action: { primaryButton.action(nil) })
-              .buttonStyle(BraveFilledButtonStyle(size: .large))
+            Button { secondaryButton.action(nil) } label: {
+              Text(secondaryButton.title)
+                .font(.footnote.weight(.semibold))
+            }
+            .buttonStyle(BraveOutlineButtonStyle(size: .large))
+            Button { primaryButton.action(nil) } label: {
+              Text(primaryButton.title)
+                .font(.footnote.weight(.semibold))
+            }
+            .buttonStyle(BraveFilledButtonStyle(size: .large))
           }
         }
       } else {
-        Button(primaryButton.title, action: { primaryButton.action(nil) })
-          .buttonStyle(BraveFilledButtonStyle(size: .large))
+        Button { primaryButton.action(nil) } label: {
+          Text(primaryButton.title)
+            .font(.footnote.weight(.semibold))
+        }
+        .buttonStyle(BraveFilledButtonStyle(size: .large))
       }
       footer()
     }
     .frame(maxWidth: .infinity)
-    .padding(20)
+    .padding(.horizontal, 24)
+    .padding(.vertical, 32)
     .overlay(
       showCloseButton ?
       Button(action: { dismissAction?() }) {