Fix #8709: Portfolio filters not opening intermittently (#8710)

* Move filters sheet modifier to outside of Portfolio `ScrollView` for Portfolio Assets list. Reduce nested `LazyVStack`s where not necessary. * Move filters sheet modifier to outside of Portfolio `ScrollView` for Portfolio NFTs list.
brave · Jan 26, 2024 · cfd9cfe · cfd9cfe
1 parent d3df30e
commit cfd9cfe
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 127 deletions.
diff --git a/Sources/BraveWallet/Crypto/NFT/NFTView.swift b/Sources/BraveWallet/Crypto/NFT/NFTView.swift
@@ -14,11 +14,10 @@ struct NFTView: View {
   @ObservedObject var networkStore: NetworkStore
   @ObservedObject var nftStore: NFTStore
 
-  @State private var isPresentingFiltersDisplaySettings: Bool = false
-  @State private var isPresentingEditUserAssets: Bool = false
+  @Binding var isPresentingFilters: Bool
+  @Binding var isPresentingAddCustomNFT: Bool
   @State private var selectedNFTViewModel: NFTAssetViewModel?
   @State private var isShowingNFTDiscoveryAlert: Bool = false
-  @State private var isShowingAddCustomNFT: Bool = false
   @State private var isNFTDiscoveryEnabled: Bool = false
   @State private var nftToBeRemoved: NFTAssetViewModel?
   @State private var groupToggleState: [NFTGroupViewModel.ID: Bool] = [:]
@@ -38,7 +37,7 @@ struct NFTView: View {
           .foregroundColor(Color(.secondaryLabel))
       }
       Button(Strings.Wallet.nftEmptyImportNFT) {
-        isShowingAddCustomNFT = true
+        isPresentingAddCustomNFT = true
       }
       .buttonStyle(BraveFilledButtonStyle(size: .normal))
       .hidden(isHidden: nftStore.displayType != .visible)
@@ -50,25 +49,6 @@ struct NFTView: View {
     .padding(.horizontal, 32)
   }
 
-  private var editUserAssetsButton: some View {
-    Button(action: { isPresentingEditUserAssets = true }) {
-      Text(Strings.Wallet.editVisibleAssetsButtonTitle)
-        .multilineTextAlignment(.center)
-        .font(.footnote.weight(.semibold))
-        .foregroundColor(Color(.braveBlurpleTint))
-        .frame(maxWidth: .infinity)
-    }
-    .sheet(isPresented: $isPresentingEditUserAssets) {
-      EditUserAssetsView(
-        networkStore: networkStore,
-        keyringStore: keyringStore,
-        userAssetsStore: nftStore.userAssetsStore
-      ) {
-        cryptoStore.updateAssets()
-      }
-    }
-  }
-
   private let nftGrids = [GridItem(.adaptive(minimum: 120), spacing: 16, alignment: .top)]
 
   @ViewBuilder private func nftLogo(_ nftViewModel: NFTAssetViewModel) -> some View {
@@ -99,7 +79,7 @@ struct NFTView: View {
 
   private var filtersButton: some View {
     WalletIconButton(braveSystemName: "leo.filter.settings", action: {
-      isPresentingFiltersDisplaySettings = true
+      isPresentingFilters = true
     })
   }
 
@@ -155,7 +135,7 @@ struct NFTView: View {
 
   private var addCustomAssetButton: some View {
     WalletIconButton(braveSystemName: "leo.plus.add") {
-      isShowingAddCustomNFT = true
+      isPresentingAddCustomNFT = true
     }
   }
 
@@ -405,38 +385,6 @@ struct NFTView: View {
           .padding(.bottom, 24)
         })
     )
-    .sheet(isPresented: $isShowingAddCustomNFT) {
-      AddCustomAssetView(
-        networkStore: networkStore,
-        networkSelectionStore: networkStore.openNetworkSelectionStore(mode: .formSelection),
-        keyringStore: keyringStore,
-        userAssetStore: nftStore.userAssetsStore,
-        supportedTokenTypes: [.nft]
-      ) {
-        cryptoStore.updateAssets()
-      }
-    }
-    .sheet(isPresented: $isPresentingFiltersDisplaySettings) {
-      FiltersDisplaySettingsView(
-        filters: nftStore.filters,
-        isNFTFilters: true,
-        networkStore: networkStore,
-        save: { filters in
-          nftStore.saveFilters(filters)
-        }
-      )
-      .osAvailabilityModifiers({ view in
-        if #available(iOS 16, *) {
-          view
-            .presentationDetents([
-              .fraction(0.6),
-              .large
-            ])
-        } else {
-          view
-        }
-      })
-    }
     .onChange(of: keyringStore.isWalletLocked) { isLocked in
       guard isLocked else { return }
       if isShowingNFTDiscoveryAlert {
@@ -493,7 +441,9 @@ struct NFTView_Previews: PreviewProvider {
       cryptoStore: .previewStore,
       keyringStore: .previewStore,
       networkStore: .previewStore,
-      nftStore: CryptoStore.previewStore.nftStore
+      nftStore: CryptoStore.previewStore.nftStore,
+      isPresentingFilters: .constant(false),
+      isPresentingAddCustomNFT: .constant(false)
     )
   }
 }

diff --git a/Sources/BraveWallet/Crypto/Portfolio/PortfolioAssetsView.swift b/Sources/BraveWallet/Crypto/Portfolio/PortfolioAssetsView.swift
@@ -15,14 +15,14 @@ struct PortfolioAssetsView: View {
   @ObservedObject var networkStore: NetworkStore
   @ObservedObject var portfolioStore: PortfolioStore
 
-  @State private var isPresentingEditUserAssets: Bool = false
-  @State private var isPresentingFiltersDisplaySettings: Bool = false
+  @Binding var isPresentingEditUserAssets: Bool
+  @Binding var isPresentingFilters: Bool
   @State private var selectedToken: BraveWallet.BlockchainToken?
   @State private var groupToggleState: [AssetGroupViewModel.ID: Bool] = [:]
   @ObservedObject private var isShowingBalances = Preferences.Wallet.isShowingBalances
 
   var body: some View {
-    LazyVStack(spacing: 16) {
+    VStack(spacing: 16) {
       assetSectionsHeader
 
       if portfolioStore.isShowingAssetsLoadingState {
@@ -74,56 +74,18 @@ struct PortfolioAssetsView: View {
           .padding(.leading, 5)
       }
       Spacer()
-      editUserAssetsButton
-        .padding(.trailing, 10)
-      filtersButton
+      WalletIconButton(braveSystemName: "leo.list.settings", action: {
+        isPresentingEditUserAssets = true
+      })
+      .padding(.trailing, 10)
+      WalletIconButton(braveSystemName: "leo.filter.settings", action: {
+        isPresentingFilters = true
+      })
     }
     .frame(maxWidth: .infinity, alignment: .leading)
     .padding(.horizontal)
   }
 
-  private var editUserAssetsButton: some View {
-    WalletIconButton(braveSystemName: "leo.list.settings", action: {
-      isPresentingEditUserAssets = true
-    })
-    .sheet(isPresented: $isPresentingEditUserAssets) {
-      EditUserAssetsView(
-        networkStore: networkStore,
-        keyringStore: keyringStore,
-        userAssetsStore: portfolioStore.userAssetsStore
-      ) {
-        cryptoStore.updateAssets()
-      }
-    }
-  }
-
-  private var filtersButton: some View {
-    WalletIconButton(braveSystemName: "leo.filter.settings", action: {
-      isPresentingFiltersDisplaySettings = true
-    })
-    .sheet(isPresented: $isPresentingFiltersDisplaySettings) {
-      FiltersDisplaySettingsView(
-        filters: portfolioStore.filters,
-        isNFTFilters: false,
-        networkStore: networkStore,
-        save: { filters in
-          portfolioStore.saveFilters(filters)
-        }
-      )
-      .osAvailabilityModifiers({ view in
-        if #available(iOS 16, *) {
-          view
-            .presentationDetents([
-              .fraction(0.7),
-              .large
-            ])
-        } else {
-          view
-        }
-      })
-    }
-  }
-
   private var emptyAssetsState: some View {
     VStack(spacing: 10) {
       Image("portfolio-empty", bundle: .module)
@@ -174,23 +136,25 @@ struct PortfolioAssetsView: View {
         }
       ),
       content: {
-        ForEach(group.assets) { asset in
-          Button(action: {
-            selectedToken = asset.token
-          }) {
-            PortfolioAssetView(
-              image: AssetIconView(
-                token: asset.token,
-                network: asset.network,
-                shouldShowNetworkIcon: true
-              ),
-              title: asset.token.name,
-              symbol: asset.token.symbol,
-              networkName: asset.network.chainName,
-              amount: asset.fiatAmount(currencyFormatter: portfolioStore.currencyFormatter),
-              quantity: asset.quantity,
-              shouldHideBalance: true
-            )
+        LazyVStack(spacing: 8) {
+          ForEach(group.assets) { asset in
+            Button(action: {
+              selectedToken = asset.token
+            }) {
+              PortfolioAssetView(
+                image: AssetIconView(
+                  token: asset.token,
+                  network: asset.network,
+                  shouldShowNetworkIcon: true
+                ),
+                title: asset.token.name,
+                symbol: asset.token.symbol,
+                networkName: asset.network.chainName,
+                amount: asset.fiatAmount(currencyFormatter: portfolioStore.currencyFormatter),
+                quantity: asset.quantity,
+                shouldHideBalance: true
+              )
+            }
           }
         }
       },

diff --git a/Sources/BraveWallet/Crypto/Portfolio/PortfolioView.swift b/Sources/BraveWallet/Crypto/Portfolio/PortfolioView.swift
@@ -27,6 +27,11 @@ struct PortfolioView: View {
   @State private var selectedContent: PortfolioSegmentedControl.Item = .assets
   @ObservedObject private var isShowingNFTsTab = Preferences.Wallet.isShowingNFTsTab
 
+  @State private var isPresentingEditUserAssets: Bool = false
+  @State private var isPresentingAssetsFilters: Bool = false
+  @State private var isPresentingAddCustomNFT: Bool = false
+  @State private var isPresentingNFTsFilters: Bool = false
+
   var body: some View {
     ScrollView {
       VStack(spacing: 0) {
@@ -48,10 +53,76 @@ struct PortfolioView: View {
         Color(braveSystemName: .containerBackground) // bottom drawer scroll rubberband area
       }.edgesIgnoringSafeArea(.all)
     )
+    .background(Color.clear
+      .sheet(isPresented: $isPresentingEditUserAssets) {
+        EditUserAssetsView(
+          networkStore: networkStore,
+          keyringStore: keyringStore,
+          userAssetsStore: portfolioStore.userAssetsStore
+        ) {
+          cryptoStore.updateAssets()
+        }
+      })
+    .background(Color.clear
+      .sheet(isPresented: $isPresentingAssetsFilters) {
+        FiltersDisplaySettingsView(
+          filters: portfolioStore.filters,
+          isNFTFilters: false,
+          networkStore: networkStore,
+          save: { filters in
+            portfolioStore.saveFilters(filters)
+          }
+        )
+        .osAvailabilityModifiers({ view in
+          if #available(iOS 16, *) {
+            view
+              .presentationDetents([
+                .fraction(0.7),
+                .large
+              ])
+          } else {
+            view
+          }
+        })
+      })
+    .background(Color.clear
+      .sheet(isPresented: $isPresentingAddCustomNFT) {
+        AddCustomAssetView(
+          networkStore: networkStore,
+          networkSelectionStore: networkStore.openNetworkSelectionStore(mode: .formSelection),
+          keyringStore: keyringStore,
+          userAssetStore: cryptoStore.nftStore.userAssetsStore,
+          supportedTokenTypes: [.nft]
+        ) {
+          cryptoStore.updateAssets()
+        }
+      })
+    .background(Color.clear
+      .sheet(isPresented: $isPresentingNFTsFilters) {
+        FiltersDisplaySettingsView(
+          filters: cryptoStore.nftStore.filters,
+          isNFTFilters: true,
+          networkStore: networkStore,
+          save: { filters in
+            cryptoStore.nftStore.saveFilters(filters)
+          }
+        )
+        .osAvailabilityModifiers({ view in
+          if #available(iOS 16, *) {
+            view
+              .presentationDetents([
+                .fraction(0.6),
+                .large
+              ])
+          } else {
+            view
+          }
+        })
+      })
   }
 
   private var contentDrawer: some View {
-    LazyVStack {
+    VStack {
       if isShowingNFTsTab.value {
         PortfolioSegmentedControl(selected: $selectedContent)
           .padding(.horizontal)
@@ -63,15 +134,19 @@ struct PortfolioView: View {
             cryptoStore: cryptoStore,
             keyringStore: keyringStore,
             networkStore: networkStore,
-            portfolioStore: portfolioStore
+            portfolioStore: portfolioStore,
+            isPresentingEditUserAssets: $isPresentingEditUserAssets,
+            isPresentingFilters: $isPresentingAssetsFilters
           )
           .padding(.horizontal, 8)
         } else {
           NFTView(
             cryptoStore: cryptoStore,
             keyringStore: keyringStore,
             networkStore: cryptoStore.networkStore,
-            nftStore: cryptoStore.nftStore
+            nftStore: cryptoStore.nftStore,
+            isPresentingFilters: $isPresentingNFTsFilters,
+            isPresentingAddCustomNFT: $isPresentingAddCustomNFT
           )
           .padding(.horizontal, 8)
         }

diff --git a/Sources/BraveWallet/Crypto/WalletDisclosureGroup.swift b/Sources/BraveWallet/Crypto/WalletDisclosureGroup.swift
@@ -40,7 +40,7 @@ struct WalletDisclosureGroup<Label: View, Content: View>: View {
   }
 
   var body: some View {
-    LazyVStack {
+    VStack(spacing: 4) {
       header
       if isExpanded {
         Divider()