Fix #8379: Transaction Details v2 UI

Sources/BraveWallet/Assets.xcassets/Brave Wallet/Transaction States/tx-details-lines.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "tx_details_lines.svg",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/BraveWallet/Crypto/NFT/NFTView.swift

@@ -98,7 +98,7 @@ struct NFTView: View {
   }
 
   private var filtersButton: some View {
-    AssetButton(braveSystemName: "leo.filter.settings", action: {
+    WalletIconButton(braveSystemName: "leo.filter.settings", action: {
       isPresentingFiltersDisplaySettings = true
     })
   }
@@ -150,7 +150,7 @@ struct NFTView: View {
   }
 
   private var addCustomAssetButton: some View {
-    AssetButton(braveSystemName: "leo.plus.add") {
+    WalletIconButton(braveSystemName: "leo.plus.add") {
       isShowingAddCustomNFT = true
     }
   }

Sources/BraveWallet/Crypto/Portfolio/PortfolioAssetsView.swift

@@ -83,7 +83,7 @@ struct PortfolioAssetsView: View {
   }
 
   private var editUserAssetsButton: some View {
-    AssetButton(braveSystemName: "leo.list.settings", action: {
+    WalletIconButton(braveSystemName: "leo.list.settings", action: {
       isPresentingEditUserAssets = true
     })
     .sheet(isPresented: $isPresentingEditUserAssets) {
@@ -98,7 +98,7 @@ struct PortfolioAssetsView: View {
   }
 
   private var filtersButton: some View {
-    AssetButton(braveSystemName: "leo.filter.settings", action: {
+    WalletIconButton(braveSystemName: "leo.filter.settings", action: {
       isPresentingFiltersDisplaySettings = true
     })
     .sheet(isPresented: $isPresentingFiltersDisplaySettings) {

Sources/BraveWallet/Crypto/Portfolio/WalletIconButton.swift

@@ -0,0 +1,61 @@
+/* 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 WalletIconButton: View {
+
+  enum IconSymbol {
+    case braveSystemName(String)
+    case systemName(String)
+  }
+
+  let iconSymbol: IconSymbol
+  let action: () -> Void
+
+  @ScaledMetric var length: CGFloat = 36
+
+  init(
+    braveSystemName: String,
+    action: @escaping () -> Void,
+    length: CGFloat = 36
+  ) {
+    self.iconSymbol = .braveSystemName(braveSystemName)
+    self.action = action
+    self._length = .init(wrappedValue: length)
+  }
+
+  init(
+    systemName: String,
+    action: @escaping () -> Void,
+    length: CGFloat = 36
+  ) {
+    self.iconSymbol = .systemName(systemName)
+    self.action = action
+    self._length = .init(wrappedValue: length)
+  }
+
+  var body: some View {
+    Button(action: action) {
+      Group {
+        switch iconSymbol {
+        case .braveSystemName(let braveSystemName):
+          Image(braveSystemName: braveSystemName)
+        case .systemName(let systemName):
+          Image(systemName: systemName)
+        }
+      }
+      .foregroundColor(Color(braveSystemName: .iconInteractive))
+      .imageScale(.medium)
+      .padding(6)
+      .frame(width: length, height: length)
+      .background(
+        Circle()
+          .strokeBorder(Color(braveSystemName: .dividerInteractive), lineWidth: 1)
+      )
+    }
+  }
+}

Sources/BraveWallet/Crypto/Stores/AccountActivityStore.swift

@@ -314,12 +314,14 @@ class AccountActivityStore: ObservableObject, WalletObserverStore {
   func transactionDetailsStore(for transaction: BraveWallet.TransactionInfo) -> TransactionDetailsStore {
     TransactionDetailsStore(
       transaction: transaction,
+      parsedTransaction: nil,
       keyringService: keyringService,
       walletService: walletService,
       rpcService: rpcService,
       assetRatioService: assetRatioService,
       blockchainRegistry: blockchainRegistry,
       solanaTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: assetManager
     )
   }

Sources/BraveWallet/Crypto/Stores/AssetDetailStore.swift

@@ -76,6 +76,7 @@ class AssetDetailStore: ObservableObject, WalletObserverStore {
   private let txService: BraveWalletTxService
   private let blockchainRegistry: BraveWalletBlockchainRegistry
   private let solTxManagerProxy: BraveWalletSolanaTxManagerProxy
+  private let ipfsApi: IpfsAPI
   private let swapService: BraveWalletSwapService
   private let assetManager: WalletUserAssetManagerType
   /// A list of tokens that are supported with the current selected network for all supported
@@ -119,6 +120,7 @@ class AssetDetailStore: ObservableObject, WalletObserverStore {
     txService: BraveWalletTxService,
     blockchainRegistry: BraveWalletBlockchainRegistry,
     solTxManagerProxy: BraveWalletSolanaTxManagerProxy,
+    ipfsApi: IpfsAPI,
     swapService: BraveWalletSwapService,
     userAssetManager: WalletUserAssetManagerType,
     assetDetailType: AssetDetailType
@@ -130,6 +132,7 @@ class AssetDetailStore: ObservableObject, WalletObserverStore {
     self.txService = txService
     self.blockchainRegistry = blockchainRegistry
     self.solTxManagerProxy = solTxManagerProxy
+    self.ipfsApi = ipfsApi
     self.swapService = swapService
     self.assetManager = userAssetManager
     self.assetDetailType = assetDetailType
@@ -386,12 +389,14 @@ class AssetDetailStore: ObservableObject, WalletObserverStore {
   func transactionDetailsStore(for transaction: BraveWallet.TransactionInfo) -> TransactionDetailsStore {
     TransactionDetailsStore(
       transaction: transaction,
+      parsedTransaction: nil,
       keyringService: keyringService,
       walletService: walletService,
       rpcService: rpcService,
       assetRatioService: assetRatioService,
       blockchainRegistry: blockchainRegistry,
       solanaTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: assetManager
     )
   }
@@ -452,7 +457,7 @@ extension AssetDetailStore: BraveWalletTxServiceObserver {
     update()
   }
   func onTxServiceReset() {
-  }  
+  }
 }
 
 extension AssetDetailStore: BraveWalletBraveWalletServiceObserver {

Sources/BraveWallet/Crypto/Stores/CryptoStore.swift

@@ -436,6 +436,7 @@ public class CryptoStore: ObservableObject, WalletObserverStore {
       txService: txService,
       blockchainRegistry: blockchainRegistry,
       solTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       swapService: swapService,
       userAssetManager: userAssetManager,
       assetDetailType: assetDetailType
@@ -499,6 +500,7 @@ public class CryptoStore: ObservableObject, WalletObserverStore {
       ethTxManagerProxy: ethTxManagerProxy,
       keyringService: keyringService,
       solTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: userAssetManager
     )
     confirmationStore = store

Sources/BraveWallet/Crypto/Stores/TransactionConfirmationStore.swift

@@ -138,6 +138,7 @@ public class TransactionConfirmationStore: ObservableObject, WalletObserverStore
   private let ethTxManagerProxy: BraveWalletEthTxManagerProxy
   private let keyringService: BraveWalletKeyringService
   private let solTxManagerProxy: BraveWalletSolanaTxManagerProxy
+  private let ipfsApi: IpfsAPI
   private let assetManager: WalletUserAssetManagerType
   private var selectedChain: BraveWallet.NetworkInfo = .init()
   private var txServiceObserver: TxServiceObserver?
@@ -156,6 +157,7 @@ public class TransactionConfirmationStore: ObservableObject, WalletObserverStore
     ethTxManagerProxy: BraveWalletEthTxManagerProxy,
     keyringService: BraveWalletKeyringService,
     solTxManagerProxy: BraveWalletSolanaTxManagerProxy,
+    ipfsApi: IpfsAPI,
     userAssetManager: WalletUserAssetManagerType
   ) {
     self.assetRatioService = assetRatioService
@@ -166,6 +168,7 @@ public class TransactionConfirmationStore: ObservableObject, WalletObserverStore
     self.ethTxManagerProxy = ethTxManagerProxy
     self.keyringService = keyringService
     self.solTxManagerProxy = solTxManagerProxy
+    self.ipfsApi = ipfsApi
     self.assetManager = userAssetManager
 
     self.setupObservers()
@@ -339,14 +342,22 @@ public class TransactionConfirmationStore: ObservableObject, WalletObserverStore
 
   func activeTxDetailsStore() -> TransactionDetailsStore {
     let tx = allTxs.first { $0.id == activeTransactionId } ?? activeParsedTransaction.transaction
+    let parsedTransaction: ParsedTransaction?
+    if activeParsedTransaction.transaction.id == tx.id {
+      parsedTransaction = activeParsedTransaction
+    } else {
+      parsedTransaction = nil
+    }
     return TransactionDetailsStore(
       transaction: tx,
+      parsedTransaction: parsedTransaction,
       keyringService: keyringService,
       walletService: walletService,
       rpcService: rpcService,
       assetRatioService: assetRatioService,
       blockchainRegistry: blockchainRegistry,
       solanaTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: assetManager
     )
   }