Activity tab on collectible page (#18220)

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

@@ -5,13 +5,15 @@
     [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [reagent.core :as reagent]
     [status-im.common.scroll-page.view :as scroll-page]
     [status-im.contexts.wallet.collectible.style :as style]
+    [status-im.contexts.wallet.temp :as temp]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
 (defn header
-  [collectible-name description collection-image-url]
+  [collectible-name collection-name collection-image-url]
   [rn/view {:style style/header}
    [quo/text
     {:weight :semi-bold
@@ -22,7 +24,7 @@
     [quo/text
      {:weight :semi-bold
       :size   :paragraph-1}
-     description]]])
+     collection-name]]])
 
 (defn cta-buttons
   []
@@ -40,24 +42,19 @@
      :icon-left       :i/opensea}
     (i18n/label :t/opensea)]])
 
-(defn tabs
+(def activity-tabs-data
-  []
+  [{:id                  :overview
-  [quo/tabs
+    :label               (i18n/label :t/overview)
-   {:size        32
+    :accessibility-label :overview-tab}
-    :style       style/tabs
+   {:id                  :activity
-    :scrollable? true
+    :label               (i18n/label :t/activity)
-    :data        [{:id                  :overview
+    :accessibility-label :activity-tab}
-                   :label               (i18n/label :t/overview)
+   {:id                  :permissions
-                   :accessibility-label :overview-tab}
+    :label               (i18n/label :t/permissions)
-                  {:id                  :activity
+    :accessibility-label :permissions-tab}
-                   :label               (i18n/label :t/activity)
+   {:id                  :about
-                   :accessibility-label :activity-tab}
+    :label               (i18n/label :t/about)
-                  {:id                  :permissions
+    :accessibility-label :about-tab}])
-                   :label               (i18n/label :t/permissions)
-                   :accessibility-label :permissions-tab}
-                  {:id                  :about
-                   :label               (i18n/label :t/about)
-                   :accessibility-label :about-tab}]}])
 
 (defn traits-section
   [traits]
@@ -82,6 +79,19 @@
        :num-columns             2
        :content-container-style style/traits-container}]]))
 
+(defn activity-item
+  [item]
+  [:<>
+   [quo/divider-date (:timestamp item)]
+   [quo/wallet-activity item]])
+
+(defn activity-section
+  []
+  [rn/flat-list
+   {:data      temp/collectible-activities
+    :style     {:flex 1}
+    :render-fn activity-item}])
+
 (defn info
   [chain-id]
   (let [network         (rf/sub [:wallet/network-details-by-chain-id
@@ -112,6 +122,25 @@
         :subtitle      network-name
         :subtitle-type :network}]]]))
 
+(defn tabs
+  [_]
+  (let [selected-tab (reagent/atom (:id (first activity-tabs-data)))]
+    (fn [{:keys [traits chain-id] :as _props}]
+      [:<>
+       [quo/tabs
+        {:size           32
+         :style          style/tabs
+         :scrollable?    true
+         :default-active @selected-tab
+         :data           activity-tabs-data
+         :on-change      #(reset! selected-tab %)}]
+       (condp = @selected-tab
+         :overview [:<>
+                    [info chain-id]
+                    [traits-section traits]]
+         :activity [activity-section]
+         nil)])))
+
 (defn collectible-actions-sheet
   []
   [quo/action-drawer
@@ -133,19 +162,20 @@
 
 (defn view-internal
   [{:keys [theme] :as _props}]
-  (let [collectible                     (rf/sub [:wallet/last-collectible-details])
+  (let [collectible               (rf/sub [:wallet/last-collectible-details])
         {:keys [collectible-data preview-url
-                collection-data]}       collectible
+                collection-data]} collectible
         {traits           :traits
-         collectible-name :name
+         collectible-name :name}  collectible-data
-         description      :description} collectible-data
+        {collection-image :image-url
-        chain-id                        (rf/sub [:wallet/last-collectible-chain-id])]
+         collection-name  :name}  collection-data
+        chain-id                  (rf/sub [:wallet/last-collectible-chain-id])]
     [scroll-page/scroll-page
      {:navigate-back? true
       :height         148
       :page-nav-props {:type        :title-description
                        :title       collectible-name
-                       :description description
+                       :description collection-name
                        :right-side  [{:icon-name :i/options
                                       :on-press  #(rf/dispatch
                                                    [:show-bottom-sheet
@@ -157,10 +187,10 @@
        [rn/image
         {:source preview-url
          :style  style/preview}]]
-      [header collectible-name description (:image-url collection-data)]
+      [header collectible-name collection-name collection-image]
       [cta-buttons]
-      [tabs]
+      [tabs
-      [info chain-id]
+       {:traits   traits
-      [traits-section traits]]]))
+        :chain-id chain-id}]]]))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/temp.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.temp
   (:require [clojure.string :as string]
+            [quo.foundations.resources :as quo.resources]
             [status-im.common.resources :as resources]
             [status-im.contexts.wallet.item-types :as types]))
 
@@ -57,3 +58,50 @@
   (let [all-addresses [address-local-suggestion-saved-address-mock
                        address-local-suggestion-mock]]
     (vec (filter #(string/starts-with? (:address %) substring) all-addresses))))
+
+(def collectible-activities
+  [{:transaction       :receive
+    :timestamp         "Today 22:20"
+    :status            :finalised
+    :counter           1
+    :first-tag         {:size               24
+                        :type               :collectible
+                        :collectible        (resources/mock-images :collectible)
+                        :collectible-name   "Collectible"
+                        :collectible-number "123"}
+    :second-tag-prefix :t/from
+    :second-tag        {:size            24
+                        :type            :default
+                        :full-name       "Aretha Gosling"
+                        :profile-picture (resources/mock-images :user-picture-female2)}
+    :third-tag-prefix  :t/to
+    :third-tag         {:size         24
+                        :type         :account
+                        :account-name "Piggy bank"
+                        :emoji        "🐷"}
+
+    :fourth-tag-prefix :t/via
+    :fourth-tag        {:size         24
+                        :type         :network
+                        :network-logo (quo.resources/get-network :ethereum)
+                        :network-name "Mainnet"}}
+   {:transaction :mint
+    :timestamp "Yesterday"
+    :status :finalised
+    :counter 1
+    :first-tag {:size               24
+                :type               :collectible
+                :collectible        (resources/mock-images :collectible)
+                :collectible-name   "Collectible"
+                :collectible-number "123"}
+    :second-tag-prefix :t/at
+    :second-tag
+    {:size 24
+     :type :address
+     :address
+     "0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"}
+    :third-tag-prefix :t/on
+    :third-tag {:size         24
+                :type         :network
+                :network-logo (quo.resources/get-network :ethereum)
+                :network-name "Mainnet"}}])