Implement about tab on collectible page (#18269)

* add basics

* finalize component

* fix lint issues

* move color to props

* move variants to props

* change file structure

* working

* finalize loader

* fix lint issues

* fix style issues

* add tabs structure

* add basics

* draft codes

* draft

* make codes work after rebase

* fix lint issues

* remove Permissions tab

* revert codes

* finalize code

* fix lint issues

* revert podfile.lock

* create new reg-sub for traits and chain-id

* add real title and description for about tab

* resolve comments

* fix overview tab

* add tests

* resolve comments

---------

Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>

src/quo/components/profile/link_card/view.cljs

@@ -8,7 +8,7 @@
             [react-native.linear-gradient :as linear-gradient]))
 
 (defn- view-internal
-  [{:keys [address theme on-press icon title customization-color]}]
+  [{:keys [address theme on-press icon title customization-color container-style]}]
   [rn/pressable
    {:accessibility-label :link-card
     :on-press            on-press}
@@ -17,7 +17,7 @@
               (properties/gradient-end-color theme customization-color)]
      :start  {:x 0 :y 1}
      :end    {:x 1 :y 1}
-     :style  (style/container theme)}
+     :style  (merge (style/container theme) container-style)}
     [rn/view {:style style/icon-container}
      [social/view
       {:accessibility-label :social-icon

src/status_im/contexts/wallet/collectible/style.cljs

@@ -43,29 +43,3 @@
 (def opensea-button
   {:flex        1
    :margin-left 6})
-
-(def info-container
-  {:flex-direction    :row
-   :margin-horizontal 20
-   :margin-top        8
-   :margin-bottom     12})
-
-(def account
-  {:margin-right 6
-   :flex         1})
-
-(def network
-  {:margin-left 6
-   :flex        1})
-
-(def traits-title-container
-  {:margin-left 20
-   :margin-top  8})
-
-(def traits-item
-  {:margin 6
-   :flex   1})
-
-(def traits-container
-  {:margin-horizontal 14
-   :margin-vertical   12})

src/status_im/contexts/wallet/collectible/tabs/about/style.cljs

@@ -0,0 +1,27 @@
+(ns status-im.contexts.wallet.collectible.tabs.about.style)
+
+(def title
+  {:padding-horizontal 20
+   :padding-top        8
+   :padding-bottom     4})
+
+(def description
+  {:padding-horizontal 20
+   :padding-top        4
+   :padding-bottom     12})
+
+(def section-label
+  {:margin-horizontal 20
+   :margin-top        12})
+
+(def link-cards-container
+  {:margin-horizontal 20
+   :margin-top        12
+   :flex-direction    :row
+   :justify-content   :space-between
+   :flex-wrap         :wrap})
+
+(defn link-card
+  [item-width]
+  {:margin-bottom 16
+   :width         item-width})

src/status_im/contexts/wallet/collectible/tabs/about/view.cljs

@@ -0,0 +1,36 @@
+(ns status-im.contexts.wallet.collectible.tabs.about.view
+  (:require [quo.core :as quo]
+            [quo.theme]
+            [react-native.core :as rn]
+            [status-im.contexts.wallet.collectible.tabs.about.style :as style]
+            [status-im.contexts.wallet.temp :as temp]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(def ^:private link-card-space 28)
+
+(defn- view-internal
+  []
+  (let [window-width               (rf/sub [:dimensions/window-width])
+        item-width                 (- (/ window-width 2) link-card-space)
+        {:keys [collectible-data]} (rf/sub [:wallet/last-collectible-details])
+        link-card-container-style  (style/link-card item-width)]
+    [:<>
+     [rn/view {:style style/title}
+      [quo/text
+       {:size   :heading-2
+        :weight :semi-bold}
+       (:name collectible-data)]]
+     [rn/view {:style style/description}
+      [quo/text
+       {:size :paragraph-2}
+       (:description collectible-data)]]
+     [quo/section-label
+      {:container-style style/section-label
+       :section         (i18n/label :t/on-the-web)}]
+     [rn/view {:style style/link-cards-container}
+      (for [item (:cards temp/collectible-about)]
+        ^{:key (:title item)}
+        [quo/link-card (assoc item :container-style link-card-container-style)])]]))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/collectible/tabs/activity/view.cljs

@@ -0,0 +1,17 @@
+(ns status-im.contexts.wallet.collectible.tabs.activity.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.contexts.wallet.temp :as temp]))
+
+(defn activity-item
+  [item]
+  [:<>
+   [quo/divider-date (:timestamp item)]
+   [quo/wallet-activity item]])
+
+(defn view
+  []
+  [rn/flat-list
+   {:data      temp/collectible-activities
+    :style     {:flex 1}
+    :render-fn activity-item}])

src/status_im/contexts/wallet/collectible/tabs/overview/style.cljs

@@ -0,0 +1,27 @@
+(ns status-im.contexts.wallet.collectible.tabs.overview.style)
+
+(def info-container
+  {:flex-direction    :row
+   :margin-horizontal 20
+   :margin-top        8
+   :margin-bottom     12})
+
+(def account
+  {:margin-right 6
+   :flex         1})
+
+(def network
+  {:margin-left 6
+   :flex        1})
+
+(def traits-title-container
+  {:margin-left 20
+   :margin-top  8})
+
+(def traits-item
+  {:margin 6
+   :flex   1})
+
+(def traits-container
+  {:margin-horizontal 14
+   :margin-vertical   12})

src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs

@@ -0,0 +1,72 @@
+(ns status-im.contexts.wallet.collectible.tabs.overview.view
+  (:require
+    [clojure.string :as string]
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [quo.theme]
+    [react-native.core :as rn]
+    [status-im.contexts.wallet.collectible.tabs.overview.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- trait-item
+  [{:keys [trait-type value]}]
+  [quo/data-item
+   {:subtitle-type   :default
+    :card?           true
+    :status          :default
+    :size            :default
+    :title           trait-type
+    :subtitle        value
+    :container-style style/traits-item}])
+
+(defn- traits-section
+  []
+  (let [traits (rf/sub [:wallet/last-collectible-details-traits])]
+    (when (pos? (count traits))
+      [rn/view
+       [quo/section-label
+        {:section         (i18n/label :t/traits)
+         :container-style style/traits-title-container}]
+       [rn/flat-list
+        {:render-fn               trait-item
+         :data                    traits
+         :key                     :collectibles-list
+         :key-fn                  :id
+         :num-columns             2
+         :content-container-style style/traits-container}]])))
+
+(defn- info
+  []
+  (let [chain-id                   (rf/sub [:wallet/last-collectible-details-chain-id])
+        {:keys [network-name]}     (rf/sub [:wallet/network-details-by-chain-id chain-id])
+        subtitle                   (string/capitalize (name (or network-name "")))
+        {:keys [name emoji color]} (rf/sub [:wallet/last-collectible-details-owner])]
+    [rn/view {:style style/info-container}
+     [rn/view {:style style/account}
+      [quo/data-item
+       {:card?               true
+        :status              :default
+        :size                :default
+        :title               (i18n/label :t/account-title)
+        :subtitle            name
+        :emoji               emoji
+        :subtitle-type       :account
+        :customization-color color}]]
+     [rn/view {:style style/network}
+      [quo/data-item
+       {:subtitle-type :network
+        :card?         true
+        :status        :default
+        :size          :default
+        :title         (i18n/label :t/network)
+        :network-image (quo.resources/get-network network-name)
+        :subtitle      subtitle}]]]))
+
+(defn- view-internal
+  []
+  [:<>
+   [info]
+   [traits-section]])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/collectible/tabs/view.cljs

@@ -0,0 +1,15 @@
+(ns status-im.contexts.wallet.collectible.tabs.view
+  (:require [quo.theme]
+            [status-im.contexts.wallet.collectible.tabs.about.view :as about]
+            [status-im.contexts.wallet.collectible.tabs.activity.view :as activity]
+            [status-im.contexts.wallet.collectible.tabs.overview.view :as overview]))
+
+(defn- view-internal
+  [{:keys [selected-tab]}]
+  (case selected-tab
+    :overview [overview/view]
+    :about    [about/view]
+    :activity [activity/view]
+    nil))
+
+(def view (quo.theme/with-theme view-internal))