feat: implement saved address component (#17398)

Signed-off-by: Brian Sztamfater <[email protected]>

Author: briansztamfater

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

@@ -0,0 +1,51 @@
+(ns quo2.components.list-items.saved-address.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.list-items.saved-address.view :as saved-address]
+            [quo2.foundations.colors :as colors]))
+
+(h/describe "List items: saved address"
+  (h/test "default render"
+    (h/render [saved-address/view])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "on-press-in changes state to :pressed"
+    (h/render [saved-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 [saved-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 [saved-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 [saved-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-out calls on-press"
+    (let [on-press (h/mock-fn)]
+      (h/render [saved-address/view {:on-press on-press}])
+      (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/was-called on-press)))
+
+  (h/test "renders options button if type :action"
+    (let [on-options-press (h/mock-fn)]
+      (h/render [saved-address/view
+                 {:type             :action
+                  :on-options-press on-options-press}])
+      (h/is-truthy (h/query-by-label-text :options-button))
+      (h/fire-event :on-press (h/get-by-label-text :options-button))
+      (h/was-called on-options-press))))

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

@@ -0,0 +1,42 @@
+(ns quo2.components.list-items.saved-address.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn- background-color
+  [{:keys [state blur? customization-color]}]
+  (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
+  [props]
+  {:height             56
+   :border-radius      12
+   :background-color   (background-color props)
+   :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 name-text
+  {:height 22})
+
+(def account-container
+  {:margin-left 8})
+
+(defn account-address
+  [blur? theme]
+  {:color (if blur?
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})

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

@@ -0,0 +1,79 @@
+(ns quo2.components.list-items.saved-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.saved-address.style :as style]
+            [reagent.core :as reagent]
+            [quo2.components.icon :as icon]
+            [clojure.string :as string]))
+
+(defn- left-container
+  [{:keys [blur? theme name address customization-color]}]
+  (let [names      (remove string/blank? (string/split name " "))
+        first-name (if (> (count names) 0) (first names) "")
+        last-name  (if (> (count names) 1) (last names) "")]
+    [rn/view {:style style/left-container}
+     [wallet-user-avatar/wallet-user-avatar
+      {:size   :medium
+       :f-name first-name
+       :l-name last-name
+       :color  customization-color}]
+     [rn/view {:style style/account-container}
+      [text/text
+       {:weight :semi-bold
+        :size   :paragraph-1
+        :style  style/name-text}
+       name]
+      [text/text {:size :paragraph-2}
+       [text/text
+        {:size   :paragraph-2
+         :weight :monospace
+         :style  (style/account-address blur? theme)}
+        address]]]]))
+
+(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 [blur? user-props customization-color
+                 on-press
+                 on-options-press
+                 theme]
+          :or   {customization-color :blue
+                 blur?               false}}]
+      (let [on-press-out (fn []
+                           (let [new-state (if @active? :default :active)]
+                             (when @timer (js/clearTimeout @timer))
+                             (reset! timer nil)
+                             (reset! active? (= new-state :active))
+                             (reset! state new-state)
+                             (when on-press
+                               (on-press))))]
+        [rn/pressable
+         {:style               (style/container
+                                {:state @state :blur? blur? :customization-color customization-color})
+          :on-press-in         on-press-in
+          :on-press-out        on-press-out
+          :accessibility-label :container}
+         [left-container
+          {:blur?               blur?
+           :theme               theme
+           :name                (:name user-props)
+           :address             (:address user-props)
+           :customization-color (:customization-color user-props)}]
+         [rn/pressable
+          {:accessibility-label :options-button
+           :on-press            #(when on-options-press
+                                   (on-options-press))}
+          [icon/icon :i/options
+           {:color (if blur?
+                     colors/white-opa-70
+                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]]]))))
+
+(def view (quo.theme/with-theme internal-view))

src/quo2/core.cljs

@@ -70,6 +70,7 @@
     quo2.components.list-items.dapp.view
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list.view
+    quo2.components.list-items.saved-address.view
     quo2.components.list-items.token-value.view
     quo2.components.list-items.user-list
     quo2.components.loaders.skeleton-list.view
@@ -261,6 +262,7 @@
 (def preview-list quo2.components.list-items.preview-list.view/view)
 (def user-list quo2.components.list-items.user-list/user-list)
 (def community-list-item quo2.components.list-items.community.view/view)
+(def saved-address quo2.components.list-items.saved-address.view/view)
 (def token-value quo2.components.list-items.token-value.view/view)
 
 ;;;; Loaders

src/quo2/core_spec.cljs

@@ -40,6 +40,7 @@
     [quo2.components.list-items.channel.component-spec]
     [quo2.components.list-items.community.component-spec]
     [quo2.components.list-items.dapp.component-spec]
+    [quo2.components.list-items.saved-address.component-spec]
     [quo2.components.list-items.token-value.component-spec]
     [quo2.components.loaders.skeleton-list.component-spec]
     [quo2.components.markdown.text-component-spec]

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

@@ -0,0 +1,33 @@
+(ns status-im2.contexts.quo-preview.list-items.saved-address
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [(preview/customization-color-option {:key :account-color})
+   {:key :blur? :type :boolean}
+   {:key :title :type :text}
+   (preview/customization-color-option)])
+
+(defn view
+  []
+  (let [state (reagent/atom {:type                :default
+                             :customization-color :blue
+                             :account-color       :flamingo
+                             :title               "Alisher Yakupov"
+                             :address             "0x21a...49e"
+                             :on-options-press    #(js/alert "Options button pressed!")})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :blur-dark-only?       true}
+       [quo/saved-address
+        (assoc @state
+               :user-props
+               {:name                (:title @state)
+                :address             (:address @state)
+                :emoji               (:emoji @state)
+                :customization-color (:account-color @state)})]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -70,6 +70,7 @@
     [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]
+    [status-im2.contexts.quo-preview.list-items.saved-address :as saved-address]
     [status-im2.contexts.quo-preview.list-items.token-value :as token-value]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
     [status-im2.contexts.quo-preview.list-items.community-list :as community-list]
@@ -279,6 +280,8 @@
                         :component dapp/preview}
                        {:name      :preview-lists
                         :component preview-lists/view}
+                       {:name      :saved-address
+                        :component saved-address/view}
                        {:name      :token-value
                         :component token-value/view}
                        {:name      :user-list