Fix #8089, #6538: Portfolio Settings / Menu View

Sources/BraveWallet/Crypto/Asset Details/AssetDetailView.swift

@@ -35,6 +35,7 @@ struct AssetDetailView: View {
   private var buySendSwapDestination: Binding<BuySendSwapDestination?>
 
   @Environment(\.openURL) private var openWalletURL
+  @ObservedObject private var isShowingBalances = Preferences.Wallet.isShowingBalances
 
   @ViewBuilder private var accountsBalanceView: some View {
     Section(
@@ -69,13 +70,19 @@ struct AssetDetailView: View {
                   .font(.footnote)
                   .foregroundColor(Color(.secondaryBraveLabel))
               } else {
-                VStack(alignment: .trailing) {
-                  Text(showFiatPlaceholder ? "$0.00" : viewModel.fiatBalance)
-                    .redacted(reason: showFiatPlaceholder ? .placeholder : [])
-                    .shimmer(assetDetailStore.isLoadingPrice)
-                  Text(showBalancePlaceholder ? "0.0000 \(assetDetailStore.assetDetailToken.symbol)" : "\(viewModel.balance) \(assetDetailStore.assetDetailToken.symbol)")
-                    .redacted(reason: showBalancePlaceholder ? .placeholder : [])
-                    .shimmer(assetDetailStore.isLoadingAccountBalances)
+                Group {
+                  if isShowingBalances.value {
+                    VStack(alignment: .trailing) {
+                      Text(showFiatPlaceholder ? "$0.00" : viewModel.fiatBalance)
+                        .redacted(reason: showFiatPlaceholder ? .placeholder : [])
+                        .shimmer(assetDetailStore.isLoadingPrice)
+                      Text(showBalancePlaceholder ? "0.0000 \(assetDetailStore.assetDetailToken.symbol)" : "\(viewModel.balance) \(assetDetailStore.assetDetailToken.symbol)")
+                        .redacted(reason: showBalancePlaceholder ? .placeholder : [])
+                        .shimmer(assetDetailStore.isLoadingAccountBalances)
+                    }
+                  } else {
+                    Text("****")
+                  }
                 }
                 .font(.footnote)
                 .foregroundColor(Color(.secondaryBraveLabel))

Sources/BraveWallet/Crypto/CryptoPagesView.swift

@@ -15,11 +15,11 @@ struct CryptoPagesView: View {
   @ObservedObject var cryptoStore: CryptoStore
   @ObservedObject var keyringStore: KeyringStore
 
+  @State private var isShowingMainMenu: Bool = false
   @State private var isShowingSettings: Bool = false
   @State private var isShowingSearch: Bool = false
   @State private var fetchedPendingRequestsThisSession: Bool = false
-
-  @Environment(\.openURL) private var openWalletURL
+  @State private var selectedPageIndex: Int = 0
 
   private var isConfirmationButtonVisible: Bool {
     if case .transactions(let txs) = cryptoStore.pendingRequest {
@@ -33,7 +33,10 @@ struct CryptoPagesView: View {
       keyringStore: keyringStore,
       cryptoStore: cryptoStore,
       isShowingPendingRequest: $cryptoStore.isPresentingPendingRequest,
-      isConfirmationsButtonVisible: isConfirmationButtonVisible
+      isConfirmationsButtonVisible: isConfirmationButtonVisible,
+      selectedIndexChanged: { selectedIndex in
+        selectedPageIndex = selectedIndex
+      }
     )
     .onAppear {
       // If a user chooses not to confirm/reject their requests we shouldn't
@@ -97,42 +100,36 @@ struct CryptoPagesView: View {
             .labelStyle(.iconOnly)
             .foregroundColor(Color(.braveBlurpleTint))
         }
-        Menu {
-          Button(action: {
-            keyringStore.lock()
-          }) {
-            Label(Strings.Wallet.lock, braveSystemImage: "leo.lock")
-              .imageScale(.medium)  // Menu inside nav bar implicitly gets large
-          }
-          Button(action: { isShowingSettings = true }) {
-            Label(Strings.Wallet.settings, braveSystemImage: "leo.settings")
-              .imageScale(.medium)  // Menu inside nav bar implicitly gets large
-          }
-          Divider()
-          Button(action: { openWalletURL(WalletConstants.braveWalletSupportURL) }) {
-            Label(Strings.Wallet.helpCenter, braveSystemImage: "leo.info.outline")
-          }
-        } label: {
-          Label(Strings.Wallet.otherWalletActionsAccessibilityTitle, systemImage: "ellipsis.circle")
+        Button(action: { self.isShowingMainMenu = true }) {
+          Label(Strings.Wallet.otherWalletActionsAccessibilityTitle, braveSystemImage: "leo.more.horizontal")
             .labelStyle(.iconOnly)
             .foregroundColor(Color(.braveBlurpleTint))
         }
         .accessibilityLabel(Strings.Wallet.otherWalletActionsAccessibilityTitle)
       }
     }
+    .sheet(isPresented: $isShowingMainMenu) {
+      MainMenuView(
+        isFromPortfolio: selectedPageIndex == 0,
+        isShowingSettings: $isShowingSettings,
+        keyringStore: keyringStore
+      )
+    }
   }
 
   private struct _CryptoPagesView: UIViewControllerRepresentable {
     var keyringStore: KeyringStore
     var cryptoStore: CryptoStore
     var isShowingPendingRequest: Binding<Bool>
     var isConfirmationsButtonVisible: Bool
+    var selectedIndexChanged: (Int) -> Void
 
     func makeUIViewController(context: Context) -> CryptoPagesViewController {
       CryptoPagesViewController(
         keyringStore: keyringStore,
         cryptoStore: cryptoStore,
-        isShowingPendingRequest: isShowingPendingRequest
+        isShowingPendingRequest: isShowingPendingRequest,
+        selectedIndexChanged: selectedIndexChanged
       )
     }
     func updateUIViewController(_ uiViewController: CryptoPagesViewController, context: Context) {
@@ -145,18 +142,21 @@ private class CryptoPagesViewController: TabbedPageViewController {
   private let keyringStore: KeyringStore
   private let cryptoStore: CryptoStore
   let pendingRequestsButton = ConfirmationsButton()
+  let selectedIndexChanged: (Int) -> Void
 
   @Binding private var isShowingPendingRequest: Bool
 
   init(
     keyringStore: KeyringStore,
     cryptoStore: CryptoStore,
-    isShowingPendingRequest: Binding<Bool>
+    isShowingPendingRequest: Binding<Bool>,
+    selectedIndexChanged: @escaping (Int) -> Void
   ) {
     self.keyringStore = keyringStore
     self.cryptoStore = cryptoStore
     self._isShowingPendingRequest = isShowingPendingRequest
-    super.init(nibName: nil, bundle: nil)
+    self.selectedIndexChanged = selectedIndexChanged
+    super.init(selectedIndexChanged: selectedIndexChanged)
   }
 
   @available(*, unavailable)

Sources/BraveWallet/Crypto/MainMenuView.swift

@@ -0,0 +1,173 @@
+/* Copyright 2023 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import SwiftUI
+import Strings
+import Preferences
+
+struct MainMenuView: View {
+
+  let isFromPortfolio: Bool
+  @Binding var isShowingSettings: Bool
+  let keyringStore: KeyringStore
+
+  @ObservedObject private var isShowingBalances = Preferences.Wallet.isShowingBalances
+  @ObservedObject private var isShowingGraph = Preferences.Wallet.isShowingGraph
+  @ObservedObject private var isShowingNFTs = Preferences.Wallet.isShowingNFTsTab
+
+  @Environment(\.presentationMode) @Binding private var presentationMode
+  @Environment(\.openURL) private var openWalletURL
+
+  @ScaledMetric var rowHeight: CGFloat = 52
+  @State private var viewHeight: CGFloat = 0
+
+  var body: some View {
+    ScrollView {
+      LazyVStack(spacing: 0) {
+        Button(action: {
+          presentationMode.dismiss()
+          keyringStore.lock()
+        }) {
+          MenuRowView(
+            iconBraveSystemName: "leo.lock",
+            title: Strings.Wallet.lockWallet
+          )
+        }
+        .frame(height: rowHeight)
+
+        Button(action: {
+          isShowingSettings = true
+          presentationMode.dismiss()
+        }) {
+          MenuRowView(
+            iconBraveSystemName: "leo.settings",
+            title: Strings.Wallet.walletSettings
+          )
+        }
+        .frame(height: rowHeight)
+
+        if isFromPortfolio {
+          Divider()
+          portfolioSettings
+        }
+
+        Divider()
+        Button(action: {
+          openWalletURL(WalletConstants.braveWalletSupportURL)
+        }) {
+          MenuRowView(
+            iconBraveSystemName: "leo.help.outline",
+            title: Strings.Wallet.helpCenter,
+            accessoryContent: {
+              Image(braveSystemName: "leo.launch")
+                .imageScale(.large)
+                .foregroundColor(Color(braveSystemName: .buttonBackground))
+            }
+          )
+        }
+        .frame(height: rowHeight)
+      }
+      .padding(.vertical, 8)
+      .readSize { size in
+        self.viewHeight = size.height
+      }
+    }
+    .background(Color(braveSystemName: .containerBackground))
+    .osAvailabilityModifiers({ view in
+      if #available(iOS 16, *) {
+        view
+          .presentationDetents([
+            .height(viewHeight)
+          ])
+      } else {
+        view
+      }
+    })
+  }
+
+  @ViewBuilder private var portfolioSettings: some View {
+    MenuRowView(
+      iconBraveSystemName: "leo.eye.on",
+      title: Strings.Wallet.balances,
+      accessoryContent: {
+        Toggle(isOn: $isShowingBalances.value) {
+          EmptyView()
+        }
+        .tint(Color(braveSystemName: .buttonBackground))
+      }
+    )
+    .frame(height: rowHeight)
+
+    MenuRowView(
+      iconBraveSystemName: "leo.graph",
+      title: Strings.Wallet.graph,
+      accessoryContent: {
+        Toggle(isOn: $isShowingGraph.value) {
+          EmptyView()
+        }
+        .tint(Color(braveSystemName: .buttonBackground))
+      }
+    )
+    .frame(height: rowHeight)
+
+    MenuRowView(
+      iconBraveSystemName: "leo.nft",
+      title: Strings.Wallet.nftsTab,
+      accessoryContent: {
+        Toggle(isOn: $isShowingNFTs.value) {
+          EmptyView()
+        }
+        .tint(Color(braveSystemName: .buttonBackground))
+      }
+    )
+    .frame(height: rowHeight)
+  }
+}
+
+#if DEBUG
+struct MainMenuView_Previews: PreviewProvider {
+  static var previews: some View {
+    Color.white
+      .sheet(isPresented: .constant(true), content: {
+        MainMenuView(
+          isFromPortfolio: true,
+          isShowingSettings: .constant(false),
+          keyringStore: .previewStoreWithWalletCreated
+        )
+      })
+  }
+}
+#endif
+
+private struct MenuRowView<AccessoryContent: View>: View {
+
+  let iconBraveSystemName: String
+  let title: String
+  let accessoryContent: () -> AccessoryContent
+
+  init(
+    iconBraveSystemName: String,
+    title: String,
+    accessoryContent: @escaping () -> AccessoryContent = { EmptyView() }
+  ) {
+    self.iconBraveSystemName = iconBraveSystemName
+    self.title = title
+    self.accessoryContent = accessoryContent
+  }
+
+  var body: some View {
+    HStack(spacing: 12) {
+      Image(braveSystemName: iconBraveSystemName)
+        .imageScale(.medium)
+        .foregroundColor(Color(braveSystemName: .iconDefault))
+      Text(title)
+        .foregroundColor(Color(braveSystemName: .textPrimary))
+      Spacer()
+      accessoryContent()
+    }
+    .font(.callout.weight(.semibold))
+    .padding(.horizontal)
+  }
+}

Sources/BraveWallet/Crypto/Portfolio/PortfolioAssetView.swift

@@ -4,6 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import SwiftUI
+import Preferences
 
 struct PortfolioAssetView: View {
   var image: AssetIconView
@@ -12,6 +13,27 @@ struct PortfolioAssetView: View {
   let networkName: String
   var amount: String
   var quantity: String
+  let shouldHideBalance: Bool
+
+  @ObservedObject private var isShowingBalances = Preferences.Wallet.isShowingBalances
+
+  init(
+    image: AssetIconView,
+    title: String, 
+    symbol: String,
+    networkName: String,
+    amount: String,
+    quantity: String,
+    shouldHideBalance: Bool = false
+  ) {
+    self.image = image
+    self.title = title
+    self.symbol = symbol
+    self.networkName = networkName
+    self.amount = amount
+    self.quantity = quantity
+    self.shouldHideBalance = shouldHideBalance
+  }
 
   var body: some View {
     AssetView(
@@ -20,14 +42,20 @@ struct PortfolioAssetView: View {
       symbol: symbol,
       networkName: networkName,
       accessoryContent: {
-        VStack(alignment: .trailing) {
-          Text(amount.isEmpty ? "0.0" : amount)
-            .fontWeight(.semibold)
-          Text(verbatim: "\(quantity) \(symbol)")
+        Group {
+          if shouldHideBalance && !isShowingBalances.value {
+            Text("****")
+          } else {
+            VStack(alignment: .trailing) {
+              Text(amount.isEmpty ? "0.0" : amount)
+                .fontWeight(.semibold)
+              Text(verbatim: "\(quantity) \(symbol)")
+            }
+            .multilineTextAlignment(.trailing)
+          }
         }
         .font(.footnote)
         .foregroundColor(Color(.braveLabel))
-        .multilineTextAlignment(.trailing)
       }
     )
     .accessibilityLabel("\(title), \(quantity) \(symbol), \(amount)")
@@ -97,7 +125,7 @@ struct AssetView<ImageView: View, AccessoryContent: View>: View {
   let title: String
   let symbol: String
   let networkName: String
-  let accessoryContent: () -> AccessoryContent
+  @ViewBuilder var accessoryContent: () -> AccessoryContent
 
   var body: some View {
     HStack {