Fix #8349: Transaction Activity v2 UI

Sources/BraveUI/Buttons/LoaderView.swift

@@ -21,6 +21,7 @@ private class LoaderLayer: CALayer {
 public class LoaderView: UIView {
   /// The size of the indicator
   public enum Size {
+    case mini
     case small
     case normal
     case large
@@ -30,6 +31,8 @@ public class LoaderView: UIView {
 
     fileprivate var size: CGSize {
       switch self {
+      case .mini:
+        return CGSize(width: 8, height: 8)
       case .small:
         return CGSize(width: 16, height: 16)
       case .normal:
@@ -41,6 +44,8 @@ public class LoaderView: UIView {
 
     fileprivate var lineWidth: CGFloat {
       switch self {
+      case .mini:
+        return 1.0
       case .small:
         return 2.0
       case .normal:

Sources/BraveWallet/Crypto/AssetIconView.swift

@@ -6,6 +6,7 @@
 import SwiftUI
 import BraveCore
 import BraveUI
+import DesignSystem
 
 /// Displays an asset's icon from the token registry
 ///
@@ -36,26 +37,10 @@ struct AssetIconView: View {
       )
   }
 
-  private var localImage: Image? {
-    if network.isNativeAsset(token), let uiImage = network.nativeTokenLogoImage {
-      return Image(uiImage: uiImage)
-    }
-
-    for logo in [token.logo, token.symbol.lowercased()] {
-      if let baseURL = BraveWallet.TokenRegistryUtils.tokenLogoBaseURL,
-        case let imageURL = baseURL.appendingPathComponent(logo),
-        let image = UIImage(contentsOfFile: imageURL.path) {
-        return Image(uiImage: image)
-      }
-    }
-
-    return nil
-  }
-
   var body: some View {
     Group {
-      if let image = localImage {
-        image
+      if let uiImage = token.localImage(network: network) {
+        Image(uiImage: uiImage)
           .resizable()
           .aspectRatio(contentMode: .fit)
       } else if let url = URL(string: token.logo) {
@@ -178,3 +163,152 @@ struct NFTIconView: View {
     .accessibilityHidden(true)
   }
 }
+
+/// Displays 2 asset icons stacked on top of one another, with the token's network logo on top.
+/// `bottomToken` is displayed in the top-right, `topToken` is displayed in the bottom-left,
+/// and the network logo is displayed in the bottom-right.
+struct StackedAssetIconsView: View {
+
+  var bottomToken: BraveWallet.BlockchainToken?
+  var topToken: BraveWallet.BlockchainToken?
+  var network: BraveWallet.NetworkInfo
+
+  /// Length of entire view
+  @ScaledMetric var length: CGFloat = 40
+  /// Max length of entire view
+  var maxLength: CGFloat?
+  @ScaledMetric var networkSymbolLength: CGFloat = 15
+  var maxNetworkSymbolLength: CGFloat?
+
+  /// Size of padding applied to bottom/top icon so they can overlap
+  private var iconPadding: CGFloat {
+    length / 5
+  }
+
+  /// Size of asset icon
+  private var assetIconLength: CGFloat {
+    length - iconPadding
+  }
+
+  /// Max size of asset icon
+  private var maxAssetIconLength: CGFloat? {
+    guard let maxLength else { return nil }
+    return maxLength - iconPadding
+  }
+
+  var body: some View {
+    ZStack {
+      Group {
+        if let bottomToken {
+          AssetIconView(
+            token: bottomToken,
+            network: network,
+            shouldShowNetworkIcon: false,
+            length: assetIconLength,
+            maxLength: maxAssetIconLength
+          )
+        } else { // nil token possible for Solana Swaps
+          GenericAssetIconView(
+            backgroundColor: Color(braveSystemName: .gray40),
+            iconColor: Color.white,
+            length: assetIconLength,
+            maxLength: maxAssetIconLength
+          )
+        }
+      }
+      .padding(.leading, iconPadding)
+      .padding(.bottom, iconPadding)
+      .zIndex(0)
+
+      Group {
+        if let topToken {
+          AssetIconView(
+            token: topToken,
+            network: network,
+            shouldShowNetworkIcon: false,
+            length: assetIconLength,
+            maxLength: maxAssetIconLength
+          )
+        } else { // nil token possible for Solana Swaps
+          GenericAssetIconView(
+            backgroundColor: Color(braveSystemName: .gray20),
+            iconColor: Color.black,
+            length: assetIconLength,
+            maxLength: maxAssetIconLength
+          )
+        }
+      }
+      .padding(.top, iconPadding)
+      .padding(.trailing, iconPadding)
+      .zIndex(1)
+
+      if let networkLogoImage = network.networkLogoImage {
+        Group {
+          Image(uiImage: networkLogoImage)
+            .resizable()
+            .overlay(
+              Circle()
+                .stroke(lineWidth: 2)
+                .foregroundColor(Color(braveSystemName: .containerBackground))
+            )
+            .frame(
+              width: min(networkSymbolLength, maxNetworkSymbolLength ?? networkSymbolLength),
+              height: min(networkSymbolLength, maxNetworkSymbolLength ?? networkSymbolLength)
+            )
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
+        .zIndex(2)
+      }
+    }
+    .frame(
+      width: min(length, maxLength ?? length),
+      height: min(length, maxLength ?? length)
+    )
+  }
+}
+
+#if DEBUG
+struct StackedAssetIconsView_Previews: PreviewProvider {
+  static var previews: some View {
+    StackedAssetIconsView(
+      bottomToken: nil,
+      topToken: nil,
+      network: .mockSolana
+    )
+    .previewLayout(.sizeThatFits)
+  }
+}
+#endif
+
+struct GenericAssetIconView: View {
+
+  let backgroundColor: Color
+  let iconColor: Color
+  @ScaledMetric var length: CGFloat
+  let maxLength: CGFloat?
+
+  init(
+    backgroundColor: Color = Color(braveSystemName: .gray20),
+    iconColor: Color = Color.black,
+    length: CGFloat = 40,
+    maxLength: CGFloat? = nil
+  ) {
+    self.backgroundColor = backgroundColor
+    self.iconColor = iconColor
+    self._length = .init(wrappedValue: length)
+    self.maxLength = maxLength
+  }
+
+  var body: some View {
+    Circle()
+      .fill(backgroundColor)
+      .frame(width: min(length, maxLength ?? length), height: min(length, maxLength ?? length))
+      .overlay {
+        Image(braveSystemName: "leo.crypto.wallets")
+          .resizable()
+          .aspectRatio(contentMode: .fit)
+          .padding(6)
+          .foregroundColor(iconColor)
+      }
+  }
+}

Sources/BraveWallet/Crypto/Stores/TransactionsActivityStore.swift

@@ -7,18 +7,22 @@ import BraveCore
 import SwiftUI
 
 class TransactionsActivityStore: ObservableObject, WalletObserverStore {
-  @Published var transactionSummaries: [TransactionSummary] = []
-
-  @Published private(set) var currencyCode: String = CurrencyCode.usd.code {
+  /// Sections of transactions for display. Each section represents one date.
+  @Published var transactionSections: [TransactionSection] = []
+  /// Filter query to filter the transactions by.
+  @Published var query: String = ""
+  /// Selected networks to show transactions for.
+  @Published var networkFilters: [Selectable<BraveWallet.NetworkInfo>] = [] {
     didSet {
-      currencyFormatter.currencyCode = currencyCode
-      guard oldValue != currencyCode else { return }
+      guard !oldValue.isEmpty else { return } // initial assignment to `networkFilters`
       update()
     }
   }
-  @Published var networkFilters: [Selectable<BraveWallet.NetworkInfo>] = [] {
+
+  @Published private(set) var currencyCode: String = CurrencyCode.usd.code {
     didSet {
-      guard !oldValue.isEmpty else { return } // initial assignment to `networkFilters`
+      currencyFormatter.currencyCode = currencyCode
+      guard oldValue != currencyCode else { return }
       update()
     }
   }
@@ -143,7 +147,7 @@ class TransactionsActivityStore: ObservableObject, WalletObserverStore {
       guard !Task.isCancelled else { return }
       // display transactions prior to network request to fetch
       // estimated solana tx fees & asset prices
-      self.transactionSummaries = self.transactionSummaries(
+      self.transactionSections = buildTransactionSections(
         transactions: allTransactions,
         networksForCoin: networksForCoin,
         accountInfos: allAccountInfos,
@@ -152,7 +156,7 @@ class TransactionsActivityStore: ObservableObject, WalletObserverStore {
         assetRatios: assetPricesCache,
         solEstimatedTxFees: solEstimatedTxFeesCache
       )
-      guard !self.transactionSummaries.isEmpty else { return }
+      guard !self.transactionSections.isEmpty else { return }
 
       if allTransactions.contains(where: { $0.coin == .sol }) {
         let solTransactions = allTransactions.filter { $0.coin == .sol }
@@ -163,7 +167,7 @@ class TransactionsActivityStore: ObservableObject, WalletObserverStore {
       await updateAssetPricesCache(assetRatioIds: allUserAssetsAssetRatioIds)
 
       guard !Task.isCancelled else { return }
-      self.transactionSummaries = self.transactionSummaries(
+      self.transactionSections = buildTransactionSections(
         transactions: allTransactions,
         networksForCoin: networksForCoin,
         accountInfos: allAccountInfos,
@@ -175,30 +179,48 @@ class TransactionsActivityStore: ObservableObject, WalletObserverStore {
     }
   }
 
-  private func transactionSummaries(
+  private func buildTransactionSections(
     transactions: [BraveWallet.TransactionInfo],
     networksForCoin: [BraveWallet.CoinType: [BraveWallet.NetworkInfo]],
     accountInfos: [BraveWallet.AccountInfo],
     userAssets: [BraveWallet.BlockchainToken],
     allTokens: [BraveWallet.BlockchainToken],
     assetRatios: [String: Double],
     solEstimatedTxFees: [String: UInt64]
-  ) -> [TransactionSummary] {
-    transactions.compactMap { transaction in
-      guard let networks = networksForCoin[transaction.coin], let network = networks.first(where: { $0.chainId == transaction.chainId }) else {
-        return nil
-      }
-      return TransactionParser.transactionSummary(
-        from: transaction,
-        network: network,
-        accountInfos: accountInfos,
-        userAssets: userAssets,
-        allTokens: allTokens,
-        assetRatios: assetRatios,
-        solEstimatedTxFee: solEstimatedTxFees[transaction.id],
-        currencyFormatter: currencyFormatter
+  ) -> [TransactionSection] {
+    // Group transactions by day (only compare day/month/year)
+    let transactionsGroupedByDate = Dictionary(grouping: transactions) { transaction in
+      let dateComponents = Calendar.current.dateComponents([.year, .month, .day], from: transaction.createdTime)
+      return Calendar.current.date(from: dateComponents) ?? transaction.createdTime
+    }
+    // Map to 1 `TransactionSection` per date
+    return transactionsGroupedByDate.keys.sorted(by: { $0 > $1 }).compactMap { date in
+      let transactions = transactionsGroupedByDate[date] ?? []
+      guard !transactions.isEmpty else { return nil }
+      let parsedTransactions: [ParsedTransaction] = transactions
+        .sorted(by: { $0.createdTime > $1.createdTime })
+        .compactMap { transaction in
+          guard let networks = networksForCoin[transaction.coin],
+                let network = networks.first(where: { $0.chainId == transaction.chainId }) else {
+            return nil
+          }
+          return TransactionParser.parseTransaction(
+            transaction: transaction,
+            network: network,
+            accountInfos: accountInfos,
+            userAssets: userAssets,
+            allTokens: allTokens,
+            assetRatios: assetRatios,
+            solEstimatedTxFee: solEstimatedTxFees[transaction.id],
+            currencyFormatter: currencyFormatter,
+            decimalFormatStyle: .decimals(precision: 4)
+          )
+        }
+      return TransactionSection(
+        date: date,
+        transactions: parsedTransactions
       )
-    }.sorted(by: { $0.createdTime > $1.createdTime })
+    }
   }
 
   @MainActor private func updateSolEstimatedTxFeesCache(_ solTransactions: [BraveWallet.TransactionInfo]) async {

Sources/BraveWallet/Crypto/Transaction Confirmations/SwapTransactionConfirmationView.swift

@@ -266,7 +266,7 @@ struct SwapTransactionConfirmationView_Previews: PreviewProvider {
       fromAddress: BraveWallet.AccountInfo.previewAccount.address,
       namedToAddress: "0x Exchange",
       toAddress: "0x1111111111222222222233333333334444444444",
-      networkSymbol: "ETH",
+      network: .mockMainnet,
       details: .ethSwap(.init(
         fromToken: .mockUSDCToken,
         fromValue: "1.000004",