chore(quo): add component list item - network list to design system (#18547)

---------

Co-authored-by: Ajay Sivan <ajayesivan@gmail.com>

src/quo/components/list_items/network_list/component_spec.cljs

@@ -0,0 +1,40 @@
+(ns quo.components.list-items.network-list.component-spec
+  (:require [quo.components.list-items.network-list.view :as network-list]
+            [quo.foundations.colors :as colors]
+            [test-helpers.component :as h]))
+
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
+(def props
+  {:theme               :light
+   :state               :default
+   :label               "Mainnet"
+   :network-image       873
+   :customization-color :blue
+   :token-value         "100.00 ETH"
+   :fiat-value          "€100.00"})
+
+
+(h/describe "List items: Network List"
+  (h/test "default state explicit"
+    (render [network-list/view props])
+    (h/is-truthy (h/get-by-text "Mainnet")))
+
+  (h/test "Pressed state"
+    (render [network-list/view props])
+    (h/fire-event :on-press-in (h/get-by-label-text ::network-list))
+    (h/wait-for #(h/has-style (h/query-by-label-text ::network-list)
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
+
+  (h/test "Active state"
+    (render [network-list/view (assoc props :state :active)])
+    (h/has-style (h/query-by-label-text ::network-list)
+                 {:backgroundColor (colors/resolve-color :blue :light 10)}))
+
+  (h/test "Call on-press"
+    (let [on-press (h/mock-fn)]
+      (render [network-list/view (assoc props :on-press on-press)])
+      (h/fire-event :on-press (h/get-by-label-text ::network-list))
+      (h/was-called on-press))))

src/quo/components/list_items/network_list/style.cljs

@@ -0,0 +1,41 @@
+(ns quo.components.list-items.network-list.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- background-color
+  [state customization-color theme]
+  (case state
+    :pressed (colors/resolve-color customization-color theme 5)
+    :active  (colors/resolve-color customization-color theme 10)
+    :transparent))
+
+(defn container
+  [state customization-color theme]
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-radius      12
+   :height             56
+   :background-color   (background-color state customization-color theme)})
+
+(def info
+  {:flex-direction :row
+   :align-items    :center
+   :gap            2})
+
+(def network-image
+  {:border-width     1
+   :border-radius    16
+   :border-color     colors/neutral-80-opa-5
+   :margin-right     8
+   :background-color colors/neutral-80-opa-5
+   :height           32
+   :width            32})
+
+(def values-container
+  {:align-items :flex-end})
+
+(defn fiat-value
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

src/quo/components/list_items/network_list/view.cljs

@@ -0,0 +1,76 @@
+(ns quo.components.list-items.network-list.view
+  (:require
+    [clojure.string :as string]
+    [quo.components.list-items.network-list.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [schema.core :as schema]))
+
+(defn- info
+  [{:keys [network-image label]}]
+  [rn/view {:style style/info}
+   [rn/image
+    {:source network-image
+     :style  style/network-image}]
+   [rn/view
+    [text/text
+     {:weight          :semi-bold
+      :style           {:text-transform :capitalize}
+      :number-of-lines 1}
+     (if (string/blank? label) "-" label)]]])
+
+(defn- values
+  [{:keys [token-value fiat-value theme]}]
+  [rn/view {:style style/values-container}
+   [text/text
+    {:weight          :medium
+     :size            :paragraph-2
+     :number-of-lines 1}
+    token-value]
+   [text/text
+    {:style           (style/fiat-value theme)
+     :size            :paragraph-2
+     :number-of-lines 1}
+    fiat-value]])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:network-image :int]
+      [:label :string]
+      [:fiat-value :string]
+      [:token-value :string]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:state [:enum :pressed :active :default]]
+      [:on-press {:optional true} [:maybe fn?]]
+      [:theme :schema.common/theme]]]]
+   :any])
+
+(defn- view-internal
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [on-press state customization-color theme]
+          :as   props
+          :or   {customization-color :blue}}]
+      (let [internal-state (if @pressed?
+                             :pressed
+                             state)]
+
+        [rn/pressable
+         {:style               (style/container internal-state customization-color theme)
+          :on-press-in         on-press-in
+          :on-press-out        on-press-out
+          :on-press            on-press
+          :accessibility-label :network-list}
+         [info props]
+         [values props]]))))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/core.cljs

@@ -80,6 +80,7 @@
     quo.components.list-items.community.view
     quo.components.list-items.dapp.view
     quo.components.list-items.menu-item
+    quo.components.list-items.network-list.view
     quo.components.list-items.preview-list.view
     quo.components.list-items.quiz-item.view
     quo.components.list-items.saved-address.view
@@ -302,6 +303,7 @@
 (def community-list quo.components.list-items.community.view/view)
 (def dapp quo.components.list-items.dapp.view/view)
 (def menu-item quo.components.list-items.menu-item/menu-item)
+(def network-list quo.components.list-items.network-list.view/view)
 (def preview-list quo.components.list-items.preview-list.view/view)
 (def quiz-item quo.components.list-items.quiz-item.view/view)
 (def saved-address quo.components.list-items.saved-address.view/view)

src/quo/core_spec.cljs

@@ -48,6 +48,7 @@
     quo.components.list-items.channel.component-spec
     quo.components.list-items.community.component-spec
     quo.components.list-items.dapp.component-spec
+    quo.components.list-items.network-list.component-spec
     quo.components.list-items.quiz-item.component-spec
     quo.components.list-items.saved-address.component-spec
     quo.components.list-items.saved-contact-address.component-spec

src/status_im/contexts/preview/quo/list_items/network_list.cljs

@@ -0,0 +1,46 @@
+(ns status-im.contexts.preview.quo.list-items.network-list
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [reagent.core :as reagent]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key     :state
+    :type    :select
+    :options [{:key :default}
+              {:key :active}
+              {:key :pressed}]}
+   {:key     :network-image
+    :type    :select
+    :options [{:key   (quo.resources/get-network :ethereum)
+               :value :ethereum}
+              {:key   (quo.resources/get-network :arbitrum)
+               :value :arbitrum}
+              {:key   (quo.resources/get-network :optimism)
+               :value :optimism}]}
+   {:key  :label
+    :type :text}
+   {:key  :token-value
+    :type :text}
+   {:key  :fiat-value
+    :type :text}
+   {:key  :show-alert-on-press?
+    :type :boolean}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:network-image       (quo.resources/get-network :ethereum)
+                             :label               "Mainnet"
+                             :token-value         "0.00 ETH"
+                             :fiat-value          "€0.00"
+                             :state               :default
+                             :customization-color :blue})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/network-list
+        (merge @state
+               (when (:show-alert-on-press? @state)
+                 {:on-press #(js/alert "Pressed!")}))]])))

src/status_im/contexts/preview/quo/main.cljs

@@ -94,6 +94,7 @@
     [status-im.contexts.preview.quo.list-items.address :as address]
     [status-im.contexts.preview.quo.list-items.channel :as channel]
     [status-im.contexts.preview.quo.list-items.dapp :as dapp]
+    [status-im.contexts.preview.quo.list-items.network-list :as network-list]
     [status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists]
     [status-im.contexts.preview.quo.list-items.quiz-item :as quiz-item]
     [status-im.contexts.preview.quo.list-items.saved-address :as saved-address]
@@ -351,6 +352,8 @@
                         :component community-list-item/view}
                        {:name      :dapp
                         :component dapp/preview}
+                       {:name      :network-list
+                        :component network-list/view}
                        {:name      :preview-lists
                         :component preview-lists/view}
                        {:name      :quiz-item