Improve the total amount change color in the Wallet tab #3165

AlphaWallet/Assets.xcassets/price_down.imageset/Contents.json

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

AlphaWallet/Assets.xcassets/price_up.imageset/Contents.json

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

AlphaWallet/Core/Formatters/CurrencyFormatter.swift

@@ -5,10 +5,14 @@ import Foundation
 extension NumberFormatter {
 
     static let currency = Formatter(.currency)
-    static let usd = Formatter(.usd)
+    static let usd = Formatter(.usd(format: .withTrailingCurrency))
     static let percent = Formatter(.percent)
     static let shortCrypto = Formatter(.shortCrypto)
 
+    static func usd(format: USDFormat) -> Formatter {
+        Formatter(.usd(format: format))
+    }
+    
     class Formatter {
         private let formatter: NumberFormatter
 
@@ -22,8 +26,21 @@ extension NumberFormatter {
     }
 }
 
+enum USDFormat {
+    case withTrailingCurrency
+    case withLeadingCurrencySymbol(positiveSymbol: String)
+
+    static var priceChangeFormat: USDFormat {
+        .withLeadingCurrencySymbol(positiveSymbol: "+")
+    }
+
+    static var fiatFormat: USDFormat {
+        .withLeadingCurrencySymbol(positiveSymbol: "")
+    }
+}
+
 private enum NumberFormatterConfiguration {
-    case usd
+    case usd(format: USDFormat)
     case currency
     case percent
     case shortCrypto
@@ -39,9 +56,16 @@ private enum NumberFormatterConfiguration {
         case .currency:
             //TODO support multiple currency values
             formatter.currencyCode = Currency.USD.rawValue
-        case .usd:
+        case .usd(let format):
+            switch format {
+            case .withTrailingCurrency:
                 formatter.positiveFormat = "0.00" + " " + Constants.Currency.usd
                 formatter.negativeFormat = "-0.00" + " " + Constants.Currency.usd
+            case .withLeadingCurrencySymbol(let positiveSymbol):
+                formatter.positiveFormat = positiveSymbol + "$0.00"
+                formatter.negativeFormat = "-$0.00"
+            }
+
             formatter.currencyCode = String()
         case .percent:
             formatter.positiveFormat = "0.00"

AlphaWallet/Extensions/UIView.swift

@@ -60,6 +60,14 @@ extension UIView {
             bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -edgeInsets.bottom),
         ]
     }
+    func anchorsConstraintGreaterThanOrEqualTo(to view: UIView, edgeInsets: UIEdgeInsets = .zero) -> [NSLayoutConstraint] {
+        return [
+            leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: edgeInsets.left),
+            trailingAnchor.constraint(greaterThanOrEqualTo: view.trailingAnchor, constant: -edgeInsets.right),
+            topAnchor.constraint(greaterThanOrEqualTo: view.topAnchor, constant: edgeInsets.top),
+            bottomAnchor.constraint(greaterThanOrEqualTo: view.bottomAnchor, constant: -edgeInsets.bottom),
+        ]
+    }
 
     func anchorsConstraint(to view: UIView, edgeInsets: UIEdgeInsets = .zero) -> [NSLayoutConstraint] {
         return [

AlphaWallet/Style/AppStyle.swift

@@ -66,6 +66,8 @@ struct Colors {
     static let appGreenContrastBackground = UIColor(red: 86, green: 153, blue: 8)
     static let appLightButtonSeparator = UIColor(red: 255, green: 255, blue: 255, alpha: 0.2)
     static let appRed = UIColor(red: 204, green: 71, blue: 65)
+    static let apprecationRed = UIColor(hex: "ff3b30")
+    static let apprecationGreen = Colors.appHighlightGreen
     static let appGrayLabel = UIColor(red: 155, green: 155, blue: 155)
     static let settingsSubtitle = UIColor(red: 141, green: 141, blue: 141)
     static let qrCodeRectBorders = UIColor(red: 216, green: 216, blue: 216)
@@ -270,14 +272,14 @@ enum Screen {
             static let title = Colors.appText
             static let subtitle = Colors.appSubtitle
             static let valueChangeLabel = Colors.appGrayLabel
-            static func valueChangeValue(ticker: CoinTicker?) -> UIColor {
+            static func valueChangeValue(ticker: CoinTicker?, emptyValueColor: UIColor = Colors.appGrayLabel) -> UIColor {
                 switch EthCurrencyHelper(ticker: ticker).change24h {
                 case .appreciate:
-                    return Colors.appHighlightGreen
+                    return Colors.apprecationGreen
                 case .depreciate:
-                    return Colors.appRed
+                    return Colors.apprecationRed
                 case .none:
-                    return Colors.appGrayLabel
+                    return emptyValueColor
                 }
             }
             static let blockChainName = Colors.appWhite

AlphaWallet/Tokens/ViewControllers/SelectTokenViewController.swift

@@ -152,7 +152,7 @@ extension SelectTokenViewController: UITableViewDataSource {
             cell.configure(viewModel: .init(
                 token: token,
                 ticker: session.balanceCoordinator.coinTicker(token.addressAndRPCServer),
-                currencyAmount: session.balanceCoordinator.ethBalanceViewModel.currencyAmount,
+                currencyAmount: session.balanceCoordinator.ethBalanceViewModel.currencyAmountWithoutSymbol,
                 assetDefinitionStore: assetDefinitionStore
             ))
             cell.accessoryType = viewModel.accessoryType(selectedToken, indexPath: indexPath)

AlphaWallet/Tokens/ViewControllers/TokenViewController.swift

@@ -190,7 +190,7 @@ class TokenViewController: UIViewController {
             tokenInfoPageView.viewModel.currencyAmount = session.balanceCoordinator.ethBalanceViewModel.currencyAmount
 
             configure(viewModel: viewModel)
-        case .ERC875Token, .ERC875TokenOrder, .ERC721Token, .ERC721ForTicketToken,. ERC1155Token, .dapp, .tokenScript, .claimPaidErc875MagicLink:
+        case .ERC875Token, .ERC875TokenOrder, .ERC721Token, .ERC721ForTicketToken, .ERC1155Token, .dapp, .tokenScript, .claimPaidErc875MagicLink:
             break
         }
     }

AlphaWallet/Tokens/ViewControllers/TokensViewController.swift

@@ -521,7 +521,7 @@ extension TokensViewController: UITableViewDataSource {
                     cell.configure(viewModel: .init(
                         token: token,
                         ticker: session.balanceCoordinator.coinTicker(token.addressAndRPCServer),
-                        currencyAmount: session.balanceCoordinator.ethBalanceViewModel.currencyAmount,
+                        currencyAmount: session.balanceCoordinator.ethBalanceViewModel.currencyAmountWithoutSymbol,
                         assetDefinitionStore: assetDefinitionStore
                     ))
 

AlphaWallet/Tokens/ViewModels/EthTokenViewCellViewModel.swift

@@ -7,14 +7,14 @@ import BigInt
 struct EthTokenViewCellViewModel {
     private let shortFormatter = EtherNumberFormatter.short
     private let token: TokenObject
-    private let currencyAmount: String?
+    private let currencyAmount: Double?
     private let ticker: CoinTicker?
     private let assetDefinitionStore: AssetDefinitionStore
     private let isVisible: Bool
     init(
         token: TokenObject,
         ticker: CoinTicker?,
-        currencyAmount: String?,
+        currencyAmount: Double?,
         assetDefinitionStore: AssetDefinitionStore,
         isVisible: Bool = true
     ) {
@@ -30,7 +30,7 @@ struct EthTokenViewCellViewModel {
     }
 
     private var title: String {
-        return token.titleInPluralForm(withAssetDefinitionStore: assetDefinitionStore)
+        return token.symbolInPluralForm(withAssetDefinitionStore: assetDefinitionStore)
     }
 
     var backgroundColor: UIColor {
@@ -55,50 +55,54 @@ struct EthTokenViewCellViewModel {
         ])
     }
 
-    func cryptoValueAttributedString(amount: String) -> NSAttributedString {
-        return NSAttributedString(string: amount + " " + token.symbolInPluralForm(withAssetDefinitionStore: assetDefinitionStore), attributes: [
-            .foregroundColor: Screen.TokenCard.Color.subtitle,
-            .font: Screen.TokenCard.Font.subtitle
-        ])
-    }
-
     private var valuePercentageChangeColor: UIColor {
         return Screen.TokenCard.Color.valueChangeValue(ticker: ticker)
     }
 
-    var apprecation24hoursBackgroundColor: UIColor {
+    private var apprecation24hoursBackgroundColor: UIColor {
         valuePercentageChangeColor.withAlphaComponent(0.07)
     }
 
-    var apprecation24hoursAttributedString: NSAttributedString {
-        return NSAttributedString(string: " " + valuePercentageChangeValue + " ", attributes: [
-            .foregroundColor: valuePercentageChangeColor,
-            .font: Screen.TokenCard.Font.valueChangeLabel
-        ])
+    private var apprecation24hoursImage: UIImage? {
+        switch EthCurrencyHelper(ticker: ticker).change24h {
+        case .appreciate:
+            return R.image.price_up()
+        case .depreciate:
+            return R.image.price_down()
+        case .none:
+            return .none
+        }
     }
 
-    private var valuePercentageChangeValue: String {
+    private var apprecation24hoursAttributedString: NSAttributedString {
+        let valuePercentageChangeValue: String = {
             switch EthCurrencyHelper(ticker: ticker).change24h {
             case .appreciate(let percentageChange24h):
-            return "▲ \(percentageChange24h)%"
+                return "\(percentageChange24h)%"
             case .depreciate(let percentageChange24h):
-            return "▼ \(percentageChange24h)%"
+                return "\(percentageChange24h)%"
             case .none:
                 return "-"
             }
+        }()
+
+        return NSAttributedString(string: valuePercentageChangeValue, attributes: [
+            .foregroundColor: valuePercentageChangeColor,
+            .font: Screen.TokenCard.Font.valueChangeLabel
+        ])
     }
 
     private var priceChangeUSDValue: String {
         if let result = EthCurrencyHelper(ticker: ticker).valueChanged24h(value: token.optionalDecimalValue) {
-            return NumberFormatter.usd.string(from: result) ?? "-"
+            return NumberFormatter.usd(format: .priceChangeFormat).string(from: result) ?? "-"
         } else {
             return "-"
         }
     }
 
-    var priceChangeUSDAttributedString: NSAttributedString {
+    var priceChangeUSDValueAttributedString: NSAttributedString {
         return NSAttributedString(string: priceChangeUSDValue, attributes: [
-            .foregroundColor: Screen.TokenCard.Color.valueChangeLabel,
+            .foregroundColor: valuePercentageChangeColor,
             .font: Screen.TokenCard.Font.valueChangeLabel
         ])
     }
@@ -107,7 +111,7 @@ struct EthTokenViewCellViewModel {
         if token.server.isTestnet {
             return nil
         } else {
-            return currencyAmount
+            return currencyAmount.flatMap { NumberFormatter.usd(format: .fiatFormat).string(from: $0) ?? "-" }
         }
     }
 
@@ -130,13 +134,6 @@ struct EthTokenViewCellViewModel {
         return .init(server: token.server)
     }
 
-    func priceChangeUSDAttributedString(ticker: CoinTicker?) -> NSAttributedString {
-        return NSAttributedString(string: priceChangeUSDValue, attributes: [
-            .foregroundColor: Screen.TokenCard.Color.valueChangeLabel,
-            .font: Screen.TokenCard.Font.valueChangeLabel
-        ])
-    }
-
     private func amountAccordingRPCServer(currencyAmount: String?) -> String? {
         if token.server.isTestnet {
             return nil
@@ -171,6 +168,10 @@ struct EthTokenViewCellViewModel {
         ])
     }
 
+    var apprecationViewModel: ApprecationViewModel {
+        .init(icon: apprecation24hoursImage, valueAttributedString: apprecation24hoursAttributedString, backgroundColor: apprecation24hoursBackgroundColor)
+    }
+
     private func valuePercentageChangeColor(ticker: CoinTicker?) -> UIColor {
         return Screen.TokenCard.Color.valueChangeValue(ticker: ticker)
     }

AlphaWallet/Tokens/ViewModels/FungibleTokenViewCellViewModel.swift

@@ -19,7 +19,7 @@ struct FungibleTokenViewCellViewModel {
     }
 
     private var title: String {
-        return token.titleInPluralForm(withAssetDefinitionStore: assetDefinitionStore)
+        return token.symbolInPluralForm(withAssetDefinitionStore: assetDefinitionStore)
     }
 
     private var amount: String {
@@ -56,42 +56,57 @@ struct FungibleTokenViewCellViewModel {
         valuePercentageChangeColor.withAlphaComponent(0.07)
     }
 
-    var apprecation24hoursAttributedString: NSAttributedString {
-        return NSAttributedString(string: " " + valuePercentageChangeValue + " ", attributes: [
-            .foregroundColor: valuePercentageChangeColor,
-            .font: Screen.TokenCard.Font.valueChangeLabel
-        ])
+    var apprecationViewModel: ApprecationViewModel {
+        .init(icon: apprecation24hoursImage, valueAttributedString: apprecation24hoursAttributedString, backgroundColor: apprecation24hoursBackgroundColor)
     }
 
-    private var valuePercentageChangeValue: String {
+    private var apprecation24hoursAttributedString: NSAttributedString {
+        let apprecation24hours: String = {
             switch EthCurrencyHelper(ticker: ticker).change24h {
             case .appreciate(let percentageChange24h):
-            return "▲ \(percentageChange24h)%"
+                return "\(percentageChange24h)%"
             case .depreciate(let percentageChange24h):
-            return "▼ \(percentageChange24h)%"
+                return "\(percentageChange24h)%"
             case .none:
                 return "-"
             }
+        }()
+        
+        return NSAttributedString(string: apprecation24hours, attributes: [
+            .foregroundColor: valuePercentageChangeColor,
+            .font: Screen.TokenCard.Font.valueChangeLabel
+        ])
+    }
+
+    private var apprecation24hoursImage: UIImage? {
+        switch EthCurrencyHelper(ticker: ticker).change24h {
+        case .appreciate:
+            return R.image.price_up()
+        case .depreciate:
+            return R.image.price_down()
+        case .none:
+            return .none
+        }
     }
 
     private var priceChangeUSDValue: String {
         if let result = EthCurrencyHelper(ticker: ticker).valueChanged24h(value: token.optionalDecimalValue) {
-            return NumberFormatter.usd.string(from: result) ?? "-"
+            return NumberFormatter.usd(format: .priceChangeFormat).string(from: result) ?? "-"
         } else {
             return "-"
         }
     }
 
-    var priceChangeUSDAttributedString: NSAttributedString {
+    var priceChangeUSDValueAttributedString: NSAttributedString {
         return NSAttributedString(string: priceChangeUSDValue, attributes: [
-            .foregroundColor: Screen.TokenCard.Color.valueChangeLabel,
+            .foregroundColor: valuePercentageChangeColor,
             .font: Screen.TokenCard.Font.valueChangeLabel
         ])
     }
     
     private var fiatValue: String {
         if let fiatValue = EthCurrencyHelper(ticker: ticker).fiatValue(value: token.optionalDecimalValue) {
-            return NumberFormatter.usd.string(from: fiatValue) ?? "-"
+            return NumberFormatter.usd(format: .fiatFormat).string(from: fiatValue) ?? "-"
         } else {
             return "-"
         }

AlphaWallet/Tokens/Views/BlockchainTagLabel.swift

@@ -14,14 +14,16 @@ class BlockchainTagLabel: UIView {
         label.translatesAutoresizingMaskIntoConstraints = false
         return label
     }()
+    private var heightConstraint: NSLayoutConstraint!
 
     init() {
         super.init(frame: .zero)
         translatesAutoresizingMaskIntoConstraints = false
         addSubview(label)
+        heightConstraint = heightAnchor.constraint(equalToConstant: Screen.TokenCard.Metric.blockChainTagHeight)
         
         NSLayoutConstraint.activate([
-            label.heightAnchor.constraint(equalToConstant: Screen.TokenCard.Metric.blockChainTagHeight),
+            heightConstraint,
             label.anchorsConstraint(to: self, edgeInsets: .init(top: 0, left: 10, bottom: 0, right: 10)),
         ])
     }
@@ -34,6 +36,11 @@ class BlockchainTagLabel: UIView {
         backgroundColor = viewModel.blockChainNameBackgroundColor
         layer.cornerRadius = viewModel.blockChainNameCornerRadius
         isHidden = viewModel.blockChainNameLabelHidden
+        if isHidden {
+            NSLayoutConstraint.deactivate([heightConstraint])
+        } else {
+            NSLayoutConstraint.activate([heightConstraint])
+        }
 
         label.textAlignment = viewModel.blockChainNameTextAlignment
         label.textColor = viewModel.blockChainNameColor

AlphaWallet/Tokens/Views/EthTokenViewCell.swift

@@ -4,18 +4,86 @@ import Foundation
 import UIKit
 import Kingfisher
 
+struct ApprecationViewModel {
+    let valueAttributedString: NSAttributedString
+    let icon: UIImage?
+    let backgroundColor: UIColor
+
+    init(icon: UIImage?, valueAttributedString: NSAttributedString, backgroundColor: UIColor) {
+        self.valueAttributedString = valueAttributedString
+        self.icon = icon
+        self.backgroundColor = backgroundColor
+    }
+}
+
+class ApprecationView: UIView {
+
+    private let valueLabel: UILabel = {
+        let view = UILabel()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.textAlignment = .center
+        view.setContentCompressionResistancePriority(.required, for: .vertical)
+        view.setContentHuggingPriority(.required, for: .vertical)
+
+        return view
+    }()
+
+    private let iconView: UIImageView = {
+        let view = UIImageView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.contentMode = .scaleAspectFit
+        return view
+    }()
+
+    init(edgeInsets: UIEdgeInsets = .init(top: 0, left: 2, bottom: 0, right: 2), spacing: CGFloat = 4) {
+        super.init(frame: .zero)
+        self.translatesAutoresizingMaskIntoConstraints = false
+
+        let stackView = [iconView, valueLabel].asStackView(spacing: spacing, alignment: .center)
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+
+        addSubview(stackView)
+        setContentCompressionResistancePriority(.required, for: .vertical)
+        setContentHuggingPriority(.required, for: .vertical)
+
+        NSLayoutConstraint.activate([
+            iconView.widthAnchor.constraint(equalToConstant: 9),
+            iconView.heightAnchor.constraint(equalToConstant: 9),
+
+            stackView.anchorsConstraint(to: self, edgeInsets: edgeInsets)
+        ])
+    }
+
+    required init?(coder: NSCoder) {
+        return nil
+    }
+
+    func configure(viewModel: ApprecationViewModel) {
+        valueLabel.attributedText = viewModel.valueAttributedString
+        iconView.image = viewModel.icon
+        iconView.isHidden = viewModel.icon == nil
+        backgroundColor = viewModel.backgroundColor
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+
+        layer.cornerRadius = 2.0
+    }
+}
+
 class EthTokenViewCell: UITableViewCell {
     private let background = UIView()
     private let titleLabel = UILabel()
-    private let apprecation24hoursLabel = UILabel()
+    private let apprecation24hoursView = ApprecationView()
     private let priceChangeLabel = UILabel()
     private let fiatValueLabel = UILabel()
     private let cryptoValueLabel = UILabel()
     private var viewsWithContent: [UIView] {
-        [titleLabel, apprecation24hoursLabel, priceChangeLabel]
+        [titleLabel, apprecation24hoursView, priceChangeLabel]
     }
 
-    private lazy var changeValueContainer: UIView = [priceChangeLabel, apprecation24hoursLabel].asStackView(spacing: 5)
+    private lazy var changeValueContainer: UIView = [priceChangeLabel, apprecation24hoursView].asStackView(spacing: 5)
 
     private var tokenIconImageView: TokenImageView = {
         let imageView = TokenImageView()
@@ -30,17 +98,17 @@ class EthTokenViewCell: UITableViewCell {
 
         contentView.addSubview(background)
         background.translatesAutoresizingMaskIntoConstraints = false
-        apprecation24hoursLabel.textAlignment = .center
         priceChangeLabel.textAlignment = .center
         fiatValueLabel.textAlignment = .center
         fiatValueLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
         fiatValueLabel.setContentHuggingPriority(.required, for: .horizontal)
 
         let col0 = tokenIconImageView
+        let row1 = [cryptoValueLabel, UIView.spacerWidth(flexible: true), changeValueContainer, blockChainTagLabel].asStackView(spacing: 5, alignment: .center)
         let col1 = [
             [titleLabel, UIView.spacerWidth(flexible: true), fiatValueLabel].asStackView(spacing: 5),
-            [cryptoValueLabel, UIView.spacerWidth(flexible: true), changeValueContainer, blockChainTagLabel].asStackView(spacing: 5)
-        ].asStackView(axis: .vertical, spacing: 2)
+            row1
+        ].asStackView(axis: .vertical)
         let stackView = [col0, col1].asStackView(spacing: 12, alignment: .center)
         stackView.translatesAutoresizingMaskIntoConstraints = false
         background.addSubview(stackView)
@@ -48,7 +116,8 @@ class EthTokenViewCell: UITableViewCell {
         NSLayoutConstraint.activate([
             tokenIconImageView.heightAnchor.constraint(equalToConstant: 40),
             tokenIconImageView.widthAnchor.constraint(equalToConstant: 40),
-            stackView.anchorsConstraint(to: background, edgeInsets: .init(top: 16, left: 20, bottom: 16, right: 16)),
+            row1.heightAnchor.constraint(greaterThanOrEqualToConstant: 20),
+            stackView.anchorsConstraint(to: background, edgeInsets: .init(top: 12, left: 20, bottom: 16, right: 12)),
             background.anchorsConstraint(to: contentView)
         ])
     }
@@ -70,10 +139,9 @@ class EthTokenViewCell: UITableViewCell {
         cryptoValueLabel.attributedText = viewModel.cryptoValueAttributedString
         cryptoValueLabel.baselineAdjustment = .alignCenters
 
-        apprecation24hoursLabel.attributedText = viewModel.apprecation24hoursAttributedString
-        apprecation24hoursLabel.backgroundColor = viewModel.apprecation24hoursBackgroundColor
+        apprecation24hoursView.configure(viewModel: viewModel.apprecationViewModel)
 
-        priceChangeLabel.attributedText = viewModel.priceChangeUSDAttributedString
+        priceChangeLabel.attributedText = viewModel.priceChangeUSDValueAttributedString
 
         fiatValueLabel.attributedText = viewModel.fiatValueAttributedString
 
@@ -85,10 +153,4 @@ class EthTokenViewCell: UITableViewCell {
         blockChainTagLabel.configure(viewModel: viewModel.blockChainTagViewModel)
         changeValueContainer.isHidden = !viewModel.blockChainTagViewModel.blockChainNameLabelHidden
     }
-
-    override func layoutSubviews() {
-        super.layoutSubviews()
-
-        priceChangeLabel.layer.cornerRadius = 2.0
-    }
 }

AlphaWallet/Tokens/Views/FungibleTokenViewCell.swift

@@ -7,15 +7,15 @@ import Kingfisher
 class FungibleTokenViewCell: UITableViewCell {
     private let background = UIView()
     private let titleLabel = UILabel()
-    private let apprecation24hoursLabel = UILabel()
+    private let apprecation24hoursView = ApprecationView()
     private let priceChangeLabel = UILabel()
     private let fiatValueLabel = UILabel()
     private let cryptoValueLabel = UILabel()
     private var viewsWithContent: [UIView] {
-        [titleLabel, apprecation24hoursLabel, priceChangeLabel]
+        [titleLabel, apprecation24hoursView, priceChangeLabel]
     }
 
-    private lazy var changeValueContainer: UIView = [priceChangeLabel, apprecation24hoursLabel].asStackView(spacing: 5)
+    private lazy var changeValueContainer: UIView = [priceChangeLabel, apprecation24hoursView].asStackView(spacing: 5)
 
     private var tokenIconImageView: TokenImageView = {
         let imageView = TokenImageView()
@@ -30,17 +30,17 @@ class FungibleTokenViewCell: UITableViewCell {
 
         contentView.addSubview(background)
         background.translatesAutoresizingMaskIntoConstraints = false
-        apprecation24hoursLabel.textAlignment = .center
         priceChangeLabel.textAlignment = .center
         fiatValueLabel.textAlignment = .center
         fiatValueLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
         fiatValueLabel.setContentHuggingPriority(.required, for: .horizontal)
 
         let col0 = tokenIconImageView
+        let row1 = [cryptoValueLabel, UIView.spacerWidth(flexible: true), changeValueContainer, blockChainTagLabel].asStackView(spacing: 5, alignment: .center)
         let col1 = [
             [titleLabel, UIView.spacerWidth(flexible: true), fiatValueLabel].asStackView(spacing: 5),
-            [cryptoValueLabel, UIView.spacerWidth(flexible: true), changeValueContainer, blockChainTagLabel].asStackView(spacing: 5)
-        ].asStackView(axis: .vertical, spacing: 2)
+            row1
+        ].asStackView(axis: .vertical)
         let stackView = [col0, col1].asStackView(spacing: 12, alignment: .center)
         stackView.translatesAutoresizingMaskIntoConstraints = false
         background.addSubview(stackView)
@@ -48,7 +48,8 @@ class FungibleTokenViewCell: UITableViewCell {
         NSLayoutConstraint.activate([
             tokenIconImageView.heightAnchor.constraint(equalToConstant: 40),
             tokenIconImageView.widthAnchor.constraint(equalToConstant: 40),
-            stackView.anchorsConstraint(to: background, edgeInsets: .init(top: 16, left: 20, bottom: 16, right: 16)),
+            row1.heightAnchor.constraint(greaterThanOrEqualToConstant: 20),
+            stackView.anchorsConstraint(to: background, edgeInsets: .init(top: 12, left: 20, bottom: 16, right: 12)),
             background.anchorsConstraint(to: contentView)
         ])
     }
@@ -70,10 +71,9 @@ class FungibleTokenViewCell: UITableViewCell {
         cryptoValueLabel.attributedText = viewModel.cryptoValueAttributedString
         cryptoValueLabel.baselineAdjustment = .alignCenters
 
-        apprecation24hoursLabel.attributedText = viewModel.apprecation24hoursAttributedString
-        apprecation24hoursLabel.backgroundColor = viewModel.apprecation24hoursBackgroundColor
+        apprecation24hoursView.configure(viewModel: viewModel.apprecationViewModel)
 
-        priceChangeLabel.attributedText = viewModel.priceChangeUSDAttributedString
+        priceChangeLabel.attributedText = viewModel.priceChangeUSDValueAttributedString
 
         fiatValueLabel.attributedText = viewModel.fiatValueAttributedString
 

AlphaWalletTests/Activitities/FakeActivitiesService.swift

@@ -3,6 +3,7 @@
 @testable import AlphaWallet
 
 class FakeActivitiesService: ActivitiesServiceType {
+    var sessions: ServerDictionary<WalletSession> { .make() }
     var subscribableViewModel: Subscribable<ActivitiesViewModel> { .init(nil) }
     var subscribableUpdatedActivity: Subscribable<Activity> { .init(nil) }