Fix #8072: Portfolio v2 (#8140)

* Integrate Portfolio v2 UI * Remove floating Buy/Send/Swap button * Use reusable modifier for reading view size
brave · Oct 10, 2023 · c934dd9 · c934dd9
1 parent e352b68
commit c934dd9
Show file tree

Hide file tree

Showing 16 changed files with 881 additions and 522 deletions.
diff --git a/Sources/BraveWallet/Crypto/AssetIconView.swift b/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),

diff --git a/Sources/BraveWallet/Crypto/CryptoPagesView.swift b/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 {

diff --git a/Sources/BraveWallet/Crypto/NFT/NFTView.swift b/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(

diff --git a/Sources/BraveWallet/Crypto/Portfolio/AssetButton.swift b/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)
+        )
+    }
+  }
+}
diff --git a/Sources/BraveWallet/Crypto/Portfolio/PortfolioAssetView.swift b/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()
     }