Fix #8072: Portfolio v2 (#8140)

* Integrate Portfolio v2 UI

* Remove floating Buy/Send/Swap button

* Use reusable modifier for reading view size

Sources/BraveWallet/Crypto/AssetIconView.swift

@@ -86,7 +86,7 @@ struct AssetIconView: View {
  .overlay(
  Circle()
  .stroke(lineWidth: 2)
- .foregroundColor(.white)
+ .foregroundColor(Color(braveSystemName: .containerBackground))
  )
  .frame(width: min(networkSymbolLength, maxNetworkSymbolLength ?? networkSymbolLength), height: min(networkSymbolLength, maxNetworkSymbolLength ?? networkSymbolLength))
  }
@@ -150,7 +150,7 @@ struct NFTIconView: View {
  .overlay(
  Circle()
  .stroke(lineWidth: 2)
- .foregroundColor(.white)
+ .foregroundColor(Color(braveSystemName: .containerBackground))
  )
  .frame(
  width: min(tokenLogoLength, maxTokenLogoLength ?? tokenLogoLength),

Sources/BraveWallet/Crypto/CryptoPagesView.swift

@@ -132,7 +132,6 @@ struct CryptoPagesView: View {
  CryptoPagesViewController(
  keyringStore: keyringStore,
  cryptoStore: cryptoStore,
- buySendSwapDestination: context.environment.buySendSwapDestination,
  isShowingPendingRequest: isShowingPendingRequest
  )
  }
@@ -145,21 +144,17 @@ struct CryptoPagesView: View {
 private class CryptoPagesViewController: TabbedPageViewController {
  private let keyringStore: KeyringStore
  private let cryptoStore: CryptoStore
- private let swapButton = SwapButton()
  let pendingRequestsButton = ConfirmationsButton()
 
- @Binding private var buySendSwapDestination: BuySendSwapDestination?
  @Binding private var isShowingPendingRequest: Bool
 
  init(
  keyringStore: KeyringStore,
  cryptoStore: CryptoStore,
- buySendSwapDestination: Binding<BuySendSwapDestination?>,
  isShowingPendingRequest: Binding<Bool>
  ) {
  self.keyringStore = keyringStore
  self.cryptoStore = cryptoStore
- self._buySendSwapDestination = buySendSwapDestination
  self._isShowingPendingRequest = isShowingPendingRequest
  super.init(nibName: nil, bundle: nil)
  }
@@ -187,16 +182,6 @@ private class CryptoPagesViewController: TabbedPageViewController {
  ).then {
  $0.title = Strings.Wallet.portfolioPageTitle
  },
- UIHostingController(
- rootView: NFTView(
- cryptoStore: cryptoStore,
- keyringStore: keyringStore,
- networkStore: cryptoStore.networkStore,
- nftStore: cryptoStore.nftStore
- )
- ).then {
- $0.title = Strings.Wallet.nftPageTitle
- },
  UIHostingController(
  rootView: TransactionsActivityView(
  store: cryptoStore.transactionsActivityStore,
@@ -223,23 +208,10 @@ private class CryptoPagesViewController: TabbedPageViewController {
  },
  ]
 
- view.addSubview(swapButton)
- swapButton.snp.makeConstraints {
- $0.centerX.equalToSuperview()
- $0.bottom.equalTo(view.safeAreaLayoutGuide).priority(.high)
- $0.bottom.lessThanOrEqualTo(view).inset(8)
- }
-
- pages.forEach {
- $0.additionalSafeAreaInsets = .init(top: 0, left: 0, bottom: swapButton.intrinsicContentSize.height + 8, right: 0)
- }
-
- swapButton.addTarget(self, action: #selector(tappedSwapButton), for: .touchUpInside)
-
  view.addSubview(pendingRequestsButton)
  pendingRequestsButton.snp.makeConstraints {
  $0.trailing.equalToSuperview().inset(16)
- $0.centerY.equalTo(swapButton)
+ $0.bottom.equalTo(view.safeAreaLayoutGuide).priority(.high)
  $0.bottom.lessThanOrEqualTo(view).inset(8)
  }
  pendingRequestsButton.addTarget(self, action: #selector(tappedPendingRequestsButton), for: .touchUpInside)
@@ -248,25 +220,6 @@ private class CryptoPagesViewController: TabbedPageViewController {
  @objc private func tappedPendingRequestsButton() {
  isShowingPendingRequest = true
  }
-
- @objc private func tappedSwapButton() {
- let controller = FixedHeightHostingPanModalController(
- rootView: BuySendSwapView(
- networkStore: cryptoStore.networkStore,
- action: { [weak self] destination in
- self?.dismiss(
- animated: true,
- completion: {
- self?.buySendSwapDestination = destination
- })
- })
- )
- presentPanModal(
- controller,
- sourceView: swapButton,
- sourceRect: swapButton.bounds
- )
- }
 }
 
 private class ConfirmationsButton: SpringButton {

Sources/BraveWallet/Crypto/NFT/NFTView.swift

@@ -104,14 +104,9 @@ struct NFTView: View {
  }
 
  private var filtersButton: some View {
- Button(action: {
- self.isPresentingFiltersDisplaySettings = true
- }) {
- Image(braveSystemName: "leo.tune")
- .font(.footnote.weight(.medium))
- .foregroundColor(Color(.braveBlurpleTint))
- .clipShape(Rectangle())
- }
+ AssetButton(braveSystemName: "leo.filter.settings", action: {
+ isPresentingFiltersDisplaySettings = true
+ })
  .sheet(isPresented: $isPresentingFiltersDisplaySettings) {
  FiltersDisplaySettingsView(
  filters: nftStore.filters,
@@ -138,9 +133,8 @@ struct NFTView: View {
  private var nftHeaderView: some View {
  HStack {
  Text(Strings.Wallet.assetsTitle)
- .font(.footnote)
- .foregroundColor(Color(.secondaryBraveLabel))
- .padding(.leading, 16)
+ .font(.title3.weight(.semibold))
+ .foregroundColor(Color(braveSystemName: .textPrimary))
  if nftStore.isLoadingDiscoverAssets && isNFTDiscoveryEnabled {
  ProgressView()
  .padding(.leading, 5)
@@ -161,16 +155,13 @@ struct NFTView: View {
  .padding(.trailing, 10)
  addCustomAssetButton
  }
- .textCase(nil)
- .padding(.horizontal, 10)
+ .padding(.horizontal)
  .frame(maxWidth: .infinity, alignment: .leading)
  }
 
  private var addCustomAssetButton: some View {
- Button(action: {
+ AssetButton(braveSystemName: "leo.plus.add") {
  isShowingAddCustomNFT = true
- }) {
- Image(systemName: "plus")
  }
  }
 
@@ -229,6 +220,7 @@ struct NFTView: View {
  }
  }
  }
+ .padding(.horizontal)
  VStack(spacing: 16) {
  Divider()
  editUserAssetsButton
@@ -238,16 +230,11 @@ struct NFTView: View {
  }
 
  var body: some View {
- ScrollView {
- VStack {
- nftHeaderView
- .padding(.horizontal, 8)
- nftGridsView
- .padding(.horizontal, 24)
- }
- .padding(.vertical, 24)
+ VStack(spacing: 16) {
+ nftHeaderView
+
+ nftGridsView
  }
- .background(Color(UIColor.braveGroupedBackground))
  .background(
  NavigationLink(
  isActive: Binding(

Sources/BraveWallet/Crypto/Portfolio/AssetButton.swift

@@ -0,0 +1,29 @@
+/* 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 DesignSystem
+
+struct AssetButton: View {
+
+ let braveSystemName: String
+ let action: () -> Void
+
+ @ScaledMetric var length = 36
+
+ var body: some View {
+ Button(action: action) {
+ Image(braveSystemName: braveSystemName)
+ .foregroundColor(Color(braveSystemName: .iconInteractive))
+ .imageScale(.medium)
+ .padding(6)
+ .frame(width: length, height: length)
+ .background(
+ Circle()
+ .strokeBorder(Color(braveSystemName: .dividerInteractive), lineWidth: 1)
+ )
+ }
+ }
+}

Sources/BraveWallet/Crypto/Portfolio/PortfolioAssetView.swift

@@ -22,10 +22,12 @@ struct PortfolioAssetView: View {
  accessoryContent: {
  VStack(alignment: .trailing) {
  Text(amount.isEmpty ? "0.0" : amount)
+ .fontWeight(.semibold)
  Text(verbatim: "\(quantity) \(symbol)")
  }
  .font(.footnote)
  .foregroundColor(Color(.braveLabel))
+ .multilineTextAlignment(.trailing)
  }
  )
  .accessibilityLabel("\(title), \(quantity) \(symbol), \(amount)")
@@ -109,6 +111,7 @@ struct AssetView<ImageView: View, AccessoryContent: View>: View {
  .font(.caption)
  .foregroundColor(Color(.braveLabel))
  }
+ .multilineTextAlignment(.leading)
  Spacer()
  accessoryContent()
  }