Collectible activity tab with mock data

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

@@ -5,8 +5,10 @@
     [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [reagent.core :as reagent]
     [status-im2.common.scroll-page.view :as scroll-page]
     [status-im2.contexts.wallet.collectible.style :as style]
+    [status-im2.contexts.wallet.temp :as temp]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -40,24 +42,19 @@
      :icon-left       :i/opensea}
     (i18n/label :t/opensea)]])
 
-(defn tabs
-  []
-  [quo/tabs
-   {:size        32
-    :style       style/tabs
-    :scrollable? true
-    :data        [{:id                  :overview
-                   :label               (i18n/label :t/overview)
-                   :accessibility-label :overview-tab}
-                  {:id                  :activity
-                   :label               (i18n/label :t/activity)
-                   :accessibility-label :activity-tab}
-                  {:id                  :permissions
-                   :label               (i18n/label :t/permissions)
-                   :accessibility-label :permissions-tab}
-                  {:id                  :about
-                   :label               (i18n/label :t/about)
-                   :accessibility-label :about-tab}]}])
+(def tabs-data
+  [{:id                  :overview
+    :label               (i18n/label :t/overview)
+    :accessibility-label :overview-tab}
+   {:id                  :activity
+    :label               (i18n/label :t/activity)
+    :accessibility-label :activity-tab}
+   {:id                  :permissions
+    :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,21 @@
        :num-columns             2
        :content-container-style style/traits-container}]]))
 
+(defn activity-item
+  [item]
+  [:<>
+   [quo/divider-date (:timestamp item)]
+   [quo/wallet-activity
+    (merge {:on-press #(js/alert "Item pressed")}
+           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 +124,25 @@
         :subtitle      network-name
         :subtitle-type :network}]]]))
 
+(defn tabs
+  [_]
+  (let [selected-tab (reagent/atom (:id (first tabs-data)))]
+    (fn [{:keys [traits chain-id] :as _props}]
+      [:<>
+       [quo/tabs
+        {:size           32
+         :style          style/tabs
+         :scrollable?    true
+         :default-active @selected-tab
+         :data           tabs-data
+         :on-change      #(reset! selected-tab %)}]
+       (condp = @selected-tab
+         :overview [:<>
+                    [info chain-id]
+                    [traits-section traits]]
+         :activity [activity-section]
+         [rn/view])])))
+
 (defn collectible-actions-sheet
   []
   [quo/action-drawer
@@ -159,8 +190,8 @@
          :style  style/preview}]]
       [header collectible-name description (:image-url collection-data)]
       [cta-buttons]
-      [tabs]
-      [info chain-id]
-      [traits-section traits]]]))
+      [tabs
+       {:traits   traits
+        :chain-id chain-id}]]]))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/temp.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.wallet.temp
   (:require [clojure.string :as string]
+            [quo.foundations.resources :as quo.resources]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.wallet.item-types :as types]))
 
@@ -57,3 +58,51 @@
   (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"}}])