Feature/collectibles ui fixes (trustwallet#710)

* Update ui of the collection view. Add random color to be more lighter.

* Add animation to the cell transition.

* Update of the ui elements.

* Change bacground color to be more soft.

* Add minor ui fixes.

* Add missing title.

* Update with usage of the app style.

* Update frame of the cells.

Podfile

@@ -32,6 +32,8 @@ target 'Trust' do
   pod 'TrustWeb3Provider', :git=>'https://github.com/TrustWallet/trust-web3-provider', :branch=>'master'
   pod 'JdenticonSwift'
   pod 'URLNavigator'
+  pod 'RandomColorSwift'
+  pod 'Hero'
 
   target 'TrustTests' do
     inherit! :search_paths

Podfile.lock

@@ -27,6 +27,7 @@ PODS:
   - GoogleToolboxForMac/Defines (2.1.3)
   - "GoogleToolboxForMac/NSData+zlib (2.1.3)":
     - GoogleToolboxForMac/Defines (= 2.1.3)
+  - Hero (1.2.0)
   - JdenticonSwift (0.0.1)
   - JSONRPCKit (2.0.0):
     - Result (~> 3.0)
@@ -57,6 +58,7 @@ PODS:
   - R.swift (4.0.0):
     - R.swift.Library (~> 4.0.0)
   - R.swift.Library (4.0.0)
+  - RandomColorSwift (1.0.0)
   - Realm (3.0.2):
     - Realm/Headers (= 3.0.2)
   - Realm/Headers (3.0.2)
@@ -89,6 +91,7 @@ DEPENDENCIES:
   - Eureka (~> 4.1.1)
   - Fabric
   - Firebase/Core
+  - Hero
   - JdenticonSwift
   - JSONRPCKit (from `https://github.com/bricklife/JSONRPCKit.git`)
   - KeychainSwift
@@ -99,6 +102,7 @@ DEPENDENCIES:
   - PromiseKit (~> 6.0)
   - QRCodeReaderViewController (from `https://github.com/yannickl/QRCodeReaderViewController.git`, branch `master`)
   - R.swift
+  - RandomColorSwift
   - RealmSwift
   - SAMKeychain
   - SeedStackViewController
@@ -123,6 +127,7 @@ SPEC REPOS:
     - FirebaseCore
     - FirebaseInstanceID
     - GoogleToolboxForMac
+    - Hero
     - JdenticonSwift
     - KeychainSwift
     - Kingfisher
@@ -133,6 +138,7 @@ SPEC REPOS:
     - PromiseKit
     - R.swift
     - R.swift.Library
+    - RandomColorSwift
     - Realm
     - RealmSwift
     - Result
@@ -187,6 +193,7 @@ SPEC CHECKSUMS:
   FirebaseCore: 90cb1c53d69b556f112a1bf72b5fcfaad7650790
   FirebaseInstanceID: 8d20d890d65c917f9f7d9950b6e10a760ad34321
   GoogleToolboxForMac: 2501e2ad72a52eb3dfe7bd9aee7dad11b858bd20
+  Hero: 33dadf2cd1c98af71e213dcbc2902e6e03622a4e
   JdenticonSwift: bc532f2761566eb29f26b085e5f72de25bc065ce
   JSONRPCKit: 22132c575ba2dc6f2f4ae72fda4943a63efca686
   KeychainSwift: f9f7910449a0c0fd2cabc889121530dd2c477c33
@@ -199,6 +206,7 @@ SPEC CHECKSUMS:
   QRCodeReaderViewController: e8f27d035b3e72b1d4b1c61ff66458287e3be0ff
   R.swift: d6a5ec2f55a8441dc0ed9f1f8b37d7d11ae85c66
   R.swift.Library: c3af34921024333546e23b70e70d0b4e0cffca75
+  RandomColorSwift: 9f85058b721665d52d239ca166a913e083506444
   Realm: 6f23fd1f178a09342eac21bfa7c2bf4312a7a180
   RealmSwift: 695393add1b8f9d5fa75dd16e6355cf3935f71e2
   Result: d2d07204ce72856f1fd9130bbe42c35a7b0fea10
@@ -213,6 +221,6 @@ SPEC CHECKSUMS:
   TrustWeb3Provider: 50fa391bdf170feb43dd4419992931510a5751d8
   URLNavigator: af5582fbbb3586c958be16835d799bfdb23a4793
 
-PODFILE CHECKSUM: dfb3c3461a3ae60b1be1a52500244ab4ce28dba9
+PODFILE CHECKSUM: 3b620237d88f5d669715d49a9b654c9f029bc7a0
 
 COCOAPODS: 1.5.0

Trust.xcodeproj/project.pbxproj

@@ -2773,6 +2773,7 @@
 				"${BUILT_PRODUCTS_DIR}/CryptoSwift/CryptoSwift.framework",
 				"${BUILT_PRODUCTS_DIR}/Eureka/Eureka.framework",
 				"${BUILT_PRODUCTS_DIR}/GoogleToolboxForMac/GoogleToolboxForMac.framework",
+				"${BUILT_PRODUCTS_DIR}/Hero/Hero.framework",
 				"${BUILT_PRODUCTS_DIR}/JSONRPCKit/JSONRPCKit.framework",
 				"${BUILT_PRODUCTS_DIR}/JdenticonSwift/JdenticonSwift.framework",
 				"${BUILT_PRODUCTS_DIR}/KeychainSwift/KeychainSwift.framework",
@@ -2782,6 +2783,7 @@
 				"${BUILT_PRODUCTS_DIR}/PromiseKit/PromiseKit.framework",
 				"${BUILT_PRODUCTS_DIR}/QRCodeReaderViewController/QRCodeReaderViewController.framework",
 				"${BUILT_PRODUCTS_DIR}/R.swift.Library/Rswift.framework",
+				"${BUILT_PRODUCTS_DIR}/RandomColorSwift/RandomColorSwift.framework",
 				"${BUILT_PRODUCTS_DIR}/Realm/Realm.framework",
 				"${BUILT_PRODUCTS_DIR}/RealmSwift/RealmSwift.framework",
 				"${BUILT_PRODUCTS_DIR}/Result/Result.framework",
@@ -2804,6 +2806,7 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CryptoSwift.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Eureka.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/GoogleToolboxForMac.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Hero.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/JSONRPCKit.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/JdenticonSwift.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/KeychainSwift.framework",
@@ -2813,6 +2816,7 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/PromiseKit.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/QRCodeReaderViewController.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Rswift.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RandomColorSwift.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Realm.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RealmSwift.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Result.framework",

Trust/Style/AppStyle.swift

@@ -10,6 +10,7 @@ enum AppStyle {
     case largeAmount
     case error
     case formHeader
+    case collactablesHeader
 
     var font: UIFont {
         switch self {
@@ -27,6 +28,8 @@ enum AppStyle {
             return UIFont.systemFont(ofSize: 12, weight: .light)
         case .formHeader:
             return UIFont.systemFont(ofSize: 14, weight: .regular)
+        case .collactablesHeader:
+            return UIFont.systemFont(ofSize: 21, weight: UIFont.Weight.regular)
         }
     }
 
@@ -42,6 +45,8 @@ enum AppStyle {
             return Colors.errorRed
         case .formHeader:
             return Colors.doveGray
+        case .collactablesHeader:
+            return Colors.lightDark
         }
     }
 }

Trust/Style/Colors.swift

@@ -21,4 +21,6 @@ struct Colors {
     static let charcoal = UIColor(hex: "464646")
     static let lightBlack = UIColor(hex: "313849")
     static let lightBlue = UIColor(hex: "007aff")
+    static let lightDark = UIColor(hex: "333333")
+
 }

Trust/Style/Styles.swift

@@ -37,7 +37,7 @@ struct StyleLayout {
     static let sideMargin: CGFloat = 15
 
     struct TableView {
-        static let heightForHeaderInSection: CGFloat = 30
+        static let heightForHeaderInSection: CGFloat = 40
         static let separatorColor = UIColor(hex: "d7d7d7")
     }
 }

Trust/Tokens/Coordinators/TokensCoordinator.swift

@@ -65,8 +65,8 @@ class TokensCoordinator: Coordinator {
     }
 
     @objc func showSpinningWheel(_ notification: NSNotification) {
-        if let token = notification.userInfo?["token"] as? NonFungibleTokenObject {
-           didSelectToken(token)
+        if let token = notification.userInfo?["token"] as? NonFungibleTokenObject, let backgroundColor =  notification.userInfo?["color"] as? UIColor {
+            didSelectToken(token, with: backgroundColor)
         }
     }
 
@@ -143,9 +143,12 @@ class TokensCoordinator: Coordinator {
         }
     }
 
-    private func didSelectToken(_ token: NonFungibleTokenObject) {
+    private func didSelectToken(_ token: NonFungibleTokenObject, with backgroundColor: UIColor) {
         let controller = NFTokenViewController(token: token)
         controller.delegate = self
+        controller.imageView.backgroundColor = backgroundColor
+        navigationController.hero.isEnabled = true
+        navigationController.hero.navigationAnimationType = .none
         navigationController.pushViewController(controller, animated: true)
     }
 

Trust/Tokens/ViewControllers/NFTokenViewController.swift

@@ -4,6 +4,7 @@ import Foundation
 import UIKit
 import StackViewController
 import Kingfisher
+import Hero
 
 protocol NFTokenViewControllerDelegate: class {
     func didPressToken(token: NonFungibleTokenObject, in viewController: NFTokenViewController)
@@ -37,6 +38,17 @@ class NFTokenViewController: UIViewController {
 
     let token: NonFungibleTokenObject
 
+    lazy var imageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.kf.setImage(
+            with: viewModel.imageURL,
+            placeholder: viewModel.placeholder
+        )
+        imageView.contentMode = .scaleAspectFit
+        return imageView
+    }()
+
     lazy var viewModel: NFTDetailsViewModel = {
         return NFTDetailsViewModel(token: token)
     }()
@@ -46,22 +58,23 @@ class NFTokenViewController: UIViewController {
         self.token = token
         super.init(nibName: nil, bundle: nil)
 
+        self.hero.isEnabled = true
+        self.view.hero.id = token.uniqueID
+
         self.view.addSubview(scrollView)
         scrollView.addSubview(stackView)
 
-        let imageView = UIImageView()
-        imageView.translatesAutoresizingMaskIntoConstraints = false
-        imageView.kf.setImage(
-            with: viewModel.imageURL,
-            placeholder: viewModel.placeholder
-        )
-        imageView.contentMode = .scaleAspectFit
+        let titleLabel = UILabel()
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+        titleLabel.numberOfLines = 0
+        titleLabel.text = viewModel.title
+        titleLabel.textColor = UIColor.black
 
         let descriptionLabel = UILabel()
         descriptionLabel.translatesAutoresizingMaskIntoConstraints = false
         descriptionLabel.numberOfLines = 0
         descriptionLabel.text = viewModel.descriptionText
-        descriptionLabel.textColor = viewModel.descriptionTextColor
+        descriptionLabel.textColor = UIColor.lightGray
 
         let internalButton = Button(size: .normal, style: .border)
         internalButton.translatesAutoresizingMaskIntoConstraints = false
@@ -74,9 +87,11 @@ class NFTokenViewController: UIViewController {
         externalButton.addTarget(self, action: #selector(externalTap), for: .touchUpInside)
 
         view.backgroundColor = .white
-        navigationItem.title = viewModel.title
+        title = viewModel.title
         stackView.addArrangedSubview(imageView)
         stackView.addArrangedSubview(.spacer(height: 15))
+        stackView.addArrangedSubview(titleLabel)
+        stackView.addArrangedSubview(.spacer(height: 15))
         stackView.addArrangedSubview(descriptionLabel)
         stackView.addArrangedSubview(.spacer(height: 15))
         stackView.addArrangedSubview(sendButton)
@@ -87,7 +102,8 @@ class NFTokenViewController: UIViewController {
         stackView.addArrangedSubview(.spacer(height: 10))
 
         NSLayoutConstraint.activate([
-            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
+           // scrollView.topAnchor.constraint(equalTo: view.topAnchor),
+            scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
             scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
             scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),

Trust/Tokens/ViewControllers/NonFungibleTokensViewController.swift

@@ -27,7 +27,7 @@ class NonFungibleTokensViewController: UIViewController {
         tableView.delegate = self
         tableView.dataSource = self
         tableView.separatorStyle = .none
-        tableView.backgroundColor = .white
+        tableView.backgroundColor = viewModel.tableViewBacgroundColor
         view.addSubview(tableView)
         tableView.register(R.nib.nonFungibleTokenViewCell(), forCellReuseIdentifier: R.nib.nonFungibleTokenViewCell.name)
         NSLayoutConstraint.activate([
@@ -84,7 +84,7 @@ class NonFungibleTokensViewController: UIViewController {
     }
 
     fileprivate func hederView(for section: Int) -> UIView {
-        return SectionHeader(fillColor: viewModel.headerBackgroundColor, borderColor: viewModel.headerBorderColor, title: viewModel.title(for: section), textColor: viewModel.headerTitleTextColor, textFont: viewModel.headerTitleFont)
+        return SectionHeader(fillColor: viewModel.tableViewBacgroundColor, borderColor: UIColor.clear, title: viewModel.title(for: section), textColor: viewModel.headerTitleTextColor, textFont: viewModel.headerTitleFont)
     }
 }
 
@@ -96,7 +96,7 @@ extension NonFungibleTokensViewController: StatefulViewController {
 
 extension NonFungibleTokensViewController: UITableViewDelegate {
     func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
-        return 260
+        return 250
     }
 
     func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {

Trust/Tokens/ViewModels/NonFungibleTokenCellViewModel.swift

@@ -10,6 +10,10 @@ struct NonFungibleTokenCellViewModel {
         self.tokens = tokens
     }
 
+    lazy var collectionViewBacgroundColor: UIColor = {
+        return UIColor.white
+    }()
+
     lazy var numberOfItemsInSection: Int = {
         return tokens.count
     }()

Trust/Tokens/ViewModels/NonFungibleTokenViewModel.swift

@@ -18,11 +18,15 @@ class NonFungibleTokenViewModel {
     }
 
     var headerTitleTextColor: UIColor {
-        return UIColor(hex: "555357")
+        return AppStyle.collactablesHeader.textColor
+    }
+
+    var tableViewBacgroundColor: UIColor {
+        return UIColor.white
     }
 
     var headerTitleFont: UIFont {
-        return UIFont.systemFont(ofSize: 14, weight: UIFont.Weight.medium)
+        return AppStyle.collactablesHeader.font
     }
 
     var headerBorderColor: UIColor {

Trust/Tokens/Views/NonFungibleCollectionViewCell.swift

@@ -1,22 +1,23 @@
 // Copyright SIX DAY LLC. All rights reserved.
 
 import UIKit
+import RandomColorSwift
 
 class NonFungibleCollectionViewCell: UICollectionViewCell {
 
     @IBOutlet private weak var title: UILabel!
     @IBOutlet private weak var subTitle: UILabel!
-    @IBOutlet private weak var imageViewBackground: UIView!
+    @IBOutlet weak var imageViewBackground: UIView!
     @IBOutlet private weak var imageView: UIImageView!
 
     override func awakeFromNib() {
         super.awakeFromNib()
         self.layer.shadowColor = UIColor.black.cgColor
         self.layer.shadowOffset = CGSize(width: 0, height: 1.0)
         self.layer.shadowRadius = 2
-        self.layer.shadowOpacity = 0.5
+        self.layer.shadowOpacity = 0.4
         self.layer.masksToBounds = false
-        imageViewBackground.backgroundColor = UIColor.random()
+        imageViewBackground.backgroundColor = randomColor(hue: .random, luminosity: .light).withAlphaComponent(0.3)
     }
 
     func configure(with viewModel: NonFungibleCollectionViewCellModel) {

Trust/Tokens/Views/NonFungibleTokenViewCell.swift

@@ -2,6 +2,7 @@
 
 import UIKit
 import Kingfisher
+import Hero
 
 class NonFungibleTokenViewCell: UITableViewCell {
 
@@ -18,17 +19,20 @@ class NonFungibleTokenViewCell: UITableViewCell {
 
     func configure(viewModel: NonFungibleTokenCellViewModel) {
         self.viewModel = viewModel
+        collectionView.backgroundColor = self.viewModel?.collectionViewBacgroundColor
         collectionView.reloadData()
     }
 }
 
 extension NonFungibleTokenViewCell: UICollectionViewDelegate {
     func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
-        guard let model = viewModel else {
+        guard let model = viewModel, let cell = collectionView.cellForItem(at: indexPath) as? NonFungibleCollectionViewCell else {
             return
         }
-
-        let tokenDictionary: [String: NonFungibleTokenObject] = ["token": model.token(for: indexPath)]
+        let token = model.token(for: indexPath)
+        let heroId = token.uniqueID
+        cell.hero.id = heroId
+        let tokenDictionary: [String: Any] = ["token": token, "color": cell.imageViewBackground.backgroundColor!]
         NotificationCenter.default.post(name: NSNotification.Name(rawValue: "ShowToken"), object: nil, userInfo: tokenDictionary)
     }
 }

Trust/Tokens/Views/NonFungibleTokenViewCell.xib

@@ -22,8 +22,8 @@
                     <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="gQE-wb-WJ2">
                         <rect key="frame" x="0.0" y="0.0" width="320" height="262.5"/>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-                        <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="WjX-NT-yPt">
-                            <size key="itemSize" width="200" height="250"/>
+                        <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="30" minimumInteritemSpacing="10" id="WjX-NT-yPt">
+                            <size key="itemSize" width="196" height="246"/>
                             <size key="headerReferenceSize" width="0.0" height="0.0"/>
                             <size key="footerReferenceSize" width="0.0" height="0.0"/>
                             <inset key="sectionInset" minX="15" minY="5" maxX="15" maxY="5"/>