Add data-item to `quo/category` (#20542)

* feat: added data-item to category quo component

* feat: session proposal with data-item & category

* test: category with data-items

* chore: removed unnecessary ->

* fix: trailing newline

src/quo/components/settings/category/component_spec.cljs

@@ -51,3 +51,24 @@
                              :right-icon :i/globe
                              :chevron?   true}]}])
     (h/is-truthy (h/get-by-text "subtitle"))))
+
+(h/describe "Data Item Category tests"
+  (h/test "category renders"
+    (h/render [category/category
+               {:list-type :data-item
+                :label     "Label"
+                :data      [{:title      "Item 1"
+                             :subtitle   "subtitle"
+                             :right-icon :i/globe}]}])
+    (h/is-truthy (h/get-by-text "Label"))
+    (h/is-truthy (h/get-by-text "Item 1"))
+    (h/is-truthy (h/get-by-text "subtitle")))
+
+  (h/test "category renders without label"
+    (h/render [category/category
+               {:list-type :data-item
+                :data      [{:title      "Item 1"
+                             :subtitle   "subtitle"
+                             :right-icon :i/globe}]}])
+    (h/is-falsy (h/query-by-label-text "Label"))
+    (h/is-truthy (h/get-by-text "Item 1"))))

src/quo/components/settings/category/data_item/view.cljs

@@ -0,0 +1,32 @@
+(ns quo.components.settings.category.data-item.view
+  (:require
+    [quo.components.markdown.text :as text]
+    [quo.components.settings.category.style :as style]
+    [quo.components.settings.data-item.view :as data-item]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [label data container-style blur?]}]
+  (let [theme     (quo.theme/use-theme)
+        last-item (rn/use-memo #(last data) [data])]
+    [rn/view {:style (merge (style/container label) container-style)}
+     (when label
+       [text/text
+        {:weight :medium
+         :size   :paragraph-2
+         :style  (style/label blur? theme)}
+        label])
+     [rn/view {:style (style/settings-items blur? theme)}
+      (for [item data
+            ;; NOTE: overwriting the background of the data-item in favor of the category bg
+            :let [data-item-container-style (-> item :container-style (assoc :background-color nil))
+                  data-item-props           (assoc item
+                                                   :blur?           blur?
+                                                   :container-style data-item-container-style)]]
+        ^{:key item}
+        [:<>
+         [data-item/view data-item-props]
+         (when-not (= item last-item)
+           [rn/view {:style (style/settings-separator blur? theme)}])])]]))
+

src/quo/components/settings/category/view.cljs

@@ -1,10 +1,13 @@
 (ns quo.components.settings.category.view
   (:require
+    [quo.components.settings.category.data-item.view :as data-item]
     [quo.components.settings.category.reorder.view :as reorder]
     [quo.components.settings.category.settings.view :as settings]))
 
 (defn category
   [{:keys [list-type] :as props}]
-  (if (= list-type :settings)
+  (condp = list-type
-    [settings/settings-category props]
+    :settings  [settings/settings-category props]
-    [reorder/reorder-category props]))
+    :data-item [data-item/view props]
+    :reorder   [reorder/reorder-category props]
+    nil))

src/status_im/contexts/preview/quo/settings/category.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.preview.quo.settings.category
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
     [reagent.core :as reagent]
     [status-im.common.resources :as resources]
     [status-im.contexts.preview.quo.preview :as preview]))
@@ -17,6 +18,24 @@
       :image-props :i/browser
       :image-size  32})))
 
+(defn create-data-item-array
+  [n]
+  (vec
+   (for [i (range n)]
+     {:blur?         false
+      :description   :default
+      :icon-right?   true
+      :right-icon    :i/chevron-right
+      :icon-color    colors/neutral-10
+      :card?         false
+      :label         :preview
+      :status        :default
+      :size          :default
+      :right-content {:type :accounts
+                      :data [{:emoji "🔥" :customization-color :yellow}]}
+      :title         (str "Item title " i)
+      :subtitle      "Item subtitle"})))
+
 (def descriptor
   [{:key :blur? :type :boolean}
    {:key     :list-type
@@ -24,7 +43,11 @@
     :options [{:key   :settings
                :value :settings}
               {:key   :reorder
-               :value :reorder}]}])
+               :value :reorder}
+              {:key   :data-item
+               :value :data-item}]}])
+
+(def ^:constant n-items 5)
 
 (defn view
   []
@@ -32,7 +55,10 @@
                              :blur?     false
                              :list-type :settings})]
     (fn []
-      (let [data (create-item-array 5)]
+      (let [list-type (:list-type @state)
+            data      (if (= list-type :data-item)
+                        (create-data-item-array n-items)
+                        (create-item-array n-items))]
         [preview/preview-container
          {:state                 state
           :descriptor            descriptor

src/status_im/contexts/wallet/wallet_connect/session_proposal/style.cljs

@@ -24,8 +24,3 @@
 
 (def approval-li-spacer
   {:width 8})
-
-(def detail-item
-  {:margin-bottom     20
-   :margin-horizontal 20
-   :padding           12})

src/status_im/contexts/wallet/wallet_connect/session_proposal/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
+    [quo.foundations.resources :as quo.resources]
     [quo.theme]
     [react-native.core :as rn]
     [status-im.common.floating-button-page.view :as floating-button-page]
@@ -44,41 +45,47 @@
          [quo/text label]])
       labels)]))
 
-(defn- accounts-data-item
+(defn- get-placeholder-networks
   []
-  ;; TODO. This account is currently hard coded in
+  [{:source (quo.resources/get-network :ethereum)}
-  ;; `status-im.contexts.wallet.wallet-connect.events`. Should be selectable and changeable
+   {:source (quo.resources/get-network :optimism)}
-  (let [accounts (rf/sub [:wallet/accounts-without-watched-accounts])
+   {:source (quo.resources/get-network :arbitrum)}])
-        name     (-> accounts first :name)]
-    [quo/data-item
-     {:container-style style/detail-item
-      :blur?           false
-      :description     :default
-      :icon-right?     true
-      :right-icon      :i/chevron-right
-      :icon-color      colors/neutral-10
-      :card?           false
-      :label           :preview
-      ;; TODO. The quo component for data item doesn't support showing accounts yet
-      :status          :default
-      :size            :small
-      :title           (i18n/label :t/account-title)
-      :subtitle        name}]))
 
-(defn- networks-data-item
+(defn- connection-category
   []
-  [quo/data-item
+  (let [{:keys [name emoji customization-color]} (first (rf/sub
-   {:container-style style/detail-item
+                                                         [:wallet/accounts-without-watched-accounts]))
-    :blur?           false
+        data-item-common-props                   {:blur?       false
-    :description     :default
+                                                  :description :default
-    :icon-right?     true
+                                                  :card?       false
-    :card?           true
+                                                  :label       :preview
-    :label           :none
+                                                  :status      :default
-    :status          :default
+                                                  :size        :default}
-    :size            :small
+        account-data-item-props                  (assoc data-item-common-props
-    :title           (i18n/label :t/networks)
+                                                        :right-content {:type :accounts
-    ;; TODO. The quo component for data-item does not support showing networks yet
+                                                                        :size :size-32
-    :subtitle        "Networks will show up here"}])
+                                                                        :data [{:emoji emoji
+                                                                                :customization-color
+                                                                                customization-color}]}
+                                                        :on-press      #(js/alert "Not yet implemented")
+                                                        :title         (i18n/label :t/account-title)
+                                                        :subtitle      name
+                                                        :icon-right?   true
+                                                        :right-icon    :i/chevron-right
+                                                        :icon-color    colors/neutral-10)
+        networks-data-item-props                 (assoc data-item-common-props
+                                                        :right-content {:type :network
+                                                                        :data
+                                                                        (get-placeholder-networks)}
+                                                        :title         (i18n/label :t/networks)
+                                                        ;; TODO. The quo component for data-item
+                                                        ;; does not support showing networks yet
+                                                        :subtitle      "Networks placeholder")]
+    [quo/category
+     {:blur?     false
+      :list-type :data-item
+      :data      [account-data-item-props
+                  networks-data-item-props]}]))
 
 (defn- footer
   []
@@ -114,6 +121,5 @@
     :footer                   [footer]}
    [rn/view
     [dapp-metadata]
-    [accounts-data-item]
+    [connection-category]
-    [networks-data-item]
     [approval-note]]])