diff --git a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/aurora.imageset/Contents.json b/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/aurora.imageset/Contents.json index 5ea50b5d6fd..870a55c5b37 100644 --- a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/aurora.imageset/Contents.json +++ b/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" }, diff --git a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/Contents.json b/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/Contents.json index 825b66581ca..314f5d47041 100644 --- a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/Contents.json +++ b/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" }, diff --git a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/matic-asset-icon.png b/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/matic-asset-icon.png new file mode 100644 index 00000000000..09181389005 Binary files /dev/null and b/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/matic-asset-icon.png differ diff --git a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/matic.png b/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/matic.png deleted file mode 100644 index fb5c1a35735..00000000000 Binary files a/Sources/BraveWallet/Assets.xcassets/Brave Wallet/Asset Icons/matic.imageset/matic.png and /dev/null differ diff --git a/Sources/BraveWallet/Crypto/Accounts/Activity/AccountActivityView.swift b/Sources/BraveWallet/Crypto/Accounts/Activity/AccountActivityView.swift index 69b552e3ead..e0523d00bc5 100644 --- a/Sources/BraveWallet/Crypto/Accounts/Activity/AccountActivityView.swift +++ b/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, diff --git a/Sources/BraveWallet/Crypto/AssetIconView.swift b/Sources/BraveWallet/Crypto/AssetIconView.swift index 8a233669b97..ff9432fb486 100644 --- a/Sources/BraveWallet/Crypto/AssetIconView.swift +++ b/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 ) } diff --git a/Sources/BraveWallet/Crypto/Portfolio/EditUserAssetsView.swift b/Sources/BraveWallet/Crypto/Portfolio/EditUserAssetsView.swift index 26f9326e582..64e4ad308b7 100644 --- a/Sources/BraveWallet/Crypto/Portfolio/EditUserAssetsView.swift +++ b/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) { diff --git a/Sources/BraveWallet/Crypto/Portfolio/PortfolioView.swift b/Sources/BraveWallet/Crypto/Portfolio/PortfolioView.swift index e6c28470900..e987272bbd6 100644 --- a/Sources/BraveWallet/Crypto/Portfolio/PortfolioView.swift +++ b/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, diff --git a/Sources/BraveWallet/Crypto/Search/AssetSearchView.swift b/Sources/BraveWallet/Crypto/Search/AssetSearchView.swift index 77fb5704117..87dce55f936 100644 --- a/Sources/BraveWallet/Crypto/Search/AssetSearchView.swift +++ b/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 ) } } diff --git a/Sources/BraveWallet/Crypto/Transaction Confirmations/SwapTransactionConfirmationView.swift b/Sources/BraveWallet/Crypto/Transaction Confirmations/SwapTransactionConfirmationView.swift index 02524bdc1a8..b6ca1e745a6 100644 --- a/Sources/BraveWallet/Crypto/Transaction Confirmations/SwapTransactionConfirmationView.swift +++ b/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, diff --git a/Sources/BraveWallet/Extensions/BraveWalletSwiftUIExtensions.swift b/Sources/BraveWallet/Extensions/BraveWalletSwiftUIExtensions.swift index f0a1c3a26ce..9dd44e0882c 100644 --- a/Sources/BraveWallet/Extensions/BraveWalletSwiftUIExtensions.swift +++ b/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 } } diff --git a/Sources/BraveWallet/NetworkIcon.swift b/Sources/BraveWallet/NetworkIcon.swift index 3c5717cc78b..fd3587b3d95 100644 --- a/Sources/BraveWallet/NetworkIcon.swift +++ b/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 } }