Fix #7123: showing network logo on asset icon (#7361)

Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/aurora.imageset/Contents.json

@@ -1,11 +1,11 @@
 {
   "images" : [
     {
-      "filename" : "aurora.pdf",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
+      "filename" : "aurora.pdf",
       "idiom" : "universal",
       "scale" : "2x"
     },

Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/Contents.json

@@ -5,7 +5,7 @@
       "scale" : "1x"
     },
     {
-      "filename" : "matic.png",
+      "filename" : "matic-asset-icon.png",
       "idiom" : "universal",
       "scale" : "2x"
     },

Sources/BraveWallet/Crypto/Accounts/Activity/AccountActivityView.swift

@@ -69,7 +69,7 @@ struct AccountActivityView: View {
                 image: AssetIconView(
                   token: asset.token,
                   network: asset.network,
-                  shouldShowNativeTokenIcon: true
+                  shouldShowNetworkIcon: true
                 ),
                 title: asset.token.name,
                 symbol: asset.token.symbol,
@@ -91,7 +91,7 @@ struct AccountActivityView: View {
                   token: nftAsset.token,
                   network: nftAsset.network,
                   url: nftAsset.nftMetadata?.imageURL,
-                  shouldShowNativeTokenIcon: true
+                  shouldShowNetworkIcon: true
                 ),
                 title: nftAsset.token.nftTokenTitle,
                 symbol: nftAsset.token.symbol,

Sources/BraveWallet/Crypto/AssetIconView.swift

@@ -19,8 +19,8 @@ import BraveUI
 struct AssetIconView: View {
   var token: BraveWallet.BlockchainToken
   var network: BraveWallet.NetworkInfo
-  /// If we should show the native token logo on non-native assets
-  var shouldShowNativeTokenIcon: Bool = false
+  /// If we should show the network logo on non-native assets
+  var shouldShowNetworkIcon: Bool = false
   @ScaledMetric var length: CGFloat = 40
   var maxLength: CGFloat?
   @ScaledMetric var networkSymbolLength: CGFloat = 15
@@ -37,6 +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),
@@ -45,10 +49,6 @@ struct AssetIconView: View {
       }
     }
 
-    if network.isNativeAsset(token), let uiImage = network.nativeTokenLogoImage {
-      return Image(uiImage: uiImage)
-    }
-
     return nil
   }
 
@@ -76,9 +76,16 @@ struct AssetIconView: View {
   }
 
   @ViewBuilder private var tokenLogo: some View {
-    if shouldShowNativeTokenIcon, !network.isNativeAsset(token), let image = network.nativeTokenLogoImage {
+    if shouldShowNetworkIcon,  // explicitly show/not show network logo
+       (!network.isNativeAsset(token) || network.nativeTokenLogoName != network.networkLogoName), // non-native asset OR if the network is not the official Ethereum network, but uses ETH as gas
+       let image = network.networkLogoImage {
       Image(uiImage: image)
         .resizable()
+        .overlay(
+          Circle()
+            .stroke(lineWidth: 2)
+            .foregroundColor(.white)
+        )
         .frame(width: min(networkSymbolLength, maxNetworkSymbolLength ?? networkSymbolLength), height: min(networkSymbolLength, maxNetworkSymbolLength ?? networkSymbolLength))
     }
   }
@@ -125,14 +132,14 @@ struct NFTIconView: View {
   var network: BraveWallet.NetworkInfo
   /// NFT image url from metadata
   var url: URL?
-  /// If we should show the native token logo on non-native assets
-  var shouldShowNativeTokenIcon: Bool = false
+  /// If we should show the network logo on non-native assets
+  var shouldShowNetworkIcon: Bool = false
 
   @ScaledMetric var length: CGFloat = 40
   @ScaledMetric var tokenLogoLength: CGFloat = 15
 
   @ViewBuilder private var tokenLogo: some View {
-    if shouldShowNativeTokenIcon, !network.isNativeAsset(token), let image = network.nativeTokenLogoImage {
+    if shouldShowNetworkIcon, let image = network.nativeTokenLogoImage {
       Image(uiImage: image)
         .resizable()
         .frame(width: 15, height: 15)
@@ -144,7 +151,7 @@ struct NFTIconView: View {
       AssetIconView(
         token: token,
         network: network,
-        shouldShowNativeTokenIcon: shouldShowNativeTokenIcon,
+        shouldShowNetworkIcon: shouldShowNetworkIcon,
         length: length
       )
     }

Sources/BraveWallet/Crypto/Portfolio/EditUserAssetsView.swift

@@ -39,13 +39,13 @@ private struct EditTokenView: View {
             token: assetStore.token,
             network: assetStore.network,
             url: nftMetadata?.imageURL,
-            shouldShowNativeTokenIcon: true
+            shouldShowNetworkIcon: true
           )
         } else {
           AssetIconView(
             token: assetStore.token,
             network: assetStore.network,
-            shouldShowNativeTokenIcon: true
+            shouldShowNetworkIcon: true
           )
         }
         VStack(alignment: .leading) {

Sources/BraveWallet/Crypto/Portfolio/PortfolioView.swift

@@ -136,7 +136,7 @@ struct PortfolioView: View {
                 image: AssetIconView(
                   token: asset.token,
                   network: asset.network,
-                  shouldShowNativeTokenIcon: true
+                  shouldShowNetworkIcon: true
                 ),
                 title: asset.token.name,
                 symbol: asset.token.symbol,

Sources/BraveWallet/Crypto/Search/AssetSearchView.swift

@@ -114,13 +114,13 @@ struct AssetSearchView: View {
                         token: assetViewModel.token,
                         network: assetViewModel.network,
                         url: allNFTMetadata[assetViewModel.token.id]?.imageURL,
-                        shouldShowNativeTokenIcon: true
+                        shouldShowNetworkIcon: true
                       )
                     } else {
                       AssetIconView(
                         token: assetViewModel.token,
                         network: assetViewModel.network,
-                        shouldShowNativeTokenIcon: true
+                        shouldShowNetworkIcon: true
                       )
                     }
                   }

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

@@ -223,7 +223,7 @@ struct SwapTransactionConfirmationView: View {
           AssetIconView(
             token: token,
             network: network,
-            shouldShowNativeTokenIcon: true,
+            shouldShowNetworkIcon: true,
             length: assetIconSize,
             maxLength: maxAssetIconSize,
             networkSymbolLength: assetNetworkIconSize,

Sources/BraveWallet/Extensions/BraveWalletSwiftUIExtensions.swift

@@ -20,6 +20,19 @@ extension BraveWallet.TransactionInfo: Identifiable {
   // Already has `id` property
 }
 
+public enum AssetImageName: String {
+  case ethereum = "eth-asset-icon"
+  case solana = "sol-asset-icon"
+  case filecoin = "filecoin-asset-icon"
+  case polygon = "matic"
+  case binance = "bnb-asset-icon"
+  case celo = "celo"
+  case avalanche = "avax"
+  case fantom = "fantom"
+  case aurora = "aurora"
+  case optimism = "optimism"
+}
+
 extension BraveWallet.NetworkInfo: Identifiable {
   public var id: String {
     chainId
@@ -33,7 +46,7 @@ extension BraveWallet.NetworkInfo: Identifiable {
     .init(
       contractAddress: "",
       name: symbolName,
-      logo: nativeTokenLogo ?? "",
+      logo: nativeTokenLogoName ?? "",
       isErc20: false,
       isErc721: false,
       isErc1155: false,
@@ -48,31 +61,65 @@ extension BraveWallet.NetworkInfo: Identifiable {
     )
   }
 
-  public var nativeTokenLogo: String? {
-    if symbol.caseInsensitiveCompare("ETH") == .orderedSame {
-      return "eth-asset-icon"
-    } else if symbol.caseInsensitiveCompare("SOL") == .orderedSame {
-      return "sol-asset-icon"
-    } else if symbol.caseInsensitiveCompare("FIL") == .orderedSame {
-      return "filecoin-asset-icon"
+  public var nativeTokenLogoName: String? {
+    if let logoBySymbol = assetIconNameBySymbol(symbol) {
+      return logoBySymbol
+    } else if let logoByChainId = assetIconNameByChainId(chainId) {
+      return logoByChainId
+    } else {
+      return iconUrls.first
+    }
+  }
+
+  public var nativeTokenLogoImage: UIImage? {
+    guard let logo = nativeTokenLogoName else { return nil }
+    return UIImage(named: logo, in: .module, with: nil)
+  }
+
+  public var networkLogoName: String? {
+    return assetIconNameByChainId(chainId) ?? iconUrls.first
+  }
+
+  public var networkLogoImage: UIImage? {
+    guard let logo = networkLogoName else { return nil }
+    return UIImage(named: logo, in: .module, with: nil)
+  }
+
+  private func assetIconNameByChainId(_ chainId: String) -> String? {
+    if chainId.caseInsensitiveCompare(BraveWallet.MainnetChainId) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.GoerliChainId) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.SepoliaChainId) == .orderedSame {
+      return AssetImageName.ethereum.rawValue
+    } else if chainId.caseInsensitiveCompare(BraveWallet.SolanaMainnet) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.SolanaDevnet) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.SolanaTestnet) == .orderedSame {
+      return AssetImageName.solana.rawValue
+    } else if chainId.caseInsensitiveCompare(BraveWallet.FilecoinMainnet) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.FilecoinTestnet) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.FilecoinEthereumMainnetChainId) == .orderedSame || chainId.caseInsensitiveCompare(BraveWallet.FilecoinEthereumTestnetChainId) == .orderedSame {
+      return AssetImageName.filecoin.rawValue
     } else if chainId.caseInsensitiveCompare(BraveWallet.PolygonMainnetChainId) == .orderedSame {
-      return "matic"
+      return AssetImageName.polygon.rawValue
     } else if chainId.caseInsensitiveCompare(BraveWallet.BinanceSmartChainMainnetChainId) == .orderedSame {
-      return "bnb-asset-icon"
+      return AssetImageName.binance.rawValue
     } else if chainId.caseInsensitiveCompare(BraveWallet.CeloMainnetChainId) == .orderedSame {
-      return "celo"
+      return AssetImageName.celo.rawValue
     } else if chainId.caseInsensitiveCompare(BraveWallet.AvalancheMainnetChainId) == .orderedSame {
-      return "avax"
+      return AssetImageName.avalanche.rawValue
     } else if chainId.caseInsensitiveCompare(BraveWallet.FantomMainnetChainId) == .orderedSame {
-      return "fantom"
+      return AssetImageName.fantom.rawValue
+    } else if chainId.caseInsensitiveCompare(BraveWallet.AuroraMainnetChainId) == .orderedSame {
+      return AssetImageName.aurora.rawValue
+    } else if chainId.caseInsensitiveCompare(BraveWallet.OptimismMainnetChainId) == .orderedSame {
+      return AssetImageName.optimism.rawValue
     } else {
-      return iconUrls.first
+      return nil
     }
   }
 
-  public var nativeTokenLogoImage: UIImage? {
-    guard let logo = nativeTokenLogo else { return nil }
-    return UIImage(named: logo, in: .module, with: nil)
+  private func assetIconNameBySymbol(_ symbol: String) -> String? {
+    if symbol.caseInsensitiveCompare("ETH") == .orderedSame {
+      return AssetImageName.ethereum.rawValue
+    } else if symbol.caseInsensitiveCompare("SOL") == .orderedSame {
+      return AssetImageName.solana.rawValue
+    } else if symbol.caseInsensitiveCompare("FIL") == .orderedSame {
+      return AssetImageName.filecoin.rawValue
+    }
+    return nil
   }
 }
 

Sources/BraveWallet/NetworkIcon.swift

@@ -51,36 +51,10 @@ struct NetworkIcon: View {
 
   private typealias NetworkImageInfo = (iconName: String, grayscale: Bool)
   private var networkImageInfo: NetworkImageInfo? {
-    switch network.chainId {
-    case BraveWallet.MainnetChainId:
-      return ("eth-asset-icon", false)
-    case BraveWallet.GoerliChainId,
-      BraveWallet.SepoliaChainId:
-      return ("eth-asset-icon", true)
-    case BraveWallet.SolanaMainnet:
-      return ("sol-asset-icon", false)
-    case BraveWallet.SolanaTestnet, BraveWallet.SolanaDevnet:
-      return ("sol-asset-icon", true)
-    case BraveWallet.FilecoinMainnet:
-      return ("filecoin-asset-icon", false)
-    case BraveWallet.FilecoinTestnet:
-      return ("filecoin-asset-icon", true)
-    case BraveWallet.PolygonMainnetChainId:
-      return ("matic", false)
-    case BraveWallet.BinanceSmartChainMainnetChainId:
-      return ("bnb-asset-icon", false)
-    case BraveWallet.CeloMainnetChainId:
-      return ("celo", false)
-    case BraveWallet.AvalancheMainnetChainId:
-      return ("avax", false)
-    case BraveWallet.FantomMainnetChainId:
-      return ("fantom", false)
-    case BraveWallet.OptimismMainnetChainId:
-      return ("optimism", false)
-    case BraveWallet.AuroraMainnetChainId:
-      return ("aurora", false)
-    default:
-      return nil
+    let isGrayscale = WalletConstants.supportedTestNetworkChainIds.contains(network.chainId)
+    if let imageName = network.networkLogoName {
+      return (imageName, isGrayscale)
     }
+    return nil
   }
 }