Fix #8379: Transaction Details v2 UI (#8474)

* 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/Accounts/Activity/AccountActivityView.swift

@@ -153,7 +153,12 @@ struct AccountActivityView: View {
         .sheet(
           isPresented: Binding(
             get: { self.transactionDetails != nil },
-            set: { if !$0 { self.transactionDetails = nil } }
+            set: {
+              if !$0 {
+                self.transactionDetails = nil
+                self.activityStore.closeTransactionDetailsStore()
+              }
+            }
           )
         ) {
           if let transactionDetailsStore = transactionDetails {

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

@@ -237,7 +237,12 @@ struct AssetDetailView: View {
         .sheet(
           isPresented: Binding(
             get: { self.transactionDetails != nil },
-            set: { if !$0 { self.transactionDetails = nil } }
+            set: { 
+              if !$0 {
+                self.transactionDetails = nil
+                self.assetDetailStore.closeTransactionDetailsStore()
+              }
+            }
           )
         ) {
           if let transactionDetailsStore = transactionDetails {

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

@@ -84,6 +84,7 @@ class AccountActivityStore: ObservableObject, WalletObserverStore {
     rpcServiceObserver = nil
     txServiceObserver = nil
     walletServiceObserver = nil
+    transactionDetailsStore?.tearDown()
   }
 
   func setupObservers() {
@@ -311,17 +312,28 @@ class AccountActivityStore: ObservableObject, WalletObserverStore {
       }.sorted(by: { $0.createdTime > $1.createdTime })
   }
 
+  private var transactionDetailsStore: TransactionDetailsStore?
   func transactionDetailsStore(for transaction: BraveWallet.TransactionInfo) -> TransactionDetailsStore {
-    TransactionDetailsStore(
+    let transactionDetailsStore = TransactionDetailsStore(
       transaction: transaction,
+      parsedTransaction: nil,
       keyringService: keyringService,
       walletService: walletService,
       rpcService: rpcService,
       assetRatioService: assetRatioService,
       blockchainRegistry: blockchainRegistry,
+      txService: txService,
       solanaTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: assetManager
     )
+    self.transactionDetailsStore = transactionDetailsStore
+    return transactionDetailsStore
+  }
+
+  func closeTransactionDetailsStore() {
+    self.transactionDetailsStore?.tearDown()
+    self.transactionDetailsStore = nil
   }
 
   #if DEBUG

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
@@ -145,6 +148,7 @@ class AssetDetailStore: ObservableObject, WalletObserverStore {
     keyringServiceObserver = nil
     txServiceObserver = nil
     walletServiceObserver = nil
+    transactionDetailsStore?.tearDown()
   }
 
   func setupObservers() {
@@ -383,17 +387,28 @@ class AssetDetailStore: ObservableObject, WalletObserverStore {
       }
   }
 
+  private var transactionDetailsStore: TransactionDetailsStore?
   func transactionDetailsStore(for transaction: BraveWallet.TransactionInfo) -> TransactionDetailsStore {
-    TransactionDetailsStore(
+    let transactionDetailsStore = TransactionDetailsStore(
       transaction: transaction,
+      parsedTransaction: nil,
       keyringService: keyringService,
       walletService: walletService,
       rpcService: rpcService,
       assetRatioService: assetRatioService,
       blockchainRegistry: blockchainRegistry,
+      txService: txService,
       solanaTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: assetManager
     )
+    self.transactionDetailsStore = transactionDetailsStore
+    return transactionDetailsStore
+  }
+
+  func closeTransactionDetailsStore() {
+    self.transactionDetailsStore?.tearDown()
+    self.transactionDetailsStore = nil
   }
 
   /// Should be called after dismissing create account. Returns true if an account was created
@@ -452,7 +467,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()
@@ -178,6 +181,7 @@ public class TransactionConfirmationStore: ObservableObject, WalletObserverStore
   func tearDown() {
     txServiceObserver = nil
     walletServiceObserver = nil
+    txDetailsStore?.tearDown()
   }
 
   func setupObservers() {
@@ -337,18 +341,35 @@ public class TransactionConfirmationStore: ObservableObject, WalletObserverStore
     }
   }
 
+  private var txDetailsStore: TransactionDetailsStore?
   func activeTxDetailsStore() -> TransactionDetailsStore {
     let tx = allTxs.first { $0.id == activeTransactionId } ?? activeParsedTransaction.transaction
-    return TransactionDetailsStore(
+    let parsedTransaction: ParsedTransaction?
+    if activeParsedTransaction.transaction.id == tx.id {
+      parsedTransaction = activeParsedTransaction
+    } else {
+      parsedTransaction = nil
+    }
+    let txDetailsStore = TransactionDetailsStore(
       transaction: tx,
+      parsedTransaction: parsedTransaction,
       keyringService: keyringService,
       walletService: walletService,
       rpcService: rpcService,
       assetRatioService: assetRatioService,
       blockchainRegistry: blockchainRegistry,
+      txService: txService,
       solanaTxManagerProxy: solTxManagerProxy,
+      ipfsApi: ipfsApi,
       userAssetManager: assetManager
     )
+    self.txDetailsStore = txDetailsStore
+    return txDetailsStore
+  }
+
+  func closeTxDetailsStore() {
+    self.txDetailsStore?.tearDown()
+    self.txDetailsStore = nil
   }
 
   private func clearTrasactionInfoBeforeUpdate() {