feat: implement address list item component (#17617)

Signed-off-by: Brian Sztamfater <brian@status.im>

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -28,21 +28,25 @@
 (defn wallet-user-avatar
   "params, first name, last name, color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size]
+  [{:keys [f-name l-name customization-color size monospace? uppercase?]
-    :or   {f-name              "John"
+    :or   {f-name     "John"
-           l-name              "Doe"
+           l-name     "Doe"
-           customization-color :red
+           size       :x-large
-           size                :x-large}}]
+           uppercase? true}}]
   (let [circle-size    (size circle-sizes)
         small?         (= size :small)
         f-name-initial (-> f-name
-                           string/upper-case
+                           (#(if uppercase? (string/upper-case %) %))
                            (subs 0 1))
         l-name-initial (-> l-name
-                           string/upper-case
+                           (#(if uppercase? (string/upper-case %) %))
                            (subs 0 1))
-        circle-color   (colors/custom-color customization-color 50 20)
+        circle-color   (if customization-color
-        text-color     (colors/custom-color-by-theme customization-color 50 60)]
+                         (colors/custom-color customization-color 50 20)
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
+        text-color     (if customization-color
+                         (colors/custom-color-by-theme customization-color 50 60)
+                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))]
     [rn/view
      {:style {:width            circle-size
               :height           circle-size
@@ -53,7 +57,7 @@
               :background-color circle-color}}
      [text/text
       {:size   (size font-sizes)
-       :weight (size font-weights)
+       :weight (if monospace? :monospace (size font-weights))
        :style  {:color text-color}}
       (if small?
         (str f-name-initial)

src/quo2/components/list_items/address/component_spec.cljs

@@ -0,0 +1,41 @@
+(ns quo2.components.list-items.address.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.list-items.address.view :as address]
+            [quo2.foundations.colors :as colors]))
+
+(h/describe "List items: address"
+  (h/test "default render"
+    (h/render [address/view])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "on-press-in changes state to :pressed"
+    (h/render [address/view])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor (colors/custom-color :blue 50 5)})))
+
+  (h/test "on-press-in changes state to :pressed with blur? enabled"
+    (h/render [address/view {:blur? true}])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor colors/white-opa-5})))
+
+  (h/test "on-press-out changes state to :active"
+    (h/render [address/view])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/fire-event :on-press-out (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor (colors/custom-color :blue 50 10)})))
+
+  (h/test "on-press-out changes state to :active with blur? enabled"
+    (h/render [address/view {:blur? true}])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/fire-event :on-press-out (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor colors/white-opa-10})))
+
+  (h/test "on-press event is called"
+    (let [on-press (h/mock-fn)]
+      (h/render [address/view {:on-press on-press}])
+      (h/fire-event :on-press (h/get-by-label-text :container))
+      (h/was-called on-press))))

src/quo2/components/list_items/address/style.cljs

@@ -0,0 +1,33 @@
+(ns quo2.components.list-items.address.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn- background-color
+  [state customization-color blur?]
+  (cond (and (or (= state :pressed) (= state :selected)) (not blur?))
+        (colors/custom-color customization-color 50 5)
+        (and (or (= state :pressed) (= state :selected)) blur?)
+        colors/white-opa-5
+        (and (= state :active) (not blur?))
+        (colors/custom-color customization-color 50 10)
+        (and (= state :active) blur?)
+        colors/white-opa-10
+        (and (= state :pressed) blur?) colors/white-opa-10
+        :else :transparent))
+
+(defn container
+  [state customization-color blur?]
+  {:height             56
+   :border-radius      12
+   :background-color   (background-color state customization-color blur?)
+   :flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   6
+   :justify-content    :space-between})
+
+(def left-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def account-container
+  {:margin-left 8})

src/quo2/components/list_items/address/view.cljs

@@ -0,0 +1,64 @@
+(ns quo2.components.list-items.address.view
+  (:require [quo2.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [quo2.components.list-items.address.style :as style]
+            [reagent.core :as reagent]
+            [clojure.string :as string]))
+
+(defn- left-container
+  [{:keys [theme address networks blur?]}]
+  [rn/view {:style style/left-container}
+   [wallet-user-avatar/wallet-user-avatar
+    {:size       :medium
+     :f-name     "0"
+     :l-name     "x"
+     :monospace? true
+     :uppercase? false}]
+   [rn/view {:style style/account-container}
+    [text/text {:size :paragraph-1}
+     (map (fn [network]
+            ^{:key (str network)}
+            [text/text
+             {:size   :paragraph-1
+              :weight :semi-bold
+              :style  {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
+          networks)
+     [text/text
+      {:size   :paragraph-1
+       :weight :monospace
+       :style  {:color (if blur?
+                         colors/white
+                         (colors/theme-colors colors/neutral-100 colors/white theme))}}
+      (string/replace address "x" "×")]]]])
+
+(defn- internal-view
+  []
+  (let [state       (reagent/atom :default)
+        active?     (atom false)
+        timer       (atom nil)
+        on-press-in (fn []
+                      (when-not (= @state :selected)
+                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
+    (fn [{:keys [networks address customization-color on-press active-state? blur? theme]
+          :or   {customization-color :blue}}]
+      (let [on-press-out (fn []
+                           (let [new-state (if (or (not active-state?) @active?) :default :active)]
+                             (when @timer (js/clearTimeout @timer))
+                             (reset! timer nil)
+                             (reset! active? (= new-state :active))
+                             (reset! state new-state)))]
+        [rn/pressable
+         {:style               (style/container @state customization-color blur?)
+          :on-press-in         on-press-in
+          :on-press-out        on-press-out
+          :on-press            on-press
+          :accessibility-label :container}
+         [left-container
+          {:theme    theme
+           :networks networks
+           :address  address}]]))))
+
+(def view (quo.theme/with-theme internal-view))

src/quo2/core.cljs

@@ -67,6 +67,7 @@
     quo2.components.links.url-preview.view
     quo2.components.list-items.account.view
     quo2.components.list-items.account-list-card.view
+    quo2.components.list-items.address.view
     quo2.components.list-items.channel.view
     quo2.components.list-items.community.view
     quo2.components.list-items.dapp.view
@@ -265,6 +266,7 @@
 ;;;; List items
 (def account-item quo2.components.list-items.account.view/view)
 (def account-list-card quo2.components.list-items.account-list-card.view/view)
+(def address quo2.components.list-items.address.view/view)
 (def channel quo2.components.list-items.channel.view/view)
 (def dapp quo2.components.list-items.dapp.view/view)
 (def menu-item quo2.components.list-items.menu-item/menu-item)

src/status_im2/contexts/quo_preview/list_items/address.cljs

@@ -0,0 +1,26 @@
+(ns status-im2.contexts.quo-preview.list-items.address
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:key :active-state? :type :boolean}
+   {:key :show-alert-on-press? :type :boolean}
+   {:key :blur? :type :boolean}
+   (preview/customization-color-option)])
+
+(defn view
+  []
+  (let [state (reagent/atom {:address  "0x0ah...78b"
+                             :networks [:ethereum :optimism]})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :blur-dark-only?       true}
+       [quo/address
+        (merge @state
+               (when (:show-alert-on-press? @state)
+                 {:on-press #(js/alert "Pressed!")}))]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -84,6 +84,7 @@
      account-item]
     [status-im2.contexts.quo-preview.list-items.account-list-card :as
      account-list-card]
+    [status-im2.contexts.quo-preview.list-items.address :as address]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
     [status-im2.contexts.quo-preview.list-items.dapp :as dapp]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
@@ -308,6 +309,8 @@
                         :component account-item/view}
                        {:name      :account-list-card
                         :component account-list-card/view}
+                       {:name      :address
+                        :component address/view}
                        {:name      :channel
                         :component channel/view}
                        {:name      :community-list